Quem sou eu <ul><li>Gerente de internet da BOX1824 – Consultoria em pesquisa de  tendência de comportamento do consumidor ...
Como vamos fazer a oficina <ul><li>Entendendo um modelo mental </li></ul><ul><li>O que é heurística? </li></ul><ul><li>Con...
 
1. Conceituação de modelo mental Vamos começar com um elemento que todos conhecemos.
1. Conceituação de modelo mental Provavelmente a marioria das funções ou utilidades secundárias de uma escova envolvem o  ...
1. Conceituação de modelo mental Isso é um  modelo mental .
1. Conceituação de modelo mental Como seria um modelo mental de um carro?
1. Conceituação de modelo mental Como seria um modelo mental de um carro?
1. Conceituação de modelo mental Como seria um modelo mental de um site? Marca Buscar Navegação global Rodapé Navegação  l...
“ Modelo mental é o nosso modelo conceitual particular da maneira como um objeto funciona, eventos acontecem ou pessoas se...
 
2. O que é heurística? Isso está correto? Quem disse? Marca Buscar Navegação global Rodapé Navegação  local Conteúdo
2. O que é heurística?
2. O que é heurística?
2. O que é heurística?
2. O que é heurística?
2. O que é heurística? Acaba virando regra! As técnicas heurísticas não asseguram as melhores soluções, mas somente soluçõ...
2. O que é heurística? Por isso, temos 3 estratégias para a definição de problemas: 1. busca às cegas 2. busca heurística ...
2. O que é heurística?
3. Conhecendo os 10 princípios heurísticos Em 1990, Jakob Nielsen criou 10 regras de design de interação, chamadas de “Heu...
3. Conhecendo os 10 princípios heurísticos 1. Visibilidade do estado do sistema O sistema deve sempre manter os usuários i...
3. Conhecendo os 10 princípios heurísticos
3. Conhecendo os 10 princípios heurísticos
3. Conhecendo os 10 princípios heurísticos 2. Compatibilidade do sistema com o mundo real O sistema deve falar a língua do...
3. Conhecendo os 10 princípios heurísticos
3. Conhecendo os 10 princípios heurísticos 3. Controle e liberdade do usuário O usuário deve ter o controle de sua navegaç...
3. Conhecendo os 10 princípios heurísticos
3. Conhecendo os 10 princípios heurísticos 4. Consistência e padrões Em um mesmo site, tudo deve ser consistente. Tanto em...
3. Conhecendo os 10 princípios heurísticos
3. Conhecendo os 10 princípios heurísticos 5. Prevenção de erros Prever todas as maneiras e formatos de navegação ou manip...
3. Conhecendo os 10 princípios heurísticos
3. Conhecendo os 10 princípios heurísticos 6. Reconhecimento ao invés de lembrança Minimize a carga de memória do usuário,...
3. Conhecendo os 10 princípios heurísticos
3. Conhecendo os 10 princípios heurísticos 7. Flexibilidade e eficiência de uso O sistema deve se adequar à usuários exper...
3. Conhecendo os 10 princípios heurísticos 8. Estética e design minimalista As interfaces não devem conter informações que...
3. Conhecendo os 10 princípios heurísticos 9. Ajudar os usuários a reconhecer,  diagnosticar e corrigir erros Melhor do qu...
3. Conhecendo os 10 princípios heurísticos 10. Ajudas (Help) e documentação. Fornecer um método de ajudar o usuário a nave...
3. Conhecendo os 10 princípios heurísticos
 
4. Como identificar problemas de usabilidade <ul><li>Onde eu estou:  em que página eu me localizo, qual é o conteúdo dispo...
4. Como identificar problemas de usabilidade <ul><li>Ideal:  especialista duplo. Possui experiência nos processos e princí...
4. Como identificar problemas de usabilidade <ul><li>Fase de preparação: devemos definir onde será feita a avaliação: prop...
4. Como identificar problemas de usabilidade <ul><li>Cosmético:  poderia melhorar a satisfação subjetiva dos usuários; </l...
4. Como identificar problemas de usabilidade <ul><li>Onde? </li></ul><ul><li>Um único local na interface; </li></ul><ul><l...
 
5. Composição da interface Composição da interface <ul><li>Conteúdo; </li></ul><ul><li>Conteúdo relacionado; </li></ul><ul...
 
 
 
 
 
 
 
 
4. Como identificar problemas de usabilidade <ul><li>Cosmético:  poderia melhorar a satisfação subjetiva dos usuários; </l...
Consigo obter as 3 respostas para essa interface?
Consigo obter as 3 respostas para essa interface?
Consigo obter as 3 respostas para essa interface?
Consigo obter as 3 respostas para essa interface?
 
