Noções básicas sobre microinterações no design de aplicativos para dispositivos móveis

Usabilidade é um dos principais componentes de design de interface do usuário móvel. Grande usabilidade geralmente envolve microinteractions que são pequenas respostas e comportamentos de uma interface ditando como a interface do usuário deve ser usada. Essas microinterações definem comportamentos, incentivam o engajamento e ajudam os usuários a visualizar como uma interface deve funcionar.

Interfaces digitais são os intermediários entre os usuários e seus objetivos desejados. Designers de interface criam experiências que ajudam os usuários realizar determinadas tarefas. Por exemplo, um aplicativo de lista de tarefas tem uma interface que ajuda os usuários a organizar suas tarefas. Assim como um aplicativo do Facebook oferece aos usuários uma interface para interagir com sua conta do Facebook.

Neste guia, vou aprofundar ainda mais microinterações para aplicativos móveis. Pequenas interações podem parecer triviais, mas podem ter imenso impacto na qualidade da experiência de um usuário. Quando feitas corretamente, as microinterações parecem uma parte genuína da experiência do usuário móvel abrangente.

O poder das microinterações

Na maioria dos casos, o objetivo de uma microinteração é dar uma resposta com base na ação do usuário. Isso pode ajudar os usuários visualize como a interface se move ou se comporta, mesmo que seja puramente digital em uma tela plana.

Microinteractions tem poder porque eles criar uma experiência ilusória. Os controles deslizantes ativados / desativados não se movem como interruptores físicos, mas podem parecer se mover por meio de animações.

Eu encontrei uma citação incrível neste post discutindo o imenso valor das microinterações para aplicativos móveis:

“Os melhores produtos fazem duas coisas bem: características e detalhes. Recursos são o que atraem as pessoas para o seu produto. Detalhes são o que os mantêm lá. E detalhes são o que realmente fazem nosso aplicativo se destacar da concorrência.”

o pequenos detalhes pode parecer insignificante do ponto de vista do desenvolvimento, mas do ponto de vista da experiência do usuário, eles genuinamente fazer a diferença entre uma interface de usuário do aplicativo OK e uma interface de usuário de aplicativo extraordinária.

Grandes microinterações fazem o usuário sinta-se recompensado para tomar uma ação. Essas ações podem ser repetido e enraizada no comportamento do usuário. Eles podem aprender como usar um aplicativo baseado nessas microinterações menores. Quando o usuário realiza um comportamento, essas pequenas interações sinalizam "sim, você pode interagir comigo!"

Dê uma olhada nos exemplos encontrados nas especificações de design de material do Google. A documentação na verdade tem uma seção inteira dedicada ao movimento material. Relações espaciais são uma grande parte desta equação, mas o movimento pode ditar mais do que apenas relações espaciais.

Aqui estão os usos mais comuns de animação e movimento em design de UI / UX para dispositivos móveis:

• Orientando usuários entre diferentes páginas
• Orientando os usuários através da interface para ensinar certos comportamentos
• Sugestões de ações / comportamentos que podem ser tomados em qualquer página

Aplicativos móveis têm muito menos espaço na tela do que sites. Isso pode levar a algumas dificuldades para ensinar os usuários a usar um aplicativo. Mas pode ser surpreendentemente simples se você sabe como implementar microinterações apropriadamente.

Como funcionam as microinterações

Uma única microinteração é acionada sempre que o usuário se envolve com uma parte de uma interface. A maioria das microinterações são respostas animadas ao gesto do usuário. Então, um movimento de deslizamento responderá de forma diferente do que um toque ou um flick.

O Blink UX fez um ótimo post discutindo os pequenos detalhes das microinterações. Estas pequenas animações devem seguir um processo previsível que o usuário possa aprender para cada interação no aplicativo.

Microinterações orientam os usuários por meio de uma interface oferecendo respostas a comportamentos. Quando o usuário sabe que um controle deslizante liga / desliga pode se mover, ele sabe que é interativo. Com base na resposta, eles também saberão se uma configuração foi ativada ou desativada. Quando um botão parece que pode ser clicado o usuário sabe instintivamente eles podem interagir com isso.

De acordo com o UXPin, cada microinteração básica pode se dividir em quatro etapas, mas eu resumi o processo em três etapas.

1. Açao - a usuário faz alguma coisa como passar o mouse, deslizar, tocar e segurar ou alguma outra interação.
2. Reação - a interface responde com base no que precisa acontecer. Passar uma tela pode voltar ao histórico do navegador ou tocar em um controle deslizante LIGA / DESLIGA pode desativar uma configuração.
3. Comentários - é isso que o usuário realmente vê como resultado da interação. Quando o usuário desliza de volta em um navegador móvel, ele pode flutuar na página anterior para aparecer "no topo" da tela. O controle deslizante liga / desliga pode deslizar suavemente ou ficar maior quando a pressão é aplicada na tela.

Essas ações muito pequenas podem ser realizadas sem animação, mas grandes microinterações oferecem sentimento realista para a interface digital plana, que vem principalmente na forma de efeitos de animação realistas. Isso dá vida à interface e incentiva mais interação do usuário.

Procure os detalhes

Ao olhar para as partes menores de um design, você entenderá como um aplicativo deve responder a um comportamento específico.

