Graphical user interface (GUI)

Interacción

Descripción

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; es un término acuñado en la década de los setenta para distinguirlas de interfaces 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)

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).
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.

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.

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.

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.

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.

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.

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.

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: