22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Design Toolkit
Inicio Interacción
Descripción
Graphical user
La graphical user interface (GUI) es un tipo de interfaz que permite al usuario
interactuar con los dispositivos a través de iconos gráficos e indicadores visuales;
interface (GUI) es un término acuñado en la década de los setenta para distinguirlas de interfaces
INTERACCIÓN basadas en texto. Así, las GUI nacieron a raíz de las dificultades de aprendizaje
para los usuarios que presentaban las tradicionales interfaces basadas en
comandos. Se trata de un caso particular de la interfaz de usuario que permite
interactuar con un sistema digital, empleando para ello imágenes gráficas,
además de texto, para representar la información y las acciones disponibles para
el usuario. Las GUI se basan en manipulación directa (se trata de un tipo de
interacción), y las tecnologías que hacen posible su uso son los diferentes
dispositivos de entrada y salida: teclado, ratón, lápiz, pantalla, pantalla táctil, etc.
Así, podemos encontrar GUI que permiten diferentes tipos de interacción.
De esta manera, las interfaces gráficas de usuario emplean comúnmente
elementos tales como ventanas, iconos, menús y punteros (acrónimo anglosajón
denominado WIMP) para lograr sus objetivos de comunicación e interactividad.
Las interfaces gráficas de usuario clásicas introdujeron el concepto de «escritorio»
en la pantalla dada su similitud con un entorno de trabajo; se trata de un
elemento clave para su rápida adopción por parte de una amplia variedad de
usuarios. De esta manera, la GUI debe proporcionar una serie de principios de
diseño desde un punto de vista tanto funcional como estético, estos son:
Metáfora: conceptos esenciales presentados a través de diferentes términos e
imágenes.
Modelo mental: organización de los datos, funciones, tareas y roles, así como
la navegación a través de menús, iconos, cuadros de diálogos y ventanas.
Aspecto: propiedades visuales, auditivas, elementos decorativos y controles.
Interacción: comportamiento de los controles y dispositivos de visualización.
Sin embargo, debemos diferenciar las interfaces gráficas de usuario de otro tipo
de interfaces existentes:
CLI, interfaces de línea de comandos (por ejemplo, MS-DOS, Unix)
NUI, interfaces naturales de usuario (por ejemplo, Siri, sensor Kinect)
OUI, interfaces de usuario orgánicas (por ejemplo, pantallas flexibles, realidad
aumentada)
VUI: interfaces de usuario por voz (por ejemplo, sistemas speech to text)
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 1/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Aplicación
El gran reto para los diseñadores de GUI es poder presentar grandes cantidades
de información y funciones sobre un elemento de tipo visual de una manera clara
y eficiente. Partiendo del concepto de escritorio, los sistemas de ventanas
tradicionales dividen la pantalla en áreas funcionales donde se pueden
interaccionar con diferentes elementos y gráficos. Sin embargo, algunas de las
interfaces gráficas diseñadas no emplean los elementos estándar, aunque en su
gran mayoría utilizan los sistemas de ventanas (windowing system). La
apariencia y el comportamiento de este sistema vienen determinados por un
conjunto de elementos comunes del sistema de ventanas, si bien las diferentes
GUI hacen uso de ellos y su nomenclatura puede variar en cada caso. Así, algunos
de los principales elementos de diseño de una GUI son, entre otros:
Ventanas: componente que provee de una estructura visual que puede ser
desplazada o redimensionada con independencia de la pantalla.
Menús: elemento que proporciona una lista de ejecución de comandos que
permite ver o señalar en lugar de recordarlos y escribirlos.
Controles: cualquier componente que puede ser manipulado directamente
con un teclado o ratón.
Cuadros de diálogo: elemento que proporcionan un contexto visual y funcional
para presentar opciones.
Elemento modal de diálogo: componente que se emplea cuando se requiere
que el usuario responda antes de que cualquier otra acción pueda ser
ejecutada.
Paneles de control: elementos de solicitud explícita de parámetros que
pueden modificarse mientras esté visible.
Cuadros de consultas: elementos de consulta que pretenden dar respuesta
(por ejemplo, Sí o No) en el contexto en el que se presentan.
Cuadros de mensajes: elemento con el que se pretende proporcionar
información crítica al usuario.
Interfaces de ratón y teclado: proporcionan un medio eficiente de realizar las
tareas que requiere de manipulación espacial, posicionamiento, etc., mientras
que el teclado es más eficiente para las tareas que requieren entrada de texto.
Sin embargo, la utilización de estos elementos debe ir en concordancia con los
principios de diseño de las interfaces gráficas de usuario, destacándose los
siguientes:
Organización: se debe proporcionar una estructura conceptual consistente (el
diseño de la pantalla, las relaciones y la navegabilidad son aspectos relevantes
en la organización). Desde el punto de vista de la consistencia interna (se
establece que los mismos principios y reglas deben aplicarse a todos los
elementos de la interfaz gráfica de usuario) y la consistencia externa (los
principios culturales deben considerarse en las interfaces de usuario).
Economía: se debe maximizar la efectividad con un mínimo conjunto de
estímulos. Deben considerarse en este aspecto cuatro puntos relevantes:
simplicidad (solo deben incluirse los elementos que son más importantes y
menos intrusivos), claridad (su significado no debe ser nunca ambiguo para el
usuario), distinción (las características de cada elemento deben ser
distinguibles) y énfasis (los elementos más importantes deben ser percibidos
fácilmente).
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 2/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Comunicación: se debe adecuar la presentación de los elementos a las
capacidades del usuario. Esta debe ser confiable (fácil de identificar e
interpretar, así como atractiva), debe usar un conjunto limitado de tipografías
que deben ser legibles, claras y distintivas, y múltiples perspectivas
(proporcionar múltiples posibilidades sobre la visualización de estructuras y
procesos complejos).
Otro aspecto esencial que debe considerarse, dentro de cada uno de los principios
de diseño presentados, es el color. El color es uno de los elementos más
complejos para lograr una buena comunicación visual; los colores se deben
combinar de manera que tengan sentido visual. Como podemos intuir, tras la
presentación de los principales elementos de diseño de las interfaces gráficas de
usuarios, muchas de estas propuestas ya han sido creadas y aplicadas con mayor
o menor éxito a lo largo de los años. Algunas de ellas funcionaron tan bien que los
diseñadores comenzaron a usarlas repetidamente y, a raíz de esta popularidad,
los usuarios finales ya las interiorizaban. Este fue el nacimiento de los
denominados patrones de diseño. Se trata de soluciones recurrentes de las
interfaces gráficas de usuario que resuelven problemas de diseño comunes y que
son una referencia estándar para el diseñador de interfaces gráficas de usuarios.
El documento (físico o digital) que representa estos patrones, así como los
estilos, las prácticas y principios de un sistema diseñado, son las denominadas
guías de estilo. Estas surgen debido a la problemática de lograr una consistencia
si varios diseñadores están involucrados en el diseño de una interfaz gráfica de
usuario. Por ello, las guías de estilo y los estándares de codificación se emplean
para mantener un diseño consistente de las interfaces (por ejemplo, en sistemas
operativos o servicios como Facebook o Google); sin embargo, existen otros
muchos ámbitos que no cuentan con una guía de estilo, lo que supone un reto
mayor a la hora de diseñarlas.
Ejemplos
De esta forma, la GUI, tal como la conocemos hoy, se ha convertido en un
estándar en la interacción persona-ordenador y el diseño de interacción, y ha
influido en el trabajo y las comunicaciones de varias generaciones. Las interfaces
gráficas de usuario actuales son fruto de una evolución continua a lo largo de los
años.
A continuación, se presentan algunos de los hitos más relevantes en relación con
el diseño y la evolución de las GUI.
1968: se presenta NLS, un sistema algo rudimentario que hace uso de un ratón y
múltiples ventanas para trabajar con hipertexto.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 3/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Sistema NLS
Fuente: Wikipedia.
1970: se desarrolla el paradigma WIMP (ventanas, iconos, menús y punteros).
1973: se desarrolla el primer ordenador en emplear la metáfora de escritorio y la
interfaz gráfica de usuario, aunque no fue comercializado.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 4/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Entorno Net Executive, Xerox Alto
Fuente: http://toastytech.com (inactivo).
1975: demostración de una GUI incluyendo iconos y menús emergentes (Xerox).
1979: se presenta la estación de trabajo PERQ, el primer ordenador que
implementa una GUI y es comercializado.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 5/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Editor gráfico, PERQ
Fuente: http://toastytech.com (inactivo).
1981: se presenta una evolución respecto a PERQ (Xerox Star), siendo la influencia
de los desarrollos posteriores de GUI.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 6/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
GUI de la Xerox Start
Fuente: Wikipedia.
1984: se desarrolla el sistema X Windows; se trata de una plataforma
independiente del hardware que permite desarrollar GUI en sistemas tipo UNIX.
Además, aparece con Macintosh, que incorpora ventanas y elementos que se
pueden mover y arrastrar con el ratón.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 7/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Escritorio de Apple II
Fuente: http://toastytech.com (inactivo).
1985: se desarrolla Workbench v1.0, la GUI de Commodore, caracterizada por
incorporar ya los elementos a color.
Escritorio de AmigaOS
Fuente: http://toastytech.com (inactivo).
1987: se presenta Windows 2.X, que incorpora una GUI con mejoras de teclado,
donde las ventanas pueden solaparse y redimensionarse.
Escritorio de Windows 2.X
Fuente: http://toastytech.com (inactivo).
1991: se introduce la vista 3D en el Workbench de Commodore.
1992: se presenta Windows 3.1, que incluye fuentes TrueType, elementos
multimedia y cuadros de diálogo.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 8/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Escritorio de Windows 3.1
Fuente: http://toastytech.com (inactivo).
1993: se presenta Windows NT donde los formularios HTML incorporan botones
de opción, casillas de verificación, listas desplegables, etc.
1995: se introduce la barra de tareas y el botón de inicio, así como el elemento de
vídeo en Windows 95.
Escritorio de Windows 95
Fuente: http://toastytech.com (inactivo).
Referencias
Golden, K. (2015). The Best Interface Is No Interface: The simple path to brilliant
technology. New Riders.
Helander, M. G.; Landauer, T. K.; Prabhu, P. V. (1997). Handbook of Human-
Computer Interaction (2.ª ed.). Ámsterdam: North-Holland.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 9/10
22/6/24, 9:29 Design Toolkit | Graphical user interface (GUI)
Marcusin, A. (1995). Graphical User Interfaces. Nueva York: McGraw-Hill
Publishers.
Webgrafía
Little Big Details: <http://littlebigdetails.com/>. [Fecha de consulta: 25 de enero
de 2021].
User Interface Design Patterns: <http://ui-patterns.com/>. [Fecha de consulta: 25
de enero de 2021].
Ejemplos de guías de estilo de interfaces gráficas de usuario de servicios:
Microsoft Design, Fluent design.
Resources – Google Design, A directory of essential design tools and
resources to keep your projects moving forward.
Design – Apple developer, Human Interface Guidelines.
https://design-toolkit.recursos.uoc.edu/es/graphical-user-interface/ 10/10
