Made on
Tilda
User Interface · Categoría: Diseño web y UX
La UI (User Interface o interfaz de usuario) es la parte visual con la que interactúa una persona en una web o aplicación: botones, menús, textos, colores, tipografías e iconos. Una UI accesible necesita contraste suficiente: las pautas WCAG piden al menos 4,5:1 entre el texto normal y el fondo, y 3:1 para el texto grande (W3C).
La UI no es la UX: la UI es lo que se ve y se toca; la UX, la experiencia completa que la persona vive al usarlo.
Comprobador de contraste WCAG
La UI la forman los elementos que el usuario ve y usa: tipografía, colores, botones, formularios, menús, iconos, imágenes, espaciados y los estados de cada elemento —normal, al pasar el ratón, pulsado, desactivado—.
Cada elemento comunica algo: un botón grande y de color de acento dice «esto es lo importante»; un enlace gris pequeño, «esto es secundario». Una buena UI ordena la atención del usuario hacia la acción principal.
El diseño UI decide también los estados de error y de éxito: qué ve el usuario cuando un formulario falla o cuando su mensaje se ha enviado. Esos momentos pequeños son los que más confianza construyen o destruyen.
El contraste de color importa porque determina si el texto se puede leer: las pautas WCAG del W3C exigen una relación de al menos 4,5:1 para el texto normal y 3:1 para el texto grande en el nivel AA (W3C).
Un gris claro sobre blanco puede parecer elegante en el monitor del diseñador y ser ilegible en un móvil al sol. El comprobador de esta página calcula la relación de contraste entre dos colores.
Un sistema de diseño es el conjunto de reglas y componentes reutilizables de una interfaz —colores, tipografías, tamaños, botones, tarjetas— que hace que todas las páginas se vean y se comporten igual.
El sistema de diseño de Estrategia 360 usa un azul muy oscuro de fondo, un azul de acento y un verde lima para las llamadas a la acción, con las tipografías Unbounded para los títulos, Manrope para el texto y JetBrains Mono para las etiquetas. El lima sobre azul oscuro da un contraste muy alto, por eso se reserva para los botones.
La ley de Fitts, formulada por Paul Fitts en 1954, dice que el tiempo para alcanzar un objetivo depende de su tamaño y de su distancia: los botones grandes y cercanos se pulsan antes y con menos errores.
En una web significa botones de llamada a la acción grandes, con espacio a su alrededor y colocados donde el usuario ya mira o tiene el pulgar en el móvil.
Cómo diseñar la interfaz de una web:
La UI no es un factor de posicionamiento directo, pero influye en cómo interactúan los usuarios con la página y en la conversión: una llamada a la acción poco visible o un texto ilegible hacen que la gente se vaya sin actuar.
También afecta a la velocidad: muchas tipografías, iconos pesados o animaciones con JavaScript empeoran el LCP y el INP. En la web de Estrategia 360, cargar las tipografías una sola vez fue la mejora que más ayudó al LCP.
La jerarquía visual es el orden en que el ojo recorre una página, guiado por el tamaño, el color, el contraste y la posición de los elementos.
En una página de servicio, la jerarquía debería llevar del título a la respuesta principal, después al precio o a los casos y, por último, al botón de contacto. Si todo tiene el mismo peso, nada destaca.
Una prueba sencilla es mirar la página con los ojos entrecerrados: lo que sigue destacando es lo que la jerarquía visual está priorizando de verdad.
El error más frecuente es el bajo contraste: textos grises claros sobre fondos blancos o de color que mucha gente no puede leer bien.
| Nivel WCAG | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Una UI atractiva no compensa un contenido confuso ni una oferta poco clara: es la capa de presentación. Y seguir las tendencias visuales del momento puede envejecer rápido; la claridad y la coherencia duran más.
La interfaz visual con la que interactúa el usuario.
No: la UI es lo que se ve; la UX, toda la experiencia.
4,5:1 para texto normal y 3:1 para texto grande en el nivel AA.
Un conjunto de reglas y componentes reutilizables para toda la interfaz.
Dos como máximo suele ser suficiente.
No directamente, pero sí a la interacción, la conversión y la velocidad.
Un principio que dice que los objetivos grandes y cercanos se alcanzan antes.
Ambos funcionan si el contraste es suficiente; lo importante es que el usuario lea sin esfuerzo.
¿Quieres aplicarlo a tu web? Estrategia 360 hace diseño web en Barcelona y en remoto.
Fuentes: W3C, WCAG 2.2: contraste mínimo · Paul Fitts, ley de Fitts (1954) · sistema de diseño de Estrategia 360
Escrito por Alena Shakina, CEO de Estrategia 360 · Conoce al equipo