Diseño web y UX¶

El diseño web constituye una disciplina fundamental en el desarrollo de entornos digitales. Su finalidad no es únicamente estética, sino también funcional, en tanto que busca optimizar la interacción del usuario con los contenidos y servicios ofrecidos. La experiencia de usuario (UX) y la interfaz de usuario (UI) son los ejes principales que guían la toma de decisiones en materia de organización, distribución y estilo visual. Este documento expone los principios básicos de diseño web que deben considerarse antes de abordar cuestiones técnicas avanzadas en siguientes documentos.

1. Principios básicos¶

Como principio más elemental del diseño web podríamos citar el principio KISS (Keep It Simple, Stupid). Como podemos imaginar por su nombre, sintetiza la importancia de evitar la complejidad innecesaria. Se deben identificar las necesidades del cliente, y priorizar la utilidad sobre la apariencia. De este modo, el diseño se enfoca en la claridad más que en la ornamentación.

Además de este principio básico, existen otras consideraciones elementales que debemos tener en cuenta antes de afrontar cualquier diseño web. Profundizaremos sobre algunas de ellas a continuación, pero las citamos brevemente:

Los contenidos prioritarios deben ocupar posiciones estratégicas en la página
Se debe mantener una coherencia o consistencia en la ubicación de los elementos y el estilo
Los colores que escojamos constituyen un recurso expresivo que influyen en la percepción y en las sensaciones que transmite la web.
El acceso a contenidos digitales se produce en una amplia diversidad de dispositivos, por lo que es esencial que la web se visualice correctamente en todos ellos (diseño adaptativo).

2. Jerarquía visual y organización del contenido¶

La jerarquía visual es la manera en que los elementos de una interfaz se organizan y presentan para indicar al usuario qué es lo más importante y en qué orden debe procesar la información. Una jerarquía bien diseñada permite:

Guiar la atención del usuario
Facilitar la comprensión del contenido
Favorecer la interacción

El cerebro humano procesa la información siguiendo patrones visuales predecibles. Por ello, resulta imprescindible establecer una jerarquía clara de los elementos en nuestra web.

2.1. Principios fundamentales de jerarquía visual¶

A la hora de definir los distintos elementos que conforman nuestra página, es recomendable seguir ciertos principios. Por un lado, en cuanto a tamaño y proporción:

Los elementos más grandes llaman más la atención
Los títulos deben ser más grandes que los subtítulos, y estos más grandes que el texto corriente
Los botones principales de acción (CTA) deben destacar en tamaño frente a enlaces secundarios

En lo que respecta al espaciado y la proximidad:

Elementos cercanos entre sí se perciben como un grupo
El espacio en blanco (negative space) separa bloques y da aire al diseño
Mantener alineaciones consistentes transmite orden y profesionalidad
Una retícula (grid system) ayuda a organizar el contenido de forma armónica.
Evitar la dispersión: los ojos deben poder seguir un recorrido lógico.

En cuanto a la tipografía e iconografía:

Definir niveles jerárquicos correctos: h1 para títulos principales, y h2/h3 para secciones y subsecciones.
Las negritas o cursivas deben usarse sólo para destacar ideas clave
Emplear iconos gráficos para reforzar ciertas jerarquías, pero no abusar de ellos
Las imágenes o gráficos se pueden emplear como puntos de anclaje, para dirigir la vista a un bloque determinado.

2.2. Patrones de lectura¶

Los estudios de seguimiento ocular (eye-tracking) han identificado patrones comunes:

Patrón en F: los usuarios leen primero en horizontal la parte superior, luego un poco más abajo y después escanean verticalmente el lateral izquierdo. Muy útil en páginas de contenido largo (blogs, artículos...)
Patrón en Z: recorrido en diagonal de izquierda a derecha, de arriba abajo. Es común en landing pages con poco texto
Patrón de capas o bloques: exploración rápida de módulos visuales diferenciados. Frecuente en diseños con tarjetas (cards)

La ubicación de menús, títulos, CTAs y elementos clave debe alinearse con estos patrones para aprovechar la atención natural del usuario.

2.3. Algunas buenas prácticas¶

A modo de resumen, indicamos a continuación algunas buenas prácticas que debemos tener en cuenta:

Los contenidos que consideremos esenciales deben ocupar posiciones estratégicas en la página, tales como el encabezado o el área central. Los títulos y subtítulos deben ayudar a identificar rápidamente de qué trata la página.
Una navegación clara es un requisito indispensable para la usabilidad. El menú principal debe reflejar la estructura lógica del sitio y organizar la información en categorías comprensibles. En este apartado, también es esencial ofrecer retroalimentación al usuario: destacar la sección activa, indicar estados de los botones o mostrar rutas de navegación (también llamadas breadcrumbs, migas de pan).
También es importante la eficiencia, minimizar el número de pasos que debe dar el usuario para alcanzar lo que está buscando.
Para no sobrecargar mucho el contenido, se recomienda emplear un máximo de 2-3 niveles jerárquicos visibles (título principal, secciones y subsecciones), y evitar que varios elementos compitan por la atención al mismo tiempo.

3. Psicología del color y elección cromática¶

El color constituye un recurso expresivo que influye en la percepción y en la emoción. La coherencia cromática debe estar alineada con la identidad visual de la marca o del proyecto. Veremos a continuación qué colores son adecuados para nuestra web y cómo combinarlos en base a ciertos criterios.

3.1. Asociaciones psicológicas¶

Aunque la interpretación del color puede variar según el contexto cultural, existen asociaciones generales que se aplican en diseño web:

Azul: transmite confianza, seguridad, profesionalidad. Muy usado en bancos, empresas tecnológicas y servicios de salud.
Rojo: asociado a energía, pasión, urgencia. Recomendable para llamadas a la acción (CTAs) o promociones.
Verde: simboliza naturaleza, crecimiento, salud y sostenibilidad. Común en temas ecológicos y de bienestar.
Amarillo: sugiere optimismo, creatividad, juventud. Puede captar la atención, pero en exceso resulta fatigante.
Naranja: representa dinamismo, entusiasmo y cercanía. Útil en e-commerce y botones de conversión.
Violeta: relacionado con lujo, espiritualidad y creatividad. Usado en marcas premium o artísticas.
Negro: asociado a elegancia, sobriedad y poder. Ideal para transmitir exclusividad, pero conviene equilibrarlo.
Blanco: simboliza pureza, simplicidad y claridad. Es el color base más frecuente en interfaces minimalistas.
Gris: neutralidad, profesionalidad, equilibrio. Muy útil como color secundario de soporte.

3.2. Paletas habituales¶

El contraste cromático favorece la diferenciación de elementos y mejora la legibilidad. En este sentido, se recomienda utilizar una paleta reducida de entre 2 y 4 colores principales para preservar la armonía. Sin embargo, podemos encontrarnos distintos tipos de paletas:

Monocromáticas: se basan en un único color con variaciones de luminosidad y saturación. Por ejemplo, diferentes tonos de azul para un sitio corporativo. Tienen la ventaja de ofrecer una gran armonía y simplicidad.
Análogas: usan colores contiguos en la rueda cromática. Por ejemplo, verde, verde-azulado y azul. Generan continuidad y suavidad visual, y son útiles en diseños relajados y naturales.
Complementarias: basadas en colores opuestos en la rueda cromática, como el azul y el naranja. Crean contraste fuerte, ideal para destacar elementos clave. Sin embargo, requiere cierta calibración para no resultar demasiado estridente.
Triádicas: utilizan tres colores equidistantes en la rueda cromática, como por ejemplo rojo, amarillo y azul. Generan así una diversidad cromática equilibrada; son recomendables para sitios creativos o educativos.
Neutras + acento: se utilizan predominantemente colores neutros (blanco, negro, gris) con un color de acento llamativo (por ejemplo, verde lima). Son muy efectivas en interfaces modernas y minimalistas.

3.3. Criterios prácticos de elección¶

A continuación mostramos algunos criterios prácticos para decidir qué tipo de paleta o colores escoger:

Legibilidad ante todo: asegurar contraste suficiente entre texto y fondo (revisar con herramientas de accesibilidad como WCAG).
Rol de cada color: asignar una función concreta a cada color. Por ejemplo, azul para enlaces, rojo para alertas, verde para confirmaciones...
Consistencia de marca: la paleta debe alinearse con logotipo, identidad corporativa y valores del proyecto.
Número de colores: lo ideal es entre 2 y 4 colores principales, más una gama de grises o neutros de soporte.

En webs como coolors.co puedes generar y visualizar distintos tipos de paletas de colores que pueden resultar adecuadas para tus sitios web.

Ejercicio 1

Dada la siguiente imagen de una web, discutid en clase (de forma global, o haciendo grupos) las principales deficiencias que le veis respecto a los puntos que hemos visto hasta ahora (jerarquía de contenidos y uso de colores).

Ejercicio 2

Vamos ahora con este otro caso de una web algo más real. Analizad el diseño en clase y buscad las deficiencias que pueda tener.

Ejercicio 3

Clasifica las siguientes paletas de colores según la tipología que hemos visto. Una de ellas tiene un error que convendría corregir. Indica cuál crees que es

Paleta 1

Paleta 2

