UX LATAM Airlines
Published in

UX LATAM Airlines

Repensando el uso de alertas:
Cómo la saturación de este componente nos llevó a la creación de un nuevo tipo de mensaje

Pantalla del flujo de compra de LATAM con ejemplo de alerta sobre flexibilidad en fechas de viaje.
Ejemplos de alertas en la página de mensajes de Airbnb. En este caso, las alertas se disparan en relación al tiempo transcurrido, para que el dueño del inmueble acepte o no la solicitud de reserva.
  1. Los alerts no solo se deben considerar como un componente de diseño, sino un mensaje clave en donde el relato y su composición es lo prioritario para advertir al usuario.
  • ¿Qué problemas, errores o acciones necesitamos alertar a los usuarios?
  • ¿Qué mensajes de advertencia son críticos y que deben ser lo suficientemente reconocibles y encontrables en cada pantalla?
  • ¿Cuántos niveles de severidad definiremos y cómo representaremos cada uno de ellos?
  • ¿Qué idiomas debe soportar este alert y cuántos serían los caracteres máximos a considerar para que no quede un mensaje con una extensión exagerada que absorba o anule los otros elementos de la interfaz ?
  • ¿Cuál es el icono más apropiado para acompañar a cada caso, o será solo uno estandarizado para todos los tipos de alertas como un signo de exclamación?
  • ¿Es necesario considerar títulos, links o textos en “bold” o “itálica” para destacar algunas frases o datos claves como fechas, horas, documentos, nombres, lugares entre otros?
  • ¿Cómo aseguramos la legibilidad de este componente, si debe coexistir con otros mensajes de forma simultanea? En ese caso, ¿cuál sería más importante? Se podría hacer un símil con el uso de TRIAGE en los recintos de urgencia médica y cómo se establece una escala de priorización para la atención de pacientes.
Ejemplo de mensajes de alertas con niveles de severidad y distinción de colores e iconos.
Ejemplos de mensajes de alertas diseñados en nuestro Design System
Variantes del MessageInfo para seleccionar según el tipo de información a entregar
Ejemplo de pantalla en dónde interactúa un componente de alert y uno de message info
  • Tipo de comunicación: Alerta o mensaje
  • Nivel de severidad: n/a, bajo, medio, alto
  • Rol de jerarquía visual: secundario, complementario, primario, critico
  • Visibilidad: Permanente, temporal, persistente

--

--

Taking people’s dreams further everyday. Passionate about travel and exploring new ideas. Texts and thoughts by members of LATAM Airlines’ Digital Team.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paulina Meyer

Diseñadora gráfica PUCV, Magíster en Diseño Avanzado PUC, UX Certificate NYU, Senior UX Designer. Profesora agregada PUCV. Visual Design Lead LATAM Airlines