Microinterações: o design do simples

A cada dia observamos o surgimento de um novo smart e com ele um novo termo: smartphone, smartwatch, smartglass, smartwear, smart..coisa! O que todos eles procuram promover ou deveriam procurar? a agilidade na execução de nossas tarefas cotidianas de maneira simples, conectada e influenciada pelo contexto do meio ou cenário em que estamos envolvidos. Denomina-se a essas características o termo microinteração. Dan Saffer, escritor de um livro sobre o tema,  define-a como:

Momentos específicos do produto para realização de uma tarefa (…) Cada vez que você muda uma configuração, sincroniza seus dados e seus equipamentos, configura um alarme, entra com uma senha, loga, configura uma mensagem de status, favorita ou dá um “like” em alguma coisa, você está realizando uma microinteração. Elas estão em todos os lugares: nos equipamentos que carregamos, nos eletrodomésticos em nossa casa, nos apps em nossos celulares e desktops, e também presentes em nossos ambientes de trabalho e vida pessoal. Muitos aparelhos e apps foram construídos baseados em uma única microinteração.

Seu modelo é baseado e composto pelas seguintes partes e princípios:

microinteractions-structure (1)

Partes de uma microinteração

  • Trigger: iniciam a microinteração, pode ser um controle manual, quando o usuário clica em um ícone ou botão ou mesmo quando uma condição ou um conjunto delas são verdadeiras. Exemplo: quando uma mensagem chega e o celular vibra, a mensagem é uma trigger para a vibração.
  • Rules: determinam a sequência de eventos e o que pode ou não ser feito. Exemplo: quando se ultrapassa o limite de 140 caracteres, o Twitter deverá destacar em vermelho os excedentes.
  • Feedback: é como entendemos as regras e seu modo de funcionamento. Por exemplo, ao abrir o Waze no estacionamento do trabalho ele pergunta: você está indo para a sua casa?
  • Loops e Modes: os Modes são usados quando uma ação não usual interrompe a microinteração, exemplo: quando você troca a cidade onde mora (obtida pela sua geolocalização) para verificar dados climáticos de outra cidade. Loops, por sua vez, determinam por quanto tempo a microinteração irá se prolongar, se ela se repete ou como ela muda com o tempo, exemplo: a notificação de uma mensagem instantânea ficará por 5 segundos na tela principal até ir para um segundo plano.

Os princípios para seu design, por sua vez são:

  • Não iniciar do zero: aproveitar todo o conhecimento sobre  usuário, a plataforma, o contexto, localização.
  • Trazer os dados ao seu usuário: verificar qual informação o usuário precisa do produto e então determinar como a informação deverá ser exibida (usualmente um trigger manual).
  • Prevenir erros de usuário: não permitir ação que quebre a microinteração.
  • Usar o que já existe: porque criar mais um botão? utilize o cursor, o scroll, etc para fornecer o feedback.
  • Estamos falando com humanos, não máquinas! Falar e comunicar de maneira simples e direta.
  • Longos Loops: adaptar sua microinteração, esquematizar como ela deverá ser na primeira, segunda, décima e na enésima interação.

O segredo para que todos esses novos equipamentos smarts “vinguem” pode ser a construção deles por este modelo. Os esforços devem ser direcionados para a construção de coisas simples que ajudem as pessoas no que elas devem fazer, no como elas devem fazer e pelo motivo pelos quais devem fazer! Não simplesmente o desenvolvimento de “smarts” que acabam se tornando meras extensões, como os primeiros modelos de smartwatches foram para os celulares.

Fontes:

  1. http://www.homemmaquina.com.br/blog/glossario/o-que-sao-microinteracoes-microinteractions/
  2. http://smartdesignworldwide.com/thinking/microinteractions-why-details-matter/
  3. http://www.uie.com/articles/intuitive_microinteractions/
  4. http://microinteractions.com/what-is-a-microinteraction/
  5. http://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details

Deixe sua opinião!

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s