Skip to content

Instantly share code, notes, and snippets.

@pablorsk
Created May 12, 2025 13:18
Show Gist options
  • Save pablorsk/e7110798f58333d891d9cb468ee9926a to your computer and use it in GitHub Desktop.
Save pablorsk/e7110798f58333d891d9cb468ee9926a to your computer and use it in GitHub Desktop.

🧭 Árbol de Decisión en la interfaz

¿El usuario debe detener su acción?

    • ¿Se produjo un error real o una acción requerida para continuar?
      • Sí → 🟥 Alert
        Ejemplo: "Tu cuenta fue rechazada, debes cargar nuevos datos."
  • No

    • ¿Hay algo que debería revisar o cargar para mejorar el proceso?

      • Sí → 🟨 Warning
        Ejemplo: "Tenés pagos sin confirmar, marcarlos acelera el proceso."
    • ¿Es solo para mantener informado o dar contexto?

      • Sí → 🟦 Info
        Ejemplo: "Estamos procesando tu solicitud."

🗂 Clasificación resumida

Nivel Color sugerido Acción esperada Ejemplos clave
🟥 Alert Rojo Corregir o reintentar Error de validación, fallos, bloqueos críticos
🟨 Warning Amarillo Revisar o ajustar pronto Pagos pendientes, datos faltantes, acciones dudosas
🟦 Info Celeste Solo informar o contextual Proceso en marcha, cuenta activa, datos visibles

✅ Recomendaciones UX

  • Usar siempre verbos claros en la acción esperada.
  • Evitar abusar del tipo "alert" para mensajes menores.
  • Incluir íconos visuales que refuercen la jerarquía del mensaje.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment