UX nos detalhes
São os pequenos detalhes que muitas vezes passam despercebidos e que, no final, podem contribuir de maneira significativa na experiência do usuário.
Existem elementos que são essenciais para a nossa compreensão do todo, iremos apresentá-los por partes, sendo esta a primeira de uma série que visa demonstrar a importância de determinadas práticas. Práticas estas que por muitas vezes negligenciamos por parecerem simples demais, por serem confundidas com detalhes ou adornos, ou pela complexidade de desenvolver, mas que se pararmos um pouco para refletir conseguimos constatar os benefícios de implementá-las.
O que pretendo difundir é a ideia de que às vezes a melhor experiência está nos detalhes e demonstrar que aquele pequeno cuidado que tomamos com sutilezas que completam a experiência do usuário, tornam o contexto muito mais agradável e intuitivo ao longo do processo de interação.
Introdução a Microinteractions
Para entendermos esse conceitos precisamos explorar as definições de Dan Saffer no livro Microinteractions: Designing with.
As microinterações são pequenas partes essenciais de cada uma das funcionalidades presentes em nossas aplicações. Ao focar nestes aspectos das funcionalidades estamos criando uma ótima experiência de usuário.
Em termos práticos, uma microinteração é quando você está efetuando um cadastro, e ao digitar sua senha você observa que um campo de texto é constantemente atualizado para representar o nível de segurança da sua senha.
Ao digitar o usuário dá início a microinteração que por sua vez continua enquanto existir inserção de novos dados, modificando de acordo com o inserido o que está sendo exibido.
O ato de digitar representa o primeiro componente da interação: Os Triggers.
Em português claro podemos chamá-los de gatilhos, e sua função é clara: iniciar a uma série de fenômenos atrelados a microinteração. Neste caso usamos como exemplo um trigger manual, onde através de uma ação do usuário ele é disparado, mas também podemos utilizar system trigger que seria independente de um clique.
Após isto mencionamos que, um campo de texto é constantemente atualizado para representar o nível de segurança da sua senha, para que isso ocorra dependendo de dois componentes da interação: os Rules e o Feedback.
Os Rules ou regras, são invisíveis para o usuário, se tratam de definições para a sequência de eventos. Para este caso as definições poderiam ser:
- Se o usuário inserir apenas três dígitos, mostre: "A senha é curta! Precisamos de no mínimo 6 dígitos."
- Se o usuário usou uma sequência comum de números como "123456", mostre: "Sua senha é fraca! Tente inserir letras e símbolos."
- Se o usuário digitou uma senha com números, letras e símbolos, mostre: "Senha segura!"
Observe que são, neste caso, basicamente definições de desenvolvimento, que a equipe irá concluir como um todo e que praticamente são invisíveis para o usuário.
Estas definições apenas se tornam claras para o usuário através do Feedback, o terceiro componente da interação, na qual definimos como um campo de texto, que exibe de acordo com o que é inserido uma mensagem de auxílio para o usuário.
Através das mensagens, como por exemplo “Sua senha é fraca! Tente inserir letras e símbolos.”, é que o usuário compreende o contexto e consegue se previnir erros.
Existe ainda um quarto componente da interação, que é a chamado Loops & Modes.
Para este caso o Loop, ou repetição, é bastante importante, pois o feedback depende que a interação se repita sempre que o usuário insira novos dígitos no campo de senha. A microinteração só irá cessar quando o usuário retirar o foco do campo de texto em si. Basicamente um Loop determina se a interação se repete ou se muda com o tempo.
Neste caso não possuímos um Modes, e isto é no geral positivo. Dan Saffer explica que o motivo para evitar modes em geral é que eles podem causar erros.
Mas os modes modificam a forma típica como as interações funcionam e operam. Exemplos disso são os modos de edições nas telas dos dispositivos iOS, que uma vez ativados, os gestos irão ocasionar efeitos diferentes do habitual.
Normalmente ao tocar em umas das imagens que representam os arquivos o aplicativo iria efetuar uma transição para o modo de desenho dentro do arquivo selecionado, entretanto ao ativar o modo de edição tocando no ícone de ✏️, o mesmo gesto de tocar em uma das imagens ocasiona uma ação diferente, desta vez iremos selecionar os arquivos.
Em resumo possuímos quatro componentes: o trigger, as rules, os feedback e loops & modes.
Cada um desses componentes é essencial para construir uma microinteração de sucesso.
Em resumo os Triggers são os eventos que iniciam a microinteração.
Os Rules são as regras que guiarão a forma como a microinteração irá ocorrer, normalmente são invisíveis para o usuário.
Os Feedbacks são a forma que sua aplicação possui de comunicar que as interações estão sendo compreendidas.
E por fim os Loops determinam a duração da microinteração e os Modes modificam como as microinterações funcionam normalmente.
Mas por que as microinterações são importantes?
Um dos pontos positivos do uso da tecnologia vem do fortalecimento e engajamento do usuário. Uma experiência agradável significa mais do que apenas usabilidade — ela precisa ser envolvente e é aí que as microinterações podem ter um papel macro, contribuindo positivamente para a aparência e experiência de um produto ou serviço.
As microinterações influenciam positivamente na experiência de sua aplicação incentivando o engajamento, exibir o status do sistema, auxiliando a prevenção de erros e comunicando conceitos de sua marca.
Desta forma iremos discutir como estas microinterações podem ser abordadas em nossas aplicações, observando o estado da arte e padrões existentes atualmente.
Tela vazia
Ao abordar esse o tópico de telas vazias pretendemos abranger desde a primeira interação do usuário com um determinado aplicativo que depende da inserção de dados do usuário para mostrar informações, até o retorno de uma pesquisa que não encontrou nenhum resultado.
Como designers devemos tratar as ocasiões acima descritas como uma oportunidade de criar um momento agradável com o usuário e transformar uma possível tela vazia em informação, contendo saídas demarcadas e ações contextuais facilmente disponíveis.
Para compreender ainda melhor este conceito basta lembrar de:
- Uma pesquisa no Google sem resultados
- A primeira vez que você logou no Dropbox em que ainda não possuía nenhum arquivo ou pasta
- A tela de um aplicativo de tarefas após de concluir todas as tarefas
- Sua nova conta em uma rede social, sem conexões
As telas vazias também tem se tornado um espaço de comunicar as características da marca, trazendo a linguagem visual através de ilustrações e animações, além de se expressarem de forma a criar conexão com o usuário, usando referências da vivência do público alvo.
No caso acima vemos uma caso em que a interação é interrompida por falta de conexão com a internet.
Em vez de apenas quebrar o fluxo de interação com um mode informativo sobre o erro, é feito uma referência as antigas televisões que exibiam uma tela colorida sempre que não havia sinal disponível, trazendo a possibilidade de conectar-se com memórias do usuário.
Por fim mostrar claramente a única ação disponível para o usuário, auxiliando também que o usuário consiga se recuperar do problema.
Estas oportunidades surgiram basicamente em situações de Primeiro uso, Não há dados a exibir, Erros ou Resultados vazios.
Mapeie também essas situações em seus protótipos, para que seja possível planejar como aproveitá-las da melhor maneira possível.
Validações em tempo real
Um erro bastante comum em formulários é deixar a validação apenas para o momento em que o usuário o envia. Esta situação é grande responsável por frustrações, principalmente se o formulário for longo, se as informações sobre formato e obrigatoriedade não são claras.
Um jeito de previnir que sua aplicação provoque este tipo de frustração em seus usuários é investir em validações em tempo real, ou seja, ao longo do preenchimento sua interface possui diversos feedbacks para auxiliar o usuário durante o processo.
Neste caso possuímos uma microinteração totalmente focada em informar para o usuário as restrições do formulário, que pode ser aplicado a qualquer campo do formulário de modo a prover feedbacks mesmo antes do envio do formulário.
Como antes discutido esta é uma forma de prevenção de erros e frustração. Para uma boa experiência estes dois fatores precisam ser evitados a todo custo.
Animações e os signos dinâmicos
Trazendo as leis da semiótica para o contexto de interfaces nós podemos abordar signos de três formas: Os estáticos, os dinâmicos e os metalinguísticos.
Dentro deste contexto signos são qualquer coisa que possa ser utilizado para representar outra qualquer coisa. Focando apenas nos signos dinâmicos, podemos defini-los como a maneira de expressar as modificações na interface decorrentes das ações dos usuários, de eventos externos — como nova notificação do Instagram— ou dependentes de indicadores como hora, localização ou temperatura.
Ou seja uma transições de tela, a associação entre a escolha de um item na tab e a exibição de uma nova tela, é um signo dinâmico.
A ativação e desativação de um switch também é um signo dinâmico.
As animações presente em sua interface devem entender e respeitar essa conexão em entre ação e casualidade, possuindo coerência com as ações desempenhadas, com o conteúdo que será exibido, e com o tempo destinada para a tarefa.
Nós estamos basicamente falando sobre expectativas. Todos nós possuímos expectativas sobre os elementos que nos cercam, sobre interfaces não seria diferentes. Desta forma, ao observar um elemento nós esperamos que ele possua um comportamento de acordo com nossos conhecimentos prévios, de mundo real ou de interfaces digitais.
Por exemplo, observe o som que acontece ao esvaziar a lixeira de seu computador. Este som foi desenvolvido para utilizar conhecimentos prévios dos usuários, e desta forma nos lembrar a realidade.
Mas apesar de todo este cuidado que devemos possuir ao aplicarmos uma animação na interface também devemos lembrar que elas são um excelente meio de reforçar a identidade visual das aplicações e de aperfeiçoar a experiência.
Assim como as telas vazias, são um ótimo momento de incluir pequenas interações prazerosas.
Redes sociais, como Facebook, estão investido bastante neste quesito de microinterações, você pode observá-los ao digitar a palavra "Parabéns", onde balões irão invadir a interface.
Ou seja, até grande empresas investem tempo de desenvolvimento (ou seja, dinheiro) para incluir estes elementos em suas interfaces. Em uma avaliação rápidas podemos citar algumas fatores benéficos desta prática:
- Supresa positiva: Ao observar a funcionalidade pela primeira vez o usuário é surpreendido e tende a espalhar a novidade.
- Sentimento de exclusividade: Enquanto é algo pouco difundido, os usuários que já descobriram a funcionalidade se sente especiais.
- Engajamento: Os usuários passam a interagir ainda mais ara espalhar a novidade.
- Reforço positivo: Comentar parabéns deixa de ser apenas mais um comentário e se torna uma tarefa com uma pequena recompensa.
É válido ressaltar que quando falamos sobre animações em interfaces há outros aspectos a se observar, para aprofundar seu conhecimento sobre o assunto recomendo ler o artigo a seguir:
A lição que fica é:
Observem no seu dia-a-dia onde estas práticas aparecem, e principalmente onde elas NÃO aparecem.
É muito mais fácil para nós identificarmos problemas, mas quando se sentir irritado com um software, formulário ou navegação, além de reclamar se pergunte: “Porque estou me sentindo assim?” e passe a identificar quais destas (ou outras) práticas estão ausentes na interface.
Observe também por quantas interfaces você irá navegar sem reclamar de algum aspecto, provavelmente estas terão cumprido o seu papel, pois a comunicação ocorreu sem ruídos ou interferências na interação.
Em breve voltaremos a abordar estes assuntos. Até logo! o/
Referências
Microinteractions: Designing with Details
Design de Interação: Além da Interação Humano-Computador
