SlideShare une entreprise Scribd logo
1  sur  46
Télécharger pour lire hors ligne
Análise e Design de Interação / Marcello Cardoso

                                                                                   aula 05/08
      Projetando a interface
            Task Flow + Prototipação rápida



                                     Projeto e Arquitetura de Aplicações Internet

                               Análise e Design de Interação
                               Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com

Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso



                                                                         Plano de curso
     1ª      Introdução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD),
             tipos de design, metas de usabilidade, princípios de design.

     2ª      Conversando com usuários: Questionários e entrevistas                                15pts

     3ª      Técnica de Modelagem: Personas ágeis (workshop)                                      10pts

     4ª      Separando releases: User Story Mapping                                               15pts

     5ª      Projetando a interface: Task Flow + Prototipação rápida (workshop)                   10pts

     6ª      Perguntando a especialistas: Análise Heurística, As 10 heurísticas de                20pts
             Nielsen (workshop)

     7ª      Testes de usabilidade (workshop - roteiro)                                           15pts

     8ª      Testes de usabilidade (workshop - aplicação)                                         15pts




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso

                                       Ciclo de vida do produto




                                            to
             jam isa
                  to



                                          en




                                                             o
           ne qu




                                                           çã
                en



                                      lvim




                                                       lida
        pla pes




                                    vo
                                 sen




                                                     va
                               de




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso


                               Questionários Ciclo de vida do produto
                                             e
        rking                  entrevistas
    chma
 Ben




                                                to
             jam isa
                  to



                                              en




                                                                 o
           ne qu




                                                               çã
                en



                                          lvim




                                                           lida
        pla pes




                                        vo
                                     sen




                                                         va
                                   de



                Stor                    rototipação
                                       p
               map y
                  ping           personas
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                               Prototipação
                               quebrando ovos para fazer omeletes
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




        Protótipo ~ modelo
                  =

Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                               Modelos
          São ferramentas simples e poderosas para melhorar a
          visibilidade, compreensão e a comunicação de informações.




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




          Podem ser de baixa ou alta resolução
          Baixa: Para explorar ideias, conceitos, fluxos
          Alta: para validar decisões pontuais




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




      “Devemos criar exatamente quanta
     documentação necessitamos para
     executar bem um projeto, e não mais.”
                                -Dan Saffer




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




    Nós <3 PAPEL!
  • Nada digital é mais rápido, flexível e fácil de prototipar
  • Não requer habilidades específicas
  • É mais barato e colaborativo;
  • Variedade = possibilidades: Diferentes cores, tamanhos,
    texturas, adesivos..

  • Tamanho é documento (difícil ter um monitor do
    tamanho de uma cartolina)

  • Estimula desapego
  • Reciclável, divertido, estimula a equipe

Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




           Cenário
           “São protótipos feitos de palavras”


        • Os protagonistas são as PERSONAS
        • Devem refletir comportamento no sistema
        • Uma boa prática é passar diferentes personas pelo
          mesmo cenário
        • Um bom cenário é imaginar o primeiro uso



Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




          Cenário
          Uma imagem vale mil palavras.
          Mas as palavras certas podem valer algumas boas imagens.



           Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana
           passada e decide usá-lo de novo para esta semana. Remove alguns itens
           arrastando-os de sua Cestinha®, e o valor ajusta automaticamente.
           Satisfeita com a compra, clica no botão Entrega rápida e confirma o
           débito em seu cartão de crédito previamente salvo. A tela de
           confirmação informa para esperar a entrega nas próximas 2 horas.




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                                  TO DO                 DONE


           EM GRUPO!
           Criar um cenário (primeiro uso ou
           tarefa chave) e aplicá-lo em sua
           Persona Focal + outra criada por seu
           grupo, a sua escolha



            tempo: 15’




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




       Task flows
       diagrama de fluxo
  • Fluxos são tão importantes quanto telas
  • Quanto mais “cascata”, mais robusto e formal o task flow




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




   Task flows
   diagrama de fluxo




Thursday, September 22, 2011
FFFFFFFF
                               Análise e Design de Interação / Marcello Cardoso




FFFFFFFF
FFFFFFFF
UUUUUUU
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




       Task flows
       diagrama de fluxo

      Fluxos são interações de um indivíduo, elementos / escolhas




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




       Task flows
       diagrama de fluxo

         Exemplo: Adicionando um item na TO-DO do Basecamp.




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




       Task flows
       diagrama de fluxo
        • É rápido de fazer e simples de enxergar.
        • Ideal para sprints!




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                                        Task flows
                                        diagrama de fluxo




    Estrutura
        •   Barra separa a UI da ação
        •   Barra pontilhada separa as opções para mesma ação
        •   Setas vão da ação para a nova UI
        •   Se a UI for fora de escopo, mantém simples, sem ação

Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                                      TO DO                                   DONE




           EM GRUPO!
                                         principal
                         xo da  tarefa
            d efinir flu
                                     po)
                        se  der tem
             (e mais,                       uso.
                         ndo os  casos de
              considera


                        ’
               tempo: 15



Thursday, September 22, 2011                         sequência de uso
Análise e Design de Interação / Marcello Cardoso




                               Rascunhos

Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




 Rascunhos
 • Ideias primárias, generalistas, fluxos.
 • São feios! estimulam a discussão sobre função e uso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                       Storyboards

Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                               Storyboards
             Técnica da publicidade, HQs e cinema, que ilustra
                          interações complexas




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




      Storyboards
    • Imagens + legendas
    • Ilustram fluxos, momentos chave
    • Casos de uso
    • Mostram ambientes e contextos
    • Complementam wireframes


Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




               Wireframes
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




               Wireframes
                protótipos estruturais do sistema



Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




               Wireframes
                protótipos estruturais do sistema
                 Registram as funcionalidades do produto, seus aspectos técnicos e sua
                 lógica de negócios, sem a influência do design visual (branding, layout)




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




               Wireframes
                protótipos estruturais do sistema
                 Registram as funcionalidades do produto, seus aspectos técnicos e sua
                 lógica de negócios, sem a influência do design visual (branding, layout)
                 Podem ser usados para validar ideias


Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




               Wireframes
                protótipos estruturais do sistema
                 Registram as funcionalidades do produto, seus aspectos técnicos e sua
                 lógica de negócios, sem a influência do design visual (branding, layout)
                 Podem ser usados para validar ideias
                Podem ser usados para testes com usuários


Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




           Wireframes
           Substituem documentos mais burocráticos, são
           especificações visuais comprometidas com:


                 • Estrutura
                 • Arquitetura da informação
                 • Controles (padrões de interação)
                 • Conteúdo



Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




       papel=desapego
Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




         Prototipando e testando lo fi
            http://www.youtube.com/watch?v=k9mTvt0LXgk




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso

                               Exemplos: software (fireworks)

             wireouts




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso

                               Exemplos: software (fireworks)

                 layouts




Thursday, September 22, 2011
Análise e Design de Interação / Marcello Cardoso




                                     EM
                                          G
                                    Prot RUPO!
                                         o
                                   rasc tipar e
                                       unho        m c
                                             s, ou     ima
                                 tem               refin dos
                                     po: r              á-lo
                                           esto              s
                                                 da a
                                                      ula


                                                           os
                                            é   ágil, podem
                           Lembrem que isso idido.
                                              c
                           mudar o que foi de

                                 DEAÇÃO = CAOS!
Thursday, September 22, 2011
                               I
Análise e Design de Interação / Marcello Cardoso




                                      igad o!
                               o br
                                       Este arquivo contém a apresentação realizada por Marcello de
                                       Campos Cardoso, em Setembro de 2011, para a disciplina Análise
                                       e Design de Interação, ministrada no curso de especialização em
                                       Projeto e Arquitetura de Aplicações Internet na Faculdade
                                       COTEMIG.



Thursday, September 22, 2011

Contenu connexe

Tendances

Usabilidade 4 - User Story Mapping
Usabilidade 4 - User Story MappingUsabilidade 4 - User Story Mapping
Usabilidade 4 - User Story MappingMarcello Cardoso
 
Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Marcello Cardoso
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04Marcello Cardoso
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Marcello Cardoso
 
Design de Interação - SECOMP 2011
Design de Interação - SECOMP 2011Design de Interação - SECOMP 2011
Design de Interação - SECOMP 2011Paulo Cesar
 
Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!Monica Possel
 
Inovação Centrada no Usuário
Inovação Centrada no UsuárioInovação Centrada no Usuário
Inovação Centrada no UsuárioMourylise Heymer
 
Cap 6 O Processo De Design De InteraçãO
Cap 6 O Processo De Design De InteraçãOCap 6 O Processo De Design De InteraçãO
Cap 6 O Processo De Design De InteraçãOMarcelo Bitencourt
 
Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interaçãoLuiz Agner
 
DNAD 2011 - Examinando a Arquitetura Evolucionária
DNAD 2011 - Examinando a Arquitetura EvolucionáriaDNAD 2011 - Examinando a Arquitetura Evolucionária
DNAD 2011 - Examinando a Arquitetura EvolucionáriaLeandro Daniel
 
PAAI/DI - 02 - Entrevistas e questionários
PAAI/DI - 02 - Entrevistas e questionáriosPAAI/DI - 02 - Entrevistas e questionários
PAAI/DI - 02 - Entrevistas e questionáriosMarcello Cardoso
 
Usabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeisUsabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeisMarcello Cardoso
 
Introdução ao Design de Interação
Introdução ao Design de InteraçãoIntrodução ao Design de Interação
Introdução ao Design de InteraçãoUTFPR
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosUTFPR
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Mourylise Heymer
 
Usabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasUsabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasAlan Vasconcelos
 
O Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de InteraçãoO Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de InteraçãoUTFPR
 

Tendances (20)

Usabilidade 4 - User Story Mapping
Usabilidade 4 - User Story MappingUsabilidade 4 - User Story Mapping
Usabilidade 4 - User Story Mapping
 
Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06
 
PUC/PFC - Prototipação
PUC/PFC - PrototipaçãoPUC/PFC - Prototipação
PUC/PFC - Prototipação
 
Design de Interação - SECOMP 2011
Design de Interação - SECOMP 2011Design de Interação - SECOMP 2011
Design de Interação - SECOMP 2011
 
Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!
 
Inovação Centrada no Usuário
Inovação Centrada no UsuárioInovação Centrada no Usuário
Inovação Centrada no Usuário
 
Cap 6 O Processo De Design De InteraçãO
Cap 6 O Processo De Design De InteraçãOCap 6 O Processo De Design De InteraçãO
Cap 6 O Processo De Design De InteraçãO
 
Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interação
 
PUC/PFC - Personas Ágeis
PUC/PFC -  Personas ÁgeisPUC/PFC -  Personas Ágeis
PUC/PFC - Personas Ágeis
 
DNAD 2011 - Examinando a Arquitetura Evolucionária
DNAD 2011 - Examinando a Arquitetura EvolucionáriaDNAD 2011 - Examinando a Arquitetura Evolucionária
DNAD 2011 - Examinando a Arquitetura Evolucionária
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
PAAI/DI - 02 - Entrevistas e questionários
PAAI/DI - 02 - Entrevistas e questionáriosPAAI/DI - 02 - Entrevistas e questionários
PAAI/DI - 02 - Entrevistas e questionários
 
Usabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeisUsabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeis
 
Introdução ao Design de Interação
Introdução ao Design de InteraçãoIntrodução ao Design de Interação
Introdução ao Design de Interação
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos Eletrônicos
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
 
Usabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasUsabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: Personas
 
O Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de InteraçãoO Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de Interação
 

En vedette

Usabilidade 6 - Prototipação
Usabilidade 6 - PrototipaçãoUsabilidade 6 - Prototipação
Usabilidade 6 - PrototipaçãoMarcello Cardoso
 
Styleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projetoStyleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projetoDaniel Ranzi Werle
 
Design Centrado no Usuário - 3 passos para o produto perfeito
Design Centrado no Usuário - 3 passos para o produto perfeitoDesign Centrado no Usuário - 3 passos para o produto perfeito
Design Centrado no Usuário - 3 passos para o produto perfeitoMarcello Cardoso
 
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcuUsabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcuMarcello Cardoso
 
MTA2 - Análise Heurística
MTA2 - Análise HeurísticaMTA2 - Análise Heurística
MTA2 - Análise HeurísticaMarcello Cardoso
 
Workshop de User Experience com Rafael Daron
Workshop de User Experience com Rafael DaronWorkshop de User Experience com Rafael Daron
Workshop de User Experience com Rafael DaronRafael Citadella Daron
 
Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Marcello Cardoso
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenRos Galabo, PhD
 
Usabilidade 7-8 - Teste de Usabilidade
Usabilidade 7-8 - Teste de UsabilidadeUsabilidade 7-8 - Teste de Usabilidade
Usabilidade 7-8 - Teste de UsabilidadeMarcello Cardoso
 
Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaMarcello Cardoso
 
3 critérios ergonômicos
3  critérios ergonômicos3  critérios ergonômicos
3 critérios ergonômicosEdson Soares
 
Usabilidade 5 - Análise Heurística
Usabilidade 5 - Análise HeurísticaUsabilidade 5 - Análise Heurística
Usabilidade 5 - Análise HeurísticaMarcello Cardoso
 
Slides Usabilidade
Slides UsabilidadeSlides Usabilidade
Slides UsabilidadeBarbara_z
 
Usabilidade e Estratégia
Usabilidade  e EstratégiaUsabilidade  e Estratégia
Usabilidade e EstratégiaLuiz Agner
 
Capitulo 7 Livro Nielsen
Capitulo 7 Livro NielsenCapitulo 7 Livro Nielsen
Capitulo 7 Livro NielsenLuiz Agner
 

En vedette (19)

MTA2 - Card Sorting
MTA2 - Card SortingMTA2 - Card Sorting
MTA2 - Card Sorting
 
Usabilidade 6 - Prototipação
Usabilidade 6 - PrototipaçãoUsabilidade 6 - Prototipação
Usabilidade 6 - Prototipação
 
Heurística de Nielsen
Heurística de NielsenHeurística de Nielsen
Heurística de Nielsen
 
Por que Arquitetura de Informação e Usabilidade são importantes?
Por que Arquitetura de Informação e Usabilidade são importantes?Por que Arquitetura de Informação e Usabilidade são importantes?
Por que Arquitetura de Informação e Usabilidade são importantes?
 
Styleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projetoStyleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projeto
 
Design Centrado no Usuário - 3 passos para o produto perfeito
Design Centrado no Usuário - 3 passos para o produto perfeitoDesign Centrado no Usuário - 3 passos para o produto perfeito
Design Centrado no Usuário - 3 passos para o produto perfeito
 
Usabilidade 1 - Conceitos
Usabilidade 1 - ConceitosUsabilidade 1 - Conceitos
Usabilidade 1 - Conceitos
 
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcuUsabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcu
 
MTA2 - Análise Heurística
MTA2 - Análise HeurísticaMTA2 - Análise Heurística
MTA2 - Análise Heurística
 
Workshop de User Experience com Rafael Daron
Workshop de User Experience com Rafael DaronWorkshop de User Experience com Rafael Daron
Workshop de User Experience com Rafael Daron
 
Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
 
Usabilidade 7-8 - Teste de Usabilidade
Usabilidade 7-8 - Teste de UsabilidadeUsabilidade 7-8 - Teste de Usabilidade
Usabilidade 7-8 - Teste de Usabilidade
 
Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção Semiótica
 
3 critérios ergonômicos
3  critérios ergonômicos3  critérios ergonômicos
3 critérios ergonômicos
 
Usabilidade 5 - Análise Heurística
Usabilidade 5 - Análise HeurísticaUsabilidade 5 - Análise Heurística
Usabilidade 5 - Análise Heurística
 
Slides Usabilidade
Slides UsabilidadeSlides Usabilidade
Slides Usabilidade
 
Usabilidade e Estratégia
Usabilidade  e EstratégiaUsabilidade  e Estratégia
Usabilidade e Estratégia
 
Capitulo 7 Livro Nielsen
Capitulo 7 Livro NielsenCapitulo 7 Livro Nielsen
Capitulo 7 Livro Nielsen
 

Similaire à PAAI/DI - 05 - Prototipação

MTA2 - Método de Inspeção Semiótica (MIS)
MTA2 - Método de Inspeção Semiótica (MIS)MTA2 - Método de Inspeção Semiótica (MIS)
MTA2 - Método de Inspeção Semiótica (MIS)Marcello Cardoso
 
PAAI/DI - 07-08 - Teste de usabilidade
PAAI/DI - 07-08 - Teste de usabilidadePAAI/DI - 07-08 - Teste de usabilidade
PAAI/DI - 07-08 - Teste de usabilidadeMarcello Cardoso
 
UNA - Eng Usa '12 - aula 05
UNA  - Eng Usa '12 - aula 05UNA  - Eng Usa '12 - aula 05
UNA - Eng Usa '12 - aula 05Marcello Cardoso
 
Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Marcello Cardoso
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot CampUTFPR
 
UNA - Eng Usa '12 - aula 02
UNA  - Eng Usa '12 - aula 02UNA  - Eng Usa '12 - aula 02
UNA - Eng Usa '12 - aula 02Marcello Cardoso
 
Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Marcello Cardoso
 
User Experience - Por que não projetar com foco no usuário pode ser fatal
User Experience - Por que não projetar com foco no usuário pode ser fatalUser Experience - Por que não projetar com foco no usuário pode ser fatal
User Experience - Por que não projetar com foco no usuário pode ser fatalRafael Burity
 
User Experience - Por que NÃO projetar com foco no usuário pode ser fatal
User Experience - Por que NÃO projetar com foco no usuário pode ser fatalUser Experience - Por que NÃO projetar com foco no usuário pode ser fatal
User Experience - Por que NÃO projetar com foco no usuário pode ser fatalAtech S.A. | Embraer Group
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioSilvia Dotta
 
AE Rio 2011 - AOGEA-Brasil - Roberto Severo
AE Rio 2011 - AOGEA-Brasil - Roberto SeveroAE Rio 2011 - AOGEA-Brasil - Roberto Severo
AE Rio 2011 - AOGEA-Brasil - Roberto SeveroFernando Botafogo
 
Aula Teste Fatec Engenharia de Software III
Aula Teste  Fatec Engenharia de Software IIIAula Teste  Fatec Engenharia de Software III
Aula Teste Fatec Engenharia de Software IIIDalton Martins
 
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...Wagner Tironi Pinto
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Jane Vita
 
Arquitetura, Arquitetos, EA e Frameworks
Arquitetura, Arquitetos, EA e FrameworksArquitetura, Arquitetos, EA e Frameworks
Arquitetura, Arquitetos, EA e FrameworksAEA Brazil Chapter
 
Agile br2011 lucabastos-prog10x-noiteagilcaelum
Agile br2011 lucabastos-prog10x-noiteagilcaelumAgile br2011 lucabastos-prog10x-noiteagilcaelum
Agile br2011 lucabastos-prog10x-noiteagilcaelumLuca Bastos
 

Similaire à PAAI/DI - 05 - Prototipação (20)

MTA2 - Método de Inspeção Semiótica (MIS)
MTA2 - Método de Inspeção Semiótica (MIS)MTA2 - Método de Inspeção Semiótica (MIS)
MTA2 - Método de Inspeção Semiótica (MIS)
 
MTA2 - Percurso Cognitivo
MTA2 - Percurso CognitivoMTA2 - Percurso Cognitivo
MTA2 - Percurso Cognitivo
 
PAAI/DI - 07-08 - Teste de usabilidade
PAAI/DI - 07-08 - Teste de usabilidadePAAI/DI - 07-08 - Teste de usabilidade
PAAI/DI - 07-08 - Teste de usabilidade
 
UNA - Eng Usa '12 - aula 05
UNA  - Eng Usa '12 - aula 05UNA  - Eng Usa '12 - aula 05
UNA - Eng Usa '12 - aula 05
 
Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
UNA - Eng Usa '12 - aula 02
UNA  - Eng Usa '12 - aula 02UNA  - Eng Usa '12 - aula 02
UNA - Eng Usa '12 - aula 02
 
Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
User Experience - Por que não projetar com foco no usuário pode ser fatal
User Experience - Por que não projetar com foco no usuário pode ser fatalUser Experience - Por que não projetar com foco no usuário pode ser fatal
User Experience - Por que não projetar com foco no usuário pode ser fatal
 
User Experience - Por que NÃO projetar com foco no usuário pode ser fatal
User Experience - Por que NÃO projetar com foco no usuário pode ser fatalUser Experience - Por que NÃO projetar com foco no usuário pode ser fatal
User Experience - Por que NÃO projetar com foco no usuário pode ser fatal
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o Usuário
 
Ux para software
Ux para softwareUx para software
Ux para software
 
CInTeQ 2011
CInTeQ 2011CInTeQ 2011
CInTeQ 2011
 
AE Rio 2011 - AOGEA-Brasil - Roberto Severo
AE Rio 2011 - AOGEA-Brasil - Roberto SeveroAE Rio 2011 - AOGEA-Brasil - Roberto Severo
AE Rio 2011 - AOGEA-Brasil - Roberto Severo
 
Aula Teste Fatec Engenharia de Software III
Aula Teste  Fatec Engenharia de Software IIIAula Teste  Fatec Engenharia de Software III
Aula Teste Fatec Engenharia de Software III
 
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
Arquitetura, Arquitetos, EA e Frameworks
Arquitetura, Arquitetos, EA e FrameworksArquitetura, Arquitetos, EA e Frameworks
Arquitetura, Arquitetos, EA e Frameworks
 
Agile br2011 lucabastos-prog10x-noiteagilcaelum
Agile br2011 lucabastos-prog10x-noiteagilcaelumAgile br2011 lucabastos-prog10x-noiteagilcaelum
Agile br2011 lucabastos-prog10x-noiteagilcaelum
 

Plus de Marcello Cardoso

Aula 3 - DEFININDO O PRODUTO
Aula 3 - DEFININDO O PRODUTOAula 3 - DEFININDO O PRODUTO
Aula 3 - DEFININDO O PRODUTOMarcello Cardoso
 
Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMMarcello Cardoso
 
DI - Questionários e entrevistas
DI - Questionários e entrevistasDI - Questionários e entrevistas
DI - Questionários e entrevistasMarcello Cardoso
 
Tudo sobre Design de Interação
Tudo sobre Design de InteraçãoTudo sobre Design de Interação
Tudo sobre Design de InteraçãoMarcello Cardoso
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da InformaçãoMarcello Cardoso
 
Palestra o marketing não funciona mais sozinho - Fumsoft
Palestra   o marketing não funciona mais sozinho - FumsoftPalestra   o marketing não funciona mais sozinho - Fumsoft
Palestra o marketing não funciona mais sozinho - FumsoftMarcello Cardoso
 
UNA - Eng Usa '12 - aula 01
UNA  - Eng Usa '12 - aula 01UNA  - Eng Usa '12 - aula 01
UNA - Eng Usa '12 - aula 01Marcello Cardoso
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Marcello Cardoso
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Marcello Cardoso
 

Plus de Marcello Cardoso (16)

Aula 3 - DEFININDO O PRODUTO
Aula 3 - DEFININDO O PRODUTOAula 3 - DEFININDO O PRODUTO
Aula 3 - DEFININDO O PRODUTO
 
Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PM
 
Personas 2019
Personas 2019Personas 2019
Personas 2019
 
Percurso cognitivo
Percurso cognitivoPercurso cognitivo
Percurso cognitivo
 
DI - Questionários e entrevistas
DI - Questionários e entrevistasDI - Questionários e entrevistas
DI - Questionários e entrevistas
 
Tudo sobre Design de Interação
Tudo sobre Design de InteraçãoTudo sobre Design de Interação
Tudo sobre Design de Interação
 
Framework Cardoso
Framework CardosoFramework Cardoso
Framework Cardoso
 
User Story Mapping
User Story MappingUser Story Mapping
User Story Mapping
 
Card Sorting
Card SortingCard Sorting
Card Sorting
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Prototipação
PrototipaçãoPrototipação
Prototipação
 
Palestra o marketing não funciona mais sozinho - Fumsoft
Palestra   o marketing não funciona mais sozinho - FumsoftPalestra   o marketing não funciona mais sozinho - Fumsoft
Palestra o marketing não funciona mais sozinho - Fumsoft
 
UNA - Eng Usa '12 - aula 01
UNA  - Eng Usa '12 - aula 01UNA  - Eng Usa '12 - aula 01
UNA - Eng Usa '12 - aula 01
 
Una testes - aula 07 e 08
Una   testes - aula 07 e 08Una   testes - aula 07 e 08
Una testes - aula 07 e 08
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03
 

PAAI/DI - 05 - Prototipação

  • 1. Análise e Design de Interação / Marcello Cardoso aula 05/08 Projetando a interface Task Flow + Prototipação rápida Projeto e Arquitetura de Aplicações Internet Análise e Design de Interação Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com Thursday, September 22, 2011
  • 2. Análise e Design de Interação / Marcello Cardoso Plano de curso 1ª Introdução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD), tipos de design, metas de usabilidade, princípios de design. 2ª Conversando com usuários: Questionários e entrevistas 15pts 3ª Técnica de Modelagem: Personas ágeis (workshop) 10pts 4ª Separando releases: User Story Mapping 15pts 5ª Projetando a interface: Task Flow + Prototipação rápida (workshop) 10pts 6ª Perguntando a especialistas: Análise Heurística, As 10 heurísticas de 20pts Nielsen (workshop) 7ª Testes de usabilidade (workshop - roteiro) 15pts 8ª Testes de usabilidade (workshop - aplicação) 15pts Thursday, September 22, 2011
  • 3. Análise e Design de Interação / Marcello Cardoso Ciclo de vida do produto to jam isa to en o ne qu çã en lvim lida pla pes vo sen va de Thursday, September 22, 2011
  • 4. Análise e Design de Interação / Marcello Cardoso Questionários Ciclo de vida do produto e rking entrevistas chma Ben to jam isa to en o ne qu çã en lvim lida pla pes vo sen va de Stor rototipação p map y ping personas Thursday, September 22, 2011
  • 5. Análise e Design de Interação / Marcello Cardoso Prototipação quebrando ovos para fazer omeletes Thursday, September 22, 2011
  • 6. Análise e Design de Interação / Marcello Cardoso Protótipo ~ modelo = Thursday, September 22, 2011
  • 7. Análise e Design de Interação / Marcello Cardoso Modelos São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações. Thursday, September 22, 2011
  • 8. Análise e Design de Interação / Marcello Cardoso Podem ser de baixa ou alta resolução Baixa: Para explorar ideias, conceitos, fluxos Alta: para validar decisões pontuais Thursday, September 22, 2011
  • 9. Análise e Design de Interação / Marcello Cardoso “Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.” -Dan Saffer Thursday, September 22, 2011
  • 10. Análise e Design de Interação / Marcello Cardoso Nós <3 PAPEL! • Nada digital é mais rápido, flexível e fácil de prototipar • Não requer habilidades específicas • É mais barato e colaborativo; • Variedade = possibilidades: Diferentes cores, tamanhos, texturas, adesivos.. • Tamanho é documento (difícil ter um monitor do tamanho de uma cartolina) • Estimula desapego • Reciclável, divertido, estimula a equipe Thursday, September 22, 2011
  • 11. Análise e Design de Interação / Marcello Cardoso Cenário “São protótipos feitos de palavras” • Os protagonistas são as PERSONAS • Devem refletir comportamento no sistema • Uma boa prática é passar diferentes personas pelo mesmo cenário • Um bom cenário é imaginar o primeiro uso Thursday, September 22, 2011
  • 12. Análise e Design de Interação / Marcello Cardoso Cenário Uma imagem vale mil palavras. Mas as palavras certas podem valer algumas boas imagens. Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana passada e decide usá-lo de novo para esta semana. Remove alguns itens arrastando-os de sua Cestinha®, e o valor ajusta automaticamente. Satisfeita com a compra, clica no botão Entrega rápida e confirma o débito em seu cartão de crédito previamente salvo. A tela de confirmação informa para esperar a entrega nas próximas 2 horas. Thursday, September 22, 2011
  • 13. Análise e Design de Interação / Marcello Cardoso TO DO DONE EM GRUPO! Criar um cenário (primeiro uso ou tarefa chave) e aplicá-lo em sua Persona Focal + outra criada por seu grupo, a sua escolha tempo: 15’ Thursday, September 22, 2011
  • 14. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo • Fluxos são tão importantes quanto telas • Quanto mais “cascata”, mais robusto e formal o task flow Thursday, September 22, 2011
  • 15. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo Thursday, September 22, 2011
  • 16. FFFFFFFF Análise e Design de Interação / Marcello Cardoso FFFFFFFF FFFFFFFF UUUUUUU Thursday, September 22, 2011
  • 17. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo Fluxos são interações de um indivíduo, elementos / escolhas Thursday, September 22, 2011
  • 18. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo Exemplo: Adicionando um item na TO-DO do Basecamp. Thursday, September 22, 2011
  • 19. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo • É rápido de fazer e simples de enxergar. • Ideal para sprints! Thursday, September 22, 2011
  • 20. Análise e Design de Interação / Marcello Cardoso Task flows diagrama de fluxo Estrutura • Barra separa a UI da ação • Barra pontilhada separa as opções para mesma ação • Setas vão da ação para a nova UI • Se a UI for fora de escopo, mantém simples, sem ação Thursday, September 22, 2011
  • 21. Análise e Design de Interação / Marcello Cardoso TO DO DONE EM GRUPO! principal xo da tarefa d efinir flu po) se der tem (e mais, uso. ndo os casos de considera ’ tempo: 15 Thursday, September 22, 2011 sequência de uso
  • 22. Análise e Design de Interação / Marcello Cardoso Rascunhos Thursday, September 22, 2011
  • 23. Análise e Design de Interação / Marcello Cardoso Rascunhos • Ideias primárias, generalistas, fluxos. • São feios! estimulam a discussão sobre função e uso Thursday, September 22, 2011
  • 24. Análise e Design de Interação / Marcello Cardoso Storyboards Thursday, September 22, 2011
  • 25. Análise e Design de Interação / Marcello Cardoso Storyboards Técnica da publicidade, HQs e cinema, que ilustra interações complexas Thursday, September 22, 2011
  • 26. Análise e Design de Interação / Marcello Cardoso Storyboards • Imagens + legendas • Ilustram fluxos, momentos chave • Casos de uso • Mostram ambientes e contextos • Complementam wireframes Thursday, September 22, 2011
  • 27. Análise e Design de Interação / Marcello Cardoso Wireframes Thursday, September 22, 2011
  • 28. Análise e Design de Interação / Marcello Cardoso Wireframes protótipos estruturais do sistema Thursday, September 22, 2011
  • 29. Análise e Design de Interação / Marcello Cardoso Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout) Thursday, September 22, 2011
  • 30. Análise e Design de Interação / Marcello Cardoso Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout) Podem ser usados para validar ideias Thursday, September 22, 2011
  • 31. Análise e Design de Interação / Marcello Cardoso Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout) Podem ser usados para validar ideias Podem ser usados para testes com usuários Thursday, September 22, 2011
  • 32. Análise e Design de Interação / Marcello Cardoso Wireframes Substituem documentos mais burocráticos, são especificações visuais comprometidas com: • Estrutura • Arquitetura da informação • Controles (padrões de interação) • Conteúdo Thursday, September 22, 2011
  • 33. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 34. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 35. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 36. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 37. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 38. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 39. Análise e Design de Interação / Marcello Cardoso papel=desapego Thursday, September 22, 2011
  • 40. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 41. Análise e Design de Interação / Marcello Cardoso Thursday, September 22, 2011
  • 42. Análise e Design de Interação / Marcello Cardoso Prototipando e testando lo fi http://www.youtube.com/watch?v=k9mTvt0LXgk Thursday, September 22, 2011
  • 43. Análise e Design de Interação / Marcello Cardoso Exemplos: software (fireworks) wireouts Thursday, September 22, 2011
  • 44. Análise e Design de Interação / Marcello Cardoso Exemplos: software (fireworks) layouts Thursday, September 22, 2011
  • 45. Análise e Design de Interação / Marcello Cardoso EM G Prot RUPO! o rasc tipar e unho m c s, ou ima tem refin dos po: r á-lo esto s da a ula os é ágil, podem Lembrem que isso idido. c mudar o que foi de DEAÇÃO = CAOS! Thursday, September 22, 2011 I
  • 46. Análise e Design de Interação / Marcello Cardoso igad o! o br Este arquivo contém a apresentação realizada por Marcello de Campos Cardoso, em Setembro de 2011, para a disciplina Análise e Design de Interação, ministrada no curso de especialização em Projeto e Arquitetura de Aplicações Internet na Faculdade COTEMIG. Thursday, September 22, 2011