Imagem do blog de Miro



Kinneret Ifra, especialista em microcópia para IU e autor de Microcópia: o guia completo, fornece conselhos sobre como tornar os diálogos de confirmação curtos, claros e não irritantes e, portanto, mais úteis para o usuário. ... Chamamos sua atenção para a tradução do artigo e, a seguir, acrescentaremos algumas idéias de nossa própria experiência.



***

Tradução do artigo "Tem certeza de que deseja fazer isso?" Microtextos em diálogos de confirmação "

Normalmente, uma caixa de diálogo de confirmação aparece quando um usuário tenta executar uma ação importante. A mensagem pede ao usuário para pensar novamente se ele realmente deseja executar a ação e entende suas consequências.



Em outras palavras, a caixa de diálogo de confirmação leva o usuário de volta ao momento da escolha e o força a executar a ação novamente. Nós criamos deliberadamente essa interferência - em última análise, ela serve ao usuário.

Confirmação ou cancelamento da ação

Às vezes, podemos dar liberdade de ação ao usuário, supondo que ele saiba o que está fazendo. Nesses casos, em vez de uma caixa de diálogo de confirmação, é melhor dar ao usuário a oportunidade de cancelar a ação alguns segundos após sua conclusão.



O usuário pode cancelar a ação em uma mensagem pop-up que aparece na parte superior ou inferior da tela. Se o usuário não quiser cancelar a ação, não precisará fazer mais nada, a mensagem desaparecerá automaticamente após alguns segundos.



Esta é a aparência da mensagem pop-up no Google Agenda. Ele aparece após a exclusão de um evento para o qual nenhum outro participante foi convidado.





Um usuário vê esta mensagem no Google Fotos ao mover imagens para a lixeira:





E aqui está a mensagem pop-up no Dropbox:





Mais exemplos podem ser encontrados no artigo de Keren Rijensky sobre outras opções para a interface de desinstalação.

Quando usar a caixa de diálogo de confirmação e quando cancelar?

Eu fiz essa pergunta no grupo WE - Women Experience no Facebook e obtive ótimas respostas (obrigado meninas!). Com base nessas respostas, identifiquei quatro fatores principais a serem considerados:

1. . , , , . , , . , , , , .
2. . / , . , . , , , .
3. . , , , . , . , , .
4. Frequência . Se um usuário executa regularmente as mesmas ações, por exemplo, ao trabalhar com e-mails, ele rapidamente se cansará de pedir confirmação a cada etapa. Além disso, é improvável que o usuário execute acidentalmente a ação com a qual trabalha todos os dias. Por outro lado, se o usuário raramente executa uma ação e pode ter esquecido seus recursos, é melhor usar uma caixa de diálogo de confirmação do que uma mensagem de cancelamento (que, além disso, é fácil de perder).

Além disso, alguns produtos oferecem ao usuário opções adicionais de ações , além do cancelamento total (obrigado pela dica do Efri Eltan). Abaixo, darei alguns exemplos.

Anatomia de um diálogo de confirmação

A caixa de diálogo de confirmação inclui dois ou três elementos:

1. Título.
2. Explicação de uma ou duas linhas (opcional).
3. Botões.

Elemento 1. Cabeçalho

No título, você precisa perguntar ao usuário ou informá-lo sobre uma ação-chave que precisa ser confirmada.



O título deve ser o mais simples possível e, o mais importante, claro e inequívoco .



Na maioria dos casos, o título deve ser uma pergunta com duas opções de resposta mutuamente exclusivas e fáceis de distinguir e escolher a desejada: “Sim / Não”, “Ficar / Sair”, “Continuar / Voltar”.



Já nesta fase, vale a pena pensar nos botões: formule a pergunta no título para que possa dar duas opções de resposta inequívocas e facilmente distinguíveis. Usaremos essas opções para botões mais tarde.



Não use títulos muito gerais, como "Aviso" ou "Tem certeza".



Nomeie a ação atual - quanto mais específica, melhor.



Evite frases introdutórias que não carreguem uma carga semântica. Por exemplo, "Você quer ...", "Esta ação levará a ..." e ao mesmo tempo notório "Você realmente ...".



Comunique o principal desde o início .









Aqui está um ótimo exemplo do Twitter - postagem simples e clara:





Por que é necessário remover introduções redundantes de mensagens?

1. As mensagens serão concisas e a linguagem simples e de fácil compreensão. Já estamos forçando os usuários a gastar tempo em ações adicionais. A frase "Você realmente ..." adiciona complexidade desnecessária à mensagem, inclusive em um nível emocional.
2. . , . – , – .
3. . .
4. «» – .

« »

Observe que a palavra "Cancelar" pode ser interpretada de maneiras diferentes quando se trata de ações relacionadas à exclusão.



Isso é especialmente perceptível em mensagens onde as palavras "Desfazer" e "Excluir" estão entrelaçadas. A dupla negação torna mais difícil entender se a ação está sendo proposta ou cancelada. Melhor escolher um texto diferente, como Voltar, Permanecer, Não, Sair ou qualquer outra ação que seja intuitiva no contexto.



A palavra "Continuar" também pode ser muito geral e abstrata. Esforce-se pela precisão e indique ações específicas .

Item 2 (opcional). Explicação

Se você não tem nada a acrescentar ao que já foi dito no título, não precisa acrescentar uma explicação .





Infelizmente, muitos sistemas usam um único modelo para caixas de diálogo de confirmação que inclui todos os três elementos. Nesses casos, você deve adicionar uma explicação, mesmo que não seja necessária. Crie dois modelos, com e sem explicação, e use aquele que melhor se adequa à sua mensagem. Se o sistema não pode ser alterado, pelo menos tente não se repetir. Por exemplo:

Quando uma explicação é necessária

Quando um usuário tenta realizar uma ação que irá desencadear outras ações, ele precisa ser notificado sobre elas. Por exemplo:

• — , .
  
  
  
  
  
• — , .
  
  
  
  
  
• — , , . ( , , . True story.)
  
  
  
  
  
• Ações conflitantes - o usuário deseja alterar as configurações e esta ação contradiz outras configurações e irá alterá-las também.
  
  
  
  
  

Outro exemplo comum é sair ou fechar uma janela sem salvar as alterações . Se o usuário fechar um formulário preenchido de forma incompleta ou a janela de criação do elemento, é necessário avisá-lo que todo o trabalho realizado será perdido e terá que ser reiniciado.



Por exemplo, para trabalhar com um aplicativo de notícias, o usuário precisa selecionar pelo menos cinco tópicos. Se ele escolher menos de cinco e tentar sair do aplicativo, os temas já selecionados não serão salvos. Nesse caso, você deve alertar o usuário sobre isso:





Quanto mais importante a ação e mais difícil desfazê-la, mais cuidadosamente você precisa pensar sobre a explicação. Não se esqueça dos elementos de design (como cores e preenchimento) que ajudarão a chamar a atenção do usuário para informações importantes.



Aqui está um bom exemplo do Typeform:





Em geral, o esclarecimento é um elemento opcional da caixa de diálogo de confirmação. Adicione-o se as consequências da ação que o usuário deseja executar não forem óbvias para ele.

Combinando título e explicação

Suponha que os usuários leiam apenas o título e os rótulos dos botões. Se a ação tiver consequências graves e você estiver preocupado com a possibilidade de o usuário não ler a explicação, inclua-a no texto do título. Outra opção é trocá-los e começar imediatamente com uma explicação. Por exemplo:

• ?
• . ?
• , . ?

,

Se a ação for irreversível, denuncie. Os usuários estão acostumados com o carrinho de compras e outros recursos semelhantes que os protegem das consequências de decisões precipitadas. Se tal oportunidade não for proporcionada, informe diretamente que a ação é irreversível e que será impossível desfazê-la, voltar atrás ou restaurar a deletada. Isso já deve ser dito no título, com a ajuda de expressões inequívocas como "Sem possibilidade de recuperação".



O exemplo acima do Typeform demonstra perfeitamente esse princípio.



O YouTube requer até uma confirmação adicional para excluir o vídeo: até que o usuário selecione uma caixa de seleção especial, o botão excluir permanece inacessível.

Existe uma opção melhor? É hora de falar sobre ele

Se você acha que o usuário está prestes a excluir algo desnecessariamente ou realizar outra ação que provavelmente não resolverá o problema, a caixa de diálogo de confirmação é o lugar perfeito para avisá-lo sobre isso.



Aqui está um exemplo do Facebook:

Elemento 3. Botões

Siga estas orientações ao trabalhar com botões para caixas de diálogo de confirmação:

1. Torne os botões fáceis de distinguir e tão fáceis de entender quanto possível Os
   
   
   
   botões devem ser duas opções claras e facilmente distinguíveis que não podem ser confundidas. Cada opção deve ser autoexplicativa. Se o título estiver bem redigido, será muito mais fácil encontrar duas respostas opostas para a pergunta feita para os botões.
   
   
   
   Aqui está um exemplo de um programa AVG que demonstra perfeitamente essa ideia:
   
   
   
   
   
2. 
   
   
   
   «» «» «» «», , / , , , . , ( – ), .
   
   
   
   , , : «, »; « »; «, »; « »; «, » .
   
   
   
   , «» «», «» («, ») « » (« »). , («»).
   
   
   
   
   
   
   
   
   
   
   
   Forest, Chrome. : , , , , .
   
   
   
   , , , . , ? , – , .
   
   
   
   
   
   , . , .
   
   
   
   , Galaxy. , , :
   
   
   
   
   
   
   
   , , «/» «/», «» , . , . «» «», , .
3. Use o mesmo verbo no título e nos botões para que o usuário possa rastrear facilmente a conexão entre eles
   
   
   

O exemplo a seguir do Google Fotos demonstra mais dois princípios para criar texto para caixas de diálogo de confirmação:

1. Seja consistente - tenha em mente o rótulo no botão que irá abrir uma caixa de diálogo de confirmação quando você clicar nele e use o mesmo texto. No exemplo, o usuário clica no botão Esvaziar Lixo, portanto, a caixa de diálogo de confirmação também usa a palavra Lixo.
2. Informe o principal - nesta ação, o principal não é que a cesta seja esvaziada, mas que seu conteúdo seja excluído para sempre. Portanto, no texto do botão, é importante chamar a atenção do usuário para a exclusão de dados, não para esvaziar a lixeira. Uma solução ainda mais elegante é possível: o texto pode ser combinado e chamado de botão não "Esvaziar lixeira", mas "Excluir conteúdo da lixeira".

Vamos resumir

Abaixo está um exemplo final que refina todos os três elementos da caixa de diálogo de confirmação.



No novo título, fazemos uma pergunta direta sobre uma ação específica.



Em um novo esclarecimento, informamos ao usuário sobre as consequências dessa ação.



Nos novos botões, oferecemos opções fáceis de ler com contexto.



***

Aplicação na prática

Então, quais hacks de vida em textos em diálogos de confirmação você pode tirar deste artigo? Vamos resumir:



Cabeçalho:

• Mantenha seu título curto e simples, de preferência fazendo uma pergunta com duas opções de resposta mutuamente exclusivas.
• Remova frases introdutórias como "Você realmente ..." são desnecessárias como "água".
• Evite ambiguidades, nomeie uma ação específica. As palavras "Cancelar" e "Continuar" requerem um tratamento especialmente cuidadoso.

Explicação:

• Não acrescente um esclarecimento se não houver nada a acrescentar à pergunta do título.
• Adicione explicações para ações que irão desencadear outras ações e para ações irreversíveis.
• Se a ação parecer inadequada, sugira outra opção.
• Use cores e preenchimento para chamar a atenção para as principais informações.
• A explicação pode ser combinada com o título. Muitos não os leem de qualquer maneira.

Botões:

• Em textos de botão, use as respostas à pergunta no título.
• Adicione um nome de ação ao botão principal - por exemplo, "Sim, sair." É melhor se corresponder ao verbo do título.

E mais:

• Para ações não críticas e ações que podem ser canceladas, é melhor substituir a caixa de diálogo de confirmação por uma janela pop-up de desfazer.

Essas dicas ecoam os princípios que são usados ​​no desenvolvimento da IU para nossos produtos. Por exemplo, no Directum RX, para remover links, substituímos a caixa de diálogo de confirmação por um "pop-up":





E em uma das versões, nos livramos das formulações complicadas nos diálogos:

Bônus: ideias de experiência pessoal

Podemos adicionar mais alguns hacks de vida às recomendações do artigo, que usamos nós mesmos. Aqui estão eles:

• , . RX 3.5. . .
  
  
  
  
  
  
  
  , : , «». .
• – , , .
  
  
  
  
  
  
  
  , – , .
• , . : «» «», «» – «». «».
• :
  
  
  • «», «» «», «» ;
  • abort, kill, terminate – end;
  • failed, unable – cannot;
  • bad – incorrect;
  • invalid – is not valid.
  
  
  , : « …» – , . , ?

Claro, não queremos - e, tendo adotado nossa própria experiência e a de outros, novamente partimos em um caminho sem fim para a IU ideal.



Qual dos seguintes princípios você usa? Talvez você tenha algo a acrescentar a esta lista? Escreva comentários, tire dúvidas - ficaremos felizes em trocar experiências.