Janela modal
Na área de design de interfaces web, uma janela modal, ou simplemente modal, é um elemento de controle gráfico subordinado à janela principal de uma aplicação.
A janela modal cria um modo que desabilita a interação do usuário com a janela principal, mas a mantém visível, com a janela modal como uma janela filha na frente dela. Os usuários devem interagir com a janela modal antes de retornar à janela mãe. Isso evita a interrupção do fluxo de trabalho na janela principal. As janelas modais às vezes são chamadas de janelas pesadas (heavy windows) ou caixas de diálogo modais (modal dialogs) porque geralmente exibem uma caixa de diálogo.
As interfaces de usuário normalmente usam janelas modais para controlar a atenção do usuário e exibir estados de emergência, embora alguns designers de interação argumentem que elas não são eficazes para esse uso. [1]
Na Web, eles geralmente mostram imagens em detalhes, como as implementadas pelo módulo de Javascript Lightbox, ou são usadas para mostrar pop-ups. [2] [3]
O sistema oposto ao uso de modais é o modeless. As janelas modeless não bloqueiam a janela principal, permitindo ao usuário alternar o foco entre elas.
Relevância e uso
[editar | editar código-fonte]O uso das janelas modais inclui:
- Chamar a atenção para informações importantes, um uso considerado ineficaz pois os usuários, bombardeados com muitas caixas de diálogo, habituam-se a simplesmente clicar em "Fechar", "Cancelar" ou "OK" sem ler ou entender a mensagem. [4] [5] [6]
- Bloquear o fluxo da aplicação até que as informações necessárias sejam inseridas, como a entrada de uma senha durante o fluxo de login. Outro exemplo são as caixas de diálogo de arquivo para abrir, salvar e carregar arquivos em um site.
- Coletar do usuário as opções de configuração em uma caixa de diálogo centralizada.
- Avisar que os efeitos da ação atual são irreversíveis. Este é um padrão de interação frequente para diálogos modais, apesar de também ser criticado devido à habituação . Eles recomendam tornar a ação reversível (oferecendo uma opção "desfazer"). [1]
Controle do fluxo de interação
[editar | editar código-fonte]Janelas modais são comuns em toolkits para interfaces gráficas de usuário para orientar o fluxo de trabalho. Alan Cooper diz que a importância de atender às questões importantes justifica a restrição da liberdade do usuário. [7]
Problemas
[editar | editar código-fonte]Uma janela modal bloqueia todos os outros fluxos de trabalho no programa até que a janela modal seja fechada, ao contrário das caixas de diálogo modeless que permitem que os usuários operem com outras janelas. [8] As janelas modais têm como objetivo captar a atenção completa do usuário. [9] Os usuários podem não reconhecer que uma janela modal requer sua atenção, o que pode levar à confusão sobre o motivo do travamento da janela principal. Em casos graves, a janela modal aparece atrás de outra janela controlada pelo mesmo programa, potencialmente deixando todo o programa sem resposta até que a modal possa ser localizada manualmente.
Em resposta aos problemas, os designers de interface tomaram medidas para tornar as janelas modais mais óbvias, por exemplo escurecendo o fundo atrás da janela ou permitindo que qualquer clique do mouse fora da janela modal force o fechamento da janela modal – um design chamado de Lightbox [3]. Jakob Nielsen afirma que a vantagem dos diálogos modais é que eles melhoram a percepção do usuário sobre as tarefas: "Quando algo precisa ser corrigido, é melhor garantir que o usuário saiba disso".
Referências
[editar | editar código-fonte]- ↑ a b «Never Use a Warning When you Mean Undo». alistapart.com. Consultado em 9 de outubro de 2015
- ↑ Quince UX patterns explorer. «Modal Panel». Arquivado do original em 27 de fevereiro de 2010 The popular Lightbox JavaScript library uses a modal panel approach for showing the images
- ↑ a b Jakob Nielsen, Alertbox. «10 Best Application UIs»
- ↑ Joel Spolsky, User Interface Design for Programmers: Designing for People Who Have Better Things To Do With Their Lives
- ↑ Raymond Chen, The Old New Thing: The default answer to every dialog box is "Cancel"
- ↑ Jeff Atwood, Coding Horror: Teaching Users to Read
- ↑ Cooper, Alan (March 17, 2003). About Face 2.0: The Essentials of Interaction Design. [S.l.]: Wiley. ISBN 0-7645-2641-3 Verifique data em:
|data=(ajuda) - ↑ «How to Use Modality in Dialogs». Oracle Corporation
- ↑ «Modal Panel». quince.infragistics.com. Arquivado do original em 6 de maio de 2013