6. Como o usuário enxerga a interface Como o usuário enxerga a interface?
6. Como o usuário enxerga a interface Como o usuário enxerga a interface? Eye-tranking
6. Como o usuário enxerga a interface Como o usuário enxerga a interface? Eye-tranking
6. Como o usuário enxerga a interface Como o usuário enxerga a interface?
6. Como o usuário enxerga a interface Conclusões <ul><li>Os usuários simplesmente filtram a publicidade descontextual; </l...
6. Como o usuário enxerga a interface <ul><li>Os usuários possuem pouca paciência para a leitura; </li></ul>
6. Como o usuário enxerga a interface Existem diferenças entre usuários
6. Como o usuário enxerga a interface Mulher Homem
6. Como o usuário enxerga a interface Cuidados que devemos ter no desenho de interfaces <ul><li>Os usuários usam a rolagem...
7. Estudo de caso – atividade prática Obrigado :-) Renato Rosa [email_address] [email_address] +55 51 9335.3208
Upcoming SlideShare
Loading in …5
×

Oficina "Projetando Interações com Base Heurística" por Renato Rosa

3,965 views
3,862 views

Published on

Slides da Oficina do Renato Rosa no WUD RS 2007 (World Usability Day).

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,965
On SlideShare
0
From Embeds
0
Number of Embeds
164
Actions
Shares
0
Downloads
0
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Oficina "Projetando Interações com Base Heurística" por Renato Rosa

  1. 2. Quem sou eu <ul><li>Gerente de internet da BOX1824 – Consultoria em pesquisa de tendência de comportamento do consumidor jovem; </li></ul><ul><li>Consultor em usabilidade, AI e design de interação; </li></ul><ul><li>10 anos de experiência em mídias digitais interativas; </li></ul><ul><li>Membro do Information Architecture Institute; </li></ul><ul><li>3 vezes Presidente do Júri do Prêmio Internet Corporativa; </li></ul><ul><li>Jurado Webdesign International Festival – Webjam WIF 2006; </li></ul><ul><li>Jurado de Internet do 11° Salão da Propaganda ARP; </li></ul><ul><li>Palestrante 12º EWD – 2007; </li></ul><ul><li>Apoiador WUD 2007 e palestrante âncora do WUD 2006; </li></ul>
  2. 3. Como vamos fazer a oficina <ul><li>Entendendo um modelo mental </li></ul><ul><li>O que é heurística? </li></ul><ul><li>Conhecendo os 10 princípios heurísticos </li></ul><ul><li>Como identificar problemas de usabilidade </li></ul><ul><li>Composição da interface </li></ul><ul><li>Como o usuário enxerga a interface </li></ul>
  3. 5. 1. Conceituação de modelo mental Vamos começar com um elemento que todos conhecemos.
  4. 6. 1. Conceituação de modelo mental Provavelmente a marioria das funções ou utilidades secundárias de uma escova envolvem o ato de escovar . Isso ocorre porque o modelo mental que temos de uma escova de dentes é escovar . Estamos presos nessa função.
  5. 7. 1. Conceituação de modelo mental Isso é um modelo mental .
  6. 8. 1. Conceituação de modelo mental Como seria um modelo mental de um carro?
  7. 9. 1. Conceituação de modelo mental Como seria um modelo mental de um carro?
  8. 10. 1. Conceituação de modelo mental Como seria um modelo mental de um site? Marca Buscar Navegação global Rodapé Navegação local Conteúdo
  9. 11. “ Modelo mental é o nosso modelo conceitual particular da maneira como um objeto funciona, eventos acontecem ou pessoas se comportam, que resulta da nossa tendência de dar explicações para as coisas. ” Donald Norman - 1990 1. Conceituação de modelo mental
  10. 13. 2. O que é heurística? Isso está correto? Quem disse? Marca Buscar Navegação global Rodapé Navegação local Conteúdo
  11. 14. 2. O que é heurística?
  12. 15. 2. O que é heurística?
  13. 16. 2. O que é heurística?
  14. 17. 2. O que é heurística?
  15. 18. 2. O que é heurística? Acaba virando regra! As técnicas heurísticas não asseguram as melhores soluções, mas somente soluções válidas, aproximadas; e freqüentemente não é possível justificar em termos estritamente lógico a validade do resultado.
  16. 19. 2. O que é heurística? Por isso, temos 3 estratégias para a definição de problemas: 1. busca às cegas 2. busca heurística (baseada na experiência) 3. buscas racionais (usando um sistema forma de raciocínio).
  17. 20. 2. O que é heurística?
  18. 21. 3. Conhecendo os 10 princípios heurísticos Em 1990, Jakob Nielsen criou 10 regras de design de interação, chamadas de “Heurísticas”. Hoje elas são usadas como guias no desenvolvimento de produtos interativos. 1. Visibilidade do estado do sistema 2. Compatibilidade do sistema com o mundo real 3. Controle e liberdade do usuário 4. Consistência e padrões 5. Prevenção de erros 6. Reconhecimento ao invés de lembrança 7. Flexibilidade e eficiência de uso 8. Estética e design minimalista 9. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros 10. Ajudas (Help) e documentação.
  19. 22. 3. Conhecendo os 10 princípios heurísticos 1. Visibilidade do estado do sistema O sistema deve sempre manter os usuários informados sobre o que está acontecendo, através de comentários, dentro de um prazo razoável de tempo.
  20. 23. 3. Conhecendo os 10 princípios heurísticos
  21. 24. 3. Conhecendo os 10 princípios heurísticos
  22. 25. 3. Conhecendo os 10 princípios heurísticos 2. Compatibilidade do sistema com o mundo real O sistema deve falar a língua do usuário, com palavras, frases e conceitos familiares. Siga as convenções do mundo real para que a informação pareça lógica e muito natural.
  23. 26. 3. Conhecendo os 10 princípios heurísticos
  24. 27. 3. Conhecendo os 10 princípios heurísticos 3. Controle e liberdade do usuário O usuário deve ter o controle de sua navegação. Ele escolhe o que vai acessar, quando e como. Todo o sistema deve ser sua saída, segunda escolha ou simplesmente a possibilidade de desfazer uma ação.
  25. 28. 3. Conhecendo os 10 princípios heurísticos
  26. 29. 3. Conhecendo os 10 princípios heurísticos 4. Consistência e padrões Em um mesmo site, tudo deve ser consistente. Tanto em design (branding) quanto em funcionalidade. O usuário não deve ter questionamentos sobre ações já executadas e repetidas.
  27. 30. 3. Conhecendo os 10 princípios heurísticos
  28. 31. 3. Conhecendo os 10 princípios heurísticos 5. Prevenção de erros Prever todas as maneiras e formatos de navegação ou manipulação de dados, com o objetivo de mapear eventuais erros.
  29. 32. 3. Conhecendo os 10 princípios heurísticos
  30. 33. 3. Conhecendo os 10 princípios heurísticos 6. Reconhecimento ao invés de lembrança Minimize a carga de memória do usuário, fazendo objetos, ações e opções visíveis. O usuário não deve ter que lembrar de todas as funcionalidades ou interações antes de cada clique.
  31. 34. 3. Conhecendo os 10 princípios heurísticos
  32. 35. 3. Conhecendo os 10 princípios heurísticos 7. Flexibilidade e eficiência de uso O sistema deve se adequar à usuários experientes ou inexperientes, deve permitir manipulações e formas diferentes e alternativas de se navegar.
  33. 36. 3. Conhecendo os 10 princípios heurísticos 8. Estética e design minimalista As interfaces não devem conter informações que são irrelevantes ou raramente necessárias. Tudo, além do necessário, é ruído.
  34. 37. 3. Conhecendo os 10 princípios heurísticos 9. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros Melhor do que não ter erros, é informar o usuário onde ocorreu o erro, como ele ocorreu e como ele poderá corrigir ou contonar o erro.
  35. 38. 3. Conhecendo os 10 princípios heurísticos 10. Ajudas (Help) e documentação. Fornecer um método de ajudar o usuário a navegar, através de recursos de ajuda e orientação.
  36. 39. 3. Conhecendo os 10 princípios heurísticos
  37. 41. 4. Como identificar problemas de usabilidade <ul><li>Onde eu estou: em que página eu me localizo, qual é o conteúdo disponível; </li></ul><ul><li>De onde eu vim: qual foi o meu caminho percorrido até aqui; </li></ul><ul><li>Onde eu posso ir: quais são as minhas opções de navegação e os recursos disponíveis a partir daqui. </li></ul>Devemos responder:
  38. 42. 4. Como identificar problemas de usabilidade <ul><li>Ideal: especialista duplo. Possui experiência nos processos e princípios de usabilidade, assim como métodos de avaliação; </li></ul><ul><li>Desejável: especialista em IHC; </li></ul><ul><li>Menos desejável: especialista no domínio de testes. Estuda princípios de interface e o processo de avaliação de sites; </li></ul><ul><li>Menos desejável ainda: membro da equipe de desenvolvimento. Tem dificuldade de deixar de lado seu papel de desenvolvedor. </li></ul>Quem deve avaliar uma interface?
  39. 43. 4. Como identificar problemas de usabilidade <ul><li>Fase de preparação: devemos definir onde será feita a avaliação: proposta de design (papel, protótipo ou ambiente definitivo), hipótese sobre os usuários ou cenário de tarefas; </li></ul><ul><li>Seções curtas (1 ou 2 horas) onde cada especialista: </li></ul><ul><ul><li>Julga a conformidade de um determinado princípio de heurísticas (aspectos ou subaspectos); </li></ul></ul><ul><ul><li>Anota os problemas encontrados; </li></ul></ul><ul><ul><li>Julga a gravidade desses problemas; </li></ul></ul><ul><ul><li>Gera um relatório individual com comentários adicionais; </li></ul></ul>Avaliação heurística
  40. 44. 4. Como identificar problemas de usabilidade <ul><li>Cosmético: poderia melhorar a satisfação subjetiva dos usuários; </li></ul><ul><li>“ Adorei essa página, mas se ela fosse rosinha seria muito mais bacana” – Panzinha, 16 anos, navegando no 8P. </li></ul><ul><li>2. Baixa criticidade: correção desejável do problema, pois limita as opções de navegação do usuário; </li></ul><ul><li>“ Acho que tenho que ir por aqui agora, né?” – André, 31 anos, depois que encontrou a matéria que procurava no G1. </li></ul><ul><li>3. Catastrófico: impede a utilização do ambiente; </li></ul><ul><li>“ Acho que agora deu” – Ricardo, no GloboEsporte, após 10 minutos de procura de uma determinada informação. </li></ul>Como se categorizam os problemas?
  41. 45. 4. Como identificar problemas de usabilidade <ul><li>Onde? </li></ul><ul><li>Um único local na interface; </li></ul><ul><li>Em dois locais na interface, casualmente; </li></ul><ul><li>Na estrutura geral da interface, de forma sistemática; </li></ul><ul><li>Algo que não está lá, que precisa ser incluído na interface. </li></ul><ul><li>Heurística violada </li></ul><ul><li>Explicação </li></ul><ul><li>Gravidade </li></ul>Problema encontrado
  42. 47. 5. Composição da interface Composição da interface <ul><li>Conteúdo; </li></ul><ul><li>Conteúdo relacionado; </li></ul><ul><li>Navegação estrutural (zonas de salto); </li></ul><ul><li>Navegação relacionada; </li></ul><ul><li>Componentes de ação (botões, formulários, combos); </li></ul><ul><li>Componentes de orientação navegacional; </li></ul>
  43. 56. 4. Como identificar problemas de usabilidade <ul><li>Cosmético: poderia melhorar a satisfação subjetiva dos usuários; </li></ul>Como se categorizam os problemas?
  44. 57. Consigo obter as 3 respostas para essa interface?
  45. 58. Consigo obter as 3 respostas para essa interface?
  46. 59. Consigo obter as 3 respostas para essa interface?
  47. 60. Consigo obter as 3 respostas para essa interface?
  48. 62. 6. Como o usuário enxerga a interface Como o usuário enxerga a interface?
  49. 63. 6. Como o usuário enxerga a interface Como o usuário enxerga a interface? Eye-tranking
  50. 64. 6. Como o usuário enxerga a interface Como o usuário enxerga a interface? Eye-tranking
  51. 65. 6. Como o usuário enxerga a interface Como o usuário enxerga a interface?
  52. 66. 6. Como o usuário enxerga a interface Conclusões <ul><li>Os usuários simplesmente filtram a publicidade descontextual; </li></ul><ul><li>Fotos vendem melhor o conteúdo; </li></ul><ul><li>A área conceitual, embora seja nobre, não é vista. </li></ul>
  53. 67. 6. Como o usuário enxerga a interface <ul><li>Os usuários possuem pouca paciência para a leitura; </li></ul>
  54. 68. 6. Como o usuário enxerga a interface Existem diferenças entre usuários
  55. 69. 6. Como o usuário enxerga a interface Mulher Homem
  56. 70. 6. Como o usuário enxerga a interface Cuidados que devemos ter no desenho de interfaces <ul><li>Os usuários usam a rolagem. Menos os perdidos; </li></ul><ul><li>Estudo de limitações dos usuários: 3Ps </li></ul><ul><ul><li>Peso (lógico) </li></ul></ul><ul><ul><li>Performance (renderização) </li></ul></ul><ul><ul><li>Proximidade (linguagem, simbologia, metáforas) </li></ul></ul><ul><li>Tudo deve ter rótulo; </li></ul><ul><li>Prever todas as possíveis interações; </li></ul><ul><li>Prever erros do sistema; </li></ul><ul><li>O usuário é a sua mãe, seu pai ou o tio que não entende nada; </li></ul>
  57. 71. 7. Estudo de caso – atividade prática Obrigado :-) Renato Rosa [email_address] [email_address] +55 51 9335.3208

×