UX · Patrones

Patrones de interacción

Navegación, búsqueda, onboarding, listados, detalle, formularios y estados vacíos explicados como patrones listos para reutilizar en proyectos y en clase.

Qué es un patrón de UX

Un patrón de UX es una solución recurrente a un problema común de interacción: no es una plantilla rígida, sino un esquema que puedes adaptar a tu proyecto.

Esta página reúne patrones de alto nivel para cubrir las situaciones que más se repiten: navegación, búsqueda y filtros, onboarding, listados y detalle, formularios, feedback y estados vacíos. La idea es que sirvan como biblioteca rápida para no empezar de cero cada vez.

Puedes leerlos como:

  • Referencias para estructurar nuevas pantallas de producto.
  • Guion de clase para explicar cómo se resuelve un mismo problema en distintas interfaces.
  • Checklist mental a la hora de evaluar si una interfaz está usando patrones reconocibles.

Cómo organizar la entrada a los contenidos y secciones para que la persona sepa dónde está y cómo volver.

Desktop

Navegación principal + secundaria

Patrón clásico con un menú principal visible en la parte superior y una navegación secundaria contextual dentro de cada sección.

HEADER [Logo] [Secciones principales] [CTA] CONTENIDO [Subnavegación de la sección] [Contenido principal]
  • Útil para sitios con pocas secciones principales y muchos contenidos internos.
  • Ayuda a mantener la sensación de “estoy dentro de X sección”.
  • Funciona muy bien combinada con breadcrumbs en profundidad.
Mobile

Bottom navigation / pestañas

3–5 secciones clave accesibles con el pulgar, siempre visibles.

[Contenido principal] [Home] [Buscar] [Crear] [Favoritos] [Perfil]
  • Ideal para apps y webs móviles con uso frecuente en movimiento.
  • Cada icono debe representar una sección estable, no acciones puntuales.
  • Evita más de 5 elementos para no forzar iconos crípticos.
Mixto

Menú hamburguesa + accesos directos

Menú oculto para navegación completa y accesos directos en la parte visible a las acciones o secciones más usadas.

  • Bueno para productos con muchas secciones que no caben en una barra fija.
  • Conviene acompañarlo de breadcrumbs o indicación de contexto.
  • Los accesos directos deben responder a lo que la gente más hace, no a lo que la empresa quiere destacar.

Patrones de búsqueda y filtros

Cómo ayudar a encontrar algo concreto dentro de listas largas o catálogos complejos.

Búsqueda

Barra de búsqueda prominente

Campo de búsqueda visible, preferiblemente centrado o muy cercano al contenido.

[Header] [Barra de búsqueda] [Resultados / listados]
  • Ideal cuando la búsqueda es el comportamiento principal (documentos, productos, ayuda).
  • Funciona bien con sugerencias rápidas y búsqueda reciente.
  • Conviene mostrar resultados parciales mientras se escribe si el rendimiento lo permite.
Filtros

Filtros laterales / de columna

Filtros siempre visibles en una columna lateral, con resultados actualizándose al aplicar cambios.

[Filtros] | [Resultados]
  • Muy útil en escritorio para catálogos complejos (ecommerce, listados de propiedades, etc.).
  • Permite ver criterios y resultados a la vez, reduciendo la sensación de “caja negra”.
  • En móvil suele transformarse en panel desplegable (“Filtros”).
Mobile

Panel de filtros desplegable

Botón de “Filtros” que abre un panel o modal con todos los criterios, aplicables de una vez.

  • Evita recargar la pantalla principal en móviles pequeños.
  • Conviene mostrar chips o etiquetas con los filtros activos a la vista.
  • Importante ofrecer un botón claro de “Borrar filtros”.

Patrones de onboarding

Cómo acompañar los primeros minutos sin convertir la experiencia inicial en un tutorial eterno.

Primer uso

Onboarding por pasos cortos

Secuencia de 2–4 pantallas que explican la propuesta de valor y piden solo lo imprescindible.

  • Ideal para apps que necesitan configurar lo básico antes de funcionar.
  • Cada pantalla debe tener un mensaje único y claro.
  • Debe ser fácil saltarlo o volver a verlo más adelante.
Contextual

Onboarding dentro de la interfaz

Pequeños tooltips o pistas que aparecen junto a las funciones clave la primera vez que se usan.

  • Reduce la sobrecarga inicial frente a los tours completos de producto.
  • Funciona bien en paneles complejos, donde no todo se usa desde el primer día.
  • Debe ofrecer siempre una forma clara de descartar o revisar más tarde.
Retorno

Retomar tareas interrumpidas

Cuando la persona vuelve a la app, mostrar un acceso directo para seguir donde lo dejó.

  • Especialmente útil en mobile, donde las interrupciones son constantes.
  • Puede combinarse con un resumen del estado del proceso (“Te quedaste en el paso 2 de 4”).
  • Ayuda a reducir la frustración y la repetición de pasos.

Patrones de listados y páginas de detalle

Cómo pasar de ver “muchos elementos” a centrarse en uno sin perder el contexto.

Listado

Lista con tarjetas resumidas

Cada elemento se presenta como una tarjeta con la información clave y un acceso a más detalle.

[Tarjeta 1: título + meta + CTA] [Tarjeta 2: título + meta + CTA] [Tarjeta 3: título + meta + CTA]
  • Útil para proyectos, servicios, posts, productos y recursos variados.
  • La tarjeta debe permitir decidir si merece la pena entrar al detalle.
  • Conviene mantener siempre el mismo orden interno de información.
Detalle

Página de detalle con retorno claro

Vista centrada en un solo elemento, con botón o enlace evidente para volver al listado.

[Breadcrumb / Volver a listado] [Título del elemento] [Meta-información] [Contenido principal] [Acciones principales]
  • Evita que la persona se sienta “atrapada” en la página de detalle.
  • Funciona bien con navegación a elementos anterior / siguiente.
  • En mobile, el botón de “volver” debe estar alineado con los gestos del sistema.
Panel

Lista + detalle en dos columnas

Patrón típico de panel o aplicación de escritorio: lista a la izquierda, detalle a la derecha.

[Lista de elementos] | [Detalle del elemento seleccionado]
  • Muy útil cuando se trabaja con muchos elementos de forma intensiva.
  • Reduce los cambios de pantalla y acelera el trabajo experto.
  • En tablets, es un patrón intermedio muy cómodo.

Patrones de formularios

De un campo aislado a flujos complejos de varios pasos: cómo pedir datos sin bloquear la experiencia.

Simple

Formulario de una sola pantalla

Conjunto de campos en una sola vista, indicado para tareas de baja complejidad.

  • Funciona bien para contacto, suscripción, registros sencillos.
  • Los campos deben agruparse visualmente por tipo (datos personales, mensaje, etc.).
  • Importante mostrar errores pegados al campo y no solo arriba del formulario.
Flujo

Formulario multistep

Secuencia de pasos con indicador de progreso (1/3, 2/3, 3/3).

Paso 1 · Datos básicos Paso 2 · Detalles Paso 3 · Revisión y confirmación
  • Adecuado para procesos largos (registro avanzado, compra compleja, solicitud oficial).
  • Cada paso debe tener un propósito claro y un título propio.
  • Conviene permitir volver a pasos anteriores sin perder la información introducida.
Inline

Edición en contexto

La información se edita en el mismo lugar donde se visualiza, sin abrir pantallas nuevas.

  • Ideal para paneles de usuario y administración.
  • Reduce clics y favorece microinteracciones rápidas.
  • Es importante clarificar qué está en modo edición y qué está guardado.

Patrones de feedback y estados vacíos

Mensajes, indicadores y pantallas que acompañan la acción: loading, éxito, error y “aún no hay datos”.

Loading

Loading con contexto

No basta con un spinner: conviene explicar qué se está haciendo y, si se puede, cuánto falta.

  • Ideal acompañarlo de texto: “Estamos preparando tus resultados”.
  • En cargas largas, mostrar progreso aproximado o pasos completados.
  • Evitar bloquear toda la interfaz si no es necesario.
Vacío

Estados vacíos accionables

Cuando aún no hay contenido, la pantalla explica qué se puede hacer y ofrece un CTA claro.

[Título: aún no hay X] [Texto breve explicando por qué] [Botón: crear / añadir / configurar algo]
  • Funciona muy bien en listas, dashboards y bibliotecas de contenido.
  • Evita pantallas vacías que parecen errores de carga.
  • Es un espacio ideal para microcopy útil, no para chistes internos.
Feedback

Confirmaciones discretas

Mensajes breves que confirman que una acción ha funcionado sin interrumpir el flujo.

  • Barras o toasts que aparecen y desaparecen tras unos segundos.
  • Deben ser legibles, pero no ocupar toda la pantalla.
  • En acciones críticas, conviene mantener un registro (historial, actividad reciente).

Uso docente y práctico

Cómo trabajar los patrones de UX

Estos patrones están pensados para servir como lenguaje común entre diseño, desarrollo y docencia. En lugar de decir “la página esa con muchos productos”, puedes decir “el listado con tarjetas y filtros laterales”.

Algunas formas de utilizarlos:

  • Analizar webs y apps conocidas e identificar qué patrones están utilizando (y si los aplican bien o no).
  • Escoger un patrón (por ejemplo, formulario multistep) y pedir al alumnado que lo adapte a contextos distintos: onboarding, checkout, solicitud, etc.
  • Revisar un proyecto propio para ver si está reinventando la rueda donde un patrón estándar funcionaría mejor.

Como en el resto de KIT UX UI: entra, copia, adapta a tu contexto y, si te sirve, puedes mencionarlo en tus clases, documentación o portfolios cuando tenga sentido.