Você provavelmente já esteve lá antes. Como escolhemos entre mostrar um modal aos usuários e quando os navegamos para uma nova página separada? E isso importa? Na verdade, é verdade. A decisão influencia o fluxo dos usuários, seu contexto, sua capacidade de consultar detalhes e, com isso, a frequência de erros e a conclusão de tarefas. Ambas as opções podem ser perturbadoras e frustrantes – na hora errada e no lugar errado. Então é melhor acertarmos. Bem, vamos ver como fazer exatamente isso. Modais x caixas de diálogo x sobreposições x lightboxes Embora frequentemente falemos sobre um único componente de UI modal, muitas vezes ignoramos nuances sutis e intrincadas entre todos os diferentes tipos de modais. Na verdade, nem todo modal é igual. Modais, caixas de diálogo, sobreposições e lightboxes – todos parecem semelhantes, mas na verdade são bem diferentes:
DialogUm termo genérico para “conversa” (usuário ↔ sistema). OverlayUm pequeno painel de conteúdo exibido no topo de uma página. ModalUser deve interagir com sobreposição + fundo desativado. NonmodalUser deve interagir com sobreposição + plano de fundo habilitado. Fundo LightboxDimmed para focar a atenção no modal.
Como destaca Anna Kaley, a maioria das sobreposições aparece na hora errada, interrompe os usuários durante tarefas críticas, usa linguagem inadequada e interrompe o fluxo dos usuários. Eles são interrompidos por natureza e normalmente com um alto nível de severidade, sem grande necessidade disso.
Certamente os usuários devem ser desacelerados e interrompidos se as consequências de suas ações tiverem um grande impacto, mas para a maioria dos cenários os não modais são muito mais sutis e uma opção mais amigável para chamar a atenção do usuário para algo. Na verdade, sempre sugiro que seja um padrão. Modais → Para tarefas individuais e independentes Como designers, muitas vezes descartamos os modais como irrelevantes e irritantes – e muitas vezes são! - mas eles também têm seu valor. Eles podem ser muito úteis para alertar os usuários sobre possíveis erros ou ajudá-los a evitar a perda de dados. Eles também podem ajudar a executar ações relacionadas ou detalhar detalhes sem interromper o estado atual da página. Mas a maior vantagem dos modais é que eles ajudam os usuários a manter o contexto da tela atual. Isso não significa apenas a interface do usuário, mas também a entrada editada, a posição de rolagem, o estado dos acordeões, a seleção de filtros, a classificação e assim por diante.
Às vezes, os usuários precisam confirmar uma seleção rapidamente (por exemplo, filtros como mostrado acima) e prosseguir imediatamente a partir daí. O salvamento automático pode conseguir o mesmo, é claro, mas nem sempre é necessário ou desejado. E bloquear a IU muitas vezes não é uma boa ideia. No entanto, os modais não são usados para nenhuma tarefa. Normalmente, nós os usamos para tarefas únicas e independentes, nas quais os usuários devem entrar, concluir uma tarefa e depois retornar para onde estavam. Não é novidade que eles funcionam bem para interações curtas e de alta prioridade (por exemplo, alertas, ações destrutivas, confirmações rápidas). Quando os modais ajudam: 🚫 Os modais costumam ser perturbadores, invasivos e confusos.🚫 Eles tornam difícil comparar e copiar e colar.✅ No entanto, os modais permitem que os usuários mantenham vários contextos.✅ Úteis para evitar erros irreversíveis e perda de dados.✅ Útil se enviar os usuários para uma nova página for perturbador. ✅ Mostre um modal apenas se os usuários valorizarem a interrupção. ✅ Por padrão, prefira caixas de diálogo sem bloqueio (“não modais”). ✅ Permita que os usuários minimizem, ocultem ou restaurem a caixa de diálogo posteriormente. Páginas → Para fluxos de trabalho complexos e de várias etapas Assistentes ou navegação por guias dentro de modais não funcionam muito bem, mesmo em produtos empresariais complexos – lá, painéis laterais ou gavetas normalmente funcionam melhor. Os problemas começam quando os usuários precisam comparar ou fazer referência a pontos de dados – mas os modais bloqueiam esse comportamento, então eles reabrem a mesma página em várias guias.
Para fluxos mais complexos e processos de várias etapas, as páginas independentes funcionam melhor. As páginas também funcionam melhor quando exigem atenção total do usuário, e a referência à tela anterior não ajuda muito. E as gavetas funcionam para subtarefas que são muito complexas para um modal simples, mas que não precisam de navegação de página inteira. Quando evitar modais: 🚫 Evite modais para mensagens de erro.🚫 Evite modais para notificações de recursos.🚫 Evite modais para experiência de integração.🚫 Evite modais para tarefas complexas e demoradas de várias etapas.🚫 Evite vários modais aninhados e use anterior/próximo.🚫 Evite modais acionados automaticamente, a menos que seja absolutamente necessário. Evite ambosPara tarefas repetidas Em muitos produtos complexos e com muitas tarefas, os usuários realizarão as mesmas tarefas repetidamente, indefinidamente. Lá, tanto os modais quanto as navegações de novas páginas adicionam atrito porque interrompem o fluxo ou forçam os usuários a coletar dados ausentes entre todas as diferentes guias ou visualizações. Muitas vezes, os usuários acabam com uma experiência interrompida, cheia de confirmações intermináveis, avisos exagerados, instruções detalhadas ou simplesmente faltando pontos de referência. Como Saulius Stebulis mencionou, nesses cenários, seções expansíveis ou edição no local geralmente funcionam melhor – elas mantêm a tarefa ancorada na tela atual. Na prática, em muitos cenários, os utilizadores não completam as suas tarefas isoladamente. Eles precisam pesquisar dados, copiar e colar valores, refinar entradas em locais diferentes ou apenas revisar registros semelhantes enquanto realizam suas tarefas. Sobreposições e gavetas são mais úteis para manter o acesso aos dados de segundo plano durante a tarefa. Como resultado, o contexto permanece sempre em seu lugar, disponível para referência ou copiar e colar. Salve modais e navegação de página para momentos em que a interrupção realmente agrega valor – especialmente para evitar erros críticos. Modais versus páginas: uma árvore de decisão Há algum tempo, Ryan Neufeld elaborou um guia muito útil para ajudar os designers a escolher entre modais e páginas. Ele vem com uma planilha PNG útil e um modelo do Google Doc com perguntas divididas em 7 seções. É longo, extremamente completo, mas muito fácil de seguir:
Pode parecer assustador, mas é um processo bastante simples de 4 etapas:
Contexto da tela.Primeiro, verificamos se os usuários precisam manter o contexto da tela subjacente. Complexidade e duração da tarefa. Tarefas mais simples, focadas e sem distração poderiam usar um modal, mas fluxos longos e complexos precisam de uma página. Referência à página subjacente. Em seguida, verificamos se os usuários frequentemente precisam consultar os dados em segundo plano ou se a tarefa é uma simples confirmação ou seleção. Escolhendo a sobreposição certa. Finalmente, se uma sobreposição for de fato uma boa opção, ela nos orienta a escolher entre modal ou não modal (inclinando-se para um não modal).
Concluindo Sempre que possível, evite bloquear toda a IU. Tenha uma caixa de diálogo flutuante, cobrindo parcialmente a IU, mas permitindo navegação, rolagem e copiar e colar. Ou mostre o conteúdo do modal como uma gaveta lateral. Ou use um acordeão vertical. Ou leve os usuários para uma página separada se precisar mostrar muitos detalhes. Mas se você quiser aumentar a eficiência e rapidez dos usuários, evite os modais a todo custo. Use-os para desacelerar os usuários, para concentrar sua atenção e para evitar erros. Como observou Therese Fessenden, ninguém gosta de ser interrompido, mas se for necessário, certifique-se de que o custo vale a pena. Conheça os “Padrões de Design de Interface Inteligente” Você pode encontrar uma seção inteira sobre modais e alternativas em Smart Interface Design Patterns, nosso curso em vídeo de 15 horas com centenas de exemplos práticos de projetos da vida real - com um treinamento UX ao vivo ainda este ano. Tudo, desde megamenus suspensos até tabelas empresariais complexas, com 5 novos segmentos adicionados a cada ano. Acesse uma prévia gratuita. Use o código BIRDIE para economizar 15% de desconto. Conheça Smart Interface Design Patterns, nosso curso em vídeo sobre design de interface e UX.
Vídeo + Treinamento UXSomente vídeoVídeo + Treinamento UX$ 495,00 $ 699,00
Obtenha vídeo + treinamento UX25 vídeo-aulas (15h) + treinamento UX ao vivo.Garantia de devolução do dinheiro em 100 dias.Somente vídeo$ 300,00$ 395,00
Adquira o videocurso40 videoaulas (15h). Atualizado anualmente. Também disponível como um pacote UX com 2 cursos em vídeo.
Recursos úteis
Diferentes tipos de pop-ups, por Anna Kaley Melhores práticas para projetar modais de UI, por Uxcel Usamos muitos modais malditos: Diretrizes de UX, por Adrian Egger Diálogos Modais e Não Modais, por Therese Fessenden Design de UI empresarial moderno: diálogos modais, por James Jacobs Modais em Sistemas de Design
