E2_ARIN-1_-1035568935

Prévia do material em texto

ARQUITETURA 
DA INFORMAÇÃO 
UX/UI
E-book 2
Eliana Regina Lopes Loureiro
Neste E-Book:
INTRODUÇÃO ���������������������������������������������� 3
EXPERIÊNCIA DO USUÁRIO: 
DEFINIÇÃO ���������������������������������������������������4
ESTRATÉGIA ������������������������������������������������� 6
Personas ������������������������������������������������������������������6
Pesquisa de usuário ������������������������������������������������8
Jornada do usuário �������������������������������������������������9
Como criar um mapa da jornada do usuário? ����� 11
ESCOPO ��������������������������������������������������������13
ESTRUTURA �������������������������������������������������16
Design de interação ���������������������������������������������� 16
Processo do design de interação ������������������������ 17
PROTOTIPAGEM ����������������������������������������21
ESQUELETO ������������������������������������������������ 23
SUPERFÍCIE ������������������������������������������������26
TESTES E AVALIAÇÕES ���������������������������28
Avaliação heurística ���������������������������������������������� 28
TESTES DE USABILIDADE ���������������������31
Card sorting ���������������������������������������������������������� 32
CONSIDERAÇÕES FINAIS ����������������������34
SÍNTESE ������������������������������������������������������� 35
2
INTRODUÇÃO
Neste módulo, abordaremos as bases da Experiência 
do Usuário (UX)� Para tanto, vamos nos valer dos 
cinco elementos que a compõem, conforme estabele-
cido por Garrett (2011): estratégia, escopo, estrutura, 
esqueleto e superfície�
Isso nos permitirá visitar conceitos como persona, 
pesquisa de usuário, jornada do usuário, requisitos, 
design de interação, princípios do design, prototipa-
gem, design visual, teste de usabilidade, avaliação 
heurística e card sorting�
Pronto para começar? Vamos lá!
3
EXPERIÊNCIA DO 
USUÁRIO: DEFINIÇÃO
Você sabe o que é experiência do usuário? Bem, ela 
“diz respeito a como as pessoas se sentem em rela-
ção a um produto e ao prazer e à satisfação que ob-
têm ao usá-lo, olhá-lo ou fechá-lo” (ROGERS; SHARP; 
PREECE, 2013, p� 13)�
Também conhecido como User Experience (UX), 
Garrett (2011) explica que o papel da experiência 
do usuário é o de assegurar que nenhum aspec-
to dessa experiência com o produto aconteça sem 
sua consciência, com sua intenção explícita� Isso 
significa levar em conta todas as possibilidades de 
cada ação realizada pelo usuário, bem como suas 
expectativas a cada passo da jornada�
Assim, em uma mídia digital, o UX trata de oferecer 
uma experiência memorável e satisfatória ao usu-
ário� Para que isso seja alcançado, Garrett (2011) 
desenhou o seguinte diagrama (Figura 1), com os 
elementos do User Experience, que funciona como 
um guia:
4
Design Visual
Design da Informação
Necessidades do usuário
Objetivos do site
Design da
Interface
Design da
Navegação
Design 
de
Interação
Arquitetura
da
Informação
Especificações
Funcionais
Arquitetura
da
Informação
Concreto
te
m
po
Abstrato
Maturidade
Concepção
Figura 1: Elementos da experiência do usuário. Fonte: Garrett (2000).
Conforme se nota, Garrett (2011) divide o User 
Experience (UX) em cinco elementos: estratégia, 
escopo, estrutura, esqueleto e superfície� A partir 
de agora, vamos conhecer cada um deles�
5
ESTRATÉGIA
Entram, neste tópico, as necessidades do usuário e 
os objetivos do produto, que podem ser igualmente 
os objetivos do negócio� Por exemplo, é possível que 
os usuários do site da Turma da Mônica (Figura 2) 
queiram visualizar os quadrinhos, então faz senti-
do deixar em evidência no menu tal conteúdo� Ao 
mesmo tempo, pode ser que a estratégia do negócio 
seja divulgar os “games e apps”, por isso ganham 
destaque no menu também�
Figura 2: Site da Turma da Mônica. Fonte: Turma da Mônica.
Personas 
Uma vez que estamos falando de necessidades do 
usuário, faz sentido adentrarmos a questão das per-
sonas, que são
6
 documentos que descrevem típicos usuários-
-alvo ... Com pesquisas e descrições apropria-
das, as personas podem ilustrar um quadro 
muito claro sobre quem está usando o site ou 
aplicação e, potencialmente, até mesmo como 
está usando (UNGER; CHANDLER, 2009).
Como criar uma persona?
Para criar uma persona, você pode entrevistar usu-
ários que acreditam ser sua persona, fazer pesqui-
sas e reunir dados, baseando-se em pessoas reais, 
ou criá-los. O importante é que “personas eficazes 
devem descrever precisamente uma série de usuá-
rios específicos do seu produto ou website” (UNGER; 
CHANDLER, 2009, p� 111)� Ainda segundo esses au-
tores, o número varia, sendo que em geral o mínimo 
são três� Outras informações passadas pelos autores 
para a criação são:
• Requisições mínimas de conteúdo da persona: 
foto, nome, idade, localização, ocupação e biografia.
• Conteúdo opcional: nível educacional; salário ou 
variação salarial; personal quote; atividades online; 
atividades offline; entrada-chave ou ponto de ativação 
do cliente, da marca ou do projeto; nível técnico de 
conforto (sua persona usa um PC ou um Mac?); nível 
social de conforto (sua persona tem uma conta no 
Twitter?); nível móvel de conforto (como suas perso-
nas são encontradas no espaço móvel); motivações 
para usar o cliente, a marca ou projeto; objetivos do 
usuário�
7
Pesquisa de usuário
Segundo Unger e Chandler (2009), são cinco os pas-
sos básicos para a realização de uma pesquisa de 
usuário:
• Definição dos grupos de usuários primários: en-
volve a criação de uma estrutura que descreve os 
principais tipos de usuários para quem você está 
projetando, permitindo que você foque seus esforços 
para recrutar usuários para a pesquisa�
• Planejamento do envolvimento do usuário: inclui 
a escolha de uma ou mais técnicas de envolvimento 
dos grupos de usuário na pesquisa, baseando-se 
nas necessidades do seu projeto�
• Condução da pesquisa: pode entrevistar os usu-
ários por meio de conversas estruturadas, podendo 
ser feita de forma presencial, telefone ou ainda em 
um local neutro ou no ambiente em que o usuário 
usará o site� As entrevistas ajudam a entender as 
preferências e atitudes do participante� Pode-se 
visitar o local com os participantes para observar e 
aprender como eles trabalham ou conduzir surveys 
online com respostas fechadas para coletar dados, 
criar grupos focais, entre outros� 
• Validação das definições do seu grupo de usuário: 
utiliza o resultado da pesquisa, pois com ela você 
pode solidificar seu modelo de grupos de usuário. 
Esse modelo serve como uma plataforma ao desen-
volvimento de ferramentas mais detalhadas, como 
a persona�
8
• Criação de requisições de usuário: são declarações 
de recursos e funções que o site pode incluir� Você 
acrescentará essas declarações em suas requisições 
de negócio e as priorizará para se tornarem requisi-
ções do projeto�
Acesse o Podcast 1 em Módulos
Jornada do usuário 
Outra ferramenta importante do User Experience 
é a Jornada do Usuário, que serve para auxiliar na 
estratégia do produto� Moulin (2018) denota que o 
processo torna visível três pontos muito importantes:
• Entender o antes, o durante e o depois do contato 
entre o usuário e o produto�
• Ajudar a pensar com empatia�
• Identificar novas oportunidades e soluções.
Ressalta-se que ela nos permite compreender o com-
portamento de consumo de um produto ou serviço, 
bem como encontrar falhas no processo, pontos de 
melhoria e, inclusive, a “oportunidade de criar algo 
que atenda a necessidade de uma etapa específica” 
(MOULIN, 2018)� Em linhas gerais, trata-se de estabe-
lecer pontos de contato da marca com seu público e 
trabalhar para que ela seja a melhor possível�
Segundo Moulin (2018), para criar esse mapa, devem 
ser considerados:
9
• Os princípios (o que precisa ser considerado e 
esperado)�
• Os estágios da jornada�
• O que o usuário está fazendo�
• O que o usuário está pensando�
• O que o usuário está sentindo�
• Itens de experiência (aproveitamento,relevância 
e utilidade)�
• Oportunidades encontradas�
As Figuras 3 e 4 trazem alguns exemplos de mapas 
da jornada do usuário� Com isso, é possível compre-
ender o comportamento de consumo e compreender 
como criar um�
Figura 3: Blog Robson Moulin. Fonte: Robson Moulin�
10
Figura 4: Exemplo de jornada do cliente na compra de um produto� 
Fonte: Robson Moulin� 
Como criar um mapa da jornada 
do usuário?
Para criar um mapa da jornada do usuário, é preciso 
compreender muito bem quem é seu público, o que 
pode ser feito das maneiras já apresentadas ante-
riormente e entender o objetivo do mapa� Só então 
são listados os pontos de contato� A partir disso, 
desenha-se o mapa e criam-se as soluções, com o 
intuito de gerar empatia por parte do consumidor�
Em um exemplo prático, temos o aplicativo Uber� 
Digamos que o objetivo seja fazer com que o usuário 
use pela primeira vez o app� Depois de baixar a apli-
cação, envia-se um e-mail oferecendo um desconto 
na primeira utilização� Ao fazer o pedido de um car-
ro, a ferramenta mostra diversos veículos e mostra 
11
que, em instantes, haverá alguém disponível (ajuda 
a diminuir a ansiedade, pois alguém está vindo)� 
Em seguida, o usuário é convidado a avaliar o atendi-
mento do motorista e ainda lhe é oferecido mais um 
desconto se recomendar o Uber em suas redes so-
ciais (aumenta a reputação e a confiança no serviço).
12
ESCOPO
Nesta etapa, criamos uma lista de requisitos que 
inclui as especificações funcionais e os requisitos 
de conteúdo� Rogers, Sharp e Preece (2013, p� 355) 
estabelecem que o desenvolvimento dessa relação 
visa a alcançar dois objetivos:
1. Entender ao máximo os usuários, suas atividades 
e o contextos dessas atividades, de modo que o sis-
tema criado possa dar suporte ao alcance dessas 
metas� Em outras palavras, “um requisito é uma de-
claração sobre um produto pretendido que especifica 
o que ele deveria fazer ou como deveria funcionar”�
2. Produzir um conjunto de requisitos estáveis, in-
cluindo as especificações funcionais e o conteúdo 
necessário, que formem uma base sólida para daí 
então se iniciar o design� 
Isso vai muito além de fazer o site/aplicativo funcio-
nar corretamente, trata-se de fazer com que a aplica-
ção seja agradável ao público a que se destina� Por 
exemplo, se é para a terceira idade, é preciso que as 
fontes sejam de um bom tamanho e haja contraste 
como fundo, o que acontece com a Figura 5, extraída 
de um site de encontros destinado a esse público� 
Dessa maneira, para se criar uma relação de requisi-
tos eficaz, faz-se necessária uma investigação prévia.
13
Figura 5: Site de relacionamentos para a terceira idade. Fonte: Our 
Time Brasil. 
De quais requisitos precisamos? Rogers, Sharp e 
Preece (2013) definem que podem ser dos seguintes 
tipos:
• Requisitos funcionais: captam o que o produto 
deveria fazer� 
• Requisitos de dados: captam tipo, volatilidade, ta-
manho/quantidade, persistência, exatidão e valor 
dos dados requeridos�
• Requisitos ambientais (ou contexto de uso): refe-
rem-se às circunstâncias em que o produto interativo 
operará� Para isso, devem-se considerar os seguintes 
pontos:
 � Ambiente físico: como a quantidade esperada de 
