Experiencia de usuario · UX

Patrones de UX listos para copiar

Arquitectura de información, flujos de usuario, wireframes esenciales, microcopy, heurísticas y patrones de interacción pensados para docencia y proyectos reales.

Cómo usar esta página de UX

La idea es que puedas abrir un bloque, enseñar el patrón en clase o en equipo y pedir que lo apliquen a un proyecto concreto sin perderte en teoría infinita.

Esta sección recopila recursos mínimos de UX para construir experiencias coherentes: cómo ordenas la información, por dónde entra la persona usuaria, qué ve primero, qué le pides y cómo se lo explicas.

Los ejemplos no sustituyen a una investigación profunda, pero sí sirven como guía para mejorar un proyecto, preparar una clase o justificar decisiones de diseño sin tener que construir cada esquema desde cero.

  • Empieza por la parte que más flojea en tu producto (estructura, flujos, textos…).
  • Usa los patrones como plantillas: copia, adapta y borra lo que no necesites.
  • Combínalo con los kits de UI y de accesibilidad para cerrar el círculo.

Bloques principales de UX

Cada tarjeta abre un bloque con ejemplos listos para usar: esquemas, flujos, wireframes y patrones de contenido.

Arquitectura de información

Cómo ordenar contenidos, crear sitemaps básicos y definir niveles de navegación que no mareen. Ideal para webs pequeñas y medianas.

Abrir arquitectura →

Flujos de usuario

Entradas y salidas típicas: registro, onboarding, compra, reserva, descarga. Flujos dibujados de forma simple para entender qué pasos sobran.

Abrir flujos →

Wireframes esenciales

Esquemas lo-fi de páginas clave: home, landing, ficha de producto/servicio, formulario y dashboard sencillo, listos para proyectar y redibujar.

Abrir wireframes →

Microcopy & UX Writing

Textos cortos que sostienen la experiencia: botones, mensajes de error, estados vacíos, confirmaciones y llamadas a la acción claras.

Abrir microcopy →

Heurísticas aplicadas

Nielsen y compañía, pero aterrizado: ejemplos de pantallas con problemas y cómo corregirlos usando heurísticas como checklist práctico.

Abrir heurísticas →

Patrones de interacción

Listas, filtros, wizards, búsqueda, onboarding, estados vacíos y notificaciones. Cómo combinarlos para que la experiencia tenga sentido de principio a fin.

Abrir patrones →

Investigación rápida

Guiones básicos de entrevista, test de usabilidad ligero y checklist de preguntas para entender mejor el contexto antes de diseñar.

Abrir research →

Uso docente y práctico

Cómo trabajar con estos recursos de UX

Esta página está pensada para que puedas abrir un bloque de UX en clase, enseñar cómo está construido y pedir al grupo que lo adapte a un proyecto concreto: una web real, un prototipo en Figma o un sistema de diseño en construcción.

Puedes usarla en sesiones cortas o en proyectos de varias semanas:

  • En una sesión rápida, escoge un bloque (por ejemplo, flujos de usuario) y revisad juntos el recorrido actual de una web, comparándolo con los patrones.
  • Para trabajos más largos, combina arquitectura de información, wireframes y microcopy para que el alumnado construya una experiencia completa antes de meterse en la capa visual.
  • También puedes convertir estos bloques en una rúbrica de evaluación de UX: ¿la estructura tiene sentido?, ¿el flujo está claro?, ¿los textos ayudan o confunden?

Como siempre en KIT UX UI: entra, copia y adapta. Si te sirve para tus clases o proyectos y quieres mencionarlo, mejor todavía.