Caelum Ux Usabilidade wd41 PDF

.
Caelum
Sumrio
Sumrio
1 Experincia do Usurio
1.1 O que Experincia do Usurio?
1.2 ISO 9241-210
1.3 A Evoluo da Experincia do Usurio
1.4 Para saber mais: O Caso ClearRX
1.5 Elementos da Experincia do Usurio
1.6 Planos da Experincia do Usurio
2 Design de Interao
2.1 Quatro Abordagens para Design de Interao
11
2.2 Design Centrado no Usurio
12
3 Time e Projeto
14
3.1 Gamestorming - Montar time heterogneo
14
3.2 Kanban
16
3.3 Os Kanbans de UX
17
3.4 Gamestorming - Definir projeto mobile
19
3.5 O tringulo de ouro
20
3.6 Gamestorming - Tringulo de Ouro
22
3.7 Gamestorming - 360 View
23
4 Pesquisa
25
4.1 Onde Buscar Informaes?
26
4.2 Mtodos e Propsitos
27
4.3 Entrevistas
28
4.4 Card Sorting
29
4.5 Recrutamento
31
4.6 Destilando a Pesquisa
33
4.7 Gamestorming - Entrevista, tirando dvidas com o usurio
33
5 Personas
35
Sumrio
Caelum
5.1 Design Centrado no Usurio
35
5.2 O que personas no representam
36
5.3 Benefcios
36
5.4 Impedimentos
37
5.5 A importncia dos objetivos
38
5.6 Criando Personas
38
5.7 Nmero de Personas
39
5.8 Personas ad hoc
39
5.9 Persona simples
39
5.10 Proto-persona
40
5.11 Gamestorming - Criando proto-personas
43
5.12 Os sete passos para criar Personas
43
5.13 Secundria
48
5.14 Mapa de empatia
50
5.15 Templates de persona
51
5.16 Discusso: As narrativas so realmente necessrias?
54
5.17 Gamestorming - Criando Persona no dia a dia
54
6 Modelando e identificando requisitos
56
6.1 Modelo Mental
57
6.2 Cenrios
58
6.3 Gamestorming - Criando cenrio
60
6.4 Anlise de Tarefas
60
6.5 Fluxo de Tarefas
61
6.6 Sintetizando os Requisitos de Design
62
6.7 User stories
63
6.8 Escrevendo boas histrias
64
6.9 Gamestorming - Criando histrias com foco no usurio
64
6.10 Equilbrio entre cliente e usurio
65
6.11 Gamestorming - UX Canvas
67
6.12 Features
67
6.13 Gamestorming - Brainstorm de features com objetivos
68
6.14 Priorizando features
69
6.15 Gamestorming - Priorizando features com foco no usurio
70
7 Dos Requisitos ao Design
72
7.1 Estrutura Geral
72
7.2 Refinando o Design
74
7.3 8 steps
77
Caelum
Sumrio
7.4 Gamestorming - criando rabiscoframe e wireframe em time
8 Padres e Princpios do Design de Interao
77
79
8.1 As dez heursticas de Nielsen
79
8.2 Outros princpios para implementar interfaces eficazes
87
8.3 Padres de Design de Interao
89
8.4 Padres de Interao Comportamentais
91
8.5 Gamestorming - Colocando em prtica os heursticas de Nielsen
121
8.6 Prottipos
121
8.7 Gamestorming - Prototipagem em papel
123
9 Usabilidade em dispositivos mveis
125
9.1 Lei de Fitts
125
9.2 Lei de Hick
127
9.3 Thumb Zones
128
9.4 Enriquecendo seu produto com Microinteractions
130
9.5 Tipografia
134
9.6 Gamestorming - Criando 8 Steps com foco na usabilidade
140
10 Design Visual
141
10.1 O princpio C.R.A.P
141
10.2 Especificao do Design
146
10.3 Teoria das Cores
149
10.4 Facilitando essa escolha com o Adobe Color
149
11 Apndice - Testes de Usabilidade
152
11.1 O que medido?
152
11.2 Envolvidos
153
11.3 Preparao prvia
154
11.4 Gamestorming - Teste de usabilidade
158
Verso: 19.8.26
CAPTULO 1
EXPERINCIA DO USURIO
"Quando nada acontece, h um milagre que no estamos vendo." -- Joo Guimares Rosa
1.1 O QUE EXPERINCIA DO USURIO?

Experincia do Usurio (UX, de User Experience) um tema bastante subjetivo. difcil de maneira
objetiva e direta dizer como desenhar uma experincia do usurio, mas possvel aprendermos como
desenhar um produto, servio ou ambiente que proporcione uma experincia satisfatria para algum
que os use, identificando todos os aspectos da interao do usurio com esse produto (ou servio ou
ambiente).
EXPERINCIA DO USURIO Como uma pessoa se sente ao usar um produto. Ou mais formalmente, de
acordo com a definio dada pela ISO 9241-210, so as respostas e percepes de uma pessoa
resultantes do uso de um produto, sistema ou servio.
Como disciplina, uma palavra guarda-chuva que tem relao com os princpios de Design
Centrado no Usurio (UCD), Design de Interao (IxD) e Usabilidade, todos vistos ao longo dos
captulos. multidisciplinar, incorporando aspectos da psicologia, antropologia, cincia da computao,
design grfico, design industrial e cincia cognitiva.
Apesar da Experincia do Usurio estar presente tanto em produtos fsicos como virtuais, servios ou
ambientes, ser abordado um tipo especfico de produto: as aplicaes web.
Saber ingls muito importante em TI
O Galandra auxilia a prtica de ingls atravs de flash cards e spaced

repetition learning. Conhea e aproveite os preos especiais.
Pratique seu ingls no Galandra.
1 EXPERINCIA DO USURIO
1.2 ISO 9241-210

Em 2011, foi criada a ISO 9241-210. A srie 9241 aborda ergonomia e a interao homem-mquina e
a nova parte 210 o design centrado em pessoas em sistemas interativos, que define a experincia do
usurio como as respostas e percepes de uma pessoa resultantes do uso de um produto, sistema ou
servio.
Ela possui seis princpios chaves:
1. O projeto baseado no entendimento explcito de usurios, tarefas e ambientes.
2. Os usurios esto envolvidos em todo projeto e desenvolvimento.
3. O projeto conduzido e refinado por avaliaes centradas no usurio.
4. O processo iterativo.
5. O projeto aborda toda a experincia do usurio.
6. A equipe de design inclui competncias multidisciplinares e perspectivas.
1.3 A EVOLUO DA EXPERINCIA DO USURIO

O termo "Experincia do Usurio" foi cunhado pela primeira vez por Don Norman em meados de
1990. Segundo o prprio Norman comentou em uma entrevista:
"Eu inventei o termo porque achava que interface do usurio e usabilidade eram muito
restritos, eu queria cobrir todos os aspectos da experincia de uma pessoa com o
sistema, incluindo design industrial, grficos, a interface, a interao fsica
e o manual. Desde ento o termo tem se espalhado amplamente..."
Mas mesmo antes de serem batizados, os conceitos da Experincia do Usurio j vinham sendo
usados atravs do tempo.
Figura 1.1: Evoluo da exeperincia do usurio
1.2 ISO 9241-210
Utilidade
Uso do computador para facilitar operaes de rotina.
Usabilidade
Facilidade e eficincia no uso.
Rentabilidade
Anlise de aspectos de UX (visitantes, funil de vendas, comportamento do usurio) para aumentar a
lucratividade.
Estrategibilidade
Design da Experincia do Usurio influenciando a estratgia do negcio.
1.4 PARA SABER MAIS: O CASO CLEARRX

ClearRX um sistema de embalagem para quem usa medicamentos com receita, que torna mais fcil
as pessoas saberem como tomar seus remdios. Ele um exemplo de como UX pode influenciar toda
uma estratgia de negcio.
A motivao que levou a estudante de design Deborah Adler a fazer esse sistema como sua tese de
mestrado foi sua av ter tomado o remdio de seu av por engano.
Figura 1.2: ClearRX
Suas caractersticas:
contm a prescrio e posologia no frasco para que no haja enganos;
o nome do medicamento est escrito no s na face lateral como no topo;
na outra das faces h importantes informaes pessoais e relativas ao medicamento;
tem faces planas para que a informao seja lida com mais facilidade;
se, mesmo assim, ainda for difcil perceber o que est escrito, o frasco vem com um "cartolupa" para ler o texto;
existem anis de diferentes cores para que, no caso de existir mais que um frasco em casa, se
possa diferenciar que frasco pertence a quem;
o frasco para lquidos est adaptado entrada de seringas orais para uma medio mais fcil.
Depois de concluir sua tese, Deborah levou a idia a Target e juntos criaram um sistema completo.
Veja mais em http://www.adaptivepath.com/ideas/essays/archives/000812.php
Seus livros de tecnologia parecem do sculo passado?
Conhea a Casa do Cdigo, uma nova editora, com autores de destaque no

mercado, foco em ebooks (PDF, epub, mobi), preos imbatveis e assuntos atuais.
Com a curadoria da Caelum e excelentes autores, uma abordagem diferente
para livros de tecnologia no Brasil.
Casa do Cdigo, Livros de Tecnologia.
1.5 ELEMENTOS DA EXPERINCIA DO USURIO

O processo de design de experincia do usurio procura garantir que nenhum aspecto de experincia
do usurio com o produto acontea sem a sua inteno consciente, explcita.
Uma maneira de atacar esta complexidade quebrar o trabalho de elaborao da experincia do
usurio em elementos que a compem, facilitando o entendimento da tarefa como um todo.
A experincia do usurio acaba sendo resultado de um conjunto de decises tomadas na criao de
um produto, sistema ou servio: como vai se aparecer, como vai se comportar, o que pode ser feito, e por
a vai. Dividir essas decises em camadas ajuda a compreender como essas decises so feitas.
1.6 PLANOS DA EXPERINCIA DO USURIO

Jesse James Garret, em seu livro Elements of User Experience prope cinco planos que facilitam a
compreenso das decises feitas em cada um deles. Cada deciso de um plano superior depende do
inferior. Esses planos so: estratgico, escopo, estrutura, esqueleto e superfcie. O primeiro mais
abstrato at chegar ao ltimo, mais concreto.
Problema de comunicao
O problema ainda era o de nomenclatura, porque parte da comunidade em Experincia do Usurio
tratava os problemas como de Design de Aplicao com solues tradicionais (transao, segurana,
escalabilidade, etc). A outra parte via a web como meio de distribuio e captura de informao,
aplicando solues do meio de publicaes, mdia e cincia da informao (marqueteiros).
Soluo: dois contextos

Para resolver essa dualidade Garret dividiu cada plano em dois contextos: a web como
1.5 ELEMENTOS DA EXPERINCIA DO USURIO
funcionalidade (interface de software) e a web como meio de informao (sistema de hipertexto). Para
cada contexto, um elemento se destaca.
Figura 1.3: Diagrama de UX
A responsabilidade de todos
Esse diagrama apresenta os elementos organizados em planos, do mais abstrato ao mais concreto, e
nos faz perceber como todas as reas de uma empresa tm grande responsabilidade no processo de
desenvolvimento da experincia do usurio, j que o que vai ser desenvolvido pelos planos mais
concretos baseado e influenciado pelo que foi definido nos mais abstratos.
Time de Experincia do Usurio multidisciplinar

Por esse motivo, algumas empresas que criaram um time de Experincia do Usurio o fizeram de
maneira multidisciplinar, envolvendo diversos tipos de competncias, indo de psiclogos a engenheiros
de softwares, passando por analistas de especificao e designers.
Vejamos cada um dos planos a seguir.
Estratgia
Pergunta: por que estamos fazendo este produto?
A estratgia alinha as necessidades dos usurios com os objetivos do negcio. Necessidade dos
usurios so os objetivos para sua aplicao que vem de fora da organizao.
Deve-se entender o que sua audincia quer e como isso casa com outros objetivos do negcio que
6
existem. Um web site falha no por questes tecnolgicas ou de experincia do Usurio, mas por no
responder a duas perguntas:
O que queremos do produto?
O que os usurios querem dele?
O segredo aqui tornar tudo explcito. Para entender o que o usurio deseja, pesquisas so
necessrias.
Escopo
Pergunta: o que faremos?
Marca o incio da diviso entre a Web como interface de software e a Web como sistema de
hipertexto. Pelo contexto de interfaces de software, a estratgia do plano anterior traduzida em escopo
atravs dos requisitos funcionais. Pelo de sistema de hipertexto, o escopo toma a forma de requisitos de
contedo (descrio dos vrios elementos de contedo que sero necessrios).
Estrutura
Pergunta: como funcionalidades e dados se encaixam?
Define como os requisitos e funcionalidades da aplicao se encaixam. O Escopo ganha estrutura, no
contexto de interfaces de software, atravs do Design de Interao, onde definido como o sistema se
comporta em resposta s aes do usurio. Do lado de sistema de hipertexto, a estrutura formada pela
Arquitetura da Informao, que organiza os elementos de contedo.
Esqueleto
Pergunta: como apresentar os elementos da interface na tela?
a forma mais concreta da Estrutura. Ele define o lugar de cada elemento de interface em uma tela,
otimizando a disposio desses elementos para maximizar a eficincia no seu uso.
No contexto de interface de software, o Design de Interface organiza os elementos da interface para
permitir que o usurio interaja com as funcionalidades do sistema. Define o mundo dos botes, campos
e outros componentes da interface. Ele fornece aos usurios a habilidade de fazer coisas.
No contexto de sistema de hipertexto, o Design da Navegao determina o conjunto de elementos de
tela que permite que o usurio se mova atravs da arquitetura da informao.
Em ambos os contextos, o Design de Informao responsvel pela apresentao a informao para
uma comunicao efetiva.
Superfcie
Nela voc v uma sria de pginas ou telas feitas de imagens e textos. o Esqueleto j aplicado o look
and feel do produto final.
CAPTULO 2
DESIGN DE INTERAO
"A maior parte das pessoas to feliz quanto resolve ser" -- Abraham Lincoln
Design de Interao e Arquitetura de Informao compartilham o plano de Estrutura e do nfase na
definio de padres e sequncias para as opes que sero apresentadas ao usurio. O plano de
Estrutura o limiar no desenvolvimento do produto entre as questes mais abstratas e mais concretas.
Design de Interao se preocupa com as opes necessrias para que o usurio realize e complete
tarefas. Arquitetura da Informao, por sua vez, trata com as opes envolvidas em expor as informaes
para o usurio.
DESIGN DE INTERAO Desenvolvimento de fluxos de aplicao para facilitar as tarefas do usurio,

definindo como esse interage com as funcionalidades do sistema.
Disciplina com identidade prpria

Mas foi recentemente que o Design de Interao tornou-se uma disciplina isolada. Durante muito
tempo, ela era considerada como parte do Design de Interface.
O Design de Interface define o mundo dos botes, campos e outros componentes da interface. Ele
fornece aos usurios a habilidade de fazer coisas. J o Design de Navegao uma especializao do
design de interface responsvel por apresentar espaos de informao. Ele fornece aos usurios a
possibilidade de ir a lugares. E permeando ambos os contextos (interface de software e sistema de
hipertexto) temos o Design de Informao, que responsvel por apresentar a informao para uma
comunicao efetiva. Ele comunica idias aos usurios.
Tanto o Design de Interface, de Navegao e de Informao j fazem parte do plano mais concreto, o
Esqueleto, mas tratam de questes muito interligadas ao Design de Interao ou Arquitetura de
Informao.
Holstica
Em se tratando de contexto, dificilmente uma aplicao ser apenas uma interface de software ou
apenas um sistema de hipertexto, e por isso todos esses elementos devem ser considerados como uma
2 DESIGN DE INTERAO
unidade no desenvolvimento de um produto, no devendo ser tratados isoladamente.
Figura 2.1: Exemplo de Holstica
Responsabilidades
De qualquer maneira, cada uma dessas disciplinas no necessariamente exercida por um nico
papel. O atual Designer de Interao costuma - e altamente recomendado - ter as habilidades
necessrias para fazer o design de interao, de interface, a arquitetura de informao, o design de
navegao e de informao.
Essas mltiplas habilidades, incluindo at o design visual, o que diferencia um bom designer de
interao de um excelente designer de interao!
Considerando isso, podemos ter como entregveis de um trabalho de design de interao:
Avaliao de usabilidade
Fluxos e mapas de navegao
Casos de uso e/ou cenrios
Personas
Mapas do site e inventrio de contedo
Wireframes
Protottipos (de baixa ou alta fidelidade, para provas de conceito ou testes de usabilidade)
Especificaes escritas (que descrevem o comportamento ou design)
10
2 DESIGN DE INTERAO
Layouts visuais (do resultado final esperado)
2.1 QUATRO ABORDAGENS PARA DESIGN DE INTERAO

No momento que o designer se depara com um problema para solucionar, ele pode se apoiar em
quatro abordagens principais para encontrar uma melhor soluo. Todas essas abordagens tem seus
mritos na criao de produtos de sucesso e depende do designer decidir aquela que melhor funciona
sua forma de trabalho, ao projeto que est em desenvolvimento e a cultura de sua empresa. Grandes
designers so aqueles que podem trabalhar com todas essas abordagens, aplicando a melhor para a
situao especfica que est lidando. E mais, conseguir aplicar mltiplas abordagens dentro de um nico
projeto.
As quatro abordagens so:
Design Centrado no Usurio
Design Centrado em Atividades
Design de Sistemas
Design de Gnios
A tabela abaixo fornece uma rpida comparao entre cada uma das quatro abordagens:
Figura 2.2: Tabela abordagens de Design
Design Direcionado a Objetivos

Uma quinta abordagem, que pode ser considerada como uma derivao do Design centrado no
2.1 QUATRO ABORDAGENS PARA DESIGN DE INTERAO
11
Usurio, o Design direcionado a Objetivos, metodologia criada por Alan Cooper para o
desenvolvimento de produtos.
O Design Centrado no Usurio nos servir de guia a partir de agora. Vejamos mais detalhadamente
esta metodologia a seguir.
PARA SABER MAIS Livro: Designing for Interaction Creating Smart Applications and Clever Devices
De Dan Saffer http://www.designingforinteraction.com/ Livro: About Face 3 The Essentials for
Interaction Design De Alan Cooper, Robert Reimann e David Cronin
http://www.cooper.com/about
Agora a melhor hora de respirar mais tecnologia!
Se voc est gostando dessa apostila, certamente vai aproveitar os cursos

online que lanamos na plataforma Alura. Voc estuda a qualquer momento
com a qualidade Caelum. Programao, Mobile, Design, Infra, Front-End e
Business! Ex-aluno da Caelum tem 15% de desconto, siga o link!
Conhea a Alura Cursos Online.
2.2 DESIGN CENTRADO NO USURIO

A filosofia por trs do design centrado no usurio simples: os usurios sabem melhor. As pessoas
que utilizaro o produto ou servio sabem quais so suas necessidades, objetivos, preferncias, e cabe ao
designer encontrar todas essas coisas para eles.
Este tipo de design destaca-se em afastar o design de suas prprias preferncias e focando-o nas
necessidades e objetivos dos usurios.
Seu conceito j existe h um bom tempo com razes no design industrial, ergonomia e na crena de
que os designers deveriam tentar encaixar seus produtos as pessoas e no o contrrio.
Contexto histrico
Enquanto os designers industriais lembram desse legado, engenheiro de softwares eram cegos para
ele, criando aplicaes voltadas para como o computador trabalhava e no como as pessoas trabalhavam.
12
Isso era em parte devido s limitaes das mquinas no passado.

Com a melhoria das mquinas por volta de 1980, designers e cientistas trabalhando na rea de
interao homem-mquina comearam a questionar a prtica de deixar engenheiros elaborarem a
interface para computadores. Novos tipos de interface j eram possveis e um movimento de design de
software centrado nos usurios comeou.
Objetivos so importantes
Objetivos so realmente importantes no DCU: o designer foca no que o usurio quer realizar. Ento,
o designer determina quais sero as tarefas e os meios necessrios para se atingir esse objetivo, mas
sempre com as preferncias do usurio em mente.
13
CAPTULO 3
TIME E PROJETO
Uma das melhores definio de time esta no

(http://www.manifestoagil.com.br/), uma das primeiras linhas diz:
manifesto
gil
de
software
Indivduos e interao entre eles mais que processos e ferramentas

Dentro dos 12 princpios do software gil (http://agilemanifesto.org/iso/ptbr/principles.html) tm
pontos importantes sobre time:
Pessoas de negcio e desenvolvedores devem trabalhar diariamente em conjunto por todo o projeto.
Construa projetos em torno de indivduos motivados. D a eles o ambiente e o suporte necessrio e
confie neles para fazer o trabalho.
O mtodo mais eficiente e eficaz de transmitir informaes para e entre uma equipe de
desenvolvimento atravs de conversa face a face.
Simplicidade, a arte de maximizar a quantidade de trabalho no realizado, essencial.
As melhores arquiteturas, requisitos e designs emergem de equipes auto-organizveis.
Em intervalos regulares, a equipe reflete sobre como se tornar mais eficaz e ento refina e ajusta seu
comportamento de acordo.
3.1 GAMESTORMING - MONTAR TIME HETEROGNEO

Objetivo
Montar times heterogneos para melhorar as dinmicas que vamos desenvolver durante o curso.
Ambiente
1. Um papel de post-it por aluno da dinmica;
2. Uma caneta por aluno.
Regras
1. Durao de 15 minutos;
14
3 TIME E PROJETO
2. Mnimo de 4 integrantes por time e mximo de 5.
Passo a passo
Trinta segundos para cada aluno escrever no post-it:
Nome;
Profisso e/ou formao;
Maior lazer.
Exemplo de como deve ficar o post-it:
Figura 3.1: Imagem de como deve ficar o post-it
Os alunos levantam com o objetivo de montar o time de no mnimo 4 integrantes, conversando

entre eles.

3.1 GAMESTORMING - MONTAR TIME HETEROGNEO
15
3.2 KANBAN
Sempre associado com o famoso Kanban de colunas (To Do, Doing, Done) que times geis de
desenvolvimento de software utilizam pra gerenciar as tarefas que vo executar em um tempo
previamente determinado.
Figura 3.2: Kanban de colunas
Esse um tipo de Kanban, mas no o significado da palavra.
O que significa Kanban?

Kanban uma palavra de origem japonesa que significa "carto visual" ou "sinalizao visual". Ou
seja, Kanban qualquer elemento de comunicao que passe uma ou mais informaes de forma rpida
e objetiva. correto dizer que placas de trnsito so kanbans.
16
3.2 KANBAN
"Se o time no pergunta como funciona o Kanban e no est utilizando. Pense no que erramos e
jogue o Kanban fora."
A Toyota a empresa que popularizou a forma como aplicamos kanban em Agile e UX. Dentro da
Toyota o Kanban utilizado como Kanban de Produo e Kanban de Movimentao sendo uma
ferramenta pra aplicar o sistema de produo Just in Time (JIT) sem a necessidade de formulrios
longos e burocrticos.
O que o sistema de produo Just in Time?

um sistema de produo focado em diminuir o desperdcio. S se compra a matria prima e
fabrica-se o produto aps a sua venda. Tambm conhecido como produo sob demanda.
"Se o time pergunta como funciona o Kanban e est utilizando. Acabamos de fazer um bom
trabalho."
3.3 OS KANBANS DE UX
Os mtodos geis ajudaram o Kanban a se popularizar dentro de UX. Hoje temos times criando seu
prprios kanbans focados em solucionar dvidas de UX.
17
UX Canvas
Tem como objetivo criar artefatos com base nas informaes levantadas com stakeholders, usurios,
cliente e suas limitaes e recursos. Veremos ele em detalhes nos prximos captulos.
Figura 3.4: UX Canvas
"Se o time no perguntou como funciona o kanban e est utilizando de forma diferente do que
pensamos. Fizemos um bom trabalho sem querer. S aceitar."
360 View
Apresentado por Nelson Vasconcelos no Design Sprint Methods, esse kanban responde: duas
dvidas de negcios, vendas e marketing; duas dvidas de design e pesquisa; duas dvidas de tecnologia.
Sendo elas:
Negcios, Vendas e Marketing
Quais so os objetivos de negcios?

O que lucrativo?
Design e Pesquisa
O que as pessoas precisam?

O que til e agradvel?
Tecnologia
18
O que possvel?
Que funcionalidades podem ser construidas agora ou mais pra frente?
Figura 3.5: 360 view
"Se o time no pergunta como funciona o Kanban e est utilizando. Acabamos de fazer um timo
trabalho."
3.4 GAMESTORMING - DEFINIR PROJETO MOBILE

Objetivo
Cada time definir o seu projeto mobile para desenvolver durante o curso.
Ambiente
1. Muitos post-its;
2. Uma caneta por aluno;
3. Cartolina;
4. Caneto;
5. Fita crepe.
Regras
1. 05 minutos para levantamento de problemas;
2. 15 minutos para definir qual problema o time quer resolver;
3.4 GAMESTORMING - DEFINIR PROJETO MOBILE
19
3. Cada integrante fala por 2 minutos;

4. Projeto tem que ser mobile;
5. Projeto no pode ser focado apenas para o pblico feminino ou para o pblico masculino.
Passo a passo
Colar na parede um pedao de cartolina escrito Problema. Em post-its, cada integrante do time
escreve problemas que gostaria de resolver com um projeto mobile e cola abaixo da cartolina. (05
minutos) Obs. Um problema por post-it.
Com todos os integrantes de cada time em frente a parede que esto os post-its, para definir qual
projeto o time vai realizar durante o curso.

3.5 O TRINGULO DE OURO

A incluso consciente de design levou a ascenso da trade moderna identificada por Larry Keely
composta por desejabilidade, viabilidade e capacidade tambm chamada de tringulo de ouro. Se
algum ponto da trade for fraco em um produto, provavelmente ele fracassar com o tempo.
20
Figura 3.6: Tringulo de ouro de Keeley
Time "core" para desenvolvimento do produto

Para cuidar de cada um desses processos, precisamos de trs competncias:
Designer: responsvel pela desejabilidade.
Gerente de produto: responsvel pela viabilidade.
Desenvolvedor: responsvel pela capacidade.
Esse trio considerado o "core" para o desenvolvimento do produto e devem estar bem alinhados na
fase de descoberta do produto.
Vejamos cada um desses processos:
Viabilidade - o que sustentar o negcio?

O Gerente de Produto tem duas responsabilidades principais: avaliar as oportunidades do produto e
definir o produto que ser construdo. Depois de avaliado e decidido que vale a pena desenvolver o
produto, ele inicia a fase de descobrir exatamente como o produto deve ser (junto com o time core
mencionado acima), incluindo as funcionalidades necessrias, a experincia do usurio e os critrios
para o lanamento.
Tambm est em suas mos determinar o modelo de negcio que dever ser seguido, interagindo
com praticamente todas as outras reas da empresa para definir questes jurdicas, contbeis,
financeiras, de marketing, de distribuio, etc.
Desejabilidade - o que as pessoas precisam?

21
Aqui entra a Experincia do Usurio. H vrios papis em um time de UX, mas o que trabalha em
maior colaborao com o Gerente de Produto o Designer de Interao. Ele responsvel por buscar
um profundo entendimento dos usurios, descobrir suas motivaes, comportamentos e habilidades;
ajudar na definio dos requisitos e, assim, desenhar uma interface que torne a interao do usurio com
o produto a mais simples e eficiente possvel e que, alm disso, atenda aos objetivos do negcio.
Capacidade - o que podemos construir?

O Engenheiro ou Desenvolvedor de Software o responsvel por efetivamente construir o produto.
importante seu papel na fase de descoberta do produto para dizer ao gerente e ao designer de interao
o que possvel ser feito, avaliar o custo das diferentes idias propostas e ajudar a identificar as melhores
solues. sua responsabilidade definir a tecnologia e arquitetura mais apropriada para desenvolver um
produto de qualidade.
Iniciando o desenvolvimento do produto

Ao iniciar o desenvolvimento de um produto, devemos comear perguntando "O que as pessoas
desejam?". Com essa resposta, se pergunte "Das coisas que as pessoas desejam, o que sustentar o
negcio?" e, por ltimo, "Das coisas que as pessoas desejam e que sustentar o negcio, o que pode ser
construdo?".
3.6 GAMESTORMING - TRINGULO DE OURO

Objetivo
Indentificar pontos positivos e negativos do projeto separado em:
Desejabilidade;
Viabilidade;
Capacidade.
Ambiente
1. Flip-chart;
2. Caneto;
3. Muitos post-its;
4. Uma canetinha por integrante.
Regras
1. 2 minutos para desenhar o tringulo de ouro;
2. 15 minutos para time definir pontos positivos e negativos.
22
3.6 GAMESTORMING - TRINGULO DE OURO
Passo a passo
1. Desenhar tringulo de ouro na cartolina;
2. Escrever pontos positivos e negativos de desejabilidade e colocar no tringulo de ouro;
3. Escrever pontos positivos e negativos de viabilidade e colocar no tringulo de ouro;
4. Escrever pontos positivos e negativos de capacidade e colocar no tringulo de ouro;
5. Verifique se possvel resolver os pontos negativos de qualquer lado do tringulo (desejabilidade,
viabilidade e capacidade). Achando uma soluo, anote em um post-it e cole prximo ao ponto
negativo.
3.7 GAMESTORMING - 360 VIEW

Objetivo
Identificar pontos positivos e negativos do projeto separados em:
PM & Marketing, Vendas e Estratgia de Produto;
Experincia do Usurio;
Engenharia.
Ambiente
1. Cartolina;
2. Caneto;
3. Muitos post-its;
4. Uma canetinha por integrante.
Regras
1. 2 minutos para desenhar o tringulo de ouro;
2. 15 minutos para time definir pontos positivos e negativos.
Passo a passo
1. Desenhar 360 View na cartolina;
2. Escrever pontos positivos e negativos de PM & Marketing, Vendas e Estratgia de Produto e colocar
no 360 View;
3. Escrever pontos positivos e negativos de Experincia do Usurio e colocar no 360 View;
23
4. Escrever pontos positivos e negativos de engenharia e colocar no tringulo de ouro;

5. Verifique se possvel resolver os pontos negativos de qualquer crculo (negcio, UX e engenharia).
Achando uma soluo, anote em um post-it e cole prximo ao ponto negativo.
Editora Casa do Cdigo com livros de uma forma diferente
Editoras tradicionais pouco ligam para ebooks e novas tecnologias. No dominam

tecnicamente o assunto para revisar os livros a fundo. No tm anos de
experincia em didticas com cursos.
Conhea a Casa do Cdigo, uma editora diferente, com curadoria da Caelum e
obsesso por livros de qualidade a preos justos.
Casa do Cdigo, ebook com preo de ebook.
24
CAPTULO 4
PESQUISA
"A inteligncia til para tudo, mas no suficiente para nada" -- Henri-Frederic Amiel
Uma das etapas do desenvolvimento de um produto, principalmente na fase de descoberta, a
Pesquisa de Design.
Pesquisa de Design
o ato de investigar, atravs de vrias fontes, o potencial de um produto ou servio, seus usurios e
ambientes existentes.
Mtodos
Os mtodos utilizados podem ser quantitativos ou qualitativos, exploratrios ou avaliativos, como ou
sem a participao do usurio, variando de observaes e entrevistas contextuais, aplicao de
questionrios (online ou pessoalmente), grupo de foco e etnografia a leitura sobre temas relacionados ao
domnio do negcio, anlise competitiva, anlise heurstica, card sorting e testes de usabilidade com
prottipos ou produtos j existentes (seu ou dos concorrentes).
Os exploratrios normalmente so usados no incio de um projeto, na fase de concepo do produto,
para entender as reais necessidades do usurio e do negcio e projetar interfaces mais adequadas ao seu
uso.
Os avaliativos so usados para analisar a qualidade da interface e interao de um produto, podendo
ser de produtos j existentes ou em desenvolvimento.
Benefcios da pesquisa
Pesquisas, principalmente as qualitativas, ajudam-nos a entender:
Comportamentos, atitudes e aptides de potenciais usurios do produto;
O domnio do produto que ser desenvolvido - contexto tcnico, de negcio e ambientais;
Vocabulrio e outros aspectos do domnio em questo;
Como os produtos j existentes so usados;
4 PESQUISA
25
Limites e restries;
Qual o problema que teremos que resolver.
Plano estratgico
Se tudo comea do plano mais abstrato, o plano estratgico, algumas perguntas devem ser
respondidas no que diz respeito aos objetivos do site a as necessidades do usurio.
4.1 ONDE BUSCAR INFORMAES?

H vrias fontes para obtermos informaes nas pesquisas:
Entrevista com stakeholders, que podem ser os executivos da empresa, pessoas da rea de
negcios, de marketing e desenvolvedores;
Entrevista com especialistas no domnio do produto (SME - Subject Matter Expert) so
normalmente teis em domnios muito complexos e especializados;
Entrevista com clientes. Clientes nem sempre o mesmo que usurio. Por exemplo, em um
produto de CRM, o usurio pode ser os gerentes de conta de uma empresa enquanto o cliente
o Diretor Comercial ou de Marketing;
Entrevista com usurios.
E alm de entrevistas, h vrios outros mtodos que abordaremos em um prximo tpico.
Muitos dados j so obtidos dessas entrevistas citadas acima e importante saber quais tipos de
informao deve-se obter de cada uma delas.
O que conseguimos obter dos stakeholders:
Viso preliminar do produto: Cada stakeholder tem sua prpria viso do produto, mesmo que
apenas ligeiramente diferente dos demais. Nessas entrevistas o designer deve ento alinhar essas
vises, inclusive com as dos usurios e clientes;
Oramento e cronograma: O que sair desse tpico permitir saber o escopo de esforo do design
e servir como subsdio para que o gerente decida o quanto investir em pesquisa de usurio;
Limitaes tcnicas: Entender claramente o que vivel de fazer dado o oramento, prazo e
limitaes tcnicas;
Objetivos e direcionamentos do negcio: importante que o designer entenda quais so os
objetivos do negcio, para saber levantar pontos de deciso quando a pesquisa com o usurio
indicar conflitos entre as necessidades do negcio e dos usurios;
Percepo dos stakeholders sobre o usurio: Os stakeholders que mantm algum tipo de
relacionamento com usurios tm suas prprias percepes sobre eles e essas servem de insights
para a entrevista com o usurio.
26
4.1 ONDE BUSCAR INFORMAES?
Stakeholders
Stakeholders (partes interessadas) so pessoas que tm uma participao no produto. Eles podem
incluir pessoal de marketing, pessoal de desenvolvimento e representantes de servio ao cliente.
O que conseguimos obter dos clientes:

Seus objetivos em comprar o produto;
Suas frustraes com as solues atuais;
Processo de deciso usado para comprar um produto do tipo que voc est desenhando;
Regras para instalao, manuteno e gerenciamento do produto.
O que conseguimos obter dos usurios:
Problemas e frustraes com a soluo atual;
Conhecimento do negcio, o que eles precisam saber para realizar seu trabalho;
Contexto geral de suas atividades e no apenas focado ao produto;
Entendimento das tarefas atuais, tanto aquelas que eles realizam na soluo atual como as que
essa soluo no suporta;
Entendimento claro de seus objetivos e motivaes para usar o produto.

4.2 MTODOS E PROPSITOS

Pesquisa no tem como foco um ou outro mtodo. Pesquisas so, sobretudo, questionamentos e
respostas. Os mtodos so apenas os meios utilizados para obter essas respostas. Ou seja, no existe um
mtodo que deve sempre ser aplicado. Diferentes mtodos tm diferentes propsitos e, em algumas
4.2 MTODOS E PROPSITOS
27
situaes, mais de um mtodo pode ser usado em uma pesquisa de design.

Abaixo esto alguns mtodos e quando mais indicado o seu uso:
Figura 4.1: Tabela de metodos e propositos
Para saber mais

WHEN TO USE WHICH USER EXPERIENCE RESEARCH METHODS - Artigo da newsletter Arletbox de Jakob
Nielsen http://www.useit.com/alertbox/user-research-methods.html
4.3 ENTREVISTAS
A entrevista permite onhecer as caractersticas de pessoas, suas preferncias, opinies e necessidades,
permitindo que o entrevistado exprima suas ideias e fornece um contexto. Para que haja rapport entre
ambos, o entrevistador deve ser emptico.
28
4.3 ENTREVISTAS
RAPPORT Rapport a capacidade de entrar no mundo de algum, faz-lo sentir que voc o entende e
que vocs tm um forte lao em comum. a capacidade de ir totalmente do seu mapa do mundo
para o mapa do mundo dele. a essncia da comunicao bem-sucedida.
Simpatia X Empatia
A simpatia, por definio, a compreenso do outro com base em nossa experincia, o que pode
levar a uma falsa compreenso. Por exemplo: A pessoa A se divorciou e para ela foi o fim do mundo,
mas para a pessoa B o divrcio foi libertao.
Calcar-se na experincia pessoal para compreender o outro pode levar a um falsa compreenso.
Cognitivamente a simpatia facilmente empreendida pelo crebro, pois ele s repete um padro,
gastando assim, menos energia. O crebro tem como padro conservar energia.
A empatia j diferente: compreendemos o outro tentando nos colocar em seu lugar, olhando com
seus olhos. Cognitivamente mais difcil, mas no impossvel. H um gasto considervel de energia,
alm disso, o entrevistador deve estar atento no apenas ao que o entrevistado fala, mas ao seu
comportamento e emoes.
Por fim, na empatia, s saberemos se compreendemos corretamente o outro se tivermos o feedback
dele, sendo assim, verificar constantemente com o outro se estamos no caminho certo fundamental.
Designer de Interao Vs Pesquisas

Os designers de interao no so exigidos que faam pesquisas. Muitas vezes eles usam sua intuio,
conhecimento e experincia para desenvolver produtos com uma boa experincia para o usurio.
Em projetos menores, mais simples ou com prazos e oramentos bem limitados, essa uma
abordagem bastante adotada. Contudo, para projetos maiores e mais complexos, onde o domnio do
negcio, cultura ou rea de atuao desconhecida pelo designer, no fazer pesquisa alguma pode ser
um grande risco.
Designers normalmente trabalham em projetos fora de sua rea de atuao (design!) e a nica
maneira de compreender o contexto onde o produto ser inserido realizando pesquisas.
4.4 CARD SORTING

As pessoas organizam as coisas de maneira muito pessoal, sendo assim, a ideia do Card Sorting
explorar diversas formas de categorizar itens e determinar aquela que funciona melhor com o seu
projeto. Muitas vezes ele utilizado para melhorar a organizao atual que no funciona.
4.4 CARD SORTING
29
Geralmente esta tcnica vem resolver problemas de Arquitetura de Informao no que diz respeito
navegao. Outro emprego validar ideias de como o contedo deve ser organizado: uma ferramenta
que nos ajuda a entender as pessoas para quem estamos projetando.
Figura 4.2: Card sorting
Como funciona
Voc solicita s pessoas que classifiquem os cartes em pilhas de acordo com o que h de semelhante
e descrevam os grupos os quais fazem parte (Card Sorting aberto). Ou voc pode dar s pessoas um
conjunto de cartas de contedo alm de um conjunto de categorias e pedir-lhes para classificar os
cartes nas categorias pr-determinadas (Card Sorting fechado). O resultado aplicado ao projeto.
Benefcios
Voc aprende muito sobre como as pessoas pensam sobre categorias e conceitos, como descrev-los,
e as informaes que pertence a uma categoria. Isto extremamente til quando voc quer organizar as
informaes de uma forma para que outras pessoas possam encontr-las. Inclusive, ele pode demonstrar
que o usurio sequer sabe o que determinada categoria significa.
Etapas do Card Sorting

Os principais passos so os seguintes:
30
4.4 CARD SORTING
Decida o que voc quer aprender.

Selecione o mtodo (aberto ou fechado)
Escolha o contedo
Escolha e convide os participantes.
Inicie o card sorting e registre os dados
Analise os resultados.
Aplique o resultado em seu projeto.
Consenso
Card sorting ajuda o time a entrar num consenso, j que cada integrante pode ser uma viso
diferente de como a informao deve ser apresentada.
Ferramentas
Existem diversas ferramentas no mercado que permitem o levantamento de informaes sobre os
usurios que acessa o seu website. Algumas delas:
Crazy Egg
Google Analytics
Kiss Metrics
Hotjar

4.5 RECRUTAMENTO
Quando pensamos em recrutamento para testes e pesquisas, contratar uma empresa especializada
4.5 RECRUTAMENTO
31
sempre o caminho mais fcil e rpido. Infelizmente, normalmente tambm o mais caro e nem sempre
seu projeto tem oramento disponvel para isso.
Se voc mesmo tem que recrutar pessoas para suas pesquisas e testes, tenha em mente as seguintes
dicas:
muito importante ter claro o perfil de usurio que voc quer pesquisar (mesmo quando
terceirizamos o recrutamento, essa informao precisa ser passada para a empresa de
recrutamento para que eles consigam os candidatos certos);
Clientes - existentes ou em potencial - so sempre candidatos a participarem de pesquisas;
Mantenha uma lista de pessoas interessadas em participar de testes e pesquisas. Voc pode
fazer isso convidando interessados atravs de um questionrio de recrutamento colocado no
site ou blog de sua empresa, atravs de convites em ferramentas de mdias scias ou buscando
interessados em eventos que sua empresa promova;
Os melhores candidatos a pesquisas so aqueles que tm algum tipo de motivao em fazer a
pesquisa e que tenha uma boa habilidade de comunicao;
Mesmo com uma listagem de interessados, para cada pesquisa existe um perfil de usurio
desejado. Antes de efetivamente fazer o convite para participar da pesquisa, certifique-se de
que as pessoas que voc est contatando se encaixam nesse perfil;
Crie um questionrio com perguntas que lhe permitam fazer essa classificao (screening);
Essa classificao pode ser feita atravs de um contato por telefone, e-mail ou at questionrio
online;
Sempre entre em contato com muito mais candidatos que o nmero que voc pretende
pesquisar. So vrios os motivos que fazem um candidato, mesmo que interessado na pesquisa,
no poder participar;
E alm disso, sempre espere uma grande taxa de no comparecimento, mesmo quando um
candidato confirma a presena;
Existe vrios meios de incentivar a participao: dar uma ajuda de custo, pagar estacionamento
ou providenciar o transporte do participante; fornecer descontos na compra dos produtos de
sua empresa (ou gratuidade de alguns meses para produtos com pagamento recorrente);
brindes; deixar o ambiente da pesquisa agradvel, com lanches, refrigerantes, cafs; etc.
Mesmo assim, o recrutamento pode ser uma tarefa rdua. Em ltimo caso, use seus companheiros de
trabalho que no estejam to envolvidos no projeto, amigos, familiares...
32
4.5 RECRUTAMENTO
Dica de livro
RECRUITING WITHOUT FEAR - How to Find First-Rate Participants for Design Studies
de
Will
Schroeder,
David
Brittan
Jared
M.
Spool
http://dev.uie.com/reports/recruiting_without_fear
4.6 DESTILANDO A PESQUISA

Depois de realizar uma pesquisa, as informaes e dados obtidos (seja em notas, imagens, gravaes
ou simplesmente na cabea do designer) sero completamente inteis se no forem estruturados e
organizados de uma forma que faa sentido e possa ser usado no desenho da aplicao. O designer deve
dar uma forma e significado a essas informaes.
As formas para organiz-las podem ser inmeras e cada um tem uma que para ele melhor funcione:
pode ser atravs de planilhas, tabelas, postits grudados em um quadro branco, etc. E a idia juntar essas
informaes em grupos que tenham ligao e que dem algum significado aos dados obtidos.
4.7 GAMESTORMING - ENTREVISTA, TIRANDO DVIDAS COM O

USURIO
Objetivo
Solucionar dvidas sobre o projeto com o usurio para desenvolver a persona primria.
Ambiente
1. Folhas A4 de rascunho;
2. Uma folha por aluno para pergunta;
3. Uma folha por aluno para resposta;
4. Uma caneta por aluno.
Regras
1. 25 minutos para realizar a dinmica;
2. Entrevista deve durar no mximo 2 minutos.
Passo a passo
1. Time define os objetivos para entrevista;
4.6 DESTILANDO A PESQUISA
33
2. Time define cortes de recrutamento;

3. Com base nos objetivos o time cria o roteiro para entrevista;
4. Cada integrante realiza uma entrevista com um integrante de outro time.
Quando for realizar a entrevista (passo 4) no podemos nos esquecer de:
Explicar o projeto;
Ter empatia pelo entrevistado (empatia diferente de simpatia);
Caso o entrevistado no entre no corte, explique o motivo do fim da entrevista;
Sempre agradea o entrevistado.
J conhece os cursos online Alura?
A Alura oferece centenas de cursos online em sua plataforma exclusiva de

ensino que favorece o aprendizado com a qualidade reconhecida da Caelum.
Voc pode escolher um curso nas reas de Programao, Front-end, Mobile,
Design & UX, Infra e Business, com um plano que d acesso a todos os cursos. Ex aluno da
Caelum tem 15% de desconto neste link!
Conhea os cursos online Alura.
34
4.7 GAMESTORMING - ENTREVISTA, TIRANDO DVIDAS COM O USURIO
CAPTULO 5
PERSONAS
"poca difcil a nossa na qual mais difcil se quebrar um preconceito do que um tomo" -- Albert Einstein
Coletar todos os tipos de dados sobre seus usurios pode ser extremamente valioso, mas s vezes
voc pode perder de vista as pessoas reais por trs de todas as estatsticas. Voc pode tornar seus usurios
mais reais, transformando-os em personas.
Personas so modelos descritivos de usurios criados de dados de pesquisas que nos fornecem
uma forma de entender como os usurios se comportam, como eles pensam, o que eles desejam e por
que.
MODELO Modelos so utilizados nas cincias naturais e sociais para representar fenmenos
complexos atravs de abstraes. Um exemplo de modelo o de mercado criado por economistas
para prever o seu comportamento.
Esses modelos no so pessoas reais, mas so baseados em comportamentos e motivaes de pessoas

reais. Personas so atualizadas com o passar do tempo sempre que necessrio.

Colocando um rosto e um nome sobre os dados de pesquisas de usurios, a persona pode nos ajudar
a manter os usurios em mente durante o processo de design, ao mesmo tempo em que cria uma
linguagem comum que faa sentido. Esta tcnica permite o Design Centrado no Usurio e sua fora
esta em trazer ao design discusses.
Para que os esforos de designers tenham sucesso, ele precisa assegurar que cada membro do time
do produto entenda pelo menos as caractersticas fundamentais e as necessidades de seus usurios,
ou muito tempo ser gasto numa conversa em crculos.
5 PERSONAS
35

5.2 O QUE PERSONAS NO REPRESENTAM

Tambm importante deixar claro o que personas no representam:
Mdia estatstica, pois a variao mais importante que a mdia;
Pessoas reais, pois cada pessoa tem suas particularidades e no representariam um grande
nmero de pessoas - mas personas so baseadas em dados reais;
Segmentos de mercado, pois segmento de mercado um grupo de pessoas que respondem a
mensagens similares e no que tem objetivos similares e padres de uso;
Job description ou funes, pois funes so definidas pelas tarefas que as pessoas fazem e no
pelos objetivos e comportamentos.
5.3 BENEFCIOS
Personas medem a eficcia do design j que opes de design podem ser testadas com elas. Elas no
substituem testes com usurios reais, mas permitem que iteraes de design sejam feitas de maneira
rpida e barata num quadro-branco.
A persona traz benfcios no s para o Design, mas tambm para toda a equipe multidisciplinar.
Personas:
Tornam explcita suposies sobre os usurios, criando uma linguagem comum com
significado
Dados (em grande parte qualitativos) e informaes so indispensveis, sendo o
fundamento das personas.
Permitem que voc foque um conjunto de usurios especficos (que no so voc!)
36
5.2 O QUE PERSONAS NO REPRESENTAM
ajudando na tomada de melhores decises

Limitando nossas escolhas, personas ajudam na tomada de decises de design. Criar um
produto para um tipo de usurio ter mais sucesso do que para uma vasta audincia
(Cooper).
Geram empatia para com os usurios, envolvendo sua equipe de uma forma que outras
representaes de dados do usurio no conseguem
Personas so engraadas e ganham vida quando os membro da equipe as aceitam.
Diferente de wirefames e prottipos, personas no so utilizadas numa parte especfica do processo,
pelo contrrio, elas ajudam o processo inteiro.
H diversas maneiras de consolidar os achados de sua pesquisa de usurio, mas apenas personas so
capazes de engajar o crebro a pensar em termos humanos.
5.4 IMPEDIMENTOS
Existem problemas que podem impedir o uso de Personas:
Recusa por parte da equipe envolvida com o desenvolvimento do produto
Utilizar personas pode ser uma alterao radical no processo de desenvolvimento de
produto e na cultura da empresa.
Falta de credibilidade da persona em relao aos dados da pesquisa
A persona deve ter como base dados de pesquisa e, ainda sim, se esses dados estiverem
muito desconectados, a equipe no ter confiana nela.
M comunicao de personas
Se a equipe no sabe o que persona, mesmo que o lder do projeto saiba, seu emprego
falhar. Se a equipe no for lembrada constantemente da persona, ela ser esquecida.
A equipe no sabe utiliz-las
5.4 IMPEDIMENTOS
37

5.5 A IMPORTNCIA DOS OBJETIVOS

Todos os seres humanos possuem motivaes que guiam seus comportamentos; alguns bvios e
outro sultis. fundamental que as personas captem essas motivaes na forma de objetivos.
O insight fundamental de Cooper era o de que as personas tinham objetivos e comportamentos que
poderiam ser atendidos por produtos atravs do design para seu comportamento, garantindo assim
maior probabilidade do design ser bem sucedido.
Se personas fornecem o contexto para um conjunto de comportamento observado, os objetivos so
os condutores por trs desses comportamentos. Designers podem criar cenrios e ento perguntar-se:
Esta persona realizar esta tarefa?
Esta persona realizar a tarefa como foi planejada?
A persona sem objetivos pode servir como uma ferramenta de comunicao til, mas no tem
utilidade como ferramenta de design.
A inferncia dos objetivos uma das etapas da criao de personas que ser vista com mais detalhes
no prximo captulo.
OBJETIVOS DA PERSONA Os objetivos que enumeramos para nossas personas so anotaes abreviadas
que no apontam apenas para padres de uso especficos, mas tambm fornecem uma razo para a
existncia desses comportamentos. Compreender por que um usurio realiza determinadas tarefas
d aos designers grande poder de melhorar ou mesmo eliminar as tarefas e ainda assim alcanar os
mesmos objetivos.
5.6 CRIANDO PERSONAS

38
5.5 A IMPORTNCIA DOS OBJETIVOS
O mais importante para a construo de uma persona a identificao dos principais padres que
acabam saltando aos olhos quando comeamos a analisar os achados:
Como as variveis comportamentais e demogrficas identificadas se agrupam para formar
padres. Variveis demogrficas s entram se influenciarem o comportamento como idade e
habilidade tcnica.
Se um agrupamento de entrevistados aparece em meia-dzia dessas variveis, voc pode ter a
base para uma persona;
Quando achar que identificou um padro, procure por outros.
5.7 NMERO DE PERSONAS

Uma "regra de ouro" para o nmero de personas criar no mnimo duas e no mximo onze.
Conhea a CASA DO CDIGO, uma nova editora, com autores de destaque no

mercado, foco em ebooks (PDF, epub, mobi), preos imbatveis e assuntos
atuais.
Com a curadoria da Caelum e excelentes autores, uma abordagem
diferente para livros de tecnologia no Brasil.
5.8 PERSONAS AD HOC

Dependendo do tempo e dos recursos do projeto, possvel criar personas ad hoc a partir das
informaes levantadas com os stakeholders, inclusive o design pode contribuir com sua
experincia. Ainda sim, uma persona calcada em dados de pesquisa tem maior credibilidade.
5.9 PERSONA SIMPLES

Uma outra maneira de se criar uma persona, principalmente quando queremos passar apenas uma
ideologia rpida para a equipe, de se fazer uma persona mais simples, em formato de carto.
Esse carto deve responder as seguintes perguntas:
5.7 NMERO DE PERSONAS
39
Quem?
O qu / do qu?
Como?
Por qu?
Figura 5.1: Persona simples
5.10 PROTO-PERSONA
Muitas vezes no andamento dos nossos projetos ficamos muito focados em cumprir prazos e metas.
To focados, que acabamos esquecendo para quem estamos desenvolvendo o site ou aplicao: o
usurio. Em primeira instncia pegar o perfil de usurio qualquer pode parecer a soluo ideal, afinal,
ele um de muitos, e talvez represente boa parte desses 'muitos'. O problema que ele pode no
representar a maioria dos seus usurios.
E para compilar tanta informao perdida, a respeito das necessidades, dos costumes e at da
personalidade do nosso pblico-alvo que existem as personas, j estudadas aqui.
40
5.10 PROTO-PERSONA
Figura 5.2: Exemplo - Persona
Uma persona mais simples

O "chato" das personas so os custos. Para montar uma persona tradicional, as informaes devem
ser retiradas de pesquisas efetivas sobre os usurios da empresa e/ou do projeto. Mas como toda empresa
conhece pelo menos um pouco dos seus usurios, possuem algum tipo de informao relevante sobre
eles, mesmo que no validadas de alguma forma, h a possibilidade de se criar uma variante mais
simples da persona, a proto-persona.
Ela uma soluo de contorno para a persona comum, ou seja, aconselhvel que no seja algo
definitivo e que suas informaes sejam validadas com usurios reais posteriormente.
Contudo, melhor uma proto-persona na mo, do que duas personas voando.
Contedo da proto-persona
interessante que a proto-persona possua as seguintes informaes:
5.10 PROTO-PERSONA
41
Quem esse usurio e como ele (personalidade)

Alguns comportamentos
Informaes demogrficas como idade e profisso
E o ponto chave: suas necessidades e/ou objetivos
O layout da proto-persona pode variar conforme a criatividade do time. Um template bastante usado
onde as informaes so separadas em quatro quadrantes, como no exemplo abaixo:
Figura 5.3: Exemplo - Proto-persona
Tanto as personas tradicionais quanto as proto-personas ajudam a nortear o time na maioria das
decises que envolvem o projeto. A proto-persona interessante para comear a introduzir a cultura de
DCU (Design Centrado no Usurio) na empresa, por ser algo barato e mais simples de ser desenvolvido.
42
5.10 PROTO-PERSONA

5.11 GAMESTORMING - CRIANDO PROTO-PERSONAS

Objetivo
Criar trs proto-personas
Ambiente
1. Canetinhas;
2. A4 Branca;
3. Pesquisas;
Regras
40 minutos de durao.
Passo a passo
1. Individualmente, cada integrante do time monta uma proto-persona;
2. Cada integrante apresenta para o prprio time sua ideia;
3. O time opina sobre quais caractersticas so realistas ou no, podendo ser feitas alteraes nesse
momento;
4. O time deve escolher trs proto-personas e col-las na parede;
5.12 OS SETE PASSOS PARA CRIAR PERSONAS

Para criar uma persona, Alan Cooper, em seu livro About Face 3, descreve sete passos principais:
5.11 GAMESTORMING - CRIANDO PROTO-PERSONAS
43
Passo 1: identificar variveis comportamentais e demogrficas.

Passo 2: mapear entrevistados nas variveis.
Passo 3: identificar principais padres de comportamento.
Passo 4: listar caractersticas e objetivos relevantes.
Passo 5: checar todo o conjunto de persona para eliminar redundncias.
Passo 6: desenvolver a narrativa.
Passo 7: determinar tipos de personas.
Passo 1: Identificar as variveis comportamentais

Liste os aspectos distintos do comportamento observado nos participantes da pesquisa como um
conjunto de variveis comportamentais. Variveis demogrficas s valem a pena serem identificadas e
consideradas se, de alguma forma, afetam o comportamento (Ex.: produto para crianas - idade).
Normalmente identificamos padres distintos de comportamento se focarmos nas seguintes
variveis:
Atividades: o que o usurio faz, frequncia e volume;
Atitudes: como o usurio pensa sobre o negcio e tecnologia associados ao produto;
Aptides: qual educao e treinamento o usurio tem; capacidades de aprendizado;
Motivaes: por que o usurio est engajado no negcio referente ao produto;
Habilidades: capacidade do usurio relacionada ao negcio e tecnologia associados ao
produto.
No h um nmero exato de quantas variveis devem existir, mas algo em torno de 20 a 30 variveis
normal.
APLICAES
CORPORATIVAS
PERFIS
DE
USURIOS
Para aplicaes corporativas, variveis
comportamentais so normalmente associadas s funes desempenhadas no trabalho e sugerido

que as variveis sejam listadas para cada funo separadamente (administrador, usurio, etc.)
Passo 2: Mapear os entrevistados nas variveis identificadas

Depois de identificadas as variveis, rotule as extenses de valores para cada varivel.
Para algumas variveis, essa extenso contnua e rotulamos dois valores extremos e opostos. Por
exemplo, para uma aplicao de comrcio eletrnico, os valores de uma varivel chamada "motivos para
comprar" pode ir de "apenas quando necessrio" at "por prazer".
Para outras variveis, fica impossvel uma variao contnua e podemos usar opes com mltiplas
escolhas. Um exemplo seria a varivel "preferncia de pagamento" que poderia ter as opes "parcelado",
44
" vista s com desconto" ou " vista mesmo sem desconto.
Mapear participantes nas extenses

Agora j podemos mapear cada participante da pesquisa dentro dessas extenses de valores de cada
varivel. A melhor forma ver todos os participantes para uma varivel e depois passar a prxima. O
mais importante posicionar cada participante relativo aos outros participantes. A preciso na posio
absoluta menos significante.
Para exemplificar como o mapeamento feito, usaremos as duas variveis citadas acima (voc pode
fazer isso de forma simples, usando um quadro-branco):
Figura 5.4: Tabela de usurios entrevistados
Passo 3: Identificar principais padres de comportamento

Depois de ter mapeado os entrevistados em todas as variveis, procure por aqueles que normalmente
aparecem juntos. Se um mesmo agrupamento de usurios aparecer em seis a oito variveis, j pode
significar um padro de comportamento que ser a base para uma persona. Quando achar que
identificou um padro, procure por outros.
Mas cuidado que alguns aparentes relacionamentos podem induzir a falsos padres. Perceba os
relacionamentos que realmente fazem sentido. Por exemplo, h uma lgica se os padres apresentarem
que pessoas que compram frequentemente normalmente compram parcelado. Mas no faz sentido ter
um padro que mostre que o pessoal que gosta de fazer compras tambm vegetariano!
Nomeando os padres encontrados

Identificado os principais padres, d a eles nomes curtos e descritivos, como por exemplo "o
comprador consciente" ou "o comprador compulsivo", etc.
45
Passo 4: Listar caractersticas e objetivos relevantes

Identificar objetivos e express-los sucintamente uma das tarefas mais crticas na modelagem de
uma persona, pois essses objetivos guiaro o design. Cada objetivo deve inferido das variveis
comportamentais identificadas e expressado como uma sentena simples.
Objetivos do usurio servem como uma lente atravs da qual os designers devem considerar as
funes de um produto. A funo e comportamento do produto devem atender objetivos atravs de
tarefas, um pequeno nmero de tatefas absolutamente necessrias. Lembre-se, as tarefas so apenas um
meio para um fim; objetivos so esse fim.
Para cada padro que voc identificou no passo anterior, sintetize os detalhes a partir das
informaes que voc tem das pesquisas, descrevendo:
Principais tarefas e fluxo do dia-a-dia;
Problemas com as solues atuais;
Ambiente de casa ou do trabalho;
Caractersticas comportamentais e demogrficas;
Objetivos.
PROFISSO A escolha da profisso da persona ajuda a lembrar o contexto no qual ela vive. Um
psiclogo encontra vrias pessoas ao dia, enquanto um professor de educao fsica encontra
adolescentes uma vez por semana.
Sintetizar os objetivos a parte mais importante desse passo, j que so esses objetivos que queremos
que a aplicao que estamos desenhando atenda. Uma forma de inferir os objetivos observar as aes
que as pessoas - de cada agrupamento que levou a um padro - fazem e por qual motivo: como esto
agindo e se comportando atualmente? O que elas querem atingir com essas aes?
Os objetivos, de uma certa forma, tem que ser relacionados ao produto a ser desenvolvido. Se no
diretamente relacionado, irrelevante para direcionar o design do produto.
Em seu livro Emotional Design, Donald (Don) Normam define trs processos cognitivos: visceral
(reao a estmulos antes de uma ao), comportamental (principal foco dos designers de interao) e
reflexivo (reflexo consciente de experincias passadas).
Alan Cooper traduz cada um desses processos cognitivos respectivamente como objetivos de
experincia, finais e de vida. Vejamos cada um deles:
Os objetivos de experincia
46
Descrevem como algum quer se sentir usando o produto. Tipicamente uma persona tem no mais
que um objetivo desses, ou at nenhum, a menos que seja um produto de entretenimento. Exemplos de
objetivos de experincia so:
"sentir-me inteligente"
"ter divertimento"
"atingir uma sensao de plenitude"
Objetivos finais
Descrevem o que uma persona quer realizar; e o produto pode ajudar diretamente ou indiretamente
nisso. Eles so os mais teis para determinar o design do produto e normalmente uma persona pode ter
de 3 a 5 objetivos finais. Exemplos de objetivos finais so:
"finalizar meu trabalho at s 17h"
"ser pr-ativo e no reativo"
"descobrir problemas antes que eles se tornem crticos"
Objetivos de vida
So mais teis em produtos orientados ao consumidor, mas no apropriado us-los a menos que
atingir esse objetivo seja a motivao principal para usar o produto. Normalmente identificar um ou
nenhum objetivo de vida em uma persona considerado comum. Exemplos de objetivos de vida so:
"me aposentar aos 45 anos"
"ser a prxima Madonna"
"ser promovido a diretor de arte"
Responder aos objetivos de vida faz a diferena entre um usurio satisfeito e um usurio fiel e
fantico.
Passo 5: Checar todo o conjunto de personas para eliminar redundncias

A partir de agora as personas comeam a ficar mais evidentes. Cheque todos os mapeamentos,
padres identificados com suas caractersticas e objetivos para ver se falta alguma coisa. Para ter certeza
de que no esteja criando personas redundantes, veja se elas diferem uma das outras em ao menos um
comportamento significante. Se duas ou mais personas esto muito similares e a nica coisa que as difere
so questes demogrficas, procure eliminar uma das duas ou ver se possvel ajustar as caractersticas
para ficarem mais distintas.
Passo 6: Desenvolver a narrativa

Personas contam histrias e assim se tornam mais convincentes. Uma lista de itens no transmitem o
47
que queremos to bem quanto a narrativa. Inclua alguns poucos detalhes pessoais. So pequenas coisas
que no afetam o design do produto: onde fez faculdade, hobbies, etc. Um ou dois detalhes pessoais so
suficientes - muitos podem desviar sua ateno dos importantes dados comportamentais que a persona
deve representar. Algumas dicas de como fazer a narrativa:
Liste os itens e agrupe os que so relacionados;
Transforme cada grupo em um pargrafo;
Adicione a "personalidade" por ltimo;
Citaes tambm so legais de serem usadas.
Um exemplo de como transformar uma lista de itens em uma narrativa:
ITENS
Itens
Ocupada
Interrupes frequentes
Narrativa O dia de Glria to agitado que s 15h20, finalmente, ela consegue comer a outra
metade do sanduche que havia deixado na sua mesa desde a hora do almoo!
Passo 7: Determinar tipos de personas

Depois de identificado uma ou mais personas, preciso determinar o tipo de cada uma. As
principais so a persona primria e a secundria, mas existem vrios outros tipos, como a negativa,
suplementar, served persona.
Primria
A primria aquela que precisa ser atendida de todo jeito pelo produto. Ela no ficar satisfeita caso
o design seja feito para qualquer outra persona. Se fizermos a persona primria feliz, as outras no
ficaro tristes.
5.13 SECUNDRIA
A secundria no geral fica satisfeita com a interface feita para a primria, mas tem algumas
necessidades adicionais especficas. Faa o design para a primria e depois, na medida do possvel,
acomode as necessidades da secundria.
Suplementar
48
5.13 SECUNDRIA
No so nem primeira nem secundria, mas so satisfeitas com as solues da primeira ou da

segunda. Geralmente so empregadas para materializar as suposies dos stakeholders.
Negativa
A persona negativa aquela para qual o produto no foi feito. mais uma camada de validao dos
dados da pesquisa.
Served persona
A served persona no utiliza o produto diretamente, mas afetada pelo seu uso. Por exemplo, aquela
pessoa que aguarda a atendente fazer a sua reserva de quarto.
Como determinar o tipo

Uma forma de identificar o tipo das personas por eliminao. Pergunte-se quem no poderia ser
primria. Faa a pergunta: se fizer o design para esta persona, as outras ficariam insatisfeitas? Se a
resposta for sim, essa no seria a persona primria. As personas so to diferentes que precisam de
interfaces totalmente diferentes? Ou poderia uma delas atender a maioria das necessidades? Se existirem
personas com necessidades muito diferentes, provavelmente teremos mais de uma persona primria e
cada uma provavelmente ter sua prpria interface.
EVITE CARICATURAS essencial que a persona no seja algo caricaturado ou estereotipado. Mesmo
sendo um "personagem", ela deve ser realista e plausvel, e que capture a essncia do tipo de usurio
que seu produto tem ou vir a ter.
Resumindo, alguns pontos principais que devem fazer parte da persona:

Tipo da persona;
Uma foto que ajuda a dar o toque "humano";
Um nome. Algumas pessoas preferem juntar ao nome algo que identifique o perfil principal da
persona, como por exemplo "Leonardo Silva, o empreendedor inovador";
Inclua alguns detalhes pessoais, coisas que no afetam o design da soluo, mas sem exageros;
Uma narrativa;
E muito importante, liste os objetivos finais que a persona quer atingir e que o produto dever
atender.
5.13 SECUNDRIA
49

5.14 MAPA DE EMPATIA

Para entender as necessidades e objetivos do usurio a fim de melhorar o produto ou servio existe
uma ferramenta visual que descreve o perfil desse usurio de maneira simples e fcil, o Mapa de
Empatia.
Semelhante proto-persona, pode ser baseado em uma hiptese do perfil do pblico-alvo. E o
interessante que j pode ser usado para direcionar melhor os planos de ao e ajudar na tomada de
decises sobre o projeto.
O Mapa possui seis quadrantes, todos relacionados ao usurio:
Penso
O que importante para ele? Quais so suas esperanas e sonhos?
Escuto
O que o influencia de alguma forma? Amigos, chefe?
Vejo
Do que ele gosta de falar? Como seu ambiente? Como ele costuma agir?
Falo e fao
Como ele em pblico? Aparncia? Comportamento com os demais?
Dores
50
5.14 MAPA DE EMPATIA
Quais obstculos ou desafios ele possui? Quais so essas barreiras?
Necessidades
Quais seus desejos? O que ele almeja atingir? Como ele pode medir seu sucesso?
interessante tambm a escolha do nome e da idade desse perfil hipottico, para que ele se torne
mais crvel.
Figura 5.5: Template do Mapa de Empatia
5.15 TEMPLATES DE PERSONA

O layout da persona em si depende apenas da criatividade do responsvel. H alguns templates na
internet, mas o ideal criar o prprio, a fim de ser reutilizado na empresa sempre que houver a
necessidade de se criar personas.
Uma ferramenta online que auxilia na criao da persona a Xtensio (http://xtensio.com/userpersona). Nela voc usa um template padro e apenas vai alterando as informaes da persona, como a
foto e o nome por exemplo. Ela ainda permite remanejar as sees desse template.
51
Figura 5.6: Template persona - Xtensio
52
53
Figura 5.7: Exemplo de persona pagamento eletrnico
5.16 DISCUSSO: AS NARRATIVAS SO REALMENTE NECESSRIAS?

Talvez um dos aspectos mais controversos das personas so as narrativas coloridas em torno delas.
Quem poderia se importar que a persona Marta tem um fusca rosa? Ou que ela alrgica camaro?
Mesmo quando as histrias so centradas em torno do trabalho, h sempre algum questionando a
relevncia e aplicabilidade das informaes que esto sendo inventadas.
Discuta sobre a necessidade ou no de narrativas das personas.

5.17 GAMESTORMING - CRIANDO PERSONA NO DIA A DIA

Objetivo
Ter o usurio primrio mais prximo do time.
Ambiente
1. Canetinhas;
2. Foto da persona;
3. A4 Branca;
4. Pesquisas;
5. Post-its.
Regras
45 minutos de durao.
54
5.16 DISCUSSO: AS NARRATIVAS SO REALMENTE NECESSRIAS?
Passo a passo
1. Com as pesquisas em mos, cada integrante do time anota em um post-it o nome e uma resposta da
pergunta;
2. Um integrante do time agrupa os post-its na parede;
3. Em frente aos post-its os integrantes discutem as caracteristicas da persona, conforme vai definindo
cada ponto um integrante do time anota em um post-it cada caracterisca da persona primria que
sendo definida;
4. Agora basta realizar a narrativa ou dia a dia da persona em uma folha racunho;
5. Coloque todos os dados levantados da persona primria na folha A4.
5.17 GAMESTORMING - CRIANDO PERSONA NO DIA A DIA
55
CAPTULO 6
MODELANDO E IDENTIFICANDO
REQUISITOS
"Eduquemos os jovens para que no se condenem os homens" -- Friedrich Nietzsche

Depois de definir o projeto e realizar a pesquisa de design, como j dito anteriormente, o designer
deve dar forma e significado aos dados obtidos. O designer de interao constri ento uma srie de
modelos, diagramas e documentaes, como uma forma de visualizar e analisar tudo o que ele aprendeu
at agora. Um desses modelos, as Personas, j mencionamos anteriormente. Outros modelos podem ser
modelos mentais, cenrios, anlise de tarefas, fluxo de tarefas, etc.
Qual documentao produzir?

A quantidade de documentao que o designer precisa elaborar e o que deve ser elaborado uma
questo que sempre gera debates. Alguns sugerem que j se deve pular diretamente ao desenho da
interface ou at para prottipos e implementao do design em HTML, sem perder tempo com qualquer
tipo de documentao. Outros discordam, pois consideram a documentao uma parte importante para
estruturar o projeto e no deixar passar nada importante.
Mas o bom senso deve prevalecer: o designer deve elaborar a documentao que for necessria para
executar o projeto da melhor forma. Alguns documentos podem ser exigncia do cliente, que os
consideram como parte dos entregveis do projeto, outros porque os designers ou os desenvolvedores
envolvidos no projeto consideram teis para desenvolver a interface e a aplicao. E mais uma vez, tudo
depende! Depende dos recursos disponveis para o projeto, das exigncias do cliente, do modo de
trabalho da sua empresa.
Documentao e Servio Terceirizado

Normalmente quando o design est sendo feito como um trabalho terceirizado e que ser repassado
para o cliente implementar, a necessidade de documentaes e especificaes so maiores. Mas quando o
time de design est inserido na equipe de desenvolvimento do produto, essa necessidade tende a
diminuir, j que os designers estaro lado-a-lado com os implementadores.
Mas, independentemente de quais documentos voc precisar desenvolver em seus projetos, vamos
descrever aqui alguns principais que ajudam numa melhor identificao dos requisitos necessrios para
56
6 MODELANDO E IDENTIFICANDO REQUISITOS
o desenho da interao e da interface.
6.1 MODELO MENTAL

As pessoas no precisam entender de toda a complexidade que est por trs de qualquer produto que
elas usam. Um celular no funciona do mesmo jeito que um telefone fixo.
Um celular faz sua transmisso via ondas de rdio que trocam conexes dentro de uma rede
consistindo de vrias antenas pertencentes s operadoras de telefonia mvel. Mas saber desse
funcionamento no ajuda s pessoas a entenderem como usar um celular, a como interagirem com ele.
A maneira como pessoas imaginam como algo funciona, mas que no necessariamente reflete seu
real mecanismo, chamado modelo mental ou modelo conceitual. Ele no captura apenas a inteno
cognitiva de uma pessoa, mas tambm a emoo, ambiente social e traos culturais.
MODELO MENTAL Determina como as pessoas pensam sobre algo e identifica a expectativa do
usurio de como ele deve se comportar.
Caractersticas chave
Modelos mentais tm as seguintes caractersticas-chave:
Incluem o que uma pessoa pensa que verdade, mas que no necessariamente realmente
verdade;
So similar em estrutura s coisas ou conceitos que eles representam;
Permitem uma pessoa predizer os resultados de suas aes;
So mais simples que as coisas ou conceitos que eles representam. Incluem apenas
informaes suficientes para permitir previses mais precisas.
Muda lentamente
Modelos mentais evoluem lentamente e podem ser aplicados em outros projetos, diferente das
personas, que so especficas por projeto.
Validado por Personas

Apesar do modelo mental guiar a estruturao do site, de nada adiantar se ele no atende as
necessidades das personas criadas, sendo assim, a persona um instrumento poderoso para validar o
modelo metal escolhido.
Exemplo de Modelo Mental

6.1 MODELO MENTAL
57
Um exemplo o modelo mental para o componente "carrinho de compras" de uma loja online, que
o de um container. Esse modelo influencia tanto o design do componente como a linguagem que usada
na interface. Dessa forma, ns "colocamos" ou "tiramos" coisas do carrinho e a aplicao de comrcio
eletrnico deve ter funcionalidades para atender a essas tarefas.
EXEMPLO: MODELO MENTAL PARA LOJA VIRTUAL

influenciado pela experincia com lojas e catlogos fsicos;
Expectativas:
bvio como achar um produto ou fcil pedir por assistncia humana;
Tudo que precisa saber sobre o produto est acessvel (na caixa do produto) ou fcil
pedir ajuda;
Ter uma forma de marcao das coisas que vai querer comprar depois ou mostrar para
amigos (como marcar a pgina do catlogo).
Unidades bsicas de dados: produtos, que tem cores, tamanho, etc.

6.2 CENRIOS
Cenrios so narrativas que fornecem uma maneira rpida e eficaz para imaginar os conceitos de
design caso o produto tivesse sido construdo. Os protagonistas dessas histrias so as personas as quais
procuramos atender seus objetivos (levando em considerao modelos mentais) sejam finais, de
experincia ou de vida. Em certo sentido, os cenrios so prottipos construdos de palavras.
Linguagem comum e fcil de entender

Esta tcnica descreve os requisitos numa linguagem fcil de entender e validar por todas as pessoas
relacionadas com o projeto, motivando-as a discutir e a participar, obtendo assim um maior feedback
sobre o que ser desenvolvido.
58
6.2 CENRIOS
Do incio ao plano de escopo

Os cenrios demarcam a entrada no plano de escopo, pois so deles que sero extrados os requisitos
funcionais e de contedo. No raro a apario de novos requisitos durante a criao do cenrio,
completando aqueles definidos no plano estratgico.
CENRIO uma narrativa que descreve interaes previsveis dos usurios com o sistema. Incluem
informaes sobre objetivos, expectativas, motivaes, aes e reaes.
De onde comear?
muito comum comear com o cenrio de primeira utilizao: o qu acontece quando personas
encontram o produto ou servio pela primeira vez?
EXEMPLO: UM CENRIO PARA LOJA VIRTUAL Alice quer comprar presente de aniversrio para um amigo,
mas no tem nada em mente. Ela sabe que ele gosta de cozinhar. Ela entra em uma loja virtual e de
artigos diversos e olha os produtos em oferta e lanamentos que aparecem numa rea de produtos
da primeira pgina. Ela v algo relacionado a livros de culinria e acha que pode ser uma boa ideia!
Quais tipos de livros sobre esse assunto esto disponveis? Qual deles seria um bom presente? Ela
procura algo na lista de produtos relacionados ao tema. A lista mostra uma imagem de capa do
livro e algumas outras informaes como ttulo, autor, preo. A lista esta ordenada por ttulo e ela
ordena por preo, do menor para o maior, porque no quer gastar muito. Ela v trs livros
interessantes e seleciona o primeiro deles, informaes mais detalhadas sobre o livro so mostradas
em uma rea de detalhes do produto e ela l as opinies que outras pessoas j dera sobre ele. Ela no
gosta desse primeiro livro e volta a listagem para selecionar outra. Esse segundo ela achou bem
interessante, mas para ela e no para o seu amigo, ento quer marc-lo para poder comprar depois.
Finalmente ela encontra um livro que o amigo dela provavelmente vai adorar. Na rea de detalhes
do produto ela clica na opo para comprar e o seu carrinho de compras mostrado j com o livro
includo. Ela pensa em voltar para comprar tambm aquele livro para ela, mas acaba desistindo e
prossegue para pagar a compra.
Tipos de Cenrio
O cenrio de mais alto nvel chamado cenrio de contexto. Como tudo feito sob o ponto de vista
da persona, as coisas acontecem "magicamente", no havendo a necessidade descrever como as coisas
acontecem por debaixo dos panos.
6.2 CENRIOS
59
Quando o design esta a um passo de comear o design, criado o cenrio de caminho chave, que j
utiliza o vocabulrio do design e realiza os detalhamentos necessrios.
6.3 GAMESTORMING - CRIANDO CENRIO

Objetivo
Criar um cnario com foco na persona primria que criamos no exerccio anterios. Dos cenrios
criados vamos criar as histrias para o desenolvimento do app mobile.
Obs. Lembre-se de entrar no modelo mental da persona primria.
Ambiente
1. Folhas A4;
2. Um caneta por aluno;
3. 3 bolinhas verdes (votos positivos) por integrante do time;
4. 1 bolinha vermelha (voto negativo) por integrante do time.
Regras
Durao de 25 minutos.
Passo a passo
1. Cada integrante do time vai desenvolver um cenrio com base nas necessidades da persona primria;
2. Cole os cenrios na parede para que cada integrante do possa ler todos os cenrios;
3. Utilize as bolinhas para votar, primeiro os votos positivos (obrigatrios) e em seguida o negativo
(no obrigatrio);
4. Time entra em acordo de qual histria vai resolver primeiro. Se o time achar necessrio pode melhor
o cenrio escolhido.
6.4 ANLISE DE TAREFAS

Anlise de tarefas especialmente til para validar se o design suporta todas as tarefas requeridas
pela aplicao, sejam elas dos requisitos do negcio ou das necessidades dos usurios.
ANLISE DE TAREFAS Lista as tarefas que o design final ter que suportar. As tarefas podem ser
categorizadas por importncia, nvel de acesso e at pelas personas que realizaro a tarefa.
60
6.3 GAMESTORMING - CRIANDO CENRIO
Normalmente essa lista montada a partir de requisitos de negcios, achados das pesquisas,
produtos existentes, cenrios e casos de uso.
A categorizao por grau de importncia (primrias, secundrias, tercirias ou dispensvel), ajuda o
time de design a focar seu tempo nas tarefas mais importantes e a perceber aquilo que pode ser
dispensado no design.

6.5 FLUXO DE TAREFAS

Depois que as tarefas foram listadas, organiz-las atravs de um diagrama que pe uma ordem que
torna bvio como ir de uma a outra, fazendo o processo seguir um fluxo lgico, o prximo e
importante passo a ser feito.
FLUXO DE TAREFAS Detalha como um usurio vai completar todas as tarefas em uma aplicao, do
comeo ao fim.
Colocar as tarefas em um fluxo pode sugerir a ordem que as telas sero apresentadas na aplicao e
ajuda o designer a ver as conexes lgicas que sero construdas posteriormente nos wireframes.
A diagramao do fluxo de tarefas o incio da concretizao dos requisitos e quando o designer
comea ver o produto tomando forma.
6.5 FLUXO DE TAREFAS
61
Figura 6.1: Exemplo de fluxo de tarefas
6.6 SINTETIZANDO OS REQUISITOS DE DESIGN

Assim que o designer tiver estruturado as informaes obtidas, identificando os requisitos
necessrios para o desenvolvimento da aplicao, ele pode sintetiz-los, agrupando em requisitos de
dados e de funcionalidades, ou seja, os dados e aes que devem ser representados no design da
interao e dos elementos da interface.
Dados: Objetos e informaes que o usurio precisa ver.
62
6.6 SINTETIZANDO OS REQUISITOS DE DESIGN
Funcionalidades: Operaes ou aes que os usurios faro com os dados ou em resposta a eles.
Normalmente so traduzidos em componentes de controle da interface ou em lugares onde os objetos e
informaes sero dispostos na interface.
Uma forma de identificar os requisitos de dados e funcionalidades separando as aes (verbos) e
objetos (substantivos) dos modelos (cenrios, fluxo de tarefas) que foram elaborados. Por exemplo:
Adicionar (ao) um produto (objeto) no carrinho (objeto) a partir do resultado da busca.
Outros requisitos tambm podem ser teis separar, como no exemplo acima, o requisito de contexto
"a partir do resultado da busca".
Alm disso, tudo o mais que possa afetar o design, como a habilidade dos usurios no uso do
produto, o ambiente onde o produto ser inserido, prazo para desenvolver a soluo, recursos
disponveis (pessoas, oramento), etc.
Organizao dos requisitos

No existe uma forma padro para a documentao desses requisitos. No geral, coloc-los em uma
tabela separados por tipo (dados, funcionalidades, contexto) o suficiente. A partir de agora, o designer
tem subsdios suficientes para iniciar o desenho da interface, o que, relembrando, no significa que ele
no podia ter comeado a esbo-la em qualquer momento antes!
6.7 USER STORIES

Usualmente, as tarefas a serem executadas ela equipe so escritas no formato de User Stories, ou
simplesmente Histrias. Essas, so pedidos de itens de valor para o projeto que se est desenvolvendo e
contm trs informaes importantes:
por que importante que o sistema tenha essa funcionalidade;
que tipo de usurio se benecia mais com essa funcionalidade;
objetivamente, o que se quer que o software faa.
Sabendo da motivao e importncia de cada histria, conseguimos prioriz-las melhor. O pedido
objetivo de uma parte nova facilita aos envolvidos entenderem o que deve ser produzido. O tipo de
usurio que utilizar o sistema facilita muito tambm para os desenvolvedores, que sabero com quem
tirar dvidas, se essas surgirem e mesmo qual o foco dessa funcionalidade.
6.7 USER STORIES
63

6.8 ESCREVENDO BOAS HISTRIAS

Uma boa histria deve poder ser lida fluentemente, como uma historinha mesmo. Tome cuidado
para no escrever a motivao para a construo da histria da viso de uma pessoa e dizer que o maior
interessado outro. Veja um mau exemplo de histria:
PAGAMENTO EM BOLETO Para que O COMPRADOR possa pagar sem carto de crdito Eu, como
comprador Quero que o sistema d suporte emisso de boletos
Uma pequena alterao da grafia faz muito mais sentido e torna a leitura mais fluente:
PAGAMENTO EM BOLETO Para que
EU CONSIGA
comprar produtos nessa loja Eu, como
comprador que no tem carto de crdito Quero que o sistema d suporte ao pagamento em boleto
6.9 GAMESTORMING - CRIANDO HISTRIAS COM FOCO NO USURIO

Objetivo
Criar histrias retiradas dos cenrios que desenvolvemos no exerccio anterior.
Ambiente
1. Cenrio criado e definido pelo time no exerccio anterior;
2. Duas fichas pautadas por integrante.
64
6.8 ESCREVENDO BOAS HISTRIAS
Regras
1. Durao de 15 minutos;
2. S utilizar um lado do carto;
3. Cada integrante faz uma histria pra cada proto-persona criada.
Passo a passo
No carto vamos adotar o seguinte padro:
Para... ver como a camisa fica de outras cores.
Eu, como... comprador que gosta de um armario colorido.
Quero... conseguir visualizar como a camisa fica nas cores disponiveis, com alguma imagem
ilustrativas que eu posso trocar de forma fcil.
Aps o Para..., Eu... e o Quero.. estiver preenchidos colocamos um ttulo.
Figura 6.2: Exemplos - Histrias
6.10 EQUILBRIO ENTRE CLIENTE E USURIO

Apesar de sempre focarmos no usurio a maior parte do tempo na tomada de decises do projeto, a
opinio do cliente tambm precisa ser levada em considerao. Qualquer falha na definio dos
objetivos ou mesmo falta de automatizadores de processos podem resultar em retrabalhos, insatisfao
do cliente e/ou desmotivao da equipe.
65
Pode acontecer tambm do objetivo estar muito bem definido, mas a equipe desconhecer essa
informao. Pode acontecer tambm da equipe nem mesmo conhecer o cliente e seus cnceitos, no
conseguindo visualizar o quo importante a sua tarefa atual.
Para melhorar a compreenso dos stakeholders acerca das necessidades do usurio e dos rumos do
projeto, e tambm da prpria equipe envolvida no desenvolvimento (designers, desenvolvedores, etc),
foi criada uma ferramenta para deixar isso de uma forma totalmente visual e interativa, o UX Canvas,
inspirado no clssico Business Model Canvas.
Figura 6.3: Estrutura - UX Canvas
O diferencial dessa ferramenta o seu foco no conceito de experincia do uso do projeto, podendo
ser aplicado a qualquer momento do projeto. Cabendo a equipe decidir o nvel de detalhamento de cada
bloco.
UX CANVAS Site com o relatrio final sobre a ferramenta: http://uxcanvas.com
E de todos os blocos da ferramenta, a proposta de experincia de fato o corao de tudo. Estratgico

e subjetivo, pode ser o alinhamento de uso das expectativas do cliente e do usurio. At mesmo a
necessidade que o projeto est solucionando.
66

6.11 GAMESTORMING - UX CANVAS

Objetivo
Juntar a viso do cliente e do usurio.
Ambiente
1. Persona criada em gamestorming anterior;
2. Cenrios e histrias criados neste captulo;
3. Cartolina;
4. Canetinha azul, verde e preta.
Regras
Durao de 25 minutos
Passo a passo
1. Desenhar o UX Canvas na cartolina utilizando as canetinhas;
2. Colocar a persona no canvas;
3. Colocar os cenrios no canvas;
4. Colocar as histrias no canvas;
5. Um dos integrantes do time assume o papel do cliente para preencher o lado do cliente no canvas.
6.12 FEATURES
A descrio de um interao ou ao com o sistema o que chamamos de feature. Por exemplo,
6.11 GAMESTORMING - UX CANVAS
67
escrever uma mensagem pra compatilhar um ideia, pensamento ou contedo relevante dentro do
Twitter um feature que chamamos de tweet.
Toda feature (funcionalidade) tem que atender um objetivo (necessidade) que seja claro e
relacionado a uma persona ou proto-persona do seu sistema. Por esse motivo, antes de sair pensando
nas features do sistema, precisamos entender quem o nosso pblico alvo.
Felizmente. Ns j temos nossas proto-personas criadas.
6.13 GAMESTORMING - BRAINSTORM DE FEATURES COM OBJETIVOS

Objetivo
Realizar um brainstorm de features classicados por proto-persona e objetivo.
Ambiente
1. Proto-personas criadas em gamestorming anterior;
2. Histrias criadas neste captulo;
3. Cartolina;
Regras
20 minutos.
Passo a passo
1. Classificar as proto-personas no eixo Y;
2. Cada integrante do time define um objetivo pensando nas proto-personas;
3. Classificar os objetivos no eixo X;
4. Brainstorm de features pra solucionar os objetivos pensando em cada proto-persona.
68
6.13 GAMESTORMING - BRAINSTORM DE FEATURES COM OBJETIVOS
Figura 6.4: Proto-personas e seus objetivos

6.14 PRIORIZANDO FEATURES

Em alguns cenrios coorporativos a priorizao de feature definida somente pelo cliente. A opinio
do cliente realmente tem o seu valor. Mas importante levarmos em considerao mais 4 valores: valor
pro usurio, valor pro negcio, esforo tcnico e MVP.
6.14 PRIORIZANDO FEATURES
69
Valor pro usurio:

Tem o objetivo de entender qual feature vai entregar mais valor pro cliente, e deixar ele mais feliz.
Esse o momento de entrarmos no modelo mental do usurio, pra classificar quais features entregam
um valor pequeno, mdio ou grande.
Valor pro negcio:

Utilizado pra priorizar qual feature entrega mais resultado financeiro pro nosso cliente. Importante
classificar junto com nosso cliente quais features tem um valor pequeno, mdio ou grande.
Esforo tcnico:
o valor que deve ser levantado com o time tcnico do sistema. Com o objetivo de classificar quais
features tem um esfoo pequeno, mdio ou grande.
MVP (Minimum Viable Product)

uma verso com o mnimo de features que posso ser colocado em produo, agregando valor pro
usurio e negcio.
6.15 GAMESTORMING - PRIORIZANDO FEATURES COM FOCO NO

USURIO
Objetivo
Priorizar tarefas com foco no usurio, levando em considereo o esforo tcnico e o retorno
financeiro.
Ambiente
1. Proto-personas criadas em gamestorming anterior;
2. Histrias criadas neste captulo;
3. Cartolina;
Regras
Durao de 30 minutos
Passo a passo
1. Criar o canvas;
2. Colocar as proto-personas;
70
6.15 GAMESTORMING - PRIORIZANDO FEATURES COM FOCO NO USURIO
3. Priorizar as histrias no canvas.
Figura 6.5: Prioridades
6.15 GAMESTORMING - PRIORIZANDO FEATURES COM FOCO NO USURIO
71
CAPTULO 7
DOS REQUISITOS AO DESIGN
"No existe um caminho para a felicidade. A felicidade o caminho." -- Mahatma Gandhi

Nas sesses anteriores, foram apresentadas partes do processo de desenvolvimento do produto,
como descoberta e definio do produto, e a identificao dos requisitos de design. A partir de agora,
passaremos ao desenho da interface propriamente dito.
7.1 ESTRUTURA GERAL

Esse o momento de pensar na ::big picture:: no qual entramos no plano da estrutura. No inclui
ainda o design visual, interaes detalhadas, elementos de interface. Fazendo uma analogia ao projeto de
uma casa, nessa etapa seriam definidos quais cmodos a casa teria, qual a disposio de um em relao
ao outro, o tamanho relativo de cada um. Ainda no seria necessrio definir as dimenses exatas de cada
um, onde estariam as portas e janelas e quais mveis estariam em cada um, por exemplo.
Deve ser definido a estrutura geral de navegao e as interaes macro da aplicao. Deve-se
considerar sua forma (ser vista em uma tela de alta-resoluo, em um celular, um quiosque?), qual
padro postural a aplicao seguir (transitrio ou soberano?) e quais os mtodos de entrada de dados
(teclado, mouse, voz, toque na tela?).
o comeo do esboo da aplicao. Identifique as vises principais que a aplicao precisa (estados
principais da tela). Normalmente, cada viso determinada pelas diferentes atividades que o produto
precisa suportar. Para cada viso, inicie a "fase de retngulos", onde a viso divida em reas
retangulares correspondendo aos painis, componentes de controles (como por exemplo barra de
ferramentas, menus) e outras reas de mais alto-nvel. Cada rea identificada com um nome e
demonstrado os relacionamentos entre elas, ou seja, o que uma mudana em uma rea influencia nas
outras. De uma viso para outra, pode-se mudar todas as reas ou apenas uma principal.
Esse esboo pode ser feito inicialmente em um papel, guardanapo ou quadro-branco! Passe para uma
ferramenta de design quando achar que algo mais fechado j foi definido.
72
7 DOS REQUISITOS AO DESIGN
Figura 7.1: Exemplo de rabiscoframe
O design um processo incremental que vai sendo refinado a cada iterao.
7.1 ESTRUTURA GERAL
73
Figura 7.2: Exemplo de rabiscoframe
Cenrios de Validao
possvel criar cenrios de validao do tipo "se... ento" para testar outras possibilidades no
esboo feito.

7.2 REFINANDO O DESIGN

74
Da mesma forma que o design da interao est sendo definido, o estudo da linguagem que o design
visual ter tambm pode ser iniciado, a menos que exista um padro de design visual j estabelecido.
Inicialmente a explorao de diversos estilos, que incluem cores, tipografias, contrastes, formas e
estados que elementos da interface podem ter. Esse trabalho ainda no leva em considerao o design de
interao que est sendo feito.
Depois de escolhido um ou dois estilos visuais, deve-se aplic-los nas telas chaves da aplicao, para
definir aquele que melhor atende ao design de interao. Nessa fase, o design de interao dessas telas
precisa estar mais elaborado, com detalhes suficientes para refletir melhor o design visual, por isso, os
esforos de interao e visual precisam estar sempre alinhados. Com um design mais concreto, melhor
para fazer a avaliao das possibilidades da soluo proposta e tambm de obter feedback dos envolvidos
no projeto.
Wireframes
Wireframe um dos mais importantes documentos que o designer de interao produz quando
trabalha no desenvolvimento de um produto no plano de esqueleto.
Wireframe
uma viso detalhada de uma parte do produto, incluindo todos os componentes de uma tela e
como eles se encaixam juntos.
Wireframes tambm so uma tima ferramenta para se comunicar com vrios nveis de audincia.
Serve para mostrar aos clientes como o design atende aos objetivos do negcio, para que os
desenvolvedores vejam como o produto funciona e se comporta, e assim saberem o que eles precisam
codificar e para que o designer visual saiba quais elementos visuais ele precisa desenhar.
Wireframes devem esboar a forma do produto, moldando o contedo, as funcionalidades e os
meios de acessar ou navegar entre eles.
Contedo um termo genrico que inclui textos, imagens, cones, vdeos, grficos, entre outros.
Dependendo de quo detalhado o wireframe seja, o contedo pode ser representado tanto como
quadrados com um "X" atravs deles (chamado ::placeholders::) com uma indicao do que ele significa,
como com uma representao mais real.
As funcionalidades consistem dos controles necessrios para executar uma tarefa bem como o que a
aplicao apresenta em resposta ao uso desses controles: so botes, rtulos, caixas de texto, checkboxes,
radiobuttons, listboxes, sliders, mensagens de erros, links, etc.
75
Todos esses componentes da interface precisam estar documentados no wireframe mostrando sua
disposio geral e importncia. E tudo que no estiver bvio no wireframe, deve ter uma anotao
correspondente.
Figura 7.3: Exemplo de Wireframe
medida que o wireframe vai se tornando mais estvel, quando a possibilidade de mudanas
diminui, comece-o a detalhar ainda mais. Mostre no prprio wireframe como deve ser o
comportamento de cada funcionalidade e coloque contedos reais. Vrias ferramentas de elaborao de
wireframes permitem que voc desenvolva um nvel excelente de fidelidade visual e funcional, inclusive
servindo como prottipo da sua aplicao. Muitas vezes o prprio wireframe usado em testes de
usabilidade ou como especificao para a equipe de implementao.
Ferramentas de Elaborao de Wireframes

H vrias ferramentas para esse propsito no mercado:
Axure - www.axure.com (Win/Mac)
Just in Mind - www.justinmind.com (Win/Mac)
OmniGraffle - www.omnigroup.com (Mac)
SmartDrawn - www.smartdraw.com (Win)
iRise - www.irise.com (Win)
76
Balsamiq - www.balsamiq.com (Win/Mac e online)

Gliffy - www.gliffy.com (online)
7.3 8 STEPS
Uma ferramenta que busca juntar a informalidade e rapidez do rabiscoframe com as ideias e
conceitos do wireframe a chamada 8 steps, ou crazy eights. Essa ferramenta foi criada pelo Google e
um componente importante na metodologia Design Sprint Method.
A ideia gerar novas ideias. As partes interessadas no projeto, seja desenvolvedor, gerente ou mesmo
o prprio cliente, buscam solues de forma rpida desenhando-as em um papel em poucos minutos. O
motivo pelo qual deve ser feito rapidamente que quando temos pouco tempo para rabiscar, focamos
mais em ideias, e no em detalhes.
Cada 8 steps uma folha, dividida em oito partes iguais, e cada uma dessas partes uma tela
diferente do aplicativo. Sendo sempre focado em resolver uma histria por vez, essa ferramenta deve
mostrar o fluxo de navegao do usurio pelas telas do aplicativo. A parte interessante do rabiscoframe
importada aqui, pois no necessrio nenhum alto grau de habilidade artstica para rabiscar uma ideia
em um papel.
interessante tambm o time acordar as cores que sero utilizadas por todos, como por exemplo,
utilizar a cor preta para o desenho em si.
7.4 GAMESTORMING - CRIANDO RABISCOFRAME E WIREFRAME EM

TIME
Objetivo
Desenvolver um wireframe com menos pontos de falhas de forma gil.
Obs. A tcnica que vamos utilizar foi criado pelo Google.
Ambiente
1. Uma histria criada em gamestorming anterior;
2. Folha A3;
3. Minmo de 4 cores de caneta por aluno;
4. Folhas A4 para rascunho;
5. 3 bolinhas (votos positivos) verdes por integrante do time;
6. 1 bolinha (voto negativo) vermelha por integrante do time.
Regras
7.3 8 STEPS
77
Durao de 80 minutos;
Cada integrante do time deve fazer um 8 steps mesmo sem habilidades artsticas.
Passo a passo
1. Time escolhe um histria para solucionar as interaes;
2. Divide a folha A3 em 8 partes iguais, cada parte da A3 vai ser um tela ou interao que o usurio tem
que realizar com a finalidade de resolver a histria escolhida pelo time.
3. O time precisa definir o que cada cor de caneta vai significar, por exemplo: Preta - desenho; Azul Mouse; Verde - Touch; Vermelha - Teclado.
4. Com a histria e as cores definidas basta partir para soluo com telas e interaes, cada integrante
com sua folha A3 sem colar;
5. Colar todas as solues na parede;
6. Cada integrante apresenta sua soluo para o restante do grupo;
7. Depois cada integrante vota de forma livre utilizando primeiro votos positivos depois o negativo
(sem discusses nesse parte);
8. Com os votos finalizados o time se junta a frente dos desenhos e discutem sobre o que querem
construir;
9. Por fim, o time se junta para criar um verso final da soluo da histria.

78
7.4 GAMESTORMING - CRIANDO RABISCOFRAME E WIREFRAME EM TIME
CAPTULO 8
PADRES E PRINCPIOS DO DESIGN DE

INTERAO
"O mundo j est cheio de feridas e infortnios mesmo sem guerras para multiplic-los" -- J.R.R. Tolkien
Os princpios e padres de design de interao so aplicados durante o processo de desenho da
interface, ajudando os designers a traduzir os requisitos definidos para o produto em estruturas e
comportamentos na interface.
Os princpios de design de interao so guidelines ou regras, tipicamente baseadas em um conjunto
de valores e crenas que os designers tm, bem como nas sua experincia em tentar corresponder a esses
valores; que endeream questes de comportamento, forma e contedo de uma interface.
J os padres so considerados solues recorrentes para problemas comuns, solues estas que se
destacaram de prticas comuns e j bem testadas. Padres de design de interao no s se preocupam
com a estrutura e organizao dos elementos da interface, mas tambm com o comportamento dinmico
e mudanas nesses elementos em resposta s aes do usurio.
O esforo de formalizar os conhecimentos sobre design de interao e melhores prticas permitem:
Reduzir o tempo e esforo de design em novos projetos;
Melhorar a qualidade das solues de design;
Facilitar a comunicao entre designers e programadores.
8.1 AS DEZ HEURSTICAS DE NIELSEN

Um grupo de princpios bastante conhecido, devido a popularidade de quem os difundiu, so As 10
Heursticas de Nielsen. So eles:
1 - Visibilidade do estado do sistema
2 - Correspondncia entre o sistema e o mundo real
3 - Liberdade e controle do usurio
4 - Consistncia e padres
5 - Preveno de erros (design defensivo)
6 - Reconhecimento em vez de memorizao
7 - Flexibilidade e eficincia de uso
8 PADRES E PRINCPIOS DO DESIGN DE INTERAO
79
8 - Esttica e design minimalista

9 - Ajudar os usurios a reconhecerem, diagnosticarem e recuperarem-se de erros
10 - Ajuda e documentao.
Vejamos cada um deles:
1. Visibilidade do status do sistema

responsabilidade do sistema informar o que est acontecendo em real time pro usurio.
Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual
vdeo estamos assistindo; qual prximo; quais assistimos ou no.
Figura 8.1: Exemplo de visibiidade do status do sistema
2. Correspondncia entre o sistema e o mundo real

Em relao ao mundo real podemos considerar: sons, visual e o tom de escrita que usurio utiliza
para se comunicar. Implementamos bastante esta heurstica quando utilizamos uma seta, cones e
utilizamos a cor vermelha para elementos negativos.
Um software que usa essa heurstica o Photoshop em sua barra de ferramentas.
80
Figura 8.2: Exemplo de correspondncia entre o sistema e o mundo real
3. Liberdade de controle fcil pro usurio

Essa foi a heurstica que me motivou a fazer esse post. Nesta heurstica, a preocupao de passar
pro usurio a liberdade de ele fazer o que quiser dentro do sistema com exceo das regras que vo
contra o negcio ou interferem em outra funcionalidade.
Por exemplo quando criamos um tweet bacana poder delet-lo se estivermos afim. Mas no d pra
81
editar um tweet. Imagina se voc d um retweet e depois o usurio que fez o tweet muda o texto pra uma
coisa que voc no acha legal. Sacanagem n!
Figura 8.3: Exemplo de Liberdade e controle do usurio
4. Consistncia e padres
importante manter a consistncia e padro visual (texto, cor, desenho do elemento, som e etc).
Por exemplo, no frum GUJ (Grupo de usurio Java), quando vamos responder um post o boto
para enviar a resposta sempre da mesma cor, tamanho e texto. O elemento para cancelar a resposta
sempre tem seus padres:
Figura 8.4: Exemplo consistncia e padres
5. Preveno de erros
No uma boa ideia deixar seu usurio errar sem explicar previamente o motivo do erro. Melhor do
82
que isso, tente criar um interface que permite o usurio no errar.

A busca do Google faz isso de uma forma muito inteligente. No momento que comeamos escrever
nossa busca ele j te entrega algumas sugestes, mesmo se a gente escrever a busca com uma ortografia
errada ele realiza a busca e pergunta se estamos procurando outra informao com a ortografia correta.
Realizando uma busca no Google:
Figura 8.5: Exemplo de preveno de erros
Resultado da busca com erro de ortogrfica:
Figura 8.6: Exemplo de preveno de erros
6. Reconhecimento em vez de memorizao

O usurio no tem obrigao de decorar qual foi o caminho que ele fez pra chegar at a pgina.
Por exemplo, quando voc entra em um produto do site da Locaweb disponibilizado o caminho
que voc fez pra chegar at ele. Ns chamamos isso de breadcrumb.
83
Figura 8.7: Exemplo de reconhecimento em vez de memorizao
7. Flexibilidade e eficincia de uso

importante deixar uma experincia boa com seu sistema desde o usurio mais leigo at o mais
avanado.
Por exemplo, dentro do Trello (kanban de tarefas online com base em colunas free) quando voc est
com o foco em um carto voc pode utilizar o mouse para navegar em outros cartes, as teclas
direcionais (setas pra cima e pra baixo) ou as letras j (para baixo) e k (para cima). Teclas que so por sua
vez utilizadas no VIM, editor de texto famoso entre os desenvolvedores.
Figura 8.8: Exemplo de flexibilidade e eficincia de uso
8. Esttica e design minimalista

Por favor no encha linguia. Todo informao extra que voc deixar pro seu usurio pode na
verdade adicionar mais uma dvida, ou seja, deixe o seu layout e o contedo o mais simples e direto
possvel.
Um app que gosta muito dessa heurstica o da Nubank. Pra gerar o boleto de pagamento da sua
fatura s so necessrias duas telas e elas so bem simples e realmente objetivas.
84
Figura 8.10: Exemplo esttica e design minimalista
Figura 8.9: Exemplo esttica e design minimalista
9. Ajude os usurios a reconhecerem, diagnosticarem e recuperarem-se de erros

As mensagens de erros tem que ser claras e prximas do contedo ou ao que causou o erro.
No formulrio de cadastro do Spotify caso voc no preencha os dados necessrios ele deixa bem
claro quais campos esto faltando, com um mensagem clara e objetiva.
85
Figura 8.11: Exemplo ajude os usurios a reconhecerem, diagnosticarem e recuperarem-se de erros
10. Ajuda e documentao

uma boa no precisar dessa heurstica. Implementar documentao e sistema de ajuda sempre
chato e muitos usurios tm o costume de ignorar ambos mas, se for realmente necessrio, deixe a
documentao prxima do usurio e do elemento ou ao que tenha necessidade de uma explicao
mais detalhada.
Por exemplo, no formulrio de pagamento do Walmart tem um campo pra preencher o cdigo de
segurana do carto. Como no algo muito bvio, tem uma imagem prxima ao campo mostrando
onde fica o cdigo de segurana do carto. Essa uma boa forma de fazer uma documentao feliz.
86
Figura 8.12: Exemplo ajuda e documentao

8.2 OUTROS PRINCPIOS PARA IMPLEMENTAR INTERFACES EFICAZES

Alm das dez heursticas de Nielsen, existem outros principios para implementar interfaces eficazes.
Apresente as etapas do processo

Sequncias de aes devem ser organizadas em grupos com incio, meio e fim. O feedback
informativo ao completar um grupo de aes d ao usurio satisfao de realizao, senso de distino e
uma indicao que o caminho claro para se preparar para o prximo conjunto de aes.
Faa uma navegao clara e eficiente

Uma boa navegao ajuda o usurio a saber onde ele est e para onde quer ir. Os segredos de uma
navegao eficiente incluem:
87
Organizao - separa as areas mais e menos importantes, reflete como as pessoas pensam e as
prioridades do negcio;
Dentro do "tringulo de ouro";
Compacta, para deixar espao para o contedo;
Rtulos (labels) curtos;
Mostra visualmente, com clareza, onde o usurio est.
Figura 8.13: Exemplo navegao clara
Ttulo das pginas refora a navegao e orienta o usurio

Os elementos que tornam o ttulo das pginas eficaz so:
(Quase) sempre esto no mesmo lugar;
Est destacado visulamente;
curto;
O nome coincide com o que est na navegao;
consistente na capitalizao das letras.
Botes e Links
Normalmente, use botes para tarefas (aes), principalmente as primrias, e links para navegao.
88
Separe suas tarefas primrias, secundrias e tercirias

D s tarefas primrias lugar de destaque e foco visual. Tente limitar a uma ou duas tarefas primrias
por pgina.
Deixe sua interface rpida

A aqui no estamos falando s de tempo de carregamento! Ela deve ser fcil de escanear e ver o que
fazer, possibilitar o mnimo de cliques para ir de um lugar a outro ou para completar uma tarefa.
Mantenha proximidade
Itens relacionados devem se manter prximos.
Seletivamente copie interaes comuns e j comprovadas

Inove s onde h algo nico.
Design visual deve ter total conexo com o de interao

O design visual deve ajudar o de interao a atender os requisitos do produto. Nunca o design visual
pode estragar um trabalho de interao bem feito.
Menos mais
Interfaces do Usurio incrveis devem ser quase invisveis.
8.3 PADRES DE DESIGN DE INTERAO

Padres de design de interao podem ser hierarquicamente organizados a partir do nvel da
aplicao e ir descendo at o nvel de componentes individuais da interface. Podem ser divididos em trs
tipos:
Postural: podem ser aplicados no nvel conceitual e ajuda a determinar a postura geral do
produto. Dois exemplos mais comuns o padro transitrio e o soberano.
Estrutural: resolve problemas relacionados a disposio dos elementos de dados e funcionais
na tela. Consiste de vises, painis e agrupamentos.
Comportamental: usado em uma grande variedade de problemas relacionados a interaes
especficas com os elementos funcionais e de dados.
Postural
Uma aplicao com postura transitria significa que uma pessoa a usa por um breve perodo de
tempo. A aplicao chamada quando necessria, aparece, o usurio realiza seu trabalho nela e em
89
seguida a fecha, continuando suas atividade normais, provavelmente em uma aplicao com uma
postura soberana.
Por sua caracterstica temporria, o usurio no tem a chance de se tornar muito familiar com ela.
Logo, a interface de uma aplicao desse tipo deve ser simples, clara e ir direto ao ponto; deve ser bvia,
apresentar seus elementos claramente sem dar possibilidades a confuso ou erros. Normalmente
limitada a uma nica janela e viso.
Por exemplo, abrir o Windows Explorer para localizar e abrir um arquivo enquanto edita um outro
com o Word um tpico cenrio transitrio. A calculadora, Yahoo! Widgets e o iTunes so outros
exemplos de aplicaes com a postura transitria.
J programas que dominam a ateno do usurio por um longo perodo de tempo possui uma
postura soberana. Oferecem uma grande quantidade de funes relacionadas e os usurios tendem a
mant-la rodando continuamente, ocupando toda a tela.
Como os usurios dedicam bastante tempo usando aplicaes desse tipo, eles normalmente tm
grande interesse em crescer na curva de aprendizado e tornar-se logo usurios intermedirios. Do ponto
de vista de design, isso significa que a aplicao deve ser otimizada para o uso de intermedirios
permanentes e no ter como objetivo primrio os iniciantes (ou experts).
Aplicaes soberanas devem ser otimizadas para uso em tela-cheia ou maximizada e, como sero
utilizadas por longos perodos de tempo, deve-se tomar cuidado com a apresentao visual. Um design
excessivo, com o uso exagerado de cores e texturas, podem ser atrativos no incio, mas com o passar do
tempo torna-se cansativo para quem usa muito a interface. Na medida do possvel, mantenha um estilo
conservador. Pixels so preciosos.
Bons exemplos desse tipo de aplicaes so processadores de textos, planilhas, clientes de e-mail,
entre outros.
Estrutural
Os padres estruturais so provavelmente os menos documentados. Um exemplo bem conhecido
desse padro a estrutura macro do Microsoft Outlook, com seu painel de navegao na esquerda, um
painel de viso geral na direita, em cima, e uma rea de detalhes na direita inferior. Esse padro
vastamente utilizado, onde o painel vertical possibilita a navegao e direciona o contedo que ser
mostrado no painel de viso geral. Ao selecionar um objeto neste painel, informaes so mostradas no
painel inferior.
90
Figura 8.14: Exemplo estrutural
8.4 PADRES DE INTERAO COMPORTAMENTAIS

Padres de uso normalmente so identificados atravs da observao de como os usurios usam os
elementos de uma interface e em quo til esses elementos, e seus comportamentos, esto sendo para
que o usurio complete suas tarefas mais facilmente e mais eficientemente. Aps descobrir esses padres
de uso, criamos os padres de interaes para suportar esses padres de uso comuns.
Por exemplo, softwares de CRM normalmente vm com uma opo "novo" para criar um novo
contato. Uma vez clicado em "novo" aparece o formulrio com as opes "salvar" e "cancelar".
Figura 8.15: Exemplo de padres de interaes
Observando como os usurios usavam esse tipo de ferramenta, descobriu-se que o padro de uso era,
na maioria das vezes, aps clicar em "salvar", clicar em "novo" para cadastrar mais um contato.
Percebendo esse padro de uso, apareceu um terceiro boto no formulrio, o "salvar e novo":
Figura 8.16: Exemplo de padres de interaes
A partir da, esse comportamento pde ser mapeado em um novo padro de design de interao.
Aqui descreveremos alguns padres conhecidos de design de interao, divididos em sete categorias
principais de padres de uso:
Exploratrio
91
Navegao em grandes bases de dados

Busca avanada
Entrada e alterao de dados
Informao centralizada
Guias
Comunidade
Exploratrio
O padro exploratrio aquele que permite ao usurio explorar a aplicao. Os padres de interao
associados ao padro de uso exploratrio costumam ter as seguintes caractersticas:
Suportam navegao segura e previsvel;
Provem informaes para que o usurio se encontre;
Ajudam a unificar informao em uma nica viso que de outra forma iria requerer muitos
cliques para ser acessada;
Colocam dados e aes relevantes prximos de uma informao principal.
Algumas vezes, em vez de um modo exploratrio, pode ser interessante colocar o usurio em um
modo linear de ao. O modo linear, por exemplo, um wizard, pode ser muito til em situaes onde o
usurio no um especialista, ou quando queremos dar uma opo simplificada de ao.
Para o padro de uso exploratrio, precisamos pensar em permitir erros e em mostrar dados e aes.
Permitindo erros
Itens de menu inteligentes: So itens que dizem exatamente o que a aplicao vai fazer, incluindo
informao sobre qual objeto vai sofrer a ao, deixando a interface auto-explicativa. Nesse padro de
interao, sempre que o usurio muda o objeto selecionado (em uso), os itens de menu relativos ao
objeto so tambm mudados.
Menu de uma aplicao de Calendrio. Os itens de menu deixa claro qual ao ser realizada ao clicar
nele.
92
Figura 8.17: Exemplo permitringo erros
Undo multi-nvel: Permite reverter facilmente uma srie de aes feitas pelo usurio. Cada ao fica
no topo de uma lista medida que executada e cada undo reverte a ao que est no topo.
Possvel selecionar uma ou mais aes para desfaz-las.
Figura 8.18: Exemplo permitindo erros
Sandbox: Permite ao usurio salvar dados para que possa ser utilizado no futuro. Assim, fornecido
93
ao usurio um lugar para armazenar aquilo que deve persistir durante o uso.
Aqui possvel adicionar um produto a "lista de desejos" para poder decidir a compra no futuro.
Figura 8.19: Exemplo permitindo erros
Mostrando dados
Inspeo: o usurio precisa frequentemente ver mais informaes sobre um determinado item na
mesma tela em que est vendo o item. Nesse caso, usa-se uma rea para expor detalhes, normalmente
prxima base da pgina. Esse tipo de elemento tipicamente usa o recurso de expandir/recolher.
Na parte de baixo, so mostradas informaes mais detalhadas (documentos, notas, contatos,
produtos, cotas) sobre o item Contrato mostrado acima.
94
Figura 8.20: Exemplo mostrando dados
Tabs dentro de pginas: Permite ver o contedo detalhado sobre o contedo principal que est
sendo mostrado.
As tabs Descrio e Dados Tcnicos apresentam o contedo detalhado do produto.
95
Mouseover com contedo rico: Utilizado quando queremos dar ao usurio a possibilidade de ver
mais informaes, contextualizada, sobre um determinado item. Normalmente a informao
apresentada contem um contedo mais rico que apenas texto, tais como grficos, links ou aes.
Ao passar o mouse em um ponto do mapa, mais informaes so mostradas referente a esse ponto.
Alm de textos, algumas aes tambm so disponibilizadas.
Mostrando aes
96
Aes inline: O usurio precisa executar uma ao no item que est sendo mostrado. Coloque
botes, links e outras aes prximos aos itens relacionados ao.
As aes que podem ser realizadas no item so mostradas prximo ao prprio item.
Figura 8.23: Exemplo mostrando aes
Navegao em grandes bases de dados

Esse padro mostra solues para quando o usurio se depara com grandes quantidades de dados em
nossa aplicao. De forma geral, grandes conjuntos de dados so normalmente navegados por meio de
hierarquias. Existem algumas alternativas, uma vez que as hierarquias:
So usadas em excesso;
Podem ser difceis de navegar por razes de performance e complexidade;
Nos do a tentao de mostrar os dados da forma que eles esto armazenados no banco de
dados e no da forma que o usurio entende;
Com 3 ou 4 nveis, a hierarquia j se torna muito difcil de navegar. 0
Acordeo: Quando a informao que se deseja mostrar no cabe em uma hierarquia, usa-se o
acordeo (como por exemplo, pargrafos de texto). No acordeo, ao clicar em um painel, uma outra rea
revelada com as informaes que se quer apresentar.
Ao clicar em cada ttulo, expande-se uma rea com mais informaes (texto ou outros elementos),
fazendo um efeito igual ao da sanfona. Para esconder a rea, basta clicar novamente no ttulo.
97
Figura 8.24: Exemplo navegao em grande bases de dados
Tree-table: Uma mistura de hierarquia com tabela, pois dessa forma se consegue mostrar mais
informaes ao usurio para facilitar sua navegao. Coloque a hierarquia na primeira coluna e os
atributos do item nas demais colunas. As linhas - um item por linha - normalmente so clicveis.
A coluna Nome contm a rvore de hierarquia. Clicando no (+), os itens so expandidos e seus
atributos (localizao, descrio) so mostrados nas demais colunas.
Gaveta: Usado quando necessrio mostrar informaes de um item da tabela que quebra a
formatao dessa tabela. Utilize, nesse caso, linhas de tabela expansveis que "abre" apresentando o
contedo. A estrutura de grid deve ser diferente da usada na coluna da tabela, para evitar uma
98
visualizao confusa.
A linha da tabela se expande para poder mostrar algum contedo relacionado a ela, mas bastante
extenso para caber adequadamente em uma coluna.
Filtro de coluna: Quando a tabela contm muita informao e o usurio quer filtrar somente as
informaes relevantes baseadas em um determinado critrio.
99
Ao clicar na coluna, abre-se um modal com vrias opes de filtro referente a coluna clicada. Pode-se
selecionar uma ou mais itens para que a tabela seja filtrada por essas opes.
100
Busca avanada
Quando falamos de busca, alguns pontos merecem ateno:
Construir uma consulta de uma busca usando somente palavras-chave pode ser bem difcil
dependendo dos dados;
Buscas que no retornam informaes teis podem ser frustrantes. Os usurios podem nunca
mais voltar a seu site, ou pior, abarrotar seus canais de atendimento;
Mostrar atributos pode aumentar a probabilidade dos usurios chegarem ao conjunto de
informaes que eles procuram (algumas vezes compensa a falta de uma rotulao de
contedo eficiente);
Normalmente os usurios assumem que a busca baseada em linguagem natural;
Fornea exemplos de como pesquisar prximo caixa de busca.
Para interaes de busca avanada, apresentamos os 4 padres abaixo:
Busca baseada em atributos: Utilizado quando se tem um nmero menor de atributos (de 1 a 10)
que podem ser usados para alcanar o resultado de busca desejado. Os campos devem ser organizados na
forma de formulrio caso a quantidade de atributos seja grande.
Buscas utilizando apenas um atributo, que restringe a busca a um tipo de produto especfico.
Figura 8.29: Exemplo busca avanada
Neste caso, com a quantidade maior de atributos, a organizao dos campos um ponto importante
que deve ser bem pensado.
101
Busca baseada em contexto: Se o nmero de atributos para escolher muito grande - mais de 20 - a
busca por atributos torna-se ineficiente. Uma soluo diminuir o escopo da busca forando o usurio a
escolher antes um contexto onde deseja pesquisar e s depois apresentar os atributos especficos.
Para fazer a busca preciso primeiro escolher o contexto desejado. Neste caso, ser para fotos. Apenas
depois de escolher o contexto que so mostrados os campos de atributos especficos para ele.
Refinamento do resultado usando atributos: Quando a busca retorna uma grande quantidade de
informao, o usurio pode selecionar alguns atributos para filtrar esse resultado. O ideal utilizar
controles apropriados ao contedo para o filtro de atributos.
Filtro de atributos para refinamento do resultado. Neste exemplos, pode filtrar por marcas, cidades,
preos, etc.
102
Exibio do volume de contedo retornado: Usado para controlar o volume dos dados sendo
apresentados. Pode ser atravs de links que ajustam o layout da pgina para mostrar mais ou menos
detalhes ou outros controles que ajustam o volume em si do contedo, apresentando mais ou menos
informaes.
103
Na primeira imagem, a forma de exibio em lista e na segunda, o mesmo resultado em tabela
Entrada e alterao de dados

So padres utilizados quando o usurio precisa informar dados.
Autocompletar: Utilizado quando o usurio precisa entrar uma informao em um campo texto e
pode no saber exatamente o que informar ou tem grandes chances de digitar incorretamente.
104
Nesse exemplo, ao digitar "VENE" uma lista aparece com sugestes que completam o que o usurio
escreveu no campo.
Figura 8.35: Exemplo entrada e alterao de dados
Apresentao visual de seleo: Usado quando difcil explicar apenas em texto as opes
disponveis para seleo. Nesses casos, o uso de imagem mais texto bem indicado.
Alm do label indicando o tipo de alinhamento, tambm tem uma imagem para cada opo que
apresenta visualmente como a figura ser posicionada com relao ao texto.
105
Figura 8.36: Exemplo entrada e alterao de dados {w=70%
Save for later: Esse padro normalmente usado quando uma tarefa muito longa para ser
completada de uma vez s, ou quando existe um fluxo de aes que possibilite incio/parada/reincio.
Nessas situaes, d ao usurio a opo de salvar para continuar depois.
Um boto disponibilizado para que o usurio possa salvar um documento (artigo, notcia, pgina) e
depois voltar a ele para continuar com o fluxo de edio (passar para reviso, publicar, etc).
106
Figura 8.37: Exemplo entrada e alterao de dados
Informao centralizada
Nesses padres, sero mostradas algumas maneiras comuns de apresentao de informaes que
precisam ser compreendidas pelo usurio (ou ao menos fazerem sentido) quando ele "passa o olho" por
elas.
So trs principais: cabealhos, visualizaes interativas e painis (dashboards).
Cabealho: Usado quando o usurio precisa de um contexto mais abrangente que apenas um ttulo
de pgina para entender a informao apresentada. Nesses casos, o topo da pgina mostra uma rea com
dados relacionados ao contedo. O cabealho tambm pode fornecer aes relevantes para a pgina e
que, quando utilizadas, interferem no contedo sendo apresentado. interessante disponibilizar o
recurso de expandir/ocultar a rea do cabealho para que o usurio utilize o espao da forma mais
conveniente.
O cabealho mostra alguns dados que identificam o projeto que est sendo manipulado na pgina e
tambm possibilita a navegao por projetos existentes. Ao navegar de um projeto ao outro,
automaticamente o contedo da pgina atualizado. Aqui o usurio pode esconder (hide) o cabealho.
107
Figura 8.38: Exemplo Informao centralizada
Visualizao interativa: Esse padro usado quando a informao fica muito confusa se
apresentada apenas com textos. Os dados mostrados graficamente e com opes interativas ajudam na
compreenso do que est sendo visualizado.
108
109
Apresentao de informaes usando grficos. Clicando em um ano (primeira imagem) so mostrados

os dados ms a ms. E em cada ms, tambm possvel interagir para obter mais informaes sobre o
assunto (segunda imagem).
110
Exemplo com mapas. Na primeira imagem voc visualiza no mapa a rota de um ponto a outro, feita de
transporte pblico. possvel interagir, arrastando a rota para alter-la ou escolhendo algumas aes
diretamente no mapa. Na segunda imagem, a rota feita com bicicleta. Em ambos os casos, o trajeto
apresentado textualmente e tambm representado visualmente no mapa.
111
Painel: Esse tipo de padro resolve o problema de ter que fornecer vises distintas de vrios tipos de
informao. Agrupe essas informaes em uma nica tela que mostre os dados-chave de uma forma
visual apropriada, como se fosse uma fotografia. Escolher a apresentao grfica mais adequada para
cada tipo de informao, alis, um ponto crucial para a eficincia do painel. Alguns pontos de ateno
para no errar no uso desse padro:
Painis normalmente possuem visualizaes interativas de dados;
Muitos erram ao mostrar dados que no so teis ao usurio ou colocam grficos e outros
elementos sem um contexto que d sentido a eles;
O uso de mecanismos inapropriados prejudica a comunicao do contedo;
Elementos 3-D frequentemente so problemticos.
Alguns exemplos de painis, utilizando grficos de vrios tipos, mapas (primeira e segunda imagens).
Em algumas situaes (terceira imagem), o uso de tabelas ainda o mais indicado.
112
113
Guias
o uso de mensagens, instrues e ajuda contextual para guiar o usurio durante a execuo de uma
tarefa.
Trs padres de interao comumente usados para Guias so:
Sistema de mensagens: usado quando o usurio precisa ser informado sobre as possveis
consequncias de uma ao que ele vai tomar. Cada ao deve ter explicaes claras, os prximos passos
precisam estar visveis, caso existam, e deve fornecer fcil acesso a fontes de dados relevantes para ajudar
o usurio na tomada de deciso.
114
Ajuda contextual: Esse padro utilizado quando o usurio precisa da informao para ajud-lo a
completar uma tarefa, seja para entender determinadas terminologias que a tarefa apresenta ou o motivo
de um dado est sendo solicitado ou como deve preench-lo, etc. Apresente essa ajuda exatamente onde
o usurio precisar dela, j contextualizada, mais que dar acesso a links genricos de ajuda.
Nesse exemplo, o link leva para mais informaes que ajudar o usurio a decidir qual cor escolher
para o anel usado na embalagem da medicao que ele est pedindo.
115
Ao passar o mouse pela "?", abre um box com explicao sobre o que significa e qual a finalidade
daquela informao que est sendo solicitada ao usurio.
116
Guide me: Padro utilizado quando o usurio j tem experincia no que est fazendo, mas pode
faltar conhecimento para completar alguma parte dessa tarefa maior. Nesses casos, use uma rea da tela
(ou tela separada) que guiar o usurio atravs de questes, ou informaes detalhadas, para determinar
"como" ou "se" eles devem tomar determinada ao ou escolher determinada opo, sem perder o
contexto da tarefa maior.
No exemplo acima, a funcionalidade de busca em si pode ser facilmente usada pelo usurio, mas foi
colocado um guia com questes que o ajuda a limitar o resultado da busca aos mouses que mais se
adequam s suas necessidades.
Comunidade
Esses padres esto relacionados a um tema bem em voga ultimamente: padres de uso e interao
para mdias sociais, ou seja, padres para funcionalidades presentes em qualquer ferramenta online que
permita a interao social.
Votao (vote to promote): Usado quando existe a necessidade de promover (ou rebaixar) alguma
informao ou item em uma comunidade. Fornea um boto, ou alguma outra forma de call to action,
117
prximo ao contedo que se quer promover. interessante fornecer detalhes contextuais, como a
quantidade de votos j recebidos, quando for possvel.
Figura 8.50: Exemplo votao - 1
Figura 8.51: Exemplo votao - 2
Um exemplo que permite tanto promover como rebaixar um item (imagem 1). Em alguns casos precisa
ser inscrito para votar (imagem 2).
Avaliao (rating): Quando o usurio precisa dar sua opinio ou dar sua nota sobre um
determinado contedo, mostre itens clicveis (um bastante utilizado so estrelinhas) com uma escala
clara de avaliao e o estado desse mecanismo de avaliao deve iniciar "vazio".
118
Avaliao de itens de uma loja virtual. Uma rea com as avaliaes j realizadas e uma rea que
mostra os comentrios.
Figura 8.52: Exemplo avaliao
Acompanhamento (follow): Utilizado quando o usurio precisa acompanhar uma questo ou um

tpico dentro de uma comunidade. Use algum tipo de call to action prximo ao item que pode ser
acompanhado, junto com informaes que deixem claro o que ser acompanhado.
Clicando no boto, exibido formas de acompanhamento com informaes contextualizadas que
deixam claro o que e como est sendo acompanhado.
119
Figura 8.53: Exemplo acompanhamento
Status de classificao (ranking): Quando existe a necessidade de comunicar dentro da comunidade

o status/posio de um usurio, fornea esse status prximo informao sobre o usurio.
No exemplo acima, alm da posio no ranking, mostrado tambm informaes sobre a atividade do
usurio
Figura 8.54: Exemplo status de classificao
120

8.5 GAMESTORMING - COLOCANDO EM PRTICA OS HEURSTICAS

DE NIELSEN
Objetivo
Entender na prtica sobre os princpios de Nielsen.
Ambiente
1. Duas cores de post-its;
2. Caneta.
Regras
Passo a passo
Metade de um time vai se tornar consultores de usabilidade e ir em outro time e passar pelos 10
heursticas de Nielsen, depois a outra metade do time faz o mesmo trabalho. Enquanto estiver passando
pelas heursticas de Nielsen os consultores escolhem um cor de post-it para anotar os problemas
encontrados e a segunda cor como soluo.
8.6 PROTTIPOS
A criao de um prottipo um passo importante antes que o produto seja lanado no mercado.
Alm de servir como uma ferramenta de comunicao - assim como os wireframes - prottipos tambm
tm o propsito de explorao e validao.
8.5 GAMESTORMING - COLOCANDO EM PRTICA OS HEURSTICAS DE NIELSEN
121
PROTTIPO um modelo da aplicao que deve permitir que as pessoas o manipulem de alguma
forma e no deve ser um sistema desenvolvido completamente.
Como explorao, por exemplo, interagir com o prottipo de uma idia ajuda a descobrir questes
estruturais do produto, como caractersticas que ele deve ter e esto faltando. Ou ento, fazer prottipos
simples de vrias conceitos pode ajudar a decidir qual o melhor para seguir adiante.
Como validao, o uso de prottipos permite avaliar interaes-chave antes de construir todo um
design baseado nessas interaes, e a diminuir tambm o risco de erros de usabilidade. Alm disso,
prototipar e testar as opes possveis evita os argumentos baseados em opinies.
Ou seja, prottipos so usados para experimentar e ver aquilo que funciona, tanto para o designer,
quanto para o cliente e usurio. E o quanto antes isso for feito, menos esforo (e custo) necessrio para
corrigir o rumo e conduzir o desenvolvimento do produto para a direo correta.
A varivel mais importante na construo do prottipo sua fidelidade, que pode ser baixa ou alta.
E a fidelidade multidimensional. Duas dimenses essenciais so a visual e a funcional. No tem como
dizer que uma ou outra fidelidade a correta, mas sim que e mais apropriada. E para saber qual a
mais apropriada, vrios pontos precisam ser considerados, como:
As questes que o prottipo precisa responder;
O nvel de interatividade do design;
A cultura da empresa;
A metodologia de desenvolvimento que a empresa segue;
Como os usurios reagem a um nvel baixo de fidelidade;
Se existem padres visuais j estabelecidos;
Etc.
Mltiplas combinaes de fidelidade so possveis na criao de um prottipo:
Baixa Fidelidade Visual (BFV)
Baixa Fidelidade Funcional (BFF)
Alta Fidelidade Visual (AFV)
Alta Fidelidade Funcional (AFF)
AFV - Alta fidelidade Visual

Normalmente, AFV mais apropriada quando queremos testar se o design visual no prejudicar o
design de interao feito ou a usabilidade da aplicao; e/ou quando o prottipo for usado por pessoas
(clientes ou usurios) que normalmente ficam confusos ao se depararem com wireframes, prejudicando
122
8.6 PROTTIPOS
assim a qualidade das respostas que se quer obter. E, se j existe padres visuais bem estabelecidos, a
facilidade para aplic-los em um prottipo estimula o uso de um de AFV.
AFF - Alta fidelidade funcional

AFF mais adequado quando necessrio saber se as interaes-chave funcionam, se o design
implementa os requisitos como os analistas esperam e/ou para que o time de desenvolvimento entenda
com clareza quais os fluxos da aplicao e como ela se comporta. E principalmente se o produto for uma
aplicao mais complexa, com riqueza de interaes, o AFF mais apropriado. Tambm, do mesmo jeito
que o AFV, mais indicado o uso do AFF quando as pessoas ficam confusos vendo apenas wireframes.
Dimenso de contedo
Alm das dimenses visual e funcional, uma dimenso tambm considerada a de contedo.
Prottipos com contedos ruins, que no fazem sentido no contexto da aplicao, normalmente
produzem resultados ruins. Sempre que possvel, utilize um contedo plausvel.
Ferramentas
E as ferramentas para desenvolver prottipos so bastante variadas, indo de papel&caneta, passando
por ferramentas de elaborao de wireframes, at codificao com HTML, CSS, Javascript, etc. A escolha
depende de vrios fatores, como custo, habilidade de quem vai desenvolver, fidelidade que se quer obter,
entre outros. Alm disso, no necessrio se limitar a uma nica ferramenta: pode-se comear com
papel&caneta para concepo e explorao, validar com um prottipo de alta fidelidade funcional no
Axure e validar mais uma vez, quando o design estiver mais elaborado, com um prottipo feito em
HTML/CSS e Javascript.
8.7 GAMESTORMING - PROTOTIPAGEM EM PAPEL

Objetivo
Desenvolver um prottipo de baixa fidelidade sem curva de aprendizado de uma ferramenta,
tornando possvel o trabalho em um time heterogneo.
Ambiente
1. Folhas coloridas;
2. Post-its;
3. Cola;
4. Canetinhas;
5. Tesoura;
6. Rgua;
123
7. E criativade.
Regras

124
CAPTULO 9
USABILIDADE EM DISPOSITIVOS MVEIS
"Os detalhes no so detalhes. Eles so o design." -- Charles Eames

Por se tratar de outro contexto de uso e outro pblico, pensar em usabilidade para dispositivos
mveis pode vir a ser um desafio em equipes que deixam para pensar nessa tipo de mdia apenas no final
do projeto/prazo.
Com o uso frequente desse tipo de mdia o grau de exigncia de seus usurios com relao a interface
cresceu tanto que cerca de 60% desses usurios tendem a abandonar uma pgina se ela no oferecer uma
experincia mobile boa.
Pensar em mobile no mais questo de ter um diferencial, fazer o essencial. uma questo que
deve ser pensada e desenvolvida desde o incio do planejamento do projeto.
9.1 LEI DE FITTS

Tentando prever, matematicamente, o tempo necessrio para que um corpo se mova de um ponto a
outro ponto, Paul Fitts publicou uma frmula para isso em 1954, onde leva em considerao alguns itens
como a distncia entre esses pontos e a rea de superfcie do ponto final. Esse clculo foi chamado de Lei
de Fitts.
Trazendo essa lei para o meio digital, pode-ser trocar a palavra corpo pela palavra mouse ou dedo, e
manter o objetivo para qual foi criada, essa ltima por conta do advento do mobile. Por exemplo, podese prever o tempo que levaria para que uma pessoa escolha uma opo em um submenu depois de clicar
em um dos itens principais de um menu, ou o tempo para clicar em um boto call to action depois de
logar em um sistema.
9 USABILIDADE EM DISPOSITIVOS MVEIS
125
Figura 9.1: Lei de Fitts
Por esse motivo que uma boa prtica manter a rea clicvel de um checkbox no check em si, e no
texto ao lado tambm, justamente para que o alvo fique mais fcil de ser clicado:
Figura 9.2: Lei de Fitts
Outra questo que necessria levar em considerao para aplicar a Lei de Fitts em interfaces
desenvolvidas para dispositivos mobile a orientao do dispositivo em si e em qual delas (paisagem ou
retrato) que o usurio mais interage com o aplicativo.
Ainda pensando nessa questo, h um pesquisa que indica que cerca de 50% dos usurios interagem
com a tela do celular apenas com uma mo e 15% com as duas, como isso no uma regra, o mais
indicado a realizao de testes com usurios em cada projeto especfico para chegar em nmeros mais
precisos.
126
9.1 LEI DE FITTS
Como os usurios realmente seguram seus dispositivos mobile

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

9.2 LEI DE HICK

Em um formulrio de cadastro, muitas vezes o usurio precisa escolher alguma opo para
continuar. O tempo para escolher entre uma das opes aumenta proporcionalmente junto com o
nmero de opes apresentadas. E essa relao entre tempo e escolhas, que se trata a Lei de Hick:
Lei de Hick
O tempo que leva para fazer uma deciso aumenta com o nmero de opes apresentadas.
Quanto mais escolhas so eliminadas, mais agradvel a experincia do usurio pode ser, mostrando a
importncia da simplicidade. Ela se aplica tanto na web quanto no nosso cotidiano fora dela, como
quando vamos a algum restaurante com muitas opes no cardpio e demoramos um tempo
considervel para escolher um prato.
Um exemplo voltado para web, em uma tela em que deve-se escolher um investimento desejado:
9.2 LEI DE HICK
127
Figura 9.3: Lei de Hick - Exemplo
9.3 THUMB ZONES

O termo foi usado pela primeira no livro "Designing Mobile Interfaces" (Steven Hoober), e refere-se
a rea mais confortvel para toque com uma mo s. Pesquisas indicam que 49% dos usurios interagem
mais com o celular usando apenas uma mo, e usando o polegar para tocar na tela. Com isso, a
preocupao de onde colocar elementos de interao na tela ganha mais uma varivel, se confortvel de
se alcanar ou no.
128
9.3 THUMB ZONES
Figura 9.4: Thumb Zone - iPhones
Uma das justificativas da Apple em no aumentar o tamanho da tela de seus aparelhos, era
justamente por conta disso. De nada serve um elemento de interao (um boto por exemplo), se ele est
fora de alcance. Ela acabou sucubindo a telas maiores de 4" por conta de presso mercadolgica do setor,
os consumidores queriam telas maiores. A soluo foi "descer" a interface quando o usurio d dois
toques no boto home, deixando-a mais alcancvel para os polegares.
Por conta da Thumb Zone que o Google, com seu padro de interface Material Design, colocou o
call to action em suas aplicaes na parte de baixo da interface, para tirar uma possvel barreira de uso do
usurio com a aplicao. Mesmo caso com o burguer icon no Alura, localizado na parte inferior direita
da tela. Em ambas as empresas foi descoberto por meio de pesquisas que seus usurios usavam mais o
celular com a mo esquerda, por isso do thumb zone espelhado.
9.3 THUMB ZONES
129
Figura 9.5: CTA - Thumb zone
9.4 ENRIQUECENDO SEU PRODUTO COM MICROINTERACTIONS

No nosso dia a dia realizamos tarefas como: aumentar o volume do rdio, trocar o canal da TV, abrir
um torneira e fechar a porta. Todas essa pequenas tarefas o que chamamos de microinteractions.
Pensando da mesma forma no mundo web, um usurio no ecommerce adiciona o produto em um
carrinho, navega por um carousel de fotos do produto, clica em botes e por a vai. Essas so as
microinteractions detro da web.
Assim que voc identificar as microinteraes dentro do seu produto o prximo passo criar um
"feedback" (essa uma das 10 heursticas de Nielsen) "prxima do mundo real" (essa aqui outra
heurstica de Nielsen). Dessa forma, sem criar uma nova funcionalidade, voc torna o seu produto mais
divertido que o do seu concorrente.
130
Alguns GIFs:
http://blog.caelum.com.br/enriquecendo-seus-sistemas-com-microinteractions
As microinteractions so focadas em melhorar a experincia do usurio sem a necessidade de se criar

uma nova funcionalidade para o produto.
Exemplos em vdeo
Nos links abaixo voc pode ver uma animao desenvolvida pela Smart Design que mostra vrias
http://bit.ly/1nCZiJ2
ou
microinteractions
presentes
no
nosso
cotidiano.
https://vimeo.com/91559869
Pode ser algo visivelmente simples de ser desenvolvido, mas no to simples de colocar na prtica.
Exatamente por este motivo, Dan Saffer, designer que criou o termo, tambm criou um fluxo pra
facilitar o desenvolvimento das nossas microinteraes:
Figura 9.6: Fluxo - Microinteraes
Os pontos dessa proposta de Dan Saffer:
Trigger - Inicia a microinterao

Como o usurio d o start na microinterao, pode ser um mouse over, um click, um toque na tela
do celular, entre outros.
Rules - O que acontece

Esse o momento de levantar todas as regras relacionadas a microinterao. Por exemplo, dentro da
plataforma de ensino de idiomas Duolingo, voc no pode errar a frase que est realizando a traduo.
131
Figura 9.7: Regra - Duolingo
Feedback - Situada no que est acontecendo

Com todas as regras (que podem ser invisveis) que voc levantou em mos, esse o momento de
definir como ser apresetando para o usurio quando ele acionar uma dessas regras. Por exemplo,
quando usurio cometer um erro na traduo e em seguida clicar no boto (trigger) 'Verificar', a
plataforma deve mostrar para ele qual palavra ele errou:
Figura 9.8: Feedback - Duolingo
132
Vale a pena lembrar que o som de erro tambm um feedback. Como o som da inicializao de um
Mac ou mensagens de erro de um Windows.
Loops
utilizado pra definir de quanto em quanto tempo a microinterao vai acontecer. Ou se ela se
repetir com alguma interao do usurio ou algum conjunto de regras definido.
Modes
So modos diferentes da mesma microinterao que pode ser afetado por uma interao do usurio.
Por exemplo, dentro do Duolingo pra voc conseguir fazer o mdulo 2 necessrio fazer o mdulo 1.
Mas existe um exerccio que voc pode pular vrios mdulos com base no seu conhecimento.
Figura 9.9: Modes - Duolingo
Com as microinteraes estamos melhorando a experincia do usurio no Alura, Casa do Cdigo e

no site da Caelum sem a necessidade de criar novas funcionalidades.
133

9.5 TIPOGRAFIA
Outro item importante para qualquer projeto a escolha de uma boa famlia de fontes, que faa
sentido com o projeto e o contexto de uso. A importncia de uma boa fonte pode ser negligenciada pois
na maioria dos casos no possui o mesmo impacto visual como as cores, imagens ou o layout em si.
O design nos ajuda a passar uma mensagem. E no contexto web a forma mais comum de fazer isso
atravs de textos, tornando a tipografia um item muito importante a ser avaliado.Escolhendo mal, seu
contedo pode se tornar ilegvel ou passar a mensagem errada para o usurio.
Podemos separar famlias de fontes em diversos grupos, e dos dois principais, o que difere de um
para o outro o uso da serifa.
Figura 9.10: Serifada e sem serifa
134
9.5 TIPOGRAFIA
Serifa
Pequeno ornamento nas extremidades dos tipos (caracteres)
Fontes serifadas
Fontes mais srias, passam uma idia de algo com mais credibilidade, remete a algo mais tradicional.
Um bom uso dessas fontes em grandes blocos de texto, sejam impressos ou digitais, como livros ou
posts com muito contedo. Algumas fontes:
Times New Roman;
Palatino;
Georgia;
Palatino;
Monaco.
Fontes no serifadas
Fontes mais modernas e geomtricas, do a sensao que foram desenvolvidas digitalmente, algo
mais industrial. Fontes muito utilizadas pela rea de branding para confeco de logotipos.
Helvetica;
Arial;
Verdana;
Open Sans;
Segoe UI.
Figura 9.11: Times New Roman e Arial
Outros grupos
9.5 TIPOGRAFIA
135
H outros grupos de fontes como:

monoespaadas (ex: cdigos HTML);
cursivas (ex: convites impressos);
fantasias (ex: logotipos);
Download de fontes
Lembre-se de SEMPRE verificar a licena de uso das fontes que deseja usar
http://www.dafont.com
https://www.fontyukle.net
http://abduzeedo.com/tags/ffff
Quantidade e peso
Quando um site possui muitas fontes, elas comeam a chamar mais ateno que o prprio contedo,
se tornam distraes. Limitar o nmero de fontes utilizadas no layout, em dois ou trs, uma boa ajuda
para que isso no acontea.
Figura 9.12: Simulao - Muitas fontes
Para criar um senso de hierarquia visual a fim de diferenciar elementos em uma pgina ou app,
136
9.5 TIPOGRAFIA
podemos usar fontes com diferentes pesos e tamanhos. As variantes mais conhecidas so:
Regular;
Italic;
Negrito.
No so todas as fontes que possuem essas variantes. E algumas possuem at um nmero bem
elevado, como a fonte Helvetica:
Figura 9.13: Helvetica e seus diferentes pesos
Altura da linha
Quando vamos abrir uma conta em um banco ou fazer um financiamento, normalmente os
contratos parecem meio apertados demais para a folha. Isso no um mero acidente ou acaso.
Textos assim passam essa sensao de aperto para deixar o leitor desconfortvel, assim ele tende a
reter menos o contedo ali escrito e o olho tende a falhar quando vai para a prxima linha. No caso de
contratos, eles ainda deixam a folha sem margens para reforar essa sensao.
Por isso, outro elemento importante na tipografia que ajuda a evitar esse sentimento altura da
linha, que o espao entre cada linha de texto.
9.5 TIPOGRAFIA
137
Figura 9.14: Boa altura de linha X m altura de linha
Aumentando a altura da linha (line height) alm de aumentar a legibilidade dos textos, pode deixar
seu layout com um aspecto mais clean. Uma altura de linha mnima recomendada 1.2. Aqui um
exemplo de uma altura de linha sem alterao (1) e uma altura de linha de 1.5 em um texto:
138
9.5 TIPOGRAFIA
Figura 9.15: Altura de linha de 1 X altura de linha de 1.5
Outros cuidados com a fonte
escolher com base na identidade da empresa;

no distorcer;
9.5 TIPOGRAFIA
139
espaamento entre letras.
9.6 GAMESTORMING - CRIANDO 8 STEPS COM FOCO NA

USABILIDADE
Objetivo
Desenvolver outro 8 Steps, agora levando em conta todos pontos de usabilidade desse captulo.
Ambiente
1. A histria que foi escolhida pelo time;
2. Folha A3;
3. Minmo de 4 cores de caneta por aluno;
4. Folhas A4 para rascunho;
5. 3 bolinhas (votos positivos) verdes por integrante do time;
6. 1 bolinha (voto negativo) vermelha por integrante do time.
Regras
Durao de 80 minutos;
Cada integrante do time deve fazer um 8 Steps mesmo sem habilidades artsticas.
Passo a passo
1. Time escolhe uma histria para solucionar as interaes;
2. Divide a folha A3 em 8 partes iguais, cada parte da A3 vai ser um tela ou interao que o usurio tem
que realizar com a finalidade de resolver a histria escolhida pelo time.
3. O time precisa definir o que cada cor de caneta vai significar, por exemplo: Preta - desenho; Azul Mouse; Verde - Touch; Vermelha - Teclado.
4. Com a histria e as cores definidas basta partir para soluo com telas e interaes, cada integrante
com sua folha A3, sem colar;
5. Colar todas as solues na parede;
6. Cada integrante apresenta sua soluo para o restante do grupo;
7. Depois cada integrante vota de forma livre utilizando primeiro votos positivos depois o negativo
(sem discusses nesse parte);
8. Com os votos finalizados o time se junta a frente dos desenhos e discutem sobre o que querem
construir;
9. Por fim, o time se junta para criar um verso final da soluo da histria.
140
9.6 GAMESTORMING - CRIANDO 8 STEPS COM FOCO NA USABILIDADE
CAPTULO 10
DESIGN VISUAL
A interface onde as decises tomadas pelo designer de interao, de como as pessoas usam o produto e
de como este deve responder, so percebidas. Ou seja, a interface onde as funcionalidades invisveis de
um sistema fica visvel e pode ser acessada e usada.
O designer de interao na maioria das vezes j cria interfaces que so visuais ou que, ao menos, tem
alguns componentes visuais. Como j dito anteriormente, todos os elementos dos planos de estrutura e
esqueleto da experincia do usurio (design de interao, arquitetura da informao, design de interface,
de navegao e de informao) devem ser considerados como uma unidade no desenvolvimento de um
produto, no devendo ser tratados isoladamente. Alm disso, quanto mais habilidades um designer tiver
para lidar com todos esses tipos de designs, at mesmo o visual, mais completo seu trabalho ser.
O design visual carrega a responsabilidade de comunicar as possibilidades, limitaes e estados das
interaes. Ele deve estar intrinsecamente ligado ao design de interao, deve construir a narrativa visual
da interao.
Em vez de avaliar as idias do design visual apenas considerando o que aparece ser esteticamente
agradvel, deve-se focar em quo bem elas funcionam, em quo efetivamente ele suporta os objetivos
definidos nos planos inferiores da experincia do usurio.
10.1 O PRINCPIO C.R.A.P

Quatro princpios bsicos, conhecidos como C.R.A.P., so essenciais para construir um design visual
eficiente e de qualidade.
Contraste
Contraste visual fundamental para direcionar a ateno do usurio para as partes essenciais da
interface, as partes que queremos que obrigatoriamente ele veja. Contraste ajuda o usurio a entender a
relao entre os elementos de navegao na pgina e a principal forma de comunicar grupos de
informao. Mas para que o contraste funcione, as diferenas devem ser significantes. Diferenas sutis
acabam causando mais confuso. Contraste pode ser feito, por exemplo, utilizando diferentes cores ou
diferentes fontes de texto.
O destaque na rea "Recent Work" dado com o contraste criado pelo box rosa.
10 DESIGN VISUAL
141
Figura 10.1: Exemplo de contraste
Repetio
Repetio tem grande relao com consistncia. Diferentes reas da aplicao devem refletir a
mesma abordagem de design e um mesmo elemento da interface deve transmitir a mesma idia em
qualquer parte da aplicao. Alm disso, repetir elementos cria um senso de unidade e gera interesse
visual. Repetio deve ser considerada tanto para elementos grficos como para tipografia, uso repetitivo
de fontes ou mesmo cores.
Os ttulos de cada artigo tem o mesmo formato e tamanho, bem como a imagem, que um link para o
site citado no artigo. Tambm, o uso do mesmo esquema de cores, inclusive nos logos da lateral que foram
tratados para usar uma nica cor, ressalta a repetio.
142
Figura 10.2: Exemplo de repetio
Alinhamento
Alinhamento fornece uma ncora visual e faz a pgina parecer mais unificada. A regra bsica do
alinhamento que todo elemento no design deve se alinhar ou relacionar com um outro elemento.
Linhas imaginrias provem uma conexo visual entre os elementos, criando um relacionamento entre
eles, e um equilbrio geral para a pgina ou tela, fazendo-a parecer clara, limpa e menos confusa.
Nessa pgina possvel ver linhas imaginrias (ressaltadas em azul) que definem o alinhamento do
contedo.
143
Figura 10.3: Exemplo de alinhamento
Proximidade
Proximidade trabalha em conjunto com o alinhamento, onde os elementos relacionados devem
tambm se relacionar visualmente, atravs da aproximao. O contrrio tambm vlido: aproximar
elementos que no tm nenhum tipo de relao pode confundir o usurio. Um design que no usa bem
esse conceito ser difcil de seguir.
Para cada ttulo de seo, tem um subttulo logo abaixo, que cria uma unidade entre esses dois
elementos. O contedo da seo tambm se relaciona com o ttulo atravs da proximidade do contedo
com seu ttulo e do espaamento um pouco maior para o ttulo da seo seguinte.
144
Figura 10.4: Exemplo de proximidade
Alm dessas ferramentas, outros pontos precisam ser levadas em conta para um bom trabalho de
design visual:
Tipografia: uma escolha importante no design visual, possibilitando no apenas a
legibilidade dos textos como cria uma identidade visual para a marca. Proporciona tambm
uma hierarquia nos textos, utilizando diferentes tamanhos e pesos para ttulos, textos,
145
comentrios, disclaimers, guiando melhor o usurio atravs da informao.

Cores: podem ser uma das mais efetivas maneiras de comunicar a identidade de uma marca.
Tambm tem importante papel na criao de contraste e uniformidade. Para designers de
interao, cores so usadas como dicas para o uso de algumas funes ou para indicar
importncia.
E como ltima dica, elimine do layout qualquer informao que no seja relevante para seu
pblico.

10.2 ESPECIFICAO DO DESIGN

O nvel de especificao que o designer de interao deve elaborar depende de vrios fatores, como a
proximidade dele da equipe de desenvolvimento do produto, da cultura organizacional da empresa que
ele trabalha e o nvel de exigncia que ela impe em termos de documentao, da metodologia de
desenvolvimento adotada, entre outros.
Normalmente se o design feito por uma consultoria, o produto final do trabalho, alm do design
em si (layout final de todas as telas da aplicao ou at mesmo a programao da interface pronta), inclui
tambm toda a documentao e especificao realizada no decorrer do desenvolvimento do design:
relatrio de resultado das pesquisas, personas criadas, mapas e diagramas, cenrios e/ou casos de uso,
wireframes, etc.
Se o design est sendo desenvolvido dentro da empresa, onde o nvel de interao entre os designers
e os desenvolvedores grande, as exigncias de documentao ou especificao diminui bastante,
principalmente em um ambiente onde a cultura gil impera.
Se prottipos de alta fidelidade funcional foram elaborados, estes j servem como uma especificao
dos fluxos de aes e comportamento da aplicao. O visual pode ser visto atravs dos layouts
produzidos, com indicao dos vrios estados dos elementos da interface (foco, mouseover, estados
146
habilitados, desabilitados, etc.).

Alm disso, os prprios wireframes, mesmo que no sejam navegveis, podem especificar o
comportamento de cada elemento atravs de anotaes que so feitas neles mesmos.
Algumas vezes, planilhas so usadas para definir todas as mensagens da aplicao, como de erro, de
alerta, de informao ou de ajuda, para que essas mensagens no precisem estar refletidas em todas as
partes de um wireframe ou layout. O wireframe e/ou layout pode mostrar como sero apresentados cada
tipo de mensagem e os textos em si podem ficar na planilha.
E qualquer outra documentao elaborada durante o processo de design da interface pode servir de
apoio no desenvolvimento da aplicao.
De qualquer maneira, nada substitui a eficincia de ter o designer sentado prximo equipe de
implementao do produto, acompanhando de perto o desenvolvimento, tirando dvidas que surgem
sobre determinados comportamentos e, de certa forma, servindo como QA (Quality Assurance) para
garantir que o produto ser desenvolvido tal e como foi projetado.
10.3 TEORIA DAS CORES

As cores tm um papel importantssimo em tecnologia e nosso mundo cotidiano. Muitas vezes
negligenciada, uma boa escolha de cores para o layout pode influenciar o usurio de vrias maneiras,
guiando-o por um caminho despertando suas emoes e muitos sentimentos nicos.
Isso por que as cores no so um fenmeno fsico, cada pessoa interpreta uma determinada cor de
maneira diferente da outra, algo individual, mesmo tendo suas generalizaes. Por exemplo, para a
maioria das pessoas, a ma vermelha, mas para uma pessoa com um certo grau de daltonismo esse
vermelho pode ser at o que para a maioria verde.
O azul por exemplo costuma ser conectado aos sentimentos de inovao e tecnologia, tanto que por
isso que boa parte das redes sociais hoje em dia (Jan/16) escolheram essa cor como cor principal para sua
marca.
Vrios artistas e pesquisadores estudaram a luz e a cor, como Aristteles, Da Vinci, Isaac Newton e
Goethe, sendo usados os estudos desse ltimo por pesquisadores da Gestalt.
H a cor formada por luz, e a cor formada por pigmento. Esse material foca mais nesse primeiro,
pois o contedo envolve mais dispositivos emissores de luz como celulares e monitores.
147
Cor
Percepo visual, e individual, provocada pela ao da luz sobre algumas clulas da retina, e
compilada pelo sistema nervoso. Sendo assim apenas uma INFORMAO VISUAL.
Chega numa determinada etapa do projeto, onde necessrio fazer a escolha de quais cores sero
utilizadas. Depois de muita "tentativa e erro", achamos uma combinao que nos agrada. Mas ser que
foi uma boa escolha? Uma outra maneira de tomar essa deciso baseando-se na teoria das cores.
A teoria das cores nos ajuda a combinar cores de uma forma harmoniosa e com algum sentido. E
nela h algumas regras bsicas de uso de cores e a relao entre elas, como:
cores complementares
Figura 10.5: Cores complementares
cores anlogas
Figura 10.6: Cores anlogas
cores tridicas
Figura 10.7: Cores tridica
Entre diversas outras que foram definidas com o passar do tempo.

Essas relaes entre as cores so geralmente baseadas, ou podem ser facilmente visualizadas, nas suas
148
posies no crculo cromtico:
Figura 10.8: Crculo cromtico
Decidir entre cores anlogas e cores complementares, por exemplo, influencia no tipo da energia
visual e na percepo do usurio que as v. Afeta totalmente a atmosfera do projeto.
Teoria das Cores

Conjunto de regras e estudos que visa entender e combinar cores de uma forma harmoniosa e com
algum embasamento.
10.4 FACILITANDO ESSA ESCOLHA COM O ADOBE COLOR

Uma ferramenta muito usada que ajuda a encontrar uma boa paleta cromtica a Adobe Color, em
que voc escolhe uma cor base, e vai testando a regra que mais te agradar e fazer sentido com o seu
projeto.
10.3 TEORIA DAS CORES
149
Adobe color
https://color.adobe.com
Com essa ferramenta voc tambm consegue salvar suas paletas na sua conta da Adobe e puxar as
cores direto do Photoshop e/ou do Illustrator.
Figura 10.9: Adobe Color
Voc pode escolher a cor base seja por causa da psicologia das cores (laranja costuma ser conectado
a juventude, roxo com criatividade) ou que faa sentido com a identidade visual da sua marca.
150
Cor e cultura
O sentimento ligado uma determinada cor pode mudar de sentido de uma cultura para outra. O
branco representa algo puro e inocente no Ocidente, j no Oriente a cor da morte. No Japo, o
mesmo vemelho usado em vestidos de noiva, considerado extravagante demais na Europa e aqui
nas Amricas.
Com a cor base escolhida, dado as regras de combinaes, podemos concluir que existe um conjunto
finito de combinaes consideradas agradveis. Por isso que em alguns manuais de identidade visual
acabamos notando semelhanas na escolha das cores, pois as combinaes de cores para um resultado
harmonioso limitado.
O mesmo parece ser vlido para a msica e diversas outras reas com um nmero limitado de
harmonias: comeando em um tom, existe um nmero limitado de tons harmnicos a ele, por isso
muitas melodias se parecem.
Saber escolher as cores do seu projeto faz uma enorme diferena visual, seja para o bem ou para o
mal.

151
CAPTULO 11
APNDICE - TESTES DE USABILIDADE
Teste de usabilidade uma tcnica de caixa-preta. O objetivo observar usurios reais usando o produto
para descobrir problemas e pontos de melhorias. O produto, que pode ser um site, uma aplicao web,
um produto fsico, no precisa estar completamente desenvolvido. Prottipos so vastamente utilizados
em testes de usabilidade para validao do que est sendo feito.
11.1 O QUE MEDIDO?

Testes de usabilidade geralmente envolve medir quo bem os participantes respondem a quatro
reas:
Desempenho: Quanto tempo e quantos passos so necessrios para que a pessoa complete
tarefas bsicas?
Preciso: Quantos erros a pessoa cometeu? E eles foram fatais ou a pessoa conseguiu se
recuperar com as informaes recebidas pelo sistema?
Lembrana: O quanto a pessoa se lembra mais tarde ou depois de perodos sem usar?
Resposta emocional: Como a pessoa se sentiu depois de completar a tarefa? A pessoa estava
confiante ou estressada? Ela recomendaria o produto a um amigo?
Nesse tipo de teste, um grupo representativo de usurios tenta completar tarefas, enquanto
observadores olham e tomam nota do que est acontecendo.
"Pensar alto"
importante que o usurio "pense alto", isto , que verbalize sua inteno ao realizar as aes.
152
11 APNDICE - TESTES DE USABILIDADE

11.2 ENVOLVIDOS
Um teste de usabilidade tpico composto, alm do participante, por um moderador, que d as
instrues ao participante de como o teste ser realizado e passa a ele as tarefas que devero ser
executadas; e o observador, normalmente o designer envolvido no desenvolvimento do produto. O ideal
manter o mnimo de pessoas como observador, para que o participante no se sinta desconfortvel no
momento do teste. Porm em algumas situaes interessante que o gerente do produto ou algum do
time de desenvolvimento tambm participe como observador, pois dessa forma eles conseguem ter uma
viso mais real do produto que esto desenvolvendo.
Local
O teste de usabilidade pode ser feito tanto no prprio ambiente onde a pessoa utilizar (ou utiliza) o
produto, como em um laboratrio especial para isso. Ambos tem suas vantagens.
No prprio computador do participante, no seu prprio ambiente de trabalho, permite que
tenhamos uma idia real de onde o produto ser inserido: ele compartilha o computador? Os recursos,
como acesso a internet, so satisfatrios? Qual a resoluo de tela que ele usa? frequentemente
interrompido quando est realizando suas tarefas? Entre outros.
A vantagem de usar um laboratrio a eficincia, pois possvel testar com vrias pessoas em um
nico dia, sem precisar ficar se deslocando; alm do ambiente est em perfeitas condies para a
realizao do teste: no existe interrupes, os recursos necessrios sempre esto disponveis, o ambiente
j est preparado para gravar todos os dilogos e as expresses faciais do participante, alguns so
equipados com aparelhos de eye tracking e, por ter aqueles espelhos especiais, pode-se colocar vrios
observadores sem que o participante perceba e se sinta coagido ou desconfortvel no momento do teste.
Moderador
11.2 ENVOLVIDOS
153
A introduo ao teste deve ser feita pelo moderador, explicando o objetivo do teste e deixando bem
claro que o que est sendo testado o produto e no o participante; que o papel do usurio naquele teste
de colaborador, ao ajudar a melhorar o produto. Depois da introduo, o moderador passa ao
participante as tarefas que ele precisa realizar.
11.3 PREPARAO PRVIA

Antes da realizao do teste, o designer deve se preparar bem:
Definir o perfil de usurio desejado;
Realizar o recrutamento;
Definir o que deve ser testado;
Preparar os roteiros de teste;
Alinhar com o moderador;
Fazer um teste piloto para avaliar se o roteiro est adequado e realizar os ajustes, caso
necessrio.
Anotar observaes
Durante a realizao do teste, assim como em qualquer pesquisa, o ideal que o designer tenha um
pouco de tempo entre um teste e outro para consolidar as informaes j obtidas, pois corre-se o risco de
esquecer detalhes importantes se deixar para fazer isso um tempo depois.
Ajuste do prottipo entre testes

Tambm, dependendo do tempo entre um teste e outro, o prottipo j pode ser ajustado caso sejam
percebidas falhas graves no desenho que esteja prejudicando os resultados dos testes.
Elaborar relatrio
Depois de concludos os testes, o designer deve consolidar todas as informaes obtidas, conversar
com os envolvidos no desenvolvimento do produto e apresentar o relatrio dos achados do teste, para
juntos fazerem um plano de ao de tudo aquilo que precisa ser revisto e ajustado no design do produto.
Nmero de participantes
E com quantos participantes precisamos realizar um teste de usabilidade? Segundo um arquivo
escrito por Jakob Nielsen (http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users)
esse nmero 5.
Segundo esse artigo, assim que voc testa com um nico usurio, insights aparecem e voc j tem
aprendido quase um tero de tudo o que h para saber sobre a usabilidade do design. Quando voc testa
com um segundo usurio, voc perceber que essa pessoa faz quase as mesmas coisas que o primeiro
154
11.3 PREPARAO PRVIA
usurio, assim j existe algumas sobreposies no que voc j aprendeu. Mas, ainda assim, aparecem
coisas novas que voc no observou no primeiro teste, ento o segundo ainda mostra alguns insights,
mas j bem menos que o primeiro. O terceiro teste far muitas das coisas que j foi observado no
primeiro e no segundo teste, assim, adicionar muito menos informaes do que os primeiros testes. E a
medida que voc faz mais testes, voc aprende cada vez menos, porque voc comea a ver as mesmas
coisas novamente. Depois do dcimo quinto teste, voc j estar perdendo tempo.
Fonte: www.nngroup.com
Esta curva mostra que voc precisa testar com ao menos 15 pessoas para descobrir todos os
problemas de usabilidade do produto, mas ento porque Nielsen recomenda apenas 5? A principal
razo, segundo ele, que melhor distribuir seu oramento atravs de muitos testes menores em vez de
gast-lo todo em um nico e elaborado estudo.
Uma nica ressalva feita pelo Nielsen quando a aplicao tem vrios grupos distintos de usurios.
Essa regra de 5 s vale quando o produto ser usado por pessoas que usaro a aplicao de uma maneira
similar. Se, por exemplo, o teste ser de uma aplicao que ser usada por pais e filhos, ento dois grupos
de usurios tero comportamentos suficientemente diferentes que torna-se necessrio testar com
pessoas desses dois grupos. De qualquer forma, voc no precisaria incluir tantos usurios no teste como
faria para teste de um nico grupo de usurios. As sobreposies de informaes garantir um melhor
resultado testando um nmero menor de pessoas em cada grupo. Nielsen recomenda:
3 ou 4 usurios de cada categoria se estiver testando 2 grupos;
3 de cada categoria se estiver testando trs ou mais grupos.
Exemplo: script para Teste de Usabilidade

O seguinte script uma adaptao e livre traduo do livro Rocket Surgery Made Easy de Steve Krug
11.3 PREPARAO PRVIA
155
NOTA PARA O MODERADOR Navegador deve estar aberto em uma pgina neutra, como a do Google.
Ol, . Meu nome e irei te guiar atravs dessa sesso de testes de hoje.
Antes de comear, tenho algumas informaes para passar a voc e irei l-las para ter certeza de que
cobrirei tudo.
Voc j deve ter uma idia do motivo de voc estar aqui, mas vou repass-lo brevemente agora.
Estamos pedindo a pessoas que tentem usar um website que estamos desenvolvendo para que possamos
ver se ele trabalha como pretendido. A sesso deve levar em torno de horas.
A primeira coisa que gostaria de deixar claro aqui que estamos testando o site e no voc. Voc no
pode fazer nada de errado aqui. Na verdade, aqui provavelmente o nico lugar hoje que voc no tem
que se preocupar sobre estar cometendo erros.
A medida que voc usa o site, eu pedirei a voc que tente pensar alto o mximo possvel: diga o que
voc est procurando, o que est tentando fazer, o que est pensando. Isso me ajudar bastante.
Tambm, por favor, no se preocupe de estar ferindo nossos sentimentos. Estamos fazendo isso para
melhorar nosso site, ento precisamos ouvir suas reaes honestas.
Se voc tiver qualquer questo a medida que prosseguimos no teste, pode pergunt-las. Eu posso no
respond-las de imediato, j que estamos interessados em ver como as pessoas fazem quando no tem
algum do lado ajudando. Mas se voc ainda tiver alguma dvida quando terminarmos, tentarei
respond-las. E se voc precisar dar uma pausa a qualquer momento, s me avisar.
Caso estejam gravando a conversao durante o teste: Voc pode ter notado o microfone. Com sua
permisso, ns estamos gravando o que acontece na tela e tambm nossas conversas. A gravao
somente ser usada para nos ajudar a descobrir como melhorar o site e no ser vista por ningum que
no esteja trabalhando no projeto. E me ajuda bastante, pois no precisarei tomar nota de tudo.
Caso outras pessoas estejam observando o teste: Alm disso, h algumas pessoas do time de design
observando esta sesso em outra sala. Eles no podem nos ver, apenas a tela do computador.
Se voc no se importa, peo que assine esse termo de permisso. Ele apenas diz que voc nos d a
permisso de fazer a gravao e que ela s ser vista pelas pessoas trabalhando no projeto.
NOTA PARA O MODERADOR D ao participante o termo de permisso para ser assinado. Enquanto ele
assina, inicie a gravao da tela.
156
11.3 PREPARAO PRVIA
Se voc tiver usando um termo de confidencialidade: Ns lhe enviamos um termo de

confidencialidade que diz que voc no poder falar para algum sobre o que estamos lhe mostrando
hoje, j que um projeto que ainda no est pblico. Voc trouxe o termo assinado?
NOTA PARA O MODERADOR Se o participante no trouxe o termo assinado, entregue a ele outra cpia e
d a ele um tempo para ler e assinar.
Voc tem alguma dvida at o momento?

Ok. Antes de mostrar o site, gostaria de lhe fazer algumas poucas perguntas.
Primeiro, qual a sua ocupao? O que voc faz durante o seu dia?
Agora, quantas horas na semana apenas uma estimativa voc diria que gasta usando a internet,
incluindo navegar e usar email, no trabalho e em casa?
E qual a diviso entre email e navegao uma porcentagem aproximada?
Quais tipos de site voc normalmente procura quando navega na web?
Voc tem algum site favorito?
timo. Acabamos com as perguntas e podemos comear a olhar o site.
NOTA PARA O MODERADOR Abra o site no navegador.
Primeiro, vou pedir que voc olhe esta pgina e me diga o que faria com ela: o que lhe chama
ateno, que tipo de site voc acha que , o que pode fazer aqui e para que serve. Apenas olhe um pouco
e faa uma pequena narrativa.
Pode baixar e subir a barra de rolagem, mas no clique em nada por enquanto.
NOTA PARA O MODERADOR Deixe-o examinar e falar por no mximo 3 a 4 minutos.
Obrigada. Agora eu lhe pedirei para tentar fazer algumas tarefas especficas.
Se o que voc est testando no algo especfico da funcionalidade de busca: Tambm peo que
faa essas tarefas sem usar a busca. Ns aprenderemos muito mais sobre quo bem o site funciona se a
11.3 PREPARAO PRVIA
157
busca no for usada.

E, mais uma vez, nos ajudar muito se voc pensar alto enquanto estiver tentando executar a tarefa.
NOTA PARA O MODERADOR D ao participante o primeiro cenrio que voc criou para o teste e o leia
em voz alta.
Deixe o participante prosseguir at que voc perceba que no est mais trazendo nenhum valor
ou que o participante est ficando frustrado.
Repita para cada cenrio de teste que tenha criado.
Obrigada! Voc nos ajudou bastante.

Caso outras pessoas estejam observando o teste: Me d licena um minuto que vou ver se as
pessoas do time tm alguma pergunta que gostariam de fazer.
NOTA PARA O MODERADOR No caso de ter observadores em outra sala, veja se eles tm alguma
pergunta a fazer.
Faa as perguntas dos observadores.
Voc tem alguma pergunta que queira fazer, agora que terminamos?
NOTA PARA O MODERADOR D ao participante o incentivo ou ajuda de custo que tenha previamente
acertado com ele.
Pare a gravao e grave o arquivo.
Agradea a sua participao e o acompanhe at a sada.
11.4 GAMESTORMING - TESTE DE USABILIDADE

Objetivo
Entender como usurio utiliza um sistema, site ou app. E aplicar melhorias focado na necessidade do
usurio.
158
Ambiente
1. Notebook;
2. Carto com linhas;
3. Folhas A4;
4. Canestas;
5. Post-its.
Regras
Passo a passo
1. Escolher um site ou app que no seja de uso comum como facebook, mas que algum integrante do
time conhea como o site funciona;
2. Definir um objetivo para o teste;
3. Criar um fluxo de teste que dure no mximo 5 minutos;
4. Realizar um teste beta com algum do time;
5. Realizar o teste com um integrante de outro time. Antes de comear o teste no podemos nos
esquecer:
i. Apresentar o produto;
ii. Deixar bem claro que quem est sendo testado o site;
iii. Pedir para o usurio falar em voz alta o que ele est pensando;
Exemplo: Termo de Permisso de Gravao

Obrigado por participar de nosso teste de usabilidade.
Ns gravaremos sua sesso para permitir que colaboradores da nome da empresa, que no puderam
estar presentes aqui hoje, possam posteriormente observar o teste.
Por favor, leia o termo abaixo e assine no local indicado.
159
Termo
Estou ciente de que minha sesso de teste de usabilidade ser gravada. Permito que NOME DA
EMPRESA use esta gravao apenas para uso interno, com o propsito de melhorar a interface sendo
testada.
Nome:
Assinatura:
Data:

160

Caelum Ux Usabilidade wd41 PDF

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Caelum Ux Usabilidade wd41 PDF

Hochgeladen von

Copyright:

Verfügbare Formate

.

1.1 O que Experincia do Usurio?

1.2 ISO 9241-210

1.3 A Evoluo da Experincia do Usurio

1.4 Para saber mais: O Caso ClearRX

1.5 Elementos da Experincia do Usurio

1.6 Planos da Experincia do Usurio

2.1 Quatro Abordagens para Design de Interao

2.2 Design Centrado no Usurio

3.1 Gamestorming - Montar time heterogneo

3.4 Gamestorming - Definir projeto mobile

3.5 O tringulo de ouro

3.6 Gamestorming - Tringulo de Ouro

3.7 Gamestorming - 360 View

4.1 Onde Buscar Informaes?

4.2 Mtodos e Propsitos

4.4 Card Sorting

4.6 Destilando a Pesquisa

4.7 Gamestorming - Entrevista, tirando dvidas com o usurio

5.1 Design Centrado no Usurio

5.2 O que personas no representam

5.5 A importncia dos objetivos

5.6 Criando Personas

5.7 Nmero de Personas

5.8 Personas ad hoc

5.9 Persona simples

5.11 Gamestorming - Criando proto-personas

5.12 Os sete passos para criar Personas

5.14 Mapa de empatia

5.15 Templates de persona

5.16 Discusso: As narrativas so realmente necessrias?

5.17 Gamestorming - Criando Persona no dia a dia

6 Modelando e identificando requisitos

6.1 Modelo Mental

6.3 Gamestorming - Criando cenrio

6.4 Anlise de Tarefas

6.5 Fluxo de Tarefas

6.6 Sintetizando os Requisitos de Design

6.7 User stories

6.8 Escrevendo boas histrias

6.9 Gamestorming - Criando histrias com foco no usurio

6.10 Equilbrio entre cliente e usurio

6.11 Gamestorming - UX Canvas

6.13 Gamestorming - Brainstorm de features com objetivos

6.14 Priorizando features

6.15 Gamestorming - Priorizando features com foco no usurio

7 Dos Requisitos ao Design

7.1 Estrutura Geral

7.2 Refinando o Design

7.4 Gamestorming - criando rabiscoframe e wireframe em time

8 Padres e Princpios do Design de Interao

8.1 As dez heursticas de Nielsen

8.2 Outros princpios para implementar interfaces eficazes

8.3 Padres de Design de Interao

8.4 Padres de Interao Comportamentais

8.5 Gamestorming - Colocando em prtica os heursticas de Nielsen

8.7 Gamestorming - Prototipagem em papel

9 Usabilidade em dispositivos mveis

9.1 Lei de Fitts

9.2 Lei de Hick

9.3 Thumb Zones

9.4 Enriquecendo seu produto com Microinteractions