Design de Interação: os 6 princípios fundamentais

Aela.io
Aela.io
Jun 13, 2019 · 9 min read

Você já imaginou com quantos produtos ou objetos nós interagimos diariamente? Ou melhor, consegue se lembrar de algum objeto ou site que não lhe proporcionaram uma boa experiência de uso? Aquela gaveta que não abre o suficiente para pegar as meias no fundo, o controle remoto da TV a cabo que possui mais botões do que um painel da NASA, ou então aquele site de compras confuso para finalizar o pedido. Confira nesse artigo os princípios do Design de Interação para garantir uma boa experiência de usuário!

Don Norman, pai da usabilidade e cofundador da Nielsen Norman Group, realça a importância de se pensar nas pessoas e na interação que elas terão com os produtos e sistemas que estão sendo desenvolvidos.

E quando Norman diz “pessoas”, ele não quer dizer somente o usuário final. Quando falamos de algum produto, devemos pensar nas pessoas de maneira geral. O colaborador da empresa que não tem skills tecnológicas que vai alimentar o site; a pessoa que vai utilizar o software de maneira paralela a seu trabalho. Enfim, em todas as pessoas que, de alguma forma, estão envolvidas e interagindo com a interface que você está criando.

Mas como garantir que todos esses usuários tenham uma excelente experiência com os seus designs? De maneira que esses atendam suas necessidades mais intrínsecas e facilitem suas vida de maneira geral?

Pensando nessas questões, Norman escreveu — baseado no conceito de Design Centrado no Usuário — 6 princípios fundamentais da interação. Confira cada um deles logo abaixo.

1º Visibilidade (Visibility)

O princípio da visibilidade traz a questão da descoberta. O usuário descobre as funcionalidades disponíveis no sistema, pelo simples fato delas estarem visíveis para interação. Ou seja, quanto mais visível algo estiver, mais os usuários notarão e utilizarão.

Botões e menus visíveis tornam a jornada do usuário mais fácil. Ao passo que, no caso de tais funcionalidades não estarem visíveis, elas não serão utilizadas.

Sobre a visibilidade, uma questão sobre a qual deve se tomar cuidado é a priorização das funções. Não é recomendável colocar botões e menus para todas as funcionalidades de um sistema. A tela fica poluída, encontrar o botão certo fica mais difícil e não há distinção das funções mais importantes.

O grande desafio é entender como priorizar o conteúdo e as funções.

Um exemplo clássico de visibilidade e interação é o ícone Hamburger. Ele representa o menu de funções em diversos sites. É tão comum que o usuário já entende que esse ícone representa um deep dive das tarefas.

Exemplo de ícone Hamburger em site (no canto esquerdo superior da tela)
Ao clicar no ícone, o menu se expande

Um outro exemplo de visibilidade é a interface de e-mail do Gmail. O botão para escrever e-mails se encontra em destaque. Dessa forma, o usuário encontra a função de uma forma fácil, quase instintiva.

Botão para redigir e-mails do Gmail — Exemplo de Visibilidade da função

Não sabe qual ferramenta usar para fazer o protótipo da sua interface? Este artigo vai te ajudar a tomar a melhor decisão.

2º Feedback

O segundo princípio do Design de Interação é o Feedback.

O Feedback é a resposta que o usuário deve receber, frente a alguma ação que tenha feito.

Para toda e qualquer ação sobre um produto, é natural criar a expectativa por uma resposta. Seja ela confirmando o sucesso ou o insucesso da ação. Caso isso não ocorra, gera-se dúvidas. Exemplo: o usuário clica várias vezes em um botão por não saber se o comando foi efetuado ou não.

Podemos classificar este princípio em duas categorias:

  • Feedback Ativador (Activational Feedback): quando a resposta para uma ação basta ser sensorial, como um efeito visual ou sonoro. Por exemplo: ao clicar em um botão e ele mudar de cor ou emitir algum som.
Botão muda de cor ao clicar — Exemplo de feedback
  • Feedback Comportamental (Behavioral Feedback): quando a resposta indica que a ação teve algum efeito dentro do sistema. Por exemplo: ao clicar em um botão para finalizar sua compra online, aparecer um pop-up comunicando que sua ação foi feita com sucesso e que sua compra será processada.
Pop-up de mensagem enviada do gmail — Exemplo de feedback

O mercado de UX está bombando, com diversas vagas, oportunidades e salários bem atrativos. E agora é o melhor momento para você para migrar sua carreira e se tornar um UX Designer. Confira esse artigo.

3º Restrições (Constraints)

Para evitar qualquer ação inválida ou incorreta, pelo usuário, um sistema deve conter restrições. As restrições, dentro do Design de Interação, podem ser tanto físicas quanto comportamentais.

As restrições físicas podem ser exemplificadas com a própria tela do celular. Não há como ter Design de Interação fora dessas limitações. As restrições comportamentais estão mais relacionadas com a experiência do usuário e quais ações que ele pode ter ou não, dentro daquele design.

Um exemplo interessante são os botões de ação de qualquer programa de computador. Quando uma ação está restrita ao usuário, o botão geralmente aparece cinza e opaco, deixando claro que a função não está disponível naquele momento.

Este tipo de restrição também é comum em formulários online, onde o botão “submeter” fica inativo até todo o formulário estar preenchido corretamente.

A falta desse conceito de Design de Interação pode gerar confusão e frustração para o usuário. Ele pode clicar incorretamente em botões inativos, ou até enviar um formulário com informações erradas ou incompletas.

Formulário incompleto com o botão inativo — Exemplo de Restrição

Quer saber mais sobre usabilidade? Confira algumas lições do livro de Steve Krug “Não me faça pensar”, a bíblia da usabilidade.

4º Mapeamento (Mapping)

Está claro que qualquer ícone, botão ou controle, ao ser ativado, acionará alguma função dentro do sistema. Mas é importante que haja uma relação entre o design do controle e a função atrelada a ele. Esta relação, dentro do Design de Interação, chama-se Mapeamento.

Quanto mais o usuário assimila os controles com a sua percepção da realidade, melhor é a interação e a experiência.

Por exemplo: o botão de volume mostra barras mais altas conforme o volume vai aumentando, e barras mais baixas conforme o volume vai diminuindo.

Barra de volume — Exemplo de Mapeamento

Apesar de parecer óbvio, o mapeamento requer bastante atenção e testes com usuários reais. Uma maneira interessante de saber se o mapeamento está correto é observar o design de um controle e pensar na expectativa que se tem sobre ele. Se é um controle que indica aumento ou diminuição gradual, pode-se pensar em usar os símbolos “+” e “-”, se a ideia é começar um vídeo, a expectativa é que o botão tenha um triângulo simbolizando o play.

Teste de usabilidade: o que você precisa saber. Confira esse artigo.

5º Consistência (Consistency)

Uma das maneiras de melhorar a experiência do usuário e garantir uma curva de aprendizagem rápida, é a utilização de padrões.

Criar padrões ajuda o usuário a assimilar melhor o seu sistema, fazendo com que sua navegação se torne mais simples e fácil.

A Consistência, em design de interação, nada mais é do que criar esses padrões dentro do sistema. Representar de forma semelhante os controles com funções semelhantes, posicionar os botões no mesmo lugar e da mesma forma, usar as mesmas cores, etc.

A falta de consistência pode causar demora na ação e confusão para o usuário. A ideia é sempre fazer com que ele assimile cada função do seu sistema, sem ter que se preocupar com exceções.

Além de estar presente dentro do sistema, é importante entender se há consistência com outros sistemas semelhantes.

Por exemplo: se em todos os sites a escrita e a leitura são feitas da esquerda para a direita, não é recomendável que o seu site faça de outra forma. O caso é extrapolado, mas ajuda no entendimento. Fazer algo de forma diferente é bom se não for atrapalhar a maneira com que o usuário já está acostumado a fazê-lo em outros sistemas.

Cabeçalhos de sites e-commerce — Exemplo de Consistência

Os exemplos dos sites acima mostram a consistência na construção de um site de e-commerce. Todos possuem o logo no começo e o menu horizontal com informações e categorias

Confira a dica de 5 livros para quem está começando em UX Design que o Jon Vieira deixou para vocês.

6. Affordance e Significantes (Affordance and Signifiers)

Affordances

Affordance é uma palavra que não possui tradução para o português. Seu conceito está ligado a atributos que um objeto tem que disponibilizam determinada interação. Por exemplo: uma janela de vidro tem atributos que permitem que possamos enxergar o que há do outro lado. Suas dobradiças têm atributos que possibilitam a abertura para determinado lado e a própria abertura da janela possibilita a entrada do vento. Tudo isto são affordances. São as relações de interação possíveis entre o usuário e o sistema.

Significantes

Significantes são os sinais que demonstram que existe uma relação e como utilizá-la. São os atributos visuais que indicam como algo funciona.

No exemplo da janela, o design da maçaneta indica para que lado ela abre, ou a forma das dobradiças podem claramente mostrar se a janela deve ser puxada ou empurrada (ou ambos).

Affordances e signifiers caminham juntos e são comumente confundidos. Lembre-se que affordances são os atributos que possibilitam a interação, enquanto significantes são os sinais que possibilitam identificar estes atributos e utilizá-los.

Exemplos do dia a dia

Não é raro de encontrar, em sites, botões desenhados de forma tridimensional. Essa visão 3D indica que o botão deve ser pressionado para executar alguma função. O 3D é um significante demonstrando uma affordance (clique). Outro tipo de significante muito comum é o dos hyperlinks: quando há alguma palavra que possui um link — e consequentemente, uma affordance de clique — esta geralmente estará azul e sublinhada, mostrando que é possível clicar.

Hyperlinks que levam o usuário para as páginas de cadastro e Botões em 3D que indicam possibilidade interação

O uso dos affordances e signifiers é importante para poder indicar ao usuário que aquele objeto é passível de interação. Um sistema pode ter todas affordances do mundo, mas se estas não forem significadas de forma que abrace todos os princípios anteriores (Visibilidade, Restrições, Mapeamentos, etc.), as funções se tornam de difícil usabilidade para o usuário, criando uma má experiência.

Qual é o futuro do UX Design? Encontre neste artigo os principais desafios que nós, Product Designers, vamos enfrentar nos próximos anos.

Dica de leitura para você se aprofundar nos princípios de Design de Interação

Utilizando todos os 6 princípios corretamente, podemos garantir um Design de Interação que permite uma boa experiência ao usuário.

É importante lembrar que o objetivo desses conceitos é prover ao usuário uma jornada, um aprendizado e uma memorização simplificada e fácil, de modo que o uso do sistema flua da maneira mais automática possível.

Gostou do aprendizado? Nós da Aela estamos sempre criando novos conteúdos pra vocês, seja no Blog, Youtube ou Podcast. Fique ligado!

Ah, se tiver qualquer dúvida, nos mande uma mensagem!

Aela.io

Design, Interaction e UX.

Aela.io

Written by

Aela.io

Design, Interaction e UX. Com muito de tecnologia e foco internacional.

Aela.io

Aela.io

Design, Interaction e UX. Com muito de tecnologia e foco internacional.

More From Medium

More on UX Design from Aela.io

More on UX Design from Aela.io

Quanto Posso Ganhar em UX Design?

Mar 30 · 11 min read

13

More on UX Design from Aela.io

More on UX Design from Aela.io

Mar 23 · 10 min read

7

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade