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
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á).
Você esquece ESCAPE (tecla Esc) para fechar alguns ( Cancelar (OK/Cancelar) ou [~ # ~] ok [~ # ~] para OK único ) janelas modais
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.
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 /
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.
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.