User Experience Modelos Visuais

Prévia do material em texto

USER EXPERIENCE 
MODELOS VISUAIS
Mundo Tech
SUMÁRIO
Modelos visuais ..........................................................................................................3
Wireframe, mockup e protótipo ..............................................................................3
Wireframes: design de baixa fidelidade ......................................................................4
Mockups: design de média fidelidade..........................................................................6
Protótipo ...........................................................................................................................8
Processo de avaliação de interfaces de sistemas interativos ................................10
Projeto de interface de um software .........................................................................10
Avaliação de interfaces ................................................................................................12
Avaliação heurística ......................................................................................................12
Teste de usabilidade .....................................................................................................13
As 10 Heurísticas de Nielsen .......................................................................................15
Referências ................................................................................................................20
3
MODELOS VISUAIS
 Um projeto de UX bem-sucedido depende muito de testes para atingir as 
metas e objetivos de um projeto. Wireframes, mockups e protótipos, que são 
tipos de modelos visuais (que você conhecerá neste estudo), permitem que os 
designers criem plantas e modelos do produto final para testes de usabilidade. 
O problema é que muitas pessoas usam estes elementos de forma equivocada, 
quando na verdade são todos diferentes e usados em estágios diferentes do 
processo de design. 
Outro item que você irá acompanhar neste estudo é o processo de avaliação 
de interfaces de sistemas interativos. A função de avaliação é acessar projetos 
e testar sistemas para garantir que eles realmente se comportem como o 
esperado e atendam aos requisitos do usuário. Por fim, serão apresentadas as 
10 Heurísticas de Nielsen. Você verá que estas heurísticas são responsáveis por 
inspecionar a usabilidade de uma interface e ajudar a identificar problemas de 
usabilidade no design da interface do usuário. Continue sua busca por novos 
conhecimentos e dê mais um passo nesta área em constante expansão no 
mercado! 
WIREFRAME, MOCKUP E PROTÓTIPO
Você já gastou uma quantidade enorme de tempo e recursos projetando 
algo que um cliente ou usuário descarta em questão de segundos? Nunca é 
agradável, mas muitas vezes evitável.
Um modelo de uma apresentação inicial das ideias é exatamente o que se 
conhece como prototipagem de baixa fidelidade. Ao contrário da prototipagem 
de alta fidelidade, este método requer menos tempo, habilidades especializadas 
e recursos. Seu objetivo não é impressionar os usuários, mas aprender com eles. 
Em vez de impressionar as pessoas com um produto, o objetivo da prototipagem 
de baixa fidelidade é fazer com que os usuários se surpreendam com suas 
percepções (PRESSMAN, 2016). Confira a evolução da fidelidade (baixa, média e 
alta) de um protótipo no exemplo apresentado na sequência.
4
Botão
TÍTULO
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Sed eu 
nunc nisl. Nulla id magna 
tincidunt, interdum nunc nec, 
posuere arcu. Etiam sodales 
venenatis sem, id commodo dui 
faucibus non. 
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Sed eu 
nunc nisl. Nulla id magna 
tincidunt, interdum nunc nec, 
posuere arcu. Etiam sodales 
venenatis sem, id commodo dui 
faucibus non. 
Sketch Wireframe Mockup Protótipo
Alta fidelidade
Baixa fidelidade Alta fidelidadeEstática/interativa (prototipação)
Pr
od
uç
ão
Br
ai
ns
to
rm
Figura 1 - Evolução de um protótipo: baixa, média e alta fidelidade
Fonte: adaptado de Clark (2022)
Confira uma breve definição de cada tipo de protótipo:
 › Sketch: são desenhos feitos à mão livre em um pedaço de papel ou em 
uma ferramenta digital que fornece uma representação básica do seu 
conceito.
 › Wireframe: são artefatos de design de baixa fidelidade que representam 
apenas elementos essenciais da interface do usuário.
 › Mockup: é uma visualização de média ou alta fidelidade e fornece a 
aparência visual do design do produto. É ótimo para avaliar a aparência do 
design.
 › Protótipo: é um modelo funcional de um aplicativo ou página da web, 
permitindo que os designers simulem a interação do usuário.
Wireframes: design de baixa fidelidade
Um wireframe é uma maneira de apresentar um design de uma interface de 
baixa fidelidade. É a representação gráfica de um aplicativo ou site que contém 
os elementos mais essenciais e o conteúdo. A este respeito, um wireframe 
ajudará a reunir as coisas e ver uma representação genérica (SEGURADO, 2015).
Algumas características de um wireframe são: mostrar os principais blocos de 
conteúdo; desenhar o contorno e a estrutura do layout; descrever a IU (Interface 
de Usuário) de forma mais básica. Uma maneira para criar estes modelos é 
fazê-los à mão ou utilizar as ferramentas de wireframing, como UXpin (https://
www.uxpin.com) e Balsamiq (https://balsamiq.com). Confira um exemplo de um 
rabiscoframe, ou sketch, um wireframe feito à mão com lápis e papel, de um 
projeto de um aplicativo chamado CARBOmática.
https://www.uxpin.com
https://www.uxpin.com
https://balsamiq.com
5
Figura 2 - Exemplo de um wireframe (rabiscoframe ou sketch) de um aplicativo chamado CARBOmática
Fonte: adaptado de Pereira (2018)
Na figura, a seguir, acompanhe a evolução do wireframe do projeto de 
desenvolvimento de um aplicativo chamado CARBOmática.
Figura 3 - Exemplo de um wireframe de um aplicativo chamado CARBOmática
Fonte: adaptado de Pereira (2018)
6
Uma grande vantagem de criar um wireframe é que ele tem um custo 
relativamente baixo e pode ser feito rapidamente. Desta forma, você pode 
mostrá-lo a usuários em potencial e pedir apontamentos e sugestões, o que é 
ótimo, pois as pessoas prestarão mais atenção à funcionalidade e à experiência 
do usuário do que à estética. Em um próximo passo, a estética do projeto será 
trabalhada com mais rigor de detalhes.
Dica
Gostaria de conhecer as opções de recursos da 
ferramenta Balsamiq? Veja estes dois links, que 
apresentam tutoriais bastante simples para a 
construção de wireframes. Confira clicando no link 
ou acessando o QR Code com seu celular.
https://edmilsoncampos.files.wordpress.com/2013/06/
tutorial.pdf 
 
https://webdesign.tutsplus.com/pt/articles/a-beginners-guide-
to-wireframing--webdesign-7399
Mockups: design de média fidelidade
Um mockup é uma outra forma visual de representar um produto. Você 
acompanhou também que um wireframe representa essencialmente a estrutura 
de determinado produto. Já um mockup é responsável por apresentar como o 
produto irá se parecer. Mas, ainda assim, um mockup não é clicável (assim como 
o wireframe). Ao contrário de um wireframe, um mockup é uma exibição de 
design de média ou alta fidelidade.
Um mockup ajuda a guiar a tomada de decisão final em relação à paleta de 
cores, ao estilo visual e à tipografia de um produto. Nesta etapa, você também 
pode solicitar sugestões a seus usuários e aplicar as alterações necessárias. 
Isso economizará mais tempo do que voltar e fazer ajustes na interface depois 
de iniciar o desenvolvimento de um produto. Confira um exemplo, na figura, a 
seguir, de um mockup do aplicativo CARBOmática.
https://edmilsoncampos.files.wordpress.com/2013/06/tutorial.pdf
https://edmilsoncampos.files.wordpress.com/2013/06/tutorial.pdf
https://webdesign.tutsplus.com/pt/articles/a-beginners-guide-to-wireframing--webdesign-7399
https://webdesign.tutsplus.com/pt/articles/a-beginners-guide-to-wireframing--webdesign-7399
https://webdesign.tutsplus.com/pt/articles/a-beginners-guide-to-wireframing--webdesign-73997
Fluxo de navegação do usuário cadastrado
Login / Recuperar Senha
Visualizar
receita
Visualizar biblioteca
de receita
Criar novas
receitas
Visualizar
receitas salvas
Login Menu Tabela de contagem
de carboidratos
Figura 4 - Exemplo de um mockup de um aplicativo chamado CARBOmática
Fonte: adaptado de Pereira (2018)
Saiba Mais
Existem muitas ferramentas disponíveis no mercado 
para a criação de um mockup. Conheça algumas delas, 
clicando nos linka a seguir ou aproximando seu celular 
do QR Code: 
Marvel 
https://marvelapp.com 
 
InVision 
https://www.invisionapp.com 
 
Moqups 
https://moqups.com
https://marvelapp.com
https://www.invisionapp.com
https://moqups.com
8
Protótipo
De modo geral, um protótipo é uma representação de alta fidelidade de um 
produto, cujo objetivo é proporcionar a interação do usuário. Ao contrário 
do sketch e do wireframe, um protótipo é um produto clicável e navegável, 
permitindo que o usuário possa experimentar o conteúdo e as interações 
na interface. Na verdade, um protótipo é muito similar ao próprio produto 
(SEGURADO, 2015).
Um protótipo é feito para reduzir os custos de desenvolvimento de 
determinado produto até que a interface seja aprovada. Depois que o protótipo 
é testado, a equipe pode prosseguir com a codificação do sistema em alguma 
linguagem de programação e estruturar a persistência de dados.
Uma das vantagens de um protótipo é que ele é altamente interativo, 
permitindo que os usuários experimentem a interface e descubram o que 
gostam ou não nela. 
Saiba Mais
Mockplus, Figma e Adobe XD são ferramentas de 
prototipagem que você pode experimentar. Confira 
mais sobre os três clicando nos links a seguir ou 
aproximando seu celular do QR Codes. 
Mockplus 
https://www.mockplus.com
 
Figma 
https://www.figma.com
 
Adobe XD 
https://www.adobe.com/br/products/xd.html
https://www.mockplus.com
https://www.figma.com
9
Confira, na figura, a seguir, algumas telas do protótipo do aplicativo 
CARBOmática. 
Saiba Mais
Caso queira acessar e navegar pelo protótipo 
desenvolvido utilizando a ferramenta Figma, clique no 
link a seguir ou aproxime seu celular do QR Code.
https://www.figma.com/proto/CO5Fehy8CNVRHRv5pPaNZr9U/
CARBOm%C3%A1tica?node-id=142%3A552&viewport=520%2C2
56%2C0.25&scaling=scale-down
Figura 5 - Exemplo de um protótipo de um aplicativo chamado CARBOmática
Fonte: adaptado de Pereira (2018)
https://www.figma.com/proto/CO5Fehy8CNVRHRv5pPaNZr9U/CARBOm%C3%A1tica?node-id=142%3A552&viewport=520%2C256%2C0.25&scaling=scale-down
https://www.figma.com/proto/CO5Fehy8CNVRHRv5pPaNZr9U/CARBOm%C3%A1tica?node-id=142%3A552&viewport=520%2C256%2C0.25&scaling=scale-down
https://www.figma.com/proto/CO5Fehy8CNVRHRv5pPaNZr9U/CARBOm%C3%A1tica?node-id=142%3A552&viewport=520%2C256%2C0.25&scaling=scale-down
10
Processo de avaliação de interfaces de 
sistemas interativos
De acordo com Cybis (2015), uma interface é tudo o que se usa para interagir 
com algo. Ou seja, é a forma como a comunicação ocorre entre duas partes, por 
exemplo, entre um ser humano e uma máquina, que, em princípio, não podem 
ser conectadas diretamente. Uma interface de computador é um sistema de 
comunicação entre um usuário e uma máquina. Além de ser um meio pelo qual 
essa interação ocorre, as interfaces também são ferramentas que realizam 
diversas funções.
E a usabilidade? Segundo Cybis (2015), a usabilidade é uma área que determina 
métodos que visam à facilitação e à utilização de uma interface de modo 
satisfatório pelos seus utilizadores. A usabilidade representa a facilidade com 
que uma pessoa realiza uma determinada tarefa com um produto/serviço. É o 
resultado de decisões de design intencionais, baseadas em pesquisas e testes 
aplicados aos usuários com um objetivo: tornar o mais fácil possível para os 
usuários fazerem o que precisam com o produto.
Mas, como medir a usabilidade de uma interface? A norma ISO 9241, da 
Associação Brasileira de Normas Técnicas (ABNT), descreve que, para verificar 
o nível de usabilidade de uma interface, os seguintes elementos devem ser 
avaliados: eficácia, eficiência e satisfação (KRUG, 2006).
 › Eficácia: significa que a ação realizada pelo usuário deve ser executada de 
forma correta e completa.
 › Eficiência: refere-se aos recursos utilizados para que a atividade possa ser 
realizada por completo.
 › Satisfação: aspectos relacionados ao conforto e à facilidade durante o uso 
da ferramenta ou produto.
Projeto de interface de um software
O design de interface de um software é uma coleção de documentos 
que mostra a arquitetura de informação, os detalhes das operações, as 
especificações de requisitos e as características de interface. A documentação 
pode ser feita por meio de desenhos informais, protótipos ou wireframes 
(NIELSEN et al. 2007). Dessa forma, você pode obter uma visão geral de todo o 
sistema projetando a interface com base nos artefatos disponíveis.
11
Outros fatores que melhoram a qualidade do levantamento de requisitos 
são o detalhamento e a validação de requisitos. Um design de interface é 
geralmente um documento que descreve o leiaute de uma interface. O leiaute 
é uma forma de organizar elementos informativos em janelas, caixas de diálogo 
ou mensagens. Dessa forma, as posições de todos os lados da interface são 
inseridas na tela. A figura a seguir mostra um exemplo básico de design de 
interface de um website.
Fluxo de navegação do usuário cadastrado
Menu Principal
Links para comunicação institucinal
Menu
secundário
Produtos em
destaque
Produtos
da semana
Carrinho
de compras
Política de
compra e venda
Lista de
produtos
Lista de
produtos
Área para
Login
(Fornecedores)
(de acordo com busca)
(varia de acordo com 
o Menu principal)
(de acordo com busca) (textual)
Figura 6 - Projeto de interface
Fonte: Adaptada de Nielsen et al. (2007)
No exemplo apresentado, encontram-se especificações de todos os recursos 
colocados na interface para serem apresentados ao cliente. Cada espaço 
demarcado recebe um conjunto de elementos relacionado ao design da 
interface, como ícones, cores e fontes. São alguns benefícios da implementação 
do design de interface (KRUG, 2006):
 › examinar a definição dos requisitos funcionais como uma forma de 
melhorar uma visão específica do problema;
 › fornecer definições para documentos gerados durante as fases de 
requisitos e análise: casos de uso, modelos de entidade e relacionamento e 
diagramas de classes;
12
 › auxiliar os clientes na validação de requisitos funcionais;
 › ajudar a construir a identidade visual do sistema;
 › melhor a produtividade do seu processo de desenvolvimento de software 
antecipando problemas.
Avaliação de interfaces
Um bom design de interface deve ser baseado na forma como a avaliação 
será feita. Além disso, existem várias vantagens que podem ser destacadas 
na avaliação da interface, por exemplo: avaliar o retorno do investimento de 
usabilidade de uma interface; apresentar a satisfação do usuário a partir de 
parâmetros de qualidade; melhorar continuamente o software e identificar 
falhas operacionais antecipadamente (NIELSEN et al. 2007). A avaliação da 
interface não pode ser parametrizada apenas por requisitos de usabilidade. 
Portanto, há uma série de técnicas que podem auxiliar neste processo, como a 
avaliação heurística e o teste de usabilidade.
Avaliação heurística
É importante que você entenda o que é heurística, que determina um conjunto 
de regras e de métodos que guiam a descoberta, a invenção ou a solução de 
problemas (NIELSEN et al. 2007). A avaliação heurística é de baixo custo de um 
produto, de uma interface ou de um serviço. Essa técnica pode ser realizada por 
especialistas em usabilidade, que fazem a verificação da eficácia de requisitos de 
usabilidade presentes na tela.
Acompanhe algumas vantagens dessa avaliação: 
a) é rápida e de baixo custo; 
b) pode ser realizada nos protótipos de interface; 
c) não há necessidade de infraestrutura específica; 
d) permite avaliar a interfacede forma quantitativa e qualitativa. 
A avaliação heurística, apresenta, no entanto, algumas desvantagens: 
a) é necessário contratar um especialista em usabilidade; 
b) por ser um processo de verificação de qualidade, e não um teste, o 
usuário final não é consultado durante o processo (NIELSEN et al. 2007).
13
Essa metodologia consiste em avaliar interfaces com base em um conjunto 
de heurísticas, as quais podem ser definidas como um arranjo de experiências 
prévias e recorrentes. A interface é submetida à avaliação de especialistas 
em usabilidade, que dão seu parecer de forma a abordar todos os problemas 
encontrados na usabilidade da interface.
Para realizar a avaliação heurística, tem-se a presença de dois importantes 
atores: o comitê de usabilidade, aquele que coordena a avaliação e que 
contabiliza todos os resultados, definindo as heurísticas que serão utilizadas e 
fornecendo apoio técnico para os envolvidos na avaliação; e o avaliador, que é o 
especialista em usabilidade. Recomenda-se, para cada avaliação, a quantidade 
mínima de três avaliadores (NIELSEN et al. 2007).
E, como realizar essa avaliação de interface? Faça um planejamento da 
avaliação, definindo o que será avaliado na interface, quem são os usuários, 
quais são suas necessidades e quem serão os avaliadores. Em um segundo 
momento, defina as heurísticas que serão utilizadas na avaliação.
Posteriormente, é necessário que os avaliadores pontuem cada heurística e 
verifiquem se a interface atende ou não ao que é determinado pela heurística. 
Cada especialista analisa a interface com base nessas heurísticas, indicando em 
que local a heurística não foi atendida, os motivos e o grau de severidade dos 
erros. O grau é uma nota que pode ter os valores 0 (sem erro), 1 (problema que 
só pode ser resolvido com tempo extra), 2 (problema menor de usabilidade), 
3 (problema maior de usabilidade) e 4 (problema muito grave de usabilidade). 
Esses especialistas precisam informar ainda o porquê de a interface não atender 
à heurística selecionada, explicando detalhadamente os motivos. A avaliação é 
realizada individualmente por cada avaliador (no mínimo 3) e dura, geralmente, 
de 1 a 2 horas.
É recomendável que os especialistas realizem a leitura visual da interface 
pelo menos duas vezes: uma para verificar os diferentes fluxos da interface 
e a segunda para testar elementos específicos. Por fim, cada especialista irá 
gerar um relatório de sua avaliação, compartilhando-o com o restante da 
equipe. A avaliação heurística é uma ótima maneira de identificar problemas de 
usabilidade em um produto, gastando-se menos tempo e dinheiro. Quando bem 
conduzida e orientada essa avaliação, os resultados são muito produtivos. Como 
observado, a avaliação heurística tem um processo bem definido e claro.
Teste de usabilidade
É um processo avaliativo no qual há a participação de usuários do sistema, 
sob a supervisão de especialistas em usabilidade. Pode ser realizado na fase de 
desenvolvimento, atuando como ferramenta auxiliar na busca de problemas 
relacionados à interface (NIELSEN et al. 2007).
14
Essa técnica envolve uma simulação do ambiente real da aplicação, 
configurando-se como uma espécie de teste conclusivo e verdadeiro de 
usabilidade. É também eficaz na identificação de falhas, que só poderiam 
ser percebidas pelos usuários inexperientes quando da aplicação final. 
Diferentemente da avaliação heurística, o teste é realizado pelos usuários finais 
(NIELSEN et al. 2007).
Porém, há algumas desvantagens desse tipo de técnica: necessidade extensa 
de preparação e de planejamento, além de infraestrutura adequada para sua 
aplicação; contratação de equipe especializada em usabilidade; alto custo para 
sua execução; certa dificuldade para selecionar os usuários com perfis desejados 
para participar do teste.
O processo relacionado ao teste de usabilidade contém a presença dos 
seguintes atores: o comitê de usabilidade, que planeja e coordena todo o 
processo, realizando a contabilização de resultados e elaborando o plano de 
teste junto ao avaliador; o participante, que pode ser um usuário ou grupo 
responsável pela execução do teste; e o avaliador, especialista em usabilidade, 
que observa o teste e preenche o relatório de análise de resultados (NIELSEN et 
al. 2007).
Acompanhe agora a descrição do processo juntamente com as tarefas. O 
comitê de usabilidade elabora o plano de teste, que consiste em descrever os 
seguintes itens: qual o objetivo pretendido com a realização do teste; quais os 
resultados alcançados; quais pré-requisitos devem ser observados na seleção 
de participantes; como abordar e conduzir o teste junto aos participantes; 
descrever o ambiente físico e a equipe que participará do teste; listar as tarefas 
que serão realizadas pelos participantes; descrever as medidas de avaliação. Em 
seguida, o comitê seleciona os avaliadores e os participantes do teste. Então, o 
avaliador elabora o roteiro, que contém orientações gerais para a realização do 
teste. Após isso, o participante realiza o teste e preenche um questionário. O 
objetivo desse questionário é conhecer o perfil dos participantes do teste. Em 
seguida, é realizada a coleta de dados pelo avaliador, com base nas diretrizes do 
plano de teste. A coleta de dados pode ser feita de forma automática ou manual. 
Posteriormente, o avaliador emite um relatório final, que contém toda a análise 
de resultados do teste, e o encaminha para o comitê. Por fim, o comitê recebe o 
relatório e sugere mudanças na interface ao gerente de projetos (NIELSEN et al. 
2007).
15
As 10 Heurísticas de Nielsen
Existem muitas maneiras de avaliar software, mas há uma técnica muito 
conhecida chamada de Avaliação Heurística, que foi criada cerca de vinte anos 
atrás por Jakob Nielsen e colegas (NIELSEN et al. 2007). O conjunto final de 
heurísticas, que ainda é usado hoje, foi lançado em 1994.
Uma avaliação heurística é um método de inspeção de usabilidade para 
software de computador que ajuda a identificar problemas de usabilidade 
no design da Interface do Usuário (UI). Envolve especificamente avaliadores 
examinando a interface e julgando sua conformidade com princípios de 
usabilidade reconhecidos (as heurísticas).
A ideia básica da avaliação heurística é que você forneça a um grupo de 
pessoas, geralmente outras partes interessadas na equipe de design ou 
especialistas externos em design, um conjunto de heurísticas, ou princípios, que 
serão usados para procurar problemas em seu design. Cada um deles fará isso 
primeiro de forma independente, percorrendo uma variedade de tarefas para 
procurar essas inconformidades. Diferentes avaliadores encontrarão problemas 
e então se comunicarão e conversarão apenas no final.
Esta é uma técnica que você pode usar, seja em uma interface de usuário 
funcional ou em esboços de interfaces de usuário. Funciona muito bem em 
conjunto com protótipos de papel e outras técnicas rápidas e de baixa fidelidade.
As dez Heurísticas de Nielsen formam um conjunto muito bom. Elas fazem 
um bom trabalho ao cobrir muitos dos problemas que você verá em diferentes 
interfaces de usuário. Desse modo, você poderá eliminar ou identificar qualquer 
problema que não seja apropriado para o seu sistema. As 10 heurísticas estão 
listadas a seguir (NIELSEN et al. 2007; VR SYS, 2019).
1. Visibilidade do status do sistema.
2. Compatibilidade entre o sistema e o mundo real.
3. Controle e liberdade para o usuário.
4. Consistência e padronização.
5. Prevenção de erros.
6. Reconhecimento ao invés de memorização.
7. Eficiência e flexibilidade de uso.
8. Estética e design minimalista.
9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se 
de erros.
10. Ajuda e documentação.
Confira, no infográfico, a seguir, quais são estas heurísticas e o significado 
de cada uma delas.
16
A primeira heurística de Nielsen trata sobre o sentido mais importante para 
nos guiar pelo mundo: a visão. Dentro de um site, é importante sempre 
mostrar de forma visualpara o usuário onde ele se encontra e caso uma tarefa 
esteja em andamento, mostrar as etapas da mesma. Por exemplo, o processo 
de checkout de uma loja virtual baseado em etapas ajuda o usuário se localizar 
e também mostra os passos seguintes do processo.
A segunda heurística de Nielsen é a de que devemos utilizar referências do 
mundo real nos ambientes digitais, porém, é importante tomar cuidado, visto 
que as pessoas vivem em realidades e culturas diferentes. Por exemplo, o 
ícone de disquete até hoje é usado para representar a função salvar, mas é 
provável que um dia deixe de ser. Como essa tecnologia se tornou obsoleta, as 
novas gerações não terão contato com essa tecnologia, o que pode deixá-los 
confusos em relação ao ícone.
Oferecer controle e liberdade é muito importante para que o usuário use seu 
site ou loja virtual da forma como desejar. Em casos de sites e lojas virtuais, 
a responsividade é hoje o principal fator dessa heurística. Possibilitar que o 
usuário acesse seu site do aparelho que desejar é essencial em um país onde 
67% das pessoas possuem um smartphone.
VISIBILIDADE DO STATUS DO SISTEMA
COMPATIBILIDADE ENTRE SISTEMA E MUNDO REAL
CONTROLE E LIBERDADE PARA O USUÁRIO
17
A consistência e a padronização são essenciais para que o usuário tenha que 
aprender somente uma vez como executar uma tarefa. Por exemplo, as pessoas 
estão acostumadas a utilizar sites que tenham menus no topo, acessando de 
forma mais rápida a informação desejada. Além disso, é importante também 
seguir um padrão visual de design para que as pessoas não fiquem confusas.
Essa heurística trata sobre a importância de proteger os usuários de ações 
inconscientes que possam prejudicá-lo. Por exemplo, quando um usuário 
começa a escrever um post no facebook e clica para sair da página sem tê-
lo postado, o próprio facebook pergunta se é isso que o usuário realmente 
deseja. Esse princípio também pode ser aplicado em formulários on-line, 
carrinhos de compra, envio de e-mails, entre outros.
É importante evitar que o usuário tenha que utilizar sua memória dentro 
de seu site ou loja virtual. Nesse caso, é vital que a interface de certo modo 
consiga dialogar com o usuário para que ele não tenha que acionar suas 
memórias. Por exemplo, é muito comum que ícones tenham uma mensagem 
quando o usuário posiciona o mouse sobre ele, falando um pouco mais sobre a 
funcionalidade.
CONSISTÊNCIA E PADRONIZAÇÃO
PREVENÇÃO DE ERROS
RECONHECIMENTO EM VEZ DE MEMORIZAÇÃO
18
O conceito dessa heurística é que todos usuários, inclusive os mais leigos, 
consigam utilizar de modo eficiente as interfaces. Se você tem uma loja virtual 
é de extrema importância que ela também ofereça uma boa experiência para 
pessoas iniciantes. E o contrário também é válido. Com o tempo um usuário 
leigo tornasse experiente e demandará por formas mais rápidas de efetuar 
uma tarefa.
É muito importante que o design de seu site ou loja virtual seja minimalista e 
apresente de início somente as informações mais essenciais. Quando muitas 
opções são disponibilizadas na interface, as pessoas levam mais tempo 
para efetuar uma escolha e poderão até se perder. Além disso, uma estética 
minimalista faz com que o reconhecimento de ícones e ilustrações seja mais 
rápido.
Computadores não são perfeitos e erros são passíveis de acontecer quando 
estamos em um ambiente digital. Por isso, caso aconteça um erro é importante 
ajudar os usuários a reconhecerem, diagnosticarem e resolverem os erros. No 
caso de websites e lojas virtuais é muito importante ter uma boa página do 
erro 404, que informe e possibilite o usuário a voltar para a página anterior.
EFICIÊNCIA E FLEXIBILIDADE DE USO
ESTÉTICA E DESIGN MINIMALISTA
RECONHECIMENTO, DIAGNÓSTICO E RECUPERAÇÃO 
DE ERROS
19
Essa heurística é muito importante para sistemas que possuem um número 
muito grande de possibilidades. Por exemplo, caso você precise de alguma 
ajuda do Windows, basta pesquisar na seção de ajuda para obter respostas. No 
caso de sites e lojas virtuais é muito comum a presença do FAQ. O FAQ é uma 
página ou seção com as perguntas mais frequentes de usuários e também as 
devidas respostas.
AJUDA E DOCUMENTAÇÃO
?
Alguns dos termos comuns que qualquer equipe de design de produto usa 
são wireframe, mockup e protótipo. Você viu que a equipe de design usa esses 
termos para fazer uma ilustração de qualquer conceito, coletar feedback e obter 
consenso. Com a ajuda deles, a equipe poderá criar o design. Você identificou 
que são termos distintos e têm funções únicas em momentos diferentes durante 
o desenvolvimento do produto. Posteriormente, você viu a importância do 
processo de avaliação de interfaces de sistemas interativos. Validar o design 
é essencial para o sucesso de qualquer aplicação. O objetivo das avaliações 
da interface do usuário é tornar os produtos e serviços mais usáveis, fáceis de 
aprender e intuitivos para o usuário. Por fim, nos seus estudos, você conheceu, 
também, um dos pioneiros que tentou avaliar objetivamente a experiência do 
usuário em plataformas digitais, o renomado Jakob Nielsen, com sua avaliação 
heurística. Embora datem dos anos 90, essas regras gerais ainda são válidas e 
usadas hoje.
Siga com seus estudos e até mais!
20
REFERÊNCIAS
CLARK, J. Wireframe e Prototipagem e Maquete. 2022. Disponível em: https://
blog.back4app.com/how-to-build-a-video-chat-mobile-app/#more-27204. Acesso 
em: 03 jun. 2022.
CYBIS, W.; BETIOL, A. H.; FAUST, R. Ergonomia e usabilidade: conhecimentos, 
métodos e aplicações. 3. ed. São Paulo: Novatec, 2015.
KRUG, S. Não me faça pensar. Rio de Janeiro: Alta Books, 2006.
NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007.
PEREIRA, N. Caso de Estudo de UX: CARBOmática. 2018. Disponível em: https://
medium.com/@nathaliapg/ux-study-case-carbom%C3%A1tica-6b202a16e3f3. 
Acesso em: 03 jun. 2022.
PRESSMAN, R. S. Engenharia de software: uma abordagem profissional. 8. ed. 
São Paulo: McGraw Hill, 2016.
SEGURADO, V. S. Projeto de interface com o usuário. São Paulo: Pearson, 2015.
VR SYS. As 10 heurísticas de Nielsen: como elas podem melhorar seu site? 2019. 
Disponível em: https://www.vrsys.com.br/blog/as-10-heuristicas-de-nielsen-como-
elas-podem-melhorar-seu-site>. Acesso em: 03 jun. 2021.