SlideShare une entreprise Scribd logo
1  sur  93
Télécharger pour lire hors ligne
Design, usabilidade e arquitetura de informação / Marcello Cardoso

                                                                                      aula 05/06
                 Perguntando a especialistas
                               As 10 heurísticas de Nielsen




                                                 Pós Graduação em Marketing Digital
        Design, usabilidade e arquitetura de informação
                           Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com

Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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                                         20pts


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


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


     5ª       Perguntando a especialistas: As 10 heurísticas de Nielsen (workshop)                          20pts


     6ª       Percurso cognitivo: Avaliando tarefas                                                         20pts



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           Questionários
                                         e
        rking              entrevistas
    chma
 Ben




                                            to
              jam isa
                   to



                                          en




                                                                  o
            ne qu




                                                                çã
                 en



                                      lvim




                                                            lida
         pla pes




                                    vo
                                 sen




                                                          va
                               de



                                     rototipação
                                    p                                     urística
                                                                Análise He
                             personas
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                                                                             Avaliação da


                                 Onde aplicar?
                                                                               Interface
                                                                            pode ser aplicada
                                                                             em protótipos


                             Reunião diária



                                                                                  Produto
            Backlog do     Backlog do          Avaliação da                   potencialmente
             produto         sprint              Interface                      “entregável”
                                              pode ser aplicada
                                                em releases




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           Análise Heurística
                           as 10 heurísticas de Jakob Nielsen


Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           Análise Heurística
                           as 10 heurísticas de Jakob Nielsen


Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           Análise Heurística
                           as 10 heurísticas de Jakob Nielsen


Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           Análise Heurística
                           as 10 heurísticas de Jakob Nielsen


Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




    Definição
    “Análise Heurística (Nielsen and Molich, 1990; Nielsen 1994) é um método
    de engenharia de usabilidade para encontrar os erros de usabilidade em
    uma interface para que sejam corrigidos em um processo de
    desenvolvimento iterativo.


    Envolve um pequeno grupo de avaliadores para examinar a
    interface e avaliá-la de acordo com princípios de usabilidade
    reconhecidos (as heurísticas).” - Nielsen



     Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications of the ACM 33, 3 (March).
     Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf.
     Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI'94 Conf.
     Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                    =
        Heurísticas ~ Metas de usabilidade
        Metas são princípios generalistas que norteiam o desenvolvimento
        Heurísticas são diretrizes técnicas para a avaliação de interfaces


Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                                          J akob Nielsen
                                                                            lsen se
                                                 cam po da usabilidade, Nie
                           O principal nome no                                    ágeis desde
                                                   em me   todologias baratas e
                           popularizou por focar
                           os anos 90.
                                                                               s para
                                                   ar pe squisas quantitativa
                            É conhecido por realiz
                                                        ertas.
                            fund amentar suas descob
                                                                                        urística.
                                                  nhecida e difu  ndida é a análise he
                            Sua prática mais co




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




    Origem                 (1990)
    As heurísticas originais surgiram da análise de   249 problemas, identificados a
    partir de avaliações realizadas por especialistas em 11   projetos.

       ✓ 4 avaliados durante a fase inicial do ciclo de vida

       ✓ 7 avaliados em uma fase avançada;




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Como fazer?
       1º passo: Briefing
              • Os avaliadores discutem os critérios da avaliação como tarefas por exemplo
       2º passo: Avaliação (cerca de 2h)
              • Independente
              • Double check - 1 para fluxo e tarefas e outro para interface e elementos
       3º passo: Reunião de resultados e relatório
              • Discutir problemas
              • Priorizá-los
              • Elaborar recomendações e soluções



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Como fazer?
       1º passo: Briefing
              • Os avaliadores discutem os critérios da avaliação como tarefas por exemplo
       2º passo: Avaliação (cerca de 2h)
              • Independente
              • Double check - 1 para fluxo e tarefas e outro para interface e elementos
       3º passo: Reunião de resultados e relatório
              • Discutir problemas
              • Priorizá-los
              • Elaborar recomendações e soluções



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Como fazer?
       1º passo: Briefing
              • Os avaliadores discutem os critérios da avaliação como tarefas por exemplo
       2º passo: Avaliação (cerca de 2h)
              • Independente
              • Double check - 1 para fluxo e tarefas e outro para interface e elementos
       3º passo: Reunião de resultados e relatório
              • Discutir problemas
              • Priorizá-los
              • Elaborar recomendações e soluções



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                                                              !%




                                                        !$




                                              !"
                                                        !#




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                                                              !%




                                                        !$




                                              !"
                                                        !#




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




     Análise Heurística
                                vs
                           Testes com usuários

Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Diferenças
        Análise Heurística - preditiva
        Baseada na experiência/expectativas do especialista




                                                              Testes com usuários - empírica
                                                                       Baseada na observação do comportamento



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




   Semelhanças
     São técnicas analíticas, não gerativas (ideação) como Story Mapping ou Card Sorting.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       10 Heurísticas de Jakob Nielsen
       1. Visibilidade do status do sistema (feedback)
       2. Compatibilidade do sistema com o mundo real (affordance)
       3. Controle do usuário e liberdade
       4. Consistência e padrões
       5. Prevenção de erros
       6. Reconhecer em vez de relembrar
       7. Flexibilidade e eficiência no uso
       8. Estética e design minimalista
       9. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros
       10. Ajuda e documentação



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        1. Visibilidade do status do sistema (feedback)
                 O sistema deve informar continuamente e apropriadamente ao
                   usuário sobre o que ele está fazendo, em tempo razoável.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        1. Visibilidade do status do sistema (feedback)




         Vou fazer um café...



       Mais fácil de entender.

Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        1. Visibilidade do status do sistema (feedback)




                           LOG deixa tudo mais claro.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        1. Visibilidade do status do sistema (feedback)




                                                                                !
                                                                        th e fly
                                                                On




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        1. Visibilidade do status do sistema (feedback)




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real
                  A terminologia e os elementos de interface devem ser baseados
                 na linguagem do usuário, não do sistema. As informações devem
                       ser organizadas conforme o modelo mental do usuário.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real




                                                                       What?




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real


                                                                          What?

  Cool!!



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real




                                                                      What?



Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real


                                                 Cadê a busca?




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real




                                             What?
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real




                                                                      What?
Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real




                                                         What?
