ux_user_experience_e_plataformas_digitais

Prévia do material em texto

Como citar este material: 
VIANA, Leonardo. UX: user experience e plataforma digitais. Rio de Janeiro: FGV, 2023. 
Todos os direitos reservados. Textos, vídeos, sons, imagens, gráficos e demais componentes 
deste material são protegidos por direitos autorais e outros direitos de propriedade intelectual, de 
forma que é proibida a reprodução no todo ou em parte, sem a devida autorização. 
 
INTRODUÇÃO 
Bem-vindos ao mundo da UX (user experience) – experiência do 
usuário, em português. Quando interagimos com algum produto ou 
serviço, entra em cena a experiência do usuário – relevante disciplina para 
o sucesso de um negócio. Isso porque é ela que traça e promove como 
deve ser o relacionamento ideal com o cliente, ao criar e desenvolver 
percepções e aprendizados da marca. 
É cada vez mais comum estar em contato com aplicativos, sites, e-
commerces, banners digitais, etc. 
As características de cada produto definem o fato de preferirmos 
uns aos outros – características que vão desde as suas funções até a 
compreensão daquele item no mercado. O cuidado com a interatividade 
junto ao consumidor é fundamental para a empresa ser apreciada e 
desejada. O trabalho do profissional de UX não é restrito à área digital, 
mas a sua atuação no universo virtual tem como objetivo final fazer os 
visitantes de uma página retornarem a ela. 
Atualmente, com disputas mercadológicas cada vez mais 
acirradas, ter um produto digital torna-se quase banal. No entanto, 
nos anos 1990, apresentar os seus produtos em um site era para poucas 
corporações, devido aos custos elevados para tal. Hoje em dia, no 
entanto, a presença virtual de um negócio é praticamente obrigatória 
e com a vantagem de custos irrisórios. 
Desse modo, vemos que a concorrência atual opera em outro 
nível: o da experiência. 
Costumo dizer aos meus alunos e clientes que estamos em uma 
nova revolução dentro da revolução que a internet proporcionou, na qual 
a experiência vale mais que o produto. Venha participar dessa 
conflagração digital, e dessa rebelião de renovação e transformação da 
UX, em que o homem é o centro deste novo universo tecnológico! 
 
 
 
Nesse contexto, o objetivo geral desta apostila é fornecer um entendimento dos principais 
focos da disciplina UX, tornando-o capaz de desenvolver e aprimorar projetos digitais por meio de 
técnicas que consolidam o homem no centro da construção de produtos interativos. Você vai 
conhecer um pouco sobre esse caminho, a começar pela experiência e usabilidade, passando pela 
gestão com base na UX, pelo entendimento do funcionamento humano e apresentando uma série 
de práticas espelhadas na experiência do usuário. 
Lembre-se de que esse material não encerra o assunto, que é tão vasto, mas oferece um 
panorama geral da user experience no mercado, desde conceitos básicos até as suas aplicações. 
 
 
 
 
SUMÁRIO 
MÓDULO I – EXPERIÊNCIA DO USUÁRIO (UX) ................................................................................. 7 
O QUE É UX ......................................................................................................................................... 7 
QUAL DIFERENÇA ENTRE UX E USABILIDADE? ............................................................................... 9 
DIFERENTES TIPOS DE UX ............................................................................................................... 11 
MAIS UM ELEMENTO: INTERFACE DO USUÁRIO (UI) ................................................................... 11 
USABILIDADE .................................................................................................................................... 13 
MÉTRICAS DE USABILIDADE (ISO 9126)......................................................................................... 15 
Aprendendo com interfaces não digitais .............................................................................. 17 
TESTES DE USABILIDADE ................................................................................................................. 18 
Teste de usabilidade assistido e monitorado ...................................................................... 18 
Análise dos resultados ............................................................................................................ 18 
AVALIAÇÃO HEURÍSTICA .................................................................................................................. 19 
QUANTAS PESSOAS NECESSITO PARA TESTAR ALGO? ................................................................ 21 
NAVEGABILIDADE ............................................................................................................................. 21 
Pontos importantes para um adequado trabalho de UX ................................................... 22 
ARQUITETURA DA INFORMAÇÃO (AI) ............................................................................................ 22 
COMPONENTES DA ARQUITETURA DA INFORMAÇÃO ................................................................ 24 
Sistema de busca ..................................................................................................................... 25 
DISPOSITIVOS MÓVEIS .................................................................................................................... 27 
Selecionando os itens mais e menos importantes ............................................................. 27 
ESTUDO DE INTERFACE ................................................................................................................... 27 
Espaço menor, escolhas difíceis ............................................................................................ 32 
ACESSIBILIDADE ............................................................................................................................... 34 
Vantagens dos padrões web .................................................................................................. 34 
CARD SORTING ................................................................................................................................. 35 
Seleção de conteúdo e preparação dos cartões ................................................................. 35 
Número de cartões .................................................................................................................. 35 
Benefícios da aplicação de card sorting ............................................................................... 36 
Quando aplicar? ....................................................................................................................... 36 
Etapas da atividade .................................................................................................................. 36 
Aplicação do Card sorting ....................................................................................................... 37 
Análise ....................................................................................................................................... 37 
ETAPAS DE UMA IMPLEMENTAÇÃO NO PROJETO DIGITAL ........................................................ 38 
MÓDULO II – GESTÃO E A EXPERIÊNCIA DO USUÁRIO .............................................................. 41 
NOVA SOCIEDADE, TECNOLOGIA E UX.......................................................................................... 41 
ECONOMIA DA EXPERIÊNCIA .......................................................................................................... 43 
GESTÃO PELA EXPERIÊNCIA ............................................................................................................ 43 
GESTÃO DE PRODUTOS COM BASE NA EXPERIÊNCIA – UX ENXUTA......................................... 45 
GESTÃO EMPÍRICA – CRIAÇÃO DE PRODUTOS PARA TESTAR .................................................... 50 
MÓDULO III – UX E O SER HUMANO .............................................................................................53 
ENTRE A EMOÇÃO E A RAZÃO ........................................................................................................ 53 
SEIS INTELIGÊNCIAS DE UX ............................................................................................................. 55 
DESIGN EMOCIONAL ....................................................................................................................... 57 
MECÂNICA DO OLHAR ..................................................................................................................... 62 
Cones e bastonetes ................................................................................................................. 62 
MEMÓRIA .......................................................................................................................................... 65 
MÓDULO IV – ENTREGÁVEIS E BOAS PRÁTICAS DE UX ................................................................. 69 
O QUE SÃO ENTREGÁVEIS? ............................................................................................................. 69 
WIREFRAME ....................................................................................................................................... 71 
PROTÓTIPOS ..................................................................................................................................... 73 
FLUXOGRAMA ................................................................................................................................... 74 
MAPA DO SITE .................................................................................................................................. 75 
STORYBOARD.................................................................................................................................... 75 
Como criar um storyboard?.................................................................................................... 77 
PERSONA ........................................................................................................................................... 77 
INVENTÁRIO DE CONTEÚDO .......................................................................................................... 80 
BENCHMARKING .............................................................................................................................. 80 
GRUPO FOCAL .................................................................................................................................. 80 
PESQUISA QUANTITATIVA ............................................................................................................... 81 
MODELO CONCEITUAL .................................................................................................................... 81 
DEFINIÇÃO DAS MÉTRICAS DE SUCESSO ...................................................................................... 82 
CARD SORTING ................................................................................................................................. 82 
CONTROLE DE QUALIDADE ............................................................................................................ 83 
ANÁLISE DE ACESSIBILIDADE .......................................................................................................... 83 
UX WRITING ...................................................................................................................................... 83 
RECOMENDAÇÕES DE SEO ............................................................................................................. 85 
TESTES A/B ........................................................................................................................................ 85 
EYETRACKING ................................................................................................................................... 85 
ANÁLISE DE MÉTRICAS .................................................................................................................... 86 
ANÁLISE HEURÍSTICA ....................................................................................................................... 86 
TABELA RESUMO .............................................................................................................................. 88 
BIBLIOGRAFIA ................................................................................................................................ 89 
PROFESSOR-AUTOR ....................................................................................................................... 95 
Neste módulo, abordaremos importantes frentes que integram a UX – a usabilidade, os testes 
de usabilidade e a arquitetura da informação –, todos necessários para compor um ambiente virtual. 
Para isso, você conhecerá a diferença entre usabilidade e UX, as suas métricas, avaliações, 
navegabilidades, acessibilidades e outras formas de pesquisar o cliente. 
Na prática, além de conhecer os principais elementos que envolvem a experiência do usuário, 
você também aprenderá a usar técnicas como card sorting e a implementar etapas de user experience 
em um projeto digital. 
O que é UX 
O que é experiência do usuário (UX)? User experience – na língua portuguesa, experiência do 
usuário – foi assim chamado, inicialmente, por Donald Norman, psicólogo cognitivista dedicado 
ao Design. Habitualmente nomeada de UX, o termo denota, de modo geral, como uma pessoa se 
sente usando determinado produto. A ISO 9241-210, que abrange a ergonomia da interação 
homem-computador, define as percepções e reações de uma pessoa resultantes do uso de um 
produto, sistema ou serviço. Dessa forma, a experiência do usuário envolve crenças, emoções, 
preferências, percepções, respostas fisiológicas e psicológicas, que regem o comportamento do 
usuário antes, durante e após o uso. 
A UX deve ser compreendida como o ciclo de relacionamento de um cliente com a marca, 
englobando todos os detalhes desse processo, que incluem interação, usabilidade, interfaces com 
artefatos digitais, assim como a carga emocional e cognitiva quanto ao produto, visando a melhorias 
na experiência. 
MÓDULO I – EXPERIÊNCIA DO USUÁRIO (UX) 
 
8 
 
A importância do estudo de UX está na possibilidade de uma empresa criar uma boa relação 
com o seu cliente, bem como estar atenta aos fatores de aproximação e retenção daquele 
previamente consolidado. Trabalhar a retenção de um consumidor é tarefa constante. Dessa forma, 
a experiência do usuário na interação digital com a marca determina a sua escolha pelo serviço e, 
sobretudo, a sua permanência nele. 
A UX tem natureza estratégica e faz parte do desenrolar de todas as etapas do negócio. Uma 
interface é fruto desse entendimento. Em seu livro The elements of user experience (Os elementos da 
experiência do usuário), Jesse James Garrent comenta que é fundamental criar abordagens que 
estejam de acordo com os objetivos da marca, associadas sempre à garantia da melhor experiência 
ao cliente. Em nome disso, observe elementos a seguir: 
 
Figura 1 – Elementos da experiência do usuário 
 
Fonte: adaptado de Garrent. 
 
Superfície (surface) – é a noção de como será a totalidade do produto, no que se refere a 
decisões concretas, tangíveis – layout, cores, tipografia, etc. 
 
Esqueleto (skeleton) – tem a ver com a interação cliente: sistema. Define como o produto 
será apresentado – o visual na tela, a disposição dos elementos, a funcionalidade do sistema que 
existe na interface e como o usuário se movimenta pelas informações. 
 
 
 9 
 
Estrutura (structure) – são as conexões entre as partes do sistema. Determina como é 
organizado com ênfase nas prioridades. Considerando que, em UX, o foco é o usuário, a estrutura 
pode estar, constantemente, sendo ressignificada pela observância das formas de uso. 
 
Escopo (scope) – é referente às funcionalidades operacionais, viabilizadas por recursos emconformidade com objetivos estratégicos. 
 
Estratégia (strategy) – medidas que devem responder aos objetivos do produto, de relações 
estreitas com a necessidade do usuário. Para auxiliar nesse elemento, o processo de pesquisa 
estratégica é uma opção interessante para o contato com o usuário por entrevistas, e para identificar 
e analisar a concorrência. 
 
Qual diferença entre UX e usabilidade? 
É recorrente indagações a respeito da diferença entre usabilidade e UX. Por que não devemos 
tomá-las como sinônimo? Primeiramente, vamos considerar as normas internacionais sobre o 
assunto (ISO 9241-210): 
 Usabilidade – capacidade de um sistema em permitir que usuários específicos atinjam 
metas específicas com eficácia, eficiência e satisfação em contextos específicos de uso. 
 Experiência do usuário (UX) – percepções e respostas dos usuários resultantes do uso ou 
antecipação do uso de um produto, sistema ou serviço. 
 
Reparem que essas duas descrições envolvem aspectos objetivos e subjetivos. Em usabilidade, 
a eficácia e a eficiência são de cunho objetivo, enquanto a satisfação, subjetivo. Já na definição de 
experiência do usuário, as percepções e respostas mesclam os dois aspectos. Observe também que a 
usabilidade se revela somente durante a interação, ou seja, é parte de um todo que é a UX, já que 
essa última disciplina inclui ainda o momento antes do lançamento do produto (percepções prévias) 
e também aquele que acontece depois (percepções pós-uso). 
 
10 
Realçamos as palavras antes, durante e depois para mostrar que essas demarcações temporais 
são a chave para a compreensão dos conceitos de UX e usabilidade. Vejamos a ilustração (figura 2) 
a seguir, extraída de um artigo de Padovani, Schlemmer e Scariot: 
Figura 2 – Experiência do usuário e usabilidade 
Fonte: adaptado de Padovani, Schlemmer e Scariot (2011). 
Detalhemos um pouco sobre usabilidade. Vejamos o quadro: 
Quadro 1 – UX e Usabilidade 
UX = processo completo usabilidade = parte do processo, que envolve 
ainda: 
percepções: 
1a fase – antes do uso; 
2a fase – durante o uso e 
3a fase – depois do uso. 
eficácia – aspecto objetivo – quando se atinge 
metas; 
eficiência – aspecto objetivo – agilidade para 
atingir metas e 
satisfação – aspecto objetivo e subjetivo. 
Entende-se que: 
 eficácia é dada pela relação dos usuários que atingiram os seus objetivos;
 eficiência é relação da eficácia com a quantidade dos recursos gastos e
 satisfação é regida pelo conforto e aceitabilidade do produto por parte do usuário. Ela
pode ser calculada por meio de métodos objetivos ou subjetivos.
 
 11 
 
A UX é um guarda-chuva abrangente. É multidisciplinar, com foco no ser humano e, por 
isso, incorpora noções de Psicologia, Ciências cognitivas, Antropologia, Ergonomia, Arquitetura da 
Informação, Usabilidade, entre outras. 
 
Diferentes tipos de UX 
Ao longo do tempo, temos observado diversos tipos de profissionais e conceitos utilizando o 
termo UX como prefixo surgindo. Mas será que essa variedade é genuína ou apenas uma estratégia 
mercadológica? Donald Norman, o pioneiro na área, descreve o termo UX como algo abrangente, 
afirmando que se refere a “tudo o que está relacionado à experiência com o produto”. De acordo 
com ele, a experiência é holística e vai além do simples uso de um dispositivo ou ferramenta digital. 
Seguindo esta linha, sim faz todo sentido surgir novos profissionais cada vez mais especializados em 
UX e suas diversas facetas, compreendendo o usuário e os múltiplos aspectos que envolvem a 
experiência. Estes novos profissionais possuem premissas básicas como o foco na centralidade do 
usuário. Alguns desses especialistas incluem: 
 UX Writing: Profissional focado no conteúdo textual, buscando criar textos mais 
amigáveis e intuitivos. 
 UX Research: Especialista em pesquisa que conduz investigações para entender melhor as 
necessidades e desejos dos usuários. 
 UX Lead: Responsável, muitas vezes, pela gestão de projetos e tomada de decisões. 
 
Existem muitos outros perfis de profissionais de UX, e à medida que novas necessidades 
surgem, é vital ter especialistas que possam atender aos diversos aspectos e demandas dos usuários. 
 
Mais um elemento: interface do usuário (UI) 
Outra pergunta recorrente é sobre a diferença entre UX e UI. O trabalho de projetar interfaces 
recebe no mercado o nome de UI – user interface (interface do usuário), uma atuação que tem por missão 
desenvolver interfaces interativas como aplicativos, sites, comércios eletrônicos, etc. No entanto, por 
vezes, é chamado de UX erroneamente. Um profissional de UI pode entender de UX, mas nem todo 
UX desenvolve interfaces. 
Certa vez, um meme circulou em uma tentativa de ilustrar a diferença entre UX, UI e usabilidade, 
conforme pode ser visto: 
 
 
12 
Figura 3 – Meme Ketchup Heinz 
Para o seu famoso ketchup, a marca Heinz teve uma ideia inovadora no início nos anos 2000, ao 
observar que os consumidores guardavam os seus frascos de ketchup de cabeça para baixo para ajudar a 
tirar o restante do produto do fundo da garrafa de vidro. Foi assim que, para facilitar o cliente, a garrafa 
invertida nasceu, de plástico – uma versão chamada de squeezable, que significa compressível, 
apertável. Desse modo, a criação teve a função como ordenamento. 
O material dessa ilustração foi elaborado de modo simplista, para leigos, em uma tentativa 
de explicar as diferenças entre as três disciplinas. No entanto, alguns profissionais questionaram se 
essa representação estaria conceitualmente correta. Colocar o katchup de cabeça para baixo tem 
como objetivo mais aparente a funcionalidade facilitada. No entanto, essa novidade pode ser 
considerada também um atrativo de interface (UI), como uma forma diferente e bem-humorada 
de apresentar o produto. 
Por outro lado, a garrafa que exemplifica UI na ilustração, que indica ser de vidro, demonstra 
também afinidade com aspectos de UX e usabilidade, na medida em que pode espelhar a subjetividade 
advinda de uma percepção durante o uso, que traduziria uma satisfação no consumo de um produto 
refinado e elegante por não ser uma embalagem de plático. O vidro parece transferir também o valor da 
tradição, uma vez que essa versão foi a primeira, de lançamento. 
Uma curiosidade é que a Heinz possui no mercado duas versões da embalagem de plástico: 
uma com pescoço longo e outra squeezable. Além disso, foi relançada a garrafa de vidro no mercado 
americano, mas oferecendo dicas de como retirar o Ketchup de forma mais rápida. Podemos 
presumir que a aceitação ou satisfação pelo estilo mais nobre de material é tão significativa que uma 
alternativa em forma de dica foi desenvolvida para melhorar a sua funcionalidade menos eficaz. 
Observe a propaganda do site oficial da empresa, conforme figura 4. 
 
 13 
 
Figura 4 – Ketchup Heinz 
 
Fonte: http://www.heinzbrasil.com.br (2018). 
 
É interessante notar que um produto pode ser ressignificado de modo que a sua praticidade 
de uso não seja o único requisito relevante para uma boa experiência. A aparência e a percepção 
geradas por ela também são determinantes de satisfação para o cliente. 
Em um primeiro momento, um gerente de produto poderia pensar que somente a facilidade 
de uso levaria a uma melhor experiência. No entanto, isso não basta. Somos seres emocionais, e o 
exemplo do ketchup Heinz não nos deixa mentir. 
 
Usabilidade 
Para falar um pouco mais de usabilidade, o termo começou a ser adotado na década de 
1980, substituindo o que era anteriormente utilizado: userfriendly, que pode ser traduzido como 
uso amigável. No entanto, dizer assim ficava ambíguo e subjetivo, por isso a mudança para 
usability (usabilidade). 
A principal meta na usabilidade é deixar tudo tão óbvio a ponto de não ser necessário 
perguntar a ninguém como se resolve um problema ou tarefa. A seguir, a figura aborda isso de 
forma divertida: 
 
 
 
14 
 
Figura 5 – Charge aeromoça 
 
Fonte: adaptado do livro Não mefaça pensar, de Steve Krug. 
 
O autor Steve Krug lembra de uma passagem do livro “Um estudo em vermelho” de Arthur 
Conan Doyle, na qual o Dr. Watson fica chocado ao saber que Sherlock Holmes desconhecia o fato de 
que a Terra gira em torno do sol. No entanto, Holmes por mais genial que fosse, não perdia a linha e 
explicava que se deve evitar que informações inúteis ocupem o lugar das que realmente têm utilidade, e 
diz: “O que isso tem a ver comigo? Você disse que giramos ao redor do Sol. Se girássemos em torno da 
Lua, não faria a menor diferença para mim e para o meu trabalho”. 
Assim como Sherlock Holmes, o usuário quer apenas realizar uma tarefa no seu sistema, e 
não conhecer a origem da teoria heliocêntrica e a história de Nicolau Copérnico! Krug chama 
atenção também para o fato de que, se existe um formato estipulado, já aprendido pelo sujeito, esse 
modo a que ele está acostumado e a coerência na sua mente podem ser considerados uma forma de 
facilitar o uso de um produto (figura 5). 
 
Figura 6 – Posicionamento de placas 
 
Fonte: Krug (2008). 
 
 
 15 
 
Bem, então podemos dizer que a usabilidade confere qualidade aos produtos, na medida em 
que permite mensurar com o utilizador se uma interface é fácil de se usar. A palavra "usabilidade" 
também é adotada para se referir ao conjunto de métodos destinados a melhorar a utilização de um 
produto ou serviço. 
 
Métricas de usabilidade (ISO 9126) 
Para nortear e conferir excelência ao trabalho dedicado à usabilidade, é adequado estar atento 
aos seguintes parâmetros de métricas: 
 inteligibilidade – facilidade com que o usuário assimila as funcionalidades e avalia se as 
mesmas podem ser usadas para satisfazer as suas necessidades; 
 apreensibilidade – facilidade de aprendizado pelo usuário; 
 operacionalidade – como o produto facilita a sua operação, incluindo a maneira como ele 
tolera erros de operação, e 
 atratividade – conjunto de características com potencial de atrair um usuário para o 
sistema, envolvendo desde a adequação das informações disponíveis ao usuário até os 
requintes visuais da interface gráfica. 
 
A usabilidade é estudada em 5 dimensões (Nielsen, 2000): 
 Aprendizagem – quão fácil é desempenhar tarefas básicas no primeiro contato usuário-
interface? 
 Eficiência – após tornar-se experiente no uso da interface, quão rápido é para o usuário 
realizar as tarefas? 
 Memorização – caso passe muito tempo sem contato com a interface, quão facilmente 
consegue o utilizador retomar seu nível de proficiência? 
 Robustez – quantos erros comete o usuário, quão severos são os erros e quão facilmente 
consegue se recuperar deles? 
 Satisfação – quão agradável é a experiência com o sistema? 
 
Veja também quais são as metas de usabilidade que devem ser perseguidas: 
 utilidade; 
 eficácia; 
 eficiência; 
 segurança; 
 facilidade de aprendizado e 
 facilidade de lembrar como se usa. 
 
 
16 
 
Jakob Nielsen, no livro Usability engineering, propõe uma série de slogans genéricos que 
podem auxiliar equipes a desenvolver melhores soluções de usabilidade. Apesar de existirem alguns 
problemas de adequação por conta de generalizações, é interessante destacá-los: 
a) “O seu melhor palpite não é bom o suficiente”. 
Comentário – é comum projetistas “chutarem” o que é melhor para o cliente e não 
perguntarem em pesquisas com ele. Não é raro utilizadores fazerem interpretações distintas das 
projetadas. 
 
b) “O utilizador tem sempre razão”. 
Comentário – o projeto é feito pelo desenvolvedor, não para o desenvolvedor. O projeto é 
feito para o usuário. 
 
c) “O utilizador não tem sempre razão”. 
Comentário – o usuário nem sempre tem razão, uma vez que, nem sempre, ele conhece o que 
pode ser oferecido a ele. Alguns sistemas trazem inovações às quais o público precisa aprender a 
lidar, como quando envolve conceitos novos. Uber ou AirBnB são exemplos de conceitos que 
precisaram ser aprendidos. 
 
d) “Utilizadores não são designers”. 
Comentário – não se deve buscar a percepção de utilizadores o tempo todo, já que eles, nem 
sempre, refletem a totalidade de um grupo. 
 
e) “Designers não são utilizadores”. 
Comentário – segue a mesma linha comentada no primeiro slogan. Os palpites dos designers não 
devem ser tomados totalmente como norteadores, quando eles não coincidem de serem usuários. 
 
f) “Menos é mais”. 
Comentário – quanto menos “lixo” (elemento sem importância) estiver exposto na tela, 
possivelmente, haverá menos problemas na funcionalidade da interface. 
 
g) “Detalhes importam”. 
Comentário – todos os itens devem estar cuidadosamente colocados nos seus lugares, e os 
detalhes devem sempre ser observados. 
 
h) “A ajuda não importa”. 
Comentário – precisar de ajuda em uma navegação é indicativo de projeto com falhas de 
desenvolvimento em termos de usabilidade, porque tudo deve estar facilmente ao alcance do usuário 
em uma interface. 
 
 17 
 
i) “A usabilidade é um processo”. 
Comentário – não existe fórmula para o sucesso, o que importa é entender cada público-alvo, 
particularizar as suas prioridades e atender às necessidades do projeto. 
 
Aprendendo com interfaces não digitais 
Este material se refere a exemplos de usabilidade em interfaces digitais. Vamos abrir 
parênteses para dar espaço a um exemplo que nos fornece uma lição interessante. Uma montadora 
de carros sofisticou bastante o sistema dos seus automóveis, tendo como principais inovações um 
botão para dar a partida e o silêncio dos motores. Isso mesmo, não se ouve o barulho do carro 
durante o seu funcionamento, tampouco no ato de ligá-lo – tarefa, aliás, facilitada pelo toque de 
um botão no lugar da tradicional chave para girar. À primeira impressão, parece um atrativo e tanto. 
No entanto, o fato de não se escutar aquele tradicional barulho de carro ligado fez com que alguns 
motoristas esquecessem de desligar o veículo na garagem ao chegar em casa. Para isso, também 
contribuía a ausência da habitual chave. E, dessa forma, o discreto botão era ignorado. O resultado 
foi trágico, infelizmente. Nos EUA, 28 pessoas morreram devido à intoxicação por monóxido de 
carbono liberado pelos automóveis que permaneceram ligados. 
A lição do ocorrido é que uma inovação de interface nem sempre representa o melhor para o 
usuário. No exemplo americano, o botão traduzia conforto e facilidade, mas não seria melhor a 
manutenção da chave e do motor com barulho para o motorista perceber que tem de ser desligado? 
Uma dúvida paira no ar: será que a montadora deu a devida importância a testes de usabilidade? 
Não seria necessário um feedback mais ativo ou uma mensagem? 
 
Figura 7 – Botão partida de motor 
 
Fonte: G1 (2018). 
http://www.facebook.com/
 
18 
 
Testes de usabilidade 
Com a reflexão por meio desse exemplo, podemos notar, concretamente, o quão significativo 
são os testes de usabilidade na criação e no aprimoramento de um produto, seja digital ou não. E é 
sobre esse recurso que vamos discorrer agora. 
 
Teste de usabilidade assistido e monitorado 
O teste de usabilidade é um método de avaliação em que participantes representativos avaliam 
o desempenho de um produto em relação a critérios específicos de usabilidade, realizando as tarefas 
que o produto se propõe. O trabalho é distribuído nas seguintes etapas: 
 Planejamento dos testes – público-alvo é traçado, assim como as tarefas a serem executadas 
durante as sessões, métricas de usabilidade, equipamentos relevantes para medir as tarefas, 
entre outros itens. 
 Preparação para os testes – recrutamento dos participantes, instalação de equipamentos e 
preparação do ambiente de testes. 
 
 
Fonte: Shutterstock. 
 
Análise dos resultados 
Os diferentes tipos de testes são categorizáveis conforme o momento do ciclo de vida do 
produto. Alguns autores, como Nielsen (2000), citam esses testes, mas essa lógica já pode ser 
encontrada, por exemplo, nas cartilhas de e-Gov (2010) do governo federal: 
a) Teste de exploração –aplicado quando o produto está em estágio de definição e design. 
A finalidade desse tipo de teste é avaliar a efetividade do desenho preliminar e conhecer 
a concepção do usuário ou modelo mental do produto. 
 
 19 
 
b) Teste de avaliação – conduzido no início ou no meio do ciclo de desenvolvimento do 
produto, normalmente, após o desenho fundamental ou organização estabelecidos. Esse 
teste busca expandir o conhecimento obtido na etapa da exploração e avaliar a usabilidade 
em um nível baixo de operações e aspectos do produto. Com base no modelo conceitual, 
o teste visa examinar e avaliar o conceito implementado efetivamente, verificando como 
um usuário consegue desenvolver tarefas reais e possibilitando identificar deficiências no 
processo de uso. 
c) Teste de validação – realizado mais tarde no ciclo de desenvolvimento, é o teste que 
certifica a usabilidade do produto bem próximo da sua liberação. A meta é verificar como 
a peça se posiciona em relação a padrões de uso, de performance e comportamentos ao 
longo da história. 
d) Teste de comparação – Nos primeiros estágios, pode-se lançar mão desse teste para 
confrontar diferenças entre estilos de interface por meio do teste de exploração. Nos ciclos 
intermediários, pode ser usado para verificar a efetividade de um elemento integrante da 
interface. No fim do ciclo, permite observar como a liberação de um produto atinge um 
produto concorrente. 
 
Categorizar os testes também pode ser feito de acordo com o ambiente onde ocorre: 
laboratório versus campo. Os testes desenvolvidos em laboratório, mesmo quando se tenta 
aproximar do ambiente natural, nem sempre são proveitosos. No entanto, a vantagem reside no 
fato de permitir ao pesquisador um maior controle sobre as variáveis externas, por meio de 
procedimentos e equipamentos que podem influenciar os resultados do teste. 
Já os testes realizados em campo apresentam a vantagem de ocorrer no ambiente natural dos 
usuários, mas têm a desvantagem de não proporcionar ao pesquisador o controle das variáveis que 
podem impactar os resultados. 
Outra maneira de se categorizar os testes é segundo o nível de formalidade dos mesmos: formal 
versus informal. Testes formais seguem protocolos de pesquisa, para garantia de resultados objetivos, 
com procedimentos de coleta de dados rigorosos. Já os testes informais têm menos rigor, o que 
compromete a qualidade dos resultados, mas possibilitam insights preciosos para a equipe do projeto. 
 
Avaliação heurística 
A avaliação heurística é um modo de inspecionar a usabilidade em um conceito mais amplo que 
se refere ao conjunto de métodos nos quais um ou mais (geralmente, até 5) avaliadores lançam um olhar 
minucioso sobre interfaces de um site ou sistema. A inspeção de usabilidade, assim como a avaliação 
heurística, pode se contrastar com o teste de usabilidade, no qual a usabilidade das interfaces é avaliada 
testando a mesma em usuários representativos do público-alvo. 
 
20 
 
Enquanto os métodos de inspeção de usabilidade apresentam uma filosofia mais racionalista, 
o teste de usabilidade se configura como mais empirista. Na avaliação heurística, o especialista 
verifica a usabilidade do sistema comparando-o com uma série de critérios definidos a piori, que 
são considerados boas práticas ou mesmo essenciais de ergonomia, usabilidade, interação homem-
computador e UX. Tais práticas foram estabelecidas a partir de pesquisas consagradas nessas áreas. 
Desse modo, os problemas de usabilidade que emergem são violações ou não a essas práticas. 
No teste de usabilidade, no lugar de se avaliar a conformidade do sistema com esses modelos, os 
especialistas observam, diretamente, o desempenho de usuários realizando as tarefas e, a partir desse 
olhar, apontam os problemas. No último módulo, veremos as Heurísticas de Nielsen. 
O trabalho é dividido nas seguintes etapas: 
1. Escolha dos avaliadores 
Definição das heurísticas (escolha de heurísticas gerais ou mais específicas para cada tipo de 
site ou sistema e de acordo com os objetivos do projeto). Análises individuais (cada especialista 
verifica, individualmente, a conformidade das interfaces com as heurísticas selecionadas e anota 
quais os problemas encontrados, localização, gravidade ou frequência) 
 
2. Discussão entre os avaliadores 
Relatório com os problemas encontrados. Um conjunto de heurísticas de utilização comum 
nesse tipo de trabalho é o de J. Nielsen & R. Mack (1994): 
 visibilidade do estado do sistema; 
 correspondência entre o sistema e o mundo real; 
 controle e liberdade por parte do usuário; 
 consistência e padrões; 
 prevenção de erros; 
 reconhecimento em lugar de memorização; 
 flexibilidade e eficiência no uso; 
 estética e design minimalista; 
 auxílio dos usuários a reconhecer, diagnosticar e recuperar os erros, e 
 ajuda e documentação. 
 
Regras de ouro: 
 perseguir a consistência; 
 fornecer atalhos; 
 fornecer feedback informativo; 
 marcar o final dos diálogos; 
 fornecer prevenção e manipulação simples de erros; 
 permitir cancelamento das ações; 
 fornecer controle e iniciativa ao usuário e 
 reduzir a carga de memória de trabalho. 
 
 21 
 
Critérios ergonômicos: 
 condução; 
 carga de trabalho; 
 adaptabilidade e 
 gestão de erros. 
 
Quantas pessoas necessito para testar algo? 
A seguir, o gráfico mostra que um número pequeno de pessoas já é capaz de garantir a 
eliminação de grande quantidade de problemas. No gráfico criado por Jakob Nielsen, podemos 
notar que é possível eliminar quase 100% dos erros críticos utilizando nove testadores: 
 
Figura 8 – Número de usuários participantes dos testes 
 
Fonte: adaptado de Nielsen (2009). 
 
Navegabilidade 
É o modelo que existe para se mover pelo espaço informacional e hipertextual. Um sistema 
de navegação possui duas funcionalidades básicas que, para Nielsen (2000), devem constar em 
todas as páginas: 
 localização – identifica em que site o usuário está, assim como indica a sua posição nele, e 
 orientação – mostra os caminhos para determinados destinos. São os guias da estrutura 
interna. 
 
 
 
22 
 
O autor considera que uma navegação deve responder a três perguntas que, divertidamente, 
podemos chamar de existencialistas: Onde estou? De onde vim? Para onde vou? Em acréscimo, a 
respeito de usabilidade e navegabilidade, Steve Krug descreve, em seu livro Não me faça pensar, 
outras perguntas primordiais de uma navegação: 
 Onde devo começar? 
 Onde eles colocam o _____ ? 
 Quais os itens mais importantes desta página? 
 Por que deram este nome a isto? 
 
Pontos importantes para um adequado trabalho de UX 
 Os desenvolvedores de uma interface devem organizar as informações na tela de modo a 
serem acessadas intuitivamente pelo usuário, ou seja, para que ele não necessite pensar 
para realizar ações. 
 É necessário fazer o utilizador entender o objetivo do site já no primeiro contato com ele 
e capturar, rapidamente, tudo o que for importante para navegar. Em outras palavras, 
busca-se fazer com que ele encontre o que procura assim que coloca os olhos na página. 
Os itens dispostos na tela, que parecem clicáveis, devem ser clicáveis. Páginas devem ser 
projetadas para serem olhadas, e não lidas. 
 É preciso omitir palavras desnecessárias. Escrever para a web é a arte de não escrever. 
 Quem procura informação na internet, em geral, está com pressa e precisa satisfazer 
necessidades com a maior rapidez possível. Ser sucinto evita confusões de interpretação. 
 Permitir que outras pessoas testem a sua interface é uma excelente maneira de avaliar se 
aquilo que o desenvolvedor idealizou corresponde ao que, de fato, as pessoas irão vivenciar. 
 
Arquitetura da informação (AI) 
Ao ser projetado, um site passa por etapas essenciais de arquitetura da informação. São elas: 
 definição do que são cada elemento; 
 onde devem estar localizados e 
 como devem estar interligados. 
 
A disciplina organiza e categoriza informaçõesde modo claro e simples, sendo responsável 
por tornar o produto digital inteiramente compreensível. 
 
 
 23 
 
Reunimos algumas definições de AI (ROSENFELD e MORVILLE, 2006). Vejamos: 
 o design estrutural de ambientes de informações compartilhadas; 
 a combinação dos esquemas de organização, rotulação de busca e navegação em websites e 
intranets, e 
 uma disciplina emergente focada em trazer princípios do design e arquitetura ao espaço 
digital. 
 
O trabalho do arquiteto de informação é balancear as características e as necessidades do 
usuário, do conteúdo e do contexto. 
 
Figura 9 – Arquitetura de informação 
 
Fonte: adaptado de ROSENFELD e MORVILLE (2006). 
 
A seguir, vejamos as particularidades de cada esfera. 
 
a) Contexto: 
 negócio, missão, política, cultura organizacional; 
 objetivos estratégicos, metas e prioridades; 
 processos de trabalho; 
 clientes e fornecedores, e 
 infraestrutura de TI. 
 
b) Conteúdos: 
 mapeamento de informações, produtos e serviços; 
 metadados, tipos e formatos; 
 assuntos (vocabulários controlados, linguagem técnica) e 
 formas de armazenamento. 
 
24 
 
c) Usuários: 
 análise de acessos; 
 necessidades de informação; 
 expectativas – produtos, serviços e funcionalidades; 
 críticas aos sistemas de informação disponíveis (usabilidade, organização, atualização, 
oferta de conteúdos); 
 sugestões de boas práticas e 
 interesses – compartilhamento de informações. 
 
A AI interfere, diretamente, nos custos de construção e manutenção dos websites, nos custos 
de treinamento de funcionários e, até, na valorização da marca. 
 
Componentes da arquitetura da informação 
Rosenfeld e Morville (2002) dividem a arquitetura de informação de um website em quatro 
grandes sistemas interdependentes, cada um composto por regras próprias e aplicações: 
 sistema de organização (organization system) – determina o agrupamento e a 
categorização do conteúdo informacional; 
 sistema de navegação (navigation system) – determina as maneiras de navegar, de se 
mover pelo espaço informacional e hipertextual; 
 sistema de rotulação (labeling system) – determina as formas de representação, de 
apresentação da informação, definindo signos para cada elemento informativo, e 
 sistemas de busca (search system) – determina as perguntas que o usuário pode fazer e o 
conjunto de respostas que irá obter. 
 
Certamente, existem graus de dificuldade e pontos de alerta inerentes a esses componentes. 
Vamos refletir sobre eles: 
a) Conseguir falar a linguagem do usuário 
Atenção ao fato de que, geralmente, a linguagem própria do arquiteto de informação não 
coincide com a do usuário, no que se refere, por exemplo, a gírias e expressões técnicas. Toda 
organização possui uma linguagem particular. Muitas vezes, devido a suas políticas internas, 
determinada linguagem é adotada para criar os rótulos do website. No entanto, é normal o usuário 
não compreender certos termos. 
 
 
 25 
 
b) Superar a ausência de feedback 
Em uma conversa, o ser humano dispõe de recursos de feedback que o auxiliam, em tempo 
real, a verificar se a mensagem é compreendida. Tais recursos são gestos, entonação de voz, 
perguntas, etc. Em um website, não existe esse feedback para que o arquiteto de informação fique 
seguro de que a sua mensagem está sendo assimilada. É verdade que algumas formas existem, como 
medição de acesso a páginas, e-mails, sugestões e reclamações. No entanto, raramente, tais 
ferramentas são em tempo real. 
 
Sistema de busca 
a) Comportamento do usuário 
Normalmente, a busca de uma informação não é feita em um único passo, a não ser a busca 
por um item previamente conhecido. É comum o usuário buscar uma informação, aprender com 
o resultado e refinar sua busca, porque ele não conhece o suficiente sobre o tópico para fazer a 
pergunta certa. 
 
b) Organização da informação 
Alguns esquemas podem ser auxiliares na organização de informações e de como aglutiná-las 
dando mais assertividade e sentido ao usuário, como por exemplo no esquema abaixo elaborado 
por Reis (2004): 
 
 
 
26 
 
Figura 10 – Esquema de organização da informação 
 
Fonte: Reis (2004). 
 
 
 
 27 
 
Dispositivos móveis 
A forma como as pessoas pensam e interpretam o mundo é fundamental para o trabalho de 
AI, porque a arquitetura da informação é baseada no ser humano. Para ilustrar, o modo como se 
organiza dados em um site visualizado em monitor 22 polegadas não é o mesmo de quando igual 
site é acessado a partir de um smartphone. Na prática, a tela é suprimida em mais de 80%. Isto 
significa que é importante ter prioridades de exibição. Por isso, ao desenvolver interfaces adaptáveis, 
a arquitetura de informação se ocupa também da tarefa de adaptar a estrutura de diferentes formas: 
 selecionando os itens mais e menos importantes e 
 alterando os nomes de links, botões e posicionamentos de estrutura. 
 
Selecionando os itens mais e menos importantes 
Telas grandes são capazes de conter mais informações. Dessa forma, como adaptar um site 
em desktop para smartphone? Comumente, sites apresentam estrutura de menu, campo de busca, 
logo, banners de propaganda, links patrocinados, chamadas para as seções, as últimas notícias, 
tweets, facebook, Instagram, etc. Toda essa informação é relativamente fácil de organizar quando 
nosso layout tem header (topo da página), três ou quatro colunas e footer (rodapé). No entanto, para 
adaptar sites e aplicativos a telas reduzidas e proporcionar uma satisfatória experiência de navegação, 
restrições de conteúdo a exibir devem ser feitas. 
Ainda é interessante pensar sobre os locais em que uma pessoa pode estar acessando uma 
página. A percepção de tempo para quem que está sentado em frente a um computador é diferente 
de quando está em um restaurante, por exemplo. Entender o que é mais importante em um site é 
também estar atendo a essas questões. 
Estudo de interface 
Wireframes são adequadas ferramentas para se pensar uma interface que necessita se adaptar 
de uma tela para outra. Abordaremos esse instrumento em detalhes em outro módulo. Já nos 
primeiros rascunhos de interface, é importante definir as suas principais áreas e como se adaptarão. 
Observe, na sequência, uma estrutura básica com header (A), banner (B), produtos (C) e footer (D): 
 
 
 
28 
 
Figura 11 – Wireframe para monitores de 17 polegadas e superior 
 
Fonte: adaptado de Balsamiq.com 
 
 
 29 
 
Figura 12 – Wireframe para tablets 
 
Fonte: adaptado de Balsamiq.com 
 
 
 
30 
 
Figura 13 – Wireframe para smartphones 
 
Fonte: adaptado de Balsamiq.com 
 
 31 
 
Nesse exemplo, a ordenação pode ser previamente programada por um profissional, fazendo 
com que as colunas flutuem para baixo ocupando toda a largura da janela. Uma linha interessante 
de trabalho é desenvolver interfaces, primeiramente, para smartphones e, depois, para sites. Vejamos 
os motivos: uma vez definidas as prioridades com o usuário, constrói-se um wireframe. 
Vamos aos exemplos de uma construção para desktop e, na sequência, para dispositivos móveis: 
 
Figura 14 – Wireframe 
 
Fonte: adaptado de Balsamiq.com 
 
 
32 
 
Espaço menor, escolhas difíceis 
Vamos pensar em adaptações na AI para espaços reduzidos com base no exemplo: “Início” 
pode ser removido do menu e, no lugar, usa-se a marca ou o nome da empresa como link para a 
página inicial. Essa é uma convenção comum, embora existam sites que a ignoram. 
“Portfólio” poderia ser removido do menu principal, já que o objetivo primordial do site é 
dar acesso e divulgar os artigos (posts). Sendo assim, na homepage, pode haver uma chamada de 
alguma outra informação, como o último trabalho com link, que também pode ser acessado pelo 
item “Sobre mim”. 
“Assine o RSS” também pode ser removido do menu, e constar nos posts e no fim das páginas. 
Desse modo, nesse exemplo hipotético, ao adotar técnicas simples com CSS, é viável tornar o menu 
principalmais adequado a smartphones, com a redução de 6 para 3 itens. 
 
 
 
 33 
 
O wireframe do site adaptado para smartphones ficaria assim: 
 
Figura 15 – Wireframe adaptado 
 
Fonte: adaptado de Balsamiq.com 
 
34 
 
Acessibilidade 
A acessibilidade digital é a qualidade de um produto ser flexível o bastante para atender às 
necessidades e preferências do maior número de pessoas, além da compatibilidade com tecnologias 
assistivas, que são aquelas destinadas ao uso por parte de pessoas que apresentam necessidades 
especiais como de ordem visual, física e cognitiva. 
Acessibilidade na Web pressupõe que qualquer pessoa, dispondo de qualquer tipo de 
tecnologia de navegação, como como navegadores, deve ser capaz de visitar e interagir em qualquer 
site, além de desfrutar inteiramente da compreensão das informações nele apresentadas. 
Para a elaboração de páginas acessíveis, deve-se sempre testá-las com tecnologias apropriadas, 
por exemplo, o sistema operacional DOSVOX, criado pelo Núcleo de Computação Eletrônica da 
Universidade Federal do Rio de Janeiro (UFRJ), que permite que pessoas cegas utilizem um 
microcomputador comum para desempenhar uma série de tarefas, dando independência ao usuário 
com problemas de visão. 
Uma informação importante a respeito de normas internacionais de construção de sistemas 
e interfaces é a W3C (World Wide Web Consortium), que é a principal organização de padronização 
da World Wide Web (aquele WWW que aparece no seu navegador como Chrome e Explorer), hoje, 
dirigida pelo criador do WWW na Internet, Tim Berners-Lee. Existem vantagens em seguir a 
padronização internacional. Vejamos: 
 
Vantagens dos padrões web 
Os padrões web são elaborados para: 
 beneficiar usuários da Internet; 
 fornecer acessibilidade; 
 dispor de compatibilidade com os diversos browsers e dispositivos, e 
 garantir a viabilidade em longo prazo de qualquer documento publicado na web. 
 
Desse modo, o acesso é possível a partir de uma diversidade de browsers, dispositivos (celular 
e tablets, por exemplo) e tecnologias, como sintetizador de voz e impressoras Braille; sem a 
necessidade de desenvolver várias versões dos sites. E mais: os sites desenvolvidos segundo os padrões 
web possuem outras vantagens, como uniformidade, simplicidade, acessibilidade, apresentação, 
estabilidade e separação da estrutura. 
É interessante observar que um tipo de linguagem ou língua também é uma forma de 
acessibilidade. Evitar expressões estrangeiras que levam dúvida a quem não as compreende é uma delas. 
É comum projetos digitais terem páginas e páginas carregadas de expressões em inglês. Desse modo, o 
uso de estrangeirismos é indicado somente quando expressões não possuem tradução ou foram 
amplamente disseminadas ou incorporadas pelo português, por exemplo, o mouse do computador. 
 
 35 
 
Card sorting 
Agora, vamos falar de um instrumento importante que merece destaque neste material: card 
sorting. Essa é uma técnica capaz de traçar um modelo mental dos usuários, contribuindo para que 
os desenvolvedores tenham noção de como devem organizar e priorizar as informações de um site. 
É uma forma de identificar como o público-alvo de um projeto interativo espera que o conteúdo 
seja organizado. Os usuários são convidados a participar de sessões de aplicação desse método, que 
podem ser realizadas em grupo ou individualmente. Como referência, utilizaremos autores como 
Cybis (2007), e Padovani e Ribeiro (2013). 
Funciona assim: os participantes recebem uma quantidade de cartões, sendo que cada um 
deles representa um conteúdo único do projeto. Os cartões então devem ser agrupados da forma 
que o participante considere mais apropriada. O resultado das sessões obtidas serve de insumo para 
a construção do mapa de arquitetura. 
Vejamos os dois tipos de card sorting: 
 Aberto – os participantes recebem cartões sem nenhum agrupamento preestabelecido. 
Como tarefa, pede-se para reunir os cartões em grupos considerados mais apropriados e 
solicita-se, ainda, que cada agrupamento seja nomeado. Com o card sorting aberto, é 
possível ter uma visão inicial da rotulação das sessões. 
 Fechado – os participantes recebem cartões e um conjunto de grupos preestabelecidos. 
Como tarefa, pede-se para colocar os cartões nos grupos. Com o card sorting fechado, 
obtêm-se novas tendências sobre agrupamentos em uma arquitetura de informação já 
consolidada. A análise de dados é mais simples do que na outra modalidade. Por isso, é 
útil como refinamento após uma aplicação de card sorting aberto. 
 
Seleção de conteúdo e preparação dos cartões 
O conteúdo dos cartões pode ser composto por páginas individuais, grupos de páginas ou 
todo o sistema de navegação do site. É interessante utilizar papéis de fácil manuseio e com gramatura 
maior do que de folhas de sulfite. Adote rótulos curtos para que o usuário identifique a mensagem 
rapidamente. Caso necessário, acrescente informações adicionais ao verso do cartão, identificando-
os com números para melhor organização. 
 
Número de cartões 
Utilize, em média, de 30 a 100 cartões. Número abaixo de 30 dificulta a identificação de 
categorias, e mais de 100 cartões pode tornar a atividade demorada e cansativa. Uma boa dica é 
providenciar cartões adicionais e canetas para o participante escrever sugestões de rotulações caso deseje. 
 
 
36 
 
Benefícios da aplicação de card sorting 
 obtenção de um modelo mental dos usuários na arquitetura de informação proposta para 
um projeto interativo; 
 aumento da eficiência e efetividade das ações de interação do projeto; 
 incremento do índice de conversão do projeto e 
 contribuição para a credibilidade percebida pelos usuários. 
 
Quando aplicar? 
a) Na fase de planejamento do projeto – pode ser aplicado antes ou depois da elaboração 
da sugestão de mapa de arquitetura, orientando a definição dessa proposta de estrutura. 
b) Com o projeto já implantado – o modelo de card sorting também pode ser útil para 
avaliar a arquitetura de um projeto já implantado, identificando aspectos que podem levar 
a melhorias de usabilidade. 
 
Etapas da atividade 
 Reunião de exploração – quando é alinhado o entendimento junto ao cliente, do 
contexto, conteúdo, públicos-alvo, objetivos e métricas de sucesso do projeto. 
 Inventário de conteúdo – é realizado apenas quando o serviço visa avaliar a arquitetura 
de um projeto já implantado. 
 Estabelecimento do plano de teste – envolve a definição das variáveis de teste, como o 
perfil dos usuários (faixa etária, nível de experiência em navegação web, gênero, atividades 
profissionais, etc.) e os procedimentos a serem adotados. Nesse momento, é definido se as 
sessões acontecerão remota ou presencialmente e, ainda, se acontecerão na modalidade 
aberta ou fechada. 
 Teste piloto – verifica e ajusta o plano de teste proposto. 
 Recrutamento de usuários – os participantes são recrutados de acordo com um roteiro 
de filtragem, necessário para garantir que os usuários selecionados para as sessões atendam 
aos perfis definidos. 
 Realização das sessões – as sessões são realizadas segundo o plano de teste. 
 Análise dos dados – os resultados são compilados e organizados em uma planilha. 
 Produção e apresentação do relatório – o cliente toma conhecimento dos resultados e 
de sugestões de organização do projeto. 
 Seleção de participantes – como já mencionado, o card sorting pode ser aplicado 
individualmente ou em grupos. Estudos mostram que a aplicação em grupos compostos 
por três ou mais usuários garante resultados mais representativos. 
 
 37 
 
No que tange à seleção dos usuários, são válidas as mesmas recomendações feitas para a seleção 
de usuários destinados aos testes de usabilidade. 
 
Aplicação do Card sorting 
Em uma sala com mesas e cadeiras para os participantes, a técnica é simples de se aplicar e requer 
atenção dos aplicadores para observar a reação de cada usuário da atividade, ajudando em eventuais 
dúvidase tomando nota das informações importantes que surgem das discussões em grupo. 
 
Análise 
A análise de resultados deve responder, basicamente, às seguintes questões: 
 Quão “próximos” estão dois itens? Isso significa: quantas vezes eles foram citados na 
mesma categoria. 
 Quão “próximo” está um item de uma categoria pré-definida? 
 
Recomenda-se a utilização de softwares para análise, como optimalSort ou mesmo a planilha 
do Excel. Com uma planilha, é possível fazer comparações entre cada participante ou grupo de 
participantes, dispondo todas as categorias verticalmente, assim como a frequência com que 
aparecem as rotulações em cada grupo de categoria para obter-se uma média e, a partir daí, definir 
as melhores posições taxonômicas para cada grupo no sistema de navegação do site. Vejamos as 
ilustrações: 
 
Figura 16 – Card sorting 
 
Fonte: https://zurb.com/word/card-sorting. 
 
38 
 
Etapas de uma implementação no projeto digital 
As fases detalhadas, a seguir, podem sofrer alterações conforme a necessidade de cada projeto. 
Certas tecnologias e metodologias podem ser descartadas caso sejam dispensáveis para alcançar os 
objetivos. Essas fases estão ligadas a UX, arquitetura de informação e usabilidade de forma geral. 
Diversos autores e profissionais discutem sobre essas etapas, como Teixeira (2018), Gothelf (2013), 
etc. Acompanhe as etapas sugeridas, a seguir. 
 
Etapa 1: pesquisa 
Meta – pesquisar e analisar as informações sobre os usuários, as suas necessidades e o seu 
ambiente para definir o escopo e os requisitos do projeto. 
O que se faz: 
 levantamento da proposta e objetivo do negócio; 
 identificação de públicos-alvo; 
 requisitos para implementação, incluindo restrições técnicas; 
 objetivos do usuário; 
 experiência do usuário e comportamento atual do projeto; 
 informações necessárias a cada fase de utilização; 
 linguagem do usuário e 
 definição das métricas de sucesso. 
 
Algumas formas de pesquisar (detalhando a etapa 1): 
 pesquisas de usuários – focusgroup (grupo focal), entrevistas; 
 relatórios internos – SAC, analytics, log do mecanismo de busca; 
 entrevistas com funcionários da empresa – marketing, vendas, atendimento aos clientes; 
 análise de sites concorrentes e sites similares (benchmarking); 
 análise de tarefas; 
 análise da infraestrutura da empresa e 
 inventário de conteúdo. 
 
Etapa 2: concepção e prototipação 
Meta – conceber a visão macro da solução por meio da definição de sistemas de: 
 organização; 
 navegação; 
 busca e 
 rotulação; 
 
 
 
 39 
 
Além da identificação de: 
 fluxos de navegação (documento); 
 wireframes (documentos) e 
 vocabulário (documento com regras de rotulação). 
 
Algumas formas de pesquisar (detalhando a etapa 2): 
 personas; 
 protótipo no papel (paper prototype) e 
 protótipos. 
 
Etapa 3: implementação e monitoramento 
Meta – validar pesquisa ou protótipo por meio de: 
 análise heurística (documento); 
 testes de usabilidade; 
 testes A/B; 
 análise de relatórios, como do Google Analytics; 
 análise de acessibilidade e 
 recomendações de SEO (Search Engine Optimization). 
 
Algumas das funções aqui descritas serão detalhadas no último módulo. 
 
 
 
40 
 
 
 
 
 
 
Este módulo contém introdução à UX e à administração pela experiência do usuário. O 
objetivo é mostrar a importância do funcionamento de projetos focados nessa experiência, 
incluindo a relevância dessa centralidade nos modelos de gestão. 
Desse contexto, farão parte as abordagens relacionando gestão, sociedade e tecnologia que 
envolvem a nova economia e geram uma nova forma de se gerenciar, por meio de formas empíricas 
que valorizam o ato de testar pela utilização de metodologias ágeis para desenvolvimento de um 
projeto digital. Ao concluir este módulo, você será capaz de entender os processos atuais de gestão 
de Startups ligados à linha Lean e compreender esse cenário. 
 
Nova sociedade, tecnologia e UX 
A sociedade contemporânea está passando por novas transformações, uma verdadeira 
revolução, segundo o autor americano Alvin Toffler. Compreendidas por ele como ondas, a sua 
defesa é de que a humanidade chegou à terceira onda. A primeira teria sido quando as civilizações 
nômades se tornaram agrícolas, por volta de 10 mil anos atrás; a segunda, na revolução industrial, 
há cerca de 300 anos; a terceira, surgida nos Estados Unidos e em alguns países ricos por volta de 
1950. Essa terceira onda que vivemos agora é, para Toffler, a revolução da informação, considerada 
uma riqueza nos dias atuais (Viana, 2011). 
Já na década de 1970 e 1980, Toffler pregava que as batalhas do futuro não serão mais por 
fontes de energia, commodities ou matérias-primas, e sim por produtos ligados ao conhecimento, 
como os canais de comunicação, as bases de dados, as propriedades intelectuais e os seus produtos, 
além dos serviços inteligentes. 
MÓDULO II – GESTÃO E A EXPERIÊNCIA 
DO USUÁRIO 
 
42 
 
Para o autor, essa revolução é o entendimento de que atravessamos um novo tipo de 
sociedade, a "sociedade do conhecimento”, que teria como base e capital a gestão dos 
conhecimentos por meio das tecnologias da informação e comunicação (TICs), de inevitáveis 
influências econômicas e no cotidiano. 
Nos dias de hoje, segundo Castells, encontramo-nos em uma sociedade ansiosa por 
informação e tecnologia, que consolida uma nova base cultural, em que termos são inaugurados 
como “sociedade da informação” e “economia de aprendizado”, além de tantos outros 
característicos deste modelo singular de sociedade, conectada pela comunicação e influenciada por 
um acesso informacional crescente. 
Originária das TICs, a internet quebra fronteiras e faz com que pessoas isoladas 
geograficamente acessem informação de forma rápida. No contexto desta revolução dos meios de 
comunicação e informação, entram em cena os produtos digitais como comércios eletrônicos, 
catálogos virtuais, sistemas de comunicação em tempo real, chamadas de vídeo e uma série de 
produtos frutos deste processo crescente e dinâmico que utilizam as TICs como suporte tecnológico 
para sua permanente expansão. 
A socialização também foi impactada. A sociedade passou a ter acesso a outras maneiras de 
produzir e acessar conhecimentos e relações, com a criação de espaços virtuais que compõem o 
chamado ciberespaço, permitindo a ascensão de alternativas à forma “analógica” de relações 
humanas. Os avanços tecnológicos criam novas possibilidades para a transferência da informação e 
influenciam hábitos. Internet, smartphones, tablets, etc. são exemplos de novas necessidades que 
geram novas experiências e novas demandas de mercado. 
Como não se habituar a experiências digitais que facilitam nossas tarefas cotidianas? 
Interessante exemplo a ser citado é o leitor de livros digitais Kindle da Amazon. Nas versões mais 
antigas do Kindle, é possível colocar 2 mil títulos de livros no aparelho. Talvez, mais livros do que 
você conseguirá ler durante toda a sua vida. E por que não continuar comprando livros em papel? 
Os motivos vão desde o ecológico até o peso de cada livro. 
Em uma conta rápida: um livro com cerca de 200 páginas pesa, em média, 300 gramas. Caso 
você quisesse levar em uma viagem toda a sua biblioteca do Kindle, seria preciso bagagens que 
dessem conta de ½ tonelada, mais precisamente 600 quilos. Em contrapartida, um Kindle pesa 161 
gramas. Ou seja, os seus 2 mil livros cabem em uma pequena bolsa de mão. 
Na prática, este módulo tratará da parte humana dessa revolução e os seus reflexos na 
sociedade, a relação homem-máquina e os seus negócios, o desenvolvimento de produtos digitais 
com foco no ser humano e a sua experiência. 
 
 
 
 43 
 
Economia da experiência 
Vamos abordar como o usuário acessa um negócio digital e como a economia com base na 
experiência do usuário (UX) é adotada por empresas para obter valores, ganhos e novos produtos 
nos seus empreendimentos. 
Iniciemos com um exemplo. Sevocê baixar um produto digital de música, como Spotify na sua 
versão gratuita, terá acesso ao aplicativo como se fosse uma rádio FM, ou seja, poderá trocar de estação 
e, de tempos em tempos, uma propaganda será veiculada, como em uma rádio analógica. 
 Mediante uma assinatura paga, o Spotify oferece outro tipo de serviço, por meio do qual os 
recursos são ampliados, sendo possível salvar sua lista de canções preferidas, fazer download para 
escutar offline e trocar de música (não estação) toda vez que quiser. Com isso, a marca oferece dois 
modelos de experiência: uma quando você não paga pelo serviço – rádio FM – e outra quando você 
paga – a sua playlist de músicas tal qual um iPod ou outro tocador de música digital. 
Repare que a venda concretizada nesse exemplo não foi o serviço de transmitir música, e sim 
a experiência. Quando falamos de UX, vemos que é uma mescla do vivido pelo público e a sua 
relação com produtos digitais. Dessa forma, quando uma marca projeta algo, deve levar em 
consideração os desejos do consumidor, os seus anseios, e a sua relação e cognição quanto ao 
produto, buscando criar maior empatia. 
Esse exemplo do Spotify mostra, seguramente, uma gestão centrada no usuário, em que todo 
assunto pertinente a ele são os mais importantes a serem considerados. Um produto digital muitas 
vezes começa a ser experimentado pelo cliente antes mesmo de ser apresentado na vitrine de uma 
loja. Essa aproximação passa pelo vendedor, pela forma como o produto é embrulhado e como nos 
é entregue, até o momento em que o ligamos em casa, no trabalho ou em qualquer lugar, e passamos 
a incorporá-lo em nosso dia a dia, tornando-se parte integrante de nossas vidas, sem nos darmos 
conta disso muitas vezes. 
Atualmente, a concorrência entre marcas vai além do avanço tecnológico. Ela se dá, 
principalmente, pela melhor experiência possível a ser proporcionada ao cliente. Tecnologias 
avançadas nem sempre são sentidas pelo público. Esse ponto se enquadra em outra missão da UX: 
como fazer com que valores sejam de fato percebidos e entendidos. 
 
Gestão pela experiência 
Vimos que a característica mais importante da disciplina UX é o foco no usuário. 
Chamaremos esse processo de “Revolução de Copérnico”, fazendo alusão àquela promovida pelo 
cientista ao afirmar que o sol era o centro do sistema solar. Na analogia desenvolvida aqui, o ser 
humano é a figura central, envolvido pelas Tecnologias da Informação e da Comunicação (TICs) e 
por todos os processos decorrentes da sua necessidade. Esse conceito de “Revolução de Copérnico” 
 
44 
 
tem origem na área da Educação a Distância, que concebe linha de ensino focada no aluno, segundo 
Michael Moore. Adotaremos a mesma concepção neste material, por considerar a grande mudança 
no pensamento da criação dos produtos que tem UX como parâmetro. 
 
Figura 17 – Projeto centrado no usuário, a revolução de Copérnico 
 
 
Novamente nos valendo de exemplos práticos, abordemos a rede social Twitter para falar de 
centralidade. Na época do seu lançamento, em 2006, existiam diversas ferramentas que faziam 
registros no formato de diários on-lines: os chamados blogs. Dentro de um blog, podem ser 
carregadas páginas e páginas de conteúdo, fotos diversas e vídeos também. Também é possível trocar 
a cor de fundo de uma página, colocar animações, além de fontes de diversas cores e tamanhos que 
podem expressar o seu espaço de uma forma totalmente personalizada. 
Nesse mesmo contexto, o Twitter trouxe o conceito particular de microblogging, em que escrever 
limitava-se a preciosos 140 caracteres (tempos depois, 280). Imagens, fotos e links são possíveis mediante 
amplas restrições, bem diferente das versões cheias de conteúdo dos seus concorrentes. O Twitter logo 
se tornou sucesso mundial, ou seja, as versões descritas mais complexas e tecnológicas com muito mais 
recursos estavam perdendo espaço para outra repleta de limitações. 
A pergunta é: por que o Twitter fez tanto sucesso? 
Bem, o primeiro entendimento que temos é que o Twitter não ofereceu tudo que a tecnologia 
poderia ofertar, e sim o que o usuário gostaria de receber: conteúdos curtos e rápidos. A era da 
internet, com verdadeiras chuvas de informações, trouxe consigo a vontade de consumir conteúdos 
de modo ágil, fazendo com que textos compridos sejam preteridos frente aos concisos. Se, em um 
blog, é possível escrever inúmeras páginas, postar incontáveis fotos e vídeos, além de links diversos; 
em um microblogging, as limitações não aprisionam, ao contrário, libertam, já que representam os 
anseios do público atual. 
 
 45 
 
O Twitter poderia ter entregue todas as possibilidades tecnológicas para o seu cliente, mas 
preferiu entendê-lo e atendê-lo em profundidade: concedeu poucos caracteres de consumo rápido 
de informação, criando conceito novo com base na experiência do usuário e não na tecnologia. 
Diante desse caso, brevemente comentado, podemos notar que quando uma marca tem o seu 
foco principal na tecnologia, por vezes um negócio digital perde espaço. Não importa tanto a 
tecnologia que se tem a disposição, e sim o que o usuário entende como valor no seu cotidiano. 
 
Gestão de produtos com base na experiência – UX enxuta 
Vamos iniciar este item abordando como, geralmente, funciona a criação de um produto, por 
meio de uma das técnicas mais utilizadas que se chama modelo cascata. 
O modelo cascata – waterfull – apresenta todos os ingredientes que se referem ao 
desenvolvimento de um produto, permitindo que seja traçada uma trajetória que vai desde 
informações de viabilidade até a implementação de fato. De origem na Engenharia, o modelo foi 
pensado como desenvolvedor de softwares. A sua espinha dorsal é a ideia de que, para elaborar um 
produto, é necessário se orientar sequencialmente. As atividades a serem cumpridas são reunidas 
em tarefas, sendo que cada tarefa só se inicia quando a anterior é concluída por completo. 
 
Figura 18 – Modelo cascata 
 
 
46 
 
O modelo cascata é largamente utilizado e válido para diversos produtos. No entanto, neste 
material, vamos comentar o seu uso com base em metodologias ágeis de gestão. Esse entendimento 
segue a linha UX Enxuta (UX Lean), que prevê uma ponte na condução de projetos, que vai dos 
processos tradicionais no formato waterfall para o “ágil ou enxuto”, reduzindo, drasticamente, os 
riscos de fracasso. Mas como? A resposta é: por meio da execução constante de testes. 
 
Figura 19 – Metodologia cascata (waterfall) 
 
Fonte: baseada em Ries (2013). 
 
O modelo cascata não prevê a aplicação de testes com o público; apenas traça a sequência de 
etapas para dar conta do desenvolvimento do produto. Caso chegue ao fim da linha de criação 
apresentando algum erro, repare quanto tempo perdido! Ao contrário, a permanente 
experimentação – por exemplo, a cada fase – permite o diagnóstico precoce de eventuais falhas e 
agilidade nas correções. Dessa forma, a regra é: quando errar, descubra cedo e conserte rápido! 
 
Figura 20 – Metodologia Ágil (Lean) 
 
Fonte: adaptado de Ries (2013). 
 
 
 47 
 
Repare que, no modelo cascata, todas as etapas de desenvolvimento do produto acontecem 
para em seguida a criação ser lançada, que representa o grande teste da produção. No entanto, no 
modelo ágil ou enxuto, todas as etapas comportam um lançamento-teste, para que se tenha noção 
de estar trilhando o caminho certo. Caso não esteja, a rota é rapidamente direcionada, enquanto no 
cascata, um erro no meio do caminho, só é descoberto no fim do processo, ficando toda a trajetória 
comprometida. 
A seguir, vejamos as palavras de Erick Ries sobre desenvolver produtos digitais com base 
no usuário: 
 
"Eu era um entusiasta das últimas novidades em metodologias de 
desenvolvimento de software (conhecidas, coletivamente, como 
desenvolvimento ágil), que prometiam ajudar a evitar o desperdício no 
desenvolvimento de produtos. No entanto, apesar disso, cometi o maior 
desperdício de todos: desenvolvi um produtoque os clientes se recusaram 
a usar." (Eric Ries, 2011, p. 46). 
 
O depoimento do autor nos faz refletir que, talvez, não seja mesmo simples despertar para a 
eficácia do conceito UX enxuta. Seguir uma linha de desenvolvimento até o fim, sem fazer testes 
pelo caminho, configura-se uma forma equivocada de o desenvolvedor achar que está sempre 
correto. E uma maneira também de não se dedicar, inteiramente, ao seu público na teoria (execução 
das etapas do processo) e na prática (testes). 
A UX enxuta é inspirada no conceito de startup enxuta, uma filosofia japonesa de 
administração chamada lean manufacturing (manufatura enxuta), vinda da Toyota e criada pela 
revolução que Taiichi Ohno e Shigeo Shingo promoveram nessa montadora de carros. Apesar de 
o conceito enxuta ter sido aplicado para linha de montagem em indústria (linha de inspiração 
para o modelo cascata), o princípio, na verdade, era em prol da agilidade e redução de erros, que 
acarretam o desperdício. 
A metodologia enxuta contribui fortemente para validar se uma ideia tem de fato potencial 
para conquistar o mercado. E nessa busca, é essencial definir, de forma simples, o que é o produto 
ou serviço e avaliar a aceitação junto ao público. Já na primeira etapa de desenvolvimento, 
entrevistar alguns usuários é interessante para que os dados coletados auxiliem na modelagem inicial 
e deem ideias sobre as intenções de compra. 
É um grande equívoco não testar e validar os palpites antes de investir no lançamento de 
novidades no mercado. Nesse caso, também é de grande valia estudar o conceito de MVP – Minimum 
Viable Product (Produto Mínimo Viável) –, sobre o qual aprofundaremos adiante. Terá mesmo? 
 
 
48 
 
As noções de Erick Ries estão espelhadas no gráfico a seguir: 
 
Figura 21 – Ciclo de feedback construir-medir-aprender 
 
Fonte: adaptado de Ries (2011) 
 
Erick Ries chama de pivotar o ato de redirecionar um produto ou negócio, a partir de 
feedbacks que os testes trazem. Jeff Gothelf, autor do livro Lean UX (UX Enxuta), considera esse 
modelo de gestão um ciclo em que o produto amadurece conforme as experiências de interação são 
testadas e retomadas a cada nova etapa. 
Segundo Trevor Van Gorp, inspirado no livro de Jesse James Garrett, The elements of user 
experience (Os elementos da experiência do usuário), a interface de um produto digital é aquilo que 
pode ser tangibilizado. Além disso, a UX não é apenas uma fase, ela permeia o projeto como um 
todo – o que o fez chamá-la de iceberg. 
 
 
 
 49 
 
Figura 22 – Iceberg da UX 
 
Fonte: adaptado de Trevor Van Gorp, 2007. Disponível em: < https://www.affectivedesign.org/ >. Acesso em: nov. 2018. 
 
A figura mostra que a estratégia de um negócio se alinha com as necessidades dos usuários e 
com os objetivos do business como um todo, e que tudo tangencia a UX. Com isso, este item 
procurou mostrar que problemáticas advindas da construção de um projeto digital podem e devem 
ser resolvidas com métodos menos engessados, e que isso é uma tendência atual. 
 
 
 
50 
 
Gestão empírica – criação de produtos para testar 
Vimos que a realização de testes e valorização da opinião do usuário são os pilares das 
metodologias baseadas no conceito enxuta. Isto é, validar ou invalidar hipóteses de maneira 
antecipada e aprender como o usuário forma as bases digitais do projeto. 
 
Figura 23 – Ciclo 
 
Fonte: adaptado de Ries (2011) e Gothelf (2013). 
 
No entanto, como criar produtos testáveis e como validar uma ideia com baixo custo? Entra 
em cena então o MVP – Minimum Viable Product (Produto Minimamente Viável). O MVP pode 
fazer parte da primeira etapa do projeto, em que situações práticas são simuladas para que, 
rapidamente, sejam assimilados elementos e contexto que nortearão definições de preço e 
funcionalidades, por exemplo. Desse modo, torna-se mais fácil prever fatos e criar soluções. 
 
 
 51 
 
Uma espécie de versão beta, o MVP confere agilidade e economia ao projeto, uma vez que é 
previamente apresentado ao público que, por sua vez, fornece o seu parecer. Além de servir para 
testar a utilização do produto e os seus recursos, o MVP também é usado para testar as demandas 
dos usuários. 
No entanto, em se tratando de UX, podemos criar uma etapa anterior ao MVP, que é o 
protótipo mínimo coerente (PMC). Trata-se de uma emulação do produto para se realizar testes de 
baixo custo e aprimorá-lo antes da criação de um MVP. O protótipo mínimo deve ter relação direta 
com o que se espera. 
A seguir, um esquema simples de criação e uso tanto do MVP quanto do PMC: 
 
Figura 24 – Lean UX 
 
Fonte: adaptado de Ries (2011) e Gothelf (2013). 
 
52 
 
 
 
 
 
 
Neste módulo, entraremos em contato com estudos relacionados ao ser humano e à forma 
como captamos e interpretamos informações. Não pretendemos esgotar o assunto, dado que é 
muito vasto. No entanto, vamos analisar pontos ligados ao funcionamento da “máquina” humana 
e ao design emocional. Desse modo, vamos abordar a mecânica do olhar e a utilização da memória 
como componente vivo fundamental em um projeto digital. 
 
Entre a emoção e a razão 
O foco dos estudos de UX, inevitavelmente, é o ser humano. Como vimos em outro módulo, 
de nada adianta um produto com tecnologia de ponta se ela não se converte na melhor vivência 
possível ao cliente. Na prática, a racionalidade pura e simples não se adequa às escolhas de UX. 
Possivelmente, você já deve ter ouvido falar “não se deixe levar tanto pelas emoções, seja mais 
racional”. É comum a separação entre razão e emoção no nosso cotidiano, em que o conceito de 
razão é idealmente positivo, enquanto as emoções ocupam o lugar de intrusa indesejada, uma 
espécie de vilã de nossas decisões. 
Conseguiríamos ser 100% racionais? E se fossemos, a vida seria melhor? A resposta, 
provavelmente, é não. As emoções funcionam como um guia em nossas escolhas, movem-nos de 
forma geral, por isso, são tão importantes serem consideradas na UX. 
Apesar de sermos definidos como seres racionais, estamos longe das amarras de uma 
racionalidade completa e absoluta. A tomada de decisão, por mais racional que possa parecer, 
transita sempre por sistemas de imagens subjetivos da negatividade e positividade. 
 
MÓDULO III – UX E O SER HUMANO 
 
54 
 
Quando a emoção está no comando, a racionalidade quase não opera para converter uma 
ideia negativa em positiva por exemplo. Isso é chamado de Erro de Disponibilidade, segundo 
Damásio (2000). Para ilustrar esse termo, as chances de alguém sofrer um acidente de carro são 
bastante superiores às de um avião em termos estatísticos. 
No entanto, mesmo tendo conhecimento de que uma ciência exata como a Estatística, de origem 
racional, aponta maior segurança de um voo frente a uma viagem automobilística, as imagens mentais 
associadas ao pânico que envolve um acidente de avião interferem negativamente em muitos 
pensamentos e tomadas de decisão relacionadas aos dois meios de transporte. A essa emoção que 
determina escolhas, Damásio deu o nome de marcador somático. 
Segundo o autor, fatos emocionais atribuem valor a determinadas opções e conjuntura de 
cenários, operando como tendências ocultas ou evidências que induzem a uma decisão. Isso quer dizer 
que, diante de uma opção e aplicações de análises, o sujeito se depara com sensações automáticas 
negativas ou positivas em relação a determinadas opções e um alarme interno dispara conduzindo-o à 
rejeição ou aceitação imediata. Vejamos a figura, a seguir, que ilustra como funcionamos no momento 
em que somos requisitados a decidir: 
 
Figura 25 – Tomada de decisão 
 
Fonte: adaptado de Damásio (2004). 
 
 
 
 55 
 
Ao analisar o esquema, verifica-se que, quando estamos diante de uma situação que necessita 
decisão, há duas vias complementares que realizarão o processo de escolha. Pela via A, temos o 
aparecimento de imagens relacionadas com a situação apresentada. Múltiplas estratégias de raciocínio são 
trabalhadas,atuando sobre esses conhecimentos, e uma decisão é produzida. 
A via B ocorre em paralelo e ativa as experiências emocionais que tenham ocorrido em situações 
parecidas. As reativações dessas vivências influenciam a decisão, independente se são conscientes ou não, 
podendo interferir em estratégias de raciocínio ou forçar a atenção sobre as representações de 
consequências futuras. A via A, B ou a combinação de ambas depende das particularidades do sujeito 
relacionadas à sua história de vida e ao seu estado atual. 
O estudo das emoções para o desenvolvimento de uma interface representa, no entanto, um 
elemento entre outros que podem ser analisados, como consta na pesquisa sobre as seis inteligências de 
UX que veremos a seguir. 
 
Seis inteligências de UX 
Nos seus estudos sobre o design da experiência do usuário, o psicólogo cognitivista John Whalen 
listou seis forças motrizes que regem essa atuação profissional, às quais nomeou de inteligências de UX. 
A sua pesquisa foi divulgada pela fabricante de sistemas Adobe, dos programas gráficos Photoshop, 
Ilustrator, entre outros. Observe as dimensões por ele consideradas: 
 
Figura 26 – Seis inteligências de UX 
 
Fonte: adaptado de John Whalen. 
 
56 
 
a) Visão ou atenção (vision or attention) 
Em se tratando de interfaces, geralmente, designers têm facilidade em projetar essa 
inteligência. No entanto, eles não veem, necessariamente, o mesmo que o usuário, fazendo com 
que testes de interface com o consumidor sejam fundamentais. Perguntas devem ser feitas ao se 
analisar um produto como: quais partes despertam mais atenção visualmente? Além disso, quais 
componentes visuais estão sendo buscados pelo usuário ao olhar a página como um todo? 
 
b) Orientação (wayfinding) 
Relacionada à arquitetura da informação, a orientação sinaliza a qualidade da navegação, ou 
seja, se o usuário é capaz de transitar de um ponto a outro com facilidade ou não. Problemas nessa 
inteligência levam pessoas a desistirem com frequência da tarefa que estejam realizando. Desse 
modo, desenvolvedores devem ter sempre em mente como o usuário espera mover-se, 
espacialmente, pelo sistema e qual a sua expectativa de interação nos seus percursos. 
 
c) Memória (memory) 
A memória tem importante participação na forma de se orientar do usuário. Além disso, essa 
inteligência, também listada por John Whalen, ativa experiências vividas na concorrência, o que 
leva a inevitáveis comparações do cliente que espera encontrar aquela vivência em outros momentos. 
Desse modo, tem relevância tentar identificar os modelos mentais que ele conserva, lembrando que 
o sucesso do trabalho do design pode estar no nível de familiaridade daquela experiência para ele. 
Nesse caso, buscar responder uma pergunta traz qualidade a essa atuação: “O que o usuário pensa 
quando pensa em ______?”. 
 
d) Linguagem (language) 
O grau de intimidade com um produto, tal como abordado no item anterior, é importante 
elemento para se definir a linguagem a ser utilizada. Também influenciam a localidade na qual se 
vive e as terminologias mais conhecidas naquele lugar. O volume de informação deve ser dosado, 
uma vez que o usuário, nem sempre, deseja se deparar com tanto conhecimento quanto a empresa 
erradamente expõe. 
Para decisões relacionadas à linguagem em um projeto digital, esteja atento ao vocabulário 
comum ao usuário, os termos que usa para se referir ao seu produto ou ao segmento, assim como 
ao tom mais adequado (mais formal, menos formal, etc.). 
 
e) Emoção (emotion) 
Satisfação, entusiasmo, medos, frustrações são exemplos de componentes da bagagem emocional 
de uma pessoa, que interferem no momento do usuário tomar decisões. Pensar na importância de uma 
tarefa no cotidiano ou mesmo na vida do usuário é uma forma de trazer o lado humano ao design de 
experiência, essencial nesse processo. Reflita também sobre qual valor e sentido o seu produto traz para 
o cliente e que ponto, exatamente, ganha a sua atenção emocional. 
 
 57 
 
f) Tomada de decisões (decision making) 
Todas as outras inteligências comentadas anteriormente são determinantes para a tomada de 
decisões do consumidor. Whalen brinca que há quem chame a disciplina aqui refletida de design de 
persuasão, porque acaba por orientar escolhas, de certa forma, devido a todo um universo arquitetado 
a favor de um caminho: o usuário preferir aquele produto. A tarefa de compor esse universo, como 
sabemos, requer significativa dedicação ao entendimento do público. Para auxiliá-lo a decidir, focar 
em descobrir o que ele já sabe e quais as lacunas informacionais são medidas proveitosas. 
 
Esse apanhado geral sobre seis aspectos principais da mente humana, para John Whalen, a 
serem considerados no trabalho de design em UX mostram que quanto mais se detém sobre eles, 
mais chances o usuário terá de experimentar boas interações com o produto. Na sequência, vamos 
nos aprofundar em técnicas de atuação relacionadas a alguns itens abordados nessa sessão. 
 
Design emocional 
Nossas emoções reservam muitas surpresas. Que o diga a área do design emocional, que 
protagoniza situações inusitadas no mercado, as quais abordaremos neste tópico. O conhecimento 
sobre as emoções humanas são a chave para a conquista de clientes. 
O design emocional tem o papel principal de evidenciar que é possível estabelecer uma relação 
com o consumidor ou utilizador a partir da análise e definição de quais sentidos devem ser 
despertados em prol do sucesso do negócio. O design associado a emoção busca relacionar a estética 
à funcionalidade e, desse modo, conceber um produto que apele ao íntimo do público. 
Três níveis do cérebro precisam de diferentes estímulos, o que originou a divisão dessa 
disciplina de UX em, igualmente, três áreas: a) design visceral, b) design comportamental e c) design 
reflexivo. São classificações de Norman em seu livro ‘Design’ emocional: por que adoramos (ou 
detestamos) os objetos do dia a dia. Pensemos em cada uma delas: 
 
Figura 27 – Donald Norman 
 
Fonte: nngroup.com. 
 
58 
 
a) Design visceral – o nível visceral responde pelos julgamentos por impulso, de forma 
geneticamente pré-programada. Eles são rápidos: bom ou mau, forte ou fraco, perto ou longe, 
seguro ou perigoso, etc. 
Em termos biológicos, a estrutura é arquitetada para ampliar as chances de sobrevivência e é 
base para o comportamento afetivo. Esse nível não se refere à capacidade de raciocínio, pois se 
constitui uma programação genética que desencadeia afetos positivos ou negativos. 
Exemplos de afetos positivos: cor alegre, sabor doce, som suave, local bem iluminado, rosto 
simétrico e sorridente e objeto liso e arredondado. Em oposição, há condições predeterminadas que 
despertam o afeto negativo: luz forte, som alto, mal cheiro, sabor amargo, objeto pontiagudo ou 
assimétrico, calor extremo, frio extremo, etc. 
 
b) Design comportamental – o nível comportamental do cérebro assegura a maior parte das 
atividades do dia a dia. Ele permite que possamos dirigir um carro ao mesmo tempo em que 
cantarolamos uma música e planejamos tarefas. Esse nível não é consciente. É como um pianista 
que comanda os seus dedos, lê a partitura e reflete sobre a música. 
 
c) Design reflexivo – Já o nível reflexivo do cérebro é consciente, que faz o usuário pensar e 
raciocinar sobre algo. Emoção e cognição desempenham funções distintas, mas igualmente 
importantes. São responsáveis pelo estabelecimento de uma relação do indivíduo com o meio. A 
cognição interpreta e constrói o sentido do mundo, enquanto a emoção avalia e julga (afetos). 
 
Figura 28 – Design emocional 
 
Fonte: adaptado de Donald Norman. 
 
 
 
 59 
 
Norman considera que prazer, beleza e diversão têm interferências sobre o design e são 
propulsores da felicidade. Ele cita um exemplo em seu livro a respeito de um espremedor de laranjas 
criado pelo arquiteto Philippe Starck. O autor comprou uma versão dourada do produto, e 
pasmem! Nas instruções, vinhao seguinte aviso: “não indicado para espremer cítricos”. E sabe qual 
a reação de Norman? A melhor possível. Ele ficou tão encantado com as formas daquele excêntrico 
espremedor, que pouco se importou com a sua verdadeira utilidade ou falta dela. 
Eis o espremedor de laranja: 
 
Figura 29 – Espremedor de laranjas 
 
Fonte: https://www.dreamicons.com. 
 
A lógica emocional da natureza humana é aplicada em diversos exemplos do design emocional, 
principalmente, quando na seara do marketing digital. Com o exemplo, podemos concluir que, se 
fosse apenas pelo lado racional, esse espremedor de frutas seria um fracasso de vendas. No entanto, 
não importa se a peça não executa a função que lhe confere o nome, porque queremos sempre algo 
que nos sensibilize e nos dê prazer. 
A lição desse caso é que um objeto belo e agradável pode, sim, parecer mais eficaz por esses 
atributos do que pela utilidade em si. O emocional está no comando, o produto é sedutor. Por falar em 
sedução, há duas formas de se trabalhar a empatia no design, com técnicas amplamente utilizadas no 
mercado, que são pelo antropomorfismo e o zoomorfismo (Rogers, Sharp e Preece, 2013). 
O antropomorfismo é um conceito que transfere características humanas (traços físicos, 
sentimentais, comportamentais, etc.) a objetos ou elementos abstratos de natureza não humana. A 
origem grega associa os termos do seguinte modo: anthropo (homem) e morfhe (forma). 
 
60 
 
A prática de antropomorfismo está em mensagens de erro na tela de alguns produtos digitais. 
Vejamos que as carinhas com sentimento humanizam as falhas: 
 
Figura 30 – Antropomorfismo Google 
 
Fonte: Youtube. 
 
 
Fonte: Google Chrome. 
 
 
 61 
 
É uma forma de empatia e espelha uma gestão inteligente e centrada nas emoções do 
usuário. É como dizer ao cliente que errar é humano, e isso minimiza a negatividade associada 
a um erro na interface. 
Outro caso de antropomorfismo são os robôs que respondem as pessoas em sistemas de 
computador. Os chatbot são inteligências artificiais que respondem dúvidas do usuário. É como se 
estivéssemos falando com uma pessoa de fato, e isso aproxima bastante o cliente. Os personagens 
têm nome, linguagem e gestual naturais. A Júlia, atendente virtual da companhia aérea Latam, é 
um exemplo disso: 
 
Figura 31 – Antropomorfismo Latam 
 
Fonte: Latam.com 
 
O zoomorfismo segue a mesma lógica, mas atribui características de animais a objetos ou a 
seres humanos. Igualmente do grego, tem origem nas palavras zoo (animal) e morfismo (formas). 
Essa prática também é adotada por sistemas e marcas no campo digital e na publicidade. Associações 
com o mundo animal são feitas em comparações de efeito, tal como “forte como leão” e “sagaz 
como uma raposa”. 
 Desse modo, é possível apreender que o design emocional pode ajudar a sua empresa a se 
conectar com o público por meio de técnicas sedutoras e empáticas com o poder, até mesmo, de 
transformar negatividade em positividade, tal qual pudemos observar neste módulo. A emoção 
possui papel preponderante na tomada de decisões do usuário no marketing digital. 
 
 
62 
 
Mecânica do olhar 
O ser humano percebe o mundo pelos sentidos: visão, audição e tato. Graças a eles, o usuário 
de um sistema interativo percebe a informação, a armazena na memória e a processa usando o 
raciocínio dedutivo ou indutivo. 
A maioria da interação homem-computador, no caso do marketing digital, ocorre por 
meio do sentido visual. O olho e o cérebro trabalham juntos para receber e interpretar a informação 
visual baseada em tamanho, forma, cor, orientação e movimento. Uma comunicação visual 
adequada é elemento chave de uma interface amigável. 
 
Cones e bastonetes 
Os cones são as células do olho humano que reconhecem as cores, enquanto os bastonetes são 
aqueles que têm a capacidade de reconhecer a luminosidade. A ausência ou deficiência nos cones dá 
origem ao daltonismo. Os bastonetes, por sua vez, são células fotorreceptoras da retina que conseguem 
funcionar mesmo com pouca luz, por isso, a sua importância para a visão noturna. São também usados 
na visão periférica e têm esse nome devido à forma alongada e cilíndrica. 
Os bastonetes são cem vezes mais sensíveis à luz do que os cones, mas detectam apenas tons 
de cinza, sendo a identificação das cores tarefa mesmo desses últimos. A ativação de um bastonete 
se dá por um processo chamado hiperpolarização. A visão em alta resolução é responsável pela fóvea, 
que é a parte que consegue enxergar em alta definição. Essa região corresponde a apenas um 
centésimo da área da retina. 
 
Figura 32 – O olho humano 
 
 
 
 63 
 
No entanto, o que importa compreender o funcionamento do olho humano para quem 
trabalha no campo digital? Importa muito! Variadas técnicas exploram as nossas capacidades 
oculares em nome de potencializar os resultados esperados em um projeto. 
Tendo isto em mente, sabemos que o cliente, ao se deparar com uma tela, ativa a fóvea para 
percorrer o todo, mas intensifica o seu uso para encontrar partes de interesse; sem, contudo, deixar 
de ter noção da totalidade apresentada. 
Há no mercado um aparelho chamado eye traking; em português, “rastreador de olhos”. Ele 
mapeia o percurso da visão do usuário diante de uma interface, gerando uma série de coordenadas 
como relacionadas a quais recursos são vistos prioritariamente, com que rapidez o olho se move e 
quais pontos da tela não chamam atenção. As duas primeiras figuras mostram telas orientadas pelo 
eye tracking e a terceira é uma visão sendo monitorada: 
 
Figura 33 – Eye tracking 
 
Fonte: feng-gui.com 
 
 
 
64 
 
Figura 34 – Funcionamento do Eye Tracking 
 
Fonte: feng-gui.com 
 
Figura 35 – Óculos Eye Tracking 
 
Fonte: https://www.ergoneers.com 
 
 
 
 65 
 
São altos os custos que envolvem operações como essa. Para iniciar o processo, existem dois 
sites de versões gratuitas que possuem algoritmos que tentam interpretar comportamentos da visão 
humana perante uma tela. Eles emulam milhares de usuários, instantaneamente, com um clique, e 
são eficazes para validar ideias de design e UX em qualquer fase do desenvolvimento de um produto. 
Ainda que tenham margem de erro a se considerar, vale o teste: 
 www.eyequant.com e 
 www.feng-gui.com. 
 
Memória 
A memória humana é uma máquina fantástica, que guarda informações visuais, sonoras, olfativas, 
gustativas e de sensações. Essa capacidade é associada também a referências que construímos ao longo 
da vida, nos inserindo em mecanismos de codificação, retenção e recuperação. 
Para a codificação, o cérebro faz associações de cunho sensorial-motor em busca de uma 
percepção do real pelos sentidos. No segundo processo, ocorre a memória de curto prazo, que recebe 
as informações já codificadas para que sejam imediatamente utilizadas, descartadas ou armazenadas. 
O mecanismo terceiro, responsável pela memória de longo prazo, opera a capacidade ilimitada de 
armazenamento. Em um esquema elaborado por Dividino e Faigle, podemos observar como a 
memória funciona: 
 
Figura 36 – Funcionamento da memória 
 
Fonte: adaptado de Dividino e Faigle (2011). 
 
Artigo famoso na área se chama “The magic number 7”, publicado por Miller em 1965, 
abordando o armazenamento na memória de curto prazo por meio de uma experimentação. O 
autor pediu aos sujeitos do teste que ouvissem sequências aleatórias de dígitos para depois recordá-
las. O resultado é que as pessoas conseguiam se lembrar de sete dígitos em média (por vezes, sete; 
outras vezes, sete mais dois ou sete menos dois dígitos). 
 
 
66 
 
Já era conhecido que a nossa capacidade de armazenamento imediato é limitada. Com esse 
teste, Miller nos dá uma noção aproximada de em que medida se dá essa limitação. O autor 
observou, ainda, que a variação de dígitos retidos tem a ver com o grau de familiaridade do sujeito 
com o tema apresentado. 
 Fazendo paralelo com os nossos estudos na área digital, podemos nos precaver, porexemplo, 
de tentar não ultrapassar sete itens no menu de um website ou aplicativo, evitando assim uma 
sobrecarga de informação, que pode atrapalhar o produto em termos de usabilidade. 
 No entanto, a memória de longo prazo funciona de modo diverso. Ela é ativada, 
principalmente, pela emoção e repetição. Em relação à repetição, quando reproduzimos uma 
atividade, estamos mais aptos a fixar aquela informação. Quanto mais vezes repetimos, mais essa 
capacidade se fortalece. 
Aspectos emocionais também afetam a memória de longo prazo. Vale destacar que esse é um 
assunto importante quando se fala de cognição, que se relaciona diretamente com o processo de 
conhecimento e a sua aquisição. Mais uma vez, fazendo relações com a seara digital, vamos avaliar como 
é possível aproveitar cargas de cognição de um usuário e a sua memória a favor de resultados. 
Segundo autores como Steve Krug, Cybis, Rogers e Nielsen, a forma como se posicionam os 
elementos em uma interface na internet e alguns desenhos como o carrinho de compras deve seguir 
sempre o mesmo padrão para que o cliente não se perca ao navegar por um site, naquilo que ele 
chama de convenção. 
A ideia é facilitá-lo ao máximo a encontrar elementos na página, melhorando a performance 
de uma navegação em geral. A seguir, veja o posicionamento de Nielsen a respeito: 
 
“Os carrinhos de compra são atualmente tão comuns nos sites de comércio 
eletrônico que passaram de uma metáfora a um padrão de interface (...). 
Depois que algo passa ser suficiente e amplamente utilizado, torna-se uma 
convenção de interface e as pessoas simplesmente passam a saber o que 
esperar (...) Na verdade, o usuário não precisa aprender nada desde que o 
elemento se comporte exatamente da mesma forma que o usuário está 
acostumado” (NIELSEN, 2002). 
 
A essa ideia, Steve Krug (2008) acrescenta: 
 
“(...) todos nós aprendemos a ler um jornal. Não as palavras, mas as 
convenções. Aprendemos, por exemplo, que uma sentença em letras muito 
grandes é geralmente uma manchete que resume a história sob ela e que o 
texto abaixo de uma figura informa do que ou de quem é a foto ou – se for 
uma letra muito pequena – é o crédito da foto, que informa quem a tirou 
(...) conhecer as diversas convenções da formatação da página torna mais 
 
 67 
 
fácil percorrer um jornal...(...) quando começamos a viajar descobrimos 
que todos os jornais são iguais (com pequenas variações) (...) cada meio de 
comunicação desenvolve convenções (...) a web tem muitas delas (...) se 
você não for usar uma convenção web já existente, precisa estar seguro de 
que o que você estiver usando como substituto seja tão claro e 
autoexplicativo que não haja uma curva de aprendizagem” (KRUG, 2008). 
 
A chamada convenção melhora a usabilidade de sites e a experiência do usuário. Uma vez que esse 
aprende a utilizar um sistema e sabe de antemão onde encontrar cada informação, ele aproveita essa 
memória e sua carga cognitiva para realizar outras navegações parecidas em sites similares. 
A dinâmica é: aprende-se onde estão os dados, navega-se bem em qualquer site e experimenta-se 
agradável aquisição de informações em qualquer um deles. No exemplo abaixo, uma vez que 
aprendemos a navegar pela Amazon (líder mundial no comércio eletrônico), também conseguimos 
navegar pelo site Americanas.com, Casas Bahia, Submarino e Ponto Frio. E o inverso também atua: 
quando se aprende a navegar pelo site Americanas, consegue-se navegar pela Amazon. 
 
Figura 37 – Comércio Eletrônico 
 
 
 
 
 
 
 
 
Este módulo aborda, conceitualmente, o que é chamado de “entregáveis” em UX (user experience), 
em português: experiência do usuário. Nesse contexto, serão apontados variados exemplos desse 
instrumento – vinte, no total, assim como boas práticas na área. Vale ressaltar que abordagens nesse 
conteúdo são aplicáveis ao Marketing, seja digital ou não. No entanto, o foco deste material refere-se a 
concepções de projetos digitais e a todas as suas implicações na web e na internet. 
Os entregáveis sobre os quais discorreremos são: wireframe, protótipo, fluxograma, mapa do 
site, storyboard, persona, inventário de conteúdo, benchmarking, grupo focal, pesquisa quantitativa, 
pesquisa quantitativa, modelo conceitual, definição das métricas de sucesso, card sorting, controle 
de qualidade, análise de acessibilidade, recomendações de SEO, testes A/B, eyetracking, análise de 
métricas e análise heurística. 
Ao final deste módulo, você encontrará um quadro com resumo das principais noções de 
cada entregável detalhado ao longo do conteúdo a seguir. 
 
O que são entregáveis? 
O termo entregável é largamente utilizado em projetos no mundo digital. De sentido 
aparentemente explícito (aquilo que se pode entregar), o termo revela no universo UX a ponte entre 
o abstrato e o palpável na relação cliente – profissional. Isso porque trabalhar com a experiência do 
usuário implica lidar com emoções, sentimentos e tudo aquilo relacionado ao que existe de íntimo 
no cliente e em seu público-alvo. Podemos dizer que aquilo que se classifica como entregável seria 
nada mais do que a “materialização” de algo que se mostra intangível. 
 
MÓDULO IV – ENTREGÁVEIS E BOAS 
PRÁTICAS DE UX 
 
70 
 
Uma mercadoria tangível pode ser, por exemplo, pegada, quebrada, desfeita, vendida, revendida, 
etc. Já a felicidade, o amor e o entusiasmo, não. Desse modo, é tarefa do profissional de UX conferir 
materialidade a essa abstração por meio do que podemos chamar de produtos. Para ilustrar, 
consideremos uma empresa que obteve aumento de vendas em determinado mês por motivo 
desconhecido. Uma pesquisa que mede o grau de satisfação do consumidor aponta que ele está mais 
entusiasmado com o serviço oferecido comparado ao mês anterior. O resultado da pesquisa é um 
entregável, uma vez que foi capaz de medir, tornar palpável a emoção do usuário. 
No entanto, nem sempre o entregável tem essa característica, já que também pode representar 
dados aparentes e concretos. A fim de viabilizar entregáveis de qualidade, o melhor entendimento 
possível das percepções do cliente são a essência deste trabalho. Para isso, uma série de pesquisas são 
desenvolvidas. O Nielsen Norman Group (NNGroup) publicou, em 2015, uma lista dos entregáveis mais 
utilizados em UX. O artigo na íntegra está disponível em https://www.nngroup.com/articles/common-
ux-deliverables. 
O estudo mostra a incidência de entregáveis por produto. Estão no topo da lista wireframe 
estático, protótipo interativo, fluxograma e mapa do site como instrumentos mais eficazes na 
comunicação com o cliente. Vejamos a seguir: 
 
Figura 38 – Entregáveis 
 
Fonte: adaptado de NNGroup, 2015. 
 
Tendo como base a lista da NNGroup e pensando também em outros entregáveis, vamos explicar 
algumas boas práticas comuns e úteis em UX, indicando como adotá-las em um projeto digital. Outros 
autores, profissionais e blogueiros já debruçaram sobre esse assunto, como Teixeira (2018) e muitos 
outros. Não temos a pretensão de esgotar esse tema, mas contribuir, de uma forma geral, mesmo 
sabendo que a cada momento técnicas novas são desenvolvidas e aprimoradas. 
 
 71 
 
Wireframe 
Elaborar um desenho é, certamente, uma maneira simples de apresentar o projeto de uma 
página de internet, software ou aplicativo. É uma forma eficiente de se comunicar com o cliente, 
permitindo-o visualizar as ideias, não limitando seu entendimento apenas pela comunicação verbal. 
Seja desenhado à mão ou por meio de programas de computador, essa estrutura é chamada de 
wireframe, prestigiada ferramenta no Web Design. 
Textos, figuras e vídeos são alguns dos itens que compõem essa representação que situa o 
espaço de cada elemento na tela, antevendo o olhar do usuário. É importante destacar a distinção 
entre wireframes e protótipos. Esses últimos, assim como layouts de sites, têm caráter funcional, 
tendo botões clicáveis por exemplo, e os componentes gráficos e de tipografia são levados em conta. 
No entanto,os wireframes limitam-se à estruturação e à esquematização. 
A característica de não se pretender funcional é, aliás, imprescindível na composição de um 
wireframe, uma vez que é importante para o designer simular sem ser distraído por cores ou 
definições de tipografia, para que a disposição dos itens seja relevante por si só. 
Uma vez estruturado e esquematizado, o planejamento do layout se desenvolve com mais 
facilidade, tornando ainda mais confiáveis as chances de serem atendidas as expectativas quanto à 
maneira que se espera que o usuário processe a informação. Ou seja, primeiramente, define-se a 
posição das informações (wireframe), para depois dar vida a cada uma delas nos seus devidos lugares. 
E tendo sempre em mente que proporcionar a melhor experiência para o usuário é, sem dúvida, o 
objetivo principal a ser alcançado na construção de uma página na internet. 
A seguir, vejamos exemplos de wireframes: 
 
Figura 39 – Wireframe 
 
Fonte: balsamiq.com 
 
72 
 
 
Fonte: Shutterstock. 
 
 
Fonte: https://www.shutterstock.com/pt/image-photo/website-desinger-creative-planning-application-development-
1067423849?src=RsN82S9KC6GjQ6qvASOy5w-1-4 
 
 
 73 
 
 
Fonte: Shutterstock. 
 
Mesmo quem não possui experiência com softwares de web design pode experimentar esboçar 
páginas. Listamos alguns serviços para criação de wireframes: 
 https://www.mockflow.com; 
 https://www.hotgloo.com; 
 https://www.axure.com; 
 https://balsamiq.com e 
 https://cacoo.com. 
 
Protótipos 
Sabe o wireframe abordado acima? Imagine se pudéssemos dar vida a eles em uma interação 
possível? Pois é! Isso é o protótipo, um conjunto de telas em que se pode clicar e navegar entre elas, 
assim como na experiência de um produto finalizado. Essa ferramenta pode ser exibida em testes 
de usabilidade com o cliente e auxilia também a visualização para ajustes de funcionalidades junto 
aos desenvolvedores e desingers, que configuram o chamado público interno. 
Os protótipos podem ser de diferentes níveis – de baixa a alta fidelidade ao uso de wireframes – 
podendo chegar a ser praticamente uma emulação do projeto real. Nesse caso, por ser uma versão mais 
próxima da peça final, o protótipo concede maior clareza à criação, para que rotas sejam redefinidas, 
se necessário, e para que se possa aprimorar as funções antes da produção definitiva. 
 
 
 
74 
 
Ferramentas variadas viabilizam a construção desses protótipos. Vejamos algumas: 
 https://www.axure.com; 
 https://balsamiq.com; 
 marvelapp.com; 
 popaapp.com e 
 https://www.invisionapp.com. 
 
Fluxograma 
Abordamos o wireframe, o protótipo e, agora, veremos a mais um exemplo de entregáveis: 
o fluxograma. Um fluxograma ajuda a entender melhor etapas e processos por meio de 
diagramas e são bastante adotados em planejamentos diversos, estudos e documentações, em 
que setas e caixas retangulares, circulares ou ovais, assim como muitas outras formas, demarcam 
os passos de fluxo e sequência. 
Assim como os wireframes, os fluxogramas podem ser desenhados à mão em esquemas simples 
ou elaborados em computador, sendo usados em situações técnicas ou não. Em UX, funcionam 
como mapas delimitando hierarquias dos processos. A navegação de um site, por exemplo, é 
abordada de forma macro, facilitando a compreensão da sistemática de cada tela, assim como a 
transição entre elas. 
 Considerado o olhar realista de um projeto, os fluxogramas revelam, facilmente, os caminhos 
de navegação e proporcionam um olhar mais assertivo acerca de trajetórias objetivas para a 
visualização de seções. 
 
 
Fonte: https://www.shutterstock.com/pt/image-photo/organization-business-plan-259917521. 
 
 
 75 
 
Mapa do site 
A lógica de construção de um mapa do site é bem próxima à de um fluxograma, com a 
diferença de que o mapa representa a disposição das informações com as urls principais, mostrando 
quais serão lidas em ordem prioritária, em uma estrutura de links. Podemos dizer que o mapa é o 
fluxograma de navegação de um site. 
É comum ser elaborado no início de um projeto e aprimorado no decorrer das etapas de 
acordo com as demandas. Além do universo UX, o mapa do site é um entregável amplamente 
utilizado em Arquitetura da Informação – área especializada em categorizar toda a informação de 
um site ou software de modo a facilitar a usabilidade e encontrar, o mais rapidamente possível, 
aquilo que se procura naquele espaço virtual. 
 Como pode ser visto na ilustração a seguir, o mapa do site classifica as várias telas 
hierarquicamente: 
 
 
Fonte: Shutterstock. 
 
Storyboard 
De natureza lúdica, em formato de desenho, esse entregável em UX se assemelha a quadrinhos 
pelo fato de ser uma história contada por quadros em sequência mostrando como um produto pode 
ser utilizado. Chamado também de esboço sequencial, o objetivo principal é explicar como e onde 
o produto se aplica, ilustrando as cenas-chave do seu uso e como será o ambiente a ser desenvolvido, 
o contexto do consumo. 
 
 
76 
 
Storyboards podem ser feitos à mão ou utilizando-se de sites e aplicativos. Vejamos alguns deles: 
 https://www.canva.com; 
 https://www.pixton.com; 
 http://www.toondoo.com e 
 https://www.storyboardthat.com. 
 
A seguir, veja também exemplos de storyboards: 
 
 
Fonte: Shutterstock. 
 
 
Fonte: Shutterstock. 
 
 77 
 
Não é necessário ter um belo traço ou ser desenhista para passar uma ideia, basta riscar, 
conforme o exemplo a seguir: 
 
Figura 40 –storyboard simples 
 
Fonte: adaptado de http://scottwheelwright.com/wealth-of-time.html. 
 
Como criar um storyboard? 
Para criar um storyboard, é essencial saber que, em geral, ele possui envolvidos (pessoas, coisas, 
animais ou empresas), sequência de ações e objetivos. Três passos principais orientam a sua criação: 
a) Trace uma linha do tempo com as ações mais importantes da história. 
b) Identifique as cenas-chave. Se possível, faça um brainstorming. A ideia não é tentar recriar 
a experiência do usuário inteiramente por uma sequência de quadros, mas demonstrar as 
partes cruciais que irão captar a contextualização de um uso, as suas vantagens e ações a 
serem executadas, além dos porquês para elas. 
c) Descreva o que cada quadro irá mostrar e as ações de cada ilustração. 
 
Persona 
Para uma empresa, compreender o seu consumidor é, sem dúvida, uma das chaves rumo ao sucesso 
na manutenção e conquista de novos clientes. Na área de publicidade e marketing, é comum utilizar o 
conceito de persona, que pode ser definida como uma representação fictícia ou um personagem que reúne 
as características de determinado público-alvo, baseadas em dados reais sobre faixa etária, gênero 
predominante, estilo de vida, comportamento, etc. Vejamos um exemplo: uma marca de acessórios de 
moda feminina tem como público-alvo mulheres de idade entre 28 e 45 anos, ousadas, vaidosas, de estilo 
exuberante, que gostam da mistura de cores, pertencentes à classe C. 
 
78 
 
Ao contratar um profissional especialista em usabilidade, a marca recebeu como entregável a 
criação de uma persona, que auxilia na avaliação e redefinição de cada item disposto no seu e-
commerce. Desse modo, o trabalho de UX simulou que entrou no site para fazer uma compra a 
seguinte personagem: 
 
Franciele Silva, 37 anos, trabalha em supermercado perto de casa e está em busca de um 
colar na cor laranja para ir ao casamento da sua sobrinha no próximo fim de semana. Como 
já gastou com o vestido, não quer se exceder no valor do acessório. Embora esteja 
preocupada com as contas, nem pensar em dispensar o colar! Será peça fundamental para 
compor o seu visual. Na hora do almoço de uma segunda-feira, ela acessa o site da marca 
pelo celular e inicia a sua busca, animada para a escolha do acessório perfeito com a ajuda 
das colegas de trabalho. 
 
Repare que é preciso ter cuidado no uso das palavras público-alvo e persona, já que elas não 
são sinônimas. A primeira engloba o conjunto de aspectospeculiares a determinado comprador, 
enquanto a segunda é a representação do cliente típico. 
 A adoção da persona pode parecer uma brincadeira sem sentido. No entanto, na prática, 
quando personificamos o consumidor, damos um nome a ele e adaptamos a sua história, a persona 
pode ajudar de modo singular o profissional de UX, pois influencia na manutenção do usuário em 
mente para a tomada de decisões, redefinições de rotas e soluções de problemas. 
 Podemos dizer que a empatia seria o segredo do sucesso das personas nos processos de 
usabilidade no mundo digital, capaz de envolver a equipe, algo que os dados concretos e “frios” nem 
sempre conseguem. Na sequência, está um exemplo de formulário usado para esse tipo de entregável: 
 
 
 
 79 
 
Quadro 3 – Persona 
criação de persona 
 
 nome 
idade 
estado civil 
trabalho 
educação 
estilo de vida, valores e 
lazer 
 
preferências musicais 
uso de tecnologia, 
celular e internet 
 
objetivos pessoais 
objetivos profissionais 
descrição do seu dia 
influenciadores 
como ele usará o app, 
site ou produto digital? 
 
 
Também é possível criar uma persona em sites especialmente voltados para isso, como este: 
https://xtensio.com/user-persona/. 
 
80 
 
Inventário de conteúdo 
Pela essência do nome, pode parecer que se trata de uma burocracia chata e sem utilidade, 
mas o inventário de conteúdo é um eficiente repositório das informações em tela. Esse instrumento 
é um verdadeiro acervo de tudo o que efetivamente existe e também está previsto em todas as 
páginas de um site, como textos, imagens e vídeos. Desse modo, é possível ter uma visão holística 
da página, o que agrega qualidade na organização da informação. 
O recurso do inventário é muito usado em sites com grande volume de dados e ajuda a 
localizar conteúdo duplicado, sistematizar taxonomia, controlar vocabulário e favorecer a 
encontrabilidade. Isso mesmo! Essa palavra existe em UX. 
 
Benchmarking 
Em ações de Marketing Digital, uma etapa importante na concepção de um projeto, assim 
como na manutenção de um produto ou serviço é conhecer bem a concorrência. Ou seja, saber e 
estudar detalhes sobre empresas e marcas que podem influenciar decisões do seu público-alvo e que 
competem diretamente com você. A essa pesquisa dá-se o nome de benchmarking, um 
indispensável instrumento de gestão, sendo, portanto, um entregável de peso! 
O termo vem do inglês, em que benchmark quer dizer referência. Trata-se de se fazer uma 
análise a fundo das práticas encontradas no mercado em setores afins, para se extrair boas ações 
(inspirações para replicação) e também aquelas que não resultam sucesso, a fim de entender os 
motivos e planejar evitá-las. 
 Ao se praticar o benchmarking, o projeto ganha força para “vencer” os concorrentes, dando 
insights para novas ações baseadas no que já existe. É um aprendizado, que demanda dedicação e 
muito estudo. 
 
Grupo focal 
Uma forma interessante de discutir um projeto é realizar grupos focais e reuniões, em geral, 
em grupos pequenos de representantes do público-alvo, que apresentam as suas percepções em 
relação ao produto em fase de desenvolvimento. Por ser focado diretamente no consumidor final, 
tem potencial de trazer boas contribuições. É de praxe a presença de um moderador, que assegura 
a abordagem dos assuntos envolvidos e também a expressão das opiniões de todos os participantes. 
É relativamente baixo o custo da aplicação de grupo focal. 
 
 
 81 
 
 
Fonte: Shutterstock. 
 
Pesquisa quantitativa 
Para a compreensão do público-alvo ou para abordar as opções de design de um projeto 
digital, a pesquisa quantitativa é eficiente e bastante apropriada. No entanto, existem resistências a 
essa aplicação porque os resultados obtidos podem ser incompatíveis com a realidade caso o produto 
tenha sido mal desenhado. Além disso, se a distribuição da pesquisa não for bem-feita, essa pode 
acabar sendo respondida por grupos que não se enquadram no público de fato, o que também 
acabaria por comprometer o aproveitamento. 
É importante fazer um teste prévio, para direcionar ao cliente somente em seguida. Revisar 
quantas vezes for necessário também é uma boa dica para que tudo saia a contento. Aconselhamos 
ferramentas que facilitam esse trabalho como Survey Monkey e Google Docs. 
 
Modelo conceitual 
Representa a visão do funcionamento de um produto em termos conceituais, apresentando 
de modo simples como esse pode ser usado. É comum o modelo conceitual ser adotado nas 
primeiras etapas do projeto digital, a fim de assegurar as noções e diretrizes associadas a todos os 
aspectos que envolvem a sua construção. Na prática, essa apresentação pode ser em texto ou 
imagem, como um gráfico ou um fluxograma. 
 
 
82 
 
Definição das métricas de sucesso 
É uma listagem dos parâmetros que serão utilizados para medir se o projeto está alcançando 
os objetivos traçados. É importante estar permanentemente consultando essa lista para nortear ações 
e redirecionar rotas. São exemplos de parâmetros: número de seguidores na página da rede social, 
de visitas ao site e de compartilhamentos. 
 
Card sorting 
Contribui para a compreensão do modelo mental do projeto, no que tange à tomada de 
decisões referentes a agrupamentos de conteúdos e no que se refere também a melhor forma de se 
fazer a taxonomia, ou seja, de nomear os grupos. Essa técnica serve para observar como o público 
classifica informações pontuais na sua mente. 
A dinâmica é a seguinte: 
 
São disponibilizados, a representantes dos usuários, uma série de pequenos cartões que 
contêm conteúdo de um site em desenvolvimento, por exemplo. Tais conteúdos devem 
organizar os cartões, levando-se em conta a praticidade e simplicidade de acordo com o seu 
próprio entendimento sobre o assunto. Para isso, cartões que representam categorias 
também são fornecidos, sendo necessário distribuí-los pelas classificações. 
 
 
Fonte: Shutterstock. 
 
 
 83 
 
Para ilustrar a respeito da influência do card sorting na taxonomia de um produto, 
consideremos que a aplicação da técnica aponte que o público tem por hábito chamar o serviço de 
atendimento ao cliente – SAC de “fale conosco”. Sendo assim, caso o projeto digital inicialmente 
tenha previsto nomear o setor como SAC, automaticamente não fará mais sentido mantê-lo assim, 
devendo ser alterado para “fale conosco”. 
O cuidado com a taxonomia é de grande valia para serem criados o menu de navegação e 
também o sistema de busca. Por isso, é tão importante envolver o usuário nesta etapa. Em suma, é 
uma forma de validar o trabalho de usabilidade e arquitetura da informação, na certeza de que 
jamais se deve adivinhar a mente do público, faça testes com ele! O card sorting é um entregável 
para essa missão. 
 
Controle de qualidade 
Tem a função de verificação. Todos os links funcionam? O fluxo de dados está correto? Todos 
os contextos de uso previstos foram implantados? Nota-se que o controle de qualidade deve ser feito 
antes, durante e depois do projeto inaugurado. 
 
Análise de acessibilidade 
Em linhas gerais, avalia o grau de facilidade de acesso ao produto, como: está disponível a 
qualquer hora e local? Por meio de qualquer visitante – seja qual for o sistema operacional que esteja 
usando? Pode ser acessado por todos? Todos mesmo? Isso significa abranger usuários de diferentes 
condições visual, auditiva, mental, de motricidade, além de social, econômica e cultural. 
 
UX Writing 
Entre todas as partes que compõe um produto digital, o texto é o destaque deste item, pelo 
trabalho de UX Writing – redação em UX, na língua portuguesa –, um entregável em que a escrita 
apresenta técnica voltada para a área. São tarefas comuns do UX writer a redação para sites, aplicativos, 
posts em redes sociais, e-mail marketing, notificações, além de textos para compor botões e mensagens 
de erro. Essas produções textuais devem basear-se nas premissas de UX, buscando proporcionara 
melhor experiência ao usuário com o uso das palavras certas e bem colocadas. A fim de garantir o 
cumprimento desse objetivo, sabemos a importância de se conhecer bem o público para o qual se 
escreve, mas existem técnicas gerais de UX Writing inerentes a espaços digitais. Vamos a elas: 
 Escreva de modo claro e objetivo, priorizando a ordem direta (sujeito + verbo + complementos). 
 
84 
 
 Tenha em mente que o texto precisa ter caráter funcional, garantindo que seja inteiramente 
compreendido pelo público da marca. Lembre-se: é para ele que se escreve. Antecipe-se 
prevendo as eventuais dúvidas do público e molde a sua redação de maneira a saná-las. 
 Não deixe de lado a criatividade. É necessário mesclá-la com a funcionalidade. As emoções 
têm significativa importância para engajar o usuário em torno de um produto. 
 Siga o manual de redação da empresa. Se esta ainda não o possui, escreva. Neste caso, o 
manual deve ser uma das primeiras entregas de UX Writing. É fundamental que haja um 
padrão na escrita, conferindo unidade, personalidade e consistência à marca. O profissional 
da área precisa se orientar por um guia de estilo adequado. É interessante que constem no 
documento as recomendações de SEO, assunto abordado no próximo item de entregáveis. 
 Explore a persona. Esta pode ser boa aliada para embasar a produção de textos adotando-
se o tom mais apropriado ao cliente. 
 Aplique a pirâmide invertida, um conceito jornalístico de hierarquia da informação, para 
que o público tenha as respostas para: O quê? Quem? Onde? Quando? Como? Por quê? 
Essas perguntas norteiam o chamado lead – conduzir, em português – no jornalismo. O 
lead é a parte que justamente conduz as informações mais importantes e que, por isso, 
devem estar no começo do texto. Assim, o UX writer precisa ter em mente que o usuário 
deve entrar em contato com tais informações já nos primeiros momentos da experiência 
com um produto digital. Veja a ilustração da pirâmide invertida: 
 
Figura 41 – Pirâmide invertida 
 
 
Além da atenção a essas orientações, o profissional da área deve levar em conta a aplicação de 
conceitos relacionados à arquitetura da informação, ao design e ao marketing. O UX writer não 
somente é responsável por criar textos, como também por revisar e validar aquilo que outros 
especialistas escrevem, como os de UI, engenharia, vendas, produto, etc. O sucesso do redator em 
experiência do usuário está associado à sua atuação conjunta em equipe multidisciplinar. 
 
 85 
 
Recomendações de SEO 
A sigla vem do inglês Search Engine Optimization, que significa, em português, “otimização 
para sistemas de busca”. As recomendações baseadas em SEO são um entregável cuja finalidade é 
contribuir para que a marca, o produto ou o serviço tenha relevância nos buscadores na internet, 
isto é, para que seja encontrado facilmente no Google por exemplo. 
Normalmente, esse trabalho aponta palavras-chave associadas ao produto, de modo que tais 
termos sejam citados com frequência pelos idealizadores e executores da página, a fim de que essa 
apresente bons resultados orgânicos, que quer dizer quando se alcança significativo tráfego no site 
sem se utilizar de mecanismos pagos para isso, como a publicidade. 
 
Testes A/B 
É um modo interessante e inteligente de se chegar a melhores opções de usabilidade de um 
projeto. O teste mais usado funciona assim: metade dos representantes dos usuários ficam diante 
de determinada versão de tela (versão A), enquanto a outra metade fica diante da versão B. E, então, 
começam os testes. 
 O desempenho de ambos os grupos diante das suas telas é medido e comparado. A tela que 
protagonizar a melhor performance torna-se um modelo a ser implantado. Recomenda-se o uso 
constante da técnica de testes A/B, não somente no desenvolvimento do produto, mas para a sua 
evolução contínua. 
 
Eyetracking 
É uma técnica que mapeia o olhar do usuário sobre a interface; uma maneira de saber para 
que pontos da tela sua atenção é mais atraída. Desse modo, é possível ter mais clareza para 
definições de layout, modos de navegação e interação, levando mais facilidade e atratividade à 
experiência com o produto. 
São altos os custos que envolvem operações como essa. Para iniciar o processo, existem dois 
sites de versões gratuitas que possuem algoritmos que tentam interpretar comportamentos da visão 
humana perante uma tela. Eles emulam milhares de usuários, instantaneamente, com um clique e 
são eficazes para validar ideias de design e UX em qualquer fase do desenvolvimento de um produto. 
Ainda que tenham margem de erro a se considerar, vale o teste: 
 www.eyequant.com e 
 www.feng-gui.com. 
 
 
86 
 
Análise de métricas 
É a avaliação relacionada a números de acesso, navegação e interação, para que se estude 
soluções que indiquem aprimoramento ou manutenção das telas em funcionamento. Por exemplo, 
a partir desse entregável, mudanças de usabilidade podem ser recomendadas ao cliente caso a 
navegação apresente elevada taxa de rejeição, a interação esteja quantitativamente abaixo do 
esperado ou os acessos não apresentem números animadores. 
 
Análise heurística 
São análises rápidas que podem ser observadas como um conjunto de “boas práticas” de 
usabilidade de um site ou interface, atreladas a conceitos que auxiliam a determinar uma experiência 
do usuário clara e intuitiva. 
Vale destacar que “bom” é relativo, já que tudo depende do público-alvo, e que cada público 
demanda formas singulares de elaboração e manutenção de um projeto digital. Desse modo, as 
chamadas boas práticas que uma análise heurística pode trazer não podem ser assimiladas como 
regra, e sim como ações a serem observadas. 
Podemos citar um conhecido estudo nesse tema, que são as heurísticas de Jakob Nielsen – o 
mundialmente renomado cientista da computação e analista de usabilidade, que se especializou em 
analisar a interação entre homem e máquina. A seguir, vejamos as suas dez heurísticas: 
a) Feedback 
 o sistema deve informar ao usuário, continuamente, o que ele está fazendo e 
 o limite de tempo para manter a atenção do usuário são 10 segundos. 
 
b) Linguagem do usuário 
 a linguagem adotada deve ser baseada nas vivências do usuário, e não orientada ao 
sistema, e 
 as informações devem estar organizadas conforme o modelo mental do usuário. 
 
c) Saídas claramente demarcadas 
 o usuário controla o sistema, podendo abortar uma tarefa sempre que quiser ou desfazer 
uma operação e retornar ao estado anterior. 
 
d) Consistência 
 um mesmo comando ou ação deve ter sempre o mesmo efeito e 
 uma mesma operação precisa estar na mesma localização e deve ser formatada ou 
apresentada da mesma maneira para facilitar o reconhecimento. 
 
 87 
 
e) Prevenção de erros 
 identificar as situações que mais acarretam erros e modificar a interface para que não 
voltem a acontecer. 
 
f) Minimização da sobrecarga de memória do usuário 
 os elementos de diálogo devem estar facilmente dispostos, de modo a permitir que o 
usuário faça as suas escolhas sem precisar lembrar dos comandos. 
 
g) Atalhos 
 importantes para usuários experientes executarem as operações mais rapidamente, 
recorrendo a abreviações, teclas de função, duplo clique no mouse ou função de volta 
em sistemas hipertexto, e 
 atalhos servem ainda para recuperar informações que estão em profundidade na árvore 
navegacional a partir da interface principal. 
 
h) Diálogos simples e naturais 
 apenas a informação exata que o usuário precisa em determinado momento deve ser 
apresentada – nem mais, nem menos – e 
 a sequência da interação e o acesso aos objetos e às operações devem obedecer à lógica 
da maneira pela qual o usuário realiza as suas tarefas. 
 
i) Boas mensagens de erro 
 as mensagens de erro devem primar por uma linguagem clara e sem códigos, lembrando 
sempre que o ambiente em que vive o usuário, geralmente, não é compatível com o 
ambiente do arquiteto de informação; 
tais mensagens devem ajudar o usuário a entender e resolver o problema, e 
 jamais devem culpar ou intimidar o usuário. 
 
j) Ajuda e documentação 
 o ideal é que um software seja tão fácil de ser usado intuitivamente que não necessite 
de ajuda ou documentação. 
 se a ajuda se fizer necessária, ela deve estar facilmente acessível on-line. 
 
 
 
88 
 
Tabela resumo 
Após esse apanhado de variadas formas de entregáveis de um projeto digital, podemos 
considerar que é perfeitamente possível ser habilidoso e criativo no universo UX. Ajuste as entregas 
às necessidades de cada trabalho, compartilhe com o cliente no momento adequado e esteja atento 
às suas percepções. Não caia em redundâncias e troque ideias com a equipe, motivado por essa gama 
de ferramentas capazes de potencializar resultados promissores! 
A seguir, preparamos um quadro-resumo de cada entregável e as suas noções principais: 
 
Quadro 4 – Resumos de entregáveis 
entregáveis em UX noções principais 
wireframe estático, limita-se à esquematização 
protótipo navegável, experiência de produto final 
fluxograma transição tela por tela 
mapa do site fluxograma de navegação, hierarquia de urls 
storyboard esboço sequencial, história do uso do produto 
persona representação do cliente ideal 
inventário de conteúdo acervo do conteúdo de todas as páginas de um site 
benchmarking ação de análise da concorrência 
grupo focal reuniões com representantes do público-alvo 
pesquisa quantitativa auxílio na compreensão do público-alvo e do desing 
modelo conceitual apresentação dos conceitos de funcionamento do projeto 
definição das métricas 
de sucesso 
parâmetros para medir o alcance dos objetivos 
card sorting estabelecimento do modelo mental do usuário 
controle de qualidade 
verificação da fidelidade ao projeto previsto e conferência do 
seu funcionamento 
análise de 
acessibilidade 
avaliação do nível de facilidade de acesso ao produto 
ux writing redação especializada na experiência do usuário 
recomendações de SEO contribuição para relevância do produto nos sistemas de busca 
testes A/B comparação para se chegar à tela mais apropriada 
eyetracking mapeamento do direcionamento do olhar do usuário na interface 
análise de métricas análise de acessos, navegação e interação 
análise heurística sinalização do conjunto de boas práticas 
 
 89 
 
BIBLIOGRAFIA 
ABRADi – Associação Brasileira de Agentes Digitais. 2014. Guia de Serviços Digitais. Disponível 
em: http://www.guiadeservicosdigitais.com.br/. Acessado em: 26 set. 2014. 
 
AGNER, L. Ergodesign e arquitetura de informação: trabalhando com o usuário. Rio de Janeiro: 
Campus, 2007. 
 
BARBOSA, S.D.J.; SILVA, B.S. Interação homem-computador. 4. ed. ED Campos, 2010. 
 
CASTELLS, M. O Poder da comunicação. 1. ed. São Paulo: Paz & Terra, 2015. 
 
CASTELLS, M. The information age: economy, society and culture. 2 ed. Oxford: Wiley-
Blackwell, 2009. 
 
CHANDLER, C; UNGER, R. O guia para projetar UX – a experiência do usuário (UX) para 
projetistas de conteúdo digital, aplicações e web sites. 1. ed. Starlin Alta Consult, 2009. 
 
CHRISTIANE, G. Psicologia do consumidor e da propaganda. São Paulo: EPU, 2006. 
 
CUSIN, C.; BACHINI, C.; FLATSCHART, F. Open web platform. 1. ed. Rio de Janeiro: 
Brasport, 2013. 
 
CYBIS, W. BETIOL, A. FAUST, R. Ergonomia e usabilidade: conhecimentos, métodos e 
aplicações. São Paulo: Novatec; 2007. 
 
DAMÁSIO, A. O erro de Descartes. Lisboa: Publicações Europa América, 1995. 
 
DAMÁSIO, A. Em busca de Espinosa. São Paulo: Companhia das Letras, 2004. ISBN: 
9788535904901. 
 
DIVIDINO, R.; FAIGLE, A. Distinções entre memória de curto prazo e memória de longo prazo. 
Consultado a, [s.l.], 2004. 
 
DONDIS, D. A. Sintaxe da linguagem visual. São Paulo: Martins Fontes, 2007. 
 
 
90 
 
FERRARESSO, Henrique Luiz Perroni. Design e usabilidade: interação, satisfação e afetividade 
em objetos de aprendizagem. 2014. 156 f. Dissertação (mestrado) – Universidade Estadual Paulista 
Julio de Mesquita Filho, Faculdade de Arquitetura, Artes e Comunicação, 2014. 
 
FERREIRA, I. 2011. Os entregáveis da arquitetura da informação. Disponível em: 
http://webinsider.uol.com.br/2011/06/01/os-entregaveis-da-arquitetura-da-informacao/. Acesso 
em: 21 fev. 2015. 
 
GARRETT, J. J. The elements of user experience: user-centered design for the web. Thousand Oaks: 
New Riders Publishing, 2002. 
 
G1. Partida de motor por botão é relacionada a 28 mortes por acidente nos EUA, diz jornal | Auto Esporte 
| G1. 2018. Disponível em: <https://g1.globo.com/carros/noticia/partida-de-motor-por-botao-e-
relacionada-a-28-mortes-por-acidente-nos-eua-diz-jornal.ghtml>. Acesso em: 11 ago. 2018. 
 
GARRET, J. J. The elements of user experience: user-centered design for the web and beyond. 2. ed. 
[s.l.]: New Riders, 2010. 
 
GOMES, Ivo. 2008. Teste de usabilidade. Disponível em: http://www.ivogomes.com/. Acesso em: 
25 de novembro. 2013. 
 
GOTHELF, J.; SEIDEN, J. Lean UX. Sebastopol: O’Reilly, 2013. 
 
HARARI, Y. N. Sapiens – uma breve história da humanidade. São Paulo: L&PM, 2017. 464 p. 
ISBN: 9788525432186. 
 
INSTONE, K. 2002. An open discussion on web navigation. Disponível em: http://keith.instone.org/ 
presentations/InstoneWebNavigation-20020916.pdf. Acessado em 21 de fev. 2003. 
 
INTERNATIONAL STANDARD ORGANIZATION – ISO. ISO 9241. Ergonomics 
requirements for office work with visual displays terminals (VDTs) – Part 1: General introduction. 
International Standard, Suécia, 2001. 
 
JOHNSON, S. Cultura da interface. Rio de Janeiro: Zahar, 2001. 
 
KAHNEMAN, D. Rápido e devagar: duas formas de pensar. Rio de Janeiro: Objetiva, 2011. 
KALBACH, J. Design de navegação web: otimizando a experiência do usuário. Porto Alegre: 
Bookman, 2009. 
 
 91 
 
KRUG, S. Não me faça pensar. Uma abordagem do bom senso à navegabilidade da web. São Paulo: 
Market Books, 2008. 
 
LAUBHEIMER, P. Which UX deliverables are most commonly created and shared? NN/g. 2015. 
Disponível em: <https://www.nngroup.com/articles/common-ux-deliverables/>. Acesso em: 11 
ago. 2018. 
 
LEAL FERREIRA, S. B.; NUNES, R.R. E-Usabilidade. 1. ed. LTC, 2008. 
 
LÉVY, P. Cibercultura. São Paulo: Editora 34, 2003. 
 
MARTIN, L. A lógica do consumo. Rio de Janeiro: Nova Fronteira, 2008. 
 
MOORE, M.; KEARSLEY, G. A educação a distância: uma visão integrada. São Paulo: Thomson 
Le, 2010. 
 
MARKOVÁ, I. A fabricação da teoria de representações sociais. Cadernos de Pesquisa, [s.l.], v. 47, 
n. 163, p. 358–375, 2017. DOI: 10.1590/198053143760. 
 
MARKOVÁ, I. Dialogicality and social representations: the dynamics of mind. Cambridge: 
Cambridge University Press, 2003. 
 
MORVILLE, P.; ROSENFELD, L. Information architecture for the World Wide Web. O`Reilly 
Media, 2006. 
 
MOSCOVICI, S. Representações sociais. 8. ed. Petrópolis: Vozes, 2011. 
 
MOTA, M. DA. Uma introdução ao estudo cognitivo da memória uma introdução ao estudo cognitivo 
da memória a curto prazo: da teoria dos múltiplos armazenadores a memória de trabalho. [s.l.]: [s.n.], 
[s.d.]. Disponível em: <http://www.scielo.br/pdf/estpsi/v17n3/02.pdf>. Acesso em: 11 ago. 2018. 
 
NIELSEN, J., 2012. Introduction to usability. Disponível em: http://www.nngroup.com/articles/ 
usability-101-introduction-to-usability/. Acesso em: 13 de jun. 2014. 
NIELSEN, J.; MACK, R. L. Usability inspections methods. 1. ed. New York: John Wiley & Sons, 1994. 
 
NIELSEN, J.; TAHIR, M. Homepage: Usabilidade. 50 websites desconstruídos. Rio de Janeiro: 
Campus, 2002. 
 
 
92 
 
NIELSEN, J; LORANGER, H. Usabilidade na web – projetando websites com qualidade. Rio de 
Janeiro: Campus, 2002. 
 
NIELSEN, Jakob. How to conduct a heuristic evaluation. Nielsen Norman Group, 1995. 
Disponível em: <http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/>. 
Acesso em: 12 nov. 2013. 
 
NIELSEN, Jakob. Projetando websites. Rio de Janeiro: Campus, 2000. 
 
NIELSEN, Jakob. Usability engineering. 1. ed. San Diego: Morgan Kaufmann, 1993. 
 
NONAKA, T.; TAKEUCHI,H. Gestão do conhecimento. 2. ed. Porto Alegre: Bookman 
Companhia ED, 2008. 
 
NORMAN, D. 1988. The design of everyday things. New York, Basic Books. 
 
NORMAN, D. 2004. Emotional design: why we love (or hate) everyday things. New York, Basic Books. 
 
NORMAN, D. A. Emotional design: why we love (or hate) everyday things. Basic Books, 2003. 
 
PADOVANI, S.; SCHLEMMER, A.; SCARIOT, C.A. Usabilidade & user experience, usabilidade 
versus user experience, usabilidade em user experience? Uma discussão teórico-metodológica sobre 
comunalidades e diferenças. In: 12. Ergodesign – Usihc, 2012, Natal. Anais. Natal: LEUI – LEXUS, 
2012, p. 13- 01-13. 
 
PINKER, S. Como a mente funciona. 3. ed. São Paulo: Companhia das Letras, 2012. 
 
PRADEEP, A.K. O cérebro consumista. São Paulo: Cultrix; 2012. 
 
PREECE, J.; ROGER, Y.; SHARP, H. Design de interação. 3. ed. Porto Alegre: Bookman 
Companhia ED, 2013. 
REIS, G. A. Dos. Centrando a arquitetura de informação no usuário. 250 p. 2007. Disponível em: 
<http://www.guilhermo.com/mestrado/Guilhermo_Reis-Centrando_a_Arquitetura_de_Informac
ao_no_usuario.pdf>. Acesso em: ago. 2018. 
 
RIES, E. A Startup Enxuta. [s.l.]: [s.n.], 2011.TOFFLER, A. A terceira onda. Rio de Janeiro: 
Record, 1997. 
 
 
 93 
 
ROSENFELD, L. e P. MORVILLE. Information architecture for the World Wide Web. Sebastopol, 
CA: O'Reilly, 1998. 
 
SANTOS, Robson. Usabilidade de interfaces e arquitetura da informação: alguns aspectos da 
organização de conteúdo para o meio digital. In: Anais Abergo, Gramado: 2000. 
 
TEDESCO, Donna; SCHADE, Amy; PERNICE, Kara e NILSEN, Jakob. Site Map Usability. 
Nilsen Norman Group, 2008. Disponível em: <http://www.nngroup.com/reports/sitemaps/ 
SiteMapUsability-2nd-edition.pdf>. Acesso em: 16 ago. 2012. 
 
TEIXEIRA, F. UX Collective 🇧🇧🇧🇧. [s.d.]. Disponível em: <https://brasil.uxdesing.cc/>. Acesso em: 11 
ago. 2018. 
 
TEIXEIRA, F. UX Tools for every step in your design process – UX Collective. [s.d.]. Disponível 
em: <https://uxdesing.cc/ux-user-research-and-user-testing-tools-2d339d379dc7>. Acesso em: 
11 ago. 2018. 
 
THE INFORMATION ARCHITECTURE INSTITUTE. 2010. Teste de usabilidade. 
Disponível em: http://iainstitute.org/. Acessado em 25 de novembro. 2013. 
 
VENEZIANI, A. C. 2013. Norma ISO 9126. Disponível em: http://usabilideiros.com.br/ 
index.php/qualidade-de-software/item/5-norma-iso-9126. Acesso em: 10 abr. 2015. 
 
WHALEN, J.; LYONNAIS, S. The Six Minds of UX Design | Adobe Blog. 2016. Disponível em: 
<https://theblog.adobe.com/the-six-minds-of-ux-desing>. Acesso em: ago. 2018. 
 
TEIXEIRA, F. UX Tools for every step in your design process – UX Collective. [s.d.]. Disponível 
em: <https://uxdesing.cc/ux-user-research-and-user-testing-tools-2d339d379dc7>. Acesso em: 
11 ago. 2018. 
 
CARD SORTING: a arquitetura de informação construída pelos usuários. [s.d.]. Disponível em: 
<https://coletivoux.com/card-sorting-a-arquitetura-de-informação-construída-pelos-usuários-54b
9f892e38e>. Acesso em: set. 2018. 
 
PADOVANI, S.; RIBEIRO, M. A. Card sorting: adaptação da técnica para aplicação ao design de 
sistemas de informação não digitais. InfoDesign – Revista Brasileira de Design da Informação. [s.l.], 
v. 10, no 3, p. 293–312, 2013. 
 
 
94 
 
REIS, G. A. Dos. Centrando a arquitetura de informação no usuário. 250 p. 2007. Disponível em: 
<http://www.guilhermo.com/mestrado/Guilhermo_Reis-Centrando_a_Arquitetura_de_Informac
ao_no_usuario.pdf>. 
 
LASTRES, H.; ALBAGLI, S. Informação e globalização na era do conhecimento. Rio de Janeiro: 
Editora Campus Ltda, 1999. 163 p. ISBN: 85-352-0489-X. 
 
ROGERS, Yvonne; SHARP, Helen; PREECE, Jennifer. Design de interação – além da interação 
homem-computador. 3. ed. [s.l.]: Bookman, 2013. 
 
 
 
 95 
 
PROFESSOR-AUTOR 
Leonardo Viana 
Formação acadêmica 
 Doutor em Psicologia Social pela Universidade Federal do 
Rio de Janeiro (UFRJ), com ênfase em UX, cognição e 
inteligência coletiva na web. 
 Doutorado sanduíche na Espanha pela Universitat Autònoma 
de Barcelona (UAB Barcelona). 
 Mestre em Gestão pela Universidade Federal Fluminense (UFF). 
 MBA em Estratégia e Gestão pela Universidade Federal Fluminense (UFF). 
 Graduado em Desenho Industrial. 
 
Experiências profissionais 
 É consultor e pesquisador de UX e marketing digital em novos produtos digitais, com 
experiência em projetos de grande porte, estratégia e gestão de marketing digital 
voltada para UX. 
 Possui atuações nacionais e internacionais para empresas como BNDES, Americanas.com, 
JBS, Fiocruz (Fundação Oswaldo Cruz), Aiesad (associação ibero-americana composta de 
14 países), MHW (Xerox do Brasil), Apex International, Governo do Estado do Rio de 
Janeiro, etc., atuando no mercado digital desde 1998. 
 É professor universitário e do MBA em Marketing Digital da Fundação Getulio Vargas 
(FGV), ministrando aulas de UX (user experience ou experiência do usuário), Gestão e 
Estratégia na Web, Neuromarketing aplicado à Web e Interface. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
https://www.instagram.com/fgv.educacaoexecutiva/
https://www.linkedin.com/school/fgv-educacaoexecutiva/
	INTRODUÇÃO
	SUMÁRIO
	MÓDULO I – EXPERIÊNCIA DO USUÁRIO (UX)
	O que é UX
	Qual diferença entre UX e usabilidade?
	Diferentes tipos de UX
	Mais um elemento: interface do usuário (UI)
	Usabilidade
	Métricas de usabilidade (ISO 9126)
	Aprendendo com interfaces não digitais
	Testes de usabilidade
	Teste de usabilidade assistido e monitorado
	Análise dos resultados
	Avaliação heurística
	Quantas pessoas necessito para testar algo?
	Navegabilidade
	Pontos importantes para um adequado trabalho de UX
	Arquitetura da informação (AI)
	Componentes da arquitetura da informação
	Sistema de busca
	Dispositivos móveis
	Selecionando os itens mais e menos importantes
	Estudo de interface
	Espaço menor, escolhas difíceis
	Acessibilidade
	Vantagens dos padrões web
	Card sorting
	Seleção de conteúdo e preparação dos cartões
	Número de cartões
	Benefícios da aplicação de card sorting
	Quando aplicar?
	Etapas da atividade
	Aplicação do Card sorting
	Análise
	Etapas de uma implementação no projeto digital
	MÓDULO II – GESTÃO E A EXPERIÊNCIA DO USUÁRIO
	Nova sociedade, tecnologia e UX
	Economia da experiência
	Gestão pela experiência
	Gestão de produtos com base na experiência – UX enxuta
	Gestão empírica – criação de produtos para testar
	MÓDULO III – UX E O SER HUMANO
	Entre a emoção e a razão
	Seis inteligências de UX
	Design emocional
	Mecânica do olhar
	Cones e bastonetes
	Memória
	MÓDULO IV – ENTREGÁVEIS E BOAS PRÁTICAS DE UX
	O que são entregáveis?
	Wireframe
	Protótipos
	Fluxograma
	Mapa do site
	Storyboard
	Como criar um storyboard?
	Persona
	Inventário de conteúdo
	Benchmarking
	Grupo focal
	Pesquisa quantitativa
	Modelo conceitual
	Definição das métricas de sucesso
	Card sorting
	Controle de qualidade
	Análise de acessibilidade
	UX Writing
	Recomendações de SEO
	Testes A/B
	Eyetracking
	Análise de métricas
	Análise heurística
	Tabela resumo
	BIBLIOGRAFIA
	PROFESSOR-AUTOR
	Leonardo Viana
	Formação acadêmica
	Experiências profissionais