Curso Avançado  Quantos produtos  interativos  existem em nossas vidas? (Pense um instante)
Curso Avançado  Produtos de todo o dia Aparelhos celulares, players de música, DVDs, calculadoras, computadores....
Curso Avançado  Dificuldades de todo dia Quando algum produto  deixou você na mão ? Qual deles não são assim tão fáceis de...
Curso Avançado  Atividades Simples Algumas coisas corriqueiras as  vezes são complicadas . Em um elevador qual botão te le...
Curso Avançado  Facilitando o Dia-a-Dia Um grande shopping center, abortou os números e letras, adotou frutas para fazer a...
Curso Avançado  Memória Visual É a comunicação que vem pelos olhos e é responsável por cerca de 75% do que se grava na mem...
Curso Avançado  Memória Escrita É a comunicação que vem através de um documento escrito, em papel ou em tela. MEMÓRIA ESCR...
Curso Avançado  Memória Gráfica É a comunicação que vem através de símbolos, desenhos, plantas, diagramas, ícones, fotos o...
Curso Avançado  Comunicação Visual É a comunicação que vem da junção da comunicação gráfica com a escrita, onde um símbolo...
Curso Avançado  Memória Áudio Visual Junta a Comunicação Visual com a auditiva. É considerada a mais eficiente de todas. O...
Curso Avançado  O que faz um  bom  design? Produtos utilizáveis, fáceis de aprender, eficazes e que proporcionam uma exper...
Curso Avançado  O que faz um  mau  design? Produtos irritantes, confusos, ineficientes, com muitos passos, difíceis de usa...
Curso Avançado  Onde entra a Usabilidade? As boas práticas de usabilidade devem otimizar as interações com sistemas, de fo...
Curso Avançado  Metas e Objetivos As três principais metas de usabilidade são  eficiência ,  memorização  e  aprendizado ....
Curso Avançado  Metas de Eficiência Qual o grau de dificuldade que os seus clientes encontram para  comprar em seu site ?
Curso Avançado  Metas de eficácia Usando o exemplo de comércio eletrônico, as perguntas seriam: Qual é a taxa de conversão...
Curso Avançado  Metas de Aprendizado Quanto tempo os seus usuários demoram para aprender a interagir com o seu website?
Curso Avançado  Metas de Aprendizado O seu site é auto-explicativo? Existe alguma área que estimule o aprendizado sobre a ...
Curso Avançado  Metas de Aprendizado Usando o exemplo de comércio eletrônico, as perguntas seriam: Qual o tempo médio que ...
Curso Avançado  Metas de Memorização Depois que os seus clientes entram no seu site, eles conseguem lembrar como executara...
Curso Avançado  Metas de Memorização A memorização pode se tornar um índice de fidelização de clientes, após eles consegui...
Curso Avançado  O que são Ícones? Ícone  é uma imagem que mantém uma relação de  semelhança ou propriedade  com um determi...
Curso Avançado  <ul><li>Princípios sobre design </li></ul><ul><li>Antes de entender mais sobre usabilidade, é necessário e...
Curso Avançado  Visibilidade Quanto mais visível for algo mais os usuários vão saber como proceder .
Curso Avançado  FeedBack Após uma ação, existe a resposta visual do sistema. Ao pressionar o acelerador, o ponteiro de vel...
Curso Avançado  Restrições Delimita o tipo de interação que pode ocorrer em determinado momento, ou seja, o que o usuário ...
Curso Avançado  Mapeamentos Relação entre controle e seus efeitos no mundo, geralmente seguindo alguma convenção. Como por...
Curso Avançado  Consistência Manter padrões de interface para as operações semelhantes facilita o aprendizado e a memoriza...
Curso Avançado  Affordance Um objeto deve sugerir a ação que deve ser tomada, um botão deve pedir para ser clicado.
Curso Avançado  Analisando sites Com os conceitos de  necessidade ,  memorização  e os  princípios de design , é possível ...
Curso Avançado
Curso Avançado  O  ícone  aproxima todas as funções relacionadas a personalização, facilitando a  memorização  e mantendo ...
Curso Avançado  a  seta  sugere que algo ocorrerá após uma ação do mouse. Isso é sinalização com FeedBack.
Curso Avançado
Curso Avançado
Curso Avançado  A área “aprenda sobre” é muito importante para o  aprendizado  dos novos usuários
Curso Avançado  A  visibilidade  das principais funções do site induzem o usuário a navegar corretamente.
Curso Avançado
Curso Avançado  o  mapeamento  é a convenção das funções, nesse caso o player interativo, se aproxima das funções dos play...
Curso Avançado
Curso Avançado  A distância entre a área do clique e o  FeedBack  do site podem dificultar o entendimento do usuário
Curso Avançado  Por não haver uma  restrição  coerente, o usuário pode cometer erros, como escolher a data de volta, anter...
Curso Avançado
Curso Avançado  Sem  Affordance  o usuário não percebe que um item sugere uma ação.
Curso Avançado  Criando protótipos Antes de começar a fazer um site é feito um “ wireframe ” funcional, que nada mais é qu...
Curso Avançado
Curso Avançado
Curso Avançado  Como testar? Para conseguir melhores índices de satisfação do usuário final, o website deve ser testado. E...
Curso Avançado  <ul><li>Definição do Público </li></ul><ul><li>A seleção de pessoas que contemplem a abrangência do públic...
Curso Avançado  <ul><li>Tarefas do Teste </li></ul><ul><li>Para o teste de usabilidade algumas tarefas são definidas para ...
Curso Avançado  Avaliação de Amostragem É possível testar um protótipo através de uma pequena amostragem.
Curso Avançado  O teste é realizado em uma  sala de teste  onde  4 a 6 pessoas  executam uma lista de tarefas  pré-definid...
Curso Avançado  A sala de testes geralmente é dividida em duas áreas. De um lado ficam o  usuário e o avaliador . O avalia...
Curso Avançado  Do outro lado ficam os projetistas do produto, que fazem suas pré-considerações sobre o que deve ser  mant...
Curso Avançado  Eyetracking / Mapa de Calor O desenvolvimento de tarefas também pode ser monitorado pelo  comportamento do...
Curso Avançado  Com o  eyetracking  é possível analisar os caminhos mais freqüentes percorridos pelo olho do usuário. Essa...
Curso Avançado  Card Sorting Categorizar  o site é uma tarefa complexa. Utilizar o usuário no processo de  classificação  ...
Curso Avançado  Um aspirador de pó é um eletrodoméstico ou um eletro portátil?
Curso Avançado  <ul><li>Avaliando os Resultados </li></ul><ul><li>Após testar um site / protótipo alguns pontos </li></ul>...
Curso Avançado  Teste de Comparação e Validação Após a avaliação do primeiro teste e levar em consideração os feedbacks do...
Curso Avançado  Relatório de Satisfação Após a conclusão dos testes, é realizado um relatório constando todas as  métricas...
Curso Avançado  Dicas Um conjunto de dicas que melhoram consideravelmente o desempenho de web sites.
Curso Avançado  Onde estou, para onde vou? É importante informar ao usuário exatamente aonde ele está situado dentro de um...
Curso Avançado  Links devem parecer links
Curso Avançado  Sem Saída Não deixe o seu usuário sem saída. Se ele cometer algum erro, deixe alguma área de escape para e...
Curso Avançado  Boas Vindas Se for possível, disponha de uma área para os navegantes de  primeira viagem em seu website.
Curso Avançado  Aproxime as Informações Estruture a interface aproximando as informações em grupo.
Curso Avançado  Menos é Mais Evite a tentação do excesso.
Curso Avançado  Formulários Curtos Evite formulários longos. Já somos obrigados a preencher tanta coisa, seja sintético no...
Curso Avançado  Induza ao Acerto Auto-complete é um recurso que induz o usuário a tomar o caminho certo.
Curso Avançado  Usabilidade e Design de Interação para construir marcas. É possível fazer da usabilidade um diferencial co...
Curso Avançado  A apple fez
Curso Avançado  Extrapolar a Interatividade Toca, escuta e vê
Curso Avançado  Para cada ocasião um produto Em casa, na academia, no trabalho, qual é o melhor?
Curso Avançado  Menos é mais Uma vida com muito menos fios.
Curso Avançado  A amazon fez.
Curso Avançado  Uma Década Simplificando. A amazon é a maior varejista on-line do mundo. O foco no usuário fez com que a n...
Curso Avançado  1998  Tudo começou com livros, e logo foi necessário adaptar as abas para suportar outras categorias como,...
Curso Avançado  1998 - 1999  Já em 1999, outras categorias como, eletrônicos e brinquedos, começaram a fazer parte do lequ...
Curso Avançado  1999 - 2001  As primeiras tentativas para simplificar a categorização que não parava de crescer.
Curso Avançado  2001 - 2003  Começou a personalização da navegação.
Curso Avançado  2004 - 2006  Reduzindo as abas.
Curso Avançado  2006 - 2008  Tudo em um.
Curso Avançado  Novos Formatos de Interação O que está mudando na maneira como interagimos, entre nós mesmos e com as máqu...
Curso Avançado  Hologramas.
Curso Avançado  Livros sem papel
Curso Avançado  Teclados Virtuais
Curso Avançado  ;) Tiê Lima Blog: www.singlepeer.com e-mail: tielima@gmail.com
Próximos SlideShares
Carregando em…5
×

Usabilidade Curso Digital

3.991 visualizações

Publicada em

Usabilidade Curso Digital

Publicada em: Design
1 comentário
6 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
3.991
No SlideShare
0
A partir de incorporações
0
Número de incorporações
760
Ações
Compartilhamentos
0
Downloads
82
Comentários
1
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Usabilidade Curso Digital

  1. 1. Curso Avançado Quantos produtos interativos existem em nossas vidas? (Pense um instante)
  2. 2. Curso Avançado Produtos de todo o dia Aparelhos celulares, players de música, DVDs, calculadoras, computadores....
  3. 3. Curso Avançado Dificuldades de todo dia Quando algum produto deixou você na mão ? Qual deles não são assim tão fáceis de usar?
  4. 4. Curso Avançado Atividades Simples Algumas coisas corriqueiras as vezes são complicadas . Em um elevador qual botão te leva para o primeiro andar? O “T” o “P”o “ZERO” ou o “1” ?
  5. 5. Curso Avançado Facilitando o Dia-a-Dia Um grande shopping center, abortou os números e letras, adotou frutas para fazer a relação entre andares. Nesse caso, a imagem da fruta foi utilizada para auxiliar a memória.
  6. 6. Curso Avançado Memória Visual É a comunicação que vem pelos olhos e é responsável por cerca de 75% do que se grava na memória. A comunicação através da memória visual pode ser captada por quatro formas diferentes. MEMÓRIA ESCRITA GRÁFICA COMUNICAÇÃO VISUAL AUDIO VISUAL
  7. 7. Curso Avançado Memória Escrita É a comunicação que vem através de um documento escrito, em papel ou em tela. MEMÓRIA ESCRITA GRÁFICA COMUNICAÇÃO VISUAL AUDIO VISUAL
  8. 8. Curso Avançado Memória Gráfica É a comunicação que vem através de símbolos, desenhos, plantas, diagramas, ícones, fotos ou outros recursos gráficos isoladamente. É o caso da maioria das placas de trânsito, onde um único símbolo tenta traduzir o que a placa representa, de forma rápida e eficaz. MEMÓRIA ESCRITA GRÁFICA COMUNICAÇÃO VISUAL AUDIO VISUAL
  9. 9. Curso Avançado Comunicação Visual É a comunicação que vem da junção da comunicação gráfica com a escrita, onde um símbolo, desenho, etc., vem acompanhado de palavras-chave ou textos que complementam o símbolo, desenho, etc. Usando o mesmo exemplo de placas de trânsito, há uma placa que significa &quot;cuidado, pista derrapante&quot; mas que pode vir acompanhado da expressão &quot;Em dias de chuva&quot;. MEMÓRIA ESCRITA GRÁFICA COMUNICAÇÃO VISUAL AUDIO VISUAL
  10. 10. Curso Avançado Memória Áudio Visual Junta a Comunicação Visual com a auditiva. É considerada a mais eficiente de todas. O dispositivo cognitivo do cérebro ativa os dois principais sentidos, chegando a um índice de cerca de 84% de eficiência. MEMÓRIA ESCRITA GRÁFICA COMUNICAÇÃO VISUAL AUDIO VISUAL
  11. 11. Curso Avançado O que faz um bom design? Produtos utilizáveis, fáceis de aprender, eficazes e que proporcionam uma experiência agradável.
  12. 12. Curso Avançado O que faz um mau design? Produtos irritantes, confusos, ineficientes, com muitos passos, difíceis de usar, não óbvios e que podem induzir o usuário ao erro.
  13. 13. Curso Avançado Onde entra a Usabilidade? As boas práticas de usabilidade devem otimizar as interações com sistemas, de forma que a execução de uma atividade seja quase intuitiva, ajudando as pessoas.
  14. 14. Curso Avançado Metas e Objetivos As três principais metas de usabilidade são eficiência , memorização e aprendizado . Eficiência Aprendizado Memorização
  15. 15. Curso Avançado Metas de Eficiência Qual o grau de dificuldade que os seus clientes encontram para comprar em seu site ?
  16. 16. Curso Avançado Metas de eficácia Usando o exemplo de comércio eletrônico, as perguntas seriam: Qual é a taxa de conversão? (do total de visitas, quantas pessoas efetivamente concluem uma transação)? Qual a taxa de abandono de carrinho? (do total de itens incluídos no carrinho, quantos são abandonados no decorrer do processo)?
  17. 17. Curso Avançado Metas de Aprendizado Quanto tempo os seus usuários demoram para aprender a interagir com o seu website?
  18. 18. Curso Avançado Metas de Aprendizado O seu site é auto-explicativo? Existe alguma área que estimule o aprendizado sobre a utilização do seu produto ?
  19. 19. Curso Avançado Metas de Aprendizado Usando o exemplo de comércio eletrônico, as perguntas seriam: Qual o tempo médio que as pessoas gastam para finalizar um pedido?
  20. 20. Curso Avançado Metas de Memorização Depois que os seus clientes entram no seu site, eles conseguem lembrar como executaram uma tarefa?
  21. 21. Curso Avançado Metas de Memorização A memorização pode se tornar um índice de fidelização de clientes, após eles conseguirem concluir uma tarefa de maneira agradável, certamente irão retornar. Perguntas O seu site utiliza ícones para facilitar a memória visual?
  22. 22. Curso Avançado O que são Ícones? Ícone é uma imagem que mantém uma relação de semelhança ou propriedade com um determinando objeto. Um ícone é uma abstração de algo que é do nosso conhecimento e apresenta pelo menos um traço em comum com o objeto representado.
  23. 23. Curso Avançado <ul><li>Princípios sobre design </li></ul><ul><li>Antes de entender mais sobre usabilidade, é necessário entender alguns princípios do design. São eles: </li></ul><ul><li>Visibilidade </li></ul><ul><li>Feedback </li></ul><ul><li>Restrições </li></ul><ul><li>Mapeamento </li></ul><ul><li>Consistência </li></ul><ul><li>Affordance </li></ul>
  24. 24. Curso Avançado Visibilidade Quanto mais visível for algo mais os usuários vão saber como proceder .
  25. 25. Curso Avançado FeedBack Após uma ação, existe a resposta visual do sistema. Ao pressionar o acelerador, o ponteiro de velocidade se altera.
  26. 26. Curso Avançado Restrições Delimita o tipo de interação que pode ocorrer em determinado momento, ou seja, o que o usuário pode ou não fazer.
  27. 27. Curso Avançado Mapeamentos Relação entre controle e seus efeitos no mundo, geralmente seguindo alguma convenção. Como por exemplo, os ícones que representam as funções de pause, play e eject de um sistema de som.
  28. 28. Curso Avançado Consistência Manter padrões de interface para as operações semelhantes facilita o aprendizado e a memorização e proporciona segurança para o usuário
  29. 29. Curso Avançado Affordance Um objeto deve sugerir a ação que deve ser tomada, um botão deve pedir para ser clicado.
  30. 30. Curso Avançado Analisando sites Com os conceitos de necessidade , memorização e os princípios de design , é possível analisar se determinado site ou produto atende à essas questões básicas de usabilidade
  31. 31. Curso Avançado
  32. 32. Curso Avançado O ícone aproxima todas as funções relacionadas a personalização, facilitando a memorização e mantendo a consistência .
  33. 33. Curso Avançado a seta sugere que algo ocorrerá após uma ação do mouse. Isso é sinalização com FeedBack.
  34. 34. Curso Avançado
  35. 35. Curso Avançado
  36. 36. Curso Avançado A área “aprenda sobre” é muito importante para o aprendizado dos novos usuários
  37. 37. Curso Avançado A visibilidade das principais funções do site induzem o usuário a navegar corretamente.
  38. 38. Curso Avançado
  39. 39. Curso Avançado o mapeamento é a convenção das funções, nesse caso o player interativo, se aproxima das funções dos players mais tradicionais.
  40. 40. Curso Avançado
  41. 41. Curso Avançado A distância entre a área do clique e o FeedBack do site podem dificultar o entendimento do usuário
  42. 42. Curso Avançado Por não haver uma restrição coerente, o usuário pode cometer erros, como escolher a data de volta, anterior a data de ida.
  43. 43. Curso Avançado
  44. 44. Curso Avançado Sem Affordance o usuário não percebe que um item sugere uma ação.
  45. 45. Curso Avançado Criando protótipos Antes de começar a fazer um site é feito um “ wireframe ” funcional, que nada mais é que um protótipo do produto final, remetendo a definição de toda a arquitetura de informação .
  46. 46. Curso Avançado
  47. 47. Curso Avançado
  48. 48. Curso Avançado Como testar? Para conseguir melhores índices de satisfação do usuário final, o website deve ser testado. E para cada objetivo existe um método.
  49. 49. Curso Avançado <ul><li>Definição do Público </li></ul><ul><li>A seleção de pessoas que contemplem a abrangência do público-alvo do produto é crucial para obter uma amostragem satisfatória. </li></ul><ul><li>Alguns deles são: </li></ul><ul><li>Faixa salarial </li></ul><ul><li>Idade </li></ul><ul><li>Ocupação </li></ul>
  50. 50. Curso Avançado <ul><li>Tarefas do Teste </li></ul><ul><li>Para o teste de usabilidade algumas tarefas são definidas para que o público do site avalie o produto na prática. As tarefas devem: </li></ul><ul><li>Testar as ações cruciais do teste </li></ul><ul><li>Colocar o usuário em situação de dificuldade </li></ul><ul><li>Estimular que o usuário recorra ao auxilio do próprio site </li></ul>
  51. 51. Curso Avançado Avaliação de Amostragem É possível testar um protótipo através de uma pequena amostragem.
  52. 52. Curso Avançado O teste é realizado em uma sala de teste onde 4 a 6 pessoas executam uma lista de tarefas pré-definidas . A partir daí é possível tirar conclusões sobre os pontos fortes e os pontos fracos de um produto.
  53. 53. Curso Avançado A sala de testes geralmente é dividida em duas áreas. De um lado ficam o usuário e o avaliador . O avaliador é quem conduz as tarefas sem dar nenhum suporte as possíveis dificuldades do usuário.
  54. 54. Curso Avançado Do outro lado ficam os projetistas do produto, que fazem suas pré-considerações sobre o que deve ser mantido , deletado ou aperfeiçoado .
  55. 55. Curso Avançado Eyetracking / Mapa de Calor O desenvolvimento de tarefas também pode ser monitorado pelo comportamento do olhar .
  56. 56. Curso Avançado Com o eyetracking é possível analisar os caminhos mais freqüentes percorridos pelo olho do usuário. Essa informação permite aos projetistas re-organizar informações importantes de um site.
  57. 57. Curso Avançado Card Sorting Categorizar o site é uma tarefa complexa. Utilizar o usuário no processo de classificação pode reduzir o ruído de entendimento.
  58. 58. Curso Avançado Um aspirador de pó é um eletrodoméstico ou um eletro portátil?
  59. 59. Curso Avançado <ul><li>Avaliando os Resultados </li></ul><ul><li>Após testar um site / protótipo alguns pontos </li></ul><ul><li>devem ser levados em consideração. </li></ul><ul><li>Percentual de acertos das tarefas </li></ul><ul><li>Número de passos para cada tarefa </li></ul><ul><li>Tempo despendido em cada tarefa </li></ul><ul><li>Números de cliques por tarefa </li></ul>
  60. 60. Curso Avançado Teste de Comparação e Validação Após a avaliação do primeiro teste e levar em consideração os feedbacks dos usuários, é importante fazer um segundo teste, com o objetivo de comparar e validar os resultados.
  61. 61. Curso Avançado Relatório de Satisfação Após a conclusão dos testes, é realizado um relatório constando todas as métricas de avaliação , considerando todos os indicadores, incluindo a comparação entre o teste inicial e a validação .
  62. 62. Curso Avançado Dicas Um conjunto de dicas que melhoram consideravelmente o desempenho de web sites.
  63. 63. Curso Avançado Onde estou, para onde vou? É importante informar ao usuário exatamente aonde ele está situado dentro de um processo.
  64. 64. Curso Avançado Links devem parecer links
  65. 65. Curso Avançado Sem Saída Não deixe o seu usuário sem saída. Se ele cometer algum erro, deixe alguma área de escape para ele retornar ou tentar novamente.
  66. 66. Curso Avançado Boas Vindas Se for possível, disponha de uma área para os navegantes de primeira viagem em seu website.
  67. 67. Curso Avançado Aproxime as Informações Estruture a interface aproximando as informações em grupo.
  68. 68. Curso Avançado Menos é Mais Evite a tentação do excesso.
  69. 69. Curso Avançado Formulários Curtos Evite formulários longos. Já somos obrigados a preencher tanta coisa, seja sintético nos formulários de cadastro.
  70. 70. Curso Avançado Induza ao Acerto Auto-complete é um recurso que induz o usuário a tomar o caminho certo.
  71. 71. Curso Avançado Usabilidade e Design de Interação para construir marcas. É possível fazer da usabilidade um diferencial competitivo?
  72. 72. Curso Avançado A apple fez
  73. 73. Curso Avançado Extrapolar a Interatividade Toca, escuta e vê
  74. 74. Curso Avançado Para cada ocasião um produto Em casa, na academia, no trabalho, qual é o melhor?
  75. 75. Curso Avançado Menos é mais Uma vida com muito menos fios.
  76. 76. Curso Avançado A amazon fez.
  77. 77. Curso Avançado Uma Década Simplificando. A amazon é a maior varejista on-line do mundo. O foco no usuário fez com que a navegação do seu site acompanhasse a evolução do seu sortimento.
  78. 78. Curso Avançado 1998 Tudo começou com livros, e logo foi necessário adaptar as abas para suportar outras categorias como, música, vídeos e presentes.
  79. 79. Curso Avançado 1998 - 1999 Já em 1999, outras categorias como, eletrônicos e brinquedos, começaram a fazer parte do leque de produtos oferecidos pela loja.
  80. 80. Curso Avançado 1999 - 2001 As primeiras tentativas para simplificar a categorização que não parava de crescer.
  81. 81. Curso Avançado 2001 - 2003 Começou a personalização da navegação.
  82. 82. Curso Avançado 2004 - 2006 Reduzindo as abas.
  83. 83. Curso Avançado 2006 - 2008 Tudo em um.
  84. 84. Curso Avançado Novos Formatos de Interação O que está mudando na maneira como interagimos, entre nós mesmos e com as máquinas?
  85. 85. Curso Avançado Hologramas.
  86. 86. Curso Avançado Livros sem papel
  87. 87. Curso Avançado Teclados Virtuais
  88. 88. Curso Avançado ;) Tiê Lima Blog: www.singlepeer.com e-mail: tielima@gmail.com

×