iluminação, ruído, movimento e poeira no ambiente 
operacional� 
 � Ambiente social: os dados precisam ser 
compartilhados?
14
 � Ambiente organizacional: há recursos para o 
treinamento?
 � Ambiente técnico: em quais tecnologias o produto 
executará ou com quais ele precisa ser compatível?
Tais dados podem ser recolhidos por meio de pes-
quisas, inclusive com os usuários do produto, mas 
também por meio de um brainstorm com a equipe de 
criação e desenvolvimento� E não se deve esquecer 
do conteúdo, como nos adverte Garrett (2011, p� 71): 
“Grande parte do tempo, quando falamos de conteú-
do, estamos nos referindo ao texto� Mas as imagens, 
o áudio e o vídeo podem ser mais importantes do 
que o respectivo texto”. Isso significa que é preciso 
pensar e considerar todos os elementos�
15
ESTRUTURA
A funcionalidade está relacionada ao Design de in-
teração, em que se define como o sistema se com-
portará em resposta às ações do usuário� No âmbito 
do conteúdo, temos a Arquitetura da informação, 
que ajuda a compreender de que maneira o conte-
údo pode facilitar a compreensão humana� Vamos 
estudar esses elementos em detalhes�
Design de interação
Para Rogers, Sharp e Preece (2013, p� 8), o Design 
tem por função “projetar produtos interativos para 
apoiar o modo como as pessoas se comunicam e 
interagem em seus cotidianos, seja em casa ou no 
trabalho”� Dito de outra forma, pensa-se o design a 
partir da interação humana� Os autores ainda en-
fatizam que “a experiência do usuário é essencial 
para o design de interação, pois leva em conta como 
um produto se comporta e é usado por pessoas no 
mundo real” (ROGERS; SHARP; PREECE, 2013, p� 13)�
Com base nesses autores, os aspectos que devem 
ser considerados no design interativo são:
 � Usabilidade�
 � Funcionalidade�
 � Estética�
• Conteúdo�
16
• Look and feel�
• Apelos sensoriais e emocionais� 
Processo do design de interação
O processo de design de interação baseia-se em qua-
tro atividades básicas (ROGERS; SHARP; PREECE, 
2013, p� 15):
1. Estabelecer requisitos�
2. Criar alternativas de design�
3. Prototipar�
4. Avaliar�
Dado que estudamos os requisitos na seção anterior, 
podemos nos deter nos outros itens� As alternativas 
de design são criadas, desenvolvidas (prototipadas) 
e avaliadas�
Princípios do design
Os itens pensados por Rogers, Sharp e Preece (2013) 
para o desenvolvimento de um projeto de interação 
são: 
• Visibilidade: quando as funções de um sistema 
não estão visíveis, é mais difícil encontrá-las e saber 
como usá-las� Isso pode prejudicar a experiência do 
usuário�
• Feedback: os feedbacks referem-se ao retorno do 
sistema às ações e ao que foi realizado pelo usuá-
17
rio� Podem ser em áudio, tátil, verbal, visual ou uma 
combinação de um ou mais� Por exemplo, as Figuras 
6 e 7 mostram uma ação sobre o botão “Abrir o Web 
Player”: ao se aproximar o mouse, muda de cor, si-
nalizando que é possível interagir com ele:
Figura 6: Página do site do Spotfy. Fonte: Spotify�
• Restrições: as restrições determinam as formas de 
delimitar os tipos de interação do usuário, que podem 
ocorrer em um determinado momento� A Figura 8 
ilustra a área escurecida atrás, o que demonstra que 
não pode ser utilizada no momento. Afinal, o único 
comando possível (se a janela não for fechada) é a 
ação de postar na rede social Facebook:
Figura 7: Página do Facebook� Fonte: Facebook� 
18
• Consistência: a consistência refere-se a projetar 
interfaces de modo que tenham operações seme-
lhantes e utilizem elementos semelhantes para a 
realização de tarefas similares� Ou seja, nada mais é 
do que uma padronização que visa a educar a ação 
do usuário� Não se relaciona tão somente à aplica-
ção, mas a um padrão de outros sites e aplicativos, 
como o uso de botões, algo comum nas mídias digi-
tais� Uma forma de padronização é o uso de ícones 
(Figura 9), pois sabe-se que a lupa significa a área 
de busca, que é o negócio principal do site�
Figura 8: Página inicial do Google. Fonte: Google. 
• Affordance: o termo tem sentido de “dar uma pista”, 
isto é, o atributo de um produto demonstra como 
pode ser utilizado� A Figura 10 mostra um detalhe 
do site do jornal Folha de S�Paulo� No box para as-
sinatura de newsletters, a dica vem escrita “Digite 
seu e-mail”:
19
Figura 9: Indicação de assinatura de newsletter. Fonte: Folha. 
Entendida a parte do design, agora adentraremos a 
questão dos protótipos�
Acesse o Podcast 2 em Módulos
20
PROTOTIPAGEM
A prototipagem “é o ato de criar e testar toda ou par-
te da funcionalidade de uma aplicação ou Website 
com os usuários” (UNGER; CHANDLER, 2009, p� 205)� 
Pode ser feita digital ou analogicamente, com de-
senhos em papel, por exemplo, e permite validar ou 
identificar questões na experiência do usuário.O protótipo não precisa necessariamente apresen-
tar todo o sistema que pretende desenvolver, mas 
apenas simular as partes principais; pode ser criado 
em um quadro branco, por meio de um esquema no 
lápis e papel, cartões recortados etc�, isso sem falar 
nos modelos digitais disponíveis, que permitem o 
desenvolvimento de protótipos interativos (UNGER; 
CHANDLER, 2009)�
Mas como podemos criar um protótipo? Unger e 
Chandler (2009) ressaltam que, se optar pelo lápis 
e papel, basicamente, esboce a funcionalidade que 
quer testar e, em seguida, apresente-a ao usuário� 
Então, anote os resultados coletados, passe para 
outro usuário e continue o processo�
Fique atento se o participante do seu teste faz algu-
ma ação que não havia previsto ou se sinta perdido 
em alguma etapa, pois isso indica quais alterações 
devem ser feitas� Nessa etapa, você pode fazer quais-
quer mudanças, sem que isso impacte em custos� 
Agora, se o seu sistema é mais complexo do que o 
21
papel pode comportar, ou talvez seja o caso da sua 
preferência, é melhor investir no protótipo digital�
SAIBA MAIS
A Jornada do Usuário pode ser categorizada 
em quatro momentos (gatilho, ação, premia-
ção e investimento), os quis podem ser online 
ou offline, e fazem parte do storyframing. Saiba 
mais sobre essa técnica consultando a expli-
cação do Blog UX Design: https://uxdesign.cc/
what-is-storyframing-21cd12dfe701� 
22
ESQUELETO
Em conformidade com a explicação de Garrett 
(2011), a estrutura define como o produto vai fun-
cionar e seu esqueleto, isto é, a forma como essa 
funcionalidade operará� Enquanto a estrutura trata 
da arquitetura e da interação, o esqueleto trata dos 
componentes individuais e suas relações� Em outras 
palavras, baseia-se no design de interface, design da 
informação e design de navegação, que são áreas 
intimamente ligadas:
Um bom design de navegação não pode cor-
rigir um design de informação ruim. Se não 
podemos dizer a diferença entre os tipos de 
problema, não podemos dizer se nós realmen-
te os resolvemos (GARRETT, 2011, p. 128). 
Assim, em sua concepção, se envolve fornecer aos 
usuários a capacidade de fazer as coisas, estamos 
falando de design de interface� Agora, se está rela-
cionado a fornecer aos usuários a capacidade de 
ir a lugares, então é design de navegação� Caso se 
pretende comunicar ideias ao usuário, logo, é design 
de informação (GARRETT, 2011)�
Aqui, o design deixa de ter um caráter tão somente 
embelezador, mas de proporcionar o diálogo entre 
homem e máquina, que não gere dúvidas ao usuário� 
São as partes visíveis do sistema e com as quais 
a audiência interage� Em boa parte, como ressalta 
23
Garrett (2011), se liga a convenções� Para isso, o 
autor exemplifica com um novo modelo de telefone 
que usa uma nova padronização de botões, diferente 
do usual�
Parece que o layout não deve fazer muita di-
ferença, mas faz. Se você mediu o tempo que 
um usuário gasta tentando descobrir qual bo-
tão pressionar em um telefone fora do padrão, 
talvez resultem em algo como três segundos 
por chamada. Não é uma diferença tão gran-
de - mas para o usuário, esses três segundos 
não são apenas tempo perdido. Esses três 
segundos são preenchidos com pura frustra-
ção, como uma tarefa reflexiva torna-se ago-
nizantemente lenta simplesmente porque o 
tapete da convenção foi retirado de debaixo 
dos pés do usuário (GARRETT, 2011, p. 111).
Podemos utilizar convenções retiradas do mundo 
real, lembrando que “o conteúdo do seu site deve 
fornecer algum grau de contexto para ajudar os 
usuários a adivinhar melhor quais são os recursos 
que as metáforas utilizadas pretendem representar” 
(GARRETT, 2011, p� 113)�
Em seguida, enfatiza-se que usar essas metáforas e 
diminuir a necessidade de esforço mental do público 
é uma estratégia muito bem-vinda, para tanto, exem-
plifica com o uso de ícones como a representação de 
uma caderneta de telefones para se identificar que 
24
ali está a relação de contatos telefônicos� O autor 
esclarece ainda que essa etapa
[...] tem tudo a ver com a seleção dos elemen-
tos de interface certos para a tarefa que o 
usuário está tentando realizar, organizando-os 
na tela de uma maneira que seja facilmente 
compreendida e facilmente usada. As tare-
fas geralmente se estendem por várias telas, 
cada uma contendo um conjunto diferente 
de elementos de interface para o usuário li-
dar. Quais funções terminam em quais telas 
é uma questão de interação a ser projetado 
no plano da estrutura; como essas funções 
são realizadas na tela é o domínio do design 
da interface (GARRETT, 2011, p. 114, grifos 
nossos).
Em sua opinião, interfaces de sucesso são aque-
las em que os usuários rapidamente veem o que é 
importante e não notam aquilo que não tem tanta 
importância� Mais do que isso, “uma interface bem 
projetada reconhece os cursos de ação que os usu-
ários têm maior probabilidade de executar e torna 
esses elementos da interface mais fáceis de acessar 
e usar” (GARRETT, 2011, p� 115)�
25
SUPERFÍCIE
A superfície está relacionada ao design visual e cuida 
do sensório (tato, olfato, visão, audição e paladar): 
“No processo de design, esta é a última parada a 
caminho de oferecer uma experiência aos nossos 
usuários: determinar como tudo no nosso design se 
manifestará nos sentidos das pessoas”, esclarece 
Garrett (2011, p� 135) acerca de sua importância�
Obviamente, olfato e paladar não devem ser con-
templados na experiência do usuário, assim como 
o toque se limitará a produtos físicos� No entanto, 
visão e audição podem ser amplamente considera-
dos� “(���) a aparência do produto torna as distinções 
entre as seções da arquitetura pouco claras ou am-
bíguas, prejudicando a estrutura? Ou o design visual 
esclarece as opções disponíveis para os usuários, 
reforçando a estrutura?” (GARRETT, 2011, p� 137)� 
Além disso, o visual também ajuda a comunicar a 
identidade da marca�
Na Figura 11, temos a imagem do site da grife Gucci� 
A tipologia escolhida e a ordenação de informações 
buscam transmitir uma imagem visual de refinamen-
to e luxo� Observe:
Figura 10: Página inicial do site da Gucci. Fonte: Gucci. 
26
A audição também tem um papel importante no UX� 
Por exemplo, nas mensagens de erro, que vêm com 
um som de alerta para que o usuário perceba que 
algo precisa ser alterado, além das cores e ícones 
utilizados que pretendem chamar sua atenção, pois 
se requer uma ação imediata�
A Figura 12 apresenta uma dessas telas� Perceba 
que se utiliza da iconografia de placas de trânsito 
para demonstrar que houve um problema e que é 
necessário ao usuário apertar o “ok” para que possa 
realizar outra ação� Assim, ele demonstra que está 
ciente de que houve um problema� 
Figura 11: Mensagem de erro. Fonte: Mensagens de Sistema.
27
TESTES E 
AVALIAÇÕES
Existem algumas formas de examinar um sistema� 
Vamos conhecer alguns dos mais comumente 
utilizados�
Avaliação heurística
Jakob Nielsen e Rolf Mohlich (1990) criaram esse 
termo, sendo que “heurística” significa um conjun-
to de regras e métodos para chegar-se à resolução 
de problemas� A ideia é que essa avaliação ajude a 
resolver, a partir deos10 princípios, os problemas 
de interface do usuário� A seguir, Rogers, Sharp e 
Preece (2013, p� 506-507) explicam cada uma des-
sas etapas:
1. Visibilidade do status do sistema: o sistema deve 
manter os usuários sempre informados sobre o que 
está acontecendo por meio de feedback apropriado 
em tempo razoável�
2. Correspondência entre sistema e mundo real: o 
sistema deve falar a linguagem dos usuários, com 
palavras, frases e conceitos familiares em vez de 
termos técnicos� Siga convenções do mundo real, 
fazendo com que as informações apareçam em uma 
ordem natural e lógica�
28
3. Controle do usuário e liberdade: usuários fre-
quentemente escolhem funções do sistema por en-
gano e precisam de uma saída de emergência bem 
marcada para sair de situações indesejadas sem 
que precisem percorrer um longo caminho� Forneça 
ações de desfazer erefazer�
4. Consistência e padrões: os usuários não deve-
riam precisar adivinhar que diferentes palavras, si-
tuações ou ações significam a mesma coisa. Siga 
convenções de plataforma�
5. Prevenção de erros: ainda melhor do que boas 
mensagens de erro é um design cuidadoso que, em 
primeiro lugar, evite que ocorra um problema� Elimine 
as condições passíveis de erros ou verifique-as e 
apresente-as aos usuários com uma opção de con-
firmação antes que eles façam a ação.
6. Reconhecimento em vez de relembrança: mi-
nimize a carga de memória do usuário, tornando 
visíveis os objetos, as ações e as opções� O usuário 
não deve precisar se lembrar da informação de uma 
parte da caixa de diálogo para outra� Instruções para 
uso do sistema devem estar visíveis e facilmente 
recuperáveis quando necessário�
7. Flexibilidade e eficiência de uso: os aceleradores 
– invisíveis para o usuário novato – podem acelerar 
a interação para o usuário especialista, de modo que 
o sistema possa servir tanto para usuários inexpe-
rientes quanto experientes� Permita que os usuários 
personalizem ações frequentes�
29
8. Estética e design minimalista: diálogos não de-
vem conter informações irrelevantes ou pouco ne-
cessárias� Cada unidade extra de informação em 
um diálogo compete com unidades relevantes de 
informação e diminui sua visibilidade relativa�
9. Ajudar os usuários a reconhecer, diagnosticar e a 
se recuperar de erros (ou corrigi-los): as mensagens 
de erro devem ser expressas em linguagem clara 
(sem códigos), indicar o problema com precisão e 
sugerir uma solução�
10. Ajuda e documentação: mesmo que o sistema 
possa ser usado sem documentação, pode ser ne-
cessário fornecer ajuda e documentação� Qualquer 
informação desse tipo deve ser fácil de pesquisar, 
focada na tarefa do usuário, listar os passos concre-
tos de realização, e não muito grande�
30
TESTES DE USABILIDADE 
É um dos métodos mais frequentemente usados� 
Rogers, Sharp e Preece (2013) explicam que os tes-
tes de usabilidade permitem compreender o quão 
usável é um produto, ou seja, “o objetivo é testar se 
o produto que está sendo desenvolvido será utilizado 
pelos usuários para realizar as tarefas para as quais 
foi projetado” (ROGER; SHARP; PREECE, 2013, p� 476)�
O teste de usabilidade consiste em pedir “aos parti-
cipantes que realizem testes específicos em um site 
ou aplicação (ou um protótipo dele), para descobrir 
questões potenciais de usabilidade e reunir ideias 
para direcioná-las” (UNGER; CHANDLER, 2009, p� 
111). Assim, a ideia é verificar se o usuário consegue 
navegar de forma intuitiva ou se tem dificuldades no 
uso, que precisam ser corrigidas�
No geral, pode-se mensurar, conforme fizeram 
Rogers, Sharp e Preece (2013, p� 477), baseando-se 
em Wixon e Wilson (1997):
• Tempo para completar uma tarefa�
• Tempo para completar uma tarefa após um de-
terminado tempo longe de produto (sem utilizá-lo)�
• Número e tipo de erros por tarefa�
• Número de erros por unidade de tempo�
• Número de consultas à ajuda online ou aos 
manuais�
31
• Número de usuários que cometeram um determi-
nado erro�
• Número de usuários que completam uma tarefa 
com sucesso� 
Geralmente, duas ou três câmeras de vídeo fixas re-
gistram as reações dos participantes do teste para 
depois serem analisadas, o que inclui o movimento 
de suas mãos, expressões faciais e linguagem cor-
poral e, claro, o uso de microfones� O local de testes 
também é separado da sala usada pelos observado-
res, que o fazem por meio de um espelho unilateral, 
como nos focus groups. Existem ainda outras ma-
neiras de conduzir um teste de usabilidade, inclusive 
remotos, em que um software registra as ações feitas 
pelo usuário (ROGER; SHARP; PREECE, 2013).
Card sorting 
É conhecido também como “Ordenação de Cartão”� 
Para Unger e Chandler (2009), o card sorting pode 
ser usado tanto para criar o mapa do site quanto para 
criar uma hierarquia de conteúdo. Consiste na entrega 
de cartões com itens expressos escritos (entre 40 e 
60) a um grupo de pessoas ou de forma individual, 
que devem ser ordenados.
Podem ser agrupados tanto em categorias oferecidas 
antecipadamente (chamadas de ordenação fechada) 
quanto criados os próprios grupos (chamadas de orde-
nação aberta). O processo deve apresentar padrões e 
32
pontos de confusão ou discordância. Unger e Chandler 
(2009, p. 110) sugerem que as seguintes instruções 
sejam feitas aos participantes:
• Arrume os cartões em quaisquer grupos que façam 
sentido para você�
• Tente colocar pelo menos dois cartões em cada 
grupo� Se parecer que um cartão não pertence a 
nenhum dos grupos, você pode deixá-lo de lado�
• A qualquer momento, enquanto você estiver or-
denando, você pode nomear um grupo. Ao final da 
atividade, nomeie quantos grupos você puder�
33
CONSIDERAÇÕES FINAIS
Estudamos, neste módulo, o passo a passo do User 
Experience (UX), conforme pensado por Garrett 
(2011)� Com o auxílio de sua metodologia, com-
preendemos algumas ferramentas importantes na 
experiência do usuário, como a definição de perso-
nas, a jornada do usuário, princípios de design, pro-
totipagem, além de formas de avaliação e teste dos 
sistemas criados�
É importante compreender que seu público precisa 
ter uma boa experiência com a aplicação criada, por 
essa razão, estudamos algumas formas de garantir 
que isso aconteça�
34
SÍNTESE
ARQUITETURA DA INFORMAÇÃO 
UX/UI
CONTEÚDO:
USER EXPERIENCE (UX): definição
(...), a experiência do usuário diz respeito a como as pessoas se sentem em relação a um 
produto e ao prazer e à satisfação que obtêm ao usá-lo, olhá-lo ou fechá-lo” (ROGERS; 
SHARP; PREECE, 2013, p. 13). O UX trata de oferecer uma experiência memorável e 
satisfatória ao usuário.
Diagrama com os 5 elementos do UX (GARRETT, 2011): 
1. Estratégia:
 Engloba as necessidades do usuário e os objetivos do produto.
 Personas: como criá-las?
 Pesquisa de usuário.
 Jornada do usuário: como criar um mapa da jornada do usuário?
2. Escopo:
Lista de requisitos com especificações funcionais e requisitos de conteúdo: “um requisito 
é uma declaração sobre um produto pretendido que especifica o que ele deveria fazer ou 
como deveria funcionar” (ROGERS; SHARP; PREECE, 2013, p. 355).
3. Estrutura:
A funcionalidade se liga ao Design de Interação, em que se define como o sistema se 
comportará em resposta às ações do usuário. No âmbito do conteúdo, temos a 
Arquitetura da Informação, que ajuda a compreender como o conteúdo pode facilitar a 
compreensão humana. “Projetar produtos interativos para apoiar o modo como as 
pessoas se comunicam e interagem em seus cotidianos, seja em casa ou no trabalho” 
(ROGERS; SHARP; PREECE, 2013, p. 8) sobre o Design de Interação:
 Processo do design de interação: estabelecer requisitos, criar alternativas de design, 
prototipar, avaliar.
 Princípios do design: visibilidade, feedback, restrições, consistência, affordance. 
 Prototipagem: “o ato de criar e testar toda ou parte da funcionalidade de uma aplicação 
ou website com os usuários” (UNGER; CHANDLER, 2009, p. 205).
4. Esqueleto:
Baseia-se em design de interface, da informação e de navegação. Em sua concepção “se 
envolve fornecer aos usuários a capacidade de fazer as coisas” (GARRETT, 2011, p. 109), 
estamos falando de design de interface. Agora, se está relacionado a fornecer aos 
usuários a capacidade de ir a lugares, é design de navegação. Caso se pretende comunicar 
ideias ao usuário, é design de informação.
5. Superfície:
Refere-se ao design visual e ao sensório: tato, olfato, visão, audição e paladar.
6. Testes e avaliações:
 Avaliação heurística (Nielsen e Mohlich).
 Testes de usabilidade.
 Card sorting.
Referências
Bibliográficas 
& Consultadas 
ABRAHÃO, J� Ergonomia e usabilidade: em am-
biente virtual de aprendizagem� São Paulo: 
Blücher, 2012 [Biblioteca Virtual]�
BENYON, D� Interação humano-computador� 2� ed� 
São Paulo: Pearson Prentice Hall, 2011 [Biblioteca 
Virtual]�
CAMARGO, L� S� A�; VIDOTTI, S� A� B� G� Arquiteturada informação: uma abordagem prática para o 
tratamento de conteúdo e interface em ambientes 
informacionais digitais� Rio de Janeiro: LTC, 2011 
[Minha Biblioteca]�
CHAK, A� Como criar sites persuasivos: clique 
aqui� São Paulo: Pearson Education do Brasil, 2004 
[Biblioteca Virtual]�
DEITEL, P� Android 6 para programadores: uma 
abordagem baseada em aplicativos� 3� ed� Porto 
Alegre: Bookman, 2016 [Minha Biblioteca]�
FELIX, R� (Org�)� Arquitetura para computação mó-
vel� São Paulo: Pearson Education do Brasil, 2016 
[Biblioteca Virtual]�
FERREIRA, S� B� L�; RODRIGUES NUNES, R� e-
-Usabilidade� Rio de Janeiro: LTC, 2008 [Minha 
Biblioteca]�
GARRETT, J� J� The elements of user experience: 
user-centered design for the web and beyond. 2. 
ed. New York: New Riders, 2011.
GARRETT, J� J� Os Elementos da Experiência do 
Usuário, 2000� Disponível em: http://www.jjg.net/
elements/translations/elements_pt.pdf� Acesso 
em: 17 jan� 2020� 
KALBACH, J� Design de navegação Web: otimi-
zando a experiência do usuário� Porto Alegre: 
Bookman 2009 [Minha Biblioteca]� 
MCCARTHY, S� What is storyframing? UX Design, 
2016� Disponível em: https://uxdesign.cc/what-is-
-storyframing-21cd12dfe701� Acesso em: 07 dez� 
2019�
MOULIN, R� Ferramentas de UX: mapa de jorna-
da do usuário� In: Robson Moulin, 02 jun� 2018� 
Disponível em: http://www.robsonmoulin.com.br/
artigos/user-experience/ferramentas-de-ux-mapa-
-de-jornada-do-usuario/� Acesso em: 07 dez� 2019�
NIELSEN, J; MOHLICH, R� Heuristic evaluation of 
user interfaces. Proceedings of CHI’90. ACM, New 
York, abr�/1990� Disponível em: http://cs.ashoka.
edu.in/cs102/papers/heuristic-evaluation-of-us-
er-interfaces-nielsen.pdf� Acesso em: 13 jan� 2020�
ROGERS, Y�; SHARP, H�; PREECE, J� Design de inte-
ração: além da interação humano-computador� 3� 
ed� Porto Alegre: Bookman, 2013� 
UNGER, R�; CHANDLER, C� O guia para projetar UX: 
a experiência do usuário (UX) para projetistas de 
conteúdo digital, aplicações e web sites. Rio de 
Janeiro: Altabooks, 2009�
WIXON, D�; WILSON, C� The usability engineering 
framework for product design and evaluation. 
In: M� G� HELANDER, M� G�; LANDAUER, T� K�; 
PRABJU, P� V� (Eds�)� Handook of Human-Computer 
Interaction� Amsterdam: Elsevier, 1997� p� 653-658