Paleta 3

Paleta 4

Paleta 5

4. Adaptabilidad y diseño responsive¶

Dado que actualmente podemos acceder al contenido web desde multitud de dispositivos (móviles, tablets, portátiles, televisores, etc), debemos asegurarnos de que nuestra web se visualiza correctamente en todos ellos. La estrategia mobile first garantiza la accesibilidad inicial en pantallas pequeñas para, a partir de ahí, establecer otros diseños alternativos para pantallas más grandes.

Se recomienda el uso de rejillas fluidas y unidades relativas para asegurar una correcta adaptación a múltiples resoluciones. Asimismo, dado que a menudo consultamos páginas desde lugares remotos y con conexiones no del todo fluidas, es imprescindible optimizar recursos gráficos e implementar técnicas que favorezcan tiempos de carga reducidos.

5. Nociones sobre accesibilidad¶

La accesibilidad web consiste en garantizar que cualquier persona, independientemente de sus capacidades físicas, sensoriales o cognitivas, pueda percibir, comprender, navegar e interactuar con un sitio web. Las directrices de referencia son las WCAG (Web Content Accessibility Guidelines). Estas pautas se estructuran en cuatro principios fundamentales:

Contenido perceptible: la información debe poder ser percibida por todos los usuarios
Interfaz operable: los elementos interactivos deben poder manejarse con distintos dispositivos de entrada (ratón, teclado, lector de pantalla, etc.)
Contenido comprensible: la interfaz y el contenido deben ser entendibles
Robusto: el contenido debe funcionar de forma fiable en diferentes navegadores y tecnologías de asistencia

5.1. Principales pautas de accesibilidad web¶

Analizaremos a continuación las principales pautas que podemos aplicar en nuestras webs para hacerlas accesibles.

Por un lado, existen ciertas pautas relativas al contenido perceptible:

Colocar texto alternativo (atributo alt) en imágenes, y describir brevemente su contenido, para que los lectores de pantalla lo puedan leer en el caso de personas que no puedan verlas.
Añadir subtítulos y transcripciones para vídeos o audios.
Definir un contraste de color adecuado para los lectores de pantalla. Se recomienda un contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande, según WCAG. Veremos a continuación algunas herramientas que nos ayuden a verificar este contraste.
Tener una correcta estructura semántica, es decir, un uso correcto de encabezados (h1, h2, etc.)y secciones para jerarquizar el contenido.

En lo que respecta al principio de interfaz operable, podemos tener en cuenta estos aspectos:

Todo el sitio debe poder recorrerse sin necesidad de ratón, mediante navegación por teclado (por ejepmlo, con la tecla TAB)
Las zonas clicables deben tener un tamaño suficiente (botones, enlaces...) incluso en pantallas táctiles
Evitar contenido parpadeante o intermitente para no provocar crisis epilépticas fotosensibles
Evitar límites de tiempo excesivos en formularios o procesos

Respecto al principio de contenido comprensible, podemos centrarnos en:

Emplear lenguaje claro y conciso, y evitar tecnicismos innecesarios
Indicar el idioma del documento (<html lang="es">) y cambios de idioma dentro del texto (atributo lang en ciertas etiquetas)

<html lang="es">
    ...
    <p>Este artículo incluye un término en <span lang="en">design system</span>.</p>
    <p lang="en">This paragraph is entirely in English.</p>
    <p>La ponencia se titula <em lang="en">Accessibility by Design</em></p>
...

Mostrar mensajes de error comprensibles al validar formularios, explicando qué está mal o qué hay que corregir.
Mantener menús y elementos interactivos en las mismas posiciones (consistencia de navegación)

Finalmente, en lo que respecta a la robustez técnica, podemos tener en cuenta estos principios:

Uso correcto de etiquetas según su función (nav, main, footer), para que la semántica sea correcta.
Compatibilidad con lectores de pantalla (uso de atributos ARIA solo cuando sea necesario)
Correcta estructura de formularios. Por ejemplo, empleando etiquetas label asociadas a cada campo

5.2. Herramientas para comprobar la accesibilidad¶

Existen diversas herramientas que podemos emplear para validar la accesibilidad de nuestra web. Comentaremos aquí algunas de las más habituales:

WAVE: extensión gratuita que aceptan diversos navegadores, y que marca errores de accesibilidad y avisos en la página.
Lighthouse: herramienta integrada en Chrome que genera informes de accesibilidad
AXE DevTools: plugin para Chrome y Firefox
Además, podemos emplear herramientas adicionales para comprobar algunos aspectos, como lectores de pantalla (NVDA para Windows, VoiceOver para Mac), o comprobadores de contraste como Contrast Checker de WebAIM.