Modal vs Página

Uma vez alguém se deparou com o problema: "Como transmitimos informações importantes sem perder o contexto da tela atual?" E foi assim que os modais foram criados! As telas modais exigem que as pessoas se concentrem em uma tarefa única e independente, isso mantém o contexto da tela atual, enquanto ainda transmite as informações importantes de que o usuário precisa.

A linguagem dos modais

Modais, overlays e diálogos são frequemente considerados a mesma coisa ou diferentes apenas por um detalhe técnico. Então antes de mais nada, vamos definir suas diferenças:

Diálogo: Uma conversa entre duas pessoas. Em uma interface de usuário, um diálogo é uma “conversa” entre o sistema e o usuário.
Modo: um estado especial do sistema em que o mesmo sistema tem interfaces de usuário um pouco diferentes. Cada modo pode vir com ações diferentes, ou a mesma ação pode produzir resultados diferentes dependendo do modo do sistema.
Sobreposição (overlay): uma caixa de conteúdo exibida na parte superior de outra página. A caixa de sobreposição geralmente é visivelmente menor do que a página subjacente.
Lightbox: Um tratamento temporário que pode ser aplicado a superfícies com a finalidade de tornar o conteúdo na superfície menos proeminente ou obscurecido, levando ao uso do termo "lightbox" para descrever esse efeito visual de foco elevado no conteúdo da sobreposição.
Modal: o conteúdo da página é desativado até que o usuário interaja explicitamente com a sobreposição.
Não modal: os usuários ainda podem interagir com o conteúdo do plano de fundo (por exemplo, selecionando links ou tocando em botões) enquanto a sobreposição permanece visível.

Tipos de Modais

Para tornar as coisas mais fáceis, o Nielsen Norman Group criou este diagrama muito útil para nos ajudar a entender melhor algumas das diferenças:

Fonte: https://www.nngroup.com/articles/popups/

Mapeamento de "modalidade" de componentes

Para tornar as coisas ainda mais fáceis, segue um diagrama útil conectando a terminologia que acabamos de aprender com os componentes reais do Material Design do Google.

Solução: Aqui está uma estrutura de tomada de decisão

Sintetizei todas as melhores diretrizes, heurísticas e recomendações para criar um fluxograma que quando aplicado corretamente, ajudará você a entender se seu projeto deve ter uma sobreposição ou não. Isso pode ser feito com o auxilio do mapa de componentes para ajudá-lo a escolher o componente certo a ser usado. Combinadas, essas ferramentas irão apontar a direção certa e fornecer uma forte justificativa para sua decisão.

Eu recomendo usar o modelo a seguir para registrar suas respostas para cada pergunta conforme você avança no fluxograma.

Template de Registro AQUI

Conclusão

Decidir se usar um modal é difícil e ainda mais complicado quando você está tentando determinar o que é melhor para o usuário, ao invés do que é mais fácil para o designer. O uso dessa estrutura o levará com segurança na direção certa e o ajudará a tomar melhores decisões sobre como e quando usar modais. Cada situação é única e há momentos em que essa estrutura pode não se adequar ao problema de design específico.

Aqui estão algumas das fontes que compuseram esse material: