Guía de Diseño UX/UI

UX (User Experience) se centra en como se siente el usuario al interactuar con tu web: es facil de usar? encuentra lo que busca? consigue su objetivo? UI (User Interface) se centra en la parte visual: colores, tipografías, iconos y elementos gráficos.

Un buen UX puede existir con un UI mediocre, pero no al reves. Primero diseña la experiencia (flujos, jerarquia, interacciones) y luego aplica el diseño visual. Muchas webs bonitas fracasan porque no resuelven las necesidades reales del usuario.

Los principios de UX más importantes son: claridad (el usuario entiende que puede hacer), consistencia (los elementos se comportan igual en toda la web), feedback (la web responde a las acciones del usuario) y eficiencia (el usuario consigue su objetivo con el mínimo esfuerzo).

La regla de los 3 clics dice que cualquier información importante debe ser accesible en máximo 3 clics. La ley de Hick establece que a más opciones, más tiempo tarda el usuario en decidir. Simplifica la navegación y reduce las opciones en cada pantalla.

Una paleta de colores coherente transmite profesionalidad. Usa un color primario para acciones principales (botones, enlaces), un secundario para acentos y tonos neutros para fondos y texto. Limita la paleta a 3-5 colores para mantener la coherencia.

La tipografía es el 90% del diseño web. Elige máximo 2 familias tipográficas: una para titulos (display) y otra para cuerpo (body). El tamaño mínimo del texto debe ser 16px para buena legibilidad. Usa la escala tipográfica para crear jerarquia visual clara.

La navegación principal debe ser simple y predecible. Máximo 7 elementos en el menu principal (regla de Miller). Usa etiquetas claras y descriptivas, no creativas: "Servicios" en vez de "Lo que hacemos". Incluye un buscador si tu web tiene más de 50 páginas.

La arquitectura de información organiza el contenido de forma lógica. Usa card sorting para descubrir como agrupan la información tus usuarios. Crea breadcrumbs para que el usuario siempre sepa donde esta y pueda navegar hacia atras facilmente.

Los formularios son el punto donde el visitante se convierte en lead o cliente. Minimiza los campos: cada campo adicional reduce las conversiones un 5-10%. Pide solo la información esencial. Para un formulario de contacto, nombre, email y mensaje son suficientes.

Usa validación en tiempo real para que el usuario corrija errores inmediatamente. Muestra mensajes de error claros y específicos ("El email no es válido" en vez de "Error"). Agrupa campos relacionados y usa labels flotantes para ahorrar espacio sin perder claridad.

La accesibilidad web no es opcional. En España, la Ley 11/2023 exige accesibilidad WCAG 2.1 nivel AA para webs del sector publico y grandes empresas. Además, hacer tu web accesible amplia tu audiencia y mejora el SEO.

Los básicos de accesibilidad incluyen: contraste de color suficiente (ratio 4.5:1 para texto), texto alternativo en todas las imágenes, navegación completa por teclado, estructura de encabezados correcta y formularios con labels asociados. Usa herramientas como WAVE o axe para auditar la accesibilidad.