Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,299 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

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>

×