Melhor UX por meio de microinterações

Publicados: 2022-03-11

Ao projetar um produto, há muitas maneiras de melhorar a experiência do usuário, incluindo a definição de personas, arquitetura de informações bem estruturada e conteúdo cuidadosamente escrito. Mas depois que essa estrutura de alto nível é definida, criar prazer para um usuário vem nos detalhes menores do design de interação .

Esses detalhes, conhecidos como microinterações , são momentos individuais no produto projetados para realizar uma única tarefa enquanto aprimoram o fluxo natural do produto. Deslizar para cima para atualizar dados, gostar de conteúdo ou alterar uma configuração são todas microinterações. Eles também podem incluir animações simples de interface do usuário, por exemplo, a maneira como um menu desliza quando tocado ou um cartão desliza para fora da tela quando passa o dedo.

Muitas vezes as microinterações nem são percebidas conscientemente pelo usuário, mas seus detalhes sutis tornam o produto mais agradável e fácil de usar e, portanto, melhoram a experiência do usuário.

Benefícios das microinterações

Microinterações e animação de interface do usuário são tão cruciais que podem fazer ou quebrar um design – ou como Charles Eames, famoso por design de móveis e arquitetura, disse:

Os detalhes não são os detalhes. Eles fazem o desenho.

microinteração de rolagem — Microinteração de rolagem com contatos. (por Nikita Duhovny)

Alguns dos principais benefícios da incorporação de microinterações em um produto são:

Criando um efeito emocional positivo no usuário devido a interações de interface do usuário mais suaves
Fornecer feedback imediato ao usuário com base nas ações que ele realizou
Guiar o usuário por meio de um aplicativo de maneira mais fluida e intuitiva
Incentivar os usuários a interagir com um aplicativo respondendo a uma notificação ou ao compartilhar conteúdo
Evitando erros do usuário

Práticas recomendadas de design de microinteração

Agora que estabelecemos alguma definição e contexto em torno do que as microinterações fazem e fornecemos um exemplo de como elas melhoram a experiência do usuário, vamos discutir as práticas recomendadas para criar microinterações.

Microinteração de comércio eletrônico — Microinteração de seleção de cores de produtos de comércio eletrônico. (por Mykolas Puodziunas)

Identifique e entenda o problema do usuário

A primeira regra em qualquer design de experiência do usuário é descobrir e entender os problemas do usuário – não é diferente para microinterações. A melhor maneira de entender o que o usuário precisa é realizar pesquisas ou entrevistas, ou observar o comportamento por meio de pesquisas de usuários. O designer da Toptal, Ivan Annikov, aprofunda o entendimento das necessidades do usuário em seu artigo, “Going Guerrilla: Affordable UX Research Tips And Alternatives”.

Mantenha as microinterações naturais

O objetivo é preencher a lacuna entre o usuário e um produto de maneira intuitiva e natural, para evitar animações estranhas que demoram muito para carregar ou podem distrair o usuário. Em vez disso, crie designs que fluam perfeitamente com o produto. A sutileza é fundamental nas microinterações. Não deixe o usuário confuso e pensando: “O que foi isso?”

padrão ux de microinteração de comércio eletrônico — Uma microinteração de comércio eletrônico adicionando um produto ao carrinho de compras. (por Elior Helose)

Testar e iterar descobertas do teste do usuário

Mesmo designers experientes raramente conseguem designs completamente corretos na primeira tentativa. É por isso que usar um processo de teste de usuário e design iterativo é uma maneira simples de reduzir falhas de usabilidade antes do lançamento do produto.

Durante a fase de teste do usuário, as microinterações são testadas e analisadas quanto à usabilidade e revisadas durante a próxima fase de design. Esse processo é repetido até que os problemas de usabilidade e os pontos problemáticos sejam corrigidos.

Siga a Estrutura das Microinterações

De acordo com Dan Saffer, Designer de Produto Sênior da Equipe do Twitter e autor de “Microinteractions: Designing with Details”, existem quatro partes de uma microinteração.

Gatilho — Um gatilho inicia as microinterações. Um tipo de gatilho é um interruptor que liga e desliga uma funcionalidade.
Regras — Uma regra determina como uma microinteração responde a um gatilho e define o que acontece durante a interação. Por exemplo, um aplicativo de lanterna usa um botão como gatilho que liga e desliga a luz.
Feedback — O feedback informa ao usuário o que está acontecendo durante a microinteração. Um exemplo de feedback é um formulário de inscrição com validação embutida - a cor da borda fica verde se o campo for preenchido corretamente e fica vermelho se algo estiver incorreto. Dessa forma, o usuário sabe instantaneamente que algo está certo ou errado.
Loops e Modos — Loops e modos definem as meta-regras da microinteração e como a microinteração muda quando usada repetidamente. Por exemplo, no comércio eletrônico, um botão “Comprar agora” pode mudar para “Comprar outro” quando o usuário já comprou o item antes.

padrão ux de microinteração de solicitação de amizade — Uma microinteração para responder aos pedidos de amizade. (por Erdenebaatar)

Desconstruindo o design de microinteração

Para mostrar o processo de pensamento por trás do design de microinterações, vamos desconstruir uma microinteração do Google: a microinteração de sugestão de nome de arquivo no Google Docs.

Essa microinteração pega a primeira linha de um documento e sugere esse pedaço de texto como o nome do documento, tornando o processo de criação do nome mais intuitivo.

Microinteração de sugestão de nome de arquivo do Google Docs — Sugestão de nome de arquivo do Google Docs.

O processo de projetar uma microinteração é o mesmo de qualquer tarefa de projeto: identificar o ponto problemático do usuário e corrigi-lo. Mantendo as melhores práticas anteriores em mente, vamos começar a identificar o problema.

O problema do usuário

Uma maneira fácil e intuitiva de manter os documentos organizados é simplesmente nomeá-los de forma descritiva. Na maioria dos editores de texto, o campo “Nomeie seu documento” permanece em branco, mesmo que haja uma forte chance de o nome do arquivo eventualmente se correlacionar com o conteúdo do documento. Este é um processo que vale a pena abordar com uma microinteração.

Solução do Google

O Google Docs lida com isso de duas maneiras, dependendo das escolhas do usuário: 1) Os usuários podem clicar no campo de nome e alterar o nome do documento imediatamente antes de digitar qualquer conteúdo e alterar "Documento sem título" para o nome de sua escolha ou 2 ) Depois que um usuário digita a primeira linha de texto, o Google a preenche automaticamente como o nome do documento. O usuário pode manter isso como está ou alterá-lo.

Vamos examinar os detalhes:

Gatilhos

Pode haver alguns gatilhos possíveis para nomear o documento, usando a função de menu Arquivo > Salvar como ou pressionando cmd+s em um Mac ( ctrl+s no Windows) no teclado como em aplicativos de desktop. Mas nenhum deles tira proveito da natureza interativa da web e não melhora particularmente o fluxo de usuários.

Em vez disso, o principal gatilho do Google Docs é simplesmente clicar no campo de nome do documento. O estado de foco no campo exibe uma dica de ferramenta “Renomear”. O gatilho secundário é File > Rename , que destaca o campo de entrada de nome.

Microinteração de dica de ferramenta de renomeação do Google Docs — O Google Docs usa uma dica de ferramenta simples, mas muito útil.

Regras

As regras definem o que acontece depois de clicar no gatilho. Nesse caso, a primeira linha de texto aparecerá como o nome do documento. Mas e se o usuário não quiser ter a primeira linha de texto como nome? Quando o usuário clica no campo de entrada de nome, todo o texto é selecionado e será excluído com qualquer pressionamento de tecla, tornando mais fácil para o usuário criar um novo nome.

Microinteração de nome de arquivo destacado do Google Docs — O Google Docs destaca o nome do documento, o que permitirá que o usuário comece instantaneamente a criar um novo.

Comentários

Alterar a cor da borda do campo de entrada é um padrão de interação comum e é o que o Google Docs usa aqui para fornecer feedback imediato ao usuário.

Microinteração de borda ativa do Google Docs — Alterar a cor da borda permite que o usuário saiba o que está mudando.

Loops e Modos

O usuário criou com sucesso o nome do documento e o gatilho permanece no lugar com uma diferença importante: O documento agora foi nomeado.

Neste ponto, o usuário pode querer alterar apenas algumas letras ou adicionar uma data ao nome, em vez de alterar todo o nome definido anteriormente. Nesse caso, ao contrário da regra anterior, a regra para destacar todo o nome do documento é desabilitada.

Google Docs após o nome ter sido definido como microinteração — O Google Docs não destaca o nome depois de definido.

Resultado

Depois de definir o problema e focar em todas as quatro partes de uma microinteração, o resultado é uma experiência mais natural e fácil de usar. A solução de nomenclatura de arquivos do Google Docs ajuda o usuário a se manter organizado com arquivos nomeados corretamente e simplifica o processo de nomenclatura de documentos.

Microinterações em ação: exemplos do mundo real

Reordenando uma lista de tarefas

Os Apple iOS Reminders ajudam os usuários a se manterem organizados e a eliminar várias etapas, permitindo que toquem, segurem e arrastem um item da lista para alterar seu lugar na ordem da lista.

Lista de lembretes do iOS reordenando a microinteração — Alterar a ordem dos itens da lista é tão simples quanto arrastar e soltar.

Reagindo a postagens de mídia social

“Curtir” o conteúdo clicando em um botão ou ícone de polegar para cima se tornou um padrão de design de UX comum em muitos aplicativos e sites. O Facebook construiu essa interação adicionando várias opções além de “curtir” por meio de uma microinteração sutil.

Microinteração de reações do Facebook — A coleção de reações do Facebook inclui Like, Love, Haha, Wow, Sad e Angry. (por Seth Eckert)

Realce de texto com marca

Na maioria dos navegadores, é possível substituir a cor de seleção de texto padrão. A IKEA usa esse padrão de interação para adicionar um detalhe sutil de marca, destacando o texto em suas icônicas cores amarela e azul.

Compartilhando sua localização

O Google Hangouts assume que uma das vezes em que um usuário pode querer compartilhar sua localização é quando alguém envia uma mensagem de texto "Onde você está?"

Quando o usuário visualiza esta mensagem, um botão “Compartilhar sua localização” aparece como uma opção contextual. Eles podem tocar nesse botão para enviar automaticamente um mapa de sua localização para o outro usuário.

O Google Hangouts compartilha sua localização — Compartilhando sua localização com apenas um toque. (da TechCrunch)

Deslizando para selecionar

As microinterações podem ser usadas para responder a perguntas simples de sim ou não em um aplicativo. O Tinder faz isso fazendo com que o usuário deslize para a esquerda ou para a direita (não/sim), dependendo de gostar ou não de sua possível correspondência.

Expansão de pesquisa

O aplicativo Caixa de entrada do Google não apenas agrupa e-mails com pacotes de maneira inteligente, mas também foi projetado para permitir a pesquisa por voz ou escolher entre os contatos mais recentes com um único toque.

Microinteração da Expansão do Google Inbox Search — O aplicativo Google Inbox permite que os usuários pesquisem e-mails de seus contatos mais recentes com uma microinteração cuidadosa.

Adicionando rapidamente as informações de contato de um amigo

O SeatGeek simplifica o processo de preenchimento de formulários, preenchendo automaticamente as informações dos contatos de um usuário com um toque no botão “Adicionar de Contatos”.

Saiba mais sobre microinterações

As microinterações são uma parte fundamental para melhorar a experiência do usuário, e há muitos recursos disponíveis para aprender mais sobre elas, alguns dos quais estão listados abaixo.

Para saber mais sobre microinterações em geral, visite Microinteractions, o site criado para complementar o livro mencionado anteriormente “Microinteractions: Designing with Details” de Dan Saffer. No site, há explicações detalhadas sobre microinterações, bem como informações sobre a origem de microinterações conhecidas, como autocorreção, autocompletar e recortar e colar. O primeiro capítulo do livro também está disponível para download gratuito.

Para inspiração de microinteração, visite Little Big Details, uma coleção com curadoria de microinterações em produtos digitais. Ele mostra exemplos de como empresas como Apple, Trello e Stack Overflow implementam microinterações e animação de interface do usuário.

Para aprender a criar microinterações no Framer, leia Toptal Designer, artigo de Wojciech Dobry, Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •