As caixas de diálogo são muito usadas em sistemas, aplicativos e produtos digitais. Elas são extremamente úteis e proporcionam controle para o usuário se utilizadas corretamente. Porém é importante salientar que, dado a característica interruptiva, deve ser utilizada com moderação para não “bombardear” o usuário com informações que não sejam relevantes para o contexto.
O que é relevante para um determinado contexto? Quando, dentro da jornada do usuário, chegamos à um ponto de inflexão aonde é exigido do usuário a tomada de uma decisão. Esta decisão muitas vezes possui consequências futuras, que levarão o usuário para o próximo nível ou ainda podem adicionar camada de complexidade. Abaixo segue uma estrutura básica:
É possível observar as seguintes áreas:
O título é referente à chamada principal de sua ação. É ele que inicia o contato com o usuário e deixa clara qual a ação que será esperada.
O conteúdo é super importante para detalhar as funções e quais as possíveis consequências das ações realizadas.
As ações ou CTA (call to actions). São botões que possibilitam ao usuário escolhas ou caminhos diferentes dentro do fluxo de navegação.
Prefira mostrar o diálogo quando realmente fizer sentido dentro da jornada ou dentro da ação que o seu sistema se propõe a fazer. Assim o usuário irá entender do que se trata e as chances dele interagir e engajar aumentam consideravelmente. Deve ser acionada imediatamente quando é necessária uma ação por parte do usuário. Mostrar uma caixa de diálogo sem um comportamento esperado pode causar confusão, frustração. Um exemplo de uma prática que deve ser evitada são os Pop-ups que aparecem sem qualquer explicação dentro de um site. Além de ser desagradável, passa uma ideia de falta de seriedade.
Desde o início, deixe claro qual o objetivo do diálogo e porque ele se encaixa dentro do contexto ao qual está sendo exibido. Procure orientar sobre qual será o resultado das ações que o usuário venha a adotar, sejam elas no sentido de seguir o fluxo proposto (caminho feliz) ou deixar para executar a ação mais tarde.
Evite |
Prefira |
|
|
Evitar termos que possam causar insegurança ao usuário é recomendável, prefira títulos que já sejam claros e convidativos para a ação. Observe qual o verbo será utilizado dentro do contexto da interface. Por exemplo, se o objetivo é deletar ou atualizar, use o verbo referente à ação que será realizada. Além de deixar clara qual a ação, também é importante dizer quando ela vai acontecer (agora). Isso dá uma noção de controle e previsibilidade para o usuário
Ao invés de simplesmente oferecer uma informação, diga o porque você está oferecendo determinado recurso e como aquilo será importante para o usuário caso ele opte por escolher. Exemplo: se a ação conter um texto longo, é recomendável ser exibida uma caixa a cada 10 minutos permitindo salvar um rascunho ou em longo período de inatividade surgir uma caixa avisando que a sessão no sistema será finalizada.
Em cada um desses exemplos as caixas devem vir com o conteúdo detalhando a questão e levando ao usuário porque de sua existência, e os respectivos benefícios para ele, agregando valor a sua experiência.
Tornar a experiência mais agradável e fluída começa pela forma com que nos relacionamos e nos dirigimos para as pessoas. Imagine que você é o usuário e coloque-se no lugar dele. Ao realizar uma ação, ficará muito mais fácil pensar em como mentalmente ele iria executá-la. Abaixo segue um exemplo, com base no salvamento de rascunho de textos longos:
![]() |
![]() |
|
Não salvar rascunho | Salvar rascunho |
Deve-se limitar o número de ações em uma caixa de forma a não confundir o usuário, normalmente duas ações trazem boa experiência ao usuário. Eventualmente, se uma terceira fizer sentido, procurar não desviar o foco do usuário, elementos como o tooltip podem ajudar nesta questão.
Caixa com três opções para o usuário
Deveria ser uma boa prática sempre, mas muitas é possível encontrar situações aonde não é isso que ocorre. Existem muitos casos de promoções que são colocadas em modais em que a ação “fechar a janela” vem acompanhada de uma mensagem que pode ser interpretada como ironia.
Dê retorno ao seu usuário sobre a ação realizada. Seja qual o caminho que o usuário venha a escolher, ofereça feedback para as ações realizadas. Além de ser uma boa prática é um princípio básico de usabilidade proposto por Jakob Nielsen há muitos anos atrás (2007, Usabilidade na Web).
Existem algumas formas de elaborar essas mensagens através de exercícios que facilitam a construção de feedbacks:
O que aconteceu.
Se não aconteceu ainda, em quanto tempo irá ocorrer.
O que ele pode fazer enquanto isso.
Como ele pode acompanhar o seu processo ou pedido.