it-swarm-pt.com

Fechando diálogos modais

Encontro diálogos modais todos os dias e vejo implementações diferentes o tempo todo.

A maioria das caixas de diálogo modais tem um [X] no canto superior direito da caixa de diálogo junto com um botão Cancelar/Fechar.

Existem tantas opções, qual é a melhor prática para fechar diálogos modais? Além disso, existem estudos para referenciar mostrando o que é preferido?

Implementações que eu já vi:

  • Botão Cancelar/Fechar com [X] no canto (superior direito/esquerdo, inferior direito/esquerdo?)

  • Clique em qualquer lugar do modal para fechar

  • Apenas um [X] no canto (superior direito/esquerdo, inferior direito/esquerdo?)

  • Apenas um botão Cancelar/Fechar

  • Clique em qualquer lugar fora do modal

  • Tecla Esc com ou sem [X]/Cancelar/Fechar

23
rick schott

Eu acho que a melhor implementação depende do tipo de diálogo e do modo de interação desejado.

Diálogos que requerem uma ação não devem ter um [X] para fechá-los, na minha opinião (nem devem ser fechados clicando em qualquer outro lugar que não seja nos botões de ação).
A maioria deles possui um conjunto de botões "Salvar" e "Cancelar", de modo que os usuários pensam (mesmo que por uma fração de segundo) se "fechar" significa "cancelar" ou não.

caixas de diálogo de informações deve ter um botão "fechar" e um [X], na minha opinião.
Se a informação é algo que o usuário pode querer interagir com (por exemplo, texto a ser selecionado e copiado), é claro que você não pode permitir que um clique dentro dela feche a caixa de diálogo.
Se você deseja que o usuário preste atenção as informações, eu também proibiria que os cliques do lado de fora fossem descartados, pois isso aumenta a chance de o usuário focar na caixa de diálogo para fechá-la (e espero ler algo lá).

16
Dan Barak

Você esquece ESCAPE (tecla Esc) para fechar alguns ( Cancelar (OK/Cancelar) ou [~ # ~] ok [~ # ~] para OK único ) janelas modais

6
igor

Eu nunca clico na cruz no canto. Se os botões são deixados de fora, geralmente fico confuso até lembrar que ainda é uma janela. Eu usaria os botões OK/Cancelar (a menos que outras palavras sejam mais adequadas, por exemplo, 'sim/não' 'salvar/não salvar') e uma cruz no canto que faça o mesmo que o botão Cancelar. Nenhuma outra ação 'oculta', como fechar se você clicar em qualquer lugar.

4
Jouke van der Maas

O botão de saída é sempre necessário, se os usuários clicam ou não, porque sua ausência é confusa. Os links Fechar ajudam, mas precisam ser acompanhados pelo 'X'. Sugiro que você sempre forneça todas as opções de saída ('x', link e clique em qualquer lugar para fechar).

Atualmente, não estou ciente de um estudo referente a esse tópico, mas há um artigo interessante com a Smashing Magazine sobre o uso adequado do Windows modal que pode lhe interessar: http://www.smashingmagazine.com/2009/ 05/27/modal-windows-in-modern-web-design /

4
Pam Rdz

Os botões explícitos da caixa de diálogo também se tornam um recurso importante de acessibilidade. Eu trabalhei nas Diretrizes da interface humana do GNOME por muitos anos, e toda vez que as atualizamos, há chamadas para 'reduzir a desordem' removendo 'botões redundantes Fechar' na caixa de diálogo, para as caixas de diálogo que pode ser fechado sem ambiguidade usando o controle de quadro de janela e seu atalho de teclado associado (Alt-F4, o mesmo que MS Windows).

Toda vez que sugerimos à comunidade de acessibilidade do GNOME, no entanto, eles reafirmam sua preferência por reter os botões tangíveis dentro da própria janela.

2
calum_b

Eu provavelmente iria com os dois controles:

(X) - canto superior direito

Justificativa: muito comum para a web e acho que até usuários de Mac estão acostumados. [X] é um símbolo que os usuários reconhecem bem e ter (Fechar) parece redundante.

[OK/Fechar] - no conteúdo

Racional: se o usuário vasculhou o texto, os olhos podem muito bem pousar sob o texto e o cursor pode se aproximar do botão Fechar, portanto, pode ser mais rápido apertar o botão, especialmente porque ele também é maior. Você também pode colocar o foco no botão Fechar para que o usuário possa pressionar Enter para fechar a caixa de diálogo.

0
Anna Rouben