Modale ou bottom sheet : quand utiliser chacune dans une app mobile

Les modales et les bottom sheets glissent toutes deux sur l'écran, alors les équipes les traitent comme la même chose sous des formes différentes. Ce n'est pas le cas. L'une arrête l'utilisateur jusqu'à ce qu'il réponde, l'autre lui laisse choisir quelque chose et continuer. Voici la question unique qui tranche, les deux patterns reconstruits et un tableau de décision pour les cas qui reviennent dans chaque app.

La question unique : faut-il répondre maintenant ?

Si la personne ne peut pas continuer sans choisir, c'est une modale. Si elle pourrait l'ignorer et que l'écran garderait du sens, c'est une sheet.

Cette seule question règle la plupart des cas avant que quiconque se dispute sur l'apparence. Elle explique aussi toutes les autres différences : une modale se place au milieu et assombrit tout parce que rien d'autre ne compte avant la réponse, et une sheet monte du bas et laisse l'écran visible parce que l'écran reste l'enjeu.

La modale : décider avant de continuer

Une modale, appelée dialog sur Android et alert sur iOS, interrompt volontairement. Elle est justifiée quand :

• L'utilisateur doit décider avant de continuer. L'app ne peut pas deviner la réponse.
• L'action est irréversible. Supprimer un projet qui efface 24 fichiers pour tout le monde mérite une pause.
• Il y a deux choix au maximum. Annuler et l'action, nommée par un verbe : Supprimer, pas OK.

Où elle échoue : tout ce qui est optionnel. Une modale qui demande une note, annonce une fonctionnalité ou propose un menu empêche les gens de faire ce pour quoi ils sont venus, et ils apprennent à taper n'importe quoi pour la fermer sans lire.

La bottom sheet : parcourir, puis choisir

Une bottom sheet contient des choix liés à ce qui est déjà à l'écran. Elle est justifiée quand :

• Les options appartiennent à cet écran. Partager, dupliquer, déplacer ou archiver ce projet.
• On peut la balayer pour sortir. Aucune réponse n'est exigée.
• Il y a plus de deux choix. Une sheet a la place pour une liste, et la liste est à portée de pouce.

Où elle échoue : tout ce qui ne doit pas être esquivé. Une sheet peut être fermée d'un balayage involontaire, donc une confirmation destructive qui ne vit que dans une sheet se perd ou se déclenche trop facilement par accident.

Trop de boutons, c'est une sheet déguisée

Faux : une modale

Juste : une sheet

L'écran de gauche est la confusion la plus courante. Six boutons empilés dans une boîte centrée demandent de lire un menu à l'intérieur d'une interruption. Aucun choix n'est urgent, donc rien ne justifie de bloquer l'écran. Les mêmes options dans une sheet se lisent comme une liste, restent à portée de pouce et se ferment d'un balayage.

La règle de Material Design est courte : un dialog ne doit contenir que deux actions au maximum. Quand il en faut une troisième, vous avez un menu, et un menu va dans une sheet.

Les deux ensemble : supprimer depuis une sheet, confirmer avec une modale

D'abord, la sheet

Ensuite, la modale

Ces patterns ne sont pas rivaux. Une option destructive peut figurer dans une sheet avec les autres actions, en rouge et placée en dernier. La toucher ouvre la modale, car c'est seulement là qu'apparaît une décision irréversible. On explore dans la sheet, on bloque au moment où ça compte.

Modale ou sheet : un tableau de décision

Qui le fait bien

Vous pouvez le vérifier sur votre téléphone dès aujourd'hui :

• Apple Maps et Google Maps gardent les résultats de recherche et les détails d'un lieu dans une sheet au-dessus de la carte, donc vous ne perdez jamais votre position.
• La share sheet d'iOS liste toutes les apps et actions pour l'élément que vous regardez, et se ferme d'un balayage.
• Le menu « plus » d'Instagram sur un post s'ouvre en bottom sheet d'options pour ce post.

Les guidelines d'Apple tracent la même ligne depuis l'autre côté : les alertes servent aux informations critiques dont on a besoin tout de suite, y compris un avertissement qu'une action pourrait détruire des données, tandis que les sheets et les action sheets contiennent des choix liés à ce que fait l'utilisateur.

FAQ

Quand utiliser une bottom sheet plutôt qu'une modale ?

Quand les options appartiennent à l'écran en cours, qu'il y en a plus de deux et que personne n'a besoin de choisir pour continuer. Partager, trier, filtrer et choisir dans une liste sont des tâches de sheet.

Quand utiliser une boîte de dialogue modale ?

Quand l'utilisateur doit décider avant de continuer, généralement parce que l'action est irréversible. Limitez-vous à deux actions : une annulation et l'action nommée par un verbe.

Combien de boutons une modale doit-elle avoir ?

Deux au maximum. Material Design indique qu'un dialog doit contenir deux actions au plus. Si vous en avez besoin de plus, ces choix forment un menu et vont dans une sheet.

Une bottom sheet est-elle une modale ?

Une bottom sheet modale assombrit l'écran et doit être fermée avant de pouvoir réutiliser l'écran, mais elle peut être balayée et ne pose aucune question. Une boîte de dialogue pose une question et attend une réponse.

Quelle est la différence entre une alert et une action sheet sur iOS ?

Une alert interrompt avec une information critique et un petit nombre de boutons. Une action sheet monte du bas avec des choix liés à une action que l'utilisateur vient de lancer, comme les options d'une photo.

Sources

• Dialogs et Bottom sheets, Material Design 3.
• Alerts, Sheets et Action sheets, Apple Human Interface Guidelines.
• Publié d'abord sous forme de carrousel sur UX Brainy.