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
Socialidade
Continuidade

User Experience Honeycomb
Peter Morville

• 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

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 montado o que o
consumidor
queria...

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

Processo de desenvolvimento comum
Engenharia
MarketingMarketing

Vantagens/Desvantagens
• Economiza planejamento
• Tentativa e erro
• Design não é importante
• O produto é um frankestein de
funcionalidades
Office XP

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
Office 2007

Design como estratégia
Engenharia
Marketing
Design
Marketing

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

Discurso da Microsoft

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

Exercício
• Discussão geral
• Como o Design está ou não integrado aos
processos de sua empresa?
• Como deveria estar?
• 20 minutos

“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

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 experiência?
• Monte uma colagem usando a ferramenta
http://mydeco.com/rooms/moodboard/
• Tente demonstrar o feeling

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ão holística
• Observar tendências é a melhor
forma de prever o futuro

Articulação de interesses
• Design é deliberação, mesmo
que implícita
• Desejos e necessidades são
culturais
• Cada um tem uma história
distinta

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
análise
criação
criação
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
Thoughtful Interaction Design, MIT Press

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 à
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

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
• Estudo etnográfico

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

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 de aprovação de 60%
• Maior flexibilidade e durabilidade

Prototipação
• Propósito (demonstrar, testar, explorar)
• Fidelidade (alta, baixa)
• Funcionalidade (funcional, semi-
funcional)
• Competência técnica

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

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

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,
expectativa e aprendizado

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

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.

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

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)

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

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

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ão da tarefa
• Satisfação
• Questionário de avaliação subjetiva

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 os
caracteres fiquem o mais legíveis
possí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
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 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)

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

Taxonomia dos seres vivos (Lineu)

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

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ção
5.Testes

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

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ípulo
educando
coloquial
trabalho

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

© 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ção

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
domínio
dicionários
wikipedia
filtrar,
ampliar,
desistir
estratégia de
busca
mapeamento
de informação

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

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

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
do designer e do usuário
• Porque não reduzir a
densidade?

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.