Como projetar microinterações com um toque
As microinterações são o "molho secreto" que faz brilhar aplicativos e sites para os usuários. Esses pequenos detalhes facilitam a definição de um alarme, o pressionamento de um botão ou simplesmente a melhor compreensão de como trabalhar com um produto digital.
O segredo é que as melhores microinterações são elementos em que o usuário provavelmente nem pensa. Eles acontecem em um instante - geralmente com apenas um toque na tela do celular. Apesar da natureza pequena da interação, portanto, “micro”, o valor é imenso para os usuários, à medida que esses compromissos se tornam mais integrados à atividade diária.
Como você projeta microinterações com um toque que encantam os usuários? Aqui estão algumas idéias.
Explore o Envato Elements
Animar um botão
Você se lembra da primeira vez que notou o Facebook como no Messenger? Você tocou no ícone de "polegar para cima" e ele cresceu na caixa para a pessoa com quem estava conversando. Isso fez você sorrir? Esse pequeno movimento lhe deu um pouco de prazer?
Animação simples, antes da torneira para incentivá-la ou depois da torneira para mostrar que a microinteração está funcionando, é uma maneira infalível de criar algo que os usuários desejam tocar. Pequenas animações fornecem informações sobre o que está acontecendo, para que os usuários se sintam confortáveis e confiantes sobre suas funções no ciclo de feedback.
Não
A animação deve ser tão simples quanto a própria microinteração. Mantenha os movimentos simples e fluidos e rápidos para iniciar e terminar. A adição de uma classificação no IMDb segue esse princípio; passe o mouse sobre a classificação e veja rapidamente o número de estrelas a adicionar à medida que você se move sobre cada uma. Toque para clicar para finalizar e confirmar a ação.
Fornecer opções
É uma lição de UX que remonta às cartas de amor da escola primária e do jardim de infância. Você gosta de mim? Marque sim ou não.
Grandes microinterações podem ser projetadas usando o mesmo conceito. Dê aos usuários duas opções rápidas. Toque para iniciar (ou parar) uma ação; toque para alternar. Os usuários querem fazer escolhas e se sentir no controle das experiências digitais, mas não querem se atolar com várias telas para chegar lá.
Criar ação imediata
A melhor maneira de garantir que os usuários interajam com sua microinteração? O resultado deve ser imediato. O resultado desejado deve:
- Acontecer com um único toque
- Forneça a ação desejada dentro de 0, 1 segundos
O imediatismo das microinterações é vital para seu sucesso. Como a natureza desses elementos é pequena, qualquer atraso na ação irritará os usuários. (Imagine como seria frustrante se fossem necessários três toques para desligar um alarme ou se houvesse um atraso de 2 segundos para silenciar a campainha em uma chamada durante uma reunião.)
A alternância rápida entre curtir (ou não) ou seguir no Instagram é um exemplo perfeito. É assim que a sua microinteração deve ser rápida.
Design para Repetição
Uma das coisas que diferencia a microinteração de alguns outros elementos interativos na interface do usuário é que eles serão usados repetidamente. As microinterações geralmente não são projetadas para uso único. (Quantas vezes você tocou no botão em forma de coração do Instagram na última hora?)
Crie uma ação repetitiva, mas a ação não deve parecer um movimento repetitivo. Embora isso possa parecer muito para absorver, tudo se resume à natureza intuitiva da torneira. É óbvio e natural? Se um usuário não precisar pensar em uma ação, nunca achará repetitivo concluir.
O uso de padrões de usuário comumente aceitos, animações e estilos de ícones ajudará a orientar a maneira como você cria microinterações. Não reinvente a roda aqui; facilite aos usuários concluir tarefas com apenas um toque e sem ter que se preocupar em como fazê-lo.
Tornar legível e confiável
Aqui está o passo que é esquecido com muita frequência - as instruções nas microinterações precisam ser legíveis e relacionáveis.
Legível refere-se a qualquer texto ou instruções relacionadas à microinteração. As palavras precisam ser fáceis de ver e digitalizar. Do ponto de vista do design, é fundamental selecionar um bom tipo de letra e garantir que haja espaço suficiente em torno das palavras e que haja bastante contraste entre as letras e o fundo. Fique longe de fontes condensadas, finas ou inovadoras que não são fáceis de ler de relance.
Relativo refere-se ao texto que lê da mesma maneira que as pessoas falam. Linguagens incomuns ou frases estranhas devem ser evitadas. Instruções dentro de campos de formulário que desaparecem quando o usuário começa a digitar é um ótimo exemplo. Isso é particularmente verdadeiro quando o texto usa um tom ou voz que o usuário espera da marca ou site com o qual está interagindo.
Foco nos detalhes
Uma microinteração é um dos muitos detalhes de design que compõem sua interface. Você precisa tomar um cuidado especial com cada um deles.
As microinterações devem parecer parte do design geral. Mas você também deve pensar nessas pequenas ações de outras maneiras. Desde as opções de cores até o tamanho dos elementos com os quais um usuário precisa interagir, esses detalhes incentivarão a ação ou farão com que os usuários abandonem o design para outra coisa.
Como faria com qualquer outro elemento de design, crie um conjunto de regras de estilo e design para microinterações em um aplicativo ou site, para que as ações sejam consistentes em todo o design e fáceis de encontrar e interagir com os usuários. Quanto menor o elemento - ou a interação - mais detalhes importantes se tornam.
Mantenha simples
Dizer isso um milhão de vezes não é suficiente - seja simples. Existem muitos designs que são muito difíceis de usar. Você pode pensar que é legal, mas os usuários não. Eles gostam de previsibilidade, consistência e simplicidade.
Quanto mais fácil é interagir com algo, maior a probabilidade de os usuários tocarem em um botão. É por isso que as ações de um toque são tão importantes. Como você sabe se o seu design é simples o suficiente? Ele precisa de uma estrutura definida com um loop de feedback para ações, instruções e visuais simples e uma mensagem que seja comunicada com clareza e fácil de entender.
Não pare de desenvolver
Projetar microinterações é um processo evolutivo. Porque esse é um conceito tão novo, está mudando o tempo todo. Existem novas idéias e novas maneiras de criar algo que os usuários desejam tocar.
Manter o controle da evolução das microinterações remonta ao básico que Dan Saffer definiu pela primeira vez. (Ele também escreveu um dos livros mais confiáveis sobre o assunto, "Microinterações: projetando com detalhes".) As microinterações incluem um processo de quatro etapas começando com uma ação de gatilho, regras para o funcionamento da interação, um ciclo de feedback para que o usuário saiba algo aconteceu e loops e modos que determinam como as interações futuras funcionarão ou o que virá a seguir. Lembre-se disso e você estará no caminho do sucesso da microinteração.
Conclusão
Existem muitas peças para projetar algo tão pequeno. Portanto, não pense que você pode criar uma microinteração em cinco minutos e seguir em frente. Projetar uma microinteração requer consideração e planejamento especiais.
Lembre-se de que as melhores microinterações geralmente funcionam com um único toque e são elementos com os quais os usuários nem sequer pensam em se envolver, embora o façam regularmente.
