Como gerenciar UI states de maneira adequada
Neste artigo abordaremos os conceitos por trás do gerenciamento de estados em interfaces digitais e como eles afetam a qualidade percebida do seu produto.
Antes de começarmos, vamos fazer um pequeno exercício. Anote em um pedaço de papel o nome da última aplicação que você interagiu em que a experiência não fluiu como esperado, como se algo estivesse faltando.
Pronto? Beleza. Deixe o papel separado em algum lugar visível, vamos revisitar esse assunto ao final do artigo.
O que são "estados"?
Estados são as diferentes etapas e resultados que o usuário pode encontrar ao interagir com seu produto. Tudo que interagimos no cotidiano contém algum tipo de estado.
Pressionar uma tecla em seu teclado revela seus dois estados, normal e pressionado (as vezes enroscado, mas não conta como estado).
Estados estão sempre presentes, mas podem ser apresentados de maneiras diferentes de acordo com a situação. O estado pressionado em um teclado touch é indicado utilizando iluminação, por exemplo.
Gerenciar estados é como contar uma história. Se falhar em conectar as partes de maneira concisa, o fluxo pode perder o sentido para alguns usuários, fazendo com que parem de prestar atenção no que está acontecendo e passem a realizar outras atividades.
Uma breve história sobre gerenciamento de estados
2006. Uma empresa chamada 37Signals — hoje Basecamp — lançou um livro chamado Getting Real: the Smarter, Faster, Easier Way to Build a Successful Web Application, contendo conceitos e diretrizes para o desenvolvimento de produtos digitais.
Entre os assuntos abordados há um capítulo chamado Three State Solution, dizendo ser necessário considerar os seguintes estados ao planejar uma interface:
Estado ideal
É o estado base do seu produto, onde tudo funciona como planejado e agrega o máximo de valor ao usuário. Serve como ponto de partida para os outros estados.
É aquele shot no Dribbble que todo mundo vai compartilhar.
Estado vazio
Você acabou de criar uma conta naquele aplicativo que todo mundo está comentando. Você faz o login e se depara com uma tela cheia de… nada. Por onde você começa?
Esse é o estado em que não há dados suficientes para a aplicação funcionar. Daí o nome — estado vazio.
Em certos casos, esse é o estado que o usuário irá encontrar ao utilizar o seu produto pela primeira vez. Ele será responsável por causar as primeiras impressões do seu produto e estabelecer expectativas do conteúdo a seguir.
Ao planejar estados vazios, foque em guiar o usuário em direção ao fluxo ideal do seu produto. Forneça informações relevantes como por onde começar e a importância daquela tarefa, juntamente com uma ação clara e concisa.
Estado de erro
O que o usuário vê quando as coisas não saem como planejado? Em produtos digitais, feedback apropriado na tela pode aliviar um pouco da ansiedade. Em produtos físicos, displays ou LEDs vermelhos podem indicar que algo não ocorreu como esperado.
Não há nada mais frustrante que falta de feedback. Continuar a ver um spinner na tela mesmo após a operação falhar é equivalente a fazer uma prova e nunca saber sua nota.
Páginas 404 e afins também devem ser consideradas como estados de erro, permitindo o usuário realizar ações como retornar ao estado anterior.
O UI Stack
Com o avanço da tecnologia, novas formas de interação foram surgindo, juntamente com a necessidade de maneiras mais robustas de gerenciar estados.
Scott Hurff apresentou uma proposta em seu livro Designing Products People Love: How Great Designers Create Successful Products, conhecida como UI Stack.
O UI Stack acrescenta dois novos estados à serem considerados, sendo eles:
Estado de processamento
Toda vez em que a aplicação está interagindo com o servidor para enviar ou recuperar dados, esperando conexão com a rede ou transitando entre páginas, ela entra no estado de processamento.
Esse estado pode ser facilmente subestimado ao pensar que somente um indicador de progresso satisfaz a necessidade de indicar que a aplicação está realizando uma tarefa, porém isso pode gerar certos efeitos colaterais.
Ao utilizar somente um spinner, toda a atenção e expectativa do usuário é colocada sobre o tempo levado para carregar o conteúdo, não sobre o progresso sendo feito. Quanto maior a frequência em que spinners são exibidos, maior é a impressão de lentidão percebida pelo usuário.
Um experimento feito por Luke Wroblewski sobre a relação entre spinners e a percepção de lentidão pelos usuários pode ser encontrado aqui.
Skeleton UIs
Adotada por empresas como Facebook, LinkedIn e Pinterest, a criação de skeleton UIs é uma abordagem interessante para redirecionar o foco do usuário ao conteúdo que está sendo carregado.
Ao acessar uma página, a estrutura básica do conteúdo é exibida para o usuário, tendo o conteúdo gradualmente preenchido conforme carregado.
Essa técnica passa a impressão de uma aplicação mais performática, já que a estrutura base da página parece ser carrega de maneira instantânea.
Estado parcial
O estado parcial pode ser encontrado em situações nas quais nem todas as informações necessárias estão presentes, como um formulário incompleto ou quando a aplicação não possui registros suficientes para representar o estado ideal.
Esse estado tende a ser composto por tarefas repetitivas que o usuário deve realizar — como cadastros e customizações — sendo assim uma boa oportunidade para explorar técnicas como gamificação e micro-interações, visando manter o usuário motivado à atingir certos objetivos para ter uma experiência mais completa.
Por um bom tempo o LinkedIn têm utilizado técnicas de gamificação como contadores e porcentagens para indicar o progresso do usuário na aplicação, mantendo-o motivado para fornecer mais informações e encontrar novas conexões.
Caso tenha interesse nas técnicas de gamificação aplicadas pelo LinkedIn, confira o seguinte artigo — How Linkedin Uses Gamification to Drive Engagement and Motivate Its Users.
Por que gerenciar estados?
Estados compõem o seu feedback loop. Feedback loops são ciclos de ação e reação pelos quais seus usuários passam ao interagir com sua aplicação, tomando decisões e aprendendo com os resultados das mesmas.
Certas situações podem prejudicar seu feedback loop, como:
Feedback demorado
Quanto mais tempo o feedback demorar para chegar ao usuário, menor seu poder de motivação e impacto em futuras decisões.
Usuários frequentemente esperam respostas imediatas ao interagir com sua aplicação. Caso o resultado final venha a demorar para ser repassado para o usuário, transite para um estado intermediário, aliviando a ansiedade.
Falta de fluência
Ao navegar pelos fluxos de sua aplicação, ele interage com diversos feedback loops. Cada interação resulta em novas expectativas em como as coisas deveriam se comportar. Tais expectativas, quando não atendidas, causam a impressão de algo estar faltando.
Transições e animações são ótimos recursos para tornar a interação entre estados diferentes mais fluidas e dar personalidade à sua aplicação.
Caso queira saber mais sobre feedback loops, Loren Baxter escreveu um ótimo artigo sobre o assunto — How To Design Outstanding Feedback Loops.
Conclusão
Estados podem ser encontrados em todos os produtos, tanto físicos quanto digitais. Eles servem para indicar o funcionamento atual do produto, como o breathing LED encontrado nos MacBooks, assim como manter o usuário motivado e o guiar através dos diferentes fluxos de interação.
O nível de atenção que você dá aos detalhes é o que separa o seu produto dos competidores.
Qualidade deve ser levada em consideração em todos os aspectos do seu produto — Estética, interações, conteúdo textual e engenharia (Só por algo não estar visível não significa que não devemos nos importar).
Ah! lembra daquele papel deixou separado antes de começarmos?
Visite aquela aplicação novamente e veja se consegue identificar as peças faltantes de acordo com o que abordamos no artigo. Tenho certeza que vai encontrar algum ponto que poderia ser melhor gerenciado.
That’s all folks! Espero que tenham gostado!
Fique à vontade para entrar em contato comigo no twitter — @gcolombo_.
Obrigado!
Gostou do artigo? Compartilhe sua opinião conosco!
Não esqueça de seguir nossa página para receber todas as novidades :)
