O PROCESSO

DESIGN DE
DO DESIGN DE
INTERAÇÃO
INTERFACE
AULA 05
DESIGN DE INTERAÇÃO

 O objetivo primordial do produto do design de interação é fazer com que os

usuários atinjam os seus objetivos.
 O design de interação é o “design de produtos interativos para apoiar o modo
como as pessoas se comunicam e interagem em suas vidas cotidianas e no
trabalho”.

Rogers,Yvonne; Sharp, Helen; Preece, Jenny. Design de Interação: Além da Interação Humano-Computador.
DESIGN DE INTERAÇÃO

 Antes de iniciar o processo de design, é importante estabelecer quais serão as principais

metas de usabilidade e metas de experiência do usuário a serem atingidas:
METAS DE USABILIDADE
 Ser eficaz no uso (eficácia) – quanto o produto é bom em fazer o que se espera dele?
 Ser eficiente (eficiência) – como o produto auxilia os usuários a serem produtivos na
execução das tarefas?
 Ser segura (segurança) – o produto previne que o usuário cometa erros graves?
 Ter boa utilidade (utilidade) – em que medida o produto oferece funcionalidades que
permitam ao usuário executar o que ele deseja?
DESIGN DE INTERAÇÃO
 Antes de iniciar o processo de design, é importante estabelecer quais serão as principais
metas de usabilidade e metas de experiência do usuário a serem atingidas:
METAS DE USABILIDADE
 Ser fácil de aprender – o sistema é fácil de ser aprendido pelas pessoas? Isso pode ser
medido pelo tempo que usuários novos levam para cumprir determinadas tarefas.
 Ser fácil de lembrar como usar – como a interface do produto ajuda o usuário executar
atividade mesmo que ele passe bastante tempo sem usar o aplicativo. Pode ser medido
pelo tempo de execução de determinada tarefa após certo tempo de desuso.
 Acessibilidade – que tipos de barreiras a interface impõe para a qualidade da interação
para a realização de tarefas?
DESIGN DE INTERAÇÃO
METAS DE EXPERIÊNCIA DO USUÁRIO

Fonte: Rogers, Yvonne; Sharp, Helen; Preece, Jenny. Design de Interação: Além da Interação Humano-Computador
DESIGN DE INTERAÇÃO

USABILIDADE x EXPERIÊNCIA DO USUÁRIO

As metas de experiência do usuário se diferem das metas de usabilidade pela sua

subjetividade.

A usabilidade abrange aspectos mais objetivos, avalia o quão útil ou produtivo é o sistema.

A experiência do usuário abrange aspectos mais subjetivos, pois trata de como o usuário de
sente ao utilizar o sistema.
DESIGN DE INTERAÇÃO

No design de persuasão, muito utilizado por sites de vendas, a experiência do usuário muitas
vezes é mais importante que a usabilidade, pois o objetivo nesse caso é seduzir o cliente a
comprar, evocar sensações para o cliente compre algo que muitas vezes ele não sabia que
precisava.

Existem casos, porém, que a persuasão é incompatível com as metas de usabilidade. Algumas
empresas chegam a adicionar itens no carrinho automaticamente, exigindo que o usuário
perceba que precisa desmarcar o produto. Isso pode aumentar um certo número de vendas,
mas pode causar experiências negativas no usuário.
DESIGN DE INTERAÇÃO
DESIGN DE INTERAÇÃO

1. Após a análise dos resultados da pesquisa, faça uma lista das metas de experiência do
usuário e das metas de usabilidade para o sistema.
Exemplo: Projeto de um aplicativo de viagens, como Booking ou AirBnb:
Principais metas de usabilidade:
- eficiência (o usuário realizar as tarefas sem gastar muito tempo);
- eficácia (o aplicativo precisa ser bom no que se propõe a entregar, nesse caso, pesquisar
locais de hospedagem disponíveis, realizar reservas e oferecer opções de cancelamento ou
mudança de datas, caso necessário);
- segurança (o sistema deve evitar, por exemplo, que a pessoa clique em “reservar” sem
querer, gerando desgastes posteriores).
DESIGN DE INTERAÇÃO

Principais metas de experiência do usuário:

- é importante entender que uma viagem começa no planejamento, portanto, espera-se
que o aplicativo ofereça uma experiência prazerosa.
Deve-se evitar que o aplicativo seja “chato” “frustrante”, “difícil”, “demorado” pois são
atributos que o usuário não pretender associar à sua experiência.
Por outro lado, é interessante que ele seja “divertido”, “descontraído”, “agradável” , e
talvez ofereça alguns bônus, como indicações de aluguel de bicicletas, guias turísticos, aulas de
surf, etc.
DESIGN DE INTERAÇÃO

2. Estabelecidas as metas de usabilidade e experiência do usuário, é o momento de iniciar os

croquis (ou rabiscos) da tela inicial e das telas subsequentes. Para apoiá-los nessa
atividade, é interessante buscar referências de aplicativos semelhantes, referências
estéticas e de funcionalidade que não devem ser copiadas, mas podem trazer ideias que
deram certo e outras que você pode querer modificar ou aperfeiçoar.
DESIGN DE INTERAÇÃO

Os croquis (ou sketch, rabiscos) servem para organizar visualmente a interface de forma
rápida, evitando retrabalhos muito demorados ainda na fase inicial do projeto.

Imagem: https://maryshaw.net/wireframe-101-sketch-first-wireframe-later/
Sketch Site definitivo

Imagem: https://brasil.uxdesign.cc/o-valor-do-rabiscoframe-e5008d2b1e17
Sketch Site definitivo

Imagem: https://brasil.uxdesign.cc/o-valor-do-rabiscoframe-e5008d2b1e17
Imagem: https://dribbble.com/shots/1121336-Wire-Sketch/attachments/142852?mode=media
Imagem: https://dribbble.com/shots/1090311-Energy-and-Navigation
Imagem: https://speckyboy.com/web-mobile-wireframe-sketch-examples/
DESIGN DE INTERAÇÃO

Sites para buscar referências:

- https://dribbble.com
DESIGN DE INTERAÇÃO
Porque usar o sketch (ou rabisco)
- Se você está trabalhando em equipe, é uma forma rápida de mostrar as suas ideias durante
uma reunião e modifica-las seguindo sugestões dos colegas.

- Não é necessário mostrar o sketch ao cliente, pois em muitos casos ele não vai
compreender, mas durante uma primeira reunião de discussão de ideias, o rabisco é uma
ferramenta interessante para que você se certifique de que compreendeu de fato o que o
cliente espera da interface.

- Não é necessário (nem aconselhável) que o desenho esteja perfeito, com visual muito
semelhante ao definitivo, afinal de contas o sketch deve ser uma ferramenta rápida de
apoio e não um produto.
DESIGN DE INTERAÇÃO
Por que usar o sketch (ou rabisco)
- Você pode trabalhar diversas opções de layout de tela, a partir de brainstorming, antes de
iniciar a fase de prototipagem, que é mais demorada.

- Não há problema em não saber desenhar. Os rabiscos têm como objetivo primordial a
validação de ideias, por isso é importante se desprender do rigor de qualidade técnica do
desenho. Nessa etapa o objetivo é conseguir comunicar por meio de ilustrações, aquilo
que está pensando.

- Não use borracha. Nessa etapa você deve se desprender de criar um desenho complexo e
bem acabado. Se você achar que deve apagar algo desenhado é porque está em uma etapa
do processo posterior a essa.
DESIGN DE INTERAÇÃO

3. Após finalizar os croquis das telas do aplicativo, é possível iniciar o planejamento do

Sitemap (https://mockflow.com/).
10 HEURÍSTICAS DE NIELSEN

 Jacob Nielsen, um dos principais nomes do design de experiência do usuário no mundo,

estabeleceu 10 heurísticas para auxiliar designers no projeto de interfaces.

O que é heurística?
Segundo o dicionário Priberam:
1. Arte de inventar ou descobrir.
2. Método que pretende levar a inventar, descobrir ou a resolver problemas.
3. Processo pedagógico que pretende encaminhar o aluno a descobrir por si mesmo o
que se quer ensinar, geralmente através de perguntas.
 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 em tempo razoável.
Exemplo: Quando você aperta o botão de um elevador, ele
acende, informando que o comando foi percebido pelo
10 HEURÍSTICAS sistema, e você visualiza em qual andar o elevador está, de
modo que você sabe quanto tempo terá que esperar.
DE NIELSEN Informações claras, permitem que o usuário possa tomar
decisões. No exemplo citado, se espera o elevador ou usa as
escadas.
É importante pensar no que usuário precisa saber para
tomar decisões enquanto usa o sistema, como por exemplo:
o nível da bateria, se ele está conectado à internet ou não,
etc.
 2. Correspondência entre o sistema e o mundo
real
O sistema deve falar a linguagem dos usuários, com
palavras, frases e conceitos familiares a eles, em vez de
10 HEURÍSTICAS termos técnicos.
DE NIELSEN Siga convenções do mundo real, com símbolos e termos
que o usuário está acostumado a ver e ouvir, fazendo com
que as informações apareçam em uma ordem natural e
lógica.
 3. Controle do usuário e liberdade
Usuários frequentemente escolhem funções do sistema
por engano e precisarão 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 e refazer.

10 HEURÍSTICAS Um simples exemplo disso é o botão de “voltar” em uma

página web. Se ele não existisse, o usuário precisaria
DE NIELSEN digitar o endereço da Home da página novamente, e
refazer o caminho até chegar novamente no ponto em
que estava.
Em dispositivos móveis, o botão “cancelar” e similares são
ainda mais importante, pois acionamentos não
intencionais são muito frequentes.
 4. Consistência e padrões
Os usuários não deveriam precisar adivinhar que
diferentes palavras, situações ou ações significam a mesma
coisa. Siga convenções de plataforma.
Consistência interna: refere-se a manter a consistência
dentro de um produto ou uma família de produtos.
10 HEURÍSTICAS Se você usa uma determinada cor (ex: laranja) para
destacar um elemento após acioná-lo, você não deve usar
DE NIELSEN a mesma cor para elementos não acionados, pois isso
pode confundir o usuário.
Consistência externa: refere-se a consistência de padrões
fora do produto. Exemplo: o carrinho de compras de um
site na internet, na maioria das vezes está localizado no
canto superior direito da tela e o usuário já espera por
isso ao entrar em um site de vendas.
 4. Consistência e padrões
Jakob Nielsen afirma que “as pessoas passam a maior
parte do tempo em sites que não são o seu”, logo, se a
10 HEURÍSTICAS maioria dos sites segue uma convenção e o seu quebra,
você está forçando o usuário aprender algo novo.
DE NIELSEN Existem casos em que mudar uma convenção pode ser
melhor, mas os benefícios precisam ser colocados na
balança e comparados com a curva de aprendizagem que
o usuário terá ao se deparar com um novo padrão.
 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 confirmação antes que eles façam a ação.
Exemplo: Quando você, ao tentar responder um e-mail
10 HEURÍSTICAS para alguém, acaba por engano respondendo para toda a
lista de e-mails. Quando isso ocorre, muitas das vezes é
DE NIELSEN por um erro de design, que falhou ao impedir que o
usuário clicassem em “responder para todos” por engano.
Um dos recursos muito utilizados, se o usuário estiver
prestes a realizar uma operação muito importante, como
transferir dinheiro, é oferecer uma confirmação como
“você tem certeza que quer realizar a transferência?”. Essa
interrupção ajuda o usuário a perceber possíveis erros
antes que eles ocorram.
 6. Reconhecimento em vez de lembrança
Minimize a carga de memória do usuário, tornando
visíveis os objetos, as ações e as opções.
Reconhecimento x lembrança
Exemplo: Se eu perguntar “a capital de Pernambuco é
Recife?”. A pessoa precisará apenas reconhecer se aquela
informação é verdadeira.
10 HEURÍSTICAS
Se eu perguntar “qual a capital de Pernambuco?”, a pessoa
DE NIELSEN terá mais dificuldade de acessar a memória para lembrar
da informação.
Quanto mais “pistas” o usuário tiver, mais facilmente ele
vai conseguir acessar a memória.
Um exemplo disso são os “menus” que oferecem opções
para o usuário.
 6. Reconhecimento em vez de lembrança
Interfaces que promovem o reconhecimento dão uma
ajuda extra à memória do usuário.
Importante também que instruções para uso do sistema
estejam visíveis e facilmente recuperáveis quando
necessário (exemplo: Ajuda).
10 HEURÍSTICAS
DE NIELSEN
 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
inexperientes quanto experientes. Permita que os usuários
personalizem ações frequentes.
Exemplo: para copiar um texto, o usuário pode clicar em
10 HEURÍSTICAS “Editar – copiar”, ou selecionar, clicar com o botão direito
do mouse e em seguida “copiar”, ou pode digitar crtl+c.
DE NIELSEN O ctrl+c é um acelerador, que assim como outros, existem
para que o usuário mais experiente execute tarefas de
forma mais rápida.
Oferecer ao usuário atalhos e opções para que ele escolha
o uso mais adequado para ele, aumenta a sua eficiência, ao
mesmo tempo que não prejudica o aprendizado de
usuários recentes, sobrecarregando-os com muitas
informações para memorizar.
 8. Estética e design minimalista
Os diálogos não devem conter informações irrelevantes
ou pouco necessárias. Cada unidade extra de
informação em um diálogo compete com as unidades
relevantes de informação e diminui sua visibilidade
relativa.
10 HEURÍSTICAS Foque o seu design no essencial. Isso não significa
necessariamente usar cores neutras e fontes esbeltas.
DE NIELSEN
Os elementos presentes devem existir para comunicar,
não apenas para decorar.
 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.
 Informe claramente ao usuário quando um erro
ocorrer, com mensagens de erro. É possível combinar
10 HEURÍSTICAS uma mensagem com um sinal sonoro, vibratório, ou
visual, como mudança de cor ou sinal de alerta.
DE NIELSEN
 Informe ao usuário sobre o que é o problema.
 Mostre uma maneira de corrigir o erro. A melhor
forma é fornecendo um atalho na própria mensagem
de erro, seja para corrigir ou desfazer a ação.
O mais importante é evitar que usuário cometa erros.
MENSAGEM MUITO TÉCNICA
 10. Ajuda e documentação
Mesmo que o sistema possa ser usado sem documentação,
pode ser necessá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
concretos de realização, e não muito grande.
Especialmente para novos usuários, pode ser interessante
10 HEURÍSTICAS oferecer um passo-a-passo, vídeos, chat na web, etc.
DE NIELSEN Considere o seguinte:
É fácil procurar ajuda?
A documentação é focada nas tarefas do usuário?
A ajuda lista passo-a-passo o que deve ser realizado?
Não sobrecarregue o usuário com informações
desnecessárias quando ele precisa resolver um problema
específico.
REFERÊNCIAS

Esta aula tomou como base os conteúdos disponíveis em:

Livros
Design de Interfaces – Introdução. Autoria: Wilma Sirlange Sobral
Design de Interação – Além da interação humano-computador. Autores: Ivone Rogers, Helen Sharp, Jennifer Preece.

Canal do You Tube

NNgroup. Canal de conteúdos em vídeo do Grupo Nielsen Norman. https://www.youtube.com/c/NNgroup/featured