Escolar Documentos
Profissional Documentos
Cultura Documentos
A Caelum espera que voc aproveite esse material. Todos os comentrios, crticas e sugestes sero
muito bem-vindos.
Sumrio
1 Experincia do Usurio 2
1.1 O que Experincia do Usurio? 2
1.2 ISO 9241-210 3
1.3 A Evoluo da Experincia do Usurio 3
1.4 Para saber mais: O Caso ClearRX 4
1.5 Elementos da Experincia do Usurio 6
1.6 Planos da Experincia do Usurio 6
2 Design de Interao 10
2.1 Quatro Abordagens para Design de Interao 12
2.2 Design Centrado no Usurio 13
3 Time e Projeto 15
3.1 Gamestorming - Montar time heterogneo 15
3.2 Kanban 17
3.3 Os Kanbans de UX 18
3.4 Gamestorming - Definir projeto mobile 20
3.5 O tringulo de ouro 21
3.6 Gamestorming - Tringulo de Ouro 23
3.7 Gamestorming - 360 View 24
4 Pesquisa 26
4.1 Onde Buscar Informaes? 27
4.2 Mtodos e Propsitos 28
4.3 Entrevistas 29
4.4 Card Sorting 30
4.5 Recrutamento 33
4.6 Destilando a Pesquisa 34
4.7 Gamestorming - Entrevista, tirando dvidas com o usurio 34
5 Personas 36
Sumrio Caelum
Verso: 21.5.16
.
.
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.
.
"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.
.
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.
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.
.
Suas caractersticas:
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).
.
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
.
Deve-se entender o que sua audincia quer e como isso casa com outros objetivos do negcio que
existem. Um web site falha no por questes tecnolgicas ou de experincia do Usurio, mas por no
responder a duas perguntas:
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?
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.
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 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.
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
.
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!
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)
.
A tabela abaixo fornece uma rpida comparao entre cada uma das quatro abordagens:
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
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.
.
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.
.
CAPTULO 3
TIME E PROJETO
Pessoas de negcio e desenvolvedores devem trabalhar diariamente em conjunto por todo o projeto.
O mtodo mais eficiente e eficaz de transmitir informaes para e entre uma equipe de
desenvolvimento atravs de conversa face a face.
Em intervalos regulares, a equipe reflete sobre como se tornar mais eficaz e ento refina e ajusta seu
comportamento de acordo.
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;
.
Passo a passo
Trinta segundos para cada aluno escrever no post-it:
Nome;
Profisso e/ou formao;
Maior lazer.
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.
"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.
.
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:
Design e Pesquisa
Tecnologia
.
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."
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;
.
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.
Esse trio considerado o "core" para o desenvolvimento do produto e devem estar bem alinhados na
fase de descoberta do produto.
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.
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.
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.
.
Passo a passo
1. Desenhar tringulo de ouro na cartolina;
Objetivo
Identificar pontos positivos e negativos do projeto separados em:
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;
CAPTULO 4
PESQUISA
"A inteligncia til para tudo, mas no suficiente para nada" -- Henri-Frederic Amiel
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).
Benefcios da pesquisa
Pesquisas, principalmente as qualitativas, ajudam-nos a entender:
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.
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.
Muitos dados j so obtidos dessas entrevistas citadas acima e importante saber quais tipos de
informao deve-se obter de cada uma delas.
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.
.
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.
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
situaes, mais de um mtodo pode ser usado em uma pesquisa de design.
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.
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.
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.
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.
.
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
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...
Dica de livro
RECRUITING WITHOUT FEAR - How to Find First-Rate Participants for Design Studies
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.
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;
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.
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.
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.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
Geram empatia para com os usurios, envolvendo sua equipe de uma forma que outras
representaes de dados do usurio no conseguem
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:
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.
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.
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.
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.
.
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.
Contedo da proto-persona
interessante que a proto-persona possua as seguintes informaes:
.
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:
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.
.
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;
3. O time opina sobre quais caractersticas so realistas ou no, podendo ser feitas alteraes nesse
momento;
No h um nmero exato de quantas variveis devem existir, mas algo em torno de 20 a 30 variveis
normal.
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",
.
Para exemplificar como o mapeamento feito, usaremos as duas variveis citadas acima (voc pode
fazer isso de forma simples, usando um quadro-branco):
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!
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:
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
.
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:
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:
Responder aos objetivos de vida faz a diferena entre um usurio satisfeito e um usurio fiel e
fantico.
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:
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
.
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.
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.
.
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
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.
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.
.
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;
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;
CAPTULO 6
MODELANDO E IDENTIFICANDO
REQUISITOS
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.
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.
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
.
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.
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.
.
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.
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.
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.
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.
Normalmente essa lista montada a partir de requisitos de negcios, achados das pesquisas,
produtos existentes, cenrios e casos de uso.
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.
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.
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.
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
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.
.
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:
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.
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,
.
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.
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;
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.
.
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.
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;
4. Canetinha azul, verde e preta.
Regras
Durao de 30 minutos
Passo a passo
1. Criar o canvas;
2. Colocar as proto-personas;
.
CAPTULO 7
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.
.
Cenrios de Validao
possvel criar cenrios de validao do tipo "se... ento" para testar outras possibilidades no
esboo feito.
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.
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,
.
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.
Objetivo
Desenvolver um wireframe com menos pontos de falhas de forma gil.
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
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.
CAPTULO 8
"O mundo j est cheio de feridas e infortnios mesmo sem guerras para multiplic-los" -- J.R.R. Tolkien
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.
Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual
vdeo estamos assistindo; qual prximo; quais assistimos ou no.
Por exemplo quando criamos um tweet bacana poder delet-lo se estivermos afim. Mas no d pra
.
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
.
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.
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.
.
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.
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.
.
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.
.
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.
.
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.
Mantenha proximidade
Itens relacionados devem se manter prximos.
Menos mais
Interfaces do Usurio incrveis devem ser quase invisveis.
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
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.
.
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".
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
.
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:
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.
.
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.
Sandbox: Permite ao usurio salvar dados para que possa ser utilizado no futuro. Assim, fornecido
.
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.
Tabs dentro de pginas: Permite ver o contedo detalhado sobre o contedo principal que est
sendo mostrado.
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
.
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.
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.
.
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
.
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.
.
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.
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.
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.
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.
.
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.
.
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.
.
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.
.
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).
.
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.
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.
.
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.
.
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.
.
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:
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.
.
Guias
o uso de mensagens, instrues e ajuda contextual para guiar o usurio durante a execuo de uma
tarefa.
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.
.
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.
.
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.
.
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,
.
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".
.
Avaliao de itens de uma loja virtual. Uma rea com as avaliaes j realizadas e uma rea que
mostra os comentrios.
No exemplo acima, alm da posio no ranking, mostrado tambm informaes sobre a atividade do
usurio
Objetivo
Entender na prtica sobre os princpios de Nielsen.
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.
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:
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
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.
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;
7. E criativade.
Regras
Durao de 40 minutos.
CAPTULO 9
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.
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, pode-
se 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.
.
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.
.
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:
.
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 na 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.
.
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.
.
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
microinteractions presentes no nosso cotidiano. http://bit.ly/1nCZiJ2 ou
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:
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.
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.
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:
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
.
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,
.
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.
.
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:
.
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.
.
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.
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.
.
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.
.
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.
.
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.
.
Alm dessas ferramentas, outros pontos precisam ser levadas em conta para um bom trabalho de
design visual:
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
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.
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.
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
Essas relaes entre as cores so geralmente baseadas, ou podem ser facilmente visualizadas, nas suas
posies no 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.
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.
.
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.
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.
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.
.
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.
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
.
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
.
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:
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.
.
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.
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?
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
.
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.
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.
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.
Objetivo
Entender como usurio utiliza um sistema, site ou app. E aplicar melhorias focado na necessidade do
usurio.
.
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;
Ns gravaremos sua sesso para permitir que colaboradores da nome da empresa, que no puderam
estar presentes aqui hoje, possam posteriormente observar o teste.
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: