Usabilidade Visão e processo para implementar projetos com foco no usuário
<ul><li>Por que propusemos tratar do tema Usabilidade neste encontro? </li></ul><ul><ul><li>Ela foi revisitada? </li></ul>...
<ul><ul><li>NADA DISSO JUSTIFICA! </li></ul></ul><ul><ul><li>O motivo que nos traz aqui para falar um pouco mais sobre o t...
<ul><ul><li>Vamos então brevemente recapitular o conceito....  </li></ul></ul>
http://br.youtube.com/watch?v=sYahB9Ib_SY
“ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de taref...
“ A capacidade de um  sistema interativo  oferecer a um usuário em um determinado contexto de operação a realização de tar...
“ A capacidade de um sistema interativo oferecer  a um usuário  em um determinado contexto de operação a realização de tar...
“ A capacidade de um sistema interativo oferecer a um usuário em um determinado  contexto de operação  a realização de tar...
“ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de taref...
<ul><li>É por isso que os profissionais que desenvolvem produtos interativos (e eles estão ao nosso redor a todo instante)...
<ul><ul><li>O mundo de quem precisa lavar as mãos é difícil. </li></ul></ul>O MUNDO É DIFÍCIL... http://br.youtube.com/wat...
<ul><ul><li>O mundo de quem quer sair dos lugares é difícil. </li></ul></ul>O MUNDO É DIFÍCIL... http://br.youtube.com/wat...
O MUNDO É DIFÍCIL... <ul><ul><li>O mundo de quem quer polivitamínicos também é difícil. </li></ul></ul>
<ul><ul><li>O mundo de quem quer comprar TV por assinatura é difícil. </li></ul></ul>O MUNDO É DIFÍCIL... http://br.youtub...
<ul><li>Para implementar projetos com foco no interesse do usuário e que leve em consideração boas práticas de usabilidade...
OS ARQUITETOS.... <ul><li>Pegam briefings com cliente e entram na dinâmica de seus produtos e serviços. </li></ul><ul><li>...
OS ARQUITETOS.... <ul><li>Um pouco da sua produção: </li></ul>Infoestrutura Wireframes
OS DESIGNERS... <ul><li>São repletos de referências visuais. </li></ul><ul><li>Têm o papel de traduzir visualmente as estr...
OS DESIGNERS... <ul><li>Um pouco da sua produção: </li></ul>
<ul><li>E é do encontro entre estes profissionais que nasce as implementações de Usabilidade. Juntos, eles têm a missão de...
O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Comportamento de menus: </li></ul><ul><li>Uma ...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Utilização de ALT’s como forma de: </li></ul><ul><li>Comp...
<ul><li>Quando esse encontro traz bons furtos: </li></ul>Ao digitar uma página inexistente dentro de um domínio existente ...
<ul><li>Quando esse encontro traz bons furtos: </li></ul>Ao digitar uma página inexistente dentro de um domínio existente ...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Formas clássicas indicativas de ação: </li></ul><ul><li>S...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Mecanismo de paginação: </li></ul><ul><li>Clara identific...
O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Utilização de ícones: </li></ul><ul><li>PONTO ...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Navegação por abas </li></ul><ul><li>Bastante positivo pa...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Consistência e padrões </li></ul><ul><li>Elementos visuai...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Títulos e boxes </li></ul><ul><li>A marca-mãe em primeiro...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Identificação por cores </li></ul><ul><li>Além do menu id...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Testeiras (headers) </li></ul><ul><li>Além de trazer uma ...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Agrupamento temáticos </li></ul><ul><li>Visando orientar ...
O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Busca por Cloud Tags </li></ul><ul><li>Para o ...
O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Dashboard </li></ul><ul><li>Aplicações de nova...
<ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Google Desktop </li></ul><ul><li>Os documentos vão sendo ...
O DESENCONTRO
O DESENCONTRO <ul><li>Agrupamento lógico </li></ul><ul><li>O Atendimento on-line ao lado do Crédito parcelado? Por que? </...
O DESENCONTRO <ul><li>Organização visual </li></ul><ul><li>Para onde ir? </li></ul>
O DESENCONTRO <ul><li>Scrol </li></ul><ul><li>Dois scrolls verticais? </li></ul><ul><li>Que confusão é essa? </li></ul>
O DESENCONTRO <ul><li>Indefinição </li></ul><ul><li>Escolha uma maneira e vá com ela até o fim! </li></ul>
O DESENCONTRO <ul><li>Tela de resposta </li></ul><ul><li>ao digitar uma palavra-chave na busca e clicar &quot;enter&quot;,...
O DESENCONTRO <ul><li>Perda de navegação </li></ul><ul><li>Depois de selecionar um deles, o usuário perde toda a navegação...
O DESENCONTRO <ul><li>Visualização </li></ul><ul><li>O Submarino não deixa ordenar por preço.  </li></ul><ul><li>Deixa ord...
O DESENCONTRO <ul><li>Labels </li></ul><ul><li>“ Site index”, neste caso, é o mesmo de “mapa do site” </li></ul>
O DESENCONTRO <ul><li>Formulários </li></ul><ul><li>o usuário tem que usar a tecla tab ou clicar com o mouse para mudar de...
PARA EVITAR... PAPER PROTOTYPE EYE TRACKING CARD SORTING TESTE DE USABILIDADE ANÁLISE HEURÍSTICA 1 2 3 4 5 <ul><li>Com a p...
PARA EVITAR... ANÁLISE HEURÍSTICA 1 <ul><li>Formuladas em 1993 por  Jakob Nielsen , este conjunto de descobertas são ainda...
PARA EVITAR... TESTE DE USABILIDADE 2 <ul><li>Podem ser realizados em diversas circunstâncias: </li></ul><ul><ul><ul><li>T...
PARA EVITAR... TESTE DE USABILIDADE 2 <ul><li>Como se dá: </li></ul><ul><ul><ul><li>Entrevistador apresenta cenário e tare...
PARA EVITAR... CARD SORTING 3 <ul><li>O processo é feito geralmente antes do início das atividades de Arquitetura de Infor...
CARD SORTING <ul><ul><li>... para um site </li></ul></ul>
CARD SORTING <ul><ul><li>... para um aparelho celular da Apple. </li></ul></ul>http://br.youtube.com/watch?v=RTwfz9x98A8
PARA EVITAR... PAPER PROTOTYPE 4 <ul><li>O teste é feito ainda em estágio de wireframes. </li></ul><ul><li>As páginas impr...
PARA EVITAR... PAPER PROTOTYPE 4
PARA EVITAR... PAPER PROTOTYPE 4
PARA EVITAR... PAPER PROTOTYPE 4
PARA EVITAR... EYE TRACKING 5 <ul><li>Certamente, o tipo de teste de maior investimento. </li></ul><ul><li>Mediante tarefa...
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5 <ul><li>Algumas recomendações: </li></ul><ul><ul><li>Usuários não lêem seu texto inteirament...
<ul><li>http://www.guilhermo.com/ </li></ul><ul><li>http://tadificil.wordpress.com/ </li></ul><ul><li>http://www.dontclick...
<ul><ul><li>OBRIGADO! </li></ul></ul><ul><ul><li>Maurício Moreira </li></ul></ul><ul><ul><li>[email_address] </li></ul></u...
Upcoming SlideShare
Loading in …5
×

12° Encontro de WebDesign (usabilidade)

2,140 views
2,093 views

Published on

Apresentação sobre usabilidade no 12° Encontro de WebDesign. A partir de cases de sucesso e insucesso, abordamos os principais fundamentos da disciplina.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
2,140
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
188
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

12° Encontro de WebDesign (usabilidade)

  1. 1. Usabilidade Visão e processo para implementar projetos com foco no usuário
  2. 2. <ul><li>Por que propusemos tratar do tema Usabilidade neste encontro? </li></ul><ul><ul><li>Ela foi revisitada? </li></ul></ul><ul><ul><li>Suas formulações teóricas não fazem mais sentido? </li></ul></ul><ul><ul><li>Descobrimos que Jakob Nielsen é um estudioso ultrapassado? </li></ul></ul><ul><ul><li>A web 2.0 implodiu os principais conceitos da disciplina? </li></ul></ul>USABILIDADE: de novo esse tema?
  3. 3. <ul><ul><li>NADA DISSO JUSTIFICA! </li></ul></ul><ul><ul><li>O motivo que nos traz aqui para falar um pouco mais sobre o tema é o fato de a Internet ser considerada, cada vez mais, um ambiente de relacionamento e comunicação para as mais diversas audiências. </li></ul></ul><ul><ul><li>E isto aponta que: </li></ul></ul><ul><ul><ul><li>A disciplina precisa ser considerada no desenvolvimento de projetos com uma atenção jamais vista! </li></ul></ul></ul>USABILIDADE: de novo esse tema?
  4. 4. <ul><ul><li>Vamos então brevemente recapitular o conceito.... </li></ul></ul>
  5. 5. http://br.youtube.com/watch?v=sYahB9Ib_SY
  6. 6. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” A TAL USABILIDADE
  7. 7. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” celulares softwares televisão A maçaneta da minha casa A TAL USABILIDADE
  8. 8. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” telespectadores ouvintes internautas Os motoristas A TAL USABILIDADE
  9. 9. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” Hora de ler meus e-mails Acompanhar o sobe e desce da Bolsa de Valores Chegar ao vigésimo andar de elevador A TAL USABILIDADE
  10. 10. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável .” Comprei os ingressos com antecedência pela internet. É baba, vai lá. Esse mapa do metrô não ajuda em nada. E agora, não sei falar japonês?! Filho, como eu faço pra esse celular parar de tocar? A TAL USABILIDADE
  11. 11. <ul><li>É por isso que os profissionais que desenvolvem produtos interativos (e eles estão ao nosso redor a todo instante) precisam ter o foco na necessidade do usuário: </li></ul><ul><ul><li>Em seu jeito de agir </li></ul></ul><ul><ul><li>Seus hábitos adquiridos ao longo do tempo </li></ul></ul><ul><ul><li>A sua herança comportamental </li></ul></ul><ul><ul><li>O que eles querem/esperam da vida </li></ul></ul><ul><li>Mas nem sempre nossos “usuários” são bem cuidados. Por essas e outras, eu digo: </li></ul><ul><ul><li>O mundo é difícil de usar </li></ul></ul>A TAL USABILIDADE
  12. 12. <ul><ul><li>O mundo de quem precisa lavar as mãos é difícil. </li></ul></ul>O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=xdoc4LaTu_Q
  13. 13. <ul><ul><li>O mundo de quem quer sair dos lugares é difícil. </li></ul></ul>O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=66ShiGK21TA
  14. 14. O MUNDO É DIFÍCIL... <ul><ul><li>O mundo de quem quer polivitamínicos também é difícil. </li></ul></ul>
  15. 15. <ul><ul><li>O mundo de quem quer comprar TV por assinatura é difícil. </li></ul></ul>O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=zG3wCr7_DWw
  16. 16. <ul><li>Para implementar projetos com foco no interesse do usuário e que leve em consideração boas práticas de usabilidade é importante o alinhamento entre 2 profissionais. </li></ul>ATERRISANDO NA WEB... Os arquitetos de informação Os designers
  17. 17. OS ARQUITETOS.... <ul><li>Pegam briefings com cliente e entram na dinâmica de seus produtos e serviços. </li></ul><ul><li>São responsáveis por organizar os conteúdos. </li></ul><ul><li>O arquiteto é quem veste a fantasia do usuário prevendo seu comportamento de navegação. </li></ul><ul><li>Ele monta árvores de navegação (info-estruturas), esboços gráficos da página (wireframes) e fluxogramas de processos. </li></ul><ul><li>Em seu desktop sempre estão abertos o Visio, o PowerPoint, o Mind Manager. </li></ul><ul><li>É ele quem entrega ao designers páginas que vão precisar ser desenhadas. </li></ul>
  18. 18. OS ARQUITETOS.... <ul><li>Um pouco da sua produção: </li></ul>Infoestrutura Wireframes
  19. 19. OS DESIGNERS... <ul><li>São repletos de referências visuais. </li></ul><ul><li>Têm o papel de traduzir visualmente as estratégias digitais do cliente, seja em um site, hotsite, campanha. </li></ul><ul><li>Definem conceitos de imagens, tipologias, texturas e grafismos. </li></ul><ul><li>Trabalham ora com referências rígidas de seus clientes (o que muitas vezes gera um certo grau de insatisfação), ora com liberdade total (o job que todos querem!). </li></ul><ul><li>Na sua mesa, é fácil encontrar uma tablet pra desenhar. </li></ul><ul><li>No desktop, o Photoshop, o Flash, o Ilustrator, às vezes o 3D Studio Max. </li></ul><ul><li>Às vezes, o Second Life! </li></ul>
  20. 20. OS DESIGNERS... <ul><li>Um pouco da sua produção: </li></ul>
  21. 21. <ul><li>E é do encontro entre estes profissionais que nasce as implementações de Usabilidade. Juntos, eles têm a missão de promover: </li></ul><ul><ul><li>Facilidade de aprendizado - o usuário rapidamente consegue explorar o sistema e realizar suas tarefas; </li></ul></ul><ul><ul><li>Eficiência de uso - tendo aprendido a interagir com o sistema, o usuário atinge níveis altos de produtividade na realização de suas tarefas; </li></ul></ul><ul><ul><li>Facilidade de memorização - após um certo período sem utilizá-lo, o usuário não freqüente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele; </li></ul></ul><ul><ul><li>Baixa taxa de erros - o usuário realiza suas tarefas sem maiores transtornos e é capaz de recuperar erros, caso ocorram; </li></ul></ul><ul><ul><li>Satisfação subjetiva - o usuário considera agradável à interação com o sistema e se sente subjetivamente satisfeito com ele. </li></ul></ul>O ENCONTRO
  22. 22. O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Comportamento de menus: </li></ul><ul><li>Uma aplicação para demonstrar que clique vai levar a página interna (>>) </li></ul><ul><li>Na outra aplicação (com marcador) fica demonstrado o comportamento de sub-menu (>) </li></ul><ul><ul><li>Além disso o marcador recebe uma diferenciação de indicação </li></ul></ul><ul><ul><li>E sub-itens apresentados ganham BG escurecido. </li></ul></ul>
  23. 23. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Utilização de ALT’s como forma de: </li></ul><ul><li>Complementar o label disponível </li></ul><ul><li>Oferecer uma espécie de preview ao que vai ser encontrado </li></ul>O ENCONTRO
  24. 24. <ul><li>Quando esse encontro traz bons furtos: </li></ul>Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 1: Página de erro do browser. Pouco atrativa! O ENCONTRO
  25. 25. <ul><li>Quando esse encontro traz bons furtos: </li></ul>Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 2: Maior receptividade. Possibilidade de novos caminhos de navegação e interesse. O ENCONTRO
  26. 26. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Formas clássicas indicativas de ação: </li></ul><ul><li>Símbolos de mais e menos. </li></ul>O ENCONTRO
  27. 27. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Mecanismo de paginação: </li></ul><ul><li>Clara identificação de: </li></ul><ul><ul><li>páginas existentes (4) </li></ul></ul><ul><ul><li>Quantidade de itens (214) </li></ul></ul><ul><ul><li>Botões de próximo e anterior </li></ul></ul><ul><li>“ Over” no botão uma vez que o usuário faz uma determinada ação. </li></ul>O ENCONTRO
  28. 28. O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Utilização de ícones: </li></ul><ul><li>PONTO POSITIVO: </li></ul><ul><ul><li>Quando as identificações são de uso popular </li></ul></ul><ul><li>PONTO NEGATIVO: </li></ul><ul><ul><li>Ao adotar uma linha visual amparada na criação de ícones, e se começa a expandir para a invenção de formas para os mais diversos temas. </li></ul></ul>
  29. 29. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Navegação por abas </li></ul><ul><li>Bastante positivo para facilitar a visualização de conteúdos numa mesma página. </li></ul><ul><li>Plataformas desenvolvidas em AJAX permitem que o usuário não carregue a página inteira a cada clique. </li></ul>O ENCONTRO
  30. 30. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Consistência e padrões </li></ul><ul><li>Elementos visuais padronizados ao longo de todo o site, bem como de toda as linhas de produtos da marca corporativa. </li></ul><ul><ul><li>Menus, Destaques, Brand Image, Padrão de links, Marcadores ect </li></ul></ul><ul><li>Diminui a curva de aprendizagem do usuário </li></ul><ul><li>Garante experiência positiva de acessos futuros </li></ul>homepage Ferramentas elétricas Tecnologia automotiva O ENCONTRO
  31. 31. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Títulos e boxes </li></ul><ul><li>A marca-mãe em primeiro plano agregando a ela o nome do serviço/produto a ser apresentado. </li></ul><ul><li>Garante uniformidade ao longo de toda a navegação. </li></ul><ul><li>Para o usuário fica “claro” o que são os destaques do site. </li></ul>O ENCONTRO
  32. 32. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Identificação por cores </li></ul><ul><li>Além do menu identificado por cores, o Globo.com traz seus destaques relacionados às áreas também na mesma cor. </li></ul><ul><li>Com o tempo, o usuário se acostuma com o tom de cada área e se movimenta melhor pelo site. </li></ul>O ENCONTRO
  33. 33. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Testeiras (headers) </li></ul><ul><li>Além de trazer uma experiência mais agradável em termos visuais, ajuda o usuário a se localizar. </li></ul>O ENCONTRO
  34. 34. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Agrupamento temáticos </li></ul><ul><li>Visando orientar a busca por informações. </li></ul>O ENCONTRO
  35. 35. O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Busca por Cloud Tags </li></ul><ul><li>Para o usuário que deseja fazer uma busca de menor foco, as cloud tags permitem que ele obtenha um overview do que é mais popular dentro de um determinado tema. </li></ul>
  36. 36. O ENCONTRO <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Dashboard </li></ul><ul><li>Aplicações de novas tecnologias requerem uma nova curva de aprendizado nova. </li></ul><ul><li>Uma vez aprendidas, estes novos features só trazem ganhos para os usuários, uma vez que permitem a personalização de sites. </li></ul>
  37. 37. <ul><li>Quando esse encontro traz bons furtos: </li></ul><ul><li>Google Desktop </li></ul><ul><li>Os documentos vão sendo apresentados a cada nova letra digitada. </li></ul><ul><li>Permite fazer relações que nem mesmo o usuário imaginasse que pudesse ser feita. </li></ul>O ENCONTRO
  38. 38. O DESENCONTRO
  39. 39. O DESENCONTRO <ul><li>Agrupamento lógico </li></ul><ul><li>O Atendimento on-line ao lado do Crédito parcelado? Por que? </li></ul><ul><li>E essa distância das ações até o footer? </li></ul>
  40. 40. O DESENCONTRO <ul><li>Organização visual </li></ul><ul><li>Para onde ir? </li></ul>
  41. 41. O DESENCONTRO <ul><li>Scrol </li></ul><ul><li>Dois scrolls verticais? </li></ul><ul><li>Que confusão é essa? </li></ul>
  42. 42. O DESENCONTRO <ul><li>Indefinição </li></ul><ul><li>Escolha uma maneira e vá com ela até o fim! </li></ul>
  43. 43. O DESENCONTRO <ul><li>Tela de resposta </li></ul><ul><li>ao digitar uma palavra-chave na busca e clicar &quot;enter&quot;, o usuário vê uma resposta sobre login e senha, referente a outro campo de preenchimento. </li></ul>
  44. 44. O DESENCONTRO <ul><li>Perda de navegação </li></ul><ul><li>Depois de selecionar um deles, o usuário perde toda a navegação. </li></ul>
  45. 45. O DESENCONTRO <ul><li>Visualização </li></ul><ul><li>O Submarino não deixa ordenar por preço. </li></ul><ul><li>Deixa ordenar por fabricante, por mais vendido, por nome do produto. </li></ul>
  46. 46. O DESENCONTRO <ul><li>Labels </li></ul><ul><li>“ Site index”, neste caso, é o mesmo de “mapa do site” </li></ul>
  47. 47. O DESENCONTRO <ul><li>Formulários </li></ul><ul><li>o usuário tem que usar a tecla tab ou clicar com o mouse para mudar de campo no preenchimento da data. </li></ul>
  48. 48. PARA EVITAR... PAPER PROTOTYPE EYE TRACKING CARD SORTING TESTE DE USABILIDADE ANÁLISE HEURÍSTICA 1 2 3 4 5 <ul><li>Com a profissionalização da disciplina e a descoberta de sua importância, o mercado desenvolveu produtos para medir a satisfação do usuário em termos de facilidade de acesso ao site. </li></ul>
  49. 49. PARA EVITAR... ANÁLISE HEURÍSTICA 1 <ul><li>Formuladas em 1993 por Jakob Nielsen , este conjunto de descobertas são ainda hoje fundamentais para se identificar falhas de usabilidade. </li></ul><ul><li>Em geral, este teste é feito por especialistas no assunto, e listam uma série de problemas identificadas em grau de importância. </li></ul><ul><ul><ul><li>Construir diálogos simples e naturais </li></ul></ul></ul><ul><ul><ul><li>Falar a linguagem do usuário </li></ul></ul></ul><ul><ul><ul><li>Minimizar a necessidade de memorização do usuário </li></ul></ul></ul><ul><ul><ul><li>Manter a consistência </li></ul></ul></ul><ul><ul><ul><li>Oferecer feedback </li></ul></ul></ul><ul><ul><ul><li>Identificar claramente as “saídas” </li></ul></ul></ul><ul><ul><ul><li>Oferecer atalhos </li></ul></ul></ul><ul><ul><ul><li>Elaborar boas mensagens de erro </li></ul></ul></ul><ul><ul><ul><li>Evitar a ocorrência de erros </li></ul></ul></ul><ul><ul><ul><li>Prover ajuda e documentação de apoio </li></ul></ul></ul>
  50. 50. PARA EVITAR... TESTE DE USABILIDADE 2 <ul><li>Podem ser realizados em diversas circunstâncias: </li></ul><ul><ul><ul><li>Teste de usabilidade presencial individual </li></ul></ul></ul><ul><ul><ul><li>Teste de usabilidade presencial em grupo </li></ul></ul></ul><ul><ul><ul><li>Teste de usabilidade via telefone </li></ul></ul></ul><ul><ul><ul><li>Teste de usabilidade via chat </li></ul></ul></ul>
  51. 51. PARA EVITAR... TESTE DE USABILIDADE 2 <ul><li>Como se dá: </li></ul><ul><ul><ul><li>Entrevistador apresenta cenário e tarefas. </li></ul></ul></ul><ul><ul><ul><li>Usuários discutem melhor forma para realizar atividades propostas. </li></ul></ul></ul><ul><ul><ul><li>Observador faz anotações e registra comentários. </li></ul></ul></ul>
  52. 52. PARA EVITAR... CARD SORTING 3 <ul><li>O processo é feito geralmente antes do início das atividades de Arquitetura de Informação. </li></ul><ul><li>Os pesquisados são convidados a montarem suas árvores de navegação. </li></ul><ul><li>Constroem de forma a facilitar o acesso à informação desejada. </li></ul><ul><li>Considerado altamente eficaz na relação custo x benefício. </li></ul>
  53. 53. CARD SORTING <ul><ul><li>... para um site </li></ul></ul>
  54. 54. CARD SORTING <ul><ul><li>... para um aparelho celular da Apple. </li></ul></ul>http://br.youtube.com/watch?v=RTwfz9x98A8
  55. 55. PARA EVITAR... PAPER PROTOTYPE 4 <ul><li>O teste é feito ainda em estágio de wireframes. </li></ul><ul><li>As páginas impressas são submetidas aos usuários, que registram suas opiniões sobre a formatação das mesmas. </li></ul><ul><li>Ou, ainda, é possível disponibilizar a ele “elementos de página” e solicitar que o próprio faça a montagem. </li></ul>
  56. 56. PARA EVITAR... PAPER PROTOTYPE 4
  57. 57. PARA EVITAR... PAPER PROTOTYPE 4
  58. 58. PARA EVITAR... PAPER PROTOTYPE 4
  59. 59. PARA EVITAR... EYE TRACKING 5 <ul><li>Certamente, o tipo de teste de maior investimento. </li></ul><ul><li>Mediante tarefas oferecidas ao usuário, ele observa o site com tendo o movimento de seus olhos monitorados. </li></ul><ul><li>Alta eficiência! </li></ul><ul><li>Algumas conclusões dos estudos (modelo F ): </li></ul><ul><ul><li>Usuário primeiro lê um movimento horizontal, geralmente a parte de conteúdo superior. </li></ul></ul><ul><ul><li>Próximo, usuários descem um pouco e lêem o segundo movimento horizontal </li></ul></ul><ul><ul><li>Em seguida, scaneiam o conteúdo da esquerda em um movimento vertical </li></ul></ul>
  60. 60. PARA EVITAR... EYE TRACKING 5
  61. 61. PARA EVITAR... EYE TRACKING 5
  62. 62. PARA EVITAR... EYE TRACKING 5
  63. 63. PARA EVITAR... EYE TRACKING 5
  64. 64. PARA EVITAR... EYE TRACKING 5 <ul><li>Algumas recomendações: </li></ul><ul><ul><li>Usuários não lêem seu texto inteiramente palavra-por-palavra . Leitura exaustiva é rara! </li></ul></ul><ul><ul><li>Os dois primeiros parágrafos devem conter informações mais importantes </li></ul></ul><ul><ul><li>Técnica da pirâmide invertida : Inicie cabeçalhos e parágrafos com informações chaves que conduza usuários a escanear verticalmente o conteúdo. </li></ul></ul>
  65. 65. <ul><li>http://www.guilhermo.com/ </li></ul><ul><li>http://tadificil.wordpress.com/ </li></ul><ul><li>http://www.dontclick.it/ </li></ul><ul><li>http://www.usability.com.br/usabilidade.html </li></ul><ul><li>http://www.usabilidoido.com.br/ </li></ul><ul><li>http://www.boxesandarrows.com/ </li></ul>ALGUNS LINKS
  66. 66. <ul><ul><li>OBRIGADO! </li></ul></ul><ul><ul><li>Maurício Moreira </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul>

×