Friday, October 28, 2011   sequência de uso
Design, usabilidade e arquitetura de informação / Marcello Cardoso




        2. Compatibilidade do sistema com o mundo real




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                3. Controle do usuário e liberdade
                O usuário controla o sistema. Ele pode, por exemplo, abortar uma
                 tarefa ou desfazer uma operação e retornar ao estado anterior.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           3. Controle do usuário e liberdade




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           3. Controle do usuário e liberdade




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           3. Controle do usuário e liberdade




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           3. Controle do usuário e liberdade




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           3. Controle do usuário e liberdade




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           3. Controle do usuário e liberdade




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           4. Consistência e padrões
               Um comando, ação ou elemento de interface deve ter sempre o mesmo
                                      efeito e aparência.
             A mesma operação deve ser apresentada na mesma localização e deve ser
             formatada/apresentada da mesma maneira para facilitar o reconhecimento.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           4. Consistência e padrões




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           4. Consistência e padrões




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           4. Consistência e padrões




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           5. Prevenção de erros
                                  Evitar situações de erro.
            Conhecer as situações que mais provocam erros e modificar a interface
                              para que estes erros não ocorram




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           5. Prevenção de erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           5. Prevenção de erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           5. Prevenção de erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           5. Prevenção de erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           5. Prevenção de erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           5. Prevenção de erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           5. Prevenção de erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                    6. Reconhecer em vez de relembrar
             O sistema deve mostrar os elementos de diálogo e permitir que o usuário
            faça suas escolhas, sem a necessidade de lembrar um comando específico.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           6. Reconhecer em vez de relembrar




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           6. Reconhecer em vez de relembrar




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           6. Reconhecer em vez de relembrar




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           6. Reconhecer em vez de relembrar




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           6. Reconhecer em vez de relembrar




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                      7. Flexibilidade e eficiência no uso
             Para usuários experientes executarem as operações mais rapidamente.
             Abreviações, teclas de função, duplo clique no mouse, função de volta
                                    em sistemas hipertexto.
              Atalhos também servem para recuperar informações que estão numa
               profundidade na árvore navegacional a partir da interface principal.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           7. Flexibilidade e eficiência no uso




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           7. Flexibilidade e eficiência no uso




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           7. Flexibilidade e eficiência no uso




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           7. Flexibilidade e eficiência no uso




Friday, October 28, 2011        sequência de uso
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           8. Estética e design minimalista
             Deve-se apresentar exatamente a informação que o usuário precisa no
                              momento, nem mais nem menos.
            A seqüência da interação e o acesso aos objetos e operações devem ser
               compatíveis com o modo pelo qual o usuário realiza suas tarefas.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           8. Estética e design minimalista




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           8. Estética e design minimalista




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           8. Estética e design minimalista




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




   9. Ajudar a reconhecer, diagnosticar e corrigir erros
                                  Linguagem clara e sem códigos.
                      Devem ajudar o usuário a entender e resolver o problema.
                              Não devem culpar ou intimidar o usuário.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




     9. Ajudar a reconhecer, diagnosticar e corrigir erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




     9. Ajudar a reconhecer, diagnosticar e corrigir erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




     9. Ajudar a reconhecer, diagnosticar e corrigir erros




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




                           10. Ajuda e documentação
                O ideal é que um software seja tão fácil de usar (intuitivo) que não
                               necessite de ajuda ou documentação.
                 Se for necessária a ajuda deve estar facilmente acessível on-line.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           10. Ajuda e documentação




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           10. Ajuda e documentação




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           10. Ajuda e documentação




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           10. Ajuda e documentação




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           10. Ajuda e documentação




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso



                           10. Ajuda e documentação




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Vantagens
       1. Avaliação de Usabilidade de barata, não precisa de laboratórios ou equipamento

       2. Ágil: Um dia ou menos para aplicar

       3. Pode ser aplicada em qualquer estágio do projeto, incluindo protótipos precoces.

       4. Treinamento simples: Pode ser ensinada em poucas horas (para especialistas)




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Considerações: número de avaliadores
       Alguns problemas apenas são descobertos por perfis diferentes de avaliadores.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Considerações: número de avaliadores
       5 avaliadores encontramos quase 75% dos problemas de usabilidade.
       3 avaliadores fornecem quase 65% de descobertas
       1 avaliador descobre em média 35%




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Considerações: número de avaliadores
            O número excessivo de avaliadores traz pouco retorno de investimento.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Considerações: número de avaliadores
       A avaliação solo é conhecida como Expert review, Expert crit ou
       Discount evaluation.
       É uma prática comum de mercado.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Considerações: experiência do avaliador
       A qualidade da avaliação depende da compreensão correta das Heurísticas
       Aplicá-las exercita as boas práticas de usabilidade, para o desenvolvedor




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




          Heurísticas para websites (Nielsen, 1999)
       H igh-quality content (conteúdo de alta qualidade)
       O ften updated (freqüentemente atualizado)
       M inimal download time (tempo mínimo de download)
       E ase of use (facilidade de uso)
       R elevante to user’s needs (relevante para as necessidades dos usuários)
       U nique to the online médium (somente para o meio online)
       N etcentric corporate culture (cultura corporativa centrada na rede)




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




          Métricas RA na direção automotiva
       1. O sistema deve sinalizar os diversos obstáculos no caminho aumentando
          seu contraste (buracos, quebra-molas, transeuntes, etc.);

       2. Sinais de trânsito e informações complementares devem ser identificados e
          exibidos em destaque na área à direita do pára-brisa. O objetivo é oferecer
          subsídios para o motorista sem comprometer sua atenção primária.

       3. A linguagem deve ser universal e de fácil compreensão.

       4. O sistema deve ser configurável. Usuários com capacidades cognitivas
          diferentes devem possuir ferramentas para configurá-lo à sua maneira.




Friday, October 28, 2011
Design, usabilidade e arquitetura de informação / Marcello Cardoso




       Heurísticas emocionais para jogos
       (Eva de Lera e Muriel Garreta-Domingo)

       1. Franzir a sobrancelha - Concentração, antipatia ou falta de clareza
       2. Levantar as sobrancelhas - Insegurança, incredulidade, surpresa ou exasperação
       3. Desviar o olhar - Desapontamento, fracasso, culpa, vergonha ou submissão
       4. Sorrir - Satisfação ou alegria
       5. Apertar os lábios - Frustração, confusão, ansiedade, nervosismo ou preocupações
       6. Mover a boca - Desorientação ou insegurança
       7. Expressar-se verbalmente (tosses, suspiros, bocejos e etc.) - Frustração ou decepção
       8. Tocar o rosto com as mãos - Confusão, incerteza ou cansaço
       9. Reclinar-se para trás - Rejeição
       10. Inclinar o corpo para frente - Depressão, frustração ou atenção




Friday, October 28, 2011
Design, usabilidade e arquitetura de informaçã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 Design,
                                   usabilidade e arquitetura de informação, ministrada no curso de
                                   Pós Graduação em Marketing Digital no Centro Universitário
                                   Newton Paiva.



Friday, October 28, 2011

Contenu connexe

