≡En resumen
- La user interface es la capa con la que una persona controla un sistema y recibe su respuesta.
- No es lo mismo que la UX: la interfaz es una parte de la experiencia completa.
- La GUI es solo un tipo de interfaz; también hay interfaces de texto, táctiles, de voz y conversacionales.
- Cada salto de interfaz ha reducido lo que el usuario tiene que saber para usar un ordenador.
- Hoy conviven varias interfaces en un mismo producto: pantalla, voz y chat con IA.
01 ¿Qué es la user interface?
Interface significa en inglés superficie de contacto entre dos cosas. En español se adaptó como «interfaz», y FundéuRAE recuerda que es de género femenino (la interfaz, las interfaces), como «faz». En informática se usa para la conexión entre dos sistemas y para la comunicación de un sistema con quien lo usa, que es el sentido de user interface.
02 User interface vs UX vs GUI
| Término | Qué abarca | Ejemplo |
|---|---|---|
| User interface (UI) | Todo punto de interacción entre persona y sistema, de cualquier tipo | Botones de una app, un comando de terminal, un asistente de voz |
| Graphical user interface (GUI) | Solo las interfaces visuales con ventanas, iconos, menús y puntero o dedo | El escritorio de Windows o la pantalla de inicio de un móvil |
| User experience (UX) | La experiencia completa: necesidad, proceso, contexto, emociones y resultado | Todo el proceso de reservar un vuelo, incluido el email de confirmación |
La interfaz gráfica de usuario es el tipo de UI más conocido, pero no el único. Y la experiencia de usuario es más amplia que la interfaz: una app preciosa puede dar una mala experiencia si el proceso de fondo no resuelve lo que el usuario necesita.
03 Evolución de la interfaz de usuario: de la línea de comandos a la IA
-
1
1945-1968: procesamiento por lotes
Los programas se entregaban en tarjetas perforadas y los resultados llegaban horas o días después. No había interacción en tiempo real.
-
2
Años 60 y 70: línea de comandos
Primero con teletipos y después con terminales de vídeo, el usuario escribe órdenes de texto y recibe la respuesta al momento.
-
3
1968: la demo de Engelbart
Douglas Engelbart muestra el sistema NLS con ratón, hipertexto y ventanas: la semilla de la interfaz gráfica.
-
4
1973-1985: ventanas, iconos y ratón
Xerox PARC desarrolla el Alto; el Macintosh de 1984 populariza la GUI y en 1985 llega Windows 1.0.
-
5
2007: la interfaz multitáctil
El iPhone sustituye el puntero por el dedo y los gestos, y obliga a rediseñar tamaños, menús y navegación.
-
6
2011-2014: la voz
Apple presenta Siri con el iPhone 4S el 4 de octubre de 2011, y Amazon anuncia el altavoz Echo con Alexa el 6 de noviembre de 2014.
-
7
2022 en adelante: la interfaz conversacional con IA
OpenAI lanza ChatGPT en noviembre de 2022 y el lenguaje natural se convierte en una forma habitual de manejar software.
04 Tipos de interfaz de usuario
Línea de comandos (CLI)
Órdenes de texto en un terminal. Rápida y automatizable para perfiles técnicos, poco accesible para el resto.
Gráfica (GUI)
Ventanas, iconos, menús y puntero. La base de los sistemas de escritorio y de la web.
Táctil
Gestos sobre pantallas táctiles en móviles, tabletas, quioscos y terminales de pago.
De voz (VUI)
Órdenes habladas y respuestas en audio, en asistentes, altavoces inteligentes y coches.
Conversacional
Diálogo en lenguaje natural, escrito o hablado, con chatbots y asistentes de IA.
Natural o espacial
Gestos del cuerpo, mirada o movimiento en consolas con sensores y gafas de realidad mixta.
Las interfaces se combinan: una app bancaria tiene GUI táctil, un asistente por chat y, a veces, comandos de voz. Y el auge de la búsqueda por voz muestra cómo un cambio de interfaz también cambia la forma de buscar y de consumir contenido.
05 Elementos de una user interface gráfica
| Familia | Para qué sirve | Ejemplos |
|---|---|---|
| Controles de entrada | Que el usuario introduzca datos o elija opciones | Botones, campos de texto, casillas, interruptores, selectores de fecha |
| Navegación | Moverse por el producto y saber dónde estás | Menús, pestañas, barra inferior, migas de pan, buscador |
| Información y respuesta | Comunicar estado, resultados y errores | Avisos, barras de progreso, mensajes de error, notificaciones, tooltips |
| Contenedores | Agrupar y ordenar el contenido | Tarjetas, ventanas modales, acordeones, listas |
06 Una interfaz distinta para cada dispositivo
La misma función necesita interfaces diferentes según cómo se sujeta, se mira y se controla el dispositivo. Por eso un diseño de escritorio no se «encoge» sin más al móvil, y por eso Apple fija en sus guías tamaños de control distintos para cada plataforma.
| Dispositivo | Cómo se interactúa | Qué condiciona el diseño |
|---|---|---|
| Ordenador | Ratón o trackpad y teclado, con estado al pasar el puntero | Mucho espacio, precisión alta, atajos de teclado |
| Móvil | Dedo, a menudo con una sola mano | Tamaño de toque (Apple recomienda 44 × 44 puntos por defecto en iOS), zona del pulgar, pantalla vertical |
| Televisión | Mando a distancia desde el sofá | Navegación por foco con flechas y controles grandes: 66 × 66 puntos por defecto en tvOS |
| Reloj | Toques breves, corona y voz | Información de un vistazo, pocas opciones por pantalla |
| Coche | Voz y controles físicos o táctiles | Mínima distracción: tareas cortas y respuestas habladas |
07 Qué hace buena una interfaz de usuario
- ✓Visibilidad del estado: el usuario sabe siempre qué está pasando.
- ✓Lenguaje del usuario, no del sistema: nada de códigos de error ni jerga interna.
- ✓Coherencia: el mismo elemento se ve y se comporta igual en todo el producto.
- ✓Prevención de errores y forma sencilla de deshacer.
- ✓Reconocer mejor que recordar: opciones visibles en lugar de memorizadas.
- ✓Accesibilidad: contraste suficiente, uso con teclado y lector de pantalla, objetivos táctiles de tamaño cómodo.
Varios de estos criterios proceden de las heurísticas de Jakob Nielsen, que se usan para revisar interfaces en un análisis heurístico. Las plataformas, como Apple o Google, publican además sus propias guías de interfaz con medidas y patrones concretos.
08 La interfaz de usuario en la era de la IA
Los modelos de lenguaje han traído dos cambios. El primero, la interfaz conversacional como puerta de entrada: el usuario describe lo que quiere y el sistema decide qué pasos dar. El segundo, las interfaces que se generan o adaptan sobre la marcha, como un asistente que responde con una tabla, un formulario o un gráfico según la pregunta.
09 Cómo se crea una interfaz de usuario
-
1
Investigación
Qué necesita el usuario, en qué contexto y con qué dispositivo.
-
2
Arquitectura y wireframes
Estructura, flujo de pantallas y jerarquía de la información.
-
3
Diseño visual
Tipografía, color, iconos, componentes y estados.
-
4
Prototipo y pruebas
Validación con usuarios reales antes de programar.
-
5
Desarrollo
Implementación en web, iOS o Android con componentes reutilizables y accesibles.
La parte visual y de interacción es el terreno del diseño de interfaz (UI design). En appyweb trabajamos esas fases con un equipo de diseño UX/UI y las llevamos a código en proyectos de desarrollo de aplicaciones móviles y web.
Preguntas frecuentes sobre User interface
Significa interfaz de usuario: los elementos y mecanismos con los que una persona se comunica con un sistema informático y recibe su respuesta.
La UI es la interfaz concreta con la que interactúas; la UX es la experiencia completa, que incluye la necesidad, el proceso, el contexto y el resultado.
No. La GUI es la interfaz gráfica, con ventanas, iconos y menús; la UI incluye también interfaces de texto, voz, táctiles y conversacionales.
La interfaz. Es una palabra femenina, como «faz», y su plural es «interfaces».
Los principales son la línea de comandos, la gráfica, la táctil, la de voz, la conversacional y la natural o espacial, basada en gestos y movimiento.
El terminal de un ordenador, el escritorio de Windows, la pantalla de un móvil, un cajero automático, un altavoz inteligente o un chatbot con IA.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