Your SlideShare is downloading. ×

User Experience Boot Camp

2,232

Published on

Slides do treinamento corporativo oferecido pelo Instituto Faber-Ludens para iniciar a área dentro de uma empresa. www.faberludens.com.br

Slides do treinamento corporativo oferecido pelo Instituto Faber-Ludens para iniciar a área dentro de uma empresa. www.faberludens.com.br

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,232
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. User Experience Boot Camp Frederick van Amstel, MsC Instituto Faber-Ludens de Design de Interação
  • 2. O que é User Experience?
  • 3. User Experience não é diagrama.
  • 4. User Experience (UX) são aqueles momentos na vida em que tudo está perfeito ao seu redor.
  • 5. O objetivo do Design é integrar a User Experience através de múltiplos ambientes.
  • 6. Arquitetura da Informação Design de Interação Design de Serviços Experiência do Usuário Usabilidade Encontrabilidade Socialidade Continuidade
  • 7. User Experience Honeycomb Peter Morville
  • 8. • Parte I - Design Thinking • Parte II - Planejamento da Experiência do Usuário • Parte III - Usabilidade • Parte IV - Encontrabilidade • Parte V - Arquitetura da Informação Conteúdos do UX Boot Camp
  • 9. Parte I - Design Thinking
  • 10. o que o marketing sugeriu o que a administração aprovou o que foi projetado pela engenharia o que foi produzido como foi montado o que o consumidor queria...
  • 11. Design Centrado no Valor, Jess McMullin Objetivos de Negócio Objetivos do Usuário Objetivos de Negócio Objetivos do Usuário ValorVácuo Design Acaso
  • 12. Processo de desenvolvimento comum Engenharia MarketingMarketing
  • 13. Vantagens/Desvantagens • Economiza planejamento • Tentativa e erro • Design não é importante • O produto é um frankestein de funcionalidades Office XP
  • 14. Design como embelezamento Engenharia Marketing Marketing Design
  • 15. Vantagens/Desvantanges • Beleza vende • Que inovação é possível a essa altura do campeonato? Windows Vista
  • 16. Design como inovação Engenharia Marketing Design Marketing
  • 17. Vantagens/Desvantagens • Melhora a qualidade • Economiza retrabalho • Diminui a velocidade • Risco de não obter retorno Office 2007
  • 18. Design como estratégia Engenharia Marketing Design Marketing
  • 19. Vantagens/Desvantagens • Integra Pesquisa & Desenvolvimento • Aumenta o ritmo de inovação • Fortalece a marca • Custo elevado • Depende da cultura organizacional Loja Apple em Nova Iorque
  • 20. Discurso da Microsoft
  • 21. novo mercado inovação qualitativa mercado saturado competição pela qualidade inovação quantitativa início da competição competição pela quantidade sem competição
  • 22. Exercício • Discussão geral • Como o Design está ou não integrado aos processos de sua empresa? • Como deveria estar? • 20 minutos
  • 23. “Algumas pessoas dizem que design é solução de problemas. É óbvio que designers resolvem alguns problemas, mas isso os dentistas também fazem. Design é uma forma de invenção cultural.” Jack Schulze
  • 24. Modelos imaginados pela Motorola nos anos 70 e o que foi comercializado
  • 25. De ferramenta de trabalho a comunicador pessoal
  • 26. Razr Dolce&Gabbana: celular como acessório fashion
  • 27. O diferencial do iPhone é a interface
  • 28. Bebê ensina a usar o iPhone
  • 29. Limites: iPhone não permite muita customização
  • 30. iPod: cada um na sua, mas com algo em comum
  • 31. Sony Walkman: tem um que é no seu estilo
  • 32. Computador Apple: melhor que PC, mas não combina com qualquer coisa
  • 33. Apple Inspired Moodboard
  • 34. Exercício • Como é a experiência de uma marca que você gosta? • Como seria uma decoração de interiores que expresse a experiência? • Monte uma colagem usando a ferramenta http://mydeco.com/rooms/moodboard/ • Tente demonstrar o feeling
  • 35. Características do Design “Design é a alma das criações humanas” Steve Jobs
  • 36. Modelo Triádico Pessoas Artefatos Atividades
  • 37. Multilingüe Gestual Visual Sonora Tátil Olfativa
  • 38. Futurologia aplicada • A diferença entre a abelha e o arquiteto é que este último imagina o todo antes de construir • Visão holística • Observar tendências é a melhor forma de prever o futuro
  • 39. Articulação de interesses • Design é deliberação, mesmo que implícita • Desejos e necessidades são culturais • Cada um tem uma história distinta
  • 40. Idealista Positivista Lógico Individualista Materialista Crítico Dialético Coletivo
  • 41. Processo de Design “Design é o design de um design para um design.” John Heskett
  • 42. Modelo Linear
  • 43. Modelo Errático
  • 44. Modelo convergente criação criação criação criação criação criação análise análise análise análise análise análise análise análise criação criação análise
  • 45. Criando possibilidades
  • 46. Recursos para criar • Rabiscos • Brainstorming • Cenários hipotéticos • Prototipação rápida • Abdução
  • 47. Processo dialético Imagem Operante Visão Especificação Visão Img. Operante Especificação Tempo Lowgren e Stolterman Thoughtful Interaction Design, MIT Press
  • 48. Modelo Espiralado
  • 49. “O Design não está lá, nem cá; está no meio, ora pendendo para um lado, ora para o outro, num movimento que se assemelha à uma dança graciosa. É preciso saber o momento e o lugar certo para ser rígido ou flexível, de acordo com as intenções da performance e com a guia musical. O Design é assim: não cria, mas recombina; não define, mas propõe; não julga, mas avalia; não é arte, mas também gosta de dançar… Para entendê-lo, é preciso dar o primeiro passo!” Instituto Faber-Ludens de Design de Interação
  • 50. Parte II - Planejamento de UX
  • 51. Métodos de Pesquisa • Levantamentos sócio-demográficos • Estatísticas de navegação • Testes de usabilidade • Teste A/B • Estudo etnográfico
  • 52. Estudos etnográficos realizados pela Nokia sobre uso de TV móvel
  • 53. Comunicação de pesquisa • Traduzir a vivência • Concisão • Filtrar o relevante • Generalizações • Verdades e mentiras
  • 54. Fotografias Nokia Research
  • 55. Vídeo
  • 56. História em quadrinhos Nokia Research
  • 57. Colagem goHostel
  • 58. Colagens online http://www.scrapblog.com/
  • 59. Diagrama de afinidades SAP
  • 60. Modelos Conceituais
  • 61. Personas como síntese de pesquisa sobre públicos-alvo. Detalhe do perfil de Orkut fictício criado para a Persona.
  • 62. Árvore de tarefas
  • 63. Descrições Pesquisa “O Orkut mudou a minha vida!” Os participantes da pesquisa comentam que a curiosidade os impele a clicar na foto dos amigos para ver seu perfil. Alguns homens dizem que essa curiosidade está ligada à "boa estética" da foto, o que normalmente leva, em seguida, à uma espiada no álbum de fotos para verificar se a "boa estética" também se verifica sob outros ângulos.
  • 64. Estudo de caso Redesign do Usabilidoido versão Seurat (2005)
  • 65. Versão Mondrian
  • 66. Perfil Semiótico I
  • 67. Perfil Semiótico II
  • 68. Perfil Semiótico III
  • 69. Explorando personalidade
  • 70. Diagrama de afinidade
  • 71. Personas
  • 72. Versão Seurat
  • 73. Versão Seurat ajustada
  • 74. Resultados • Aumento de 500% na rentabilidade do Adsense em 6 meses • Pararam os comentários criticando o layout • Índice de aprovação de 60% • Maior flexibilidade e durabilidade
  • 75. Prototipação • Propósito (demonstrar, testar, explorar) • Fidelidade (alta, baixa) • Funcionalidade (funcional, semi- funcional) • Competência técnica
  • 76. Rabiscos Jonas Lowgren
  • 77. Storyboard SAP
  • 78. Narrativa em vídeo Ciao PDA
  • 79. Bastidores
  • 80. Protótipo estrutural
  • 81. Protótipo de alta fidelidade
  • 82. Protótipo funcional Reactables
  • 83. Performance Reactables
  • 84. Documentação • Demorado • Polissemia • Desatualização • Precisão • Referência estavel
  • 85. Mapa mental
  • 86. Diagrama de Etapas
  • 87. Cenários •O aluno Alessandro Bernardes casou-se cedo e decide trancar o curso para trabalhar mais. Ele recorre ao website da Universidade para saber por quanto tempo poderá trancar seu curso e, ao abrir a página, vê uma porção de links relativos aos órgãos da instituição. Como ele está um tanto alheio às funções de cada um, prefere clicar no link intitulado “Matrículas”. Na página aberta, encontra um link para maiores informações sobre trancamento de curso que o leva à página do Núcleo de Acompanhamento Acadêmico (NAA), o órgão responsável por operações dessa ordem. A página informa que é possível trancar o curso por seis meses e mais seis, caso seja aprovado o requerimento. Alessandro encontrou o que queria e, mais, aprendeu que problemas dessa ordem são resolvidos no NAA.
  • 88. Diagrama Situacional
  • 89. Relação entre objetos associativo
  • 90. Relação entre objetos com verbos
  • 91. Especificação de funcionalidades Mural do usuário Na página do perfil do usuário, haverá um pequeno mural para outros usuários deixarem recados como, por exemplo, convidando o usuário dono do perfil a responder uma pergunta sua. O dono do perfil poderá optar por desligar o mural.
  • 92. Casos de uso
  • 93. Diagrama Sequencial
  • 94. Diagrama Sequencial Negativo
  • 95. Molic SERG - PucRio
  • 96. Vocabulário Visual
  • 97. Wireframe
  • 98. Pesquisa, Protótipos e Documentação • Propósitos diferentes • Resultados diferentes • Combinação
  • 99. Parte III - Usabilidade
  • 100. As empresas só investem em UX quando fica grave
  • 101. Recall feito para resolver o problema do Fox
  • 102. Experiência do Usuário não é requisito. É estratégia.
  • 103. Memória Humana X Computacional Seletiva Indiscriminada Evolutiva Estável Associativa Discreta
  • 104. Conhecimento na cabeça: como abrir estas portas? (Norman, 2006)
  • 105. Conhecimento no mundo: barras indicam onde puxar
  • 106. Conhecimento no mundo: barras indicam onde puxar
  • 107. Conhecimento no mundo: barras indicam onde puxar
  • 108. Propiciação em interfaces gráficas (Eaton, 2002)
  • 109. Descompasso (breakdown) entre expectativa e evidência
  • 110. Curva de aprendizado 0 22,5 45 67,5 90 1 semana 2 semanas 3 semanas 4 semanas Adobe Photoshop Corel Photopaint
  • 111. Análise Cognitiva • Método de avaliação do potencial cognitivo de uma interface • Diferenças entre: experiência, expectativa e aprendizado
  • 112. Perguntas O que o usuário precisa saber? O que a interface explica? Propiciação O que o usuário precisa lembrar? O que a interface armazena? Memória O que o usuário pode descobrir? O que a interface propõe? Descompasso
  • 113. Avaliação Heurística • Tipo de avaliação de especialista, na qual os avaliadores baseiam-se em princípios de usabilidade próprios ou desenvolvidos por outros especialistas.
  • 114. O que é uma heurística • Regra indutiva, baseada na experiência • Forma sintética • Heurísticas de Nielsen (1994): • 1) Feedback • 2) Falar a linguagem do usuário • 3) Saídas claramente demarcadas • 4) Consistência • 5) Prevenir erros
  • 115. Aplicação das Heurísticas Botão soneca destacado Auto é pra ligar o rádio quando tocar o alarme, mas não está claro isso. (Heurística 2 - Linguagem familiar)
  • 116. Etapas 1.Escolher os avaliadores 2.Definir as heurísticas 3.Executar a avaliação 4.Cada problema encontrado deve ser relacionado à uma heurística 5.Promover a discussão entre os avaliadores 6.Redigir relatório 7.Priorizar problemas encontrados
  • 117. Teste de Usabilidade • Método para detectar problemas compreender melhor a interação do usuário com um produto • Receber feedback sobre o design • Avaliar situação • Comparar com a concorrência • Convencer pessoas
  • 118. Laboratório de Usabilidade
  • 119. Eye-tracking Tobii Monitor Áreas onde o usuário fixou o olhar Caminho do olhar
  • 120. Gravação em vídeo - betterdesktop.org - dezenas de horas de testes de usabilidade
  • 121. Morae
  • 122. Métricas em testes de usabilidade • Eficiência • Tempo de execução da tarefa • Taxa de erros • Eficácia • Taxa de conclusão da tarefa • Satisfação • Questionário de avaliação subjetiva
  • 123. Exemplo de questionário de satisfação pós-teste
  • 124. Diretrizes de Usabilidade • Nielsen e Tahir, 2002 • 64: Usar texto com muito contraste e cores de plano de fundo, para que os caracteres fiquem o mais legíveis possível.
  • 125. Recomendações de Usabilidade Contradições Qual é o mais legível?
  • 126. Recomendações de Usabilidade Contradições Qual é o mais legível?
  • 127. Recomendações de Usabilidade Contradições Qual é o mais legível?
  • 128. Recomendações de Usabilidade Contradições Onde é mais agradável a leitura?
  • 129. Parter IV - Arquitetura da Informação
  • 130. Arquitetura da Informação • Organização da estrutura de um website e seu conteúdo, rotulagem e categorização da informação e o design dos sistemas de navegação e de busca (Rosenfeld e Morville, 2001) • Influência das áreas de Library and Information Systems (LIS), Design da Informação e Interação Humano-Computador (IHC)
  • 131. Taxonomia na Biologia • Esquema de classificação hierárquica dos seres vivos • Os filhos tem apenas um pai • A classificação é feita para acolher novas descobertas
  • 132. Taxonomia dos seres vivos (Lineu)
  • 133. Taxonomia em Arquitetura da Informação • Esquema de classificação hierárquico para informações diversas • Os filhos podem ter mais de um pai • Pode ser usada em ferramentas de busca e navegação
  • 134. Taxonomias para navegação (antigo Cadê?)
  • 135. Taxonomia em buscas (WolframAlpha)
  • 136. Taxonomia em buscas (WolframAlpha)
  • 137. Elaboração de Taxonomias 1.Inventário de conteúdo 2.Avaliação da taxonomia atual (se existir) 3.Agrupamento 4.Hierarquização 5.Testes
  • 138. Inventário de Conteúdo • Clicar em todos os links dentro do site • Anotar • URL • Quebrado ou não • Título da página • Texto do link que levou à página
  • 139. Inventário de Conteúdo de um website.
  • 140. Processo de Classificação rotular categori zar agrupar
  • 141. Rótulos aluno universitário estudante aprendiz pupilo estagiário acadêmico tutelado colega discípulo educando
  • 142. Agrupamentos aluno universitário estudante aprendiz pupilo estagiário acadêmico tutelado colega discípulo educando
  • 143. fábulas formal direito Categorias aluno universitário estudante aprendiz pupilo estagiário acadêmico tutelado colega discípulo educando coloquial trabalho
  • 144. Card-sorting • Testar ou criar classificações baseadas no modelo mental do usuário • Aberto ou fechado • Apresentar cartões pros usuários e pedir para que organizem
  • 145. © Professor Frederick van Amstel Ergonomia e Usabilidade Exercício de card-sorting sobre o portal UFPR.br Presencial Online
  • 146. Modelos Conceituais. Norman (2006) Designer Usuário Modelo de Design Modelo do Usuário Sistema Imagem do Sistema
  • 147. O incômodo ao ver essa imagem vem da disparidade entre modelos mentais
  • 148. Modelo mental dos pedais de um carro
  • 149. Dendograma dos agrupamentos mais frequentes
  • 150. Teste com protótipo • Palm Vx • Portátil • Arquivos HTML apenas com as opções de menu • Tarefas de recuperação de informação
  • 151. V - Encontrabilidade
  • 152. Estudo de encontrabilidade no Google
  • 153. Comportamentos de navegação no Google
  • 154. Variações de termos para a mesma busca
  • 155. Resultados diferentes do Google para a mesma intenção
  • 156. Habilidades de Busca “frase exata” - + filetype:pdf site: conhecimento geral, fatos, nomes etc... técnicas conhecimento do domínio dicionários wikipedia filtrar, ampliar, desistir estratégia de busca mapeamento de informação
  • 157. Segundo pesquisas na Xerox PARC, as pessoas buscam informações da mesma maneira que animais. Se uma presa parece muito difícil, a raposa nem tenta o bote. Presa Fácil Presa Difícil
  • 158. O Paradoxo da Escolha • Mais opções não trazem mais satisfação • São tantas opções que você fica na dúvida qual delas é a melhor • Depois de escolher, você ainda fica na dúvida
  • 159. Usuários comentavam que não conseguiam decidir qual o melhor notebook (Mídia Digital)
  • 160. “Quanto mais informação você vê, menos você sente.”
  • 161. Ansiedade de Informação • Informação não é o mesmo que compreensão • Quanto maior a densidade informacional, maior o esforço do designer e do usuário • Porque não reduzir a densidade?
  • 162. O problema é antigo (2003)
  • 163. Pára-quedistas: U$ 3.600 no Adsense só para esta página
  • 164. As ferramentas de busca não ajudam 6° resultado
  • 165. Exemplo: Catálogo Travessa dos Editores
  • 166. Drupal como Gestor de Conteúdo
  • 167. Catálogo deu origem ao website
  • 168. “Em breve você não precisará entrar na Internet. Você estará o tempo todo dentro dela.” Frederick van Amstel
  • 169. Internet das Coisas
  • 170. Pachube, um webservices que conecta sensores e atuadores em todo o mundo.
  • 171. Kit Touchatag
  • 172. Diferentes formas de identificar digitalmente produtos físicos.
  • 173. Buscador de objetos para cegos NFC
  • 174. Identificação RFID intracorpórea.

×