EXPERIÊNCIA DO USUÁRIO UX

AULA 4

Profª Lilian Barbosa

 CONVERSA INICIAL

Você já prestou atenção como todos os dias surgem novas tecnologias?

Novos gadgets, novas ferramentas, novos métodos. Mas uma coisa tem se
mantido constante: os fundamentos do design. Provavelmente, esses princípios
nunca mudarão. Nesta aula, iremos abordar alguns desses fundamentos, e
também os temas a seguir:

1. Princípio de proximidade;
2. Hierarquia e visibilidade;
3. Análise da tarefa;
4. Heurística;
5. Modelos mentais e metáforas.

Sugerimos que você domine esses princípios, busque aplicá-los em seu

trabalho se você deseja se destacar em sua carreira. Com certeza, o domínio
desses princípios fará com que seu design seja mais bem fundamentado e
assertivo.

CONTEXTUALIZANDO

Segundo o dicionário on-line Dicio, a palavra princípio apresenta, entre

outras, as seguintes definições: “O que fundamenta ou pode ser usado para
embasar algo; [...] Informação básica e necessária que fundamenta uma seção
de conhecimentos [...]”.
Um dos conhecimentos que compõem a experiência do usuário é a
percepção humana. A gestalt, compilou e organizou estas percepções visuais,
elaborou princípios de comunicação visual, que são aplicadas em diferentes
áreas do conhecimento, como o design gráfico, web design, design de interiores,
design de moda, dentre outras.
E é sobre alguns (porque é um conteúdo vasto) destes princípios
fundamentais de design que abordaremos nesta aula.

TEMA 1 – PRINCÍPIOS DE PROXIMIDADE

A proximidade é um dos vários princípios do Design, dentro dos contextos

de percepção visual.

2
 A teoria da Gestalt, considera a proximidade, um dos princípios essenciais
para compreensão da forma. Por isso, para entender a proximidade, é
necessário antes, saber o que é a Gestalt e entender o conceito de percepção
visual.
1.1 Gestalt
A gestalt surgiu no campo da psicologia experimental com teoria e
pesquisas sobre a forma. Foi desenvolvida por um grupo de psicólogos alemães
que realizou estudos sistemáticos sobre percepção, linguagem, memória,
motivação, entre outros (Gomes, 2012).

Não vemos partes isoladas, mas relações. Isto é, uma parte na

dependência de outra parte. Para a nossa percepção, que é resultado
de uma sensação global, as partes são inseparáveis do todo e são
outra coisa que não elas mesmas, fora deste todo. (Gomes Filho, 2008,
p. 16)

O objetivo de se usar os princípios da gestalt no design digital é criar uma

composição visual confortável aos olhos dos usuários e de uso intuitivo, pois
segundo a teoria, o todo é percebido antes das partes que o compõem, com
base na maneira como suas partes estão organizadas.
A gestalt estabelece a existência de oito leis que determinam como
agrupamos o que enxergamos, de acordo com nossa percepção visual. Estas
leis são: unidade, segregação, unificação, fechamento, continuidade,
proximidade, similaridade (ou semelhança) e pregnância. Estas leis se
relacionam e se complementam.
A pregnância da forma é a lei básica da percepção visual da gestalt. Ela
é percebida pela simplicidade da forma e do poder de comunicação de seu
significado, ou seja, quanto mais simplicidade, clareza, organização visual,
facilidade e rapidez de leitura a forma apresentar, maior pregnância a imagem
possui (Gomes Filho, 2008),

1.2 Percepção visual

A percepção humana envolve todos os nossos sentidos: visão, audição,

olfato, paladar e tato – os quais fazem parte do sistema sensorial ou perceptual.
Naturalmente, a visão é o sentido de maior importância para a comunicação
visual.

3
 Todo designer deve entender como ocorre a percepção visual, pois ela
torna possível ao usuário o processamento das informações visuais de uma
interface.
A percepção visual é processada em dois estágios: o primeiro, a pré-
atenção, quando os padrões são observados de forma muito rápida e
desinteressada; a segunda e a atenção visual, uma fase intencional, que ocorre
quando buscamos as informações sugeridas pela própria imagem. O estágio de
pré-atenção é importante, pois, sem ele, o segundo momento não ocorrerá
(Gomes, 2012).
Um exemplo deste fenômeno acontece com uso de imagens ambíguas
(permitem mais de uma interpretação), como o exemplo mostrado na Figura 1.

Figura 1 – Imagem ambígua

Crédito: lnm/Adobe Stock.

1.3 Princípio de proximidade

O princípio da proximidade é um dos princípios da gestalt com o maior

potencial de impacto sobre as aplicações digitais, pois requer esforço cognitivo
para sua assimilação (Lowdermilk, 2013).
O princípio de proximidade refere-se à posição dos elementos em relação
a outros. Por exemplo, quando vários elementos são colocados próximos um ao
outro, eles são percebidos como um todo, e não como um objeto isolado. No

4
 entanto, quando o espaço vazio entre eles aumenta, isto é, distanciando os
elementos uns dos outros, estes são percebidos como formas individuais.
Um exemplo de aplicação deste conceito é a logomarca da Unilever –
mostrada na Figura 2 –, que é formada por vários elementos, com diferentes
formas, todos da mesma cor.

Figura 2 – Logomarca da Unilever

Créditos: Piotr Swat/Shutterstock.

Ao observarmos a Figura 2 com mais atenção, percebemos os

microelementos com formatos diferentes, que simbolizam as áreas de atuação
e os produtos da empresa, todos agrupados e com a mesma cor azul, formando
uma unidade. A tendência é que nosso cérebro interprete esse tipo de
composição como um elemento único.
O princípio da proximidade também é conhecido como princípio do
agrupamento e, como já comentamos, a gestalt defende que não enxergamos
partes isoladas, mas elementos que se relacionam, ou seja, uma parte depende
de outra para a percepção do todo (como vimos no exemplo) (Gomes Filho,
2008).
No contexto de interfaces digitais, podemos notar o conceito de
agrupamento no pacote Office, da Microsoft, cujo objetivo é tornar intuitivo o uso

5
 dos elementos em vários programas do pacote. Observe que os elementos que
executam funções similares são agrupados, e esses se repetem em vários
programas, como Word, Excel e Powerpoint. Elementos essenciais, tais quais
copiar, colar e cortar, são mantidos agrupados, facilitando a assimilação das
funções e promovendo o uso intuitivo.
Dessa maneira, os usuários têm mais facilidade para aprender a usar os
diferentes programas, pois assimilam, intuitivamente, os elementos principais
que se repetem em cada um deles. Se você domina algum programa do Office,
há uma grande possibilidade de você conseguir usar outro programa do mesmo
pacote sem muito esforço. Observe que este conceito de
proximidade/agrupamento, se repete em vários softwares, como os da Adobe,
por exemplo.

Figura 3 – Princípio de proximidade

Créditos: PixieMe/Shutterstock.

Por fim, entendemos que nossa tendência natural é interpretar padrões,

por isso, quando visualizamos formas ou funções semelhantes agrupadas,
fazemos intuitivamente o uso do conceito de proximidade ou de agrupamento de
elementos. Em uma interface digital, este princípio torna o uso desses elementos
mais intuitivo e melhora a usabilidade do sistema.

6
 TEMA 2 – HIERARQUIA E VISIBILIDADE

Quando projetamos interfaces, é como se contássemos uma história. Ela

tem fases – começo, meio e fim. No design digital, um dos recursos para conduzir
o usuário neste percurso é a hierarquia e visibilidade dos elementos e
informações do sistema (Pereira, 2018).

2.1 Hierarquia

Você, como designer, decidirá quais são as sequências de ações que o

usuário precisará realizar, de maneira eficiente, eficaz e satisfatória, em uma
interface digital. Para isso, você deverá usar hierarquias dos elementos dessa
interface, conduzindo o usuário por meio de ações simples e intuitivas, passo a
passo.
Um recurso fácil para colocar as informações em ordem hierárquica é
alterar o tamanho da fonte, deixando maior o que é mais importante, criando uma
hierarquia de títulos e, para diferenciar a relevância, usar pelo menos dois
tamanhos de fonte diferentes – um, para subtítulos e, outro, para o corpo do
texto; mas não mais do que três tamanhos, para não incorrer em excesso de
informação, que pode deixar o texto poluído, causar distração e confusão, perda
da harmonia e o sentido de hierarquia.
Figura 4 – Blog pessoal

Fonte: Barbosa, 2021.

7
 O tamanho da fonte indica a importância da informação para o usuário.
Por exemplo: em um blog, o título deve chamar a atenção, por isso, vem em
fonte maior, informando do que se trata o texto. O subtítulo, por sua vez, adiciona
contexto e complementa a informação do título, fornecendo uma síntese do que
vem na sequência. Neste ponto, o usuário decide se continua ou não a leitura,
de acordo com seu interesse. Por fim, vem o corpo do texto, em fonte de tamanho
menor.
A mesma lógica deve ser utilizada no design da interface de um aplicativo.
O segredo é o equilíbrio entre os elementos, evitando sobrecarregar com
informações visuais para não confundir o usuário.
A sequência das ações deve ser organizada em tarefas e subtarefas,
seguindo o fluxo natural, como elementos com leitura da esquerda para a direita,
de cima para baixo. Deixe o fluxo de informações o mais natural possível, e
aplique o conceito de similaridade/agrupamento dos elementos, como vimos no
tema anterior.
Vale a máxima: menos é mais. Adote um visual minimalista em seu
design. O minimalismo permite que o uso da interface se mostre fácil de usar
pelo usuário, evitando erros pelo excesso de informação.
Observe que o Google, o maior buscador do planeta, tem apenas um
retângulo no centro da página, indicando que é só ali que você pode fazer uma
busca. Não há dúvida, não precisa de um tutorial. Não importa a linguagem, em
qualquer lugar do planeta, existirá apenas aquela caixa retangular no centro de
uma página branca. O elemento visual que se alterna é o Doodle1, uma variação
do logotipo do Google e que virou uma maneira da empresa se comunicar com
os usuários. Ele é alterado diariamente, de acordo com datas comemorativas ou
homenagens a personalidades, instituições ou eventos.

2.2 Visibilidade

A hierarquia define a ordem de disposição dos elementos e, a visibilidade,

estabelece o que deve ficar destacado e em que momento. Além disso, esta
última permite uma boa usabilidade, pois ajuda o usuário a perceber como e
quando os elementos devem ser usados.

1
Conheça mais sobre os doodles do Google em <https://www.google.com/doodles>.
8
 Por exemplo, os elementos devem surgir no momento da ação e
desaparecer (ou ficarem sombreados), quando não for mais necessário,
tornando a interface mais limpa, minimalista, sem excesso de informações em
cada etapa do uso.
A visibilidade é qualquer recurso que você use para atrair o foco visual
para um elemento ou ação do usuário na interface. Há várias maneiras para fazer
isso, como: a escolha do tipo de fonte, em diferentes estilos e tamanhos; o uso
de recurso de opacidade em um item, aumentando ou reduzindo sua visibilidade;
a aplicação de itens com cores diferentes e com maior contraste para chamar
mais atenção (Lowdermilk, 2013).
Outro aspecto do princípio de visibilidade é fornecer um feedback visual,
que é uma resposta do sistema à entrada do usuário, exibindo alguma indicação
de que recebeu a informações que o usuário emitiu. Um exemplo disso é
fornecer uma mensagem como “Pesquisando...”, para indicar que o sistema está
trabalhando para atender a um comando. Desse modo, o usuário saberá que
ocorreu uma interação, pois, sem isso, ele pode ficar confuso, sem saber se sua
ação foi recebida ou não pelo sistema (Lowdermilk, 2013).

Saiba mais
Para conhecer mais sobre visibilidade aplicada a sistemas e outros
princípios, leia o artigo “Design de Interação: 6 Princípios Fundamentais”
(disponível em: <https://medium.com/aela/design-de-intera%C3%A7%C3%A3o-
os-6-princ%C3%ADpios-fundamentais-d2cb1e585cad>. Acesso em: 15 set.
2021).

2.3 Planejamento de hierarquia e visibilidade

Um dos recursos que pode ser usado para planejar como será a interação
do usuário com a interface e o que acontece nessa interação, é pensar e discutir
com a equipe, sobre o que é prioridade em cada momento. Por exemplo, fazendo
um roadmap de funcionalidades ou mapa do site, com um diagrama das páginas
de organizadas hierarquicamente (Teixeira, 2014).
Nesse momento, você pode utilizar vários recursos, como um quadro ou
parede com notas adesivas (post-its), que podem ser movidas, alternando
possibilidades e jornadas que o usuário possa fazer. Essa etapa pode ser
realizada antes da etapa do wireframe, pois permite que você, com a equipe de

9
 desenvolvimento do projeto, possa simular várias possibilidades de disposição
dos elementos, trocando as notas adesivas de lugar. Se estes caminhos a serem
percorridos pelo usuário, já tiverem sido discutidos com a equipe de projeto, no
momento de representá-los com wireframe, mockup ou protótipo, a aceitação do
sistema será muito mais rápida.
Você pode iniciar o planejamento fazendo uma analogia simples, como
pensar em um funil, usando os “3Cs”: conhecer, compreender, comprar. O que
você quer que o usuário conheça, compreenda e compre? Comprar, aqui, não
representa necessariamente a aquisição de um produto, mas o engajamento na
ideia apresentada.
Em síntese, Teixeira (2014, p. 47) sugere que, ao pensar na interface para
o usuário, o que deve ser resolvido é:

• A hierarquia da interface: a prioridade dos elementos para compor o layout

final do produto;
• Disposição das informações na tela;
• Quantidade e tipo de conteúdo;
• Menus e elementos de navegação;
• Comportamento em telas de tamanho variado, com designs responsivos
que funcionem em diferentes dispositivos, além de como o conteúdo da
interface se comporta em diferentes tamanhos e orientações de tela;
• Representação das funcionalidades do sistema;
• Variações e estados diferentes do sistema.

Lowdermilk, (2013, p. 70-75) e Teixeira (2014) elencam alguns critérios

que devem ser observados em relação à hierarquia e visibilidade em interfaces
digitais.

• Exposição progressiva: ocorre quando mostramos ao usuário os

recursos disponíveis e ocultamos opções que não estão acessíveis no
momento, reduzindo a carga cognitiva para ele. É um recurso muito usado
no menu de sites. Os submenus só aparecem quando são requisitados
pelo usuário.
• Confirmação: uma maneira de evitar que os usuários façam a coisa
errada é pedir uma confirmação. Por exemplo: na maioria dos aplicativos,
se o usuário tentar fechar um documento sem salvá-lo, um aviso será

10
 exibido, perguntando se o usuário gostaria de salvar o documento antes
de sair do programa.
• Lei de Hick: está relacionada ao princípio de hierarquia e visibilidade.
Trata-se de, basicamente, calcular o tempo que o usuário leva para tomar
uma decisão como resultado do número de escolhas que ele precisa
fazer. Quanto mais itens aparecerem e o usuário precisar agir ou decidir,
mais tempo ele vai levar para entender o que precisa fazer primeiro,
causando perda de tempo e fadiga. Essa lei também é conhecida como
“critério de tempo e reação do usuário”.
• Lei de Fitt: está relacionada ao princípio de proximidade, levando em
consideração o tamanho dos elementos, como botões, menus etc. Até
pouco tempo, era utilizada apenas em interfaces orientadas ao uso do
mouse, atualmente, no entanto, está relacionada ao toque. Por exemplo:
se sua intenção é que o usuário clique em um botão, o tamanho desse
botão será ditado pela distância entre o botão e o toque do usuário. Se os
botões estiverem muito próximos, o usuário pode apertar um botão que
dispara uma ação indesejada, causando frustração no uso da interface.

TEMA 3 – ANÁLISE DE TAREFAS

A análise de tarefas é o exame completo de uma tarefa ou processo em

cada etapa realizada por um usuário. Quem faz essa análise é o designer que
aplica o teste de usabilidade, observando o usuário durante a execução de uma
tarefa.

A análise de tarefas refere-se à ampla prática de aprender sobre como

os usuários trabalham (ou seja, as tarefas que realizam) para atingir
seus objetivos. A análise de tarefas surgiu do design instrucional (o
design do treinamento) e dos fatores humanos e da ergonomia
(compreender como as pessoas usam os sistemas para melhorar a
segurança, o conforto e a produtividade). A análise de tarefas é crucial
para a experiência do usuário, porque um design que resolve o
problema errado (ou seja, não oferece suporte às tarefas dos usuários)
irá falhar, não importa quão boa seja sua interface. (Rosala, 2020,
Tradução nossa)

11
 Figura 4 – Análise da tarefa

Fonte: Elaborado com base em Nielsen, 2001.

O processo de análise de tarefas pode ser dividido em duas etapas

distintas:

• Etapa 1: agrupamento das informações sobre objetivos e tarefas,

observando e conversando com usuários e/ou especialistas no assunto.
• Etapa 2: análise das tarefas realizadas para atingir as metas, a fim de
compreendermos o número geral de tarefas e subtarefas, sua sequência,
sua hierarquia e sua complexidade. As duas etapas são documentadas
(Rosala, 2020).

A análise de tarefas tem como objetivo, portanto, compreender totalmente

as etapas necessárias para concluir uma tarefa para que se possa melhorar a
interface do produto (Lowdermilk 2013).

Análise da tarefa é uma ferramenta de análise da atividade do usuário

ou consumidor em relação a determinada ação, função, produto ou
ambiente. É uma fonte de inspiração para o projeto, pois se pode
descobrir um novo uso, uma necessidade ou um desconforto que pode
ser solucionado. Para isso, podem ser utilizadas fotografias ou vídeos,
mas, preferencialmente, observações que registrem os detalhes da
interação [...]. (Pazmino, 2015, p. 126)

Para isso, é necessário que o designer tenha clareza do que espera desta
análise, qual a quantidade de usuários necessária para fazer a análise, quais as
técnicas e ferramentas utilizar, como fazer o registro das respostas dos usuários,
além de estabelecer quais são as métricas de análise de eficiência, eficácia e
satisfação do usuário. Estas podem ajudar a apoiar as decisões sobre quando
lançar um produto, entre outras questões (Nielsen, 2001).
Como vimos em conteúdo anterior, de acordo com a NBR ISO 9241-11,
“a usabilidade é a medida na qual um produto pode ser usado por usuários
específicos, para alcançar objetivos específicos com eficácia, eficiência e
satisfação, em um contexto de uso específico” (ABNT, 2011).

12
 Em relação às ações e respostas dos usuários, é necessário que não haja
dúvidas quanto ao feedback de cada usuário. O profissional deve confirmar se
entendeu por que o usuário agiu diferente do previsto em uma tarefa e como ele
reportou essa atitude, para evitar erros de interpretação que possam impactar
nos resultados na etapa de análise.
É possível interpretar erroneamente o que os usuários explicam. Portanto,
só repetindo as percepções do que foi relatado pelo usuário será possível ter
certeza de que ele entendeu as explicações corretamente (Lowdermilk, 2013).

TEMA 4 – HEURÍSTICA

A heurística é o processo de análise de uma aplicação em relação aos

padrões e princípios já utilizados por muitas empresas de software, as quais
fornecem diretrizes de usabilidade de seus sistemas.

análise heurística é [...] uma análise minuciosa de um produto que

destaca as boas e más práticas de UX, usando princípios conhecidos
de Design de Interação como guia. Ajuda a visualizar o estado atual do
sistema em matéria de usabilidade, eficiência e eficácia da experiência.
(Teixeira, 2014, p. 30)

Nielsen (2020), criou, em 1994, dez heurísticas de usabilidade para

design de interface de usuário, e as atualizou em 2020 (veja o box Saiba mais,
ao final desse tema).
Estes princípios são chamados de heurísticas devido ao fato de serem
regras gerais, ou seja, adotadas de maneira genérica pelo mercado, e não
diretrizes específicas de usabilidade. Elaboramos, com base no artigo, um
resumo das 10 heurísticas para design de interação desenvolvidas por Nielsen
para que você possa estudar e aplicar esse importante conteúdo em seus
projetos de UX Design. Estude esses princípios, releia, aprenda e os memorize,
pois você sempre irá utilizá-los.

1. Visibilidade do status do sistema – O sistema deve sempre manter os

usuários informados sobre o que está acontecendo por meio de
feedback apropriado dentro de um período de tempo razoável.
2. Correspondência entre o sistema e o mundo real – O sistema deve
falar a linguagem dos usuários. Use palavras, frases e conceitos
familiares ao usuário.
3. Controle e liberdade do usuário – Os usuários costumam realizar
ações por engano. Eles precisam de uma “saída de emergência”
13
 claramente identificada para que eles deixem a ação indesejada. As
saídas permitem que os usuários permaneçam no controle do sistema e
evitem que eles travem e se sintam frustrados.
4. Consistência e padrões – Os usuários não devem se perguntar se
palavras, situações ou ações diferentes significam a mesma coisa. Siga
as convenções da plataforma e do setor usando a mesma linguagem
visual.
5. Prevenção de erros – Boas mensagens de erro são importantes, mas
os melhores sistemas evitam a ocorrência de problemas.
6. Reconhecimento em vez de recordação – Minimize a carga de
memória do usuário tornando visíveis os elementos, ações e opções. O
usuário não deve ter de se lembrar de informações de uma parte da
interface para outra.
7. Flexibilidade e eficiência de uso – O design da interface deve atender
tanto a usuários inexperientes quanto experientes.
8. Design com estética minimalista – As interfaces não devem conter
informações irrelevantes ou raramente necessárias. Cada unidade extra
de informação em uma interface compete com as unidades relevantes.
9. Reconhecer, diagnosticar e recuperar erros – As mensagens de erro
devem ser expressas em linguagem simples.
10. Ajuda e documentação – O sistema não deve precisar de nenhuma
explicação adicional. No entanto, pode ser necessário fornecer
informações adicionais para ajudar os usuários a entenderem como
concluir suas tarefas.

Saiba mais
A versão atualizada em 2020 do artigo de Nielsen, encontra-se no site da
NN/g (já comentamos a respeito do grupo NN/g em conteúdo anterior). Além
desse, os links de outros materiais estão disponíveis na lista a seguir. Embora
os artigos estejam em inglês, você pode traduzi-los com tradutores on-line. Vale
a pena!

1. “10 Usability Heuristics for User Interface Design” (artigo atualizado com
exemplos de aplicação para cada heurística, além de um poster para
download: <https://www.nngroup.com/articles/ten-usability-heuristics/>.
Acesso em: 15 set. 2021;

14
 2. “Usability applied to life” (com exemplos de aplicação no dia a dia para cada
heurística de Nielsen):
<https://www.zenhaiku.com/archives/usability_applied_to_life.html> Acesso
em: 15 set. 2021;
3. As 10 heurísticas de Nielsen explicadas pela equipe NN/g (vídeo legendado):
<https://www.youtube.com/watch?v=cTtc90jCULU&list=PLJOFJ3Ok_idtb2Ye
ifXlG1-TYoMBLoG6I> Acesso em: 15 set. 2021.

TEMA 5 – MODELOS MENTAIS E METÁFORAS

O uso de modelos mentais e metáforas é como as pessoas transferem

conhecimento do mundo real para o mundo digital. Por exemplo, a maioria dos
aplicativos indica o recurso “Cortar” com a representação visual de uma tesoura,
pois temos familiaridade com esta imagem. Esse ícone ajuda a reforçar a
metáfora da função cortar, pois a maioria de nós sabemos como uma tesoura
funciona (Lowdermilk, 2013).
Precisamos estar cientes dos modelos mentais que os usuários estão
acostumados e aplicar, nas interfaces dos aplicativos, imagens e mensagem que
conectem as pessoas a esses modelos.
Muitos desenvolvedores escolhem ícones inadequados para aplicativos
por quererem inovar na linguagem, sugerindo imagens desconectadas da
realidade dos usuários e do contexto de uso do nicho de mercado do produto.
Cada setor tem uma linguagem própria, e precisamos estar atentos a ela para
que a comunicação seja eficiente.
Por isso, é necessário entender quais ícones fazem sentido para o nicho
do produto que está sendo desenvolvido, pois imagens e textos desconexos
podem induzir os usuários ao erro, deixando-os confusos na interação com a
interface, gerando frustração.

Se você está construindo um site de reservas de viagens, você pode

pensar que ter um coco como botão de pesquisa seria fofo e divertido.
Infelizmente, os usuários não têm um modelo conceitual de como um
coco se aplica. Uma lupa tem uma relação mais próxima para procurar
por algo. Isso ocorre porque muitos de nós sabemos que, no mundo
real, lupas são usadas para encontrar textos em livros e periódicos.
Embora eu o incentive a desafiar a sabedoria convencional e
impulsionar a inovação, alguns modelos devem ser usados sempre.
(Lowdermilk, 2013, p. 69, Tradução nossa)

Um modelo mental, no contexto dessa aula, é como os usuários acreditam

que um sistema funciona. Por exemplo, quando estão usando um site, os
15
 usuários têm uma ideia de seu funcionamento. Essa ideia é baseada em crenças
pessoais, não em fatos.
Quando uma pessoa acessa um site, ela tem certas expectativas de como
os elementos funcionam, ou o que acontece se ela clicar em algo, como a seta

de retorno de uma ação ( ).

Os usuários acreditam que o botão “Voltar” sempre os leva a apenas um
passo atrás, mas vamos supor que você, criativamente, coloque outro símbolo,

como um triângulo ( ), no lugar da seta; provavelmente, os usuários ficarão

confusos. Portanto, essas crenças alteram a maneira como o design deve ser
projetado, sendo necessário levar em consideração o modelo mental de quem
vai utilizá-lo.
A construção do pensamento dos usuários está relacionada ao que eles
idealizam em suas mentes, portanto, suas ações se baseiam em modelos
presumíveis. Como já citamos, o ícone de uma tesoura remete à ação de cortar.
Já existe um modelo mental desta ação. Portanto, os designers devem fazer com
que a interface do usuário seja de fácil assimilação, intuitiva, para comunicar com
clareza o que o sistema realiza, de modo a proporcionar uma boa usabilidade e
interação com a interface (Nielsen, 2010).
Cada ser humano é diferente sob vários aspectos – principalmente os
cognitivos. Os modelos mentais estão no cérebro de cada usuário, e diferentes
usuários podem ter diferentes modelos mentais.
Um grande desafio é fazer com que o designer entenda a diferença entre
esses modelos mentais, assim como o que pode funcionar para diferentes
públicos e nichos de mercado. Por exemplo, a linguagem visual de um aplicativo
para venda de itens de luxo será diferente da utilizada em um app voltado a
consumidores de baixa renda.
Os modelos mentais são um conceito fundamental para o
desenvolvimento de interfaces de assistência ao usuário ou tutoriais. As
informações devem ser curtas, objetivas e tenham, de preferência, modelos
visuais, com fluxogramas, gráficos ou ilustrações com palavras-chave de apoio.
Uma interface será mais intuitiva à medida que mais ela se assemelha ao
modelo mental do usuário. O uso é intuitivo, simples e fácil de navegar. Por isso,
respeitar o modelo mental das pessoas é a base para projetos de sistemas
centrados no usuário.

16
 TROCANDO IDEIAS

Comece a observar os aplicativos que você utiliza e o conceito de modelo

mental usado. Escolha dois que sejam para o mesmo nicho e procure elementos
que se assemelhem. Acesse o fórum, poste esses elementos e pergunte aos
colegas se eles sentem diferença na percepção desses elementos em seus
contextos.
Verifique, ainda, se há modelos mentais diferentes para elementos que
você conhece. Talvez você se surpreenda como pessoas de diferentes regiões
pensam sobre elementos visuais que, para você, parece muito óbvios. Participe
do fórum, interaja e se surpreenda.

NA PRÁTICA

Atenda ao briefing a seguir.

Esboce um wireframe de baixa fidelidade (desenho no papel) de uma
interface simples, com, no máximo, três telas e estabeleça uma hierarquia ou
ordem de apresentação dessas.
Esse wireframe deverá ser de um aplicativo que mostrará três lugares que
você frequenta em sua vizinhança. Pode ser a padaria que você mais gosta, o
supermercado, a praça, a escola etc. Escolha esses três lugares e determine a
hierarquia na qual as telas irão aparecer.
Figura 5 – Wireframe baixa fidelidade

Crédito: maicasaa/Shutterstock

17
 Respostas possíveis

Agora que você selecionou três lugares, pense sobre a hierarquia na qual
eles irão aparecer, ou seja, qual lugar vem primeiro, em segundo e em terceiro.
Na sequência, pense sobre o motivo de sua escolha: por que você escolheu esta
ordem? Talvez seja pela ordem dos que você mais frequenta, ou por considerar
a beleza de cada um, ou, ainda, por ter boas recordações destes lugares. Mesmo
que você não saiba conscientemente o porquê, o fato é que houve um critério.
Lembra daquele caderno ou bloco de notas de insights sobre o qual
falamos? Que tal anotar o que veio à sua mente no momento de suas escolhas?
Agora, se você fosse colocar em votação pelos seus vizinhos, para escolherem
qual destes lugares eles mais gostam, que metáfora você usaria para essa
classificação? Você poderia usar metáforas de concordância ou de símbolos,
como estrelas, likes ou corações.

Para pensar:

Talvez se você fosse realmente perguntar a pelo menos cinco vizinhos

sobre que lugares eles gostam na vizinhança, com base no número de likes,
estrelas ou corações que cada lugar receber (dependendo da metáfora de
classificação definida por você), você saberia qual dos lugares os vizinhos mais
gostam e pode ser que eles não escolhessem a mesma ordem ou hierarquia que
você.
Talvez eles não gostem de nenhum dos lugares que você escolheu, ou
lhe contassem sobre outros lugares que você ainda desconhece. É assim que
descobrimos possibilidades em UX (user experience). Conversando com as
pessoas, entendendo o que elas preferem – e não o que nós preferimos. Não
se trata de nós, mas deles.

FINALIZANDO

Relembrando algumas boas práticas para conseguir uma boa hierarquia

na interface, sugeridas por Teixeira (2014):

1. Organize itens similares com visual similar;

2. Use o contraste a seu favor para atrair o olhar do usuário;
3. Categorize. Agrupe links por temas;

18
 4. Use tamanhos de fonte diferentes para criar hierarquia na página;
5. Limite a quantidade de tamanhos de fonte para manter harmonia.

Uma sugestão: comece a observar a sequência das informações que

surgem nos sites e apps que você visita, refletindo sobre a seguinte questão: Por
que os elementos aparecem nesta sequência? Conecte essa reflexão aos temas
que vimos nesta aula:

1. Princípio de proximidade;
2. Hierarquia e visibilidade;
3. Análise da tarefa;
4. Heurística;
5. Modelos mentais e metáforas.

Tenha um pequeno caderno de insights, seja ele digital ou físico. Anote

suas percepções. Você pode se surpreender com a quantidade de ideias que
este pequeno caderno pode te ajudar a ter.
Até a próxima!

19
 REFERÊNCIAS

ABNT – Associação Brasileira de Normas Técnicas. NBR ISO 9241-11:2011:

Requisitos ergonômicos para o trabalho com dispositivos de interação visual
Parte 11: Orientações sobre usabilidade. Rio de Janeiro, 2011.

GOMES, L. C. G. Composição visual. Curitiba: Ao Livro Técnico, 2012

GOMES FILHO, J. Gestalt do objeto: sistema de leitura visual da forma. 8. ed.

Rev. e Amp. São Paulo: Escrituras, 2008.

LOWDERMILK, T. User-Centered Design. 1st Edition. Newton: O’Reilly Media,

2013.

NIELSEN, J. Usability Metrics. Nielsen Norman Group, January 20, 2001.

Disponível em: <https://www.nngroup.com/articles/usability-metrics/>. Acesso
em: 10 set. 2021.

NIELSEN, J. 10 Usability Heuristics for User Interface Design. Nielsen Norman

Group, November 15, 2020. Disponível em:
<https://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em: 10 set.
2021.

NIELSEN, J. Mental Models. Nielsen Norman Group, October 17, 2010.

Disponível em: <https://www.nngroup.com/articles/mental-models/>. Acesso em:
13 set. 2021.

PAZMINO, A. V. Como se cria: 40 métodos para design de produtos. São Paulo:

Blucher, 2015.

PEREIRA, R. User experience design: como criar produtos digitais com foco
nas pessoas. São Paulo: Casa do Código, 2018.

PRINCÍPIO. In: Dicio: dicionário online de português. Disponível em:

<https://www.dicio.com.br/principio/>. Acesso em: 14 set. 2021.

ROSALA, M. Task Analysis: Support Users in Achieving Their Goals. Nielsen

Norman Group, September 20, 2020. Disponível em:
<https://www.nngroup.com/articles/task-analysis/>. Acesso em: 13 set. 2021.

TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do

Código, 2014.

20