≡En resumen
- Un patrón de interfaz describe un problema recurrente y una solución probada, no un diseño cerrado que copiar píxel a píxel.
- Los patrones más útiles se agrupan en navegación, entrada de datos, feedback y estados (carga, vacío, error, éxito).
- Se diferencian de un componente (la pieza de código) y de una guía de interfaz (las reglas de una plataforma).
- Los dark patterns son patrones diseñados para engañar; el art. 25 de la DSA y la normativa de consumo los prohíben.
- Elegir un patrón empieza por la tarea del usuario y termina probándolo con usuarios reales.
01 ¿Qué son los user interface patterns?
La idea de «patrón» viene de la arquitectura. Christopher Alexander publicó en 1977 A Pattern Language, un catálogo de soluciones recurrentes para diseñar ciudades y edificios. La ingeniería de software la adoptó en 1994 con el libro Design Patterns de la llamada «Banda de los Cuatro», y Jenifer Tidwell la llevó al diseño de interacción con Designing Interfaces (2005), que sigue siendo la obra de referencia.
02 Patrón, componente, guía de interfaz y sistema de diseño: diferencias
Son conceptos que se mezclan en cualquier conversación de diseño. Un patrón es conocimiento abstracto; un componente es su implementación concreta; las guías de interfaz de usuario fijan cómo debe comportarse todo en una plataforma, y un sistema de diseño reúne componentes, patrones y reglas de una empresa en un único lugar.
| Término | Qué es | Ejemplo |
|---|---|---|
| Patrón de interfaz | Solución abstracta a un problema recurrente de interacción | «Mostrar el progreso en un proceso de varios pasos» |
| Componente | Pieza de interfaz diseñada y programada, lista para usar | El componente Stepper de tu librería de React |
| Guía de interfaz | Reglas de una plataforma o marca sobre cómo usar patrones y componentes | Human Interface Guidelines de Apple, Material Design de Google |
| Sistema de diseño | Conjunto documentado de principios, tokens, componentes y patrones de una organización | GOV.UK Design System, del Gobierno británico |
03 Patrones de navegación
Barra de navegación superior
Las secciones principales siempre visibles en escritorio. Funciona hasta unas siete opciones; más allá conviene agrupar en un megamenú.
Barra de pestañas inferior
El estándar en apps móviles: de tres a cinco destinos al alcance del pulgar. Evita esconder las funciones clave en un menú.
Menú hamburguesa
Ahorra espacio en móvil, pero lo que se esconde se usa menos. Resérvalo para secciones secundarias.
Migas de pan
Indican dónde está el usuario en una jerarquía profunda y le dejan subir de nivel con un clic. Típicas de tiendas y documentación.
Paginación, «cargar más» o scroll infinito
Paginación para buscar y comparar; scroll infinito para consumir contenido sin objetivo concreto; «cargar más» como término medio.
Búsqueda con autocompletado
Imprescindible con catálogos grandes: sugiere mientras se escribe y tolera errores ortográficos.
Las migas de pan o breadcrumb son además un buen ejemplo de patrón que ayuda a la vez a las personas y a los buscadores, porque explicitan la jerarquía de la web.
04 Patrones de entrada de datos y formularios
| Patrón | Problema que resuelve | Error frecuente |
|---|---|---|
| Validación en línea | El usuario descubre los errores al final y se frustra | Marcar error mientras aún está escribiendo |
| Etiqueta siempre visible | El placeholder desaparece y no recuerda qué pedía el campo | Usar el placeholder como única etiqueta |
| Asistente por pasos (wizard) | Un formulario largo intimida | No indicar cuántos pasos faltan |
| Selector de fecha | Formatos de fecha ambiguos | Obligar a usar un calendario para la fecha de nacimiento |
| Autocompletado de dirección | Escribir la dirección completa cuesta y genera errores | No permitir la escritura manual cuando la sugerencia falla |
| Valores por defecto inteligentes | Decisiones repetitivas | Preseleccionar opciones que benefician a la empresa y no al usuario |
05 Patrones de feedback y estados: carga, vacío, error y éxito
Cada pantalla tiene más estados de los que se dibujan en el diseño feliz. Diseñarlos todos es lo que separa una interfaz profesional de una que parece rota en cuanto algo no va según lo previsto.
Estado de carga
Skeleton screens (siluetas grises del contenido) para cargas cortas; barra de progreso con porcentaje cuando la espera es larga y medible.
Estado vacío (empty state)
La primera vez que el usuario abre una lista sin datos: explica qué verá ahí y ofrece la acción para empezar («Crea tu primer proyecto»).
Estado de error
Qué ha fallado, si es culpa del usuario o del sistema, y un botón para reintentar. Nunca un código técnico a secas.
Confirmación y deshacer
Un aviso breve (toast) tras una acción y la opción de deshacer, preferible a un diálogo de «¿Estás seguro?» para acciones reversibles.
Estado parcial
Cuando solo hay algunos datos: muestra lo que hay y deja claro que falta información.
Un autónomo abre por primera vez la sección «Facturas». Mal diseño: una tabla vacía con cabeceras y nada más. Buen diseño: una ilustración sencilla, la frase «Aquí verás las facturas que emitas», un botón «Crear mi primera factura» y un enlace secundario «Importar desde Excel». El estado vacío se convierte en el primer paso del onboarding.
06 Dark patterns: los patrones que engañan y la ley que los prohíbe
Un dark pattern o patrón engañoso es un patrón de interfaz diseñado para que el usuario haga algo que no quería: comprar de más, aceptar más datos de los necesarios o no poder darse de baja. El diseñador Harry Brignull acuñó el término en 2010 y lanzó un catálogo público que hoy se llama Deceptive Design. Un pop-up que vuelve cada vez que cierras, o un botón «No, prefiero pagar más» para rechazar una oferta, son ejemplos de manual.
| Tipo | Cómo funciona | Ejemplo |
|---|---|---|
| Obstrucción («roach motel») | Entrar es fácil; salir, muy difícil | Alta online en un clic y baja solo por teléfono |
| Colado en la cesta | Se añaden productos o seguros sin pedirlo | Seguro de viaje preseleccionado en el checkout |
| Confirmshaming | Culpabilizar al que rechaza | «No, no me importa mi salud» |
| Urgencia o escasez falsas | Contadores o avisos de stock que no son reales | «Solo quedan 2» que nunca cambia |
| Interfaz sesgada | Una opción destaca y la otra casi no se ve | «Aceptar todo» en color y «Rechazar» en gris claro |
| Insistencia | Pedir una y otra vez lo que ya se ha rechazado | Ventana para activar notificaciones en cada visita |
| Costes ocultos | Cargos que aparecen al final del proceso | Gastos de gestión en el último paso del pago |
07 Cómo elegir y aplicar un patrón de interfaz
-
1
Define la tarea y el contexto
Qué intenta hacer el usuario, en qué dispositivo y con qué frecuencia. «Filtrar 2.000 productos en móvil» pide un patrón distinto que «filtrar 20 en escritorio».
-
2
Busca el patrón establecido
Revisa las guías de la plataforma (Material Design, Human Interface Guidelines) y sistemas de diseño públicos antes de inventar nada.
-
3
Comprueba qué hacen tus usuarios en otras webs
Si tu público compra en grandes marketplaces, esperará sus patrones de carrito y filtros.
-
4
Adapta sin romper la convención
Cambia el estilo, no el comportamiento. Un icono de lupa que no abre la búsqueda confunde.
-
5
Diseña todos los estados
Carga, vacío, error, éxito y sin conexión. Y revisa el contraste y el uso con teclado.
-
6
Prueba y documenta
Valida con usuarios o con un análisis heurístico y añade el patrón a tu librería para que el equipo lo reutilice.
Aplicar patrones con criterio es buena parte del trabajo de un diseño de interfaces web UI y UX bien hecho: se nota en menos consultas al soporte y en menos abandonos. Los patrones también tienen que cumplir la accesibilidad web que exige la ley europea desde 2025, y un análisis heurístico es la forma más rápida de detectar dónde los estás usando mal.
08 Dónde encontrar librerías de patrones de interfaz
- ✓Material Design 3 (Google): componentes y patrones para Android y web.
- ✓Human Interface Guidelines (Apple): patrones para iOS, iPadOS, macOS y visionOS.
- ✓GOV.UK Design System: patrones de formularios y servicios públicos probados con usuarios reales.
- ✓Deceptive Design (Harry Brignull): catálogo de patrones engañosos para saber qué evitar.
- ✓La librería de componentes de tu propio producto: el mejor patrón es el que ya conocen tus usuarios.
Preguntas frecuentes sobre User interface patterns
Son soluciones de diseño reutilizables para problemas de interacción que se repiten, como navegar, rellenar formularios o mostrar que algo se está cargando. Describen el problema, el contexto y la solución, no un diseño concreto.
Los más usados se agrupan en patrones de navegación, de entrada de datos y formularios, de feedback y estados (carga, vacío, error, éxito) y de presentación de contenido, como tarjetas, listas o tablas.
El patrón es la solución abstracta a un problema; el componente es su implementación concreta, diseñada y programada. Un mismo patrón puede tener componentes distintos en cada producto.
Es un patrón de interfaz diseñado para que el usuario haga algo que no quería, como comprar de más, aceptar cookies o no poder darse de baja. El término lo acuñó Harry Brignull en 2010.
Sí, en muchos casos. El art. 25 de la DSA los prohíbe en plataformas en línea desde el 17 de febrero de 2024, y la normativa de prácticas comerciales desleales y el RGPD cubren prácticas como los costes ocultos, la urgencia falsa o el consentimiento forzado.
En las guías de Material Design y de Apple, en sistemas de diseño públicos como GOV.UK Design System y en libros como «Designing Interfaces», de Jenifer Tidwell.
Sí, en el aspecto visual. Lo que conviene respetar es el comportamiento que el usuario espera; si cambias cómo funciona, pierdes la ventaja de que ya lo conozca.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