Newton Paiva - DI - Aula 05
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Newton Paiva - DI - Aula 05

on

  • 842 views

Apresentação realizada por Marcello de Campos Cardoso em Novembro de 2011 para a disciplina Design, usabilidade e arquitetura de informação, ministrada no curso de especialização em Pós ...

Apresentação realizada por Marcello de Campos Cardoso em Novembro de 2011 para a disciplina Design, usabilidade e arquitetura de informação, ministrada no curso de especialização em Pós Graduação em Marketing Digital no Centro Universitário Newton Paiva.

Statistics

Views

Total Views
842
Views on SlideShare
842
Embed Views
0

Actions

Likes
1
Downloads
63
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Newton Paiva - DI - Aula 05 Presentation Transcript

  • 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.comFriday, 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 20ptsFriday, 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 personasFriday, 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 releasesFriday, October 28, 2011
  • 5. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob NielsenFriday, October 28, 2011
  • 6. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob NielsenFriday, October 28, 2011
  • 7. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob NielsenFriday, October 28, 2011
  • 8. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística as 10 heurísticas de Jakob NielsenFriday, 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 CHI90 Conf. Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI94 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 interfacesFriday, 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 coFriday, 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çõesFriday, 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çõesFriday, 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çõesFriday, October 28, 2011
  • 16. Design, usabilidade e arquitetura de informação / Marcello CardosoFriday, 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 CardosoFriday, October 28, 2011
  • 20. Design, usabilidade e arquitetura de informação / Marcello Cardoso Análise Heurística vs Testes com usuáriosFriday, 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 comportamentoFriday, 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çãoFriday, 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 OnFriday, 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 realFriday, 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 realFriday, 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 liberdadeFriday, October 28, 2011
  • 41. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdadeFriday, October 28, 2011
  • 42. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdadeFriday, October 28, 2011
  • 43. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdadeFriday, October 28, 2011
  • 44. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdadeFriday, October 28, 2011
  • 45. Design, usabilidade e arquitetura de informação / Marcello Cardoso 3. Controle do usuário e liberdadeFriday, 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õesFriday, October 28, 2011
  • 48. Design, usabilidade e arquitetura de informação / Marcello Cardoso 4. Consistência e padrõesFriday, October 28, 2011
  • 49. Design, usabilidade e arquitetura de informação / Marcello Cardoso 4. Consistência e padrõesFriday, 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 ocorramFriday, October 28, 2011
  • 51. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de errosFriday, October 28, 2011
  • 52. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de errosFriday, October 28, 2011
  • 53. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de errosFriday, October 28, 2011
  • 54. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de errosFriday, October 28, 2011
  • 55. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de errosFriday, October 28, 2011
  • 56. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de errosFriday, October 28, 2011
  • 57. Design, usabilidade e arquitetura de informação / Marcello Cardoso 5. Prevenção de errosFriday, 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 relembrarFriday, October 28, 2011
  • 60. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrarFriday, October 28, 2011
  • 61. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrarFriday, October 28, 2011
  • 62. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrarFriday, October 28, 2011
  • 63. Design, usabilidade e arquitetura de informação / Marcello Cardoso 6. Reconhecer em vez de relembrarFriday, 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 usoFriday, October 28, 2011
  • 66. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no usoFriday, October 28, 2011
  • 67. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no usoFriday, October 28, 2011
  • 68. Design, usabilidade e arquitetura de informação / Marcello Cardoso 7. Flexibilidade e eficiência no usoFriday, 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 minimalistaFriday, October 28, 2011
  • 71. Design, usabilidade e arquitetura de informação / Marcello Cardoso 8. Estética e design minimalistaFriday, October 28, 2011
  • 72. Design, usabilidade e arquitetura de informação / Marcello Cardoso 8. Estética e design minimalistaFriday, 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 errosFriday, October 28, 2011
  • 75. Design, usabilidade e arquitetura de informação / Marcello Cardoso 9. Ajudar a reconhecer, diagnosticar e corrigir errosFriday, October 28, 2011
  • 76. Design, usabilidade e arquitetura de informação / Marcello Cardoso 9. Ajudar a reconhecer, diagnosticar e corrigir errosFriday, 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çãoFriday, October 28, 2011
  • 79. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentaçãoFriday, October 28, 2011
  • 80. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentaçãoFriday, October 28, 2011
  • 81. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentaçãoFriday, October 28, 2011
  • 82. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentaçãoFriday, October 28, 2011
  • 83. Design, usabilidade e arquitetura de informação / Marcello Cardoso 10. Ajuda e documentaçãoFriday, 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 desenvolvedorFriday, 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çãoFriday, 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