• 9 de agosto de 2022
• Blog

Princípios de Design de Interação

Os princípios de Design de Interação permeiam nossas vidas de diversas formas. Quando nós interagimos com um produto, precisamos descobrir como ele funciona. Isso significa descobrir para que o produto serve 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 6 princípios fundamentais da interação. Esses princípios são conceitos centrais na área de Design, descritos por Donald Norman em seu livro “O Design do Dia-a-dia”, publicado em 1988.

Donald Norman é Designer, professor de ciência cognitiva e ciência da computação e cofundador do Nielsen Norman Group. Trabalhou como vice-presidente do grupo de Tecnologia Avançada da Apple nos anos 90 e possui diversas publicações sobre o tema, sendo uma das figuras indispensáveis para o estudo sobre design centrado no usuário.

Em “O Design do Dia-a-dia”, Norman propõe que as falhas no uso dos objetos não são culpa dos usuários, mas do design desses produtos, que ignoram as necessidades e psicologia das pessoas. Os princípios descritos pelo autor procuram eliminar problemas em produtos e torna-los agradáveis, proporcionando prazer e satisfação a seus usuários.

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.

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

Affordance

A palavra affordance é um termo apropriado da psicologia e de difícil tradução. Se fosse para fazer uma tradução livre, usaria a palavra “possibilitar”.

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

Affordance existe mesmo que ela não seja visível. De maneira prática, para designers, a visibilidade da affordance é primordial. Affordance percebida proporciona 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.

Dentro do contexto de interfaces digitais, um exemplo de affordance percebida é o tamanho de um campo em um formulário: campos menores “possibilitam” (afford) respostas menores, enquanto campos maiores possibilitam respostas maiores.

Signifiers (Significantes)

Com o intuito de complementar o termo anterior, Norman incorpora uma palavra da semiótica: signifier (significante). O termo refere-se a qualquer sinal ou marca, qualquer indicador que comunique o comportamento apropriado de um objeto a 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 que indicam essas possibilidades.

Algumas affordances percebidas podem ser ambíguas ou não reais, tornando-se significantes enganosos. Isso pode acontecer de forma acidental, mas também pode ser proposital, com o objetivo de impedir que as pessoas façam determinadas ações, que não são qualificadas.

Um exemplo de significante propositalmente enganoso são os postes de amarração que geralmente vemos em obras nas pistas. Os postes claramente impedem a circulação de veículos na delimitação, contudo, são feitos de borrachas.

Na prática, os veículos conseguiriam simplesmente atravessá-los. Assim, os postes de amarração são um significante que indicam uma área bloqueada para a maioria das pessoas, ao mesmo tempo que permitem a passagem de veículos.

Significantes podem ser placas, indicadores, ilustrações, instruções ou palavras (pense em “Empurre” ou “Puxe” nas portas, por exemplo). 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:

Na criação de um produto, significantes são mais importantes que affordance, pois eles comunicam como usar o objeto em questão. Independentemente de sua natureza (planejada ou acidental), os significantes fornecem pistas valiosas sobre o funcionamento das coisas.

Por isso, os significantes devem ser visíveis, caso contrário, eles não funcionam. Como designers, nós devemos incorporar os significantes de maneira coesa à experiência do produto.

Mapping (mapeamento)

Mapeamento é um termo técnico, emprestado da matemática. Ele representa a relação entre os elementos de dois conjuntos de coisas. Basicamente, qual controle está ligado a 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.

Alguns mapeamentos naturais são culturais ou biológicos: para mover um objeto para cima, mova o controle para cima. Ou são padrões universais: mover a palma da mão para cima significa mais, mover para baixo significa menos. Nesse sentido, usar eixo vertical para representar intensidade ou quantidade faz muito sentido.

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.

Dentro dos ambientes digitais, temos diversos exemplos de mapeamentos naturais. No exemplo da figura acima, 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 os botões físicos do som estabelece uma relação entre o controle e o aspecto 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, tomamos 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.

Nas línguas em que a escrita se dá da direita para esquerda (como a língua árabe), por outro lado, o sentido da barra de progressão deve ser inversa.

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 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 de seu interesse 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.

O que está faltando nesta situação é um feedback adequado. Alguma maneira de comunicar ao usuário que o sistema está respondendo às 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 são exemplos muito utilizados.

O Feedback — sinalização do 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. Um feedback ruim pode ser pior que nenhum feedback, já que esse pode ser uma distração, ser pouco informativo e, em muitos casos, irritante e pode causar ansiedade.

Além disso, muito feedback pode ser mais irritante do que pouco. Muitos avisos fazem com que as pessoas ignorem ou desativem todos eles, o que significa que avisos importantes não serão vistos.

Feedbacks dos sistemas devem ser planejados. Todas as ações precisam ser confirmadas, mas de maneira discreta. Feedback também deve ser priorizado para que informações sem importância não sobressaiam os avisos relevantes. Feedback é essencial, mas deve ser feito corretamente.

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.

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. Como mostra a figura abaixo).

Restrições são um princípio valioso que limita as possibilidades de interação. 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 precisa 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. Os modelos conceituais 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”. Por serem algo pessoal, pessoas diferentes podem ter diferentes modelos mentais para o mesmo produto.

As pessoas criam modelos mentais de si mesmas, dos outros, do meio ambiente e de todas as coisas com as quais interagem. Esses modelos conceituais são formados por experiência, treinamento e instruções. Esses modelos servem como guias para ajudar a alcançar nossos objetivos, compreender o mundo e interagir com objetos.

Ao usar um novo produto, nós utilizamos toda informação que nos é disponível: o que sabemos por usarmos 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.

Além de estabelecer expectativas, os modelos mentais nos ajudam a determinar o que fazer quando problemas acontecem. Um exemplo que muitos netos já devem ter vivenciado: ao visitar o avô e precisar resolver um problema da televisão. O problema era que “a televisão não funcionava, ela ligava mas não passava os filmes”.

Depois de uma análise rápida o problema era: meu avô tentava ver filmes na Netflix, mas a televisão estava desconectada da internet. Bastou reconectar para o problema ser resolvido. Em suma, ter o entendimento, mesmo que simplificado, do funcionamento do aparelho e suas aplicações fornece caminhos para resolver o problema em questão.

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 pode ser a chave para produtos compreensíveis e agradáveis. E, para bons modelos conceituais, a chave é uma boa comunicação.

Bons produtos são criados com o usuário em mente

Cabe aos idealizadores do produto fornecer as informações adequadas para torná-lo compreensível e utilizável a 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 causam 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.