dicas de usabilidade para melhorar a experiência do usuário com o seu produto

PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah

0

MENTORIA UX DESIGNMARÇO 2016

Por Paula Macedo@paulinhah


1

Agenda8: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


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

PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 3

PAULA MACEDO, BIBLIOTECÁRIA ….


E LÍDER DE PROJETOS DE INOVAÇÃO


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+ years1500+ projects


PARECEIROS ESTRATÉGICOSINSITUM

ARGENTINACOLOMBIAUSMEXICOPERUBRAZILEUROPE+ MUMBAI SHANGHAI HONG KONG


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

Kimberly Clark + INSITUM | Confidential | © Copyright INSITUM 2015 8

CONSUMER INSIGHTS

TECHNOLOGYBUSINESS STRATEGY

D.School –Stanford University

Desire

Feasibility Viability

Innovation

HUMAN CENTRED INNOVATION


LOOKING FROM DIFFERENT CONSUMER’S PERSPECTIVES

WHAT USERS THINK?COGNITIVE DOMAINPerceptions beliefs, preferences ...

HOW USERS FEEL?EMOTIONAL DOMAINDreams, desires, aspirations…

WHAT USERS USE?MATERIAL DOMAINProduct, services, brands

WHAT USERS DO?BEHAVIORAL DOMAINActivities, habits, processes

APPROACH

INSITUM | Confidential | © Copyright INSITUM 2015 10

USER EXPERIENCE (UX)


12

UX

Não é uma pessoa

Não é profissão

Não é um wireframe

Não é um modismo


13

UX

É uma perspectiva

É um modo de abordar uma questão

É pensar na EXPERIÊNCIA DE USO centrado no ser humano


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





PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 15Guilherme Ranoya, material aula Digitorp ECA USP T3

INSITUM | Confidential | © Copyright INSITUM 2015 17

DICAS DE USABILIDADE PARA MELHORAR A

EXPERIÊNCIA DO USUÁRIO COM O SEU

PRODUTO


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


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”.


Jakob NielsenPhd. IHC, “user advocate”

Donald NormanPsicólogo e Cientista Cognitivo



COMO GARANTIR A USABILIDADE ?



QUAIS SÃO AS METAS QUE TEMOS QUE SEGUIR PARA GARANTIR A USABILIDADE?


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



ANÁLISE HEURÍSTICA



?



UMA ‘RECEITA’ PARA USABILIDADE



1. Feedback (visibilidade do estado do sistema)


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.


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?



2. Correspondência entre o sistema e o mundo real


2. Correspondência entre o sistema e o mundo realO 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.


AFFORDANCE

Formas induzem usos?

2. Correspondência entre o sistema e o mundo realO 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.



3. Controle e liberdade para

o usuário


3. Controle e liberdade para o usuárioDar 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..


3. Controle e liberdade para o usuárioDar 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?



4. Consistência e padronização


4. Consistência e padronizaçãoOs 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.


4. Consistência e padronizaçãoOs 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?



5. Prevenção de erros


5. Prevenção de errosUm 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.


5. Prevenção de errosUm 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?



6. Reconhecimento em vez de lembrança


6. Reconhecimento em vez de lembrançaElementos 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.


6. Reconhecimento em vez de lembrançaElementos 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?



7. Flexibilidade e eficiência de uso


7. Flexibilidade e eficiência de usoPermitir 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?


•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 usoPermitir 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.



8. Estética e design

minimalista


8. Estética e design minimalistaEvite 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.


8. Estética e design minimalistaEvite 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



9. Saídas claramente demarcadas


9. Saídas claramente demarcadasO 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


9. Saídas claramente demarcadasO 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...



10. Ajuda e Documentação


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.


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?


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.


Análise Heurística - metodologia

3 a 5 avaliadores

trabalhando inidividualmente

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


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

PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 61PDF: http://www.linhadecodigo.com.br/artigo/2355/abc-da-usabilidade-analise-heuristica.aspx

Exemplo

PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 62PDF: http://www1.zie.pg.gda.pl/~msik/materialy/xerox-he-chklst2a.pdf

PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 63PDF: http://molib.org/wp-content/uploads/2014/10/10-9-Lindahl-Martin-Heurisitics-Checklist.pdf

PAULA MACEDO | LIGA VENTURES FEV.2016 @paulinhah 64http://www.uxcheck.co/#

Extensão do Chrome para facilitar a avaliação heurística


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 NielsenGuiherme RanoyaGuilhermo ReisAbbey Couvert













http://www.uxcheck.co/

http://www.uxcheck.co/




66

TKS =)

@[email protected]@gmail.com


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

dicas de usabilidade para melhorar a experiência do usuário com o seu produto

Design