Glosario de Marketing y Branding

¿Qué es UI?

Autor: Lisandro Iserte Actualizado: 12 de mayo, 2026
UI en pocas palabras

UI — User Interface — es la interfaz visual mediante la cual una persona interactúa con un producto digital: botones, pantallas, tipografía, colores, iconos.

Tabla de contenidos
  1. ¿Qué es UI?
  2. Componentes principales
  3. UI vs UX
  4. Qué hace una buena UI
  5. Errores frecuentes
  6. Preguntas frecuentes
  7. Referencias clave

¿Qué es UI?

UI — User Interface — es la interfaz visual mediante la cual una persona interactúa con un producto digital. Incluye todos los elementos visuales que el usuario ve y con los que interactúa: botones, campos de formulario, menús, tipografía, colores, iconos, imágenes, layouts. La UI es el punto de contacto visual entre persona y sistema — cómo se ve el producto y qué elementos usa el usuario para realizar acciones.

El diseño de UI se enfoca en los aspectos visuales y la presentación de información. Los diseñadores de UI deciden qué colores usar, qué tipografía aplicar, cómo organizar elementos en pantalla, qué iconos representan acciones, cómo se ve un botón, qué feedback visual recibe el usuario. Cada decisión visual afecta qué tan fácil es usar el producto.

La UI no es solo estética — es funcionalidad visual. Un botón hermoso que no parece clickeable es UI deficiente. Colores que no generan contraste suficiente hacen el texto ilegible. Tipografía decorativa que dificulta la lectura sacrifica función por forma. La UI efectiva equilibra belleza con usabilidad: diseño que comunica función claramente mientras es visualmente agradable.

Componentes principales de una UI

Componente 01 — Controles de entrada Inputs del usuario Botones, campos de texto, checkboxes, radio buttons, dropdowns, sliders. Elementos mediante los cuales el usuario envía información al sistema. Un botón debe verse clickeable. Un campo de formulario debe indicar claramente qué información requiere. Un checkbox debe mostrar visualmente si está seleccionado. El diseño de estos controles afecta directamente qué tan fácil es completar acciones.
Componente 02 — Navegación Movimiento entre secciones Menús, breadcrumbs, tabs, links. Componentes que permiten moverse entre secciones del producto. Una navegación clara comunica la arquitectura de información — el usuario entiende dónde está, qué hay disponible y cómo volver. La navegación rota confunde y genera abandono.
Componente 03 — Componentes informativos Comunicación al usuario Tooltips, notificaciones, mensajes de error, modals, banners. Elementos que comunican información al usuario. Un buen mensaje de error explica qué salió mal y cómo corregirlo, no solo "Error 404". Las notificaciones avisan sin interrumpir tareas en curso.
Componente 04 — Contenedores Organización de contenido Cards, paneles, acordeones, secciones expandibles. Estructuras que organizan y agrupan contenido relacionado. Los contenedores crean jerarquía visual y permiten al usuario procesar información en chunks manejables en lugar de pared de texto continuo.
Componente 05 — Sistema de diseño Fundamentos consistentes Paleta de colores, escala tipográfica, espaciado sistemático, librería de iconos. Fundamentos visuales que crean consistencia en toda la interfaz. Google Material Design y Apple Human Interface Guidelines son ejemplos canónicos de design systems comprehensivos que documentan no solo qué se ve sino por qué.
Componente 06 — Estados visuales Feedback de interacción Default, hover, active, disabled, loading, error. Feedback visual que indica estado actual de elementos interactivos. Un botón deshabilitado debe verse diferente de uno activo. Un campo con error debe indicarlo visualmente. Un proceso cargando debe mostrar feedback. Los estados comunican qué puede hacer el usuario en cada momento.

UI vs UX: la diferencia crítica

UI y UX se usan a veces como sinónimos pero son distintos. UI es la interfaz visual; UX es la experiencia total. UI es un componente de UX — la interfaz visual es uno de muchos factores que afectan experiencia total.

Se puede tener UI hermosa con UX pésima. Una app de banca con diseño visual impresionante — gradientes sutiles, animaciones suaves, tipografía elegante — pero que requiere 12 pasos para transferir dinero, no recuerda destinatarios frecuentes y bloquea cuenta después de un error de contraseña. La UI es hermosa. La UX es terrible.

También se puede tener UX funcional con UI mediocre. Craigslist tiene diseño visual de los años 90 — sin grillas modernas, tipografía básica, colores planos. Pero la UX es efectiva: encontrás lo que buscás rápidamente, publicar es simple, no hay distracciones. La UI es primitiva. La UX cumple función.

El objetivo es UI excelente que sirve a UX superior. UI hermosa que facilita tareas en lugar de obstaculizarlas. Diseño visual que comunica jerarquía claramente, guía al usuario intuitivamente y reduce fricción. Cuando UI y UX trabajan juntas, el producto es tanto funcional como placentero de usar.

Hay una decisión que distingue al equipo maduro de UI: invertir en design system desde antes de que parezca necesario. La intuición errónea es "armemos pantallas y después consolidamos un sistema cuando crezcamos". El resultado: 14 versiones distintas del botón primario, 8 paletas de gris distintas, espaciados arbitrarios en cada vista, y la imposibilidad de hacer cambios globales sin tocar 200 archivos. La regla operativa: el design system es deuda técnica visual — postergarlo es como postergar tests automatizados. Funciona al principio, escala mal después. La inversión inicial de 2-3 semanas en definir tokens (colores, tipografía, espaciado), componentes base y reglas de combinación paga dividendos durante toda la vida del producto.

Lisandro Iserte

Qué hace que una UI sea buena

Atributo 01 — Claridad El usuario entiende sin instrucciones Los botones parecen botones. Los links parecen links. Las acciones destructivas — eliminar, cancelar — están diferenciadas visualmente de acciones primarias. La jerarquía visual comunica qué es importante. El usuario no debe adivinar qué elementos son interactivos o qué hacen.
Atributo 02 — Consistencia Patrones repetidos Los botones primarios siempre usan el mismo color. Los iconos siguen el mismo estilo. El espaciado es sistemático. Cuando elementos similares se ven similares, el usuario aprende patrones una vez y los aplica en todo el producto. La inconsistencia obliga a reaprender en cada pantalla.
Atributo 03 — Accesibilidad Para distintas capacidades Contraste suficiente para personas con visión reducida. Tamaño de texto legible. Áreas de click ≥44px en mobile. Navegación por teclado para quienes no usan mouse. Textos alt en imágenes. La accesibilidad no es feature opcional — es requisito fundamental, y mejorarla mejora la experiencia para todos.
Atributo 04 — Responsividad Adaptación a pantallas La UI se adapta a distintos tamaños de pantalla manteniendo usabilidad. No se trata solo de hacer elementos más pequeños — se trata de reorganizar información para que funcione en móvil, tablet, desktop. Más del 60% del tráfico web es móvil: UI que no funciona en móvil falla para la mayoría de usuarios.
Atributo 05 — Feedback visual Comunicación constante Click en botón genera respuesta visual inmediata. Procesos largos muestran indicadores de progreso. Acciones exitosas confirman visualmente. Errores explican qué salió mal y cómo corregirlo. El usuario nunca debe preguntarse si el sistema recibió su input — la ausencia de feedback genera clicks múltiples y percepción de lentitud.

La trampa más cara con UI es priorizar estética sobre función. He visto a equipos enteros optimizar pixels hasta que el botón "Comprar" se vuelve invisible porque "se ve más elegante en gris claro" y descubrir que la conversión cayó 30% sin entender por qué. La regla operativa que disciplina cualquier decisión visual: cada elemento de UI debe pasar el test funcional antes que el estético. ¿Este botón parece clickeable? ¿Este contraste es suficiente para que se lea en sol fuerte en un teléfono? ¿Esta tipografía es legible en pantalla pequeña? La belleza visual sin función comunicativa no es diseño — es decoración. Y la decoración que reduce conversión cuesta dinero real, aunque se vea bonita en el screenshot del portfolio.

Lisandro Iserte

Errores frecuentes en diseño de UI

Priorizar estética sobre función

Diseño visualmente impresionante que sacrifica usabilidad. Tipografía decorativa ilegible. Contraste bajo porque "se ve más elegante". Animaciones que retrasan acciones. Botones primarios en colores que se confunden con el fondo. La UI debe ser hermosa y funcional — no hermosa a costa de función. Cuando estética y función entran en conflicto, función gana, porque un producto bonito que no se usa no genera valor.

Inconsistencia visual entre pantallas

Botones que se ven diferentes en distintas páginas. Colores usados sin sistema. Espaciado irregular. Iconos en múltiples estilos. La inconsistencia confunde al usuario — cada pantalla requiere reaprender patrones en lugar de aplicar conocimiento existente. La solución es design system con tokens y componentes reutilizables: definir una vez, usar consistentemente en todo el producto.

Feedback visual ausente o tardío

Clickear botón sin respuesta visual genera incertidumbre. ¿El sistema registró el click? ¿Debo clickear de nuevo? La falta de feedback genera clicks múltiples, frustración y percepción de lentitud incluso cuando el sistema responde rápidamente. La regla: toda interacción del usuario debe generar respuesta visual en menos de 100ms — aunque sea un loading spinner que indique que el sistema está trabajando.

Jerarquía visual pobre

Todo tiene la misma prominencia visual. Información crítica no se distingue de secundaria. Acciones primarias no destacan sobre acciones destructivas (peor: el botón "Eliminar permanentemente" se ve igual que "Cancelar"). Sin jerarquía clara, el usuario debe leer todo para encontrar lo importante. La jerarquía se construye con tamaño, peso tipográfico, color, espaciado y posición — usar las cinco palancas combinadas, no solo una.

Ignorar accesibilidad como tema opcional

Texto gris claro sobre fondo blanco que falla WCAG. Botones diminutos en móvil. Navegación que no funciona con teclado. Imágenes sin alt text. Ignorar accesibilidad excluye usuarios con discapacidades — y genera experiencia inferior para todos, porque contraste bajo es difícil de leer para cualquiera, no solo personas con visión reducida. La accesibilidad debe diseñarse desde el inicio, no agregarse al final como parche.

Preguntas frecuentes sobre UI

¿Qué es UI?

UI (User Interface) es la interfaz visual mediante la cual una persona interactúa con un producto digital. Incluye todos los elementos visuales que el usuario ve y con los que interactúa: botones, campos de formulario, menús, tipografía, colores, iconos, imágenes, layouts. La UI es el punto de contacto visual entre persona y sistema — cómo se ve el producto y qué elementos usa el usuario para realizar acciones. Una UI efectiva es clara, consistente, accesible y permite al usuario completar tareas sin confusión. La UI no es solo estética sino funcionalidad visual: un botón hermoso que no parece clickeable es UI deficiente, contraste insuficiente hace texto ilegible, tipografía decorativa sacrifica función por forma.

¿Cuál es la diferencia entre UI y UX?

UI (User Interface) es la interfaz visual: cómo se ve el producto, colores, tipografía, botones. UX (User Experience) es la experiencia total: qué tan fácil es usar el producto, si cumple necesidades, cómo se siente la interacción completa. UI es un componente de UX. Se puede tener UI hermosa con UX pésima — app visualmente impecable pero imposible de usar (banca con diseño elegante pero 12 pasos para transferir). También se puede tener UX funcional con UI mediocre — Craigslist tiene UI primitiva pero UX efectiva porque encontrás lo que buscás rápidamente. El objetivo es UI excelente que sirve a UX superior: diseño visual que facilita tareas en lugar de obstaculizarlas, comunica jerarquía claramente y reduce fricción.

¿Qué hace que una UI sea buena?

Una UI buena cumple cinco atributos complementarios: clara — el usuario entiende qué hace cada elemento sin instrucciones (los botones parecen botones, las acciones destructivas se diferencian visualmente de las primarias); consistente — patrones visuales repetidos reducen carga cognitiva (botones primarios siempre del mismo color, iconos en mismo estilo, espaciado sistemático); accesible — funciona para personas con distintas capacidades (contraste suficiente, áreas de click ≥44px, navegación por teclado, alt texts); responsiva — se adapta a distintos tamaños de pantalla manteniendo usabilidad (más del 60% del tráfico web es móvil); y eficiente — permite completar tareas con mínimos clicks y esfuerzo. La UI debe ser invisible: cuando funciona bien, el usuario no piensa en la interfaz sino en su tarea.

¿Cuáles son los componentes principales de una UI?

Seis grupos de componentes complementarios: controles de entrada (botones, campos de texto, checkboxes, radio buttons, dropdowns, sliders — elementos mediante los cuales el usuario envía información al sistema); navegación (menús, breadcrumbs, tabs, links — componentes que permiten moverse entre secciones); componentes informativos (tooltips, notificaciones, mensajes de error, modals, banners — elementos que comunican información al usuario); contenedores (cards, paneles, acordeones — estructuras que organizan y agrupan contenido relacionado en chunks manejables); sistema de diseño (paleta de colores, escala tipográfica, espaciado, librería de iconos — fundamentos visuales que crean consistencia en toda la interfaz); y estados visuales (default, hover, active, disabled, loading, error — feedback visual que indica estado actual de elementos interactivos). Cada grupo cumple función específica y debe diseñarse coordinadamente.

¿Qué es un design system?

Un design system es el conjunto de reglas y componentes visuales que mantienen consistencia en toda la interfaz: paleta de colores limitada, escala tipográfica definida, espaciado sistemático, librería de iconos coherente, componentes reutilizables documentados (botones, formularios, cards) y patrones de interacción establecidos. Los design systems aceleran desarrollo (no se reinventa cada componente en cada feature nueva) y aseguran que todo el producto se sienta cohesivo independientemente del equipo que lo construya. Google Material Design y Apple Human Interface Guidelines son ejemplos canónicos de design systems comprehensivos que documentan no solo qué se ve sino por qué — qué principio de usabilidad o accesibilidad justifica cada decisión visual. Invertir en design system desde temprano es como invertir en tests automatizados: postergarlo escala mal después.

Referencias clave

Norman, D. y Nielsen, J. Nielsen Norman Group — Research-based UX Guidelines. Referencia canónica sobre heurísticas de usabilidad y principios de UI basados en investigación empírica desde los años 90.

Tidwell, J. (2010). Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly. Catálogo sistemático de patrones de UI con justificación funcional y aplicaciones prácticas en distintos contextos.

Cooper, A., Reimann, R. y Cronin, D. (2014). About Face: The Essentials of Interaction Design. Wiley. Texto fundacional sobre los principios de diseño de interfaces, la relación entre UI y comportamiento del usuario, y los patrones que se mantienen vigentes.

Google Material Design y Apple Human Interface Guidelines. Sistemas de diseño de referencia de la industria, que documentan no solo qué componentes existen sino por qué cada decisión visual está justificada en términos de usabilidad y accesibilidad.

Términos relacionados
UX Landing Page Conversión CRO Touchpoint
Ver todos los términos del glosario