Puxe para atualizar é um bom exemplo de uma microinteração agora popular. Não foi parte integrante do iOS quando foi lançado pela primeira vez, mas muitos aplicativos aproveitaram essa ideia e começaram a usá-la. Agora, pull to refresh é um comportamento conhecido que a maioria dos usuários sabe usar ao navegar pela interface do usuário do feed. O mesmo pode ser dito sobre menus de hambúrguer móvel que cresceram descontroladamente em popularidade.

Faça cada microinteração realista e simples. Não exagere em animações porque elas podem tornar-se tedioso se eles forem muito detalhados e se acostumarem com frequência. O usuário não deseja que os sparkles apareçam sempre que tocar em um ícone de menu. Encontrar um equilíbrio com valor genuíno que comunica como a interface deve funcionar sem ir ao mar.

Olhando para alguns exemplos

Acho que a melhor maneira de aprender alguma coisa é fazendo isso, e a segunda melhor maneira é estudar o trabalho dos outros. Eu colecionei um pequeno punhado de Animações de microinteração UI / UX de talentosos usuários do Dribbble para mostrar como eles se parecem em uma verdadeira maquete.

Cada aplicativo será diferente e terá necessidades diferentes com base no que o aplicativo faz. No final, a maioria dos usuários quer a mesma coisa: um aplicativo que intuitivo e proporciona uma experiência de usuário de qualidade com microinteractions em relação aos comportamentos do usuário.

1. UI de aplicativo de evento animado

O primeiro exemplo é um ótimo recurso de animação de cartas criado por Ivan Martynenko. Você notará um punhado de microinterações neste design, especialmente passando o cartão passando por detalhes.

Ao tocar no cartão, ele aumenta de tamanho. E ao tocar no botão Inscrever-se, a foto do perfil do usuário é exibida na lista de inscritos. Tudo parece muito intuitivo e bastante natural para a interface.

2. Tela de Exercício Interativo

Esta animação de exercícios móveis criativos vem do designer Vitaly Rubtsov. Ele demonstra um usuário salvando seu treino para um conjunto de agachamentos.

Observe que cada animação tem o mesmo efeito de salto elástico quando os menus abrem e fecham. Isso também é verdadeiro quando a atividade é verificada como "Concluído". Consistência é fundamental com microinteractions porque todos devem sentir conectado à mesma interface.

3. Pesquisar Microinteractions App

Curto, doce e direto ao ponto. Acho que isso descreve melhor essas microinterações de aplicativos de pesquisa projetadas por Lukas Horak. Toda animação é rápido, mas ainda perceptível.

É assim que você deve projetar microinterações para evitar excesso de complexidade. Se a interface carregasse mais rápido sem a animação, por que se incomodar em adicioná-la?? Animações rápidas manter o usuário em movimento sem atolar a experiência.

4. Microinteração de Meta de Fitness

Eu acho que Jakub Antalà ¥ à -K realmente acertou este fora do parque com sua microinteraçà £ o de objetivo de fitness. Todas as telas têm essa sensação de jellgly jell-o porque o formas se movem tão fluidamente.

No entanto, a interface também parece sólido e utilizável. Isso mostra que as microinterações criadas com um propósito ainda podem ser divertidas e divertidas, mas também funcionais e pragmáticas..

5. Puxar para atualizar a animação

Aqui está uma das minhas animações favoritas de puxar para atualizar criadas pela equipe da Ramotion. Isso não só imita um fluido com a ação pull, mas a animação de resposta conecta-se suavemente de um respingo de líquido em um círculo de carga.

este muita atenção aos detalhes é o que traz a verdadeira beleza nas microinterações de aplicativos para dispositivos móveis.

6. Microinteração Tab

Widgets com guias são bastante comuns para aplicativos móveis por causa das telas menores. Eu realmente gosto dessa microinteração criada por John Noussis, embora eu ache que seria mais eficaz em uma velocidade mais rápida, mas a animação em si é gloriosa e bem pensada..

A seta âncora da guia desliza para a direita, à medida que o novo conteúdo é refletido da direita. Dá a ilusão do tela inteira movendo-se fisicamente para a direita. A animação é excelente, mas como é muito lenta, acho que a maioria dos usuários ficava irritada depois de alguns dias.

7. Preloading Animation

Eu não falei muito sobre barras de carga neste post, mas eles são tão valiosos para a experiência geral. A maioria dos usuários não quer esperar que os dados sejam carregados, mas eles definitivamente não querem olhar para uma tela em branco enquanto carrega.

Bret Kurtz fez essa incrível tela de pré-carregamento que é divertida e informativa. O usuário pode realmente ser entretido assistindo esta pequena animação repita. Eles também podem ser tranquilizado que a aplicação é ainda carregando seus dados e não caiu.

Empacotando

Todos esses exemplos demonstram brilhantemente o valor das microinterações. Os aplicativos para dispositivos móveis obtêm muito mais valor das microinterações porque os usuários toque fisicamente nas telas com os dedos. Os usuários não tocam em seus monitores de desktop ou telas de seus laptops, mas todos tocam seus smartphones porque é o estado padrão de interatividade.

É um muito mais experiência pessoal, é por isso que o design de aplicativos móveis pode ser processo sutil. Quando feito corretamente, a adição de ótimas microinterações móveis pode construir poderosa experiência do usuário ilusória do nada, mas pixels e movimento.