Impulsione seu UX com estes princípios de design de interação bem-sucedidos

Há uma linha tênue entre uma interação que funciona e uma que é inutilizável. Os princípios do design de interação ajudam a diminuir a divisão.

O design de interação bem executado desempenha um papel enorme na implementação de um ótimo UX e é indiscutivelmente um dos fundamentos dos princípios de design de UX.

“Inutilizável” significa “Estou seguindo em frente”, e não importa quão “bonito” seja o design visual – quão chique seja a animação – estrague o design de interação e seu UX será destruído. Faça certo e você estará no caminho certo para um UX muito melhor, mesmo que a estética fique aquém. O produto terá uma chance muito maior de sucesso, o que, por sua vez, contribui para o resultado final.

O design de interação (IxD) é definido pela Interaction Design Association (IxDA) como “a estrutura e o comportamento de sistemas interativos. Os designers de interação se esforçam para criar relacionamentos significativos entre as pessoas e os produtos e serviços que usam, de computadores a dispositivos móveis, aparelhos e muito mais.”

A experiência é fundamental, pois determina com que carinho as pessoas se lembram de suas interações. —Don Norman em The Design of Everyday Things.

Seguir os princípios do design de interação contribui imensamente para um ótimo design de interação, que por sua vez contribuirá para a experiência.

É possível que todos os dispositivos e tecnologia de hoje possam ser substituídos por algo totalmente diferente da noite para o dia, mas por causa de seus princípios duradouros, um ótimo design de interação ainda seria viável. Esses princípios constantes são sobre o que motiva as pessoas, seu comportamento e como elas pensam.

Imagine se cada maçaneta de cada porta funcionasse de forma diferente. Para um, você teria que empurrar primeiro a porta e depois descer; para outro você teria que puxar para cima em vez de pressionar para baixo, e ainda para outro você teria que puxar para cima duas vezes e depois para baixo — um desastre total. Na verdade, a frase “gire a maçaneta da porta” pressupõe que há apenas uma maneira de fazer isso.

Ninguém gosta de ser espancado na cabeça por gritos de “siga as regras”, mas o design de interação verdadeiramente excelente depende de um conjunto de padrões, práticas recomendadas, convenções e regras práticas (heurística). Não é uma ciência frágil, mas eles formam a base do IxD e tornam a interação possível com o mínimo de atrito. Os padrões de interface não sufocam a criatividade — não são regras rígidas e rápidas, mas diretrizes fundamentais que ajudam um designer a estabelecer uma base de “design utilizável e familiar” para inovar.

Princípios e melhores práticas de design de interação

O design de interação se enquadra na disciplina de Interação Humano-Computador (HCI), “Um campo de estudo multidisciplinar com foco no design de tecnologia de computador e, em particular, na interação entre humanos (os usuários) e computadores.” – conforme definido pela Interação Fundação de Design.

O excelente design de interface do usuário atinge o puro deleite do usuário, combinando princípios básicos de design de interface do usuário com design de interação orientado a objetivos.

• O design de interação bem-sucedido emprega objetivos simples e claramente definidos, um propósito forte e uma interface de usuário intuitiva.
• Em um esforço para manter as interações simples e fáceis, o design de interação orientado a objetivos não coloca nada mais do que o mínimo absoluto necessário na frente dos usuários para que eles concluam uma tarefa.

Vamos mergulhar em alguns dos princípios mais importantes (não uma lista exaustiva de forma alguma):

Descoberta

Basicamente, se o usuário não conseguir encontrá-lo, ele não existe. Deve ficar claro como um sino quais ações são possíveis em uma interface do usuário em menos de um microssegundo – por exemplo, rotular ícones como uma prática recomendada. Ícones não rotulados equivalem a colocar obstáculos no caminho de um usuário porque eles terão que parar para decifrar o significado. Você está interrompendo o “fluxo”. E aqui está um choque… Eles não estão interessados ​​em aprender sua interface do usuário.

Significante

Muito ligado à descoberta, o uso efetivo de significantes garante que as affordances – a possibilidade de uma ação sobre um objeto – sejam claramente indicadas na interface do usuário. Os significantes fornecem pistas fortes como sinais ou placas de sinalização. Indicando uma interação disponível, eles piscam luzes verdes para o usuário gritando: “Aqui estou, você pode tocar (clique, deslize, etc.) em mim!” Uma affordance pode existir na interface do usuário, mas pode permanecer oculta porque, se faltar um significante, ela permanece invisível. Um exemplo pode ser uma “interação gestual oculta” que não se revela, a menos que o usuário deslize acidentalmente para a esquerda ou para a direita (para excluir algo, por exemplo).

Affordances definem quais ações são possíveis. Os significantes especificam como as pessoas descobrem essas possibilidades: significantes são signos, sinais perceptíveis do que pode ser feito. Os significantes são muito mais importantes para os designers do que as affordances. —Don Norman (Norman, 2013)

Comentários

Depois dos significantes, a próxima comunicação mais importante para o usuário é o feedback. Feedback significa: informação explícita sobre o impacto da ação . Também significa visibilidade constante do status do sistema, ou seja, o sistema deve certificar-se de que:

• Os usuários são mantidos informados sobre o que está acontecendo.
• Há informações contínuas sobre os resultados de suas ações e o estado atual do produto (sistema).
• Não há confusão na mente de um usuário quanto ao estado do produto, ou seja, processamento, carregamento, busca, upload, etc., ou alguma outra mudança de estado.
• Após a execução de uma ação, é fácil determinar o novo estado.

Modelos conceituais e modelos mentais

Um ótimo design de interação apresenta todas as informações que um usuário precisa para criar um bom modelo conceitual do sistema, levando assim à sua compreensão e senso de controle. Um modelo conceitual melhora a descoberta e a avaliação dos resultados ao usar o sistema.

Modelos mentais – ou mapas cognitivos – são as imagens na mente de um usuário que informam sua expectativa de uma determinada interação e como algo funciona no mundo real. Os mapas cognitivos são representações internas do nosso ambiente físico, particularmente associadas às relações espaciais. Usando efetivamente o modelo mental do usuário, os designers de interação podem criar sistemas que “sentem” intuitivos.

O designer inventa um modelo conceitual – o modelo de design, e é assim que o designer pretende que o dispositivo ou software funcione. A única maneira de comunicar esse modelo aos usuários é implementá-lo por meio de uma interface do usuário. Os usuários então interagem com o modelo conceitual e criam seu próprio modelo mental de como algo funciona.

Os designers não podem dizer aos usuários como eles pretendiam que um aplicativo funcionasse – eles precisam projetar uma interface do usuário adequadamente para comunicar claramente sua finalidade. Em outras palavras, torne a interface fácil de entender e usar. Um design de interação ruim corre o risco de criar o modelo mental errado para o usuário. Isso leva a confusão e erro do usuário porque eles estão tentando operar o aplicativo de uma maneira que o designer não pretendia.

Mapeamentos

Mapeamento é a relação entre controles e seus efeitos no mundo. O princípio do feedback é um primo próximo do mapeamento porque os dois princípios trabalham juntos para criar uma experiência perfeita. Quase todos os artefatos precisam de algum tipo de mapeamento entre controles e efeitos — no caso de design de interface, é a relação entre um controle e sua função resultante.

O mapeamento natural – aproveitando as analogias físicas e os padrões culturais – leva a um entendimento imediato. Por exemplo, um designer pode usar analogia espacial na interface do usuário:

• Para aumentar algum valor com um componente de controle deslizante, deslize um controle deslizante para a direita,
• Para diminuir, deslize para a esquerda.

Alguns mapeamentos naturais são biológicos, como no padrão universal de que um nível crescente representa mais, um nível decrescente, menos.

Restrições

O conceito de design de restrições é uma forma de determinar como restringir o tipo de interação do usuário que pode ocorrer em um determinado momento. As restrições do projeto de interação ajudam a interação eficiente ao fornecer “trilhos de guia” para os usuários – quase como uma mão guia orientando as interações que podem ocorrer.

Restrições no design garantem que apenas coisas específicas sejam habilitadas, ou mesmo visíveis, para orientar o usuário em determinadas interações. Considera tamanho, escala, proporção, ênfase e estado, e como estes, trabalhando juntos em harmonia, ajudam a criar hierarquia e, consequentemente, influenciam o usuário. Restrições colocadas corretamente também ajudam a reduzir a chance de erro do usuário.

O oposto da restrição é quando todas as opções são oferecidas ao usuário, dificultando a decisão do que fazer a seguir. É o princípio da escolha . Quanto mais opções, mais difícil é escolher qualquer uma delas - ficamos sobrecarregados com todas as possibilidades.

Um ótimo design de interação não coloca todas as opções disponíveis na interface, mas a restringe ao que é mais importante em um determinado momento.

Consistência, Padrões e Heurística

Tudo isso está relacionado — irmãos aos padrões (abaixo), se preferir. Para evitar erros do usuário e tornar um aplicativo fácil de aprender, é essencial que um modelo de interação seja consistente. A consistência melhora o UX, a usabilidade geral e a eficiência com que os usuários podem usar produtos digitais.

Consistência significa usar elementos semelhantes para realizar tarefas semelhantes e ter funções e comportamentos semelhantes por toda parte - uma interface consistente é aquela que segue regras, como usar a mesma operação para fazer algo.

Os produtos que se esforçam para serem altamente utilizáveis ​​seguem convenções, padrões, melhores práticas e heurísticas de usabilidade bem estabelecidas (regras gerais, não diretrizes de usabilidade específicas).

Em conformidade com uma convenção , por exemplo, pode estar na forma como uma página é disposta. Os usuários da Web gastam 69% do tempo visualizando a metade esquerda da página e 30% visualizando a metade direita. Portanto, é mais provável que um site seja lucrativo se seguir um layout convencional.

Um padrão pode ser uma trilha de navegação (um dispositivo de orientação e navegação que é imediatamente reconhecível) ou um menu de navegação global na parte superior da página, como no site BCC.

Padrões e Aprendizagem

Com que facilidade um novo usuário pode aprender a navegar em uma interface? Ninguém quer aprender uma nova maneira de fazer as coisas, a menos que proporcione um benefício significativo em relação ao que veio antes, mas somos constantemente inundados por interações não testadas e não convencionais.

Componentes ou padrões comuns fornecem capacidade de aprendizado instantânea. Depois de aprender a usar uma colher, você sempre saberá como usar uma colher. O mesmo acontece com andar de bicicleta, andar de skate… a mesma construção se aplica aos componentes de interface do usuário que usamos todos os dias: botões, campos de texto, menus suspensos, caixas de seleção, botões de opção, giradores, controles deslizantes, ícones, acordeões, caixas de pesquisa etc.

Os melhores designs de interação não tentam reinventar a roda, mas fazem uso eficiente e eficaz dos padrões de uma nova maneira.

Os padrões não apenas incentivam a capacidade de aprendizado, mas também fornecem consistência (outro princípio, discutido acima) e o alinham com as expectativas do usuário de como as coisas devem funcionar.

Hierarquia Visual e Ênfase

Durante a interação com um site ou aplicativo, as pessoas procuram as informações mais relevantes para a pesquisa. A hierarquia visual diz respeito à disposição dos elementos de uma maneira que implica importância. A hierarquia visual no design influencia a ordem em que o olho humano percebe o que vê. Nem tudo tem o mesmo “peso”; A ordem é criada pelo contraste visual entre objetos em um campo de percepção. O contraste visual (ênfase) pode ser obtido por tamanho, proximidade, cor, opacidade e contraste tonal real entre os elementos.

Não subestime o poder da hierarquia visual. Ele tem sido usado de forma muito eficaz em todos os tipos de design por eras, em arquitetura e design industrial, bem como em design de impressão. Confira alguns ótimos designs de pôsteres. Usando bem essa técnica no design de interação, as coisas certas parecem aparecer na hora certa da maneira certa.

Grandes designers de interação usam o poder da ênfase para alcançar com sucesso designs de interface “enxutos e mesquinhos” que parecem funcionar como mágica.

