Quando os usuários abrem um site ou aplicativo, eles percebem primeiro os elementos óbvios do design: logotipo, cores, ícones, ilustrações e imagens. Embora estes elementos contribuam para a experiência geral do usuário, eles são na verdade peças de um puzzle maior: design de interação. Este conceito pode ser mais sutil para os usuários finais do que uma página inicial nova e vistosa, mas é essencial para criar uma experiência digital envolvente e intuitiva.

O que é design de interação?

Design de interação é facilitar as interações entre usuários e produtos (na maioria das vezes, esses produtos são aplicativos ou websites). De acordo com a Interaction Design Foundation, “o objetivo do design de interação é criar produtos que permitam ao usuário atingir seu(s) objetivo(s) da melhor maneira possível”. Em outras palavras, os designers de interação são responsáveis por criar cada elemento em uma tela com o qual o usuário pode interagir, seja clicando, deslizando, tocando, ou algum tipo de ação.

As cinco dimensões do design de interação servem como um modelo útil para entender o que ele envolve. Primeiro apresentado por Gillian Crampton Smith, um acadêmico de design de interação, o modelo incluía apenas quatro dimensões. Kevin Silver, um designer de interação sênior do IDEXX Laboratories adicionou a quinta.

1D: As palavras devem ser simples de entender e devem comunicar a quantidade certa de informação ao usuário (muito detalhe pode sobrecarregar, enquanto pouca informação pode causar confusão).

2D: Representações visuais, como imagens, tipografia e ícones, devem complementar as palavras para comunicar informação ao usuário.

3D: Objetos físicos ou espaço se referem ao hardware e objetos reais com os quais o usuário interage. Por exemplo, eles estão usando um smartphone ou um laptop com um mouse? E onde estão, na sua secretária ou num metro cheio?

4D: O tempo refere-se a como os utilizadores podem medir o progresso, com som e animação por exemplo, bem como quanto tempo passam a interagir com as primeiras três dimensões.

5D: O comportamento foi adicionado por Kevin Silver e inclui como as dimensões anteriores definem as interacções de um produto. Também inclui as reacções dos utilizadores e do produto.

Relacionado: 6 razões pelas quais os designers UX devem explorar a interação gestual

10 exemplos de design de interação

Como é a interação do design na vida real? Aqui estão alguns dos nossos exemplos favoritos encontrados em Dribbble.

Por Jony vino. Dividir a conta com seus amigos nem sempre é tão fácil quanto parece, especialmente se você é mais uma pessoa visual do que uma pessoa de números. Este conceito de aplicativo permite que você insira a conta total, selecione a porcentagem de gorjeta e depois veja quanto cada pessoa vai pagar. A melhor parte? Ao invés de ajustar manualmente a parte de cada pessoa e ter que atualizar constantemente a parte de todos, você pode simplesmente redimensionar a seção de cada pessoa no aplicativo e os números serão automaticamente recalculados para todos.

Por Prem Gurusamy. Na maioria dos sites de comércio eletrônico, você tem que navegar para uma parte completamente diferente do site ou aplicativo para ver o seu carrinho. Com esta interação, você pode ver instantaneamente seus itens “voar” para o seu carrinho assim que você clicar no botão “Adicionar ao carrinho”. O carrinho continua a superfície visualmente seus itens, mesmo quando você explora outras partes do site.

Por Igor Pavlinski. Os aplicativos de mídia social são notórios pela sobrecarga de informações, mostrando todas as principais histórias, vídeos de tendências ou artigos, e notícias de última hora ao mesmo tempo. Este conceito para um novo aplicativo de mídia social coloca o controle de volta nas mãos do usuário, organizando o conteúdo por fonte (como YouTube, Vimeo, Twitter ou Reddit) e permitindo que você escolha o canal a explorar. Este layout tipo cartão também elimina a necessidade de pular entre aplicativos para consumir seu conteúdo favorito. Em vez disso, é fácil alternar entre as fontes dentro da mesma experiência.

Por tubik. Há um milhão e uma maneira de personalizar o seu hambúrguer. E quando você está pedindo no seu smartphone, selecionar cada ingrediente individual em uma pequena tela pode ser um exercício de destreza. Este conceito de UI para o aplicativo Tasty Burger simplifica a experiência de pedido por balde de ingredientes por tipo. Em vez de mostrar uma longa lista de cada variação possível de queijo, produto, carne ou pão, você primeiro clica na categoria de ingrediente (como queijo) e então você é apresentado com os diferentes tipos, como gouda ou comte.

Por Rahul.Design. Se você está caçando em casa e não consegue ver a propriedade pessoalmente, a próxima melhor opção é fazer um tour virtual. Este conceito de aplicação imobiliária, Spec, alavanca o nosso comportamento natural quando se olha para um novo espaço. Você pode clicar em qualquer quarto, como a cozinha ou sala, e mover seu telefone para obter uma vista de 360 graus. É fácil trocar de quarto com apenas uma torneira.

By Forest Plasencia. Os filtros oferecem uma maneira poderosa e fácil de colocar à superfície diferentes fatias de informação. Mas, o problema com muitas interações do filtro é que eles abrem um popup ou uma nova página no aplicativo, escondendo a própria informação que você quer filtrar. Esta micro-interação mantém tudo na mesma visão, mesmo quando você faz o filtro. Desta forma, você pode ver os dados mudarem instantaneamente quando você seleciona diferentes critérios de filtragem.

Por Dmitro Petrenko. É mais fácil do que nunca armar e monitorar sua casa graças aos aplicativos para smartphone, mas entre 94%-99%

Relacionado: Criando uma ferramenta que registra as interações do usuário

Por Gil. Esta simples interação de página melhora a experiência do usuário no local e ajuda a empresa a manter os visitantes em suas páginas, por mais tempo. O principal objetivo do site é mostrar como essas propriedades podem ser usadas na natureza, como um escritório e como extensões. Ao invés de criar experiências separadas para cada propósito, esta página imita o fluxo de usuários de comparar e contrastar os diferentes usos, e saltar sem problemas entre eles.

Por Dominik Martin. As interações não precisam ser ousadas e perceptíveis para causar um impacto. Este conceito de aplicação simplifica um comportamento que todos nós desprezamos – escolher o nosso país de residência a partir de uma longa lista. Em vez de ter os utilizadores a percorrer a lista e encontrar o seu país, esta micro-interacção faz com que primeiro escolha a primeira letra do seu país e depois a encontre a partir de uma lista de países muito mais pequena e focada.

Por Mykolas Puodziunas. Mais e mais sites de varejo estão tornando mais fácil para você “ver rapidamente” um item, em vez de clicar em cada página de detalhes e depois ter que voltar para os resultados da pesquisa para navegar por mais itens. Este conceito leva-o um passo adiante e permite que você veja cada produto em suas diferentes cores disponíveis, sem ter que sair da página da categoria.

Perdemos o seu exemplo favorito de design de interação? Compartilhe conosco no Twitter: @InVisionApp.