¿Qué es UI?
UI es el sistema de componentes, estados y medios mediante los que una persona percibe lo que ocurre en un producto y puede actuar sobre él. La interfaz gráfica es una de sus formas, no toda la UI.
- ¿Qué es UI?
- UI no es lo mismo que interfaz visual
- UI vs UX
- Qué compone una interfaz
- Estados, feedback y comportamiento
- Accesibilidad en UI
- Responsive, adaptativa y multimodal
- Qué papel cumple un design system
- Cómo diseñar una UI
- Cómo evaluar una UI
- Errores frecuentes
- Preguntas frecuentes
- Referencias clave
¿Qué es UI?
UI — User Interface o interfaz de usuario — es el conjunto de medios, componentes y estados mediante los que una persona percibe lo que ocurre en un sistema y puede actuar sobre él.
En una aplicación gráfica incluye botones, campos, menús, navegación, tipografía, iconos, tablas, mensajes, estados de carga, foco, selección y otros elementos interactivos. Pero reducir UI a “lo visual” es demasiado estrecho: una interfaz también puede incluir teclado, voz, sonido, gestos, háptica y tecnologías de asistencia.
Por eso una UI no es una capa decorativa colocada encima de la funcionalidad. Es parte del mecanismo mediante el cual el sistema comunica qué puede hacerse, qué está ocurriendo, qué resultado tuvo una acción y qué opciones existen después.
UI = sistema de interacción entre persona y producto. La interfaz gráfica es una de sus formas. Una buena UI vuelve perceptibles acciones, estados, estructura y feedback de manera compatible con las capacidades, contexto y dispositivo de quienes la usan.
UI no es lo mismo que interfaz visual
En la práctica profesional se usa “UI” muchas veces como abreviatura de diseño de interfaz gráfica. Ese uso es comprensible, pero conceptualmente conviene distinguir UI de GUI.
Esta distinción tiene consecuencias prácticas. Diseñar solamente el aspecto visual de un botón no resuelve su nombre accesible, rol, estado, comportamiento de teclado, hit area, feedback ni respuesta después de activarlo.
UI vs UX
UI y UX se superponen, pero no son equivalentes. UI describe la interfaz mediante la cual se interactúa con el sistema. UX — User Experience — abarca la experiencia más amplia de utilizar un producto o servicio: utilidad, comprensión, esfuerzo, confianza, contexto, expectativas, resultado y percepción a lo largo del tiempo.
Una interfaz atractiva puede formar parte de una mala experiencia si el proceso exige pasos innecesarios, la arquitectura no coincide con la tarea o el sistema no resuelve la necesidad. Del mismo modo, una interfaz visualmente austera puede ser eficaz si comunica con claridad y permite completar la tarea con seguridad.
Por eso “UI bonita” y “buena UI” no son sinónimos. La calidad de interfaz se evalúa por cómo comunica y soporta interacción, no por su apariencia aislada.
Qué compone una interfaz
Estados, feedback y comportamiento
Una interfaz no se define solo por una captura estática. Los estados y transiciones son parte del diseño. Un campo vacío, completado, con foco, inválido o deshabilitado no es el mismo componente en la experiencia.
Apple plantea el feedback como una forma de ayudar a las personas a saber qué está ocurriendo, qué pueden hacer después, cuál fue el resultado de una acción y cómo evitar errores. También recomienda que el feedback corresponda a la importancia de la información: no toda señal necesita interrumpir.
No existe una obligación universal de mostrar un spinner ni un umbral fijo de “menos de 100 ms” aplicable a toda interacción. La respuesta adecuada depende del tipo de acción, duración, riesgo y plataforma.
Accesibilidad en UI
Accesibilidad no es una propiedad estética adicional. En interfaces digitales significa que la información y las acciones puedan percibirse, comprenderse y operarse mediante diferentes capacidades y tecnologías.
En web, WCAG 2.2 define requisitos que afectan directamente la UI: navegación por teclado, foco visible, contraste, nombres y roles programáticos, alternativas, prevención de errores y tamaño de targets, entre otros.
“44 px en mobile” no es una regla web universal. WCAG 2.2 AA utiliza 24 × 24 CSS px para Target Size (Minimum), mientras 44 × 44 CSS px aparece en Target Size (Enhanced), nivel AAA. Apple recomienda hit regions y tamaños de control propios en puntos según cada plataforma.
Responsive, adaptativa y multimodal
Una UI que funciona en varios dispositivos no se limita a “achicar” una versión de desktop. Cambian viewport, densidad, modalidad de entrada, distancia de lectura, postura, disponibilidad de teclado, precisión del puntero y contexto de uso.
Responsive design es una estrategia válida para adaptar layout, pero no agota el problema. En algunas plataformas puede ser necesario modificar navegación, densidad, prioridad de contenido, interacción o feedback. La meta no es conservar la misma composición, sino conservar comprensión y operabilidad.
Tampoco es correcto justificar una decisión con un porcentaje global como “más del 60% del tráfico es móvil”. La distribución real depende del producto, audiencia, país, tarea y período. El diseño debe apoyarse en los datos del contexto propio y en requisitos de plataforma, no en una cifra universal.
Qué papel cumple un design system
Un design system es un sistema compartido de decisiones reutilizables para diseñar y construir interfaces. Puede incluir principios, tokens, componentes, patrones, documentación, reglas de accesibilidad, código, governance y procesos de contribución.
No debería reducirse a una paleta de colores o una librería de componentes. Su valor aparece cuando diseño y desarrollo comparten definiciones suficientemente estables para evitar variaciones accidentales y acelerar cambios coherentes.
No existe una regla de que un design system deba crearse “desde el inicio” ni una inversión estándar de dos o tres semanas. El nivel de formalización debe corresponder al tamaño del producto, número de equipos, frecuencia de cambio y costo de inconsistencia.
El design system no es una colección de componentes lindos: es una infraestructura de decisiones. Si solo documenta cómo se ve un botón, todavía falta gran parte del sistema. Tiene que explicar cuándo usarlo, qué estados tiene, cómo se comporta, cómo se accede con teclado o tecnologías de asistencia y quién puede cambiarlo sin romper compatibilidad con el resto del producto.
Lisandro IserteCómo diseñar una UI
Cómo evaluar una UI
No existe una métrica única de “calidad UI”. Conviene combinar evidencia según la tarea.
Las heurísticas de Nielsen siguen siendo útiles como revisión general —visibilidad del estado del sistema, consistencia, control, prevención y recuperación de errores, entre otras—, pero el propio marco las presenta como heurísticas: reglas generales de orientación, no criterios exhaustivos de conformidad.
Errores frecuentes en UI
Definir UI como “la parte visual”
Ese uso describe mejor una GUI. Una interfaz completa incluye comportamiento, estados, semántica, feedback y modalidades de entrada y salida que pueden no ser visuales.
Priorizar estética como criterio aislado
La apariencia importa, pero una decisión visual debe preservar legibilidad, significado, operabilidad y acceso. La alternativa tampoco es “función sin diseño”: forma y función deben evaluarse juntas.
Creer que menos clicks siempre significa mejor UI
Un paso puede aportar confirmación, seguridad, consentimiento, contexto o prevención de errores. La meta es reducir esfuerzo innecesario, no minimizar mecánicamente el contador de clicks.
Aplicar 44 px como mínimo web universal
WCAG 2.2 AA define 24 × 24 CSS px con excepciones para Target Size (Minimum); 44 × 44 CSS px corresponde al criterio Enhanced de nivel AAA. Las guías de plataforma pueden recomendar otros tamaños.
Eliminar focus porque “se ve feo”
El foco visible es información funcional para navegación por teclado. Puede diseñarse de forma coherente con la identidad, pero no debería desaparecer sin una alternativa perceptible.
Diseñar solo el happy path
Loading, errores, datos vacíos, permisos, desconexión, validación y estados parciales forman parte real de la interfaz. Ignorarlos produce productos que se rompen justamente cuando más orientación necesita la persona.
Convertir el design system en dogma
Un sistema debe reducir inconsistencia accidental, no impedir soluciones nuevas. Componentes y reglas necesitan governance, evolución y criterios claros para excepciones.
Confundir consistencia con identidad absoluta
Un botón destructivo, una alerta, una tabla y una pantalla de onboarding no deben verse exactamente iguales. La consistencia está en patrones y significado compartido, con variación funcional cuando corresponde.
Preguntas frecuentes sobre UI
¿Qué es UI?
UI — User Interface o interfaz de usuario — es el conjunto de medios, componentes y estados mediante los que una persona recibe información de un sistema y puede actuar sobre él. En productos digitales suele incluir una interfaz gráfica con botones, campos, navegación y contenido, pero también puede involucrar teclado, voz, sonido, gestos, háptica y tecnologías de asistencia.
¿Cuál es la diferencia entre UI y UX?
UI describe la interfaz mediante la que una persona interactúa con el sistema. UX describe la experiencia más amplia de utilizar el producto o servicio, incluyendo utilidad, esfuerzo, comprensión, contexto, expectativas y resultado. La UI influye en UX, pero una experiencia también depende de arquitectura, contenido, performance, modelo del servicio y otros factores.
¿UI es solamente diseño visual?
No. La interfaz gráfica es una parte importante de muchas UI, pero una interfaz también incluye comportamiento, estados, feedback, semántica y modalidades de entrada y salida. Un control necesita más que apariencia: función, nombre, rol, estado, respuesta y operabilidad mediante los mecanismos relevantes.
¿Cuál es el tamaño mínimo de un botón accesible?
No existe una cifra universal para todas las plataformas. En web, WCAG 2.2 nivel AA establece para Target Size (Minimum) 24 × 24 CSS px, con excepciones de espaciado y otros casos; 44 × 44 CSS px corresponde al criterio Enhanced de nivel AAA. Apple utiliza recomendaciones propias en puntos según la plataforma y el tipo de control. Por eso conviene aplicar el estándar y la plataforma del producto en lugar de repetir “44 px” como regla general.
¿Qué es un design system?
Un design system es un sistema compartido de decisiones reutilizables para diseñar y construir interfaces. Puede incluir principios, tokens, componentes, patrones, documentación, accesibilidad, código y governance. Su función es reducir inconsistencia accidental y permitir que varios equipos construyan y mantengan interfaces coherentes sin reinventar cada decisión.
Referencias clave
W3C Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG) 2.2. Estándar W3C sobre accesibilidad web, incluyendo foco, contraste, modalidades de entrada, prevención de errores y requisitos para componentes de interfaz.
W3C Web Accessibility Initiative. Understanding Success Criterion 4.1.2: Name, Role, Value. Documentación oficial sobre semántica programática de componentes, estados y valores para tecnologías de asistencia.
W3C Web Accessibility Initiative. Understanding Success Criterion 2.5.8: Target Size (Minimum). Documentación oficial sobre el mínimo de 24 × 24 CSS px en WCAG 2.2 AA, sus excepciones y la diferencia con recomendaciones más exigentes.
Apple. Human Interface Guidelines — Accessibility & Buttons. Guía oficial sobre accesibilidad, modalidades de interacción y tamaños de control por plataforma; complementada por la guía de botones.
Nielsen Norman Group. 10 Usability Heuristics for User Interface Design. Marco de heurísticas para revisión de interacción, incluyendo visibilidad del estado, consistencia, control del usuario, prevención y recuperación de errores.
Términos relacionados