Your SlideShare is downloading. ×
0
User Experience Boot Camp
Frederick van Amstel, MsC
Instituto Faber-Ludens de Design de Interação
O que é
User Experience?
User Experience
não é
diagrama.
User Experience (UX) são aqueles momentos na vida em que tudo está
perfeito ao seu redor.
O objetivo do Design é integrar a User Experience através de
múltiplos ambientes.
Arquitetura da Informação
Design de Interação
Design de Serviços
Experiência do Usuário
Usabilidade
Encontrabilidade
Socia...
User Experience Honeycomb
Peter Morville
• Parte I - Design Thinking
• Parte II - Planejamento da Experiência
do Usuário
• Parte III - Usabilidade
• Parte IV - Enc...
Parte I - Design Thinking
o que o
marketing
sugeriu
o que a administração
aprovou
o que foi
projetado pela
engenharia
o que foi
produzido
como foi m...
Design Centrado no Valor,
Jess McMullin
Objetivos de
Negócio
Objetivos do
Usuário
Objetivos de
Negócio
Objetivos do
Usuári...
Processo de desenvolvimento comum
Engenharia
MarketingMarketing
Vantagens/Desvantagens
• Economiza planejamento
• Tentativa e erro
• Design não é importante
• O produto é um frankestein ...
Design como embelezamento
Engenharia
Marketing
Marketing
Design
Vantagens/Desvantanges
• Beleza vende
• Que inovação é possível a essa
altura do campeonato?
Windows Vista
Design como inovação
Engenharia
Marketing
Design
Marketing
Vantagens/Desvantagens
• Melhora a qualidade
• Economiza retrabalho
• Diminui a velocidade
• Risco de não obter retorno
Of...
Design como estratégia
Engenharia
Marketing
Design
Marketing
Vantagens/Desvantagens
• Integra Pesquisa & Desenvolvimento
• Aumenta o ritmo de inovação
• Fortalece a marca
• Custo elev...
Discurso da Microsoft
novo
mercado
inovação
qualitativa
mercado
saturado
competição pela
qualidade
inovação
quantitativa
início da
competição
co...
Exercício
• Discussão geral
• Como o Design está ou não integrado aos
processos de sua empresa?
• Como deveria estar?
• 20...
“Algumas pessoas dizem que
design é solução de problemas. É
óbvio que designers resolvem
alguns problemas, mas isso os
den...
Modelos imaginados pela Motorola nos anos 70 e o que foi
comercializado
De ferramenta de trabalho a comunicador pessoal
Razr Dolce&Gabbana: celular como acessório fashion
O diferencial do iPhone é a interface
Bebê ensina a usar o iPhone
Limites: iPhone não permite muita customização
iPod: cada um na sua, mas com algo em comum
Sony Walkman: tem um que é no seu estilo
Computador Apple: melhor que PC, mas não combina com qualquer
coisa
Apple Inspired Moodboard
Exercício
• Como é a experiência de uma marca que
você gosta?
• Como seria uma decoração de interiores
que expresse a expe...
Características do Design
“Design é a alma das criações humanas”
Steve Jobs
Modelo Triádico
Pessoas
Artefatos
Atividades
Multilingüe
Gestual
Visual Sonora
Tátil
Olfativa
Futurologia aplicada
• A diferença entre a abelha e o
arquiteto é que este último
imagina o todo antes de
construir
• Visã...
Articulação de interesses
• Design é deliberação, mesmo
que implícita
• Desejos e necessidades são
culturais
• Cada um tem...
Idealista
Positivista
Lógico
Individualista
Materialista
Crítico
Dialético
Coletivo
Processo de Design
“Design é o design de um design para um design.”
John Heskett
Modelo Linear
Modelo Errático
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...
Criando possibilidades
Recursos para criar
• Rabiscos
• Brainstorming
• Cenários hipotéticos
• Prototipação rápida
• Abdução
Processo dialético
Imagem
Operante
Visão
Especificação
Visão
Img. Operante
Especificação
Tempo
Lowgren e Stolterman
Though...
Modelo Espiralado
“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 à...
Parte II - Planejamento de UX
Métodos de Pesquisa
• Levantamentos sócio-demográficos
• Estatísticas de navegação
• Testes de usabilidade
• Teste A/B
• E...
Estudos etnográficos realizados pela Nokia
sobre uso de TV móvel
Comunicação de pesquisa
• Traduzir a vivência
• Concisão
• Filtrar o relevante
• Generalizações
• Verdades e mentiras
Fotografias
Nokia Research
Vídeo
História em quadrinhos
Nokia Research
Colagem
goHostel
Colagens online
http://www.scrapblog.com/
Diagrama de afinidades
SAP
Modelos Conceituais
Personas como síntese de pesquisa sobre públicos-alvo. Detalhe do
perfil de Orkut fictício criado para a Persona.
Árvore de tarefas
Descrições
Pesquisa “O Orkut mudou a minha vida!”
Os participantes da pesquisa comentam
que a curiosidade os impele a clic...
Estudo de caso
Redesign do Usabilidoido versão Seurat (2005)
Versão Mondrian
Perfil Semiótico I
Perfil Semiótico II
Perfil Semiótico III
Explorando personalidade
Diagrama de afinidade
Personas
Versão Seurat
Versão Seurat ajustada
Resultados
• Aumento de 500% na rentabilidade do
Adsense em 6 meses
• Pararam os comentários criticando o
layout
• Índice ...
Prototipação
• Propósito (demonstrar, testar, explorar)
• Fidelidade (alta, baixa)
• Funcionalidade (funcional, semi-
func...
Rabiscos
Jonas Lowgren
Storyboard
SAP
Narrativa em vídeo
Ciao PDA
Bastidores
Protótipo estrutural
Protótipo de alta fidelidade
Protótipo funcional
Reactables
Performance
Reactables
Documentação
• Demorado
• Polissemia
• Desatualização
• Precisão
• Referência estavel
Mapa mental
Diagrama de Etapas
Cenários
•O aluno Alessandro Bernardes casou-se cedo e decide
trancar o curso para trabalhar mais. Ele recorre ao
website ...
Diagrama Situacional
Relação entre objetos
associativo
Relação entre objetos com verbos
Especificação de funcionalidades
Mural do usuário
Na página do perfil do usuário, haverá
um pequeno mural para outros usuá...
Casos de uso
Diagrama Sequencial
Diagrama Sequencial Negativo
Molic
SERG - PucRio
Vocabulário Visual
Wireframe
Pesquisa, Protótipos e
Documentação
• Propósitos diferentes
• Resultados diferentes
• Combinação
Parte III - Usabilidade
As empresas só investem em UX quando fica grave
Recall feito para resolver o problema do Fox
Experiência do Usuário não é requisito. É estratégia.
Memória Humana X Computacional
Seletiva Indiscriminada
Evolutiva Estável
Associativa Discreta
Conhecimento na cabeça: como abrir estas portas?
(Norman, 2006)
Conhecimento no mundo: barras indicam onde puxar
Conhecimento no mundo: barras indicam onde puxar
Conhecimento no mundo: barras indicam onde puxar
Propiciação em interfaces
gráficas (Eaton, 2002)
Descompasso (breakdown) entre
expectativa e evidência
Curva de aprendizado
0
22,5
45
67,5
90
1 semana 2 semanas 3 semanas 4 semanas
Adobe Photoshop
Corel Photopaint
Análise Cognitiva
• Método de avaliação do potencial
cognitivo de uma interface
• Diferenças entre: experiência,
expectati...
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 i...
Avaliação Heurística
• Tipo de avaliação de especialista, na
qual
os avaliadores baseiam-se em princípios
de usabilidade p...
O que é uma heurística
• Regra indutiva, baseada na experiência
• Forma sintética
• Heurísticas de Nielsen (1994):
• 1) Fe...
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. ...
Etapas
1.Escolher os avaliadores
2.Definir as heurísticas
3.Executar a avaliação
4.Cada problema encontrado deve ser relac...
Teste de Usabilidade
• Método para detectar problemas
compreender melhor a interação do
usuário com um produto
• Receber f...
Laboratório de Usabilidade
Eye-tracking
Tobii Monitor
Áreas onde o usuário
fixou o olhar
Caminho do olhar
Gravação em vídeo - betterdesktop.org - dezenas de
horas de testes de usabilidade
Morae
Métricas em testes de
usabilidade
• Eficiência
• Tempo de execução da tarefa
• Taxa de erros
• Eficácia
• Taxa de conclusã...
Exemplo de questionário de satisfação pós-teste
Diretrizes de Usabilidade
• Nielsen e Tahir, 2002
• 64: Usar texto com muito contraste e
cores de plano de fundo, para que...
Recomendações de Usabilidade
Contradições
Qual é o mais legível?
Recomendações de Usabilidade
Contradições
Qual é o mais legível?
Recomendações de Usabilidade
Contradições
Qual é o mais legível?
Recomendações de Usabilidade
Contradições
Onde é mais agradável a leitura?
Parter IV - Arquitetura da
Informação
Arquitetura da Informação
• Organização da estrutura de um website e
seu conteúdo, rotulagem e categorização
da informação...
Taxonomia na Biologia
• Esquema de classificação hierárquica dos
seres vivos
• Os filhos tem apenas um pai
• A classificaç...
Taxonomia dos seres vivos (Lineu)
Taxonomia em Arquitetura da
Informação
• Esquema de classificação hierárquico
para informações diversas
• Os filhos podem ...
Taxonomias para navegação
(antigo Cadê?)
Taxonomia em buscas
(WolframAlpha)
Taxonomia em buscas
(WolframAlpha)
Elaboração de Taxonomias
1.Inventário de conteúdo
2.Avaliação da taxonomia atual (se
existir)
3.Agrupamento
4.Hierarquizaç...
Inventário de Conteúdo
• Clicar em todos os links dentro do site
• Anotar
• URL
• Quebrado ou não
• Título da página
• Tex...
Inventário de Conteúdo de um website.
Processo de Classificação
rotular
categori
zar
agrupar
Rótulos
aluno
universitário
estudante
aprendiz
pupilo
estagiário
acadêmico
tutelado
colega
discípulo
educando
Agrupamentos
aluno
universitário
estudante
aprendiz
pupilo
estagiário
acadêmico
tutelado
colega
discípulo
educando
fábulas
formal
direito
Categorias
aluno
universitário
estudante
aprendiz pupilo
estagiário
acadêmico
tutelado
colega
discí...
Card-sorting
• Testar ou criar classificações
baseadas no modelo mental do
usuário
• Aberto ou fechado
• Apresentar cartõe...
© Professor Frederick van Amstel Ergonomia e
Usabilidade
Exercício de card-sorting sobre o portal UFPR.br
Presencial Online
Modelos Conceituais. Norman
(2006)
Designer Usuário
Modelo de
Design
Modelo do
Usuário
Sistema
Imagem do
Sistema
O incômodo ao ver essa imagem vem da disparidade entre modelos
mentais
Modelo mental dos pedais de um carro
Dendograma dos agrupamentos mais frequentes
Teste com protótipo
• Palm Vx
• Portátil
• Arquivos HTML apenas com as
opções de menu
• Tarefas de recuperação de
informaç...
V - Encontrabilidade
Estudo de encontrabilidade no Google
Comportamentos de navegação no Google
Variações de termos para a mesma busca
Resultados diferentes do Google para a mesma intenção
Habilidades de Busca
“frase exata”
- +
filetype:pdf
site:
conhecimento
geral,
fatos, nomes
etc...
técnicas conhecimento do...
Segundo pesquisas na Xerox PARC, as pessoas buscam
informações da mesma maneira que animais. Se uma presa
parece muito dif...
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
...
Usuários comentavam que não conseguiam decidir qual o
melhor notebook (Mídia Digital)
“Quanto mais informação você vê,
menos você sente.”
Ansiedade de Informação
• Informação não é o mesmo que
compreensão
• Quanto maior a densidade
informacional, maior o esfor...
O problema é antigo (2003)
Pára-quedistas: U$ 3.600 no Adsense só para esta página
As ferramentas de busca não ajudam
6° resultado
Exemplo: Catálogo Travessa dos Editores
Drupal como Gestor de Conteúdo
Catálogo deu origem ao website
“Em breve você não precisará
entrar na Internet. Você estará o
tempo todo dentro dela.”
Frederick van Amstel
Internet das Coisas
Pachube, um webservices que conecta sensores e
atuadores em todo o mundo.
Kit Touchatag
Diferentes formas de identificar digitalmente produtos
físicos.
Buscador de objetos para cegos NFC
Identificação RFID intracorpórea.
User Experience Boot Camp
User Experience Boot Camp
User Experience Boot Camp
User Experience Boot Camp
User Experience Boot Camp
Upcoming SlideShare
Loading in...5
×

User Experience Boot Camp

2,263

Published on

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

Transcript of "User Experience Boot Camp"

  1. 1. User Experience Boot Camp Frederick van Amstel, MsC Instituto Faber-Ludens de Design de Interação
  2. 2. O que é User Experience?
  3. 3. User Experience não é diagrama.
  4. 4. User Experience (UX) são aqueles momentos na vida em que tudo está perfeito ao seu redor.
  5. 5. O objetivo do Design é integrar a User Experience através de múltiplos ambientes.
  6. 6. Arquitetura da Informação Design de Interação Design de Serviços Experiência do Usuário Usabilidade Encontrabilidade Socialidade Continuidade
  7. 7. User Experience Honeycomb Peter Morville
  8. 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. 9. Parte I - Design Thinking
  10. 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. 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. 12. Processo de desenvolvimento comum Engenharia MarketingMarketing
  13. 13. Vantagens/Desvantagens • Economiza planejamento • Tentativa e erro • Design não é importante • O produto é um frankestein de funcionalidades Office XP
  14. 14. Design como embelezamento Engenharia Marketing Marketing Design
  15. 15. Vantagens/Desvantanges • Beleza vende • Que inovação é possível a essa altura do campeonato? Windows Vista
  16. 16. Design como inovação Engenharia Marketing Design Marketing
  17. 17. Vantagens/Desvantagens • Melhora a qualidade • Economiza retrabalho • Diminui a velocidade • Risco de não obter retorno Office 2007
  18. 18. Design como estratégia Engenharia Marketing Design Marketing
  19. 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. 20. Discurso da Microsoft
  21. 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. 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. 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. 24. Modelos imaginados pela Motorola nos anos 70 e o que foi comercializado
  25. 25. De ferramenta de trabalho a comunicador pessoal
  26. 26. Razr Dolce&Gabbana: celular como acessório fashion
  27. 27. O diferencial do iPhone é a interface
  28. 28. Bebê ensina a usar o iPhone
  29. 29. Limites: iPhone não permite muita customização
  30. 30. iPod: cada um na sua, mas com algo em comum
  31. 31. Sony Walkman: tem um que é no seu estilo
  32. 32. Computador Apple: melhor que PC, mas não combina com qualquer coisa
  33. 33. Apple Inspired Moodboard
  34. 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. 35. Características do Design “Design é a alma das criações humanas” Steve Jobs
  36. 36. Modelo Triádico Pessoas Artefatos Atividades
  37. 37. Multilingüe Gestual Visual Sonora Tátil Olfativa
  38. 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. 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. 40. Idealista Positivista Lógico Individualista Materialista Crítico Dialético Coletivo
  41. 41. Processo de Design “Design é o design de um design para um design.” John Heskett
  42. 42. Modelo Linear
  43. 43. Modelo Errático
  44. 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. 45. Criando possibilidades
  46. 46. Recursos para criar • Rabiscos • Brainstorming • Cenários hipotéticos • Prototipação rápida • Abdução
  47. 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. 48. Modelo Espiralado
  49. 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. 50. Parte II - Planejamento de UX
  51. 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. 52. Estudos etnográficos realizados pela Nokia sobre uso de TV móvel
  53. 53. Comunicação de pesquisa • Traduzir a vivência • Concisão • Filtrar o relevante • Generalizações • Verdades e mentiras
  54. 54. Fotografias Nokia Research
  55. 55. Vídeo
  56. 56. História em quadrinhos Nokia Research
  57. 57. Colagem goHostel
  58. 58. Colagens online http://www.scrapblog.com/
  59. 59. Diagrama de afinidades SAP
  60. 60. Modelos Conceituais
  61. 61. Personas como síntese de pesquisa sobre públicos-alvo. Detalhe do perfil de Orkut fictício criado para a Persona.
  62. 62. Árvore de tarefas
  63. 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. 64. Estudo de caso Redesign do Usabilidoido versão Seurat (2005)
  65. 65. Versão Mondrian
  66. 66. Perfil Semiótico I
  67. 67. Perfil Semiótico II
  68. 68. Perfil Semiótico III
  69. 69. Explorando personalidade
  70. 70. Diagrama de afinidade
  71. 71. Personas
  72. 72. Versão Seurat
  73. 73. Versão Seurat ajustada
  74. 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. 75. Prototipação • Propósito (demonstrar, testar, explorar) • Fidelidade (alta, baixa) • Funcionalidade (funcional, semi- funcional) • Competência técnica
  76. 76. Rabiscos Jonas Lowgren
  77. 77. Storyboard SAP
  78. 78. Narrativa em vídeo Ciao PDA
  79. 79. Bastidores
  80. 80. Protótipo estrutural
  81. 81. Protótipo de alta fidelidade
  82. 82. Protótipo funcional Reactables
  83. 83. Performance Reactables
  84. 84. Documentação • Demorado • Polissemia • Desatualização • Precisão • Referência estavel
  85. 85. Mapa mental
  86. 86. Diagrama de Etapas
  87. 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. 88. Diagrama Situacional
  89. 89. Relação entre objetos associativo
  90. 90. Relação entre objetos com verbos
  91. 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. 92. Casos de uso
  93. 93. Diagrama Sequencial
  94. 94. Diagrama Sequencial Negativo
  95. 95. Molic SERG - PucRio
  96. 96. Vocabulário Visual
  97. 97. Wireframe
  98. 98. Pesquisa, Protótipos e Documentação • Propósitos diferentes • Resultados diferentes • Combinação
  99. 99. Parte III - Usabilidade
  100. 100. As empresas só investem em UX quando fica grave
  101. 101. Recall feito para resolver o problema do Fox
  102. 102. Experiência do Usuário não é requisito. É estratégia.
  103. 103. Memória Humana X Computacional Seletiva Indiscriminada Evolutiva Estável Associativa Discreta
  104. 104. Conhecimento na cabeça: como abrir estas portas? (Norman, 2006)
  105. 105. Conhecimento no mundo: barras indicam onde puxar
  106. 106. Conhecimento no mundo: barras indicam onde puxar
  107. 107. Conhecimento no mundo: barras indicam onde puxar
  108. 108. Propiciação em interfaces gráficas (Eaton, 2002)
  109. 109. Descompasso (breakdown) entre expectativa e evidência
  110. 110. Curva de aprendizado 0 22,5 45 67,5 90 1 semana 2 semanas 3 semanas 4 semanas Adobe Photoshop Corel Photopaint
  111. 111. Análise Cognitiva • Método de avaliação do potencial cognitivo de uma interface • Diferenças entre: experiência, expectativa e aprendizado
  112. 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. 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. 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. 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. 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. 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. 118. Laboratório de Usabilidade
  119. 119. Eye-tracking Tobii Monitor Áreas onde o usuário fixou o olhar Caminho do olhar
  120. 120. Gravação em vídeo - betterdesktop.org - dezenas de horas de testes de usabilidade
  121. 121. Morae
  122. 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. 123. Exemplo de questionário de satisfação pós-teste
  124. 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. 125. Recomendações de Usabilidade Contradições Qual é o mais legível?
  126. 126. Recomendações de Usabilidade Contradições Qual é o mais legível?
  127. 127. Recomendações de Usabilidade Contradições Qual é o mais legível?
  128. 128. Recomendações de Usabilidade Contradições Onde é mais agradável a leitura?
  129. 129. Parter IV - Arquitetura da Informação
  130. 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. 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. 132. Taxonomia dos seres vivos (Lineu)
  133. 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. 134. Taxonomias para navegação (antigo Cadê?)
  135. 135. Taxonomia em buscas (WolframAlpha)
  136. 136. Taxonomia em buscas (WolframAlpha)
  137. 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. 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. 139. Inventário de Conteúdo de um website.
  140. 140. Processo de Classificação rotular categori zar agrupar
  141. 141. Rótulos aluno universitário estudante aprendiz pupilo estagiário acadêmico tutelado colega discípulo educando
  142. 142. Agrupamentos aluno universitário estudante aprendiz pupilo estagiário acadêmico tutelado colega discípulo educando
  143. 143. fábulas formal direito Categorias aluno universitário estudante aprendiz pupilo estagiário acadêmico tutelado colega discípulo educando coloquial trabalho
  144. 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. 145. © Professor Frederick van Amstel Ergonomia e Usabilidade Exercício de card-sorting sobre o portal UFPR.br Presencial Online
  146. 146. Modelos Conceituais. Norman (2006) Designer Usuário Modelo de Design Modelo do Usuário Sistema Imagem do Sistema
  147. 147. O incômodo ao ver essa imagem vem da disparidade entre modelos mentais
  148. 148. Modelo mental dos pedais de um carro
  149. 149. Dendograma dos agrupamentos mais frequentes
  150. 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. 151. V - Encontrabilidade
  152. 152. Estudo de encontrabilidade no Google
  153. 153. Comportamentos de navegação no Google
  154. 154. Variações de termos para a mesma busca
  155. 155. Resultados diferentes do Google para a mesma intenção
  156. 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. 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. 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. 159. Usuários comentavam que não conseguiam decidir qual o melhor notebook (Mídia Digital)
  160. 160. “Quanto mais informação você vê, menos você sente.”
  161. 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. 162. O problema é antigo (2003)
  163. 163. Pára-quedistas: U$ 3.600 no Adsense só para esta página
  164. 164. As ferramentas de busca não ajudam 6° resultado
  165. 165. Exemplo: Catálogo Travessa dos Editores
  166. 166. Drupal como Gestor de Conteúdo
  167. 167. Catálogo deu origem ao website
  168. 168. “Em breve você não precisará entrar na Internet. Você estará o tempo todo dentro dela.” Frederick van Amstel
  169. 169. Internet das Coisas
  170. 170. Pachube, um webservices que conecta sensores e atuadores em todo o mundo.
  171. 171. Kit Touchatag
  172. 172. Diferentes formas de identificar digitalmente produtos físicos.
  173. 173. Buscador de objetos para cegos NFC
  174. 174. Identificação RFID intracorpórea.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×