Apostila FUX

Prévia do material em texto

Fundamentos de UX 
 
 
 
 
 
 
Alan Vasconcelos 
 
 
 
 
 
 
 
 
 2020 
 
 
Fundamentos de UX – Página 2 de 78 
 
 
Fundamentos de UX 
Alan Vasconcelos 
© Copyright do Instituto de Gestão e Tecnologia da Informação. 
Todos os direitos reservados. 
 
 
 
 
 
 
Fundamentos de UX – Página 3 de 78 
Sumário 
Capítulo 1. Princípios de design de interação ............................................................ 6 
Então, por que precisamos de UX? ......................................................................... 7 
O que motivou as pessoas a estudarem problemas de design? .............................. 8 
Princípios de Design por Donald Norman ................................................................ 9 
Conclusão .............................................................................................................. 17 
Capítulo 2. Pesquisa de usuários ............................................................................. 18 
O mito do usuário médio ........................................................................................ 18 
O que são modelos? .............................................................................................. 19 
Por que modelar usuários? .................................................................................... 20 
O que são personas? ............................................................................................. 20 
Criando personas ................................................................................................... 22 
Coletando dados para as personas ....................................................................... 24 
Pesquisa etnográfica .............................................................................................. 25 
Conclusão .............................................................................................................. 27 
Capítulo 3. Arquitetura da informação ...................................................................... 28 
Somos todos arquitetos ......................................................................................... 28 
Cardsorting e mapa de A.I ..................................................................................... 32 
Criando um mapa de Arquitetura de Informação ................................................... 34 
Conclusão .............................................................................................................. 35 
Capítulo 4. Prototipagem .......................................................................................... 36 
Benefícios .............................................................................................................. 38 
Construindo seu protótipo ...................................................................................... 39 
 
 
Fundamentos de UX – Página 4 de 78 
Protótipos de alta fidelidade ................................................................................... 39 
Protótipos funcionais .............................................................................................. 40 
Conclusão .............................................................................................................. 41 
Capítulo 5. Projeto de interface para dispositivos móveis ........................................ 42 
Personas típicas para projetos mobile ................................................................... 42 
O paradigma desktop ............................................................................................. 43 
Principais diferenças entre desktop e mobile ......................................................... 44 
Gesture .................................................................................................................. 47 
Feedback ............................................................................................................... 48 
As variadas densidades de telas ............................................................................ 50 
Como o dp funciona? ............................................................................................. 53 
Conclusão .............................................................................................................. 54 
Capítulo 6. Avaliação Heurística .............................................................................. 55 
Avaliação heurística: o que é? ............................................................................... 56 
Método de aplicação da avaliação heurística......................................................... 63 
Coletando os dados ............................................................................................... 63 
Conclusão .............................................................................................................. 65 
Capítulo 7. Avaliação Empírica ................................................................................ 66 
Abordagem ágil para testes de usabilidade ........................................................... 68 
Conclusão .............................................................................................................. 69 
Capítulo 8. Lean UX ................................................................................................. 70 
Priorizando experiências, não documentos ........................................................... 71 
Conclusão .............................................................................................................. 72 
 
 
Fundamentos de UX – Página 5 de 78 
Capítulo 9. Otimização para conversão ................................................................... 73 
E o que é taxa de conversão?................................................................................ 74 
Por que devo me importar? .................................................................................... 75 
Otimizando para aumentar a taxa de conversão.................................................... 75 
Alguns termos mais comuns .................................................................................. 76 
Conclusão .............................................................................................................. 77 
Referências.................... .......................................................................................... 78 
 
 
 
 
Fundamentos de UX – Página 6 de 78 
Capítulo 1. Princípios de design de interação 
A esta altura, você já deve saber que UX é uma sigla para o termo User 
Experience. A maioria das pessoas que optam por estudar esse ramo do 
conhecimento tem plena ciência disso. O que quase todas elas não sabem é que User 
Experience não é somente encontrar a melhor solução para seus usuários. UX é 
sobre definir o problema que precisa ser resolvido (o por quê), definir para quem 
esse problema precisa ser resolvido (o quem), e definir o caminho que deve ser 
percorrido para resolvê-lo (o como). UX não é: 
UI design (design de interface) 
São decisões de interação (mesmo que isso afete a aparência). 
Um passo/etapa em um processo 
É uma filosofia - uma postura - de todo o time. 
Uma resposta para tudo 
E sim, saber o que o usuário quer e precisa (envolve pesquisa, observação e 
psicologia cognitiva). 
Tudo o que for mais bonito e estético para a interface 
Mais do que isso, é descobrir o que é mais apropriado para seu perfil de 
usuário. 
Sobre tecnologia apenas 
Mas sim, sobre qualquer produto com o qual interagimos. Pode ser um 
elevador, uma porta, câmera fotográfica, um mobiliário urbano, entre outros. 
Um tratado sobre usabilidade 
Além da eficiência e eficácia, o UX trata de aspectos emocionais sobre 
produtos que adoramos ou odiamos. 
 
 
 
Fundamentos de UX – Página 7 de 78 
Apenas para os usuários 
É também para o criador do produto. Preocupa-se em gerar valor para onegócio, para o produto e para os consumidores que, consequentemente, podem 
converter em receita, visibilidade e valor para a marca. 
 
Então, por que precisamos de UX? 
A resposta curta é: o mundo é difícil de usar. 
A resposta longa é que a maioria dos produtos interativos lançados no 
mercado é centrada nas necessidades e vontade do dono do negócio e não nos 
usuários que irão comprar e usar seus produtos. 
Essa postura acaba criando uma série de problemas para a experiência de 
uso. O mais comum deles é o chamado Feature Creep ou Síndrome do Painel de 
Avião. 
O Feature Creep é uma anomalia comum causada em produtos interativos 
nos quais a visão do dono (ou contratante) é a que sempre prevalece. Com isso, 
algumas funções ficam subutilizadas; torna-se impossível entender para que serve 
tantas teclas, comandos e botões; muitas opções desnecessárias para a maioria das 
pessoas; e, claro, uma interface poluída. 
 
 
Fundamentos de UX – Página 8 de 78 
Figura 1 - Exemplo de uma interface poluída pelo Feature Creep. 
 
 
O que motivou as pessoas a estudarem problemas de design? 
Primeiramente, é bom ressaltar que produtos desenhados para “apenas” 
atender às necessidades do dono do negócio tendem a fracassar no mercado. Steve 
Mulder, autor do livro “The User Is Always Right” sugere que o design é que deve se 
moldar em função do usuário, e não o contrário. 
Donald Norman, talvez o principal nome quando se fala em UX em todo o 
mundo, escreveu um livro chamado “O Design do Dia a Dia”. Esse livro se tornou um 
dos clássicos mais importantes da área e, por isso, é uma leitura obrigatória para 
quem quiser avançar nesta área. Nesse livro, estão enumerados os seis princípios de 
design que servem para qualquer produto. 
 
 
 
Fundamentos de UX – Página 9 de 78 
Princípios de Design por Donald Norman 
Princípio 1: Visibilidade 
Quanto mais soubermos sobre as possibilidades de interação, melhor. Isso 
significa que a interface deve mostrar ao usuário, tudo aquilo que pode (ou não pode) 
ser feito naquele contexto. Na figura abaixo, a interface deixa claro sobre as 
possibilidades de interação. 
Figura 2 - A interface mostra o trecho selecionado ao mesmo tempo em que 
uma barra de tarefas mostra o que pode ser feito. 
 
Às vezes, não sabemos onde estão os elementos de interação. Os problemas 
com a visibilidade aparecem quando “não podermos ver” os elementos de interação 
do produto. No exemplo abaixo, temos que adivinhar onde colocar as mãos. Torneiras 
e botões visíveis foram substituídos por “zonas ativas” que são invisíveis e ambíguas. 
 
 
Fundamentos de UX – Página 10 de 78 
Figura 3 - Uma torneira sem a manopla. 
 
Entretanto, em alguns momentos é saudável esconder alguns elementos para 
não poluir a interface. Desse modo, é importante fazer com que esses elementos 
apareçam no contexto apropriado, como foi o caso da seleção de texto da figura 2. 
Na figura abaixo, veja que as ferramentas de edição de imagem só aparecem quando 
um objeto de imagem é selecionado. 
Figura 1 - Algumas funções se mantêm invisíveis até que sejam necessárias. 
 
 
 
 
Fundamentos de UX – Página 11 de 78 
Princípio 2: Feedback 
Este princípio prega que toda ação do usuário requer uma reação do sistema, 
ou seja, o usuário precisa estar ciente de que o sistema entendeu seu comando. 
Ações simples, feitas com poucas linhas de CSS, podem garantir um bom feedback 
aos elementos interativos do seu software, como os estados “:hover” e “:focus”, por 
exemplo. 
Figura 2 - Estilos diferentes que mostram que o botão/link está ativo e pode 
ser clicado. 
 
Princípio 3: Restrições 
Este princípio prega que, em alguns momentos, a interface deve restringir as 
possibilidades de interação, a fim de impedir o usuário de executar operações 
incorretas, como mostra a figura a seguir: 
 
 
Fundamentos de UX – Página 12 de 78 
Figura 6 - Restrições de uso propositais. 
 
As restrições podem também ser aplicadas com o objetivo de prender a 
atenção do usuário em uma determinada tarefa, como nas telas modais. 
Figura 7 - Telas modais para manter o foco do usuário em uma ação 
específica. 
 
Princípio 4: Mapeamento 
É preciso haver coerência entre o controle e a sua função. Ou seja, ao 
olharmos para o elemento interativo (botão, maçaneta, manopla), não deveríamos ter 
que adivinhar ou refletir sobre qual deve ser o botão/ícone correto. Na figura abaixo, 
o fogão da direita permite que não tenhamos a obrigação de testar ou adivinhar qual 
botão acende a respectiva trempe. Já o da esquerda, possui uma interface com uma 
 
 
Fundamentos de UX – Página 13 de 78 
disposição ambígua, que não nos dá uma dica clara sobre a relação entre o botão e 
a trempe correta. 
Figura 3 - Exemplos de mapeamento bem aplicado (na direita) e mal aplicado 
(esquerda). 
 
Princípio 5: Consistência 
O princípio da consistência diz que a interface deve manter uma unidade 
visual e funcional em todo o sistema. Ou seja, além do quesito estético, é primordial 
que tarefas similares sejam realizadas com elementos similares. No exemplo abaixo, 
podemos perceber que as plataformas PC e MAC possuem, cada uma, sua própria 
consistência no que se refere à posição do botão “Cancelar” nas telas de confirmação. 
Figura 9 - Enquanto no Windows o comando cancelar fica sempre na direita, 
no MAC OS é o oposto. 
 
 
 
Fundamentos de UX – Página 14 de 78 
Interfaces consistentes fazem com que o usuário se sinta seguro e confiante 
de que o produto é bem desenhado. Além disso, com o uso frequente, fica mais fácil 
para o usuário se familiarizar com os elementos de interação e seu comportamento. 
A consistência pode acontecer de quatro maneiras: 
Consistência funcional: que diz respeito à coerência das funcionalidades. 
Figura 4 - Exemplo de consistência funcional. 
 
Consistência estética: aparência e estilo bem definidos e facilmente 
reconhecidos pelo público. O fabricante Mercedes Benz, consistentemente, coloca 
seu emblema nos capôs de seus carros. O reconhecimento é associado a qualidade, 
prestígio, fino acabamento e confiabilidade. Já a Apple, consistentemente, coloca seu 
emblema nas costas de seus produtos, onde sua marca é mais visível. 
Figura 5 - Exemplos de consistência estética. 
 
 
 
Fundamentos de UX – Página 15 de 78 
Consistência interna: consistência visual (ou funcional) com os demais 
elementos dentro do sistema. Reforça o senso de orientação e confiabilidade e indica 
que o sistema é bem desenhado e bem planejado. 
Figura 6 - Consistência interna. Padrões de design do Android (Material 
Design). 
 
Consistência externa: Consistência com outros elementos no ambiente. 
Reforça a consistência interna para sistemas múltiplos. O disquete como ícone de 
salvar, e o “hambúrguer” como menu, são bons exemplos. 
Figura 13 - Exemplo de consistência externa (ícone hambúrguer). 
 
 
 
 
Fundamentos de UX – Página 16 de 78 
Princípio 6: Affordance 
Este princípio é um dos mais controversos. Ele diz que os elementos de 
interação devem “falar por si” sobre como operá-los. No exemplo da figura a seguir 
tanto a maçaneta, quanto a tesoura, dão dicas sobre como usá-las, mesmo só 
olhando para elas. 
Figura 7 - Affordance bem aplicado. Não há dúvidas sobre cobre como operar. 
 
O Affordance também é dividido em quatro tipos: 
Affordance percebida: Nos dois casos da figura anterior, a ação é possível 
e também é percebida pelo usuário. 
Rejeição correta: É quando sabemos que há uma proibição ou restrição de 
uso. Por exemplo, um botão com a aparência de desabilitado que, de fato, não realiza 
nenhum comando no sistema. 
Affordance escondida: É quando não sabemos como operar o elemento 
interativo. Ex.: numa maçaneta esférica, não sabemos para que lado girar e nem se 
devemos apertar. 
Affordance falsa: É quando o elemento, praticamente, “conta uma mentira” 
sobre como operá-lo. Na figura abaixo, podemosobservar uma porta que possui 
maçaneta, mas, no entanto, trata-se de uma porta de correr. 
 
 
Fundamentos de UX – Página 17 de 78 
Figura 8 - Péssimo exemplo. A porta possui maçaneta, mas é de correr. 
 
 
Conclusão 
UX é mais que usabilidade. Trata-se também de otimizar fluxos, processos 
de design e até a postura do designer. 
Para que o UX cumpra sua missão de melhorar a experiência de uso, é 
preciso conhecer bem o usuário, suas características relevantes, sua cultura e, claro, 
suas habilidades. Portanto, esse será o tema do próximo capítulo. 
 
 
Fundamentos de UX – Página 18 de 78 
Capítulo 2. Pesquisa de usuários 
Parece óbvio que, para proporcionarmos uma experiência de uso agradável 
e satisfatória, precisamos conhecer bem nosso público-alvo, ou a nossa população 
de usuários. Entretanto, na esmagadora maioria das empresas de design ou de 
software, acontece um fenômeno curioso. 
 
O mito do usuário médio 
O que deve ser impregnado em nossas mentes é o fato de que “nós não 
somos iguais aos nossos usuários. Não importa o quão competentes nós (pensamos 
que) sejamos”. Essa afirmação remete a um dos casos de insucesso mais 
emblemáticos da história recente. 
O fracasso do Google Buzz 
Em 2010, Google lança uma plataforma social que integra atualização de 
status, postagens de fotos, mensagens diretas, discussões e e-mail. Mas uma das 
funcionalidades era, justamente, conectar-se com as pessoas para as quais você já 
havia enviado um e-mail. 
A aparente boa ideia foi muito bem aceita, no início, pela população de 20.000 
usuários que serviram de amostra para os primeiros testes. É isso mesmo: 20.000 
usuários! Aí você se pergunta: “Que empresa possui 20.000 usuários só para testes 
preliminares? E se mesmo assim, o produto não vingou, o que deu errado?” 
Bem... Raramente teremos uma amostragem tão grande como a do Google. 
O problema deles foi justamente a qualidade da amostra. É que esses 20.000 
usuários eram funcionários do próprio Google. Jacob Nielsen, considerado o “pai 
da usabilidade”, disse: 
Uma das lições mais difíceis da usabilidade é constatar que “você não 
é o usuário final”. Se você trabalha em um projeto de 
desenvolvimento, você é um usuário atípico por definição 
 
 
Fundamentos de UX – Página 19 de 78 
As funcionalidades do Google Buzz agradavam perfeitamente para a maioria 
dos seus empregados e, mesmo assim, a empresa recebia inúmeras reclamações 
até descontinuar o projeto. 
Moral da história: observar usuários reais ou potenciais do seu produto pode 
trazer muitas ideias para o design da experiência, além de ser mais confiável. Por 
isso, repita em voz alta: “Não existe usuário padrão!” “Não existe usuário médio!”. 
Então, como não cometer o mesmo erro? Resposta rápida: Construa modelos para 
entender seus usuários. A resposta longa vem a seguir. 
 
O que são modelos? 
Podemos começar dizendo que modelos são representações estruturadas de 
fenômenos e abstrações complexas. Podem ser usados nas ciências naturais e 
sociais. 
Os economistas se valem de modelos para entender o comportamento dos 
mercados, os físicos, para entender as partículas. Por isso, pesquisar e criar modelos 
descritivos de nossos usuários é uma ferramenta útil e poderosa. 
Os modelos também servem para otimizar a compreensão, visibilidade e 
comunicação de informações, lembrando que “informação” é bem diferente de “dado”. 
Exemplo: “Possuímos 2 milhões de usuários”. Isso é meramente um dado. 
Entretanto, a expressão: “Possuímos dois milhões de usuários, dos quais 
65% são mulheres e 35% são homens. Desse total, 47% possuem curso superior”. 
Isso sim, em UX, pode ser chamado de informação, pois é um dado com significado. 
Um bom modelo é aquele que evidencia as características mais relevantes. 
Tratando-se de usuários, podemos sugerir modelos que sejam representativos para 
um determinado grupo que, por sua vez, está inserido em uma população maior. 
 
 
 
Fundamentos de UX – Página 20 de 78 
Por que modelar usuários? 
É muito comum que nós (desenvolvedores, designers e gerentes de 
marketing) fiquemos tentados a encher nosso produto de novas ferramentas, 
estratégias ousadas e funcionalidades avançadas. 
Mas essas decisões devem ser pautadas em informações concretas e não 
em “caprichos” da equipe. E você deve estar muito bem embasado para convencer 
seu chefe, o gerente de marketing e sua equipe a abandonar algumas dessas coisas 
“superlegais” que foram propostas. 
Para isso, pesquise fundo quem é o seu público-alvo e como ele se comporta 
e quais são seus perfis. Em outras palavras, modele seus usuários! Em UX existe 
uma técnica largamente difundida para modelar usuários. Estamos falando da 
“Persona”. A seguir, abordaremos mais essa técnica. 
 
O que são personas? 
É uma técnica de modelagem de usuários que utiliza pessoas fictícias para 
representar grupos/perfis de usuários de um produto. A técnica é considerada barata, 
fácil e divertida para a equipe de desenvolvimento. Foi mencionada pela primeira vez 
no livro The Inmates Are Running the Asylum, de Alan Cooper. 
A persona é como uma ficha de personagem de RPG do usuário-modelo do 
sistema, criada a partir de dados reais. Contém, entre outros, o nome, gostos, hábitos, 
necessidades e habilidades dos usuários. Lembre-se: “fictício” não significa “falso”. 
Uma persona é um arquétipo de usuário que ajuda a direcionar decisões 
sobre funcionalidades, navegação, interatividade e elementos visuais na interface. 
Personas são perfis representativos de comportamentos e atividades que são 
contextualizadas e específicas a um determinado produto, software ou aplicação. São 
representadas graficamente por meio de uma “prancha” que pode ser uma folha de 
papel colada na parede. 
 
 
Fundamentos de UX – Página 21 de 78 
O ideal é que as pranchas de personas estejam em locais visíveis não só na 
sala de desenvolvimento, mas também, na da gerência e do marketing. Veja a seguir 
um exemplo de uma prancha de persona. 
Figura 9 - Exemplo de uma prancha de Persona. 
 
Personas são também um meio muito eficaz de comunicação interna da 
equipe. 
Quando uma descoberta importante é feita sobre o projeto, é muito mais fácil 
comunicar a equipe toda. Por exemplo, utilizar a frase: 
“O Marcelo Santos não está conseguindo usar nossa ferramenta de busca”. 
É melhor que: 
“Uma quantidade representativa dos participantes dos testes de usabilidade tiveram 
problemas com a ferramenta de busca”. 
Personas servem para otimizar o processo de desenvolvimento, uma vez que: 
 
 
Fundamentos de UX – Página 22 de 78 
 Engaja e conscientiza a equipe de projeto. 
 Chega-se a um consenso dos interesses do usuário. 
 Mantém o foco no usuário durante todo o projeto. 
 Agiliza a tomada de decisões, pois não é preciso consultar usuários reais a 
cada etapa. 
Como disse Alan Cooper, “Personas são uma forma de dar ao usuário um 
assento na mesa de desenvolvimento.”. 
 
Criando personas 
Uma boa prancha de persona deve conter: 
 Nome e foto. 
 Frase de efeito e características gerais. 
 Tipo. Ex.: “Adolescente do ensino médio” ou “Aposentada doméstica” 
 Função. Ex.: “usuário administrador” ou “editor de conteúdo” ou “usuário final”. 
 Motivações. 
 Objetivos. 
 Necessidades. 
 Dificuldades. Ex.: “Nunca usou um dispositivo touch na vida” ou “usa versão 
antiga do S.O em smartphone de baixo custo e baixa resolução” ou “não possui 
plano de dados 3G”. 
 Comportamentos e habilidades. É uma escala visual que mede certa 
habilidade ou comportamento da persona como “proficiência em informática: 
alta - baixa” ou “tendência de uso do seu smartphone: trabalho – diversão”. 
 
 
Fundamentos de UX – Página 23 de 78 
Para entender melhor, veja um exemplo a seguir: 
Figura 17 - Template para a construção de uma persona. 
 
Fonte: http://goo.gl/HlvXiG. 
Figura 10 - As pranchas ficam visíveis para toda a equipe.http://goo.gl/HlvXiG
 
 
Fundamentos de UX – Página 24 de 78 
Figura 11 - Grande parte dos produtos interativos demandam mais de duas 
personas. 
 
 
Coletando dados para as personas 
Existem várias maneiras de se obter dados relevantes para a construção das 
personas, por exemplo: 
‒ Analisando estatísticas de acesso (como Google Analytics). 
‒ Entrevistando com equipes de suporte (que, por sinal, sempre dão ótimas 
ideias sobre os diferentes perfis de usuário e suas demandas). 
‒ Verificando com a equipe de marketing se já não existe alguma pesquisa feita 
sobre o público-alvo (mesmo que a intenção seja descobrir consumidores e 
não usuários). 
‒ Criando questionários online (com perguntas-chave que irão revelar como são 
os perfis de usuário). 
 
 
Fundamentos de UX – Página 25 de 78 
Entretanto, é muito importante tomarmos alguns cuidados para que o 
processo não se complique ou pior: o seu método pode criar arquétipos falsos. 
Ao se trabalhar com personas, podemos cometer alguns enganos típicos que 
poderão prejudicar todo o planejamento estratégico. Por isso, preste atenção nos 
seguintes tópicos: 
‒ Personas não são segmentos de mercado definidos pela equipe de marketing 
(lembre-se: uma persona é um modelo de usuário e não de comprador). 
‒ Personas não são atores de sistema (personas são modelos de usuário sendo 
que um ator pode ser até uma máquina ou outro sistema). 
‒ Personas não são papéis de usuários (“usuário administrador” ou “cliente 
comprador” são perfis orientados à tarefa já as personas são orientadas a 
objetivos e comportamentos). 
‒ Não crie segmentações demais (muitos segmentos de usuários tornam sua 
compreensão mais difícil, além de não ser muito representativo). 
‒ Nas pesquisas, não pergunte informações pessoais em exagero (pergunte a si 
mesmo: “será que preferência musical, religião ou inclinação política são 
mesmo relevantes para o projeto da interface?”). 
 
Pesquisa etnográfica 
Will Evans, diretor de User Experience Design, na TLC Labs, afirmou que: 
“Projetar baseando-se na sua própria experiência, sem nenhuma pesquisa de 
usuários, é como apostar na loteria”. Por incrível que pareça, há muitos projetos com 
orçamento grande que não investem em pesquisa alguma. Lembre-se, pessoas são 
complexas. 
Por isso, a etnografia permite extrair algum sentido nessa complexidade. Ela 
faz com que a gente veja além do nosso (pré) conceito e mergulhe no mundo dos 
outros. O mais importante é que a etnografia nos permite enxergar padrões de 
 
 
Fundamentos de UX – Página 26 de 78 
comportamento no contexto do mundo real, que podem ser entendidos tanto 
racionalmente, como intuitivamente. O termo vem do Grego “éthnos” (raça, povo) + 
“gráphein” (escrita). 
Este método de pesquisa foi utilizado pela primeira vez pelo historiador 
alemão Gerhard Friedrich Müller, considerado o pai da etnografia. Hoje, o método é 
usado para pesquisas de cunho social (indicadores de desenvolvimento) e 
mercadológico (comportamentos de consumo). 
Figura 12 - Livro Observing the User Experience: A Practitioner's Guide to 
User Research. 
 
Em 2003, Mike Kuniavsky escreveu um clássico do UX chamado: “Observing 
the User Experience: A Practitioner's Guide to User Research” Este livro foi um marco 
na história do UX, pois foi um dos primeiros a tratar com bastante praticidade, as 
técnicas para ultrapassar o abismo entre o comportamento dos usuários e o que 
designers e desenvolvedores imaginam sobre eles. 
Uma das principais recomendações em pesquisas etnográficas é: “Observe 
e aprenda com o público observado”. Por exemplo, em vez de fazer suposições sobre 
o comportamento de uso de mulheres que jogam videogames, há duas alternativas: 
a) Convidar alguma mulher “gamer” e fazer um questionário bem extenso com ela ou 
 
 
Fundamentos de UX – Página 27 de 78 
b) Gastar uns 4 ou 5 dias observando e fazendo anotações sobre como as mulheres 
interagem, comportam nas Lan Houses, nos jogos online, nos fóruns, em casa, etc. 
Entrevistas e questionários são bem úteis, mas podem deixar escapar 
algumas peculiaridades. Em pesquisas etnográficas, é mais indicado uma 
observação ativa (quando o pesquisador se apresenta e até participa no grupo 
observado) ou passiva (quando apenas observa). 
Em vez de fazer perguntas, observe e converse bastante para saber sobre as 
motivações de cada mulher jogadora e o que interfere em suas escolhas. 
 
Conclusão 
Não dá para criar experiências de uso sem conhecer seus usuários. Por isso, 
para evitar o achismo, pesquise sempre e modele seus usuários utilizando personas. 
As chances de acerto e de sucesso no mercado são muito maiores. 
 
 
Fundamentos de UX – Página 28 de 78 
Capítulo 3. Arquitetura da informação 
Antes de abordarmos os conceitos e técnicas de Arquitetura de Informação, 
é preciso saber que, na verdade... 
 
Somos todos arquitetos 
Sim! Em nossa vida, nós temos a necessidade de organizar, classificar e 
categorizar tudo que conhecemos. 
Figura 13 - Todo mundo categoriza/classifica/organiza. 
 
E essa é uma prática que aperfeiçoamos a cada dia para tirar proveito da 
informação organizada. Na figura anterior, a informação é organizada pelos sabores 
e tipos de alimentos. Na figura a seguir, a arquitetura é feita por assunto: 
 
 
Fundamentos de UX – Página 29 de 78 
Figura 22 - Os cadernos de um jornal são exemplos de organização da 
informação, cujo esquema é o assunto. 
 
Ou seja, todo mundo categoriza/classifica/organiza alguma informação ou 
coisa. O que varia são os esquemas de organização. Os esquemas de organização 
podem ser ambíguos ou exatos. Veja: 
Ambíguos por assunto - Organiza a informação em temas. Ex.: Cardápios, 
Editoriais do jornal, Supermercado. 
Ambíguos por tarefa - Organiza a informação em sequência de ações. Ex.: 
Menu aplicativos Windows (Editar, Exibir, Formatar). 
Ambíguos por audiência - Organiza a informação para diferentes públicos. 
Ex.: Lojas de departamento (classifica seus produtos em masculino, feminino e 
infantil). 
Quanto aos esquemas exatos, temos: 
Alfabeto - Indicado para organizar informação extensa e de público variado. 
Ex.: Dicionários, Enciclopédias, Listas Telefônicas. 
Tempo - Indicado para mostrar a ordem cronológica de eventos. Ex.: Livros 
de História, Grade de programação, Banco de notícias. 
 
 
Fundamentos de UX – Página 30 de 78 
Localização - Compara informações de diferentes locais. Ex.: Previsão do 
tempo, pesquisa boca-de-urna, Atlas. 
Sequência - Organiza itens por ordem de grandeza e valor. Ex.: Lista de 
preços, Classificação do campeonato. 
No fim das contas, o objetivo da Arquitetura de Informação é quase que 
“pegar o usuário pela mão” e conduzi-lo à informação que ele deseja. 
Figura 14 - Procedimentos da Arquitetura de Informação. 
 
Segundo Rosenfeld e Morville (1998), a AI é fruto da combinação de quatro 
elementos: 
Sistema de organização: refere-se a uma maneira lógica de classificação 
informacional, definindo os tipos de relacionamento entre itens de conteúdos e 
grupos. 
Sistema de rotulagem: representa a nomenclatura dada a cada grupo ou 
categoria de informação. 
Sistema de navegação: apresenta a trajetória que o usuário terá disponível 
no website, sistema ou aplicativo para acessar cada informação com a distribuição de 
links, botões e menus. 
 
 
Fundamentos de UX – Página 31 de 78 
Sistema de busca: é a estratégia para auxiliar o usuário na localização e no 
acesso rápido a informações armazenadas no produto. 
Figura 15 - O livro Arquitetura da Informação, também conhecido como “o 
livro do urso polar” é a principal obra sobre o tema. 
 
Morville e Rosenfeld em seu livro “Arquitetura da Informação” alertam a 
arquitetura deve ser pautada em três pilares: usuário, contexto de conteúdo. Dessa 
forma, deve-se evitar ao máximo classificar / organizar / rotular o conteúdo 
do seu produto, baseando-se apenas naestrutura organizacional da sua empresa. A 
organização da informação deve ser lógica do ponto de vista do usuário e não do 
organograma. 
Então, como organizar os conteúdos de um produto interativo, que leve em 
consideração a perspectiva do usuário? Bem, a maneira mais segura é pedir ao 
público para que ele mesmo organize e, assim, observar o resultado. Ou seja, faça 
um Cardsorting. 
 
 
 
 
Fundamentos de UX – Página 32 de 78 
Cardsorting e mapa de A.I 
Cardsorting é uma técnica para compreender como o usuário agrupa 
informações dentro de um domínio. Nela, os participantes organizam cartões 
representando tipos específicos de informação. 
Segundo Nielsen (2004), um erro comum nos sites e intranets é estruturar a 
informação baseando-se em como a empresa enxerga a sua informação. 
(Espelhamento do organograma). O Cardsorting evita esse erro e elimina o achismo 
da equipe de desenvolvimento. Quanto à sua aplicação, pode ser ABERTO ou 
FECHADO. 
Aberto: o usuário agrupa livremente os itens criando o número de conjuntos 
que achar necessário. 
Fechado: os grupos são previamente criados e rotulados pelo pesquisador, 
e o usuário apenas agrega itens a grupos pré-existentes. 
Figura 16 - Exemplo de um cardsorting sendo aplicado em uma oficina. 
 
No exemplo acima, podemos ver uma oficina de cardsorting onde os 
participantes organizam as informações em cartões espalhados. Dessa forma, o 
avaliador deve observar os padrões e, de posse desses dados, propor a organização 
da informação do produto. 
 
 
Fundamentos de UX – Página 33 de 78 
Na figura a seguir, temos um exemplo de uma ferramenta online para 
aplicarmos cardsorting à distância, ou seja, não é necessária a presença física dos 
participantes. Além disso, a ferramenta já fornece os dados tabulados e os termos 
mais recorrentes. 
Figura 17 - Exemplo de um Cardsorting fechado, usando a ferramenta Optimal 
Workshop. 
 
Fonte: optimalworkshop.com 
Na figura a seguir, temos um exemplo de uma matriz de similaridade, extraída 
da tabela de resultados de um Cardsorting fechado usando a ferramenta Optimal 
Workshop. 
Figura 18 - Matriz de similaridade do Optimal Workshop. 
 
 
file:///C:/Users/IGTII/Downloads/FUX/3.%20Apostila/1.%20Revisado/3.%20Apostila/Revisados/3.%20Apostila/2.%20Revisado/3.%20Apostila/optimalworkshop.com
 
 
Fundamentos de UX – Página 34 de 78 
Criando um mapa de Arquitetura de Informação 
Um mapa de A.I bem feito deve contemplar o máximo de variáveis possíveis 
(atores, funcionalidades, possíveis caminhos, desvios e relacionamentos). Por isso, 
não economize nos comentários e anotações. 
Deixe o mapa em um local acessível a todos da equipe (impresso ou on-line). 
Caso o mapa sofra alguma alteração, deixe claro o que mudou aplicar um nº de 
versão é uma boa prática. 
Ex.: ai_produto_rev03.html 
Figura 19 - Exemplo de um mapa de AI em HTML feito com a ferramenta 
MindJet Manager. 
 
Ferramentas 
A princípio, o mapa pode ser feito até mesmo em papel e afixado na parede. 
Mas existem ferramentas que auxiliam na criação e compartilhamento do mapa de AI. 
Veja alguns exemplos: 
 
 
Fundamentos de UX – Página 35 de 78 
 Mindjet Mind Manager (Desktop / Mobile). 
 xMind (Desktop). 
 iMindMap (Desktop, Web, Mobile). 
 Omnigraffle (Desktop / Mobile - Apple). 
 EasyMapper (Desktop). 
 MindMeister (Web). 
 
Conclusão 
Arquitetura da Informação visa garantir que todo o conteúdo está organizado 
e categorizado da maneira mais lógica para o usuário. Por isso, elimine os achismos 
e observe seu público. 
Até aqui, nosso conhecimento de UX está bastante abstrato. Por isso chegou 
a hora de materializarmos nossas ideias em algo mais palpável. Vamos prototipar! 
 
 
Fundamentos de UX – Página 36 de 78 
Capítulo 4. Prototipagem 
Uma definição bem abrangente do termo prototipagem seria: “uma versão 
simulada ou amostra de um produto final, utilizada para testes antes do lançamento”. 
Ou seja, o objetivo de qualquer protótipo é testar, seja uma tela, um caso de uso, uma 
funcionalidade ou mesmo uma ideia. 
Um dos equívocos mais comuns sobre prototipagem é pensar que ela só 
acontece uma ou duas vezes, no final do processo de concepção. Isso não é verdade, 
prototipe o mais cedo possível e sempre que puder. 
No contexto do software, são representações visuais que servem para 
melhorar a visibilidade e compreensão de telas, fluxos e interações, sempre do ponto 
de vista do usuário. Podem se de baixa ou alta fidelidade (ou resolução). Protótipos 
de baixa fidelidade, geralmente são feitos em papel. 
Os de alta fidelidade, também são chamados de Wireframes, ou protótipos 
funcionais, justamente por serem mais próximos do modelo de interação do produto 
final (alguns consideram o wireframe como um protótipo de “média fidelidade”). 
Sempre acontecem depois da Arquitetura de Informação. 
O gráfico abaixo, criado por Traci Lepore, UX Sênior da Bridgeline Digital, faz 
uma relação bem clara sobre o nível de fidelidade e o contexto do ciclo de vida de 
desenvolvimento do produto. Quanto mais à esquerda, ou seja, no início do 
desenvolvimento, menor a fidelidade do protótipo. Por outro lado, quanto mais 
refinado e maduro estiver o escopo do produto, maior será o nível da fidelidade da 
prototipagem. 
 
 
Fundamentos de UX – Página 37 de 78 
Figura 20 - Relação do nível de fidelidade com o momento do projeto. 
 
Desde a validação de uma ideia até a simulação do produto final, os protótipos 
são úteis para manter a segurança da equipe de desenvolvimento. É que como as 
ideias já foram testadas, fica muito mais confortável implementar uma solução sem o 
medo de ter que refazer tudo. 
Prototipação em papel = Prototipação rápida 
 É um método que permite delinear de forma ágil e barata, a interface de um 
sistema (web, app, game etc.). 
 Devem elucidar a lógica e as regras de negócio do produto. 
 É bem barato! (Gasta-se, basicamente, papel, lápis e tempo) 
 Possui o fator “engajamento” (por envolver mais pessoas e ter um caráter 
quase lúdico). 
 Não precisa ser bonito! (Aliás, a proposta é ser ágil. O foco é na experiência 
de uso) 
 Não deve refletir a aparência estética (design). 
 Podem ser usados em testes de usabilidade. 
 
 
Fundamentos de UX – Página 38 de 78 
Figura 30 - Exemplo de um protótipo em papel. 
 
Pode servir de documentação, em lugar às documentações mais 
extensas. Deve ser um reflexo de: 
 Modelagem de tarefas. 
 Requisitos. 
 Arquitetura de informação. 
 Conteúdo. 
 
Benefícios 
 As alterações de design, decorrentes de testes com usuário, podem ser feitas 
em tempo real. 
 As pessoas que participam do teste ficam mais confortáveis em criticar o 
produto, pois têm plena noção que se trata de um protótipo. 
 Propor alterações conceituais nessa etapa, economiza tempo e dinheiro, já 
que alterar um software pronto é sempre mais custoso. 
 
 
 
Fundamentos de UX – Página 39 de 78 
Estima-se que seja 100 vezes mais barato fazer mudanças antes de 
escrever qualquer código, do que aplicá-las após a implementação. 
Jakob Nielsen 
 
Construindo seu protótipo 
Em 2009, a Interactions Magazine publicou um artigo de três pesquisadores 
da universidade de Indiana, que propunha uma nova abordagem para a prototipagem 
em papel. A proposta seria inserir os desenhos no próprio dispositivo para que os 
testes fossem mais fidedignos. Segundo o artigo, a prototipagem deveria conter as 
etapas a seguir: 
1. Desenhar os protótipos; 
2. Digitalizar os desenhos e ajustar os tamanhos das telas; 
3. Salvar as imagens na galeria de fotos do dispositivo; 
4. Ordenar as imagens na ordem correta do fluxo de operação; 
5. Ao testar, explicar ao usuário que a interação se dará ao fazer o “slide” de 
uma foto para outra. 
Entretanto, já existem ferramentas próprias destinadas a prototipagem 
via “Paper in Screen”, como o POP – Prototyping On Paper. 
 
Protótipos de altafidelidade 
São protótipos que representam a estética e o layout final que o produto terá. 
Esses protótipos são norteados pela linha gráfica do produto (identidade visual, paleta 
de cores, tipografia) ou pelo manifesto de design da empresa. 
No caso de aplicativos, é necessário seguir as guidelines de design de cada 
plataforma. Para saber sobre as guidelines do Android, acesse: 
 
 
Fundamentos de UX – Página 40 de 78 
http://developer.android.com/design/. Para saber sobre as orientações do iOS, 
acesse: http://goo.gl/01xkAk. 
 
Protótipos funcionais 
Também conhecidos como Wireframes. São protótipos que simulam o 
comportamento, funcionalidade e a navegação de forma mais semelhante à versão 
final. 
Figura 21 - Snapshot do JustInMind. 
 
São feitos a partir de ferramentas mais elaboradas como: 
 JustInMind. 
 Excode (Apple). 
 Axure. 
Existem ainda ferramentas online, como o excelente Fluid, que além de 
possuir muitos componentes prontos, é multiplataforma e ainda permite compartilhar 
a URL do protótipo no final. 
http://developer.android.com/design/
http://goo.gl/01xkAk
 
 
Fundamentos de UX – Página 41 de 78 
Conclusão 
Prototipe sempre e o mais cedo possível. Só assim, a equipe poderá avançar 
no desenvolvimento com segurança de que o produto foi bem testado e não sofrerá 
grandes alterações. A seguir, abordaremos as especificidades do design de interface 
para dispositivos móveis. 
 
 
Fundamentos de UX – Página 42 de 78 
Capítulo 5. Projeto de interface para dispositivos móveis 
Como em qualquer projeto de UX, precisamos conhecer o nosso público alvo, 
ou seja, precisamos saber as caraterísticas mais relevantes sobre nossos usuários a 
fim de propor uma experiência adequada e consistente. Para isso, a maioria das 
equipes de design utilizam a técnica de personas para modelar seus usuários. 
No caso de dispositivos móveis, esse trabalho pode ser facilitado com 
algumas personas típicas que já estão prontas, evitando assim, o esforço de 
pesquisar e modelar os usuários. 
 
Personas típicas para projetos mobile 
Bruce Hershey, diretor sênior de estratégias mobile da Merkle, criou três 
personas baseando-se em dados de pesquisa do instituto Forrester Research, além 
de pesquisas com clientes de grandes marcas do mercado. 
As pesquisas são a melhor forma de conhecer seu público e cabe a você 
segmentá-lo da melhor forma possível. De toda forma, as três personas típicas de 
Bruce Hershey podem ser um grande ponto de partida. 
Touch screeners (geração touchscreen): 
 18 a 34 anos de idade (Geração Y/Millennials). 
 Acompanham as últimas tendências. 
 Provavelmente, possuem smartphones. 
 Provavelmente, baixam aplicativos, acessam seu banco via smartphone, 
escaneiam QR Codes, assistem vídeos e pesquisam produtos. 
Green thumbs (“jardineiros” ou “do lar”): 
 24 a 44 anos de idade (geração x e y que provavelmente já possuem filhos). 
 Inclui mães jovens que estão aumentando as atividades online via mobile para 
poupar tempo. 
 
 
Fundamentos de UX – Página 43 de 78 
 Participam de promoções e concursos. 
Straight talkers (seriam os “se gíria” ou que falam sem os trejeitos dos adolescentes): 
 35 a 65 anos de idade (Geração X e Boomers com filhos adolescentes). 
 Gasta a maior parte do tempo livre com a família. 
 Notável aumento do uso de mobile para pesquisa, mensagens de texto e muito 
esporadicamente pesquisa por produtos. 
 
O paradigma desktop 
Em 1984, Jakob Nielsen, considerado o “pai da usabilidade” realizou um 
estudo na IBM, para ver qual paradigma se encaixava melhor no modelo mental das 
pessoas que iriam utilizar os terminais 3270 (terminais burros como eram conhecidos 
aqui). Nessa altura você deve estar imaginando que a resposta foi “seta para baixo”. 
Exato! Afinal é o padrão usado até hoje. 
Figura 22 - Em desktop, movemos a tela em direção ao conteúdo. 
 
No desktop, movemos a tela em direção ao conteúdo. Recentemente, a Apple 
alterou um pouco esse modelo nos Mac OS. Se usarmos o scroll do Magic Mouse da 
Apple, o conteúdo moverá na direção oposta à do Windows. Em mobile, o paradigma 
é o oposto, ou seja, é o conteúdo que se move dentro da tela (como no Magic Mouse 
da Apple). 
 
 
Fundamentos de UX – Página 44 de 78 
E quando se fala em mobile, devemos entender que não se trata apenas de 
smartphones, mas também tablets, games consoles, totens e outros. Pode parecer 
óbvio, mas esse é um fator constantemente negligenciado pelos projetistas de 
interfaces mobile. 
Figura 23 - Em mobile, o paradigma é o oposto: é o conteúdo que é descolado 
dentro da tela. 
 
 
Principais diferenças entre desktop e mobile 
Muitos esquecem que, não há mouse com scroll, nem teclado físico na 
maioria dos dispositivos móveis e, por isso, deixam de reservar os espaços 
necessários para o toque, o scroll e outros movimentos. Por causa disso, muitas 
vezes os usuários acabam, sem querer, acionando um comando quando queria 
apenas subir o conteúdo. A seguir, veremos outras diferenças cruciais. 
1. Não há como prever onde os usuários irão interagir com seu aplicativo. 
Os notebooks impulsionaram a história da computação móvel, mas, agora, as 
pessoas levam a computação na palma de suas mãos e esperam que tudo funcione 
no lugar e na hora que elas desejam. 
2. Nem todo mundo está numa grande metrópole. 
No Brasil, mais de 15% da população vive na área rural. Sem contar as 
cidades de médio porte. Ou seja, nem sempre as pessoas estarão dentro de um metrô 
 
 
Fundamentos de UX – Página 45 de 78 
ou naquelas ruas modernas e bem pavimentadas como nos comerciais de TV. Então 
não se assuste ao saber que seu aplicativo foi acessado em cima de um trator. 
3. Sua interface deve atender às necessidades dos usuários, as quais 
mudam dependendo de onde estão. 
Um clássico estudo feito pelo Google descobriu que um mesmo usuário pode 
ter até três perfis diferentes dependendo do contexto: 
a) “O Repetitivo” – Checa a mesma informação várias vezes como status do 
Facebook, Instagram etc. 
b) “O entediado” – Geralmente é quando precisa de um passatempo como 
esperando uma conexão em um aeroporto, dentro de uma viagem longa, 
etc. Esse perfil é muito semelhante ao internauta comum. 
c) “O apressado” – Quer encontrar o que precisa com urgência, tipo, uma 
agência bancária ou o trajeto para o aeroporto. Nesse caso, utilizar as 
APIs de georreferenciamento são bastante úteis. 
4. As interfaces clássicas de Web podem não funcionar bem. 
Lembre-se não só a tela é menor, mas a conexão e o contexto de uso são 
bem diferentes em mobile. Por isso privilegie a informação relevante e faça com que 
o layout seja adaptado à ao dispositivo. Para isso existem as técnicas de Responsive 
Design. 
Para saber mais, acesse: http://tableless.com.br/introducao-ao-responsive-
web-design/ 
5. Não existe interface padrão para todos os dispositivos mobile. 
Symbiam, BlackBerry, Firefox OS, Windows Mobile, iOS e Android são 
bastante distintos entre si em termos de interface. Cada um deles tem sua 
particularidade e seria um erro criar a mesma interface para todos. 
6. Não há muito espaço para expor sua marca. 
http://tableless.com.br/introducao-ao-responsive-web-design/
http://tableless.com.br/introducao-ao-responsive-web-design/
 
 
Fundamentos de UX – Página 46 de 78 
Apesar de a maioria dos clientes caírem na tentação de pedir para aumentar 
o logotipo, em mobile, isso deve ser feito com bastante cuidado. Nesse caso, o melhor 
é seguir a identidade visual da empresa ou produto. 
7. Tamanho é documento. 
Se em laptops e desktops você pode usar barras laterais, banners e menus 
extensos, lembre-se que, agora, você deve dar importância à tarefa a ser executada. 
Dê preferência a uma tarefa-chave por tela. Pergunte a si mesmo: “Quais são 
as ações e comandos essenciais para a execução de uma tarefa, e quais deles eu 
posso deixar para uma tela secundária? 
8. Não deixeque sua interface exija muita digitação de texto. 
Digitar em smartphones já é difícil. Ainda mais quando estamos em 
movimento. Por isso, faça com que sua interface possua comandos frequentes à 
vista. Seguem abaixo algumas dicas que podem ser úteis: 
 Adote padrões inteligentes e orientados ao objetivo da tarefa. 
 Deixe algumas configurações como default para o usuário não ter que 
configurar tudo. 
 Ofereça ao usuário uma lista de opções de escolha em vez de ter que digitá-las. 
9. Desenhar para diferentes telas e densidades pode ser doloroso. 
Lembre-se que não só os tamanhos são diferentes, mas a densidade de 
pixels também varia. Dessa forma, um quadrado de 80px de largura pode aparecer 
maior ou menor dependendo do aparelho. Densidade é a quantidade de pixels em 
uma polegada linear de tela. Por exemplo, o iPad Air e o Galaxy Tab 3 possuem 
dimensões semelhantes. Mas o primeiro tem uma densidade de 264 ppi (pontos por 
polegada) enquanto o segundo tem apenas 149 ppi. Isso significa que o quadrado 
acima visto nesses dois aparelhos terá tamanhos diferentes, ou seja, no iPad o 
quadrado terá quase a metade do tamanho que no Galaxy. No link abaixo você 
encontra uma tabela completa de tamanhos e densidades de vários aparelhos: 
http://www.gizmag.com/tablet-comparison-2013/29708/ 
http://www.gizmag.com/tablet-comparison-2013/29708/
 
 
Fundamentos de UX – Página 47 de 78 
10. Usuários mobile não são tão fiéis. 
Devido a imensidão de opções disponíveis, usuários desistem facilmente de 
um aplicativo que não lhe agrada em algum aspecto, seja funcional, estético ou outro 
qualquer que afete a sua experiência de uso. Por isso, tome cuidado em fazer uma 
interface que agradável, e com uma experiência rica. 
 
Gesture 
Um gesto é, basicamente, um movimento de um dedo, mão ou outra parte do 
corpo para expressar uma ideia, desejo, ou acionar um comando. 
Inicialmente, alguns dispositivos só podiam processar o toque de um dígito 
por vez, mas hoje em dia, os dispositivos multitoque podem perceber gestos feitos 
por um dedo ou mais simultaneamente. 
Cada gesture recebe um nome específico. O problema é que esse nome varia 
em diferentes plataformas (iOS vs Android vs Windows Phone vs Palma vs Take-Seu-
Pick). Por isso, é recomendável ler a documentação de Design Pattern de cada 
plataforma. 
Figura 24 - Documentação sobre gestures disponibilizada pelo iOS e Android 
em seus respectivos sites de desenvolvimento. 
 
Luke Wroblewski criou um excelente guia de referência de Gestures que está 
disponível em PDF no link abaixo: 
 
 
Fundamentos de UX – Página 48 de 78 
http://static.lukew.com/TouchGestureGuide.pdf 
Em seu site ele ilustra, explica gestos fundamentais, bem como a forma como 
eles diferem em todas as plataformas. Veja alguns exemplos: 
Figura 25 - Alguns gestos (gestures) ilustrados por Luke Wrobleswski. 
 
 
Feedback 
São ações e métodos que atraem a atenção do usuário para uma informação 
importante. Algumas orientações: 
a) Alertas e demais mensagens devem ser usadas com moderação para que o 
usuário saiba que se trata de uma informação crítica. Exagerar nesse quesito 
faz com que o usuário não dê importância aos alertas. 
b) As mensagens devem ser claras e objetivas explicando o que aconteceu, a 
causa e oferecer uma saída com comandos e botões claros. 
c) As notificações devem ser sucintas e informativas sem interferir no que o 
usuário está fazendo de modo que ele possa responder à notificação ou 
descartá-la com facilidade. 
d) Não quebre o fluxo de interação do usuário para exibir alertas. 
Orientação: 
Trata-se da posição do dispositivo em relação ao solo. Pode ser retrato ou 
paisagem. Essa posição é detectada pelo acelerômetro disponível em quase todos 
os aparelhos atuais. 
Pinch para zoom out, 
spread para zoom in
dragging para mover, 
ajustar, rolar e posicionar
Press and hold para abrir um 
item ou menu de contexto
Flick para próxima tela 
ou rolagem rápida
http://static.lukew.com/TouchGestureGuide.pdf
 
 
Fundamentos de UX – Página 49 de 78 
Figura 36 - Orientações: Retrato (Portrait) à esquerda e Paisagem (Landscape) 
à direita. 
 
No projeto de sua interface, considere as diferenças de orientação a fim de 
propor novas possibilidades de interação. Em sites responsivos, é possível detectar 
com CSS qual é a orientação do dispositivo. 
Figura 26 - Trecho de CSS para detectar a orientação do dispositivo. 
 
Tente manter a localização do usuário na tela para que ele não tenha que 
rolar até o ponto em que estava. Se o contexto permitir, adicione conteúdos diferentes 
ou novas funcionalidades como no caso do aplicativo da seguradora ING: 
Figura 27 - Iniciativa da ING em prover conteúdo adicional em diferentes 
orientações. 
 
 
 
 
Fundamentos de UX – Página 50 de 78 
As variadas densidades de telas 
Recapitulando, densidade de tela é a quantidade de pixels existente em um 
determinado comprimento de tela física. 
A medida padrão de densidade é o ppi = pixel per inch ou pixel por polegada. 
Na grande maioria dos computadores desktop, a densidade dos monitores é de 72 
ppi. Ou seja, em uma polegada do seu monitor, cabem 72 pixels. Nos computadores 
da Apple munidos com a tecnologia Retina Display, a densidade chega a 288 ppi. 
Há uma tendência por parte da indústria de smartphones, tablets e TVs em 
aumentar a densidade das telas para valores maiores que 300 ppi. Isso se deve ao 
fato de que, num futuro próximo, o padrão full-HD cuja resolução máxima é de 1920 
por 1080 pixels seja substituído pelo padrão 4K que chega a ter 4 vezes mais 
resolução que o anterior. O iPhone 4 e o Samsung Galaxy SIII foram um dos primeiros 
a ultrapassarem a marca dos 300 ppi. 
Figura 28 - Diferenças de densidades de tela entre os modelos da linha 
iPhone. 
 
Essa diferença entre densidades e tamanhos de tela pode ser problemática 
para nós desenvolvedores. Em telas com diferentes densidades, um elemento visual 
com a mesma medida em pixels terá tamanhos “físicos” diferentes. Veja o exemplo 
abaixo. 
 
 
Fundamentos de UX – Página 51 de 78 
Figura 29 - Diagrama que mostra a densidade de tela. 
 
O botão amarelo possui a mesma medida em pixels (4 x 2), mas aparece em 
tamanhos diferentes, em telas com outras densidades maiores. 
Como vimos anteriormente, a grande diversidade de dispositivos Android 
torna essa tarefa mais difícil. No caso do iPhone, por ser uma tecnologia fechada, 
esse problema é minimizado. 
Desde 2007, a Apple lançou apenas sete modelos do seu smartphone, 
apenas na versão 4, a densidade foi aumentada. 
Figura 30 - Cinco modelos e apenas duas densidades diferentes. 
 
No caso da família iPad, apenas a última geração do iPad Retina e do iPad 
mini é que possuem 320 ppi. As demais, apenas 130 ppi. 
 
 
Tela de densidade baixa Tela de densidade média Tela de densidade alta
 
 
Fundamentos de UX – Página 52 de 78 
Figura 31 - A tela Retina é que possui densidade maior que 300 ppi. 
 
Figura 32 - Tamanhos e densidades do iPhone após a versão 4. 
 
Quando o assunto é Android, o desafio aumenta. 
 
 
Fundamentos de UX – Página 53 de 78 
Figura 33 - Variedade de dispositivos Android. 
 
Por causa da grande quantidade de fabricantes de telas e dispositivos com 
Android, o Google criou um mecanismo que permite com que os desenvolvedores 
possam criar layouts usando uma nova medida que independe da densidade da dela 
- o dp (density independent pixel). O dp é uma espécie de “pixel virtual” para designar 
dimensões e posicionamento. 
 
Como o dp funciona? 
Elementos gráficos em dp são escalonados automaticamente para o tamanho 
apropriado, independentemente do tamanho ou da densidade da tela. Veja abaixo o 
mesmo botão mostrado anteriormente, só que dessa vez, com as medidas em dp e 
não mais em pixels. 
Figura 34 - Dica: em Android, 1dp corresponde a 1px em uma tela de 160ppi. 
 
Tela de densidade baixa.
O botãofoi reajustado em 
seu tamanho “físico”.
Tela de densidade média.
É usada como a base de 
cálculo. (160 ppi)
Tela de densidade alta.
O botão foi reajustado em 
seu tamanho “físico”.
 
 
Fundamentos de UX – Página 54 de 78 
Conclusão 
Design para dispositivos móveis ainda não é algo trivial como possa parecer. 
É preciso acompanhar de perto como se dá a interação por parte dos usuários e 
aprender com eles. Falando nisso, o assunto do próximo capítulo é justamente sobre 
análise a avaliação da experiência de uso. 
 
 
Fundamentos de UX – Página 55 de 78 
Capítulo 6. Avaliação Heurística 
Durante o ciclo de desenvolvimento, é necessário avaliar a qualidade da 
experiência que o nosso design proporciona e corrigir os eventuais problemas que 
possam surgir. 
Existe uma técnica que nos permite avaliar a interface de modo a prever 
alguns problemas de usabilidade com grande antecedência, como é o caso da 
Avaliação Heurística. Antes de aprofundar no assunto das avaliações heurísticas, 
vamos tratar primeiro das diferentes abordagens de avaliação. Quanto ao momento 
da avaliação, podemos classificar dois tipos: 
Avaliações formativas: Que acontecem no início ou durante o 
desenvolvimento 
Avaliações somativas: Que ocorrem ao final do desenvolvimento ou até 
mesmo depois. Pode ser que sejamos contratados para avaliar a usabilidade de um 
produto já existente no mercado. 
No que diz respeito à aplicação, os métodos de avaliação de usabilidade 
podem ser empíricos ou analíticos. 
Empíricos: 
Requerem a participação de usuários durante a coleta de dados, que, 
posteriormente, serão analisados pelo especialista, a fim de identificar os problemas 
da interface. 
São realizados em ambientes controlados, no qual os avaliadores gravam 
toda a interação em vídeo para posterior análise. Durante a realização do teste, um 
dos avaliadores vai anotando os incidentes ocorridos durante a interação, além dos 
comentários do usuário em relação à interface. 
Logo após o teste, os usuários respondem a um questionário com perguntas 
relacionadas à satisfação em relação ao produto e, também, perguntas com 
sugestões de melhorias. 
 
 
Fundamentos de UX – Página 56 de 78 
Analíticos: 
Também conhecidos como métodos de inspeção, ou de prognóstico, 
caracterizam-se pelo fato do usuário não participar diretamente das avaliações. 
Requerem a presença de um especialista, que explorará a interface, a fim de 
encontrar problemas de usabilidade. 
Além da identificação dos problemas, os avaliadores fazem sugestões de 
correção. Tem como resultado um relatório formal dos problemas identificados 
e as sugestões de melhorias. A Avaliação Heurística é o método analítico de 
avaliação mais popular, abrangente e fácil de usar. 
 
Avaliação heurística: o que é? 
A palavra heurística vem da palavra grega Heuriskein, que significa descobrir 
(e que deu origem também ao termo Eureca). É um método rápido e barato para 
analisar a usabilidade de um produto/website/sistema. Destaca-se pela eficiência no 
levantamento precoce de problemas de usabilidade. Dispensa o uso de um 
laboratório específico e não envolve usuários. 
Recomenda-se que a análise seja realizada por especialistas em usabilidade, 
porém nada impede que usuários estudem os critérios de avaliação e realizem a 
análise. Nielsen diz que o melhor custo benefício para a aplicação desta análise é 
utilizando entre 3 e 5 avaliadores. Jakob Nielsen (1993), em seu livro Usability 
engineering, propõe um conjunto de dez heurísticas de usabilidade: 
1. Visibilidade e reconhecimento do estado ou contexto atual do sistema. 
2. Compatibilidade com o mundo real. 
3. Controle e liberdade do usuário. 
4. Consistência e padrões. 
5. Prevenção de erros. 
 
 
Fundamentos de UX – Página 57 de 78 
6. Reconhecimento ao invés de memorização. 
7. Flexibilidade e eficiência de uso. 
8. Projeto estético minimalista. 
9. Diagnóstico e correção de erros. 
10. Ajuda e documentação. 
As heurísticas, neste caso, são um conjunto de regras e métodos 
que levam à descoberta e à resolução de problemas. É importante ressaltar que leva 
à resolução, mas não aplica/implementa a resolução dos problemas encontrados. A 
seguir, estão listadas as 10 heurísticas com sua respectiva definição. 
Heurística 1 - visibilidade e reconhecimento do estado ou contexto atual do sistema: 
feedback: 
O sistema deve sempre informar ao usuário o que está acontecendo, 
deixando sempre visível o status do sistema a fim de evitar que o usuário se sinta 
perdido. 
Figura 35 - Exemplo de uma tela que informa que o sistema está carregando e 
esta é a razão para não estar disponível. 
 
Heurística 2 - compatibilidade com o mundo real: linguagem adequada: 
O sistema deve utilizar uma linguagem familiar ao usuário e não focada em 
linguagem técnica de difícil compreensão para os usuários. Para o cumprimento desta 
recomendação o conhecimento do nível cultural do usuário é fundamental. 
 
 
Fundamentos de UX – Página 58 de 78 
Figura 36 - Mensagem de exceção que não diz nada para o usuário. 
 
Heurística 3 - controle e liberdade do usuário: direitos e deveres: 
O sistema só deve executar tarefas que o usuário solicitar e quando o usuário 
solicitar. 
O usuário deve ter controles sobre o processamento do sistema com a 
possibilidade de interromper, cancelar ou continuar as tarefas que estão sendo 
realizadas. Estas ações devem ser antecipadas e as opções possíveis no momento 
devem ser oferecidas ao usuário. 
Para Nielsen, o usuário precisa ter conhecimento de uma “saída de 
emergência” para quando toma ações erradas por engano, ele precisa ter liberdade 
para desfazer, corrigir ou refazer ações. 
 
 
Fundamentos de UX – Página 59 de 78 
Figura 37 - Exemplo de telas de cópia de arquivos que evoluíram e deram mais 
liberdade e controle para os usuários. 
 
Heurística 4 - Consistência e padrões: coerência: 
As denominações, formatos, situações e procedimentos devem sempre que 
possível manter uma similaridade e seguir padrões definidos para o sistema. 
O usuário não deve aprender termos e ações diferentes para se referir a uma 
mesma definição ou objetivo. Os elementos de uma interface são melhores 
reconhecidos, localizados e utilizados quando sua localização, formato e estética são 
iguais ou similares em diversas telas de um sistema. 
Heurística 5 - Prevenção de erros: restrições e avisos: 
Melhor que oferecer boas mensagens de erros é prevenir que estes ocorram. 
Deve ser feito o máximo para evitar ou reduzir o número de erros ocorridos no uso de 
uma interface e quando eles ocorrerem deve a recuperação do sistema deve ser 
facilitada. Se o usuário não pode ou não deve realizar uma ação deve ser feito o maior 
esforço possível para que ele não consiga sua realização. 
A qualidade da mensagem de erro influencia o aprendizado do usuário, 
portanto a mensagem deve ser esclarecedora, utilizar a linguagem do usuário, 
explicitar onde está o problema e como o usuário deve proceder para a recuperação 
do erro. 
 
 
 
Fundamentos de UX – Página 60 de 78 
Heurística 6 - Reconhecimento ao invés de memorização 
Minimizar a sobrecarga de memória do usuário tornando visíveis objetos, 
ações e opções. Informações sobre a utilização do sistema devem estar visíveis ou 
ser facilmente recuperáveis. 
 A terminologia utilizada deve condizer com a do usuário e representar a real 
ação causada quando aquele elemento for acionado pelo usuário. 
Figura 38 - Exemplo de funcionalidade que não demanda esforço de memória 
do usuário que não precisa lembrar em qual aba estão as ferramentas de 
imagem. 
 
Heurística 7 - flexibilidade e eficiência de uso: 
Oferecer aos usuários mais experientes, aceleradores que permitam que as 
tarefas sejam realizadas mais rapidamente. Nielsen diz que deve ser possível o uso 
de atalhos que permitem que usuários avançados aumentem sua efetividade 
utilizando a interface.Fundamentos de UX – Página 61 de 78 
Figura 39 - Opções de personalização do Gmail. 
 
Heurística 8 - projeto (design) estético minimalista: 
Evitar a utilização de informações irrelevantes ou pouco necessárias 
Através de uma análise da tarefa é possível identificar os elementos realmente 
necessários na interface para que o objetivo seja atingido. Nielsen (2005c) recomenda 
que estas informações fiquem disponíveis em uma única tela e seja exibido apenas o 
necessário para a realização da tarefa, evitando que o usuário se disperse com 
elementos que não ajudarão na realização do objetivo. Nielsen ressalta a importância 
da estética na percepção e conforto do usuário ao utilizar a interface. 
 
 
Fundamentos de UX – Página 62 de 78 
Figura 40 - Discrepância entre o design poluído do Altavista em comparação à 
proposta minimalista do, então recém-chegado, Google. 
 
Heurística 9 - diagnóstico e correção de erros: 
Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros. 
As mensagens de erro devem utilizar uma linguagem clara, simples e de fácil 
entendimento, oferecendo opções construtivas para solução destes. Um bom 
procedimento é: 
a) Informar o que deu errado: “O arquivo meu_arquivo.abc não pôde ser 
excluído”. 
b) Informar as causas possíveis: “Provavelmente, este arquivo deve estar 
sendo editado e, por isso, não foi possível excluí-lo. 
c) Dizer como sair dessa: “Feche o programa de edição e tente novamente”. 
Heurística 10 - ajuda e documentação: 
O ideal é que o sistema possa ser utilizado sem nenhum auxílio 
documentação ou sistema de ajuda. 
A documentação pode ser utilizada para melhorar a eficiência de um usuário, 
porém não deve ser necessária para a utilização da interface, pelo menos em suas 
funções principais. 
 
 
Fundamentos de UX – Página 63 de 78 
Nielsen diz que se o usuário procura ajuda em documentações é porque ele 
está com sérias dificuldades e almeja ajuda imediata. 
A documentação pode fazer parte da interface, contextualizada com a tarefa 
a ser realizada e exibida em uma interface gráfica através de um quadro, ou balão de 
ajuda. 
 
Método de aplicação da avaliação heurística 
Em um primeiro momento o avaliador deverá navegar livremente pelo 
produto/sistema/website (browsing) e relatar os erros que encontra. 
Sempre que possível o avaliador deve relacionar os erros encontrados com 
as heurísticas apresentadas anteriormente. 
Cada avaliador deverá realizar a análise sem contato com os outros 
avaliadores, evitando que um avaliador influencie a análise do outro. 
Os problemas são registrados em uma planilha com a respectiva Heurística 
violada, além do grau de severidade do problema. 
 
Coletando os dados 
O resultado da primeira etapa da análise será uma lista com todos os 
problemas de usabilidade encontrados pelos avaliadores. Este resultado deve ser 
organizado na forma de uma planilha. 
Esta planilha, contendo os erros encontrados por todos os avaliadores, será 
entregue para cada avaliador para que quantifique o nível do problema. 
 
 
Fundamentos de UX – Página 64 de 78 
Figura 41 - Quadro com os parâmetros de análise do problema encontrado. 
 
Severidade do problema: 
É obtida pela média dos fatores citados anteriormente. Veja o quadro a 
seguir: 
Figura 42 - Quadro com o grau de severidade do problema. 
 
Você pode acessar a planilha completa com exemplos aqui: 
 https://www.dropbox.com/s/ed07f2nor1t6396/Aval.%20Heuristica--lista-
problemas-usabilidade.xlsx?dl=0 
 
 
 
https://www.dropbox.com/s/ed07f2nor1t6396/Aval.%20Heuristica--lista-problemas-usabilidade.xlsx?dl=0
https://www.dropbox.com/s/ed07f2nor1t6396/Aval.%20Heuristica--lista-problemas-usabilidade.xlsx?dl=0
 
 
Fundamentos de UX – Página 65 de 78 
Conclusão 
Avaliação Heurística é uma forma barata e eficiente para detectar problemas 
de usabilidade. Por ser um método analítico, ela depende muito da experiência dos 
avaliadores. Entretanto, alguns problemas de usabilidade só são detectados em uma 
avaliação empírica. 
 
 
Fundamentos de UX – Página 66 de 78 
Capítulo 7. Avaliação Empírica 
É observando que se descobre o que há de errado e onde melhorar. Essa é 
a premissa básica de qualquer teste de usabilidade ou, como também é conhecida, 
“avaliação empírica”. Observar pessoas tentarem usar o que você está criando/ 
projetando/ implementando/ (ou algo que você já criou / projetou/ implementou), com 
a intenção de: 
a) Facilitar seu uso por parte das pessoas (usuários) 
b) Provar que é fácil (ou difícil) usar. 
Steve Krug - Simplificando coisas que parecem complicadas 
Dependendo das pretensões da equipe, um teste com usuários pode ser: 
a) Quantitativo – para quando pretendemos provar algo como... “Essa versão é 
melhor que a anterior?” ou “as pessoas acham o nosso sistema mais fácil que 
o do concorrente” ou “as pessoas conseguem terminar as tarefas em menos 
tempo?” 
b) Qualitativo – quando os especialistas observam o participante interagindo 
com o sistema, sem muita interferência. A ideia é ter insights para levar 
melhorias ao sistema. 
Enquanto a abordagem quantitativa tem um caráter mais “científico” (já que 
os ambientes são supercontrolados e as tarefas são rigorosamente elaboradas) o 
qualitativo tende a ser mais “informal” podendo ser realizado em qualquer ambiente. 
 
 
Fundamentos de UX – Página 67 de 78 
Figura 43 - Quadro com as etapas de um teste clássico de usabilidade. 
 
Então, qual abordagem eu devo usar? 
Se você dispõe de tempo, equipe e um laboratório equipado com câmeras 
como o do esquema ao lado, fique à vontade para fazer o teste “clássico”. 
Figura 55 - Laboratório de usabilidade proposto por Nielsen. 
 
 
 
Fundamentos de UX – Página 68 de 78 
Do contrário, você pode optar por aplicar o que chamamos de “abordagem 
ágil”. 
 
Abordagem ágil para testes de usabilidade 
Steve Krug, em seu livro “Simplificando coisas que parecem complicadas” 
propõe um método rápido e barato para fazer testes de usabilidade. Ele chama esse 
método de “Teste com usuários do tipo ‘faça-você mesmo’”. Entretanto, ele sugere 
que os testes sejam feitos em um período predeterminado, ou seja... 
“Tudo que pedimos, 
 é apenas uma manhã por mês” 
Steve Krug 
Mas... É uma manhã todo mês? 
Sim! Um mês é um bom intervalo! 
É a frequência que a maioria das equipes dão conta de fazer o teste e 
identificar os problemas para manter a equipe ocupada consertando as coisas para 
o mês seguinte. 
Sim! Dessa forma, você gera expectativas. 
Imagine: se você decidir que “toda 3ª quinta-feira do mês” haverá teste de 
usabilidade às 9h da manhã é mais provável que as pessoas aparecerão para ver o 
teste e que a equipe de desenvolvimento já terá algo pronto para testar. 
Sim! É uma decisão a menos. 
Essa rotina elimina a necessidade de decidir quando testar. Você simplesmente 
testa, independentemente do que estiver pronto no sistema. (Ficar pensando em 
quando fazer o teste aumenta a chance que você não fazer o teste com frequência). 
A ideia é que o processo de teste vá se simplificando a ponto de ser algo rotineiro.
 
 
Fundamentos de UX – Página 69 de 78 
Figura 44 - Etapas do teste de usabilidade na abordagem ágil ou, como diz 
Steve Krug, do tipo “faça você mesmo”. 
 
 
Conclusão 
Testar empiricamente o nosso produto é a melhor maneira de conhecermos 
a fundo se a nossa solução está rumando ao sucesso ou não. Por isso, não há mais 
desculpa para não adotar os testes, ainda que o orçamento seja curto. Falando em 
orçamento curto, nosso próximo assunto será o UX enxuto ou, Lean UX. 
 
 
Fundamentos de UX – Página 70 de 78 
Capítulo 8. Lean UX 
A abordagem tradicional do design de produtos funcionou bem até certo 
ponto. No ambiente das Start-Ups, esse procedimento pode se tornar um gargalo. 
Figura 45 - Fluxo típico do processo tradicional de design. 
 
Inspirado por teorias de desenvolvimento Lean e Agile, LeanUX é uma 
abordagem que visa trazer a verdadeira natureza do nosso trabalho à luz mais rápido, 
com menos ênfase em documentação e maior foco na experiência real que está 
sendo projetado. 
Figura 46 - Processo de design enxuto ou “lean”.
 
 
 
Fundamentos de UX – Página 71 de 78 
Segundo Jeff Gothelf, autor do livro “Lean UX”, trata-se de uma evolução e 
não uma revolução. Não significa eliminar a documentação por completo, e sim, 
documentar apenas o que faz sentido. Foque naquilo que você é bom: criar 
experiências. 
 
Priorizando experiências, não documentos 
1. Resolver problemas em parceria, em vez de implementar a solução de 
alguém 
2. Crie rascunhos o quanto puder e valide o mais cedo possível. Lembre-se: “fail 
fast, fail often” 
3. Prototipe e teste sempre! Lembre-se: no mundo real, as coisas podem ser 
diferentes 
4. Lance o produto o mais cedo possível e aprenda com os usuários. Não perca 
tanto tempo em documentação 
5. Desenvolva em pares. É muito mais econômico e assertivo criar soluções em 
conjunto 
6. Crie Guias de Estilo. Sim, isso ajuda muito os desenvolvedores e aumenta o 
reuso de componentes, além de deixar sua interface mais harmoniosa 
 
 
 
Fundamentos de UX – Página 72 de 78 
Figura 47 - Exemplo de um guia de estilo. 
 
 
Conclusão 
Para Lean UX não ser mais um modismo, é preciso ter o discernimento que 
o foco é sempre na criação de experiências positivas e não na documentação 
extensa. Lembre-se experiências positivas geram resultados positivos. No próximo 
capítulo, o assunto será como melhorar esses resultados. 
 
 
Fundamentos de UX – Página 73 de 78 
Capítulo 9. Otimização para conversão 
O quê, de fato, significa a palavra conversão? 
Figura 48 - Exemplo da dinâmica da conversão. 
 
Entenda como sendo qualquer ação que você (dono do negócio) queira que 
seu visitante faça. Ou seja, depende da sua estratégia. 
Conversão é um parâmetro de sucesso que é peculiar de cada negócio. 
Dependendo do seu produto, esse parâmetro de sucesso pode ser obtido toda vez 
que seu visitante... 
 Realizar uma compra. 
 Inscrever-se em uma newsletter. 
 Criar uma conta na sua aplicação. 
 Baixar seu aplicativo. 
 Baixar seu e-book. 
 Participar de um evento. 
 (...) 
 
 
Fundamentos de UX – Página 74 de 78 
O importante é ser mensurável. Não importa o que você quer que seus 
visitantes façam. O importante é que a conversão deve ser mensurável, ou seja, 
você deve possuir mecanismos para quantificar o número de visitantes e de 
conversões. 
Figura 49 - Exemplos de métricas de conversão, visitas e engajamento no 
Google Analytics. 
 
 
E o que é taxa de conversão? 
Taxa de conversão é a porcentagem do número de visitantes que realizaram 
a ação que você queria, ou seja, que se “converteram”. Veja a fórmula abaixo: 
 
Por exemplo: 
 
 
Fundamentos de UX – Página 75 de 78 
Seu site recebeu 1000 visitantes que resultaram em 50 conversões. Dessa 
forma, a taxa de conversão foi de 5%. 
 
Por que devo me importar? 
1. Você investiu tempo e dinheiro no seu produto. Muito provavelmente, você 
paga por tráfego no seu serviço de hospedagem. Só por isso, já é importante 
ter um retorno sobre esse investimento. 
2. É muito mais barato e eficiente converter os visitantes que já estão em 
contato com seu produto, do que gastar dinheiro em campanhas para atrair 
novos visitantes. 
3. Otimizar a conversão do seu produto significa reduzir a capacidade de 
dispersão do visitante, oferecendo-o exatamente o que precisa, antes que ele 
perca o engajamento e abandone o site. 
Engajamento é o que acontece quando um visitante (ou um lead) interage 
com seu site antes de converter. Um bom engajamento é a chave para o crescimento 
da taxa de conversão. 
 
Otimizando para aumentar a taxa de conversão 
Otimização da taxa de conversão ou Conversion Rate Optimization (CRO). A 
princípio, definimos CRO como o método que utiliza estatísticas (como o Google 
Analytics) e feedbacks de usuários para melhorar o desempenho do seu site. 
Ou seja: 
Otimização de taxa de conversão é descobrir porque os visitantes não estão 
convertendo e corrigir o que está errado. Otimização da taxa de conversão são 
atividades: 
 Estruturadas e sistemáticas para melhorar o desempenho do seu site. 
 
 
Fundamentos de UX – Página 76 de 78 
 Guiadas por ideias (insights) especialmente analytics e feedback de usuários. 
 Definidas por objetivos específicos e necessidades do seu produto que 
visam aproveitar o tráfego que você já tem e torná-lo mais lucrativo. Por outro 
lado, otimização da taxa de conversão não pode ser atividades. 
 Baseadas em achismos, palpites ou naquilo que todo mundo está fazendo. 
 Pautadas nos conselhos do chefe ou do funcionário de alto escalão. 
 Que visam conseguir o maior número de visitantes possível, sem 
considerar a qualidade das visitas e do engajamento. 
 
Alguns termos mais comuns 
Call to Action (CTA): 
Em português, seria “chamada para ação”. É a ação primária da sua interface 
que você deseja que o visitante faça. É o CTA que realiza a conversão. Pode ser um 
botão do tipo “Compre agora” ou “Faça o download” ou “Assine nossa newsletter”. 
Lead: 
Um lead é um visitante que, de alguma forma, interagiu com seu site e acabou 
deixando alguns dados de contato. Muitos consideram o termo lead como um “contato 
qualificado”, ou seja, um visitante sobre o qual já se sabe alguma coisa. 
Funil de conversão: 
É o caminho ou fluxo que os visitantes percorreram até realizar a conversão. 
Imagine o site da Amazon. Lá o funil de conversão é o seguinte: 
Home page > página de resultados > detalhes do produto > pagamento. 
 
 
 
Fundamentos de UX – Página 77 de 78 
Teste A/B: 
É um teste que se faz em duas versões de uma página web que tem o mesmo 
propósito. Dessa forma, usando ferramentas como o Google Analytics, é possível 
aferir qual versão é mais otimizada para converter. 
Taxa de rejeição (Bounce Rate): 
É a porcentagem de pessoas que deixam seu site ainda na primeira página. 
Por alguma razão, o visitante não encontrou o que queria e abandonou o site sem 
clicar em nenhum link. 
KPI (Key Performance Indicators): 
Indicadores-chave de performance podem ser qualquer métrica que seja 
importante para seu negócio. Geralmente, são associadas à taxa de conversão, 
tempo de permanência no site, número de compartilhamentos, entre outros. 
 
Conclusão 
 Otimizar para converter pode ser a chave para sobrevivência do seu produto. 
 O que é conversão para você, pode não ser o mesmo para qualquer outro 
negócio. 
 Em vez de gastar tempo e dinheiro em atrair mais visitantes, aumente a taxa 
de conversão daqueles que você já possui. Aí sim, invista em aumentar os 
leads. 
 
 
 
Fundamentos de UX – Página 78 de 78 
Referências 
COOPER, Alan et al. The inmates are running the asylum: [Why high-tech products 
drive us crazy and how to restore the sanity]. Indianapolis, IN, USA: Sams, 2004. 
GOTHELF, Jeff; SEIDEN, Josh. Lean UX: Applying lean principles to improve user 
experience. O'Reilly Media, Inc., 2013. 
ISO - INTERNATIONAL ORGANIZATION FOR STANDARDIZATION. ISO 
13407:1999 Human-centred design processes for interactive systems. 1999. 
KRUG, Steve. Don’t make me think: A common sense approach to web usability. 
Pearson Education India, 2005. 
KUNIAVSKY, Mike. Observing the user experience: a practitioner's guide to user 
research. Morgan kaufmann, 2003. 
MOATTI, Yosef. Dynamic conversion rate optimization. U.S. Patent Application n. 
11/289,234, 29 nov. 2005. 
MULDER, Steve; YAAR, Ziv. The user is always right: A practical guide to creating 
and using personas for the web. New Riders, 2006. 
NIELSEN, J. Usability Engineering. Chestnut Hill, MA, Academic Press, 1993. 
NORMAN, Donald A. The design of everyday things: Revised and expanded edition. 
Basic books, 2013. 
PREECE, Jenny; ROGERS, Yvonne; SHARP, Helen. Design