Escolar Documentos
Profissional Documentos
Cultura Documentos
Caelum
Sumrio
Sumrio
1 Experincia do Usurio
2 Design de Interao
11
12
3 Time e Projeto
14
14
3.2 Kanban
16
3.3 Os Kanbans de UX
17
19
20
22
23
4 Pesquisa
25
26
27
4.3 Entrevistas
28
29
4.5 Recrutamento
31
33
33
5 Personas
35
Sumrio
Caelum
35
36
5.3 Benefcios
36
5.4 Impedimentos
37
38
38
39
39
39
5.10 Proto-persona
40
43
43
5.13 Secundria
48
50
51
54
54
56
57
6.2 Cenrios
58
60
60
61
62
63
64
64
65
67
6.12 Features
67
68
69
70
72
72
74
7.3 8 steps
77
Caelum
Sumrio
77
79
79
87
89
91
121
8.6 Prottipos
121
123
125
125
127
128
130
9.5 Tipografia
134
140
10 Design Visual
141
141
146
149
149
152
152
11.2 Envolvidos
153
154
158
Verso: 19.8.26
CAPTULO 1
EXPERINCIA DO USURIO
"Quando nada acontece, h um milagre que no estamos vendo." -- Joo Guimares Rosa
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.
1 EXPERINCIA DO USURIO
Mas mesmo antes de serem batizados, os conceitos da Experincia do Usurio j vinham sendo
usados atravs do tempo.
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.
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
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).
funcionalidade (interface de software) e a web como meio de informao (sistema de hipertexto). Para
cada contexto, um elemento se destaca.
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.
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
1.6 PLANOS DA EXPERINCIA DO USURIO
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.
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
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
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
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
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
manifesto
gil
de
software
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
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:
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.
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.
"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.
3.3 OS KANBANS 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.
"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
18
3.3 OS KANBANS DE UX
O que possvel?
Que funcionalidades podem ser construidas agora ou mais pra frente?
"Se o time no pergunta como funciona o Kanban e est utilizando. Acabamos de fazer um timo
trabalho."
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
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.
20
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.
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
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.
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
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.
26
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.
27
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.
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.
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.
30
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
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
34
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.
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.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
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
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.
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.
39
Quem?
O qu / do qu?
Como?
Por qu?
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
Contedo da proto-persona
interessante que a proto-persona possua as seguintes informaes:
5.10 PROTO-PERSONA
41
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
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;
43
APLICAES
CORPORATIVAS
PERFIS
DE
USURIOS
45
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.
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!
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
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.
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.
5.13 SECUNDRIA
49
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
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.
51
52
53
Ambiente
1. Canetinhas;
2. Foto da persona;
3. A4 Branca;
4. Pesquisas;
5. Post-its.
Regras
45 minutos de durao.
54
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.
55
CAPTULO 6
MODELANDO E IDENTIFICANDO
REQUISITOS
56
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.
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.
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.
58
6.2 CENRIOS
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.
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.
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
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.
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.
61
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:
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.
63
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:
EU CONSIGA
comprador que no tem carto de crdito Quero que o sistema d suporte ao pagamento em boleto
Ambiente
1. Cenrio criado e definido pelo time no exerccio anterior;
2. Duas fichas pautadas por integrante.
64
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.
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.
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.
66
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.
Ambiente
1. Proto-personas criadas em gamestorming anterior;
2. Histrias criadas neste captulo;
3. Cartolina;
4. Canetinha azul, verde e preta.
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
69
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.
Ambiente
1. Proto-personas criadas em gamestorming anterior;
2. Histrias criadas neste captulo;
3. Cartolina;
4. Canetinha azul, verde e preta.
Regras
Durao de 30 minutos
Passo a passo
1. Criar o canvas;
2. Colocar as proto-personas;
70
71
CAPTULO 7
72
73
Cenrios de Validao
possvel criar cenrios de validao do tipo "se... ento" para testar outras possibilidades no
esboo feito.
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.
7.2 REFINANDO O DESIGN
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.
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.
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.
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
CAPTULO 8
"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.
79
80
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!
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:
5. Preveno de erros
No uma boa ideia deixar seu usurio errar sem explicar previamente o motivo do erro. Melhor do
82
83
84
85
86
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.
Botes e Links
Normalmente, use botes para tarefas (aes), principalmente as primrias, e links para navegao.
88
Mantenha proximidade
Itens relacionados devem se manter prximos.
Menos mais
Interfaces do Usurio incrveis devem ser quase invisveis.
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
8.3 PADRES DE DESIGN DE INTERAO
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
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":
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
8.4 PADRES DE INTERAO COMPORTAMENTAIS
91
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
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.
Sandbox: Permite ao usurio salvar dados para que possa ser utilizado no futuro. Assim, fornecido
8.4 PADRES DE INTERAO COMPORTAMENTAIS
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.
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
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.
97
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.
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
104
Nesse exemplo, ao digitar "VENE" uma lista aparece com sugestes que completam o que o usurio
escreveu no campo.
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
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
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
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
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,
8.4 PADRES DE INTERAO COMPORTAMENTAIS
117
prximo ao contedo que se quer promover. interessante fornecer detalhes contextuais, como a
quantidade de votos j recebidos, quando for possvel.
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.
119
120
Ambiente
1. Duas cores de post-its;
2. Caneta.
Regras
Durao de 30 minutos.
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.
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)
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.
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.
Ambiente
1. Folhas coloridas;
2. Post-its;
3. Cola;
4. Canetinhas;
5. Tesoura;
6. Rgua;
8.7 GAMESTORMING - PROTOTIPAGEM EM PAPEL
123
7. E criativade.
Regras
Durao de 40 minutos.
124
CAPTULO 9
125
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:
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
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:
127
128
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.
129
130
Alguns GIFs:
http://blog.caelum.com.br/enriquecendo-seus-sistemas-com-microinteractions
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:
131
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.
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.
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.
Outros grupos
9.5 TIPOGRAFIA
135
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.
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:
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
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
9.5 TIPOGRAFIA
139
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
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.
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
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
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
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
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,
10.1 O PRINCPIO C.R.A.P
145
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
cores anlogas
cores tridicas
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.
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.
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
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.
"Pensar alto"
importante que o usurio "pense alto", isto , que verbalize sua inteno ao realizar as aes.
152
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.
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.
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
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.
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
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.
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.
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
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.
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.
Ambiente
1. Notebook;
2. Carto com linhas;
3. Folhas A4;
4. Canestas;
5. Post-its.
Regras
Durao de 40 minutos.
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;
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