Patrones de Diseño UI

¿Qué son los Patrones de Diseño UI?

Los Patrones UI son soluciones de diseño probadas para problemas recurrentes. En lugar de inventar una nueva forma de mostrar un menú de navegación o un formulario de registro cada vez, puedes usar patrones que han demostrado ser efectivos con millones de usuarios.

Estos patrones no son plantillas listas para usar — son principios que te guían. Cada patrón resuelve un problema específico y puedes adaptarlo a tu proyecto.

Por qué importan los patrones:

• Familiaridad del usuario: Los usuarios esperan ciertas formas. Cuando usas un patrón familiar, el usuario sabe inmediatamente cómo interactuar con tu aplicación (Ley de Jakob)
• Velocidad de diseño: No necesitas empezar desde cero cada vez
• Decisiones informadas: Cada patrón fue construido basándose en investigación y datos reales
• Consistencia: Usar patrones consistentes hace que todo el producto parezca cohesivo

Patrones de Navegación

La navegación es la columna vertebral de cualquier aplicación — si el usuario no puede encontrar el contenido que quiere, el resto del diseño no tiene sentido.

1. Barra de Navegación Superior (Top Navigation Bar)

El patrón más común en la web. Una barra horizontal en la parte superior de la página con el logo y los enlaces principales.

Cuándo usarlo:

• Sitios web con 5-7 enlaces principales
• Cuando necesitas que el logo siempre esté visible

Mejores prácticas:

• Logo a la derecha en RTL (izquierda en LTR)
• 7 elementos como máximo en la navegación principal
• Botones CTA distinguidos por un color diferente
• La navegación sticky es útil para páginas largas

2. Navegación de Barra Lateral (Sidebar Navigation)

Una columna en el lateral de la pantalla con una lista de enlaces. Muy adecuada para:

• Paneles de control (Dashboards)
• Aplicaciones SaaS
• Sistemas de administración

Mejores prácticas:

• Ancho del Sidebar entre 240-300px
• Agrupa los enlaces en categorías con encabezados
• Icono + texto para cada enlace
• Sidebar colapsable para pantallas más pequeñas
• Estado activo claro para la página actual

3. Barra de Pestañas Inferior (Bottom Tab Bar)

La Tab Bar en la parte inferior de la pantalla del móvil. El patrón más común en las aplicaciones móviles.

Cuándo usarlo:

• Aplicaciones móviles con 3-5 secciones principales

Mejores prácticas:

• 5 elementos como máximo
• Icono + etiqueta de texto para cada elemento
• El elemento activo claramente distinguido (color diferente o tamaño mayor)
• No pongas acciones en la Tab Bar — solo navegación

4. Menú Hamburguesa (Hamburger Menu)

Tres líneas horizontales que abren un menú oculto. Adecuado cuando tienes muchos enlaces y poco espacio.

Advertencia importante: Los estudios muestran que un menú oculto reduce el engagement en un 20-50% comparado con la navegación visible. Úsalo como último recurso, no como primera opción.

Patrones de Formularios

Los formularios son el punto en el que el usuario pasa de navegar a interactuar. Un diseño de formulario deficiente hace que los usuarios abandonen la página.

1. Colocación de Etiquetas

Tres formas de posicionar la etiqueta:

• Encima del campo: La mejor para la mayoría de los casos — clara, fácil de explorar visualmente y funciona bien en móvil
• Dentro del campo (Placeholder): Desaparece cuando el usuario escribe — no la uses como sustituto de la etiqueta. Puede usarse como ejemplo junto a la etiqueta
• Al lado del campo: Ahorra espacio vertical pero usa espacio horizontal. Adecuado para formularios anchos en escritorio

2. Validación de Datos

• Validación en línea (Inline Validation): Validar en tiempo real mientras el usuario escribe o cuando abandona el campo. La mejor experiencia
• Mensajes de error: Deben ser claros y específicos — "Dirección de correo electrónico no válida" es mejor que "Error de entrada"
• El color no es suficiente: No te apoyes solo en el color rojo — añade un icono y texto
• Posición del mensaje de error: Directamente debajo del campo, no en la parte superior de la página

3. Segmentación Inteligente

• Formularios largos: Divídelos en pasos (formulario de varios pasos) con un indicador de progreso claro
• Agrupación: Agrupa los campos relacionados (nombre con apellido, ciudad con país)
• Visualización condicional: Muestra campos adicionales solo cuando sean necesarios (si eligen "Otro," muestra un campo de texto)

4. Botones de Formulario

• Botón de envío: Claro y prominente — color primario + texto que describe la acción ("Crear cuenta" no "Enviar")
• Botón de cancelar: Menos prominente que el de envío — texto sin fondo o fondo claro
• Orden: Botón de envío a la izquierda en RTL (porque el ojo termina allí)

Patrones de Tarjetas (Card Patterns)

La tarjeta (Card) es el componente más importante del diseño moderno. Agrupa contenido relacionado en una unidad visual única.

Anatomía de la Tarjeta Perfecta

De arriba hacia abajo:

1. Imagen (opcional): atrae la atención y transmite el significado rápidamente
2. Categoría/Badge: una o dos palabras que aclaran el tipo de contenido
3. Título: corto y expresivo
4. Descripción: una o dos líneas que aclaran el contenido
5. Información secundaria: fecha, autor, tiempo de lectura
6. Acción (opcional): botón o enlace

Tipos de Tarjetas

• Tarjeta de contenido: para artículos, noticias y productos. Contiene imagen, título y descripción
• Tarjeta de estadísticas: número grande + título + indicador de cambio. Se usa en Dashboards
• Tarjeta de perfil: foto de perfil + nombre + descripción + enlaces. Se usa en páginas de equipo
• Tarjeta interactiva: contiene botones y menús. Se usa en aplicaciones de gestión de tareas

Mejores Prácticas

• Espaciado consistente: mismo padding en todos los lados
• Sombra ligera o borde: para distinguir la tarjeta del fondo
• Estado hover: un cambio sutil cuando el usuario pasa el ratón sobre la tarjeta
• Altura fija o flexible: las tarjetas en una cuadrícula deben ser consistentes en altura

Patrones de Ventanas Modales

Un modal es una ventana que aparece sobre el contenido y demanda la atención del usuario. Úsalo con mucho cuidado porque interrumpe al usuario.

¿Cuándo Usar un Modal?

• Confirmar una acción peligrosa: "¿Estás seguro de que quieres eliminar?"
• Información que requiere concentración: formulario de pago, configuraciones importantes
• Contenido adicional: detalles de un elemento sin abandonar la página

¿Cuándo NO Usar un Modal?

• Mensajes informativos simples — usa Toast/Snackbar
• Listas simples — usa un Dropdown
• Contenido largo — usa una página nueva

Mejores Prácticas para Modales

• Fondo oscurecido (Overlay): enfoca la atención en la ventana
• Botón de cierre claro: X en la esquina + posibilidad de hacer clic en el fondo para cerrar
• Ancho apropiado: 400-600px para formularios simples, 800px como máximo
• Título claro: el usuario debe entender el propósito a primera vista
• En móvil: convierte el modal en un Bottom Sheet — más fácil de alcanzar con una mano

Patrones de Carga y Espera

Los usuarios odian esperar. Pero la espera a veces es inevitable. Lo que importa es que gestiones las expectativas.

1. Skeleton Screens

En lugar de mostrar una pantalla vacía o un spinner de carga, muestra un esqueleto gris con la forma del contenido esperado. Esto se llama Skeleton Screen.

¿Por qué es mejor que un Spinner? Porque el usuario siente que el contenido realmente se está cargando — no solo esperando.

2. Barra de Progreso (Progress Bar)

Para operaciones que llevan un tiempo conocido — subir un archivo, descargar un archivo grande, procesar datos. El usuario necesita saber cuánto queda.

3. Spinner

Para operaciones rápidas (menos de 3 segundos). No lo uses para operaciones largas — el usuario no sabrá si hay un problema o si se está cargando.

4. UI Optimista (Optimistic UI)

El patrón más inteligente — muestra el resultado antes de confirmar con el servidor. Cuando el usuario pulsa "Like," cambia el color inmediatamente y envía la solicitud en segundo plano. Si falla, reviértelo.

Patrones de Notificaciones

1. Toast / Snackbar

Un mensaje pequeño que aparece temporalmente (3-5 segundos) y desaparece solo. Adecuado para:

• "Guardado correctamente"
• "Copiado"
• Cualquier confirmación que no requiera respuesta del usuario

Posición: parte inferior central de la pantalla, o inferior izquierda/derecha.

2. Alerta / Banner

Un mensaje fijo en la parte superior de la página o sección. Adecuado para:

• Advertencias importantes
• Anuncios del sistema
• Mensajes de error generales

Tipos: Éxito (verde), Error (rojo), Advertencia (amarillo), Info (azul).

3. Insignia (Badge)

Un número pequeño en un icono que indica el número de notificaciones o nuevos elementos. Adecuado para:

• Número de mensajes nuevos
• Número de elementos en el carrito
• Notificaciones no leídas

4. Estado Vacío (Empty State)

Cuando no hay contenido que mostrar — no dejes la página en blanco. Muestra:

• Una ilustración o icono
• Un mensaje claro: "No hay tareas todavía"
• Una acción: "Añade tu primera tarea" — un botón que guíe al usuario

Patrones de Búsqueda y Filtros

Búsqueda

• Colocación de la búsqueda: en la parte superior de la página o en el Navbar — los usuarios la esperan allí
• Placeholder claro: "Busca un producto, artículo o categoría..."
• Resultados instantáneos: muestra resultados mientras se escribe (Autocomplete) si es posible
• Estado sin resultados: mensaje amigable + sugerencias

Filtrado

• Filtros visibles: Chips o botones en la parte superior de la lista — adecuado para 3-5 opciones
• Filtros de barra lateral: Sidebar con opciones detalladas — adecuado para tiendas online
• Filtros ocultos: botón "Filtrar" que abre un menú — adecuado para móvil
• Mostrar filtros activos: el usuario debe saber qué filtros están aplicados y cómo eliminarlos

Patrones de Tablas

Las tablas son muy importantes en las aplicaciones administrativas y los paneles de control.

Mejores Prácticas

• Encabezado de tabla fijo: cuando el usuario desplaza hacia abajo, el encabezado permanece visible
• Resaltado alternado: color de fondo diferente para filas pares e impares (Zebra Striping)
• Ordenación: el usuario puede hacer clic en el encabezado de una columna para ordenar los datos
• Selección de filas: Checkboxes para seleccionar múltiples filas
• Acciones de fila: menú de acciones (eliminar, editar) para cada fila
• En móvil: la tabla se convierte en tarjetas o se permite el desplazamiento horizontal

Patrones de Incorporación (Onboarding)

La primera experiencia de un usuario con la aplicación determina si se quedará o la eliminará.

1. Tour del Producto (Product Tour)

Tooltips que aparecen paso a paso explicando las características principales. 3-5 pasos como máximo — más que eso y el usuario los omitirá.

2. Pantallas de Incorporación (Onboarding Screens)

3-4 pantallas con imágenes y titulares que aclaran el valor de la aplicación. Adecuado para aplicaciones móviles. Debe haber un botón "Omitir".

3. Divulgación Progresiva (Progressive Disclosure)

En lugar de mostrar todas las características a la vez, muestra primero lo básico. A medida que el usuario avanza, revela más características.

4. Lista de Verificación (Checklist)

Una lista de tareas que el usuario necesita completar para terminar la configuración — "Completa tu perfil," "Añade tu primer proyecto," "Invita a tu equipo." Crea motivación para completar la configuración.

Ejercicio Práctico

Diseña dos pantallas para una aplicación de gestión de tareas:

Primera pantalla — Lista de tareas:

1. Navegación de barra lateral (Sidebar) con proyectos
2. Barra de búsqueda y filtros en la parte superior
3. Lista de tareas en formato de tarjetas
4. Estado Vacío si la lista está vacía
5. Botón para añadir tarea (FAB o botón normal)

Segunda pantalla — Detalles de la tarea:

1. Modal o página completa
2. Formulario para editar título y descripción
3. Selectores de prioridad, fecha y responsable
4. Sección de comentarios
5. Botones de guardar, cancelar y eliminar

Concéntrate en los patrones que has aprendido — cada elemento del diseño debe seguir un patrón probado y establecido.