Modal vs bottom sheet: cuándo usar cada uno en una app móvil
Un modal bloquea, un bottom sheet deja explorar. La pregunta que decide entre ambos, los dos patrones reconstruidos, una tabla de decisión para diez casos comunes y las reglas de plataforma detrás.
Los modales y los bottom sheets se deslizan sobre la pantalla, así que muchos equipos los tratan como lo mismo con otra forma. No lo son. Uno detiene a la gente hasta que responde, el otro deja elegir algo y seguir. Aquí tienes la pregunta que lo decide, ambos patrones reconstruidos y una tabla de decisión para los casos que aparecen en todas las apps.
La pregunta clave: ¿hay que responderla ahora?
Si la persona no puede continuar hasta elegir, es un modal. Si podría ignorarlo y la pantalla seguiría teniendo sentido, es un sheet.
Esa única pregunta resuelve la mayoría de los casos antes de que nadie discuta sobre estética. También explica cada otra diferencia entre ambos: un modal se sitúa en el centro y oscurece todo porque nada más importa hasta que se responda, y un sheet sube desde abajo y deja la pantalla a la vista porque la pantalla sigue siendo lo importante.
El modal: decide antes de seguir
Un modal, llamado diálogo en Android y alerta en iOS, interrumpe a propósito. Es lo correcto cuando:
- La gente debe decidir antes de seguir. La app no puede adivinar la respuesta.
- La acción no se puede deshacer. Eliminar un proyecto que borra 24 archivos para todos merece una pausa.
- Hay dos opciones como máximo. Cancelar y la acción, nombrada con un verbo: Eliminar, no Aceptar.
Dónde falla: en todo lo opcional. Un modal que pide una valoración, anuncia una función u ofrece un menú bloquea a la gente en lo que venía a hacer, y aprenden a tocar lo que lo cierre sin leer.
El bottom sheet: explora y luego elige
Un bottom sheet contiene opciones que pertenecen a lo que ya está en pantalla. Es lo correcto cuando:
- Las opciones pertenecen a esta pantalla. Compartir, duplicar, mover o archivar este proyecto.
- La gente puede deslizarlo para salir. No se exige respuesta.
- Hay más de dos opciones. Un sheet tiene espacio para una lista, y la lista queda al alcance del pulgar.
Dónde falla: en todo lo que no se debe omitir. Un sheet se puede cerrar con un deslizamiento accidental, así que una confirmación destructiva que vive solo en un sheet es fácil de perder o de activar por error.
Demasiados botones es un sheet disfrazado
Mal: un modal
Bien: un sheet
La pantalla de la izquierda es la confusión más común. Seis botones apilados en una caja centrada piden a la gente leer un menú dentro de una interrupción. Ninguna opción es urgente, así que nada necesita bloquear la pantalla. Las mismas opciones en un sheet se leen como una lista, quedan al alcance del pulgar y se cierran con un deslizamiento.
La regla de Material Design es corta: un diálogo debe tener dos acciones como máximo. Cuando necesitas una tercera, tienes un menú, y un menú pertenece a un sheet.
Los dos juntos: elimina desde un sheet, confirma con un modal
Primero, el sheet
Después, el modal
Los patrones no son rivales. Una opción destructiva puede estar en un sheet junto a las demás acciones, en rojo y al final. Al tocarla se abre el modal, porque solo ahora hay una decisión que no se puede deshacer. Explora en el sheet, bloquea en el momento que importa.
Modal o sheet: una tabla de decisión
| Situación | Elige | Por qué |
|---|---|---|
| Eliminar un proyecto para todos | Modal | No se puede deshacer, dos opciones |
| Descartar cambios sin guardar | Modal | La gente debe decidir antes de salir |
| Cerrar sesión en un dispositivo compartido | Modal | Un sí o un no que cambia el estado |
| Compartir, duplicar, mover, archivar | Sheet | Opciones para el elemento en pantalla |
| Ordenar o filtrar una lista | Sheet | La gente quiere ver cómo cambia la lista detrás |
| Elegir una tarjeta guardada al pagar | Sheet | Más de dos opciones, parte de la pantalla |
| Añadir una foto de la cámara o la galería | Sheet | Una elección de origen, fácil de abandonar |
| Detalles de un lugar en un mapa | Sheet | El mapa sigue siendo lo importante |
| Aceptar nuevos términos antes de continuar | Modal | La app no puede seguir sin una respuesta |
| Anunciar una función nueva | Ninguno | Nadie tiene que decidir. Usa un banner en línea |
Quién lo hace bien
Puedes comprobarlo hoy en tu teléfono:
- Apple Maps y Google Maps mantienen los resultados de búsqueda y los detalles de los lugares en un sheet sobre el mapa, así que nunca pierdes tu posición.
- El share sheet de iOS lista cada app y acción para lo que estás viendo, y se cierra con un deslizamiento.
- El menú "más" de una publicación en Instagram se abre como un bottom sheet con opciones para esa publicación.
Las guías de Apple trazan la misma línea desde el otro lado: las alertas son para información crítica que la gente necesita de inmediato, incluida una advertencia de que una acción podría destruir datos, mientras que los sheets y los action sheets contienen opciones relacionadas con lo que la gente está haciendo.
FAQ
¿Cuándo debo usar un bottom sheet en lugar de un modal?
Cuando las opciones pertenecen a la pantalla actual, hay más de dos y nadie tiene que elegir para continuar. Compartir, ordenar, filtrar y elegir de una lista son trabajos de sheet.
¿Cuándo debo usar un diálogo modal?
Cuando la gente debe decidir antes de seguir, normalmente porque la acción no se puede deshacer. Limítalo a dos acciones: cancelar y la acción nombrada con un verbo.
¿Cuántos botones debe tener un modal?
Dos como máximo. Material Design dice que un diálogo debe contener un máximo de dos acciones. Si necesitas más, las opciones son un menú y pertenecen a un sheet.
¿Un bottom sheet es un modal?
Un bottom sheet modal oscurece la pantalla y hay que cerrarlo antes de volver a usarla, pero se puede cerrar con un deslizamiento y no pregunta nada. Un diálogo hace una pregunta y espera una respuesta.
¿Cuál es la diferencia entre una alerta y un action sheet en iOS?
Una alerta interrumpe con información crítica y un pequeño conjunto de botones. Un action sheet sube desde abajo con opciones relacionadas con una acción que la gente acaba de iniciar, como las opciones de una foto.
Fuentes
- Dialogs y Bottom sheets, Material Design 3.
- Alerts, Sheets y Action sheets, Apple Human Interface Guidelines.
- Publicado por primera vez como carrusel en UX Brainy.
Want your app's dialogs, sheets and every other pattern chosen and designed as one system? Our team designs app UI from the first flow to the finished components.
Get Started
