Modal vs Bottom Sheet: quando usar cada um em um app mobile

Modais e bottom sheets deslizam sobre a tela, então muitos times os tratam como a mesma coisa em formatos diferentes. Não são. Um para a pessoa até ela responder, o outro deixa escolher algo e seguir em frente. Aqui está a pergunta que decide, os dois padrões reconstruídos e uma tabela de decisão para os casos que aparecem em todo app.

A pergunta: precisa ser respondido agora?

Se a pessoa não consegue continuar até escolher, é um modal. Se ela poderia ignorar e a tela ainda faria sentido, é um sheet.

Essa única pergunta resolve a maioria dos casos antes de alguém discutir aparência. Ela também explica todas as outras diferenças: o modal fica no meio e escurece tudo porque nada mais importa até ele ser respondido, e o sheet sobe da base e deixa a tela à vista porque a tela continua sendo o ponto.

O modal: decida antes de seguir

Um modal, chamado de dialog no Android e de alert no iOS, interrompe de propósito. Ele é a escolha certa quando:

• A pessoa precisa decidir antes de seguir. O app não consegue adivinhar a resposta.
• A ação não pode ser desfeita. Excluir um projeto que remove 24 arquivos para todos merece uma pausa.
• Há no máximo duas opções. Cancelar e a ação, nomeada como verbo: Excluir, não OK.

Onde falha: qualquer coisa opcional. Um modal que pede avaliação, anuncia um recurso ou oferece um menu bloqueia a pessoa do que ela veio fazer, e ela aprende a tocar no que fechar sem ler.

O bottom sheet: navegue, depois escolha

Um bottom sheet guarda escolhas que pertencem ao que já está na tela. Ele é a escolha certa quando:

• As opções pertencem a esta tela. Compartilhar, duplicar, mover ou arquivar este projeto.
• A pessoa pode dispensar com um swipe para desistir. Nenhuma resposta é obrigatória.
• Há mais de duas opções. Um sheet tem espaço para uma lista, e a lista fica ao alcance do polegar.

Onde falha: qualquer coisa que não pode ser pulada. Um sheet some com um swipe sem querer, então uma confirmação destrutiva que vive só em um sheet é fácil de perder ou de disparar por acidente.

Botões demais é um sheet disfarçado

Errado: um modal

Certo: um sheet

A tela da esquerda é a confusão mais comum. Seis botões empilhados em uma caixa centralizada pedem que a pessoa leia um menu dentro de uma interrupção. Nenhuma das opções é urgente, então nada precisa bloquear a tela. As mesmas opções em um sheet viram uma lista, ficam ao alcance do polegar e fecham com um swipe.

A regra do Material Design é curta: um dialog deve ter no máximo duas ações. Quando você precisa de uma terceira, o que você tem é um menu, e menu pertence a um sheet.

Os dois juntos: exclua pelo sheet, confirme com um modal

Primeiro, o sheet

Depois, o modal

Os padrões não são rivais. Uma opção destrutiva pode ficar em um sheet com as outras ações, em vermelho e por último. Tocar nela abre o modal, porque só agora existe uma decisão que não dá para desfazer. Navegue no sheet, bloqueie no momento em que importa.

Modal ou sheet: uma tabela de decisão

Quem faz bem

Você pode conferir isso no seu celular hoje:

• Apple Maps e Google Maps mantêm resultados de busca e detalhes do lugar em um sheet sobre o mapa, então você nunca perde sua posição.
• A share sheet do iOS lista todos os apps e ações para o que você está vendo, e fecha com um swipe.
• O menu "mais" do Instagram em um post abre como um bottom sheet com opções para aquele post.

As diretrizes da Apple traçam a mesma linha pelo outro lado: alerts são para informação crítica de que a pessoa precisa na hora, incluindo um aviso de que uma ação pode destruir dados, enquanto sheets e action sheets guardam escolhas relacionadas ao que a pessoa está fazendo.

FAQ

Quando devo usar um bottom sheet em vez de um modal?

Quando as opções pertencem à tela atual, são mais de duas e ninguém precisa escolher para continuar. Compartilhar, ordenar, filtrar e escolher em uma lista são trabalhos de sheet.

Quando devo usar um dialog modal?

Quando a pessoa precisa decidir antes de seguir, em geral porque a ação não pode ser desfeita. Limite a duas ações: um cancelar e a ação nomeada como verbo.

Quantos botões um modal deve ter?

No máximo dois. O Material Design diz que um dialog deve conter no máximo duas ações. Se você precisa de mais, as opções são um menu e pertencem a um sheet.

Um bottom sheet é um modal?

Um bottom sheet modal escurece a tela e precisa ser fechado antes de a pessoa voltar a usá-la, mas pode ser dispensado com um swipe e não pergunta nada. Um dialog faz uma pergunta e espera uma resposta.

Qual a diferença entre um alert e um action sheet no iOS?

Um alert interrompe com informação crítica e um pequeno conjunto de botões. Um action sheet sobe da base com escolhas relacionadas a uma ação que a pessoa acabou de iniciar, como as opções de uma foto.

Fontes

• Dialogs e Bottom sheets, Material Design 3.
• Alerts, Sheets e Action sheets, Apple Human Interface Guidelines.
• Publicado originalmente como carrossel no UX Brainy.