Baixado 93 vezes
Carregado porUTFPR
User Experience Boot Camp
O documento aborda a experiência do usuário (UX) e seu papel integral no design, destacando a importância de várias metodologias, como design thinking e usabilidade, na criação de produtos centrados no usuário. Discute também a arquitetura da informação, a organizacão de conteúdo e a taxonomia como essenciais para a navegabilidade e a eficiência das interações. Exemplos práticos e estudos de caso ilustram como a implementação eficaz de UX pode aumentar a satisfação do usuário e a rentabilidade de produtos digitais.
Mais conteúdo relacionado
![[Palestra UNICAP] UX Design - Projetando Soluções e Experiências](https://cdn.slidesharecdn.com/ss_thumbnails/palestrauxunicap-140909213939-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
User Experience Boot Camp
- 1. User Experience BootCamp Frederick van Amstel, MsC Instituto Faber-Ludens de Design de Interação
- 2. O que é UserExperience?
- 4.
- 5. User Experience (UX)são aqueles momentos na vida em que tudo está perfeito ao seu redor.
- 6. O objetivo doDesign é integrar a User Experience através de múltiplos ambientes.
- 7. Arquitetura da Informação Designde Interação Design de Serviços Experiência do Usuário Usabilidade Encontrabilidade Socialidade Continuidade
- 8. User Experience Honeycomb PeterMorville
- 9. • 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
- 10. Parte I -Design Thinking
- 11. o que o marketing sugeriu oque a administração aprovou o que foi projetado pela engenharia o que foi produzido como foi montado o que o consumidor queria...
- 12. Design Centrado noValor, Jess McMullin Objetivos de Negócio Objetivos do Usuário Objetivos de Negócio Objetivos do Usuário ValorVácuo Design Acaso
- 13. Processo de desenvolvimentocomum Engenharia MarketingMarketing
- 14. Vantagens/Desvantagens • Economiza planejamento •Tentativa e erro • Design não é importante • O produto é um frankestein de funcionalidades Office XP
- 15.
- 16. Vantagens/Desvantanges • Beleza vende •Que inovação é possível a essa altura do campeonato? Windows Vista
- 17.
- 18. Vantagens/Desvantagens • Melhora aqualidade • Economiza retrabalho • Diminui a velocidade • Risco de não obter retorno Office 2007
- 19.
- 20. 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
- 21.
- 22.
- 23. Exercício • Discussão geral •Como o Design está ou não integrado aos processos de sua empresa? • Como deveria estar? • 20 minutos
- 24. “Algumas pessoas dizemque 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
- 25. Modelos imaginados pelaMotorola nos anos 70 e o que foi comercializado
- 26. De ferramenta detrabalho a comunicador pessoal
- 27. Razr Dolce&Gabbana: celularcomo acessório fashion
- 28. O diferencial doiPhone é a interface
- 29. Bebê ensina ausar o iPhone
- 30. Limites: iPhone nãopermite muita customização
- 31. iPod: cada umna sua, mas com algo em comum
- 32. Sony Walkman: temum que é no seu estilo
- 33. Computador Apple: melhorque PC, mas não combina com qualquer coisa
- 34.
- 35. 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
- 36. Características do Design “Designé a alma das criações humanas” Steve Jobs
- 37.
- 38.
- 39. Futurologia aplicada • Adiferenç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
- 40. Articulação de interesses •Design é deliberação, mesmo que implícita • Desejos e necessidades são culturais • Cada um tem uma história distinta
- 41.
- 42. Processo de Design “Designé o design de um design para um design.” John Heskett
- 43.
- 44.
- 45.
- 46.
- 47. Recursos para criar •Rabiscos • Brainstorming • Cenários hipotéticos • Prototipação rápida • Abdução
- 48. Processo dialético Imagem Operante Visão Especificação Visão Img. Operante Especificação Tempo Lowgrene Stolterman Thoughtful Interaction Design, MIT Press
- 49.
- 50. “O Design nãoestá 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
- 51. Parte II -Planejamento de UX
- 52. Métodos de Pesquisa •Levantamentos sócio-demográficos • Estatísticas de navegação • Testes de usabilidade • Teste A/B • Estudo etnográfico
- 53. Estudos etnográficos realizadospela Nokia sobre uso de TV móvel
- 54. Comunicação de pesquisa •Traduzir a vivência • Concisão • Filtrar o relevante • Generalizações • Verdades e mentiras
- 55.
- 56.
- 57. História em quadrinhos NokiaResearch
- 58.
- 59.
- 60.
- 61.
- 62. Personas como síntesede pesquisa sobre públicos-alvo. Detalhe do perfil de Orkut fictício criado para a Persona.
- 63.
- 64. Descrições Pesquisa “O Orkutmudou 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.
- 65. Estudo de caso Redesigndo Usabilidoido versão Seurat (2005)
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. Resultados • Aumento de500% na rentabilidade do Adsense em 6 meses • Pararam os comentários criticando o layout • Índice de aprovação de 60% • Maior flexibilidade e durabilidade
- 76. Prototipação • Propósito (demonstrar,testar, explorar) • Fidelidade (alta, baixa) • Funcionalidade (funcional, semi- funcional) • Competência técnica
- 77.
- 78.
- 79.
- 80.
- 81.
- 82. Protótipo de altafidelidade
- 83.
- 84.
- 85. Documentação • Demorado • Polissemia •Desatualização • Precisão • Referência estavel
- 86.
- 87.
- 88. Cenários •O aluno AlessandroBernardes 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.
- 89.
- 90.
- 91. Relação entre objetoscom verbos
- 93. Especificação de funcionalidades Muraldo 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.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100. Pesquisa, Protótipos e Documentação •Propósitos diferentes • Resultados diferentes • Combinação
- 101. Parte III -Usabilidade
- 102. As empresas sóinvestem em UX quando fica grave
- 103. Recall feito pararesolver o problema do Fox
- 104. Experiência do Usuárionão é requisito. É estratégia.
- 105. Memória Humana XComputacional Seletiva Indiscriminada Evolutiva Estável Associativa Discreta
- 106. Conhecimento na cabeça:como abrir estas portas? (Norman, 2006)
- 107. Conhecimento no mundo:barras indicam onde puxar
- 108. Conhecimento no mundo:barras indicam onde puxar
- 109. Conhecimento no mundo:barras indicam onde puxar
- 110. Propiciação em interfaces gráficas(Eaton, 2002)
- 111. Descompasso (breakdown) entre expectativae evidência
- 112. Curva de aprendizado 0 22,5 45 67,5 90 1semana 2 semanas 3 semanas 4 semanas Adobe Photoshop Corel Photopaint
- 113. Análise Cognitiva • Métodode avaliação do potencial cognitivo de uma interface • Diferenças entre: experiência, expectativa e aprendizado
- 114. Perguntas O que ousuá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
- 115. Avaliação Heurística • Tipode avaliação de especialista, na qual os avaliadores baseiam-se em princípios de usabilidade próprios ou desenvolvidos por outros especialistas.
- 116. 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
- 117. Aplicação das Heurísticas Botãosoneca destacado Auto é pra ligar o rádio quando tocar o alarme, mas não está claro isso. (Heurística 2 - Linguagem familiar)
- 118. Etapas 1.Escolher os avaliadores 2.Definiras 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
- 119. 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
- 120.
- 121. Eye-tracking Tobii Monitor Áreas ondeo usuário fixou o olhar Caminho do olhar
- 122. Gravação em vídeo- betterdesktop.org - dezenas de horas de testes de usabilidade
- 123.
- 124. Métricas em testesde 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
- 125. Exemplo de questionáriode satisfação pós-teste
- 126. 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.
- 127. Recomendações de Usabilidade Contradições Qualé o mais legível?
- 128. Recomendações de Usabilidade Contradições Qualé o mais legível?
- 129. Recomendações de Usabilidade Contradições Qualé o mais legível?
- 132. Recomendações de Usabilidade Contradições Ondeé mais agradável a leitura?
- 133. Parter IV -Arquitetura da Informação
- 134. 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)
- 135. 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
- 136. Taxonomia dos seresvivos (Lineu)
- 137. Taxonomia em Arquiteturada 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
- 138.
- 139.
- 140.
- 141. Elaboração de Taxonomias 1.Inventáriode conteúdo 2.Avaliação da taxonomia atual (se existir) 3.Agrupamento 4.Hierarquização 5.Testes
- 142. 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
- 143. Inventário de Conteúdode um website.
- 144.
- 145.
- 146.
- 147.
- 148. Card-sorting • Testar oucriar classificações baseadas no modelo mental do usuário • Aberto ou fechado • Apresentar cartões pros usuários e pedir para que organizem
- 149. © Professor Frederickvan Amstel Ergonomia e Usabilidade Exercício de card-sorting sobre o portal UFPR.br Presencial Online
- 150. Modelos Conceituais. Norman (2006) DesignerUsuário Modelo de Design Modelo do Usuário Sistema Imagem do Sistema
- 151. O incômodo aover essa imagem vem da disparidade entre modelos mentais
- 152. Modelo mental dospedais de um carro
- 153. Dendograma dos agrupamentosmais frequentes
- 154. Teste com protótipo •Palm Vx • Portátil • Arquivos HTML apenas com as opções de menu • Tarefas de recuperação de informação
- 155.
- 156. Estudo de encontrabilidadeno Google
- 157. Comportamentos de navegaçãono Google
- 158. Variações de termospara a mesma busca
- 159. Resultados diferentes doGoogle para a mesma intenção
- 160. Habilidades de Busca “fraseexata” - + 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
- 161. Segundo pesquisas naXerox 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
- 162. O Paradoxo daEscolha • 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
- 163. Usuários comentavam quenão conseguiam decidir qual o melhor notebook (Mídia Digital)
- 164. “Quanto mais informaçãovocê vê, menos você sente.”
- 165. 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?
- 167. O problema éantigo (2003)
- 168. Pára-quedistas: U$ 3.600no Adsense só para esta página
- 169. As ferramentas debusca não ajudam 6° resultado
- 170. Exemplo: Catálogo Travessados Editores
- 171. Drupal como Gestorde Conteúdo
- 172. Catálogo deu origemao website
- 173. “Em breve vocênão precisará entrar na Internet. Você estará o tempo todo dentro dela.” Frederick van Amstel
- 174.
- 175. Pachube, um webservicesque conecta sensores e atuadores em todo o mundo.
- 176.
- 177. Diferentes formas deidentificar digitalmente produtos físicos.
- 178. Buscador de objetospara cegos NFC
- 179.