Usabilidade para Pequenos e Médios Projetos Web

13,221 views

Published on

Workshop para participantes do Amazonas Design – 1º Encontro Estadual de Design, Manaus, AM.

Published in: Design
2 Comments
63 Likes
Statistics
Notes
No Downloads
Views
Total views
13,221
On SlideShare
0
From Embeds
0
Number of Embeds
6,303
Actions
Shares
0
Downloads
0
Comments
2
Likes
63
Embeds 0
No embeds

No notes for slide

Usabilidade para Pequenos e Médios Projetos Web

  1. 2. Sobre a oficina... <ul><li>Tema: Design de Interface + Usabilidade </li></ul><ul><li>Um “pouco” de Arquitetura da Informação </li></ul><ul><li>Nosso foco está nos sites </li></ul><ul><li>Infelizmente, não falaremos de testes </li></ul><ul><li>Métodos: “o que”, “por quê” e “como” </li></ul>
  2. 3. Definições
  3. 4. HCI “ O comportamento humano não é sempre igual, mas cheio de surpresas, o que dificulta o estabelecimento de “simples verdades” sobre o que esperar das pessoas em determinadas situações”. Lin (1994).
  4. 5. HCI... <ul><li>É uma disciplina maior que engloba o relacionamento físico-psicológico da interação homem-máquina </li></ul><ul><li>Busca desenvolver um modelo teórico de performance humana </li></ul><ul><li>Criar ferramentas capazes de medir a facilidade de uso </li></ul>
  5. 6. HCI... <ul><li>Estudos nas áreas de: </li></ul><ul><ul><li>Ergonomia </li></ul></ul><ul><ul><li>Projeto de Produto </li></ul></ul><ul><ul><li>Desempenho </li></ul></ul><ul><ul><li>Arquitetura da Informação </li></ul></ul><ul><ul><li>Usabilidade </li></ul></ul><ul><ul><li>Engenharia Semiótica </li></ul></ul><ul><ul><li>Design Gráfico... </li></ul></ul>
  6. 7. Arquitetura da Informação <ul><li>É a arte e ciência de estruturar e organizar sistemas de informação para auxiliar as pessoas a alcançarem seus objetivos </li></ul><ul><li>Sistemas de Organização: </li></ul><ul><li>Modelo Mental x Mapa de Conteúdo </li></ul><ul><li>Categorizar Informação: </li></ul><ul><li>Local , Alfabeto , Tempo , Categoria e Hierarquia </li></ul>
  7. 8. Arquitetura da Informação... <ul><li>Foco em: </li></ul><ul><ul><li>Organização </li></ul></ul><ul><ul><li>Navegação </li></ul></ul><ul><ul><li>Rotulagem </li></ul></ul><ul><ul><li>Sistema de Busca </li></ul></ul><ul><li>“ Tornar o complexo claro” </li></ul><ul><ul><li>Richard Saul Wurman </li></ul></ul>
  8. 9. Arquitetura da Informação... Conteúdo Contexto do Negócio Usuários AI
  9. 10. (Engenharia de) Usabilidade <ul><li>“ Conceito utilizado para descrever a qualidade da interação de uma interface diante de seus usuários”. Hix (1993) </li></ul><ul><li>“ Capacidade, em termos funcionais humanos, de um sistema ser usado facilmente e com eficiência pelo usuário”. Shackel (1993) </li></ul>
  10. 11. (Engenharia de) Usabilidade... “ Está diretamente ligada ao diálogo na interface . É a capacidade do software permitir que o usuário alcance suas metas de interação com o sistema ”. Scarpin (1993).
  11. 12. Processo de comunicação... Emissor / Receptor Meio de Propagação Mensagem Resposta Canal de Propagação Ambiente
  12. 13. ...no contexto da interface Usuários + User Agent Web Conteúdo Resposta / Transformação Interface Ambiente social
  13. 14. Usabilidade <ul><li>Para Nielsen, é composta de 5 atributos: </li></ul><ul><ul><li>Ser fácil de aprender </li></ul></ul><ul><ul><li>Ser eficiente em sua utilização </li></ul></ul><ul><ul><li>Ser fácil de ser recordado </li></ul></ul><ul><ul><li>Ter poucos erros </li></ul></ul><ul><ul><li>Ser subjetivamente agradável </li></ul></ul><ul><li>Em poucas palavras: </li></ul><ul><ul><li>Bom Senso + Princípios-Chave </li></ul></ul>
  14. 15. Desmistificando a Usabilidade
  15. 16. Mito 01 <ul><li>“ Usabilidade é a chave para o sucesso de um projeto web” </li></ul><ul><ul><li>É só uma parte da Experiência do Usuário </li></ul></ul><ul><ul><li>O objetivo final pode valer o esforço </li></ul></ul><ul><ul><li>Conteúdo é Rei! </li></ul></ul><ul><ul><li>Se não for relevante, não vejo </li></ul></ul>
  16. 17. Mito 01 <ul><li>“ Usabilidade é a chave para o sucesso de um projeto web” </li></ul><ul><ul><li>É só uma parte da Experiência do Usuário </li></ul></ul><ul><ul><li>O objetivo final pode valer o esforço </li></ul></ul><ul><ul><li>Conteúdo é Rei! </li></ul></ul><ul><ul><li>Se não for relevante, não vejo </li></ul></ul>Estratégia do Produto Experiência do Usuário Design de Interface Modelo de Negócios Atendimento ao Consumidor, Embalagem, Marketing, Gerenciamento de Conteúdo, Design Industrial, Design de Interiores, etc. Oportunidades Tecnológicas e Limitações Necessidades do Usuário Objetivos do Negócio Design Gráfico Design de Informação Design de Interação Arquitetura da Informação Wroblewski (2006)
  17. 18. Mito 01 <ul><li>“ Usabilidade é a chave para o sucesso de um projeto web” </li></ul><ul><ul><li>É só uma parte da Experiência do Usuário </li></ul></ul><ul><ul><li>O objetivo final pode valer o esforço </li></ul></ul><ul><ul><li>Conteúdo é Rei! </li></ul></ul><ul><ul><li>Se não for relevante, não vejo </li></ul></ul>Duney, Landay e Hong (2003) Design Centrado no Usuário Facilidade de Uso Conteúdo Performance Satisfação Valor da Marca
  18. 19. Chak (2004) Disponibilidade Usabilidade Confiança Desejo Disposição para realizar uma transação
  19. 20. Mito 02 <ul><li>“ Usabilidade não vence um conceito criativo” </li></ul><ul><ul><li>Quem é o seu público-alvo? </li></ul></ul><ul><ul><li>O que ele deseja no seu site? </li></ul></ul><ul><ul><li>Experiências Imersivas funcionam, mas são temporárias </li></ul></ul><ul><ul><li>Não é uma disputa. É parceria! </li></ul></ul>
  20. 21. Mito 03 <ul><li>“ Jakob Nielsen é o pai da usabilidade” </li></ul><ul><ul><li>HCI está por aí desde os primeiros softwares </li></ul></ul><ul><ul><li>Nielsen popularizou o conceito de usabilidade </li></ul></ul><ul><ul><li>Foi um expoente para agregar essas metodologias ao design de interface na rede </li></ul></ul><ul><ul><li>Ele é o tio legal que te apresenta aos amigos! </li></ul></ul>
  21. 22. Mito 04 <ul><li>“ Usabilidade é um conjunto de regras. Decorou, usou!” </li></ul><ul><ul><li>Não são regras, são conceitos </li></ul></ul><ul><ul><li>Métodos servem como guias, não como muros </li></ul></ul><ul><ul><li>A complexidade avança com a necessidade </li></ul></ul><ul><ul><li>É casada com Arquitetura da Informação </li></ul></ul>
  22. 23. Uma questão de Bom-Senso
  23. 24. Princípios da Usabilidade <ul><li>O usuário nunca está errado! </li></ul><ul><li>Relação entre o mundo real x mundo virtual </li></ul><ul><li>Hierarquização e relacionamento visual claros </li></ul><ul><li>Torne óbvio o que é “clicável” </li></ul><ul><li>Cada clique tem um preço </li></ul>
  24. 25. Elementos da Navegabilidade... Memória (2005) Nielsen, Krug e Lynch e Horton Parte inferior Navegação de rodapé Bernard Área central Conteúdo global e contextual Adkisson, Lida e Chaparro e Krug Parte superior, abaixo da marca da empresa Breadcrumbs Nielsen, Adkisson e Bernard Coluna da esquerda Navegação Local Nielsen, Adkisson e Krug Parte superior com links na horizontal Navegação Global Nielsen, Adkisson e Bernard Parte superior Busca Nielsen, Adkisson e Bernard Canto superior esquerdo Marca da Empresa Pesquisador Posicionamento Elemento de Interface
  25. 26. ...velhos conhecidos! Marca Navegação local Navegação Global Navegação de rodapé Breadcrumbs Conteúdo Global e contextual Conteúdo relacionado Search
  26. 27. Dicas para o Design de Interface <ul><li>Usuários não lêem a sua página... Escaneiam! </li></ul><ul><li>“ Teste do Porta-Malas” (presente do Steve Krug) </li></ul><ul><ul><li>Que site é este? Identificação do site </li></ul></ul><ul><ul><li>Em que página estou? Nome da página </li></ul></ul><ul><ul><li>Quais são as seções principais desse site? Seções </li></ul></ul><ul><ul><li>Quais são minhas opções neste nível? Navegação local </li></ul></ul><ul><ul><li>Onde estou no esquema das coisas? Indicadores </li></ul></ul><ul><ul><li>Como posso procurar? Busca </li></ul></ul>
  27. 28. Dicas para o Design de Interface <ul><li>Quanto já andei? Links visitados (Nielsen) </li></ul><ul><li>Home-page : um caso particular </li></ul><ul><ul><li>O que é isso? </li></ul></ul><ul><ul><li>O que posso fazer aqui? </li></ul></ul><ul><ul><li>Por que aqui e não em outro lugar? </li></ul></ul><ul><ul><li>Por onde eu começo? </li></ul></ul><ul><li>Acima do scroll , de frente pro mar! </li></ul>
  28. 29. Heurísticas e Guidelines
  29. 30. Conceito Heurísticas > Guidelines > Padrões Dix (1999)
  30. 31. Heurísticas: regras gerais <ul><li>Para Preece (1994) e Hobbs (1996): </li></ul><ul><ul><li>Conheça seu usuário </li></ul></ul><ul><ul><li>Reduza a carga cognitiva </li></ul></ul><ul><ul><li>Projete para os erros </li></ul></ul><ul><ul><li>Mantenha consistência e clareza </li></ul></ul>
  31. 32. “ Os 10 mandamentos” <ul><li>Para Nielsen e Molich (1990): </li></ul><ul><ul><li>Diálogo simples e natural; </li></ul></ul><ul><ul><li>Fala a língua do usuário; </li></ul></ul><ul><ul><li>Minimiza a carga cognitiva do usuário; </li></ul></ul><ul><ul><li>Consistência; </li></ul></ul><ul><ul><li>Feedback; </li></ul></ul>
  32. 33. “ Os 10 mandamentos”... <ul><li>Para Nielsen e Molich (1990): </li></ul><ul><ul><li>Saídas marcadas claramente; </li></ul></ul><ul><ul><li>Atalhos (flexibilidade); </li></ul></ul><ul><ul><li>Mensagens de erro precisas e construtivas; </li></ul></ul><ul><ul><li>Prevenção de erros; </li></ul></ul><ul><ul><li>Ajuda e Documentação. </li></ul></ul>
  33. 34. Metodologias do Design de Interface
  34. 35. Mito 01 <ul><li>“ Usabilidade é a chave para o sucesso de um projeto web” </li></ul><ul><ul><li>É só uma parte da Experiência do Usuário </li></ul></ul><ul><ul><li>O objetivo final pode valer o esforço </li></ul></ul><ul><ul><li>Conteúdo é Rei! </li></ul></ul><ul><ul><li>Se não for relevante, não vejo </li></ul></ul>Duney, Landay e Hong (2003) Avaliação Design Prototipagem Levantamento de Dados Manutenção Produção Refinamento Criação Implementação
  35. 36. Tempo e Recursos limitados <ul><li>Voltando a realidade... </li></ul><ul><ul><li>Seu cliente pode não ter muitos recursos </li></ul></ul><ul><ul><li>O prazo pode ser curto </li></ul></ul><ul><ul><li>Equipe pequena </li></ul></ul><ul><ul><li>Testes estão fora de cogitação </li></ul></ul><ul><li>Você pode entregar um produto de qualidade </li></ul><ul><li>Construir as peças do quebra-cabeça </li></ul>
  36. 37. Mito 01 <ul><li>“ Usabilidade é a chave para o sucesso de um projeto web” </li></ul><ul><ul><li>É só uma parte da Experiência do Usuário </li></ul></ul><ul><ul><li>O objetivo final pode valer o esforço </li></ul></ul><ul><ul><li>Conteúdo é Rei! </li></ul></ul><ul><ul><li>Se não for relevante, não vejo </li></ul></ul>Duney, Landay e Hong (2003) Avaliação Design Prototipagem Levantamento de Dados Manutenção Produção Refinamento Criação Implementação
  37. 38. Mito 01 www.usabilitynet.org/tools/methods.htm
  38. 39. Mito 01 www.usabilitynet.org/tools/methods.htm
  39. 40. Documentação: assunto sério <ul><li>Geralmente documentos são entregas </li></ul><ul><li>Toda documentação deve atender a normas: </li></ul><ul><ul><li>Formatação </li></ul></ul><ul><ul><li>Respeitabilidade </li></ul></ul><ul><ul><li>Consistência </li></ul></ul><ul><ul><li>Controle (autor e versão) </li></ul></ul>
  40. 41. Personas
  41. 42. Personas <ul><li>Também conhecido por: </li></ul><ul><ul><li>Perfil do Usuário ( user profiles ) </li></ul></ul><ul><ul><li>Representação do Usuário ( user role definitions ) </li></ul></ul><ul><ul><li>Perfil da Audiência ( audience profile ) </li></ul></ul>
  42. 43. Personas <ul><li>O que? </li></ul><ul><ul><li>Uma representação dos usuários focais do produto, descritos como pessoas reais, apresentando motivações e necessidades. </li></ul></ul>
  43. 44. Mito 01 Brown (2006)
  44. 45. Personas <ul><li>Por quê? </li></ul><ul><ul><li>Seria o target em marketing (herança) </li></ul></ul><ul><ul><li>Norteia as ações dos envolvidos </li></ul></ul><ul><ul><li>Devem ser frutos de pesquisas e estatísticas </li></ul></ul><ul><ul><li>Expressar o que o usuário quer e deseja </li></ul></ul><ul><ul><li>Apoio para construção de cenários </li></ul></ul>
  45. 46. Personas <ul><li>Como? </li></ul><ul><ul><li>Representar possíveis usuários (categorizar) </li></ul></ul><ul><ul><li>Definir suas Motivações e Necessidades </li></ul></ul><ul><ul><li>Com relação ao sistema: cenários , comportamentos e citações </li></ul></ul><ul><ul><li>3 tipos e momentos distintos... </li></ul></ul>
  46. 47. Perfil dos Usuários <ul><li>Dados: </li></ul><ul><ul><li>Tipo de Usuário </li></ul></ul><ul><ul><li>Classificação </li></ul></ul><ul><ul><li>Citação </li></ul></ul><ul><ul><li>Descrição </li></ul></ul>
  47. 48. Mito 01 Brown (2006)
  48. 49. Detalhamento do Usuário <ul><li>Dados: </li></ul><ul><ul><li>Tipo de Usuário </li></ul></ul><ul><ul><li>Classificação </li></ul></ul><ul><ul><li>Citação </li></ul></ul><ul><ul><li>Descrição </li></ul></ul>
  49. 50. Mito 01 Brown (2006)
  50. 51. Personas <ul><li>Dados: </li></ul><ul><ul><li>Tipo de usuário </li></ul></ul><ul><ul><li>Dados pessoais (até mesmo estimativas) </li></ul></ul><ul><ul><li>Conhecimento técnico </li></ul></ul><ul><ul><li>Necessidades (com relação ao site) </li></ul></ul><ul><ul><li>Adaptar Detalhamento do Usuário ou descrever possível uso da ferramenta pelo usuário (presente e/ou futuro) </li></ul></ul>
  51. 52. Mito 01 Brown (2006)
  52. 53. Personas 50% pessoal + 20% técnico + 30% relacionamento com o site <ul><li>Receita de Bolo (Dados): </li></ul>
  53. 54. Aplicando...
  54. 55. Análise Competitiva
  55. 56. Análise Competitiva <ul><li>Também conhecido por: </li></ul><ul><ul><li>Benchmark </li></ul></ul><ul><ul><li>Análise da Concorrência </li></ul></ul>
  56. 57. Análise Competitiva <ul><li>O que? </li></ul><ul><ul><li>Uma breve análise de projetos similares ao que você está trabalhando. As semelhanças entre os modelos de negócio e o design de interface devem ser destacadas e as diferenças , comparadas </li></ul></ul>
  57. 58. Mito 01 Brown (2006)
  58. 59. Análise Competitiva <ul><li>Por quê? </li></ul><ul><ul><li>Conhecer categorias, nomenclaturas e padrões de fluxo. </li></ul></ul><ul><ul><li>Descobrir bons modelos (convenções) e pontos de falha. </li></ul></ul><ul><ul><li>O que foi e como (não) foi explorado? </li></ul></ul><ul><ul><li>Avaliação dos elementos de navegabilidade </li></ul></ul>
  59. 60. Análise Competitiva <ul><li>Como? </li></ul><ul><ul><li>Depende do seu foco </li></ul></ul><ul><ul><li>3 grandes abordagens: navegabilidade, conteúdo e funcionalidades </li></ul></ul><ul><ul><li>Matriz: elemento analisado x concorrência </li></ul></ul><ul><ul><li>Concluir com documentação das conclusões </li></ul></ul><ul><ul><li>Pode-se trabalhar com... </li></ul></ul>
  60. 61. Presença
  61. 62. Pontuação (macro ou detalhada)
  62. 63. Funcional (macro ou detalhada)
  63. 64. Navegabilidade (descritiva)
  64. 65. Navegabilidade (estrutural)
  65. 66. Modelo Conceitual
  66. 67. Modelo Conceitual <ul><li>Também conhecido por: </li></ul><ul><ul><li>Mapa Conceitual ( concept maps ) </li></ul></ul><ul><ul><li>Diagrama de Afinidade ( affinity diagram ) </li></ul></ul>
  67. 68. Modelo Conceitual <ul><li>O que? </li></ul><ul><ul><li>Um diagrama para apontar os relacionamentos entre os usuários , o conteúdo e as funcionalidades existentes. </li></ul></ul><ul><ul><li>É uma visão macro de como os elementos e as entidades “ conversam ”. </li></ul></ul>
  68. 69. Mito 01
  69. 70. Mito 01
  70. 71. Mito 01
  71. 72. <ul><li>Por quê? </li></ul><ul><ul><li>Funciona mais com sites que tenham aplicações </li></ul></ul><ul><ul><li>Para dar substância às idéias </li></ul></ul><ul><ul><li>Ajuda na categorização das tarefas do site </li></ul></ul><ul><ul><li>Checar possíveis desdobramentos </li></ul></ul><ul><ul><li>Avalia o “poder” de cada tipo de usuário </li></ul></ul>Modelo Conceitual
  72. 73. <ul><li>Como? </li></ul><ul><ul><li>Comece pelos usuários </li></ul></ul><ul><ul><li>Adicione conteúdo e funcionalidades do site ( nós ) </li></ul></ul><ul><ul><li>Nós (nodes) podem representar: </li></ul></ul><ul><ul><ul><li>- Tipos de conteúdo - Grupos ou Categorias </li></ul></ul></ul><ul><ul><ul><li>- Processos - Pessoas, entidade ou atores </li></ul></ul></ul><ul><ul><ul><li>- Eventos - Sistemas e etc... </li></ul></ul></ul><ul><ul><li>Função do nó: representação gráfica </li></ul></ul>Modelo Conceitual
  73. 74. Mito 01
  74. 75. <ul><li>Como...? </li></ul><ul><ul><li>Conecte-os através de ações ( conectores ) </li></ul></ul><ul><ul><ul><li>Costumam a ser descritivos (verbos) </li></ul></ul></ul><ul><ul><ul><li>***** procura por **** ( ativo ) ou ***** é procurado por ***** ( passivo ) </li></ul></ul></ul><ul><ul><li>Determine a direção do fluxo e os mais importantes </li></ul></ul><ul><ul><li>Essas linhas também podem falar ( legenda ) </li></ul></ul>Modelo Conceitual
  75. 76. Mito 01
  76. 77. Mito 01
  77. 78. Mito 01
  78. 79. Mito 01
  79. 80. Mito 01
  80. 81. Aplicando...
  81. 82. Levantamento de Conteúdo
  82. 83. Levantamento de Conteúdo <ul><li>Também conhecido por: </li></ul><ul><ul><li>Análise do conteúdo ( content analysis ) </li></ul></ul><ul><ul><li>Auditoria do conteúdo ( content audit ) </li></ul></ul>
  83. 84. <ul><li>O que? </li></ul><ul><ul><li>Uma lista de toda informação contida em um site , descrevendo a informação sobre uma série de pontos de vista (como audiência , prioridade , localização e responsabilidade ). </li></ul></ul>Levantamento de Conteúdo
  84. 85. <ul><li>Por quê? </li></ul><ul><ul><li>Esse documento vai salvar a sua vida ! </li></ul></ul><ul><ul><li>Define a responsabilidade , tipo e complexidade do conteúdo. </li></ul></ul><ul><ul><li>Ajuda a definir templates e páginas dinâmicas </li></ul></ul><ul><ul><li>É o principal apoio na construção do mapa do site </li></ul></ul><ul><ul><li>Foca sua preocupação na interface </li></ul></ul>Levantamento de Conteúdo
  85. 86. <ul><li>Como? </li></ul><ul><ul><li>Mais do que uma planilha </li></ul></ul><ul><ul><li>Categorizar os dados : nome da página , tipo de conteúdo , localização ... </li></ul></ul><ul><ul><li>Não há uma “receita de bolo” – avaliar parâmetros </li></ul></ul><ul><ul><li>“ Responsável ” é a coluna mais importante </li></ul></ul><ul><ul><li>Usar IDs é sempre uma boa idéia </li></ul></ul>Levantamento de Conteúdo
  86. 87. Visão Macro
  87. 88. Levantamento Detalhado
  88. 89. Foco na Atualização
  89. 90. Mapa do Site
  90. 91. Mapa do Site <ul><li>Também conhecido por: </li></ul><ul><ul><li>Modelo Estrutural ( structure model ) </li></ul></ul><ul><ul><li>Mapa ou árvore semântica ( semantic map) </li></ul></ul><ul><ul><li>Modelo Navegacional ( navigation model ) </li></ul></ul>
  91. 92. <ul><li>O que? </li></ul><ul><ul><li>Uma representação visual da estrutura do site . </li></ul></ul><ul><ul><li>Apresentação de todas seções e subseções, apresentado as conexões entre os diversos conteúdos em níveis diferentes . </li></ul></ul><ul><ul><li>Geralmente organizada na forma de fluxograma no sentido vertical . </li></ul></ul>Mapa do Site
  92. 93. Mito 01
  93. 94. Mito 01
  94. 95. Mito 01
  95. 96. Mito 01
  96. 97. Mito 01
  97. 98. Mito 01
  98. 99. <ul><li>Por quê? </li></ul><ul><ul><li>Na forma mais simples, um site é uma coleção de informações e funcionalidades </li></ul></ul><ul><ul><li>Define níveis e hierarquias visualmente </li></ul></ul><ul><ul><ul><li>Ajuda na visualização </li></ul></ul></ul><ul><ul><ul><li>Lembra da contagem de cliques ? Avaliação rápida aqui </li></ul></ul></ul><ul><ul><li>Ajuda a mapear as ações mais importantes </li></ul></ul><ul><ul><li>Evita problemas futuros </li></ul></ul>Mapa do Site
  99. 100. <ul><li>Como? </li></ul><ul><ul><li>É um organograma </li></ul></ul><ul><ul><li>Sair sempre da Home-page </li></ul></ul><ul><ul><li>Buscar uma profundidade máxima de 4 / 5 níveis </li></ul></ul><ul><ul><li>Definir as rotas possíveis de navegação </li></ul></ul><ul><ul><li>Jesse James Garret e seu Vocabulário Visual </li></ul></ul><ul><ul><ul><li>http://www.jjg.net/ia/visvocab </li></ul></ul></ul><ul><ul><ul><li>Mapas de Fluxo </li></ul></ul></ul>Mapa do Site
  100. 101. Mapas de Fluxo
  101. 102. Mapas de Fluxo...
  102. 103. Card Sorting: teste com usuário Modelo Mental!
  103. 104. Card Sorting...
  104. 105. Aplicando...
  105. 106. Prototipagem
  106. 107. Prototipagem <ul><li>Também conhecido por: </li></ul><ul><ul><li>Wireframes </li></ul></ul><ul><ul><li>Blueprints </li></ul></ul><ul><li>Pode derivar em: </li></ul><ul><ul><li>Storyboard </li></ul></ul>
  107. 108. <ul><li>O que? </li></ul><ul><ul><li>Uma versão simplificada de como o conteúdo irá aparecer em cada tela do produto final , desprovido de qualquer elemento tratamento visual. </li></ul></ul>Prototipagem
  108. 109. Mito 01 Brown (2006)
  109. 110. <ul><li>Por quê? </li></ul><ul><ul><li>Montando o esqueleto </li></ul></ul><ul><ul><li>Foco na navegabilidade </li></ul></ul><ul><ul><li>Conteúdo: áreas , descrição e prioridades . </li></ul></ul><ul><ul><li>Checa as opções em curto espaço de tempo </li></ul></ul><ul><ul><li>Descobrindo padrões de interação </li></ul></ul><ul><ul><li>Facilita o projeto visual da interface </li></ul></ul>Prototipagem
  110. 111. <ul><li>Como? </li></ul><ul><ul><li>PowerPoint , Visio ou até mesmo XHTML(?) </li></ul></ul><ul><ul><li>Ponto de partida: Home-page </li></ul></ul><ul><ul><li>Comece simples, depois aumente a complexidade </li></ul></ul><ul><ul><ul><li>Baixa, Média e Alta Fidelidade </li></ul></ul></ul><ul><ul><ul><li>Case “UCRG” – Protótipo e Projeto Visual </li></ul></ul></ul><ul><ul><li>Pode ser horizontal e vertical </li></ul></ul><ul><ul><ul><li>Case “ Americanas.com ” </li></ul></ul></ul><ul><ul><li>Storyboard (foco na tarefa) </li></ul></ul>Prototipagem
  111. 112. Prototipagem Horizontal
  112. 113. Prototipagem Vertical
  113. 114. Paper prototyping
  114. 115. Aplicando...
  115. 116. E sobre testes? Nada mesmo?
  116. 117. Testes de Usabilidade Case: Jornal do Brasil Puc-Rio (2002) Avaliação Conclusões
  117. 118. Bibliografia
  118. 119. <ul><li>Não me faça pensar , Steve Krug </li></ul><ul><li>Projetando Web Sites , Jakob Nielsen </li></ul><ul><li>Como Criar Sites Persuasivos , Andrew Chak </li></ul><ul><li>Design para a Internet , Felipe Memória </li></ul><ul><li>Communicating Design , Daniel M. Brown </li></ul><ul><li>Emotional Design , Don Norman </li></ul>Bibliografia
  119. 120. Obrigado! [email_address] www.paulocoimbra.com Em breve:

×