Todos os posts

Os 6 princípios fundamentais do Design de Interação

Detalhos os 6 princípios fundamentais do Design de Interação para o melhor desenvolvimento de soluções

01
/
10
/
2024
12
min
Home
/
Insights
/
Blog
/
post
Autores
Tags relacionadas
Assine nossa Newsletter

Donald Norman é uma das figuras indispensáveis para o estudo sobre design centrado no usuário. Com essa ideia, em seu livro “O Design do Dia-a-dia", de 1988, ele propôs que as falhas no uso dos objetos não são culpa dos usuários, e sim do design desses produtos, que ignoram as necessidades e psicologia das pessoas.

Com exemplos cotidianos, linguagem simples e muito conhecimento, o livro é recomendado para qualquer pessoa que tenha interesse em compreender como interagimos com todas as coisas ao nosso redor, seja pessoas comuns, pessoas técnicas, designers e não designers.

Norman expõe princípios fundamentais do design de interação para eliminar problemas nos produtos e transformá-los em produtos agradáveis que proporcionam prazer e satisfação.  

Assim, este artigo tem como objetivo descrever esses princípios e exemplificá-los dentro do contexto de interfaces digitais.

Os Princípios do Design de Interação

Quando nós interagimos com um produto, nós precisamos descobrir como ele funciona. Isso significa descobrir a finalidade do produto, entender seu funcionamento e como interagir com ele. Todas essas questões são solucionadas pela capacidade do produto em ser descoberto.  

O potencial de ser descoberto é resultado da aplicação correta de seis princípios fundamentais da interação:  

  • “Affordance”
  • “Signifiers”
  • Mapeamento
  • Feedback
  • Restrições  
  • Modelo Conceitual

Abaixo, vamos explorar cada um desses princípios:

Affordance

A palavra “affordance”, popularizada entre os designers no livro de Norman, é um termo apropriado da psicologia e, por isso, não há uma tradução literal para o português. Mas, se fossemos traduzir de forma livre, a palavra mais próxima no português seria “possibilitar”.  

Dessa forma, Affordance refere-se a relação entre um objeto e uma pessoa; é a relação entre as propriedades de um objeto e a capacidade de um agente determinar como tal objeto funciona. A presença de uma affordance está diretamente ligada com as qualidades do objeto e as habilidades do agente que está interagindo com o mesmo.

De maneira prática, para designers, a visibilidade da affordance é primordial: com ela, há boas dicas de como as coisas funcionam e ajuda as pessoas a entenderem quais ações são possíveis com determinado objeto sem a necessidade de instruções e rótulos.

No livro, o autor nos dá exemplo de uma cadeira que "possibilita" (affords) sustentação e, consequentemente, nos "possibilita" sentar.  

Dentro do contexto de interfaces digitais, um exemplo de affordance percebida é o tamanho de um campo em um formulário, campos menores "possibilitam" (affords) respostas menores, já maiores possibilitam respostas maiores.

Exemplo de affordance percebida em campos de preenchimento (Produção Autoral)

Signifiers

Com o intuito de complementar o termo anterior, Norman incorpora uma palavra da semiótica: signifiers (ou significante, na tradução livre). O termo refere-se a qualquer sinal ou marca, qualquer indicador que comunique o comportamento apropriado de um objeto para alguém.  

Affordance, affordance percebida e significantes têm muito em comum. Enquanto affordance representa as possibilidades de um agente interagir com algo, significantes são sinais.  

Importante ressaltar que algumas affordances percebidas podem ser ambíguas ou não reais, esses significantes enganosos, muitas vezes acidentais – embora às vezes propositais -, tentam impedir que as pessoas façam determinadas ações, que não são qualificadas.

Significantes podem ser placas, indicadores, ilustrações, instruções, palavras, como, por exemplo, o escrito "Empurre" ou "Puxe" nas portas.  

Alguns significantes podem ser simplesmente a affordance percebida, como uma maçaneta de uma porta ou uma estrutura física de um interruptor. Para interfaces digitais, um bom exemplo de significante são as dicas e descrições de formulários e área de upload.

Exemplo de significante em uma área de upload de arquivos (Produção autoral)

Na criação de um produto, significantes são mais importantes que affordance, pois eles comunicam como usar um objeto em questão. Independentemente de sua natureza, planejada ou acidental, os significantes fornecem pistas valiosas sobre o funcionamento das coisas. Os significantes devem ser visíveis, caso contrário, eles não funcionam. Nós, como designers, devemos incorporar os significantes de maneira coesa com a experiência do produto.

Mapeamento

Mapeamento é um termo técnico, emprestado da matemática, que mostra a relação entre os elementos de dois conjuntos de coisas. Basicamente, qual controle está ligado com qual ação no produto.  

O mapeamento é um conceito importante na construção de layout de controles e displays. A relação entre controles e seu resultado é mais fácil de aprender quando há um mapeamento coerente entre os controles, as ações e o resultado esperado.

Utilizar analogias espaciais do mundo real na construção de um mapeamento ajuda na compreensão imediata dos controles, Norman chama esse processo de mapeamento natural.  

Vamos aos exemplos: alguns mapeamentos naturais são culturais ou biológicos, tal qual para mover um objeto para cima, é necessário mover o controle para cima. Nesse sentido, usar eixo vertical para representar intensidade ou quantidade seria adequado.

Outros mapeamentos naturais seguem os princípios da percepção e permitem o agrupamento natural ou padronização de controles e feedback. Agrupamento e proximidade são princípios importantes da psicologia da Gestalt que podem ser usados para mapear controles para funções: controles relacionados devem ser agrupados. Os controles devem estar próximos ao item que está sendo controlado.

Exemplo de mapeamento natural em dispositivo móvel (Produção autoral)

Dentro dos ambientes digitais temos diversos exemplos de mapeamentos naturais. No exemplo da imagem, podemos observar um bom mapeamento natural dos controles de volume de um smartphone, além dos sliders estarem no eixo vertical, a proximidade entre o componente digital e o físico estabelece uma relação entre o controle e o objeto controlado.

Importante ressaltar que muitos mapeamentos podem parecer naturais, mas, na verdade, são específicos para uma cultura. O que é natural para uns, não é necessariamente natural para outros.  

Para ilustrar, tomemos como exemplo uma barra de progressão feita para sistema com línguas diferentes. Nas línguas em que a escrita é feita da esquerda para direita, a leitura do conteúdo e o sentido de progressão se dá nesse mesmo sentido, logo, o mapeamento da barra de progressão deve seguir esse padrão. Já nas línguas em que a escrita se dá da direita para esquerda (como a língua árabe) o sentido da barra de progressão deve ser inversa.

Exemplo de mapeamento natural para diferentes culturas (Produção autoral)

Um sistema é fácil de usar quando o conjunto de ações possíveis é visível, e quando os controles e interfaces exploram mapeamentos naturais.

Feedback

Feedback talvez seja o princípio que, quando mal executado, mais causa confusão e isso não passa despercebido pelo usuário.  

Você provavelmente já esteve na situação de ir até um totem de shopping com o objetivo de procurar uma loja, mas não conseguir terminar sua tarefa pois as letras digitadas no campo de busca simplesmente não funcionam ou demoram muito para aparecer em tela. Ou, não soube como progredir sua ação em uma máquina de venda automática porque, ao inserir moedas, você não sabe se já pode escolher um produto ou se seu dinheiro já foi engolido.  

Nesses dois casos o que está faltando é um feedback adequado. Alguma maneira de comunicar ao usuário que o sistema está respondendo a suas solicitações.

No mundo digital exemplos de feedback não faltam: a troca de cor de um botão ao ser clicado, a mensagem de validação de login ao entrar em aplicativos de bancos ou as mensagens de erro por falta de conexão.

Exemplo de feedback ao pressionar um botão e validação de login respectivamente (Produção autoral)

O Feedback – comunicar o resultado de uma ação – deve ser imediato, mesmo um atraso de um décimo de segundo pode ser um incômodo. Se o atraso for muito longo, as pessoas geralmente desistem e partem para a próxima atividade.  

Feedback precisa ser:  

  • Informativo: apresentar uma resposta do sistema que não significa nada para os usuários não tem nenhuma serventia.  
  • Claro: um feedback ruim pode ser pior que nenhum feedback, já que esse pode ser tornar uma distração e, em muitos casos, irritante e pode causar ansiedade.  
  • Na quantidade certa: muito feedback pode ser mais irritante do que poucos. Muitos avisos fazem com que as pessoas ignorem todos eles ou desativem todos eles, o que significa que avisos importantes não serão vistos.
  • Planejados: todas as ações precisam ser confirmadas, mas de maneira discreta.

Restrições

As restrições são pistas que limitam as possibilidades de interação com os objetos e têm como objetivo evitar que o usuário cometa algum erro.  

As restrições podem ser físicas, culturais, semânticas e lógicas, desde que guiem o usuário e facilitem a interpretação.  

Para as interfaces digitais, além de prevenir erros, a restrição de ações é extremamente importante para guiar o usuário a completar sua tarefa de forma clara. Por exemplo, esse princípio pode ser aplicado a um cadastro dividido em etapas, desta maneira não há ambiguidade do que precisa ser feito em cada passo desse processo.

Exemplo de restrição de possibilidades em um cadastro (Produção autoral)

Ainda, restrições podem ser usadas de forma que a falha em um estágio impeça que o próximo passo aconteça.  

Seguindo o mesmo exemplo do cadastro, caso eu não preencha um campo corretamente e tente clicar em próximo o sistema pode restringir que o usuário passe para próxima etapa (esta ação deve ser acompanhada de um feedback do sistema indicando o porquê a ação foi barrada para que ela possa ser corrigida)

Exemplo de restrição usada de forma que a falha impede a próxima etapa (Produção autoral)

Restrições é um princípio valioso que limita as possibilidades de interação e, consequentemente, quando usado de maneira correta, permite que as pessoas delimitem curso de ação adequado e previne possíveis erros.  

Modelo Conceitual

Um modelo conceitual é uma explicação, geralmente superficial, de como algo funciona. Não tendo a necessidade de ser completo ou preciso, desde que seja útil.  

O modelo conceitual talvez seja o princípio mais importante para ter plena compreensão de como as coisas funcionam. Por exemplo, os arquivos e pastas que são exibidos na tela do computador ajudam as pessoas a criar o modelo conceitual de documentos dentro do computador, mesmo que na realidade não existam pastas dentro do computador, essa maneira de exibir as informações são conceituações eficazes que tornam o computador mais fácil de usar.

Modelos conceituais podem ser complexos quando precisam ser exibidos de forma técnica, como em manuais de instrução. Já aqueles que são relevantes na construção de produtos são mais simples e residem na mente das pessoas, assim são conhecidos como "modelos mentais". Sendo algo pessoal, pessoas diferentes podem ter diferentes modelos mentais para o mesmo produto.

Eles servem como guias para ajudar a alcançar nossos objetivos, compreender o mundo e interagir com objetos. Ao usar um novo produto nós dependemos de qualquer informação que nos é disponível, o que sabemos ao usar produtos semelhantes no passado, o que foi dito nas propagandas, por conhecidos, parentes, por artigos que posso ter lido, pelo site ou manual de instruções.

Trago dois exemplos de confusão que já experienciei algumas vezes com gerações mais novas:

  • No caso de uma criança que, ao receber um novo jogo em mídia digital, ficou decepcionada ao saber que precisava esperar o jogo ser baixado antes de jogar;
  • Ou, quando uma criança se desespera ao ver sua conta sendo desconectada pensando que todos os seus dados de conta seriam apagados.

Esses sentimentos negativos seriam evitados caso o usuário conhecesse um modelo mental apropriado do funcionamento desses produtos.

Ainda, além de estabelecer expectativas, os modelos mentais nos ajudam a determinar o que fazer quando problemas acontecem.  

Modelos conceituais são valiosos para fornecer compreensão, para prever como as coisas vão se comportar e para descobrir o que fazer quando as coisas dão errado. Um bom modelo conceitual nos permite prever os efeitos das nossas ações, e são a chave para produtos compreensíveis e agradáveis. Mais, uma boa comunicação é a chave para bons modelos conceituais.

Conclusão

Cabe aos idealizadores do produto fornecer as informações adequadas para tornar o produto compreensível e utilizável para seus usuários. As principais indicações de como as coisas funcionam vêm de sua estrutura percebida, especificamente dos significantes, affordances, mapeamentos e restrições. É essencial fornecer um bom feedback e modelo conceitual que guie o usuário quando as coisas dão errado.

Ao mesmo tempo que novas tecnologias e sistemas oferecem o potencial de melhorar nossas tarefas diárias, a constante evolução da complexidade das mesmas causa maiores dificuldades e frustrações.  

Assim, mesmo que as tecnologias avancem, os princípios fundamentais do design de interação apresentados por Norman permanecerão os mesmos e devem ser utilizados para resolver novos problemas. Um bom produto exige cuidado, planejamento, reflexão e compreensão dos comportamentos das pessoas.

Posts relacionados

Ler mais artigos
Métricas de UX: saiba quais são as principais e como transformam o seu negócio
Design System: o que é e quais os benefícios
Qual é a diferença entre UI e UX e porque investir
Protótipos: entenda o que são e como utilizá-los
Darkmode e os benefícios para a experiência do usuário
Design Thinking como aliado da inovação na saúde
Ler mais artigos

Entre em contato e um dos nossos especialistas irá atendê-lo:

Venturus - Campinas / SP - Brasil
Estrada Giuseppina Vianelli di Napolli, nº 1.185
Condomínio GlobalTech Campinas
Polo II de Alta Tecnologia
CEP 13086-530
Venturus - Manaus / AM - Brasil
Rua Salvador, nº 440
Adrianopólis
CEP 69057-040
Venturus - Atlanta / GA - EUA
1201 Peachtree Street NE,
Floors 1, 2 and 3,
Atlanta, Georgia
ZIP Code 30361
Vagas e Carreira
Parceria com Startups
Por favor, insira um email corporativo
Como prefere ser contatado?*

O Venturus precisa que nos forneça as suas informações de contato para falarmos melhor sobre nossos produtos e serviços. Ao informar seus dados, você estará ciente das diretrizes da nossa Política de Privacidade.

Obrigado! Sua mensagem foi recebida!
Ops! Algo deu errado com o envio da sua mensagem.