Na traduĆ§Ć£o deste artigo, o autor fala sobre os componentes da microinteraĆ§Ć£o no design, descreve suas funƧƵes utilitĆ”rias no contexto do design geral e tambĆ©m fornece exemplos em que essas microinteraƧƵes ajudam a executar funƧƵes Ćŗteis quando o usuĆ”rio interage com a interface do aplicativo.
AtĆ© o momento, um nĆŗmero suficiente de desenvolvedores e designers da web ainda nĆ£o estĆ” totalmente ciente de que ignorar ou usar indevidamente as microinteraƧƵes no design pode custar muito a seus clientes. AtenĆ§Ć£o aos detalhes Ć© o que distingue um site excepcional da mĆ©dia. Ć por isso que as micro interaƧƵes bombeiam o design geral.
O que Ć© microinteraĆ§Ć£o?
As microinteraƧƵes no design sĆ£o encontradas em quase todos os aplicativos do seu smartphone ou computador. Sua principal tarefa Ć© tornar agradĆ”vel a experiĆŖncia do usuĆ”rio com seu aplicativo e criar uma sensaĆ§Ć£o de alegria, atratividade e, Ć© claro, a "humanidade" do design. DĆŖ uma olhada na interaĆ§Ć£o abaixo.
Essa microinteraĆ§Ć£o Ć© um bom exemplo, pois possui trĆŖs funƧƵes importantes:
- Relatar o status do processo e fornecer feedback ao usuƔrio.
- Aprimorando a sensaĆ§Ć£o de exposiĆ§Ć£o direta do usuĆ”rio ao aplicativo.
- AssistĆŖncia na compreensĆ£o pelo usuĆ”rio do resultado de suas aƧƵes com o aplicativo.
Componentes de microinteraƧƵes
Qualquer microinteraĆ§Ć£o possui quatro componentes:
- Triggers Iniciar microinteraĆ§Ć£o. Os gatilhos podem ser iniciados pelo usuĆ”rio ou pelo sistema. Em um acionador iniciado pelo usuĆ”rio, o usuĆ”rio deve iniciar uma aĆ§Ć£o com uma aĆ§Ć£o especĆfica. Em um acionador iniciado pelo sistema, o software detecta que determinadas etapas na qualificaĆ§Ć£o da aĆ§Ć£o sĆ£o satisfeitas e, em seguida, o sistema inicia a aĆ§Ć£o.
- Regras Determine o que acontece quando a microinteraĆ§Ć£o Ć© acionada.
- Feedback. Permite que os usuĆ”rios descubram o que estĆ” acontecendo. Tudo o que o usuĆ”rio vĆŖ, ouve ou sente durante a microinteraĆ§Ć£o Ć© feedback.
- Modos. As meta-regras para microinteraĆ§Ć£o sĆ£o determinadas. O que acontece com a microinteraĆ§Ć£o quando as condiƧƵes mudam?
Por que as microinteraƧƵes sĆ£o tĆ£o importantes?
Se as microinteraƧƵes sĆ£o quase os menores elementos de design, por que se preocupar com eles?
O fato Ć© que as microinteraƧƵes desempenham as seguintes funƧƵes Ćŗteis:
- Melhorar a navegaĆ§Ć£o do aplicativo
- Simplifique a interaĆ§Ć£o do usuĆ”rio com seu aplicativo
- eles fornecem feedback instantĆ¢neo e relevante sobre a aĆ§Ć£o executada ao usuĆ”rio;
- permitir conselhos informativos ao usuƔrio;
- transmitir informaƧƵes sobre o status de certos elementos, por exemplo, sejam eles interativos ou nĆ£o;
- tornar a experiĆŖncia do usuĆ”rio muito mais Ćŗtil;
- aumentar a probabilidade de um humor positivo do usuĆ”rio ao trabalhar com o conteĆŗdo do aplicativo;
- concentre os usuƔrios no bloco certo de informaƧƵes;
- e, finalmente, torne seu site ou aplicativo mais emocional.
MicrointeraƧƵes bem projetadas e projetadas sĆ£o um sinal claro de atendimento ao usuĆ”rio. O usuĆ”rio recebe informaƧƵes sobre o que ele precisa fazer e se sua aĆ§Ć£o foi correta e aprovada pelo sistema - o aplicativo ou site fornece feedback visual imediato e ensina o usuĆ”rio a trabalhar corretamente com o sistema.
Quando as microinteraƧƵes sĆ£o feitas da maneira certa, elas podem dar um feedback positivo sobre sua marca e influenciar as aƧƵes do usuĆ”rio, muitas vezes sem nem mesmo perceber o porquĆŖ. Se vocĆŖ gosta ou nĆ£o de um aspecto do produto, tem uma predisposiĆ§Ć£o positiva ou negativa ao produto como um todo. Esse chamado efeito halo (
distorĆ§Ć£o cognitiva, resultado da influĆŖncia da impressĆ£o geral de algo (fenĆ“meno, pessoa, coisa) na percepĆ§Ć£o de suas caracterĆsticas particulares ), que pode atuar a favor e contra vocĆŖ. Nas mĆ£os certas, esse conhecimento pode ajudar a melhorar o feedback do usuĆ”rio, porque, dando a devida atenĆ§Ć£o aos detalhes, vocĆŖ pode deixar seus usuĆ”rios felizes.
No mundo da UI / UX, as microinteraƧƵes sĆ£o apontadas como fonte de energia quando se trata de se comunicar com o usuĆ”rio.
Exemplos de uso
Deslize rapidamente
Um gesto de furto geralmente substitui um toque familiar e tambƩm Ʃ um elemento visual interativo e suave. Isso ajuda o usuƔrio a alternar rapidamente entre guias com as seƧƵes de informaƧƵes correspondentes e obter mais informaƧƵes sobre o produto. AlƩm disso, o furto Ʃ um gesto muito comum e direciona os usuƔrios a se moverem inconscientemente pelo aplicativo.
Entrada de dados
Todos nĆ³s conhecemos os problemas ocasionais com a configuraĆ§Ć£o de uma senha ou a criaĆ§Ć£o de uma conta. No processo, vocĆŖ pode facilmente e facilmente perder a paciĆŖncia. Apesar de mensagens de aviso e regras ou recomendaƧƵes sobre a confiabilidade e o uso de uma senha simplificarem mais aƧƵes para o usuĆ”rio, algumas interaƧƵes interativas durante a entrada de dados tambĆ©m ajudam os usuĆ”rios a se envolver no processo e permitem que eles atinjam seus objetivos com mais rapidez e facilidade.
AnimaĆ§Ć£o
As microinteraƧƵes tornam a animaĆ§Ć£o melhor, incorporando um bom design. A presenƧa deles pode nĆ£o ser notada, mas a ausĆŖncia Ć© precisa. Eles permitem que os designers tornem processos simples interessantes e emocionantes. Mas vocĆŖ deve ter muito cuidado, pois eles tĆŖm mais probabilidade de atrair usuĆ”rios e nĆ£o de distrair; o atraso no processamento de microinteraƧƵes ou a introduĆ§Ć£o de um novo estilo no site pode causar confusĆ£o.
Status atual do sistema
Ć importante informar o usuĆ”rio sobre o status atual do processo que ocorre no site ou no aplicativo. Se os usuĆ”rios nĆ£o forem informados sobre o status atual do processo, hĆ” uma chance de ficarem irritados e fechar o aplicativo. As micro interaƧƵes permitem que o usuĆ”rio saiba exatamente o que estĆ” acontecendo, quanto tempo levarĆ” para concluir o processo, etc. AtĆ© mensagens de erro podem ser executadas de maneira descontraĆda, mas eficaz o suficiente para manter a confianƧa do usuĆ”rio.
Treinamento e integraĆ§Ć£o
Torne divertido o treinamento de aplicativos e a integraĆ§Ć£o. Todos os usuĆ”rios estĆ£o constantemente procurando informaƧƵes. Os programas nos quais o tutorial Ć© implementado usando microinteraƧƵes ajudam os usuĆ”rios a trabalhar com o aplicativo, simplificando e destacando as principais funƧƵes e controles importantes para facilitar o entendimento.
Apelo Ć aĆ§Ć£o
As microinteraƧƵes levam o usuĆ”rio Ć interaĆ§Ć£o direta do usuĆ”rio com o aplicativo ou site. Uma chamada Ć aĆ§Ć£o instila um senso de conquista, bem como um fator de empatia no comportamento do usuĆ”rio, e a melhor maneira de fazer com que ele interaja com uma chamada Ć aĆ§Ć£o Ć© atrair o interesse do usuĆ”rio por meio de uma microinteraĆ§Ć£o apropriada.
BotƵes animados
Nesse contexto, as microinteraƧƵes desempenham o papel de um gerenciador de informaƧƵes, permitindo que o usuĆ”rio saiba como ele passa por seu aplicativo ou site. Preste atenĆ§Ć£o Ć cor, forma, animaĆ§Ć£o, layout e textura para que a experiĆŖncia do usuĆ”rio pareƧa unificada e integral.
Todas as pessoas geralmente buscam gratificaĆ§Ć£o instantĆ¢nea, e a tendĆŖncia geral Ć© ignorar as microinteraƧƵes em um contexto mais amplo quando falamos sobre design, mas vale a pena notar, no entanto, que elas sĆ£o muito importantes para atrair a atenĆ§Ć£o dos usuĆ”rios. Como diz o ditado, o diabo estĆ” nos detalhes. Pequenos recursos e recursos de design, como alternar entre telas ou isolar funƧƵes, a aparĆŖncia de uma nova notificaĆ§Ć£o, podem ser de grande importĆ¢ncia para melhorar a interaĆ§Ć£o do aplicativo com o usuĆ”rio.
Como projetar micro-interaƧƵes?
Criar micro-interaƧƵes Ć© uma atividade interessante e criativa para o designer, porque aqui vocĆŖ pode experimentar com seguranƧa novas soluƧƵes de design e procurar novas maneiras de surpreender os usuĆ”rios. Mas, ao mesmo tempo, vocĆŖ, como designer de microinteraƧƵes, deve ter em mente vĆ”rias coisas ao mesmo tempo:
- Coloque-se no lugar dos usuĆ”rios e use tudo o que vocĆŖ precisa para descobrir como eles usam seu aplicativo e onde as microinteraƧƵes podem ser Ćŗteis.
- Crie animaƧƵes funcionais. ou seja, aquelas animaƧƵes que nĆ£o apenas ficam bonitas, mas tambĆ©m podem melhorar a experiĆŖncia do usuĆ”rio, resolvendo um problema especĆfico.
- Divirta seus usuĆ”rios. Os sentimentos do usuĆ”rio quando ele usa seu aplicativo sĆ£o a razĆ£o pela qual ele continua a usĆ”-lo. Se o usuĆ”rio gostar da experiĆŖncia e achar agradĆ”vel, ele voltarĆ” a ela novamente.
- NĆ£o se incomode. AnimaƧƵes e microinteraƧƵes excessivas tĆŖm o efeito oposto. Nesse caso, os usuĆ”rios ficarĆ£o irritados e tentarĆ£o ficar longe do seu aplicativo.
- Use linguagem humana, nĆ£o tĆ©cnica. Uma microinteraĆ§Ć£o divertida que entra na posiĆ§Ć£o do usuĆ”rio e atenua o efeito negativo pode momentaneamente esquecer o quĆ£o frustrante o usuĆ”rio Ć© uma pĆ”gina em branco no aplicativo em caso de erro.