Tendances

PAAI/DI - 06 - Analise Heuristica
PAAI/DI - 06 -  Analise HeuristicaPAAI/DI - 06 -  Analise Heuristica
PAAI/DI - 06 - Analise HeuristicaMarcello Cardoso
 
Usabilidade 4 - User Story Mapping
Usabilidade 4 - User Story MappingUsabilidade 4 - User Story Mapping
Usabilidade 4 - User Story MappingMarcello Cardoso
 
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
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04Marcello Cardoso
 
Usabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeisUsabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeisMarcello 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
 
Usabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasUsabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasAlan Vasconcelos
 
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
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Marcello Cardoso
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Wellington Oliveira
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Marcello Cardoso
 
Arquitetura de Informação: história, definição e seus elementos
Arquitetura de Informação: história, definição e seus elementosArquitetura de Informação: história, definição e seus elementos
Arquitetura de Informação: história, definição e seus elementosLuciana Nunes
 
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
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Marcello Cardoso
 
Interface Homem Computador - IHC
Interface Homem Computador - IHCInterface Homem Computador - IHC
Interface Homem Computador - IHCNeilda Costa
 
01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]Robson Santos
 
Interação Humano Computador 1
Interação Humano Computador 1Interação Humano Computador 1
Interação Humano Computador 1Robson Santos
 

Tendances (20)

PAAI/DI - 06 - Analise Heuristica
PAAI/DI - 06 -  Analise HeuristicaPAAI/DI - 06 -  Analise Heuristica
PAAI/DI - 06 - Analise Heuristica
 
Usabilidade 4 - User Story Mapping
Usabilidade 4 - User Story MappingUsabilidade 4 - User Story Mapping
Usabilidade 4 - User Story Mapping
 
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
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04
 
Usabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeisUsabilidade 3 - Personas ágeis
Usabilidade 3 - Personas ágeis
 
PUC/PFC - Personas Ágeis
PUC/PFC -  Personas ÁgeisPUC/PFC -  Personas Ágeis
PUC/PFC - Personas Ágeis
 
UNA - Eng Usa '12 - aula 05
UNA  - Eng Usa '12 - aula 05UNA  - Eng Usa '12 - aula 05
UNA - Eng Usa '12 - aula 05
 
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
 
Usabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasUsabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: Personas
 
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
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06
 
IHC Parte1
IHC Parte1IHC Parte1
IHC Parte1
 
Arquitetura de Informação: história, definição e seus elementos
Arquitetura de Informação: história, definição e seus elementosArquitetura de Informação: história, definição e seus elementos
Arquitetura de Informação: história, definição e seus elementos
 
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
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03
 
Interface Homem Computador - IHC
Interface Homem Computador - IHCInterface Homem Computador - IHC
Interface Homem Computador - IHC
 
01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]
 
Interação Humano Computador 1
Interação Humano Computador 1Interação Humano Computador 1
Interação Humano Computador 1
 

Similaire à As 10 heurísticas de Nielsen para análise de usabilidade

MTA2 - Análise Heurística
MTA2 - Análise HeurísticaMTA2 - Análise Heurística
MTA2 - Análise HeurísticaMarcello 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
 
Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Marcello Cardoso
 
Usabilidade 5 - Análise Heurística
Usabilidade 5 - Análise HeurísticaUsabilidade 5 - Análise Heurística
Usabilidade 5 - Análise HeurísticaMarcello Cardoso
 
UNA - Eng Usa '12 - aula 02
UNA  - Eng Usa '12 - aula 02UNA  - Eng Usa '12 - aula 02
UNA - Eng Usa '12 - aula 02Marcello 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
 
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
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informaçãoCristiane Mendes
 
Infografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeInfografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeFran Maciel
 
Modulo ii arquiteturainformacaousabilidade_thaiscampas
Modulo ii arquiteturainformacaousabilidade_thaiscampasModulo ii arquiteturainformacaousabilidade_thaiscampas
Modulo ii arquiteturainformacaousabilidade_thaiscampasThais Campas
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEBFábio Flatschart
 
Modulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasModulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasThais Campas
 
Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação  Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação CogIgnition
 
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...Rafael Burity
 
Inovação Centrada no Usuário
Inovação Centrada no UsuárioInovação Centrada no Usuário
Inovação Centrada no UsuárioMourylise Heymer
 
Modulo iv arquiteturainformacaousabilidade_thaiscampas
Modulo iv arquiteturainformacaousabilidade_thaiscampasModulo iv arquiteturainformacaousabilidade_thaiscampas
Modulo iv arquiteturainformacaousabilidade_thaiscampasThais Campas
 

Similaire à As 10 heurísticas de Nielsen para análise de usabilidade (20)

MTA2 - Análise Heurística
MTA2 - Análise HeurísticaMTA2 - Análise Heurística
MTA2 - Análise Heurística
 
Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04
 
Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01
 
Usabilidade 5 - Análise Heurística
Usabilidade 5 - Análise HeurísticaUsabilidade 5 - Análise Heurística
Usabilidade 5 - Análise Heurística
 
UNA - Eng Usa '12 - aula 02
UNA  - Eng Usa '12 - aula 02UNA  - Eng Usa '12 - aula 02
UNA - Eng Usa '12 - aula 02
 
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
 
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
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Infografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeInfografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidade
 
Interface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHCInterface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHC
 
Modulo ii arquiteturainformacaousabilidade_thaiscampas
Modulo ii arquiteturainformacaousabilidade_thaiscampasModulo ii arquiteturainformacaousabilidade_thaiscampas
Modulo ii arquiteturainformacaousabilidade_thaiscampas
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Modulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasModulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampas
 
Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação  Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação
 
Fase apresentação
Fase apresentaçãoFase apresentação
Fase apresentação
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
 
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
 
Inovação Centrada no Usuário
Inovação Centrada no UsuárioInovação Centrada no Usuário
Inovação Centrada no Usuário
 
Modulo iv arquiteturainformacaousabilidade_thaiscampas
Modulo iv arquiteturainformacaousabilidade_thaiscampasModulo iv arquiteturainformacaousabilidade_thaiscampas
Modulo iv arquiteturainformacaousabilidade_thaiscampas
 

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
 
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
 
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
 

Plus de Marcello Cardoso (15)

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
 
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
 
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
 

As 10 heurísticas de Nielsen para análise de usabilidade

  • 1. Design, usabilidade e arquitetura de informação / Marcello Cardoso aula 05/06 Perguntando a especialistas As 10 heurísticas de Nielsen Pós Graduação em Marketing Digital Design, usabilidade e arquitetura de informação Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com Friday, October 28, 2011
  • 2. Design, usabilidade e arquitetura de informaçã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 20pts 3ª Técnica de Modelagem: Personas ágeis (workshop) 20pts 4ª Projetando a interface: Task Flow + Prototipação rápida (workshop) 20pts 5ª Perguntando a especialistas: As 10 heurísticas de Nielsen (workshop) 20pts 6ª Percurso cognitivo: Avaliando tarefas 20pts Friday, October 28, 2011
  • 3. Design, usabilidade e arquitetura de informação / Marcello Cardoso Questionários e rking entrevistas chma Ben to jam isa to en o ne qu çã en lvim lida pla pes vo sen va de rototipação p urística Análise He personas Friday, October 28, 2011
  • 4. Design, usabilidade e arquitetura de informação / Marcello Cardoso Avaliação da Onde aplicar? Interface pode ser aplicada em protótipos Reunião diária Produto Backlog do Backlog do Avaliação da potencialmente produto sprint Interface “entregável” pode ser aplicada em releases Friday, October 28, 2011
  • 5. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob Nielsen Friday, October 28, 2011
  • 6. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob Nielsen Friday, October 28, 2011
  • 7. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob Nielsen Friday, October 28, 2011
  • 8. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob Nielsen Friday, October 28, 2011
  • 9. Design, usabilidade e arquitetura de informação / Marcello Cardoso Definição “Análise Heurística (Nielsen and Molich, 1990; Nielsen 1994) é um método de engenharia de usabilidade para encontrar os erros de usabilidade em uma interface para que sejam corrigidos em um processo de desenvolvimento iterativo. Envolve um pequeno grupo de avaliadores para examinar a interface e avaliá-la de acordo com princípios de usabilidade reconhecidos (as heurísticas).” - Nielsen Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications of the ACM 33, 3 (March). Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI'94 Conf. Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY. Friday, October 28, 2011
  • 10. Design, usabilidade e arquitetura de informação / Marcello Cardoso = Heurísticas ~ Metas de usabilidade Metas são princípios generalistas que norteiam o desenvolvimento Heurísticas são diretrizes técnicas para a avaliação de interfaces Friday, October 28, 2011
  • 11. Design, usabilidade e arquitetura de informação / Marcello Cardoso J akob Nielsen lsen se cam po da usabilidade, Nie O principal nome no ágeis desde em me todologias baratas e popularizou por focar os anos 90. s para ar pe squisas quantitativa É conhecido por realiz ertas. fund amentar suas descob urística. nhecida e difu ndida é a análise he Sua prática mais co Friday, October 28, 2011
  • 12. Design, usabilidade e arquitetura de informação / Marcello Cardoso Origem (1990) As heurísticas originais surgiram da análise de 249 problemas, identificados a partir de avaliações realizadas por especialistas em 11 projetos. ✓ 4 avaliados durante a fase inicial do ciclo de vida ✓ 7 avaliados em uma fase avançada; Friday, October 28, 2011
  • 13. Design, usabilidade e arquitetura de informação / Marcello Cardoso Como fazer? 1º passo: Briefing • Os avaliadores discutem os critérios da avaliação como tarefas por exemplo 2º passo: Avaliação (cerca de 2h) • Independente • Double check - 1 para fluxo e tarefas e outro para interface e elementos 3º passo: Reunião de resultados e relatório • Discutir problemas • Priorizá-los • Elaborar recomendações e soluções Friday, October 28, 2011
  • 14. Design, usabilidade e arquitetura de informação / Marcello Cardoso Como fazer? 1º passo: Briefing • Os avaliadores discutem os critérios da avaliação como tarefas por exemplo 2º passo: Avaliação (cerca de 2h) • Independente • Double check - 1 para fluxo e tarefas e outro para interface e elementos 3º passo: Reunião de resultados e relatório • Discutir problemas • Priorizá-los • Elaborar recomendações e soluções Friday, October 28, 2011
  • 15. Design, usabilidade e arquitetura de informação / Marcello Cardoso Como fazer? 1º passo: Briefing • Os avaliadores discutem os critérios da avaliação como tarefas por exemplo 2º passo: Avaliação (cerca de 2h) • Independente • Double check - 1 para fluxo e tarefas e outro para interface e elementos 3º passo: Reunião de resultados e relatório • Discutir problemas • Priorizá-los • Elaborar recomendações e soluções Friday, October 28, 2011
  • 16. Design, usabilidade e arquitetura de informação / Marcello Cardoso Friday, October 28, 2011
  • 17. Design, usabilidade e arquitetura de informação / Marcello Cardoso !% !$ !" !# Friday, October 28, 2011
  • 18. Design, usabilidade e arquitetura de informação / Marcello Cardoso !% !$ !" !# Friday, October 28, 2011
  • 19. Design, usabilidade e arquitetura de informação / Marcello Cardoso Friday, October 28, 2011
  • 20. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística vs Testes com usuários Friday, October 28, 2011
  • 21. Design, usabilidade e arquitetura de informação / Marcello Cardoso Diferenças Análise Heurística - preditiva Baseada na experiência/expectativas do especialista Testes com usuários - empírica Baseada na observação do comportamento Friday, October 28, 2011
  • 22. Design, usabilidade e arquitetura de informação / Marcello Cardoso Semelhanças São técnicas analíticas, não gerativas (ideação) como Story Mapping ou Card Sorting. Friday, October 28, 2011
  • 23. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10 Heurísticas de Jakob Nielsen 1. Visibilidade do status do sistema (feedback) 2. Compatibilidade do sistema com o mundo real (affordance) 3. Controle do usuário e liberdade 4. Consistência e padrões 5. Prevenção de erros 6. Reconhecer em vez de relembrar 7. Flexibilidade e eficiência no uso 8. Estética e design minimalista 9. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros 10. Ajuda e documentação Friday, October 28, 2011
  • 24. Design, usabilidade e arquitetura de informação / Marcello Cardoso 1. Visibilidade do status do sistema (feedback) O sistema deve informar continuamente e apropriadamente ao usuário sobre o que ele está fazendo, em tempo razoável. Friday, October 28, 2011
  • 25. Design, usabilidade e arquitetura de informação / Marcello Cardoso 1. Visibilidade do status do sistema (feedback) Vou fazer um café... Mais fácil de entender. Friday, October 28, 2011
  • 26. Design, usabilidade e arquitetura de informação / Marcello Cardoso 1. Visibilidade do status do sistema (feedback) LOG deixa tudo mais claro. Friday, October 28, 2011
  • 27. Design, usabilidade e arquitetura de informação / Marcello Cardoso 1. Visibilidade do status do sistema (feedback) ! th e fly On Friday, October 28, 2011
  • 28. Design, usabilidade e arquitetura de informação / Marcello Cardoso 1. Visibilidade do status do sistema (feedback) Friday, October 28, 2011
  • 29. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real A terminologia e os elementos de interface devem ser baseados na linguagem do usuário, não do sistema. As informações devem ser organizadas conforme o modelo mental do usuário. Friday, October 28, 2011
  • 30. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real What? Friday, October 28, 2011
  • 31. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real What? Cool!! Friday, October 28, 2011
  • 32. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real What? Friday, October 28, 2011
  • 33. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real Cadê a busca? Friday, October 28, 2011
  • 34. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real What? Friday, October 28, 2011
  • 35. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real Friday, October 28, 2011
  • 36. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real What? Friday, October 28, 2011
  • 37. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real What? Friday, October 28, 2011 sequência de uso
  • 38. Design, usabilidade e arquitetura de informação / Marcello Cardoso 2. Compatibilidade do sistema com o mundo real Friday, October 28, 2011
  • 39. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdade O usuário controla o sistema. Ele pode, por exemplo, abortar uma tarefa ou desfazer uma operação e retornar ao estado anterior. Friday, October 28, 2011
  • 40. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdade Friday, October 28, 2011
  • 41. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdade Friday, October 28, 2011
  • 42. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdade Friday, October 28, 2011
  • 43. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdade Friday, October 28, 2011
  • 44. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdade Friday, October 28, 2011
  • 45. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdade Friday, October 28, 2011
  • 46. Design, usabilidade e arquitetura de informação / Marcello Cardoso 4. Consistência e padrões Um comando, ação ou elemento de interface deve ter sempre o mesmo efeito e aparência. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento. Friday, October 28, 2011
  • 47. Design, usabilidade e arquitetura de informação / Marcello Cardoso 4. Consistência e padrões Friday, October 28, 2011
  • 48. Design, usabilidade e arquitetura de informação / Marcello Cardoso 4. Consistência e padrões Friday, October 28, 2011
  • 49. Design, usabilidade e arquitetura de informação / Marcello Cardoso 4. Consistência e padrões Friday, October 28, 2011
  • 50. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram Friday, October 28, 2011
  • 51. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Friday, October 28, 2011
  • 52. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Friday, October 28, 2011
  • 53. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Friday, October 28, 2011
  • 54. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Friday, October 28, 2011
  • 55. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Friday, October 28, 2011
  • 56. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Friday, October 28, 2011
  • 57. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de erros Friday, October 28, 2011
  • 58. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrar O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico. Friday, October 28, 2011
  • 59. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrar Friday, October 28, 2011
  • 60. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrar Friday, October 28, 2011
  • 61. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrar Friday, October 28, 2011
  • 62. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrar Friday, October 28, 2011
  • 63. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrar Friday, October 28, 2011
  • 64. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no uso Para usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal. Friday, October 28, 2011
  • 65. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no uso Friday, October 28, 2011
  • 66. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no uso Friday, October 28, 2011
  • 67. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no uso Friday, October 28, 2011
  • 68. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no uso Friday, October 28, 2011 sequência de uso
  • 69. Design, usabilidade e arquitetura de informação / Marcello Cardoso 8. Estética e design minimalista Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas. Friday, October 28, 2011
  • 70. Design, usabilidade e arquitetura de informação / Marcello Cardoso 8. Estética e design minimalista Friday, October 28, 2011
  • 71. Design, usabilidade e arquitetura de informação / Marcello Cardoso 8. Estética e design minimalista Friday, October 28, 2011
  • 72. Design, usabilidade e arquitetura de informação / Marcello Cardoso 8. Estética e design minimalista Friday, October 28, 2011
  • 73. Design, usabilidade e arquitetura de informação / Marcello Cardoso 9. Ajudar a reconhecer, diagnosticar e corrigir erros Linguagem clara e sem códigos. Devem ajudar o usuário a entender e resolver o problema. Não devem culpar ou intimidar o usuário. Friday, October 28, 2011
  • 74. Design, usabilidade e arquitetura de informação / Marcello Cardoso 9. Ajudar a reconhecer, diagnosticar e corrigir erros Friday, October 28, 2011
  • 75. Design, usabilidade e arquitetura de informação / Marcello Cardoso 9. Ajudar a reconhecer, diagnosticar e corrigir erros Friday, October 28, 2011
  • 76. Design, usabilidade e arquitetura de informação / Marcello Cardoso 9. Ajudar a reconhecer, diagnosticar e corrigir erros Friday, October 28, 2011
  • 77. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentação O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária a ajuda deve estar facilmente acessível on-line. Friday, October 28, 2011
  • 78. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentação Friday, October 28, 2011
  • 79. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentação Friday, October 28, 2011
  • 80. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentação Friday, October 28, 2011
  • 81. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentação Friday, October 28, 2011
  • 82. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentação Friday, October 28, 2011
  • 83. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentação Friday, October 28, 2011
  • 84. Design, usabilidade e arquitetura de informação / Marcello Cardoso Vantagens 1. Avaliação de Usabilidade de barata, não precisa de laboratórios ou equipamento 2. Ágil: Um dia ou menos para aplicar 3. Pode ser aplicada em qualquer estágio do projeto, incluindo protótipos precoces. 4. Treinamento simples: Pode ser ensinada em poucas horas (para especialistas) Friday, October 28, 2011
  • 85. Design, usabilidade e arquitetura de informação / Marcello Cardoso Considerações: número de avaliadores Alguns problemas apenas são descobertos por perfis diferentes de avaliadores. Friday, October 28, 2011
  • 86. Design, usabilidade e arquitetura de informação / Marcello Cardoso Considerações: número de avaliadores 5 avaliadores encontramos quase 75% dos problemas de usabilidade. 3 avaliadores fornecem quase 65% de descobertas 1 avaliador descobre em média 35% Friday, October 28, 2011
  • 87. Design, usabilidade e arquitetura de informação / Marcello Cardoso Considerações: número de avaliadores O número excessivo de avaliadores traz pouco retorno de investimento. Friday, October 28, 2011
  • 88. Design, usabilidade e arquitetura de informação / Marcello Cardoso Considerações: número de avaliadores A avaliação solo é conhecida como Expert review, Expert crit ou Discount evaluation. É uma prática comum de mercado. Friday, October 28, 2011
  • 89. Design, usabilidade e arquitetura de informação / Marcello Cardoso Considerações: experiência do avaliador A qualidade da avaliação depende da compreensão correta das Heurísticas Aplicá-las exercita as boas práticas de usabilidade, para o desenvolvedor Friday, October 28, 2011
  • 90. Design, usabilidade e arquitetura de informação / Marcello Cardoso Heurísticas para websites (Nielsen, 1999) H igh-quality content (conteúdo de alta qualidade) O ften updated (freqüentemente atualizado) M inimal download time (tempo mínimo de download) E ase of use (facilidade de uso) R elevante to user’s needs (relevante para as necessidades dos usuários) U nique to the online médium (somente para o meio online) N etcentric corporate culture (cultura corporativa centrada na rede) Friday, October 28, 2011
  • 91. Design, usabilidade e arquitetura de informação / Marcello Cardoso Métricas RA na direção automotiva 1. O sistema deve sinalizar os diversos obstáculos no caminho aumentando seu contraste (buracos, quebra-molas, transeuntes, etc.); 2. Sinais de trânsito e informações complementares devem ser identificados e exibidos em destaque na área à direita do pára-brisa. O objetivo é oferecer subsídios para o motorista sem comprometer sua atenção primária. 3. A linguagem deve ser universal e de fácil compreensão. 4. O sistema deve ser configurável. Usuários com capacidades cognitivas diferentes devem possuir ferramentas para configurá-lo à sua maneira. Friday, October 28, 2011
  • 92. Design, usabilidade e arquitetura de informação / Marcello Cardoso Heurísticas emocionais para jogos (Eva de Lera e Muriel Garreta-Domingo) 1. Franzir a sobrancelha - Concentração, antipatia ou falta de clareza 2. Levantar as sobrancelhas - Insegurança, incredulidade, surpresa ou exasperação 3. Desviar o olhar - Desapontamento, fracasso, culpa, vergonha ou submissão 4. Sorrir - Satisfação ou alegria 5. Apertar os lábios - Frustração, confusão, ansiedade, nervosismo ou preocupações 6. Mover a boca - Desorientação ou insegurança 7. Expressar-se verbalmente (tosses, suspiros, bocejos e etc.) - Frustração ou decepção 8. Tocar o rosto com as mãos - Confusão, incerteza ou cansaço 9. Reclinar-se para trás - Rejeição 10. Inclinar o corpo para frente - Depressão, frustração ou atenção Friday, October 28, 2011
  • 93. Design, usabilidade e arquitetura de informaçã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 Design, usabilidade e arquitetura de informação, ministrada no curso de Pós Graduação em Marketing Digital no Centro Universitário Newton Paiva. Friday, October 28, 2011