Design Centrado no Usuário
A importância e métodos de projetos com foco no usuário
Porto Alegre - RS, 23 de Maio de 2009

Quem é esse cara?

Mas antes... uma história...

*I love Mac (http://www.i-love-mac.com)

01 Meu objetivo hoje

“ Pessoas normalmente cometem erros
durante a utilização de diferentes produtos.
Invariavelmente, elas se sentem culpadas e
tentam esconder o erro ou culpar-se por “burrice”, falta
de prática e ignorância.
O que acontece na verdade, é que outros cometem o
mesmo erro e isso ocorre em virtude de um
design mal feito.
Donald Norman (O design do dia-a-dia)
”

“ Design é inevitável.
A alternativa a um bom design é o mau design.
Todo mundo realiza decisões de design o tempo
todo, mesmo sem perceber isso. Um bom design é o
resultado destas decisões tomadas conscientemente.
Douglas Martin (Book Designer)
”

02 Os Fundamentos

1. Quem vai utilizar?
2. O que os usuários fazem?
3. Qual é o real problema a ser resolvido?

*Créditos: www.projectcartoon.com

03 Biblioteca da Faculdade Dom Bosco

Página Inicial

Resultado de Busca (Com Ajax - Sem recarregamento de página)

Diversas opções de filtro.

Diversas opções para cada livro

“Foco” no usuário

“Foco” no usuário

*Stuffthathappens.com por Eric Burke

Modelo de Maturidade em Usabilidade
Empresa guiada pelo Usuário
Design Centrado no Usuário Integrado
Processo sistemático de Usabilidade
Dirigida pela usabilidade
Verba dedicada a usabilidade
Skunkworks com foco em usabilidade
Desenvolvedor Centrado na Usabilidade
Hostilidade com a Usabilidade
*Nielsen Usability Maturity Model (http://www.useit.com/alertbox/maturity.html).

04 Design Centrado no Usuário

Facilitar acesso do usuário a informação.

Os usuários não pensam como a empresa.

Os usuários não confiam no que a instituição fala.

O usuário quer ler relatório ou investir?

Como fazer o usuário nos escolher?

Como identificar novas oportunidades?

Como identificar novas oportunidades?

Como identificar novas oportunidades?

Útil
Se não é útil, o que importa se é bom
de usar?
*Peter Morville (Ambient Findability)

Usável
É fácil de entender e eficiente?

Desejável
É compensador, incentiva e motiva as
pessoas a usarem?

Confiável
O que está sendo dito é
verdade, posso confiar?

Lozalizável
Você consegue encontrar o que
realmente quer?

Acessível
Está disponível para todos?

User Experience
Felicidade
Motivador
Proveitoso
Divertido
Interessante
Emocionalmente adequado
Incentivador de Criatividade
Lindo
Fácil de entender Compensador
Fácil de lembrar como usar
Eficiente no uso
Seguro no uso
Boa utilidade
Necessidade
*Renato Rosa, Curso de Arquitetura de Informação (Perestroika)

100%
Em Conversão/Vendas
O que se perde 161%
ao não investir em Em Produtividade
Design Centrado no
Usuário? 150%
Em Tráfego/Visitantes
202%
Uso de Funcionalidade
Específica
*Estudo do NN/g com 42 projetos (http://www.useit.com/alertbox/roi-first-study.html)

05 O Arquiteto de Informação

Competências de um AI
Análise Análise de Análise de Análise de Análise
Heurística Benchmarking Métricas Áreas de Hierárquica
Interfaces de Tarefas
Teste de Eye-Tracking Pesquisa Focus-Group Card Sorting
Usabilidade Etnográfica
Site map Fluxograma Wireframes Definições de
SEO
*Créditos dos Ícones: Peter Morville e Jeffery Callender

06 Colocando tudo na prática

*Crédito dos Ícones: www.iconspedia.com

Roberto
23 anos
Bibliotecário
Adorador de Platão

Lisa
22 anos
Estudante de Filosofia
Apaixonada por livros

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes
*Ícones das entregas: Peter Morville e Jeffery Callender. Ícones dos personagens: www.iconspedia.com

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

01. Análise Heurística
O que é?
Método de inspeção tendo como base uma lista
de heurísticas ou de critérios de usabilidade.
Heurísticas
de Nielsen

01. Análise Heurística
01.
Visibilidade do estado
do sistema

01. Análise Heurística
02.
Compatibilidade do
sistema com o mundo real

01. Análise Heurística
03.
Controle e liberdade
do usuário

01. Análise Heurística
04.
Consistência e padrões

01. Análise Heurística
05.
Prevenção de erros

01. Análise Heurística
06.
Reconhecimento ao invés
de lembrança

01. Análise Heurística
07.
Flexibilidade e eficiência
de uso

01. Análise Heurística
08.
Estética e design
minimalista

01. Análise Heurística
09.
Ajudar os usuários a
reconhecer, diagnosticar e
corrigir erros

01. Análise Heurística
10.
Ajudas e documentação.

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

02. Análise de Benchmarking
O que é?
Identificação de padrões, riscos, posicionamento e
oportunidades a partir de soluções de mercado.

02. Análise de Benchmarking
O que é?
Identificação de padrões, riscos, posicionamento e
oportunidades a partir de soluções de mercado.

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

03. Análise de Métricas
O que é?
Análise do comportamento dos usuários a partir
de relatórios de métricas. A partir disso, é
possível identificar problemas e oportunidades
para otimização do negócio.

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

04. Análise de Áreas da Interface
O que é?
Identificação de padrões de comunicabilidade e
interação de concorrentes e referências.

Sem utilização (37%)
Área institucional (33%)
Funcionalidades (26%)
Navegação Estruturada (4%)
Chamadas e auto-promoção (0%)
Conteúdos de interesse(0%)

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

05. Análise Hierárquica de Tarefas
O que é?
Identificação das tarefas a serem executadas
pelos usuários com classificação de relevância e
mapeamento de fluxos alternativos.

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

06. Focus-Group
O que é?
Uma técnica de discussão objetiva com um grupo
de maneira não estruturada e natural. Aplicada
para explorar comportamentos, identificar
tendências e esclarecer questões específicas de
um projeto.

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

07. Wireframes
O que é?
A “planta baixa” de uma interface. Define
organização, relacionamento, relevância e
nomenclaturas de uma interface.

07. Wireframes
Conclusões até então:
(Exercício com os alunos de Engenharia de Usabilidade da Faculdade Dom Bosco)
*Exercício realizado com os alunos de Engenharia de Usabilidade da Faculdade Dom Bosco em 23/05/2009.

07. Wireframes
Conclusões até então:
(Exercício com os alunos de Engenharia de Usabilidade da Faculdade Dom Bosco)
- Ser compatível com o mundo real: Mostrar capas dos livros e possibilitar folhá-lo;
- As informações chave para identificar um livro são capa, título e autor;
- Simplificar a busca: Trabalhar refinamento após a busca, como Amazon e Harvard;
- Organizar elementos e adequar relevâncias;
- Oferecer sugestões de livros e categorias a partir da navegação, professor, curso e cadeiras cursadas;
- Disponibilizar comentários e avaliações de quem já leu os livros;
- Oferecer livros para compras (Google Books);
- Listmania (Amazon);
- Possibilitar a renovação online, notificar o usuário por e-mail e disponibilizar o histórico de livros;
- Para o usuário, quanto mais integrado estiver os serviços da faculdade, melhor.
*Exercício realizado com os alunos de Engenharia de Usabilidade da Faculdade Dom Bosco em 23/05/2009.

07. Wireframes
Wireframe de baixa fidelidade criado com os alunos.
*Exercício realizado com os alunos de Engenharia de Usabilidade da Faculdade Dom Bosco em 23/05/2009.

Roberto
Análise
Heurística Análise de
Benchmarking Análise de
Métricas
Análise
Hierárquica Análise de
de Tarefas Áreas de
Interfaces
Focus-Group Lisa
Wireframes

100%
Em Conversão/Vendas
O que se perde 161%
ao não investir em Em Produtividade
Design Centrado no
Usuário? 150%
Em Tráfego/Visitantes
202%
Uso de Funcionalidade
Específica

O que se perde
ao não investir em
Design Centrado no
Usuário?
Lisa

07 Lições para levar pra Casa

1. Usuários nunca estão errados.
2. Usuário > Cliente
3. Se você precisa de um manual para
explicar, algo está errado.
4. Don’t be evil (Google)
5. O usuário guia o produto.

08 Mais sobre o tema

O design do dia-a-dia Projetando Websites Não me faça pensar
Donald A. Norman Jakob Nielsen Steve Krug
Design para a Internet Information As leis da simplicidade
Felipe Memória Architecture John Maeda
P. Morville e L. Rosenfeld

Obrigado.
Guilherme Henrique Dienstmann
guilhermedienstmann@gmail.com
twitter.com/guilhermehd