Apresentação para startups da aceleradora Oxigênio - Porto Seguro. Conteúdo engloba o contexto de UX onde a usabilidade está inserida e detalhamento sobre análise de heurística e como melhorar a experiência do usuário com interfaces digitais
Dicas de usabilidade para melhorar a experiência do usuário com o seu produto
1. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
0
MENTORIA UX DESIGN
MARÇO 2016
Por Paula Macedo
@paulinhah
2. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
1
Agenda
8:30 Introdução e Apresentação
9:00 Dicas básicas de usabilidade para melhorar a
experiência do seu usuário com seu produto
10:30 Intervalo
10:50 Bate papo sobre UX individual
3. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
2
Nome, sua história com a sua startup
Alguma coisa que gostaria de saber sobre o
usuário de vocês
Qual foi a última vez que você teve raiva dos
eletrônicos? O que aconteceu?
APRESENTAÇÃO
4. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 3
PAULA MACEDO, BIBLIOTECÁRIA ….
5. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 4
E LÍDER DE PROJETOS DE INOVAÇÃO
6. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 5
INSITUM is a leading innovation
consultancy. We partner with
organizations to solve business problems
and develop innovation capabilities
through design, strategy and social
science.
13+ years
1500+ projects
7. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 6
PARECEIROS ESTRATÉGICOS
INSITUM
ARGENTINA
COLOMBIA
US
MEXICO
PERU
BRAZIL
EUROPE
+
MUMBAI
SHANGHAI
HONG KONG
8. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
7
Anthropology, psychology, journalism, economics, philosophy, sociology, linguistics,engineering,
marketing, industrial design, information design, graphic design, social communication, semiotics,
history of art, interaction design, international relations, business administration.
130+ CONSULTANTS WITH DIFFERENT
BACKGROUNDS AND CULTURES
13. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
12
UX
Não é uma pessoa
Não é profissão
Não é um wireframe
Não é um modismo
14. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
13
UX
É uma perspectiva
É um modo de abordar uma questão
É pensar na EXPERIÊNCIA DE USO centrado
no ser humano
15. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 14
Elementos da Experiência do Usuário, por Peter Morville
http://semanticstudios.com/publications/semantics/000029.php
Elementos da Experiência do Usuário, por Jesse James Garret
http://www.jjg.net/elements/pdf/elements.pdf
16. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 15Guilherme Ranoya, material aula Digitorp ECA USP T3
19. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 18
USABILIDADE
Garantir a usabilidade
é o PRIMEIRO PASSO,
é o BÁSICO que você
tem que oferecer
para que as pessoas
tenham uma boa
experiência com o seu
produto
20. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 19
Módulo 2 | Cap. 6
ExtraLibris
A usabilidade é o componente do Standard de ISO
9241-11 (1998), e é definido da seguinte forma:
“Usabilidade é a eficiência,
eficácia e satisfação com a
qual os públicos do produto
alcançam objetivos em um
determinado ambiente”.
21. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 20
Jakob Nielsen
Phd. IHC, “user advocate”
Donald Norman
Psicólogo e Cientista Cognitivo
22. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 21
Módulo 2 | Cap. 6
ExtraLibris
COMO GARANTIR A
USABILIDADE ?
23. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 22
Módulo 2 | Cap. 6
ExtraLibris
QUAIS SÃO AS METAS
QUE TEMOS QUE
SEGUIR PARA
GARANTIR A
USABILIDADE?
24. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 23
Atributos (de uma interface) com boa
Usabilidade, por Jakob Nielsen:
Ser eficiente na utilização
Fácil de “recordar”
Evitar erros (não induzir a erros)
Ser subjetivamente agradável
Ser fácil de aprender
25. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 24
Módulo 2 | Cap. 6
ExtraLibris
ANÁLISE HEURÍSTICA
26. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 25
Módulo 2 | Cap. 6
ExtraLibris
?
27. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 26
Módulo 2 | Cap. 6
ExtraLibris
UMA ‘RECEITA’
PARA USABILIDADE
28. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 27
Módulo 2 | Cap. 6
ExtraLibris
1.
Feedback
(visibilidade do estado do
sistema)
29. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 28
1. Feedback (visibilidade do estado do sistema)
Informar o usuário sobre o que está acontecendo e se
conseguiu realizar as interações dentro do site.
• O sistema deve informar continuamente ao usuário
sobre o que ele está fazendo.
• 10 segundos é o limite para manter a atenção do
usuário focalizada no diálogo.
30. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 29
1. Feedback (visibilidade do estado do sistema)
Informar o usuário sobre o que está acontecendo e se
conseguiu realizar as interações dentro do site.
• O sistema deve informar continuamente ao usuário
sobre o que ele está fazendo.
• 10 segundos é o limite para manter a atenção do
usuário focalizada no diálogo.
Ao acionar um botão, há um som
para confirmar que a função
foi acionada?
Há uma informação visual ou
sensorial para que o usuário
tenha certeza que sua
solicitação foi atendida?
31. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 30
Módulo 2 | Cap. 6
ExtraLibris
2.
Correspondência
entre o sistema e o mundo
real
32. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 31
2. Correspondência entre o sistema e o mundo real
O quanto os serviços em ambientes físicos correspondem
e/ou correlacionam-se com os digitais/virtuais.
•A terminologia deve ser baseada na linguagem do
usuário e não orientada ao sistema.
•As informações devem ser organizadas conforme o
modelo mental do usuário.
33. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 32
AFFORDANCE
Formas induzem usos?
2. Correspondência entre o sistema e o mundo real
O quanto os serviços em ambientes físicos correspondem
e/ou correlacionam-se com os digitais/virtuais.
•A terminologia deve ser baseada na linguagem do
usuário e não orientada ao sistema.
•As informações devem ser organizadas conforme o
modelo mental do usuário.
34. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 33
Módulo 2 | Cap. 6
ExtraLibris
3.
Controle e liberdade para
o usuário
35. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 34
3. Controle e liberdade para o usuário
Dar liberdade para o usuário fazer o que quiser dentro
do sistema com exceção das regras que vão contra o
negócio ou interferem em outra funcionalidade.
• Permitir que o usuário desfaça, edite, configure..
36. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 35
3. Controle e liberdade para o usuário
Dar liberdade para o usuário fazer o que quiser dentro
do sistema com exceção das regras que vão contra o
negócio ou interferem em outra funcionalidade.
• Permitir que o usuário desfaça, edite, configure..
Físicas, lógicas ou culturais... há
barreiras para que ações que não
podem ser realizadas sejam
limitadas?
37. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 36
Módulo 2 | Cap. 6
ExtraLibris
4.
Consistência e
padronização
38. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 37
4. Consistência e padronização
Os padrões de navegação e consistência entre as diversas
páginas é o que define o quanto a experiência é intuitiva,
devem ser observados também na análise heurística.
• Um mesmo comando ou ação deve ter sempre o
mesmo efeito.
•A mesma operação deve ser apresentada na mesma
localização e deve ser formatada/apresentada da
mesma maneira para facilitar o reconhecimento.
39. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 38
4. Consistência e padronização
Os padrões de navegação e consistência entre as diversas
páginas é o que define o quanto a experiência é intuitiva,
devem ser observados também na análise heurística.
• Um mesmo comando ou ação deve ter sempre o
mesmo efeito.
•A mesma operação deve ser apresentada na mesma
localização e deve ser formatada/apresentada da
mesma maneira para facilitar o reconhecimento.
Símbolos, linguagens,
comandos estão
padronizados?
40. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 39
Módulo 2 | Cap. 6
ExtraLibris
5.
Prevenção de erros
41. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 40
5. Prevenção de erros
Um bom sistema deve prever erros, prevení-los ou então
oferecer saídas simples para os usuários.
• Evitar situações de erro.
• Conhecer as situações que mais provocam erros e
modificar a interface para que estes erros não
ocorram.
42. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 41
5. Prevenção de erros
Um bom sistema deve prever erros, prevení-los ou então
oferecer saídas simples para os usuários.
• Evitar situações de erro.
• Conhecer as situações que mais provocam erros e
modificar a interface para que estes erros não
ocorram.
A interface evita que
ações perigosas ou
indevidas sejam realizadas
inadvertidamente?
43. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 42
Módulo 2 | Cap. 6
ExtraLibris
6.
Reconhecimento em
vez de lembrança
44. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 43
6. Reconhecimento em vez de lembrança
Elementos que garantam uma interface intuitiva – o quanto
dialogam com outros sistemas já conhecidos pelo usuário,
especialmente em navegação.
• Minimizar a sobrecarga de memória do usuário
•O sistema deve mostrar os elementos de diálogo e
permitir que o usuário faça suas escolhas, sem a
necessidade de lembrar um comando específico.
45. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 44
6. Reconhecimento em vez de lembrança
Elementos que garantam uma interface intuitiva – o quanto
dialogam com outros sistemas já conhecidos pelo usuário,
especialmente em navegação.
• Minimizar a sobrecarga de memória do usuário
•O sistema deve mostrar os elementos de diálogo e
permitir que o usuário faça suas escolhas, sem a
necessidade de lembrar um comando específico.
É fácil de aprender?
46. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 45
Módulo 2 | Cap. 6
ExtraLibris
7.
Flexibilidade e
eficiência de uso
47. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 46
7. Flexibilidade e eficiência de uso
Permitir que interação de usuários experientes seja mais rápida, mesmo
que eles não sejam percebidos por usuários iniciantes. Permita que a
interface se adeque a tipos diferentes de usuários.
•Atalhos também servem para recuperar informações que estão em uma profundidade na árvore
navegacional a partir da interface principal.
• A interface de uso auxilia para que o objeto seja utilizado na plenitude de seus recursos e para que
desempenhe seu papel?
48. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 47
•Atalhos também servem para recuperar informações que estão em uma profundidade na árvore
navegacional a partir da interface principal.
• A interface de uso auxilia para que o objeto seja utilizado na plenitude de seus recursos e para que
desempenhe seu papel?
A interface é rápida
e ágil? Responde
convenientemente às
expectativas do
usuário?
7. Flexibilidade e eficiência de uso
Permitir que interação de usuários experientes seja mais rápida, mesmo
que eles não sejam percebidos por usuários iniciantes. Permita que a
interface se adeque a tipos diferentes de usuários.
49. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 48
Módulo 2 | Cap. 6
ExtraLibris
8.
Estética e design
minimalista
50. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 49
8. Estética e design minimalista
Evite adicionar informações irrelevantes naquele
momento, elas acabam competindo com informações que
o usuário, de fato, necessita.
• O que mostrar e o que ocultar?
Ex: nos controles remotos funções como ajustar
hora ficam ocultas para não confundir o uso diário
com excesso de informação.
51. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 50
8. Estética e design minimalista
Evite adicionar informações irrelevantes naquele
momento, elas acabam competindo com informações que
o usuário, de fato, necessita.
• O que mostrar e o que ocultar?
Ex: nos controles remotos funções como ajustar
hora ficam ocultas para não confundir o uso diário
com excesso de informação.
O quanto simples e fácil é
o processo ?
É fácil saber qual a ação
principal da página
52. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 51
Módulo 2 | Cap. 6
ExtraLibris
9.
Saídas claramente
demarcadas
53. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 52
9. Saídas claramente demarcadas
O usuário controla o sistema, ele pode, a qualquer
momento, abortar uma tarefa, ou desfazer uma
operação e retornar ao estado anterior.
• Todas as saídas para as funcionalidades existem e
são fáceis de encontrar
54. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 53
9. Saídas claramente demarcadas
O usuário controla o sistema, ele pode, a qualquer
momento, abortar uma tarefa, ou desfazer uma
operação e retornar ao estado anterior.
• Todas as saídas para as funcionalidades existem e
são fáceis de encontrar
E se...
55. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 54
Módulo 2 | Cap. 6
ExtraLibris
10.
Ajuda e Documentação
56. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 55
10. Ajuda e Documentação
Áreas e textos de ajuda contextual que auxiliam os
usuários a encontrarem o que buscam nos sites.
•O ideal é que um software seja tão fácil de usar
(intuitivo) que não necessite de ajuda ou
documentação.
•- Se for necessária a ajuda deve estar facilmente
acessível e on-line.
57. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 56
10. Ajuda e Documentação
Áreas e textos de ajuda contextual que auxiliam os
usuários a encontrarem o que buscam nos sites.
•O ideal é que um software seja tão fácil de usar
(intuitivo) que não necessite de ajuda ou
documentação.
•- Se for necessária a ajuda deve estar facilmente
acessível e on-line.
Se tudo der errado,
o usuário tem pra
onde correr?
58. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 57
1. Feedback...ou visibilidade do status do sistema;
2. Correspondência entre o sistema e o mundo real;
3. Controle do usuário e liberdade;
4. Consistência e padrões;
5. Prevenções de erros;
6. Reconhecimento em vez de lembrança;
7. Flexibilidade e eficiência de uso;
8. Estética e design minimalista;
9. Saídas claramente demarcadas
10. Ajuda e documentação.
59. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 58
Análise Heurística - metodologia
3 a 5 avaliadores
trabalhando inidividualmente
60. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 59http://imasters.com.br/design-ux/analise-heuristica-facil-rapida-e-barata-de-aplicar/?trace=1519021197&source=single
Análise Heurística - metodologia
61. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 60
Nível 0:
Não é encarado necessariamente como um problema de usabilidade.
Nível 1:
Problema estético que não tem necessidade de ser corrigido, a menos que haja tempo e recurso disponível.
Nível 2:
Pequeno problema com baixa prioridade na correção.
Nível 3:
Problema com alta prioridade de correção.
Nível 4:
Catástrofe de usabilidade, ou seja, o produto só será liberado se a correção for feita. Ao final, o
relatório das violações de heurística vai ficar similar à tabela abaixo mostrada.
PDF: http://www.linhadecodigo.com.br/artigo/2355/abc-da-usabilidade-analise-heuristica.aspx
Escala de erros
62. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 61PDF: http://www.linhadecodigo.com.br/artigo/2355/abc-da-usabilidade-analise-heuristica.aspx
Exemplo
63. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 62PDF: http://www1.zie.pg.gda.pl/~msik/materialy/xerox-he-chklst2a.pdf
64. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 63PDF: http://molib.org/wp-content/uploads/2014/10/10-9-Lindahl-Martin-Heurisitics-Checklist.pdf
65. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 64http://www.uxcheck.co/#
Extensão do Chrome para facilitar a avaliação heurística
66. PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 65
http://www.nngroup.com/articles/ten-usability-heuristics/
http://corais.org/node/99
http://blog.caelum.com.br/10-heuristicas-de-nielsen-uma-formula-pra-evitar-erros-basicos-de-usabilidade
http://arquiteturadeinformacao.com/
http://www.uxcheck.co/#
LINKS
Referências
Jakob Nielsen
Guiherme Ranoya
Guilhermo Reis
Abbey Couvert
67. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
66
TKS =)
@paulinhah
paulamacedo@insitum.com
paulazevedomacedo@gmail.com
68. PAULA MACEDO | LIGA VENTURES FEV.2016
@paulinhah
67
INSITUM México
+5255 5616 8888
INSITUM Brasil
+55 11 2506 8880
INSITUM USA
+1 847 864 1455
INSITUM Colombia
+571 248 3685
INSITUM Argentina
+54 11 4776 0958
INSITUM Perú
+51 983 7040 88
INSITUM Europe
+34 711 701 065