¿Qué es la interfaz de usuario (UI)?

MDN define la interfaz de usuario como el medio que facilita la interacción entre una persona y una máquina. En informática puede ser un teclado, una pantalla o un programa; en el software, una línea de comandos, una página web o un formulario. En español se usa la sigla inglesa UI y también IU.

Nielsen Norman Group explica la diferencia con la UX con un ejemplo. Una web de críticas de cine puede tener una interfaz perfecta para buscar películas y aun así dar una mala experiencia a quien busca una película independiente, si la base de datos solo incluye las de los grandes estudios. La interfaz es una parte importante de la experiencia, pero la experiencia abarca todo el contacto con la empresa, sus servicios y sus productos. La usabilidad, según NN/g, es una cualidad de la interfaz: si es fácil de aprender, eficiente y agradable de usar.

Una interfaz web se compone de elementos que el navegador dibuja a partir del HTML y el CSS de la página: textos, imágenes, enlaces, botones, menús y campos de formulario. Cada elemento tiene un aspecto y responde cuando alguien lo pulsa, lo toca o escribe en él.

Para que una persona pueda usar esos elementos hay requisitos medibles. Las pautas WCAG 2.2 del W3C piden, en el nivel AA, un contraste de al menos 4,5:1 entre el texto normal y su fondo, y de 3:1 para el texto grande. Los objetivos que se pulsan o se tocan deben medir al menos 24 por 24 píxeles CSS, salvo excepciones como un enlace dentro de una frase o un objetivo pequeño con espacio suficiente alrededor.

Dos de las Core Web Vitals miden cómo se comporta la interfaz. INP mide cuánto tarda la página en responder a las interacciones, como un clic o una pulsación; según web.dev, un buen valor es de 200 milisegundos o menos. CLS mide cuánto se desplazan los elementos mientras la página carga; un buen valor es 0,1 o menos.

La interfaz decide si una persona puede hacer lo que ha venido a hacer: leer, encontrar un enlace, rellenar un formulario o comprar. Un botón con poco contraste o demasiado pequeño para el dedo se convierte en un obstáculo, aunque el contenido y la oferta sean buenos.

Para el SEO cuenta de forma indirecta. Google menciona la usabilidad del contenido entre los factores que tiene en cuenta: cuando las demás señales están igualadas, el contenido más accesible puede funcionar mejor. Como ejemplo cita las páginas adaptadas al móvil que cargan rápido.

En zds.es lo medimos el 16 de octubre de 2026 en tres páginas del glosario, con el navegador a 390 píxeles de ancho. El texto principal, blanco sobre azul oscuro, tiene un contraste de 17,5:1, y el botón «Pedir revisión», de 4,91:1. Dos elementos quedaban por debajo de 4,5:1: los textos secundarios en gris, como la ruta de navegación y la fecha de revisión, con 3,68:1, y el botón «Aceptar todas» del aviso de cookies, con 3,75:1. Tras cambiar sus colores ese mismo día, tienen 6,82:1 y 4,91:1, y todos los textos visibles medidos superan el mínimo.

• Medir el contraste de textos y botones con una herramienta, frente a los 4,5:1 de WCAG.
• Dar a botones e iconos al menos 24 por 24 píxeles CSS, o espacio suficiente alrededor.
• Mantener el mismo aspecto para la misma función en todo el sitio.
• Reservar el espacio de imágenes y anuncios para que la página no salte al cargar.
• Probar la interfaz en el móvil, donde se usa con el dedo.

• Usar UI y UX como sinónimos.
• Poner texto gris sobre fondos oscuros o claros sin medir el contraste.
• Hacer botones e iconos demasiado pequeños o pegados entre sí en el móvil.
• Dejar que los elementos se desplacen mientras la página carga.
• Juzgar la interfaz solo por su aspecto, sin comprobar si se puede usar.