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
MÓDULO I – EXPERIÊNCIA DO USUÁRIO (UX)

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.
 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.

8
 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 em

conformidade 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).

9
 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:
eficácia – aspecto objetivo – quando se atinge
a
1 fase – antes do uso; metas;

2a fase – durante o uso e eficiência – aspecto objetivo – agilidade para

atingir metas e
3a fase – depois do uso.
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.

10
 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:

11
 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.

12
 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:

13
 Figura 5 – Charge aeromoça

Fonte: adaptado do livro Não me faç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).

14
 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.

15
 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.

16
 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).

17
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.

18
 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.

19
 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.

20
 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.

21
 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ções de modo claro e simples, sendo responsável

por tornar o produto digital inteiramente compreensível.

22
 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.

23
 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.

24
 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):

25
 Figura 10 – Esquema de organização da informação

Fonte: Reis (2004).

26
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):

27
 Figura 11 – Wireframe para monitores de 17 polegadas e superior

Fonte: adaptado de Balsamiq.com

28
Figura 12 – Wireframe para tablets

Fonte: adaptado de Balsamiq.com

29
 Figura 13 – Wireframe para smartphones

Fonte: adaptado de Balsamiq.com

30
 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

31
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
principal mais adequado a smartphones, com a redução de 6 para 3 itens.

32
O wireframe do site adaptado para smartphones ficaria assim:

Figura 15 – Wireframe adaptado

Fonte: adaptado de Balsamiq.com

33
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.

34
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.

35
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.

36
 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úvidas e 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.

37
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;

38
 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.

39
40
MÓDULO II – GESTÃO E A EXPERIÊNCIA
DO USUÁRIO

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.
 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.

42
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. Se você 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”

43
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.

44
 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

45
 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).

46
 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 produto que 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?

47
 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.

48
 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.

49
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.

50
 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).

51
52
MÓDULO III – UX E O SER HUMANO

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.
 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).

54
 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.

55
 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.

56
 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.

57
 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.

58
 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, vinha o 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).

59
 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.

60
 É 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.

61
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

62
 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

63
 Figura 34 – Funcionamento do Eye Tracking

Fonte: feng-gui.com

Figura 35 – Óculos Eye Tracking

Fonte: https://www.ergoneers.com

64
 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).

65
 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, por exemplo,
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

66
 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

67
MÓDULO IV – ENTREGÁVEIS E BOAS
PRÁTICAS DE UX

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.
 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.

70
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

71
 Fonte: Shutterstock.

Fonte: https://www.shutterstock.com/pt/image-photo/website-desinger-creative-planning-application-development-
1067423849?src=RsN82S9KC6GjQ6qvASOy5w-1-4

72
 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.

73
 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.

74
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.

75
 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.

76
 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.

77
 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 aspectos peculiares 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:

78
 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/.

79
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.

80
 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.

81
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.

82
 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 proporcionar a
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).

83
  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.

84
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.

85
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.

86
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.

87
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
parâmetros para medir o alcance dos objetivos
de sucesso
card sorting estabelecimento do modelo mental do usuário
verificação da fidelidade ao projeto previsto e conferência do
controle de qualidade
seu funcionamento
análise de
avaliação do nível de facilidade de acesso ao produto
acessibilidade
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

88
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.

89
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.

90
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.

91
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.

92
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.

93
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.

94
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.

95