Lei de Fitts

Acredite ou não, essa lei vem de estudos iniciais que analisam o movimento muscular humano e o direcionamento do operador de telégrafo e o desempenho da tarefa da linha de produção, e mais tarde foi adaptado para HCI (interação humano-computador). Basicamente diz: “O tempo para adquirir um alvo é uma função da distância e tamanho do alvo”.

Em termos mais simples, trata-se de quão longe e grande é um alvo, e quão próximo ele está em relação a outros alvos. Movimentos ou toques mais curtos do mouse são melhores - é sempre mais rápido clicar ou deslizar um alvo se estiver mais próximo da sua posição inicial. As tarefas relacionadas também devem estar próximas umas das outras para que os usuários não precisem correr pela tela interagindo com a interface do usuário.

A lei de Fitts pode prever com precisão a quantidade de tempo que leva para se mover e selecionar um alvo. Um destino pode ser um botão, uma lista suspensa ou algum outro elemento interativo em uma tela. Se estiver muito longe, muito pequeno ou se os elementos clicáveis ​​estiverem muito próximos, a eficiência e a usabilidade da interface do usuário serão bastante reduzidas.

Diagrama de Gutenberg, layouts de padrão Z e F

Esses padrões são aplicáveis ​​em diferentes situações, dependendo do conteúdo, e são usados ​​principalmente pelo público ocidental. O diagrama de Gutenberg descreve um padrão geral pelo qual os olhos se movem ao observar informações uniformemente distribuídas e homogêneas – principalmente sites com muito texto, como blogs ou sites de notícias. O diagrama de Gutenberg sugere que as áreas de pousio fortes e fracas ficam fora do caminho da gravidade de leitura e recebem atenção mínima, a menos que sejam enfatizadas visualmente de alguma forma.

O padrão Z segue a forma da letra Z. Em certos casos, esse padrão também é chamado de padrão Zig-Zag. A principal diferença com o diagrama de Gutenberg é que o padrão Z sugere que os espectadores passarão pelas duas áreas de pousio. Caso contrário, eles ainda começam e terminam nos mesmos lugares e ainda passam pelo meio. Assim como em Gutenberg, um designer colocaria as informações mais importantes ao longo do caminho do padrão Z.

F é para rápido e se refere a como os usuários lêem o conteúdo. O padrão F foi popularizado por um estudo de rastreamento ocular do NNGroup que registrou mais de 200 usuários lendo conteúdo na web. Ele descobriu que os padrões de varredura das pessoas eram bastante consistentes em muitos tipos diferentes de sites.

Por que isso é importante? Em um site de comércio eletrônico, por exemplo, para maximizar a verificação, convém organizar o conteúdo mais importante de uma maneira que siga o padrão F.

Reconhecimento em vez de lembrança

O reconhecimento refere-se à nossa capacidade de “reconhecer” um evento ou informação como familiar, enquanto a recordação é muito mais um “fardo cognitivo” que envolve extrair detalhes relacionados da memória. Mostrar aos usuários coisas que eles podem reconhecer melhora a usabilidade em relação à necessidade de recuperar itens do zero.

Por exemplo, usar ícones em uma interface do usuário é poderoso porque permite o reconhecimento instantâneo de um símbolo. Nosso cérebro processa (reconhece) símbolos cerca de 1000 vezes mais rápido do que ler texto. Se um designer exibir um ícone de sinal de aviso padrão em uma caixa de diálogo, ele imediatamente fará com que o usuário se concentre e preste atenção, pois a próxima ação pode ser destrutiva. Mas se um ícone for projetado de tal forma que força os usuários a lembrar e decifrar o significado – uma mão levantada, por exemplo, em vez do ícone de aviso – isso diminui a eficiência e a usabilidade da interface do usuário.

Design estético e minimalista

Você tem que entender profundamente a essência de um produto para poder se livrar das partes que não são essenciais. —Jonathan Ive.

Este é um dos princípios mais desafiadores porque é difícil. A tendência é que designers e gerentes de produto adicionem todas as opções disponíveis e deixem o usuário decidir o caminho que deseja seguir. Essa é realmente a abordagem preguiçosa e leva a produtos cheios de desordem não essencial.

As interfaces precisam ser limpas de elementos e conteúdos desnecessários que não suportam os objetivos e tarefas do usuário. Os designers não devem apenas projetar interfaces de usuário esteticamente agradáveis, mas também priorizar as informações tela a tela no fluxo do usuário. Usando a hierarquia visual e a magia da ênfase, apenas o mínimo essencial e absoluto de informações necessárias para o usuário concluir uma tarefa deve ser apresentado.

Michelangelo disse sobre seu trabalho: “Vi o anjo no mármore e esculpi até libertá-lo”.

Projetar uma interação que seja minimalista, esteticamente agradável e simples exige que o designer entenda o que está acontecendo precisamente no momento em que as pessoas usarão o produto e se livre de tudo o que não é necessário. Realizar pesquisas e testes profundos de usuários para entender como os usuários usarão o produto geralmente é a melhor abordagem.

Prevenção de erros

Os usuários geralmente se distraem ao executar uma tarefa, portanto, é fundamental evitar erros inconscientes por meio de ênfase visual, oferecer sugestões e usar restrições cuidadosamente projetadas. Uma forma de prova de erros – também conhecida como Poka-Yoke – refere-se à implementação de mecanismos à prova de falhas para evitar que um processo produza erros.

Uma das melhores maneiras de evitar erros é projetar um modelo mental melhor. Muitos erros do usuário ocorrem quando o modelo do projetista e a interpretação de como o sistema deve funcionar não correspondem ao modelo mental do usuário.

As convenções de design padrão ajudam (um dos princípios mencionados acima) porque ajudam os usuários a entender quais ações podem realizar. Os usuários que interagem com seu site ou aplicativo usaram milhares de outros sites e aplicativos e esperam que elementos interativos comuns tenham uma aparência e funcionem de uma determinada maneira. Situações propensas a erros podem surgir quando seu produto se desvia dessas convenções.

Avise antes que erros sejam cometidos e confirme antes de ações destrutivas. Ainda melhor do que mensagens de erro bem implementadas é um design cuidadoso que evita que um problema ocorra em primeiro lugar. Tente eliminar circunstâncias propensas a erros e continue verificando-as.

O futuro do design de interação

Novos dispositivos, ambientes e interfaces continuarão avançando com novas possibilidades de interação. Os controladores de videogame estão em constante evolução e fornecem uma gama diversificada de controles de entrada, bem como feedback tátil. As interfaces gestuais amadurecerão de telas sensíveis ao toque que suportam gestos 2D e 3D – por exemplo, gestos em dispositivos iOS e Android – para usar gestos manuais em espaços 3D para interagir com espaços de realidade virtual, consoles de jogos e dispositivos IoT que nos permitem controlar nosso ambiente .

Como no caso do Projeto Soli do Google, podemos dizer sayonara para o mouse, trackpads e joysticks, e mudar para interações gestuais mais naturais usando nossas mãos e dedos para controlar dispositivos. Em certos casos, em UIs de conversação, por exemplo, os métodos de entrada podem mudar de teclado para voz. No entanto, o princípio de feedback imediato e contínuo de alguma forma (voz, háptico e visual) ainda será necessário.

Os princípios fundamentais do design de interação sempre desempenharão um papel central no design de sistemas futuros e é importante que os designers de UX/UI os mantenham em mente. Elas não são regras rígidas e rápidas, mas farão produtos e serviços melhores e mais envolventes. Assim como os filmes de sucesso usam técnicas antigas de contar histórias que seguem uma estrutura comprovada e consagrada pelo tempo, existem princípios de design de interação que existem por um bom motivo. Segui-los beneficiará qualquer designer de produto, melhorando a usabilidade e impulsionando uma adoção mais ampla de seus produtos.

Leia mais no Blog Toptal Design:

• Princípios de Design: Introdução à Hierarquia
• Práticas recomendadas de design de interface do usuário e erros comuns
• Explorando os Princípios de Design da Gestalt
• O Guia Completo para Arquitetura da Informação