Toasts, Snackbars y Alerts son componentes fundamentales dentro del vocabulario de comunicación de un sistema de diseño. Juntos, forman un conjunto de mecanismos estandarizados que una interfaz utiliza para presentar información al usuario.
Cada uno de estos elementos se distingue por su comportamiento en la interfaz, como su permanencia en pantalla y el nivel de interacción que demandan del usuario, operando en un espectro que va desde lo efímero y pasivo hasta lo persistente y modal.
Qué es un Toast
El objetivo principal de un Toast es el de confirmar de forma pasiva y no intrusiva que una acción solicitada por el usuario se ha completado con éxito. No interrumpe ni requiere ninguna acción al usuario que recibe la información o respuesta del sistema. Es un simple acuse de recibo o un “para tu información” del sistema que no requiere de una acción inmediata.
- Propósito: Confirmar una acción sin interrumpir el flujo del usuario.
- Interacción: No es interactivo. El usuario no puede cerrarlo ni realizar ninguna acción sobre él. Simplemente aparece y se desvanece automáticamente tras unos segundos.
- Contenido: Generalmente, solo contiene texto breve. Por ejemplo: «Perfil actualizado correctamente».
- Ubicación: Suele aparecer en la parte superior o inferior de la pantalla, a menudo centrado, y no está anclado a la interfaz de usuario.
Cuándo usar un Toast
Imaginemos que estamos gestionando correos electrónicos en una aplicación. El usuario pulsa «Enviar». El correo se envía correctamente en segundo plano. Aparece un pequeño mensaje flotante en la parte superior que dice «Correo enviado» y se desvanece a los 3 segundos. La acción ha tenido éxito y no hay nada más que el usuario necesite hacer. Es pura información de baja prioridad. No requiere ninguna acción ni interrumpe su siguiente tarea.
Qué es un Snackbar
Por otro lado, el objetivo principal de un Snackbar es informar que se ha realizado una acción, ofreciendo al mismo tiempo una opción contextual y rápida. Aporta un extra de control al usuario sin ser molesto. Reconoce que el usuario podría querer revertir la acción inmediatamente. Demanda un poco más de atención.
- Propósito: Informar y, potencialmente, permitir una acción inmediata.
- Interacción: Puede ser interactivo. A menudo incluye un botón de acción, como «Deshacer», «Reintentar» o «Ver». El usuario también puede descartarlo deslizando el dedo.
- Contenido: Texto informativo junto a un botón de acción opcional. Por ejemplo: «Conversación archivada. [Deshacer]».
- Ubicación: Siempre aparece anclado en la parte inferior de la pantalla (en móvil) o en la esquina inferior izquierda (en escritorio), asegurando que no tape elementos de navegación primarios.
Cuándo usar un Snackbar
El usuario desliza un correo para archivarlo. Es una acción rápida y a veces puede ser accidental. En la parte inferior de la pantalla aparece una barra que dice: «Conversación archivada. [Deshacer]». Permanece unos segundos y, si el usuario no hace nada, desaparece. Informa del éxito de la acción (archivado), pero como podría ser un error, ofrece una vía de escape inmediata («Deshacer»). Es útil, pero no bloquea al usuario si quiere seguir archivando más correos.
Qué es un Alert
Una Alert es un componente diseñado para comunicar información crítica o muy importante que requiere la atención inmediata del usuario. A menudo, interrumpe el flujo de trabajo del usuario porque el mensaje debe ser reconocido antes de poder continuar.
- Propósito: Informar sobre estados importantes, errores graves o solicitar una confirmación para una acción destructiva. Su objetivo es prevenir problemas o comunicar fallos que el usuario debe conocer.
- Interrupción: Alta. Las alertas son disruptivas por diseño. Bloquean parcial o totalmente la interacción con el resto de la interfaz hasta que el usuario las atiende.
- Interacción: Obligatoria. El usuario debe interactuar activamente con la alerta para cerrarla, normalmente a través de botones como «Aceptar», «Cancelar», «Cerrar» o «Confirmar». No desaparece por sí sola.
- Contenido: Suele incluir un título, un mensaje descriptivo y uno o más botones de acción. A menudo utiliza colores semánticos (rojo para error, amarillo para advertencia, azul para información) para transmitir el nivel de gravedad.
- Ubicación: Puede aparecer como un diálogo modal que superpone toda la pantalla (bloqueando la interacción) o como un banner prominente anclado en la parte superior de la página o de una sección específica.
Cuándo usar un Alert
- Error crítico: «No se ha podido guardar el documento. Por favor, revisa tu conexión a internet».
- Acción destructiva: «¿Estás seguro de que quieres eliminar tu cuenta? Esta acción no se puede deshacer».
- Advertencia importante: «Tu sesión está a punto de expirar. ¿Quieres continuar conectado?».
Dentro de la estructura de un sistema de diseño, la distinción entre estos tres elementos es crucial. No son variantes de un mismo concepto, sino entidades con comportamientos y ciclos de vida definidos. La lógica del sistema establece cuándo se invoca cada componente, creando una cadencia predecible en la interacción. Esta formalización garantiza que la forma en que la aplicación se comunica sea coherente y sistemática, independientemente de la parte de la interfaz en la que se encuentre el usuario.
Créditos
Notifications
Toast
Toast
Components: Toast
Toast
Messaging: Snackbar
Snackbar