CategoriaDesign de produto

Janela modal: quando interromper e como deixar a pessoa sair

8 minutos de leitura

Use janela modal só quando parar a pessoa evita um prejuízo ou quando falta um dado sem o qual a tarefa dela não segue. No resto, um aviso na própria página ou uma janela que não bloqueia o fundo resolve com menos custo (NN/g, Modal & Nonmodal Dialogs (em inglês)). Quando a modal entra, ela precisa de um botão de fechar visível, da tecla Esc e do foco de volta ao lugar de onde a pessoa saiu.

O que faz uma janela ser modal

A janela modal aparece por cima do conteúdo e trava o resto da tela até a pessoa responder. A não modal também fica por cima, mas deixa usar a página por baixo. O exemplo clássico é a janela de escrever e-mail do Gmail, que fica num canto enquanto você procura uma mensagem antiga (NN/g (em inglês)).

Há um terceiro nome no meio. Quando o fundo fica escurecido, a janela é chamada de lightbox, e ela costuma ser modal, mas nem sempre é (NN/g, Popups (em inglês)). O escurecido é só visual. O que decide se é modal é o fundo parar de responder.

Quando a interrupção vale o custo

Toda modal cobra um preço. A pessoa larga o que fazia, lê, decide, fecha e depois precisa lembrar onde estava. O artigo do NN/g de 2017 lista os casos em que esse preço se paga (NN/g (em inglês)):

  • Evitar perda que não se desfaz. Sair sem salvar ou sobrescrever um arquivo justifica parar a pessoa.
  • Pedir um dado que falta para continuar. O exemplo é pedir login quando alguém tenta salvar um favorito sem estar logado.
  • Quebrar uma tarefa longa em passos. Funciona, mas se a tarefa tem muitos passos, ela provavelmente merece uma página inteira.
  • Fazer uma pergunta curta que poupa trabalho depois. Só quando a pergunta tem relação com o que a pessoa acabou de fazer.

O mesmo texto aponta onde a modal atrapalha. Cadastro em newsletter não é crítico para quem visita. Janela no meio do checkout distrai na hora mais delicada da compra. Uma decisão que depende de informação escondida atrás da própria janela também não cabe nela.

Erro de formulário fica de fora pelo mesmo motivo. A pessoa precisa ver a mensagem enquanto corrige o campo, e por isso o erro vai ao lado dele, como explico no texto sobre formulário e erro de campo.

Quando ela vira ruído

Em 2019, uma pesquisadora do NN/g anotou cada janela que apareceu para ela em sites e aplicativos por algumas semanas. A média deu 25 por semana (NN/g, Popups (em inglês)). O artigo junta os padrões que mais irritaram nos testes:

  • janela antes de a página carregar;
  • janela logo depois do login, quando a pessoa já tem o próximo passo em mente;
  • pedido de e-mail antes de qualquer interação;
  • pedido de avaliação antes de a pessoa fazer algo que mereça avaliação;
  • várias janelas empilhadas, uma atrás da outra.

O custo vai além da irritação. Quem se acostumou a fechar janela inútil passa a fechar todas sem ler, inclusive a que traz um aviso sério. Por isso o mesmo artigo sugere mostrar o aviso crítico na própria página, num bloco que se destaque (NN/g (em inglês)).

O Google chega a uma conclusão parecida por outro caminho. Janela que cobre o conteúdo atrapalha o buscador a entender a página e pode prejudicar o desempenho na busca. A sugestão é trocar a janela de página inteira por uma faixa que ocupa só uma parte da tela (Google, intersticiais e caixas de diálogo intrusivos).

Como deixar a pessoa sair

Um artigo do NN/g de 2015 sobre janelas sobrepostas parte de três regras que muita gente já conhece (NN/g, Overuse of Overlays (em inglês)). São o botão de fechar visível, o fundo escurecido para mostrar que a página por trás não responde e o fechamento pela tecla Esc. Depois ele mostra o que costuma faltar:

  • Cancelar explícito. Muita gente não sabe que clicar fora fecha a janela. Na tela de toque, outras pessoas fecham sem querer.
  • Dado guardado. Se a janela tinha campos e foi fechada por engano, o que foi digitado deveria continuar lá quando ela abrir de novo.
  • Botão Voltar. Por padrão, ele não fecha a janela. Ele leva para a página anterior, e quem só queria sair da janela perde a página inteira.
  • Posição alta. Janela centralizada pode ficar cortada embaixo em telas baixas. Mais perto do topo, ela aparece inteira com mais frequência.

O celular e a lupa de tela pioram tudo. Com a tela ampliada, a pessoa vê só um pedaço da janela e pode não achar o botão de fechar.

O que o navegador já faz por você

O elemento <dialog> do HTML, aberto com showModal(), cuida de boa parte desse trabalho. Ele funciona em todos os navegadores principais desde março de 2022 (MDN, o elemento dialog). O fundo escuro sai do pseudoelemento ::backdrop, que só existe quando a janela é aberta como modal.

Um guia do web.dev resume o resto (web.dev, componente de caixa de diálogo). A tecla Esc fecha a janela sem código seu. O resto da página fica inerte, sem receber clique nem foco. Ao abrir, o foco vai para o primeiro elemento que aceita foco dentro da janela. Ao fechar, ele volta ao botão que abriu.

O padrão do W3C para janela modal completa a lista (W3C, Dialog (Modal) Pattern (em inglês)). A tecla Tab gira só entre os controles de dentro, e a janela precisa de um nome, visível ou no aria-label. O padrão recomenda, ainda, um botão de fechar que o teclado alcance.

O mesmo padrão faz um alerta. Marcar como modal uma janela que não trava o fundo de verdade engana quem usa leitor de tela, que deixa de perceber o resto da página. Se a janela não bloqueia, ela não deve ser anunciada como modal.

Como fiz no kahue.net

A galeria de telas de cada case, como a do case da Vexor, é uma modal. Ela usa o <dialog> nativo, aberto com showModal(), e tem nome próprio para o leitor de tela, como “Galeria de Vexor”. O primeiro botão dentro dela é o de fechar, então é nele que o foco cai quando a galeria abre.

A modal faz sentido ali porque foi a pessoa que pediu. Ela clicou numa miniatura para ver a tela grande, e a tarefa dentro da janela é uma só: olhar as telas e voltar.

Para sair, há quatro caminhos. O botão de fechar no canto, a tecla Esc, que vem do navegador, e o clique no fundo escuro, que escrevi à parte. O clique na própria imagem não fecha, para ninguém perder a galeria ao tocar na tela. As setas de anterior e próxima ficam embaixo, no alcance do polegar, e as setas do teclado também trocam a imagem.

O seletor de idioma, no topo do site, segue o caminho oposto. Ele não é modal: abre uma lista curta e deixa o resto da página livre. Fecha com clique fora, com a tecla Esc ou na troca de página. Quando fecha pelo Esc, o foco volta ao botão do seletor. Passar o mouse não abre a lista, porque isso criava dois estados brigando entre si.

O que falta, pela lista do NN/g, é o botão Voltar. Hoje, com a galeria aberta no computador, ele sai da página do case em vez de fechar a galeria.

Onde as fontes divergem

O ponto de atrito é o aviso de cookies. O artigo de 2019 do NN/g aceita uma janela antes do conteúdo quando a lei obriga a pedir consentimento (NN/g (em inglês)). No mesmo artigo, porém, a recomendação para o aviso de cookies é uma janela não modal, no pé ou na lateral da página.

O Google libera a janela obrigatória por lei, como a verificação de idade, das regras sobre intersticiais. Ele pede, mesmo assim, que o conteúdo continue carregado por baixo e que o site não redirecione para uma página só de consentimento (Google). As duas fontes se encontram num ponto: obrigação legal não pede que a janela trave a página inteira.

O erro comum: modal no lugar de uma página

A modal às vezes nasce por comodidade. Criar uma página nova dá mais trabalho, e a janela por cima parece um atalho. O NN/g lista esse motivo, evitar montar um modelo de página novo, como um dos que não justificam a janela (NN/g (em inglês)).

O sinal de alerta aparece cedo. Se o conteúdo da janela precisa de barra de rolagem, de links internos ou de um endereço próprio para compartilhar, ele já é uma página (NN/g (em inglês)). Dar uma página a ele devolve a rolagem normal, o botão Voltar e o link que se pode salvar.

Fontes

Outros textos

Ver todos os textos