≡En resumen
- Una interfaz gráfica traduce las órdenes al lenguaje de la imagen: ves ventanas e iconos y actúas con el ratón o el dedo.
- Nació en los laboratorios de Xerox PARC en los años setenta y la llevaron al gran público Apple y Microsoft.
- Sus elementos básicos son ventanas, iconos, menús, puntero y controles como botones, casillas o campos de texto.
- Convive con otras interfaces: la línea de comandos, la táctil, la de voz y la conversacional.
- Una buena GUI se diseña con criterios de usabilidad y accesibilidad, no solo de estética.
01 ¿Qué es una interfaz gráfica de usuario?
La interfaz es el punto de contacto entre la persona y la máquina. Antes de las interfaces gráficas, ese contacto era una pantalla de texto donde había que conocer y escribir órdenes exactas. La GUI cambió el esfuerzo de lado: ya no tienes que recordar comandos, basta con reconocer lo que ves en pantalla y señalarlo.
Hoy la usas constantemente: el escritorio de Windows o macOS, la pantalla de inicio de tu móvil, el panel de un coche o la web desde la que lees esto son interfaces gráficas. Su calidad determina buena parte de la experiencia de usuario de cualquier producto digital.
02 Elementos de una interfaz gráfica
Ventanas
Áreas rectangulares que contienen un programa o documento y se pueden mover, redimensionar y superponer.
Iconos
Pequeñas imágenes que representan archivos, aplicaciones o acciones y se reconocen de un vistazo.
Menús
Listas de opciones agrupadas: barra de menús, menús desplegables y menús contextuales.
Puntero
La flecha que mueves con el ratón o el panel táctil; en móviles, el propio dedo.
Controles o widgets
Botones, casillas de verificación, botones de opción, deslizadores y campos de texto.
Retroalimentación
Barras de progreso, avisos y cambios de estado que te dicen qué está pasando.
03 Historia de la interfaz gráfica: de Xerox a la pantalla táctil
-
1
1968: la «madre de todas las demos»
Douglas Engelbart presenta el sistema NLS, con ratón, hipervínculos y ventanas divididas.
-
2
1973: Xerox Alto
El centro de investigación Xerox PARC crea el primer ordenador con interfaz gráfica, pensado para uso interno.
-
3
1981: Xerox Star 8010
Primera estación de trabajo comercial con escritorio, iconos, ventanas y ratón, aunque con poco éxito por su precio.
-
4
1983-1984: Apple Lisa y Macintosh
Apple introduce la barra de menús y los controles de ventana, y el Macintosh lleva la GUI al gran público.
-
5
1985: Windows 1.0, Amiga y Atari ST
Microsoft lanza Windows 1.0; Commodore presenta el Workbench del Amiga y Atari incorpora GEM.
-
6
1995: Windows 95
Estrena el botón Inicio y la barra de tareas, y se convierte pronto en el sistema de escritorio más popular.
-
7
2007: interfaz multitáctil
El iPhone populariza la pantalla táctil con gestos, base de las interfaces móviles actuales.
La visita de Steve Jobs a Xerox PARC en 1979 es uno de los episodios más citados de la informática: lo que vio allí influyó en el Lisa y el Macintosh. Desde entonces, el estilo visual ha cambiado mucho, del realismo de los primeros iconos al diseño plano que se generalizó con Windows 8 e iOS 7, pero los principios de ventanas, iconos y menús siguen vigentes.
04 Tipos de interfaces de usuario
| Tipo | Cómo se interactúa | Ejemplo |
|---|---|---|
| Línea de comandos (CLI) | Escribiendo órdenes de texto | Terminal de Linux o macOS, PowerShell |
| Gráfica (GUI) | Con ratón y teclado sobre ventanas, iconos y menús | Escritorio de Windows o macOS |
| Táctil | Con los dedos y gestos sobre la pantalla | Android, iOS, cajeros y quioscos |
| De voz (VUI) | Hablando | Asistentes de voz y altavoces inteligentes |
| Natural (NUI) | Con gestos del cuerpo, la mirada o el movimiento | Consolas con sensores de movimiento, gafas de realidad mixta |
| Conversacional | Escribiendo o hablando en lenguaje natural | Chatbots y asistentes de IA |
Las interfaces táctiles son hoy la forma más común de GUI: la mayoría de personas usa más el móvil que el ordenador, y las pantallas táctiles obligaron a rediseñar botones, menús y tamaños pensando en el dedo, no en el puntero.
05 Interfaz gráfica vs. línea de comandos
| Aspecto | Interfaz gráfica (GUI) | Línea de comandos (CLI) |
|---|---|---|
| Curva de aprendizaje | Baja: se aprende explorando | Alta: hay que conocer los comandos |
| Velocidad para tareas repetitivas | Menor: muchos clics | Mayor: se automatiza con scripts |
| Consumo de recursos | Mayor: gráficos y ventanas | Mínimo |
| Descubrir funciones | Fácil, están a la vista en menús | Difícil sin documentación |
| Uso típico | Usuarios en general, diseño, ofimática | Programadores, administradores de sistemas, servidores |
06 Cómo se programa una interfaz gráfica
Detrás de cada ventana o botón hay código. Los desarrolladores no dibujan píxel a píxel: usan bibliotecas o frameworks que ya incluyen los controles habituales y se encargan de dibujarlos, reaccionar a los clics y adaptarse al tamaño de la pantalla. La elección depende de dónde va a funcionar la aplicación.
| Plataforma | Tecnologías | Comentario |
|---|---|---|
| Web | HTML, CSS y JavaScript, con librerías como React o Vue | Funciona en cualquier navegador sin instalar nada |
| iPhone, iPad y Mac | SwiftUI y UIKit / AppKit | Herramientas nativas de Apple |
| Android | Jetpack Compose y el sistema de vistas clásico | Herramientas nativas de Google |
| Windows | WinUI, WPF o Windows Forms | Aplicaciones de escritorio nativas |
| Multiplataforma | Flutter, React Native, Qt o Electron | Un solo código para varios sistemas, con distintos compromisos de rendimiento |
07 Cómo se diseña una buena interfaz gráfica
- ✓Visibilidad del estado: el usuario siempre sabe qué está pasando.
- ✓Coherencia: los mismos elementos se comportan igual en toda la aplicación.
- ✓Reconocer mejor que recordar: opciones visibles en lugar de órdenes que memorizar.
- ✓Prevención de errores y mensajes que explican cómo solucionarlos.
- ✓Diseño estético y minimalista: solo lo necesario en cada pantalla.
- ✓Accesibilidad: contraste suficiente, tamaños táctiles cómodos y compatibilidad con lectores de pantalla.
Varios de estos criterios proceden de las heurísticas de Nielsen, publicadas en 1994 y todavía vigentes. Un proyecto serio parte de la investigación con usuarios, pasa por wireframes y prototipos y se valida con pruebas antes de programarse. Si vas a crear una aplicación o una plataforma, conviene contar con un servicio de diseño de interfaces web UI y UX desde el principio, y no maquillar la interfaz al final.
Una clínica quiere que sus pacientes pidan cita desde el móvil. Primero se estudia qué buscan (especialidad, horario, profesional), se dibujan pantallas en blanco y negro, se prueba un prototipo con cinco pacientes y solo entonces se aplica el diseño visual. Así, cuando el equipo de desarrollo de aplicaciones programa la app, la interfaz ya está validada.
Preguntas frecuentes sobre Interfaz gráfica de usuario
Es la forma de manejar un programa o dispositivo mediante elementos visuales, como ventanas, iconos, menús y botones, en lugar de escribir comandos de texto.
Son las siglas de Graphical User Interface, interfaz gráfica de usuario en inglés. En español a veces se abrevia IGU.
Para que cualquier persona pueda usar un ordenador, un móvil o una aplicación sin conocer comandos ni programación, reconociendo y señalando lo que ve en pantalla.
Ventanas, iconos, menús y puntero, conocidos como WIMP, además de controles como botones, casillas, deslizadores, campos de texto y barras de progreso.
La del Xerox Alto, creado en Xerox PARC en 1973. La primera comercial fue la del Xerox Star 8010, en 1981; Apple y Microsoft la popularizaron después.
En la gráfica actúas sobre elementos visuales con ratón o dedo; en la línea de comandos escribes órdenes de texto. La primera es más fácil de aprender y la segunda, más rápida para automatizar.
Windows, macOS, los entornos de escritorio de Linux como GNOME o KDE, Android, iOS y cualquier aplicación o web con botones y menús.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