El termino GUI hace referencia a Interfaz gráfica de usuario, En el contexto del proceso de interacción persona -ordenador, la interfaz gráfica de usuario, es el artefacto tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático. Es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Habitualmente las acciones se real izan mediante manipulación directa para facilitar la interacción del usuario con la computadora.
Surge como evolución de la línea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno gráfico. Como ejemplo de interfaz gráfica de usuario podemos citar el escritorio o desktop del sistema operativo Windows y el entorno X -Window de Linux.
Las interfaces gráficas surgen de la necesidad de hacer los ordenadores más accesibles para el uso de los usuarios comunes. La mayoría de ordena dores domésticos o requerían conocimientos de BASIC (el 95% de ellos mostraban el intérprete BASIC al encenderse) u ofrecían una interfaz de línea de comandos (como los sistemas operativos CP/M o los diferentes OS del Apple II), lo que requería conocimientos por encima de la media si se deseaba hacer algo más que usarlo como consola de videojuegos. Esta limitación fue salvada gracias al desarrollo de los entornos gráficos, que permitieron que las personas pudieran acceder a un ordenador sin tener que pasar por el tortuoso proceso de tener que aprender a manejar un entorno bajo línea de comandos.
ELEMENTOS INTERACTIVOS EN LA INTERFAZ GRÁFICA
Dispositivos De Interfaz Humana
Los dispositivos de interfaz humana son los diseñados para conectar alguna parte del cuerpo del ser humano con la interfaz gráfica de modo que puedan ser introducidos datos en el sistema. Normalmente son dispositivos que permiten introducir directamente, y en tiempo real, información de “orientación” y “acción” al ordenador sincronizado simultáneamente con una interfaz gráfica.
Los dispositivos de interfaz humana como el ratón pueden representar en la interfaz gráfica gestos físicos y movimientos, como “apuntar”, “pulsar”, “arrastrar”, “trasladar”, “mover” de forma metafórica que de otro modo sería muy complejo simular.
La interfaz humana forma actualmente, una parte indisoluble respecto a la interfaz gráfica de usuario. Son partes interconectadas de un mismo paradigma de interacción, donde se necesitan uno al otro indispensablemente para que la interacción con el sistema se realice adecuadamente.
Existen diferentes tipos de interfaces humanas los cuales han sido desarrollados paralelamente a lo largo de la historia de la interfaz gráfica. Los más importantes han sido, el teclado, el ratón de ordenador, el trackball (bola), el cursor táctil (touchpad), la tableta gráfica y el Joystick.
Cada uno de estos dispositivos sirven para introducir un tipo de información específica en el sistema a través de la interfaz gráfica.
Ventanas
Las ventanas son recursos interactivos usadas para la visualización, jerarquización y navegación de la información en un interfaz gráfico de usuario. A través de las ventanas, pueden ser visualizados un conjunto de documentos, aplicaciones e icono s, sobre los cuales es posible realizar diversas acciones.
Las ventanas permiten una forma relativamente fácil de interacción con la información. Su comportamiento es como el de un objeto, y pueden ser abiertas, cerradas, movidas, escaladas, ampliadas (zoom) y navegadas (scrolling).
Las ventanas fueron uno de los primeros recursos interactivos desarrollados en el contexto de la interfaz WIMP en el PARC. Constituye un marco, a través del cual es posible visualizar y manipular información del sistema.
Han sido definidas dos tipos generales de ventanas. Las ventanas de aplicación y las ventanas de ficheros. Ambas atienden a una diferenciación semántica, esto es relacionado con el contenido de la ventana y no de la ventana en sí misma.
Las ventanas de aplicación son aquellas que surgen para representar las variables de una aplicación concreta en el sistema. En el paradigma WIMP cada una de las aplicaciones se representa en un espacio delimitado por una ventana. Es una forma de establecer niveles jerárquicos dentro de la interfaz y de posibilitar la representación y manipulación independiente de aplicaciones.
Las ventanas de ficheros son normalmente usadas por los gestores de archivos en el sistema y sirven para visualizar un conjunto de documentos, aplicaciones, iconos posibilitando diversas acciones sobre estos elementos.
Anatomía general de una ventana
Las ventanas se han ido definiendo a lo largo del tiempo, de modo que el día de hoy, podríamos hablar de una anatomía de las ventanas, formada principalmente por cinco elementos básicos: Marco, cabecera de ventana, área de contenido, barra de scroll, y pie de ventana.
El marco lo forman el conjunto de recursos gráficos que ayudan a marcar el límite visual entre la ventana y el resto del interfaz. Normalmente sobre ciertas partes del marco se posibilitan acciones de redimensionamiento de la ventana por parte del usuario. Ha variado estilísticamente y está sujeto a las modificaciones de customización por parte del usuario.
La cabecera de ventana es un área dispuesta de forma horizontal que sirve para posicionar los iconos que representan y ejecutan acciones generales sobre el comportamiento de la ventana. Actualmente han sido estandarizadas tres acciones básicas: maximizar, minimizar y cerrar. Hay una cuarta aún no estandarizada pero que es usada por algunos softwares, y consiste en ocultar la ventana, sin cerrar la aplicación, pero sin ser minimizada en la barra de tareas.
El espacio de contenido está sujeto al tamaño de la ventana normalmente. Hay ventanas que se adaptan al contenido, y si el contenido de la información representada supera el tamaño de la ventana, entonces la ventana muestra la barra de scroll, que servirá para movernos por el contenido.
La barra de scroll de las ventanas ha tenido varios posicionamientos a lo largo de la historia, pero actualmente los sistemas operativos más importantes la localizan en la vertical derecha, para mover el contenido en dirección vertical, y en lado horizontal inferior para posicionar el menú de scroll horizontal. Normalmente está formado por un conjunto de cuatro elementos. Dos flechas – botones situadas a los dos lados de la barra, y un elemento deslizador el cual puede ser arrastrado y actualmente muy usado en navegadores Web.
El pie de ventana es usado para visualizar información básica de la aplicación o del contenido de esa ventana.
Tipos de ventanas
Podemos hacer una catalogación de ciertos tipos de ventanas, desde un punto de vista semántico, esto es, atendiendo al tipo de significados asociados a la ventana:
Ventana Modal
Las ventanas modales son aquellas ventanas específicas que han sido diseñadas como medio de prevención de alguna acción del usuario sobre el sistema. Surgen allí donde el sistema prevé algún error por parte del usuario. Suelen contener un mensaje de advertencia y un botón de confirmación de la acción a realizar.
Ventana de Confirmación
Las ventanas de confirmación son aquellas que surgen de modo preventivo igualmente, pero esta vez dan al usuario una serie de posibilidades de acción. La ventana de confirmación más habitual es aquella que surge cuando intentamos guardar un documento que ya tenemos creado en el sistema. Suelen contener el mensaje de advertencia, un icono indicando la gravedad del asunto, y una serie de botones donde se le pide al usuario una decisión al respecto.
Menús
Los menús son listas de comandos, atributos, o cualquier tipo de elementos, agrupados de forma estructurada normalmente inscritos dentro de una barra de menús o de un área específica en la interfaz, los cuales pueden ser activados y posibilitan la ejecución de los ítems que contienen obteniendo una respuesta inmediata al respecto.
Los ítems del menú normalmente constituyen descripciones textuales, aunque también incluye en ocasiones signos adicionales que dan información sobre la posibilidad de ser ejecutado (apagado -encendido), el estado del ítem (activado desactivado) o el tipo o clase a la que pertenece siendo acompañada de un icono.
Normalmente los menús sintetizan una estructura de elementos de forma jerárquica por niveles, representados de modo que se muestra una lista, tanto de forma horizontal como vertical de los elementos de un menú, y a continuación, se accede a cada uno de los subelementos de cada elemento del menú.
Estados de un Menú
Los items de un menú suelen tener estados. Los estados son los posibles comportamientos que dispone un ítem del menú en relación a la interacción por parte del usuario. Los estados habituales de un ítem de un menú suelen ser:
Activo: Es el estado normal de un ítem sin que el usuario interactúe con él, aunque debe mostrar claramente la posibilidad de poder hacerlo.
Inactivo: El ítem muestra una apariencia difusa indicando que no puede ser seleccionado por el usuario en ese momento, pero que puede hacerlo bajo otras condiciones de selección de parámetros en el sistema.
Seleccionado (rollover): Cuando el usuario ha posicionado o elegido esa opción, sin haberlo activado, el ítem suele cambiar de estado, normalmente indicando que está seleccionado en ese momento.
Activado: El estado corresponde al momento en que el ítem seleccionado es activado, normalmente ocurre cuando el usuario indica que ha seleccionado cliqueando sobre él o pulsando una tecla que haga esta indicación al sistema (intro).
Pulsado: Cuando el ítem ha sido activado con posterioridad. En una página Web suele mostrar un color diferente para indicar que el ítem ha sido pulsado con anterioridad.
Tipos de Menús
Existen varias tipologías de menús, según el contexto en el que se ubiquen, conteniendo una gramática particular y un objeto concreto dentro de la interacción con el usuario. Se comentan a continuación los tipos de menús más habituales en la interacción con ordenadores:
Menús contextuales
Menú contextual, es aquel que muestra una lista de ítems posible de ejecutar sobre un objeto concreto en el contexto definido. Un objeto o icono en el interfaz, puede tener varios estados y diferentes contextos. Los menús contextuales normalmente están ocultos, y son activados por el usuario sobre un objeto en concreto. Éste muestra las opciones que se pueden aplicar sobre el objeto en ese preciso momento. En el sistema Windows son activados con el botón derecho del ratón, y son representados de forma flotante al lado del objeto interrogado.
Menús de navegación (scroll)
Un menú de scroll, es un menú que combina en su interior la posibilidad de realizar movimientos de navegación sobre sus ítems. Cuando las opciones de un menú son demasiadas para mostrar de una sola vez en la interfaz, s e usan diversos recursos de navegación con los ítems, uno de ellos es posicionar una barra en el interior del menú de modo que se pueda navegar usando la barra adecuada. No son muy habituales estos menús, Apple los usó en su sistema operativo y Windows lo usa en su menú de inicio cuando las aplicaciones instaladas son demasiadas para mostrar.
Menús jerárquicos
Un menú Jerárquico es un menú representado en forma de árbol, cuyos ítems de un mismo nivel, abren un nuevo menú con nuevas opciones correspondientes a un siguiente nivel. Son usados con frecuencia para sintetizar un árbol amplio de ítems, sin perder la jerarquía de su organización. Este menú es el usado por Windows en su menú de inicio.
Menú de inicio
Un menú de inicio es un tipo de menú jerárquico desarrollado inicialmente por Microsoft para Windows y actualmente implementado en las interfaces de los sistemas operativos GNU/LINUX. Es un menú jerárquico que intenta recoger un acceso global a todas las variables y elementos y aplicaciones del sistema.
Iconos
Los iconos en el contexto de las interfaces gráficas son signos esquemáticos que representan algún tipo de fichero, carpeta, aplicación, o dispositivos de un sistema informático. Los iconos, son signos interactivos y por lo tanto inscritos en una gramática especial que debe ser aprendida por el usuario.
Los iconos usados en la interfaz provienen principalmente de la representación metafórica realizada en el PARC inscritos dentro de la metáfora del escritorio. A su vez éstos se inspiran en los signos desarrollados en la comunicación gráfica de las señales viales y demás signos codificados por la cultura occidental hasta hoy.
Los iconos son importantes y uno de los elementos fundamentales en el desarrollo de las interfaces gráficas por varias razones:
- Las personas reconocen iconos e imágenes más rápido de lo que tardarían en comprender el mismo concepto a través de la representación verbal. A ciertas distancias pueden ser mejor reconocidos que signos textuales.
- Los iconos cruzan la barrera de la cultura de mejor modo que el lenguaje verbal. Existen algunos signos que tienen reconocimiento internacional.
- Los iconos son capaces de trasmitir conceptos en menos espacio que en lo que lo describiría una palabra a través del lenguaje verbal.
- El icono como imagen, tiene la capacidad de trasmitir información espacial, relacional, multivariable y representar objetos del mundo real.
Botones
Un botón es un objeto de control sobre la interfaz que posibilita introducir un dato de confirmación al sistema. Actúa como metáfora visual y funcional de los botones incluidos en los dispositivos tecnológicos. Su gramática visual tiene ya un recorrido histórico con posibilidad de ser estudiada.
Han sido catalogados varios tipos de botones en relación a sus formas:
Botón en Relieve
Es el más común y el más usado en los sistemas operativos. Imita la gramática visual de un botón de un dispositivo físico, por lo que se suele usar un tratamiento cuidado de los bordes, de modo que simule volumen. Suele incluir una descripción breve en el interior, y suele soportar diversos estados al igual que el comportamiento de las ventanas.
Botones en forma de radio
Son botones redondos que posibilitan ser señalados a través de la acción del usuario. Normalmente son usados e n formularios o menús, para dar elección a elegir un ítem de una lista. El interfaz de Mac lo usó con frecuencia en su sistema operativo.
Botones de confirmación (checkbox)
Son botones similares a los botones de radio, pero con forma cuadrada. Se representan de forma hueca, y suelen ser usados para seleccionar ítems en una lista.
Elementos de entrada de texto
Los elementos de entrada de texto nos indican en qué lugar del interfaz puede ser usado el teclado. Cuando todo el interfaz se convierte en escritorio, surgen las aplicaciones específicas que permiten introducir texto. Pero existen partes de ciertas aplicaciones que requieren un área que posibilite la introducción de información textual por parte del usuario. En este contexto es en el que los campos de texto cobran sentido.
Campo de texto
El campo de texto ha desarrollado también su propia gramática visual. Normalmente delimita un área en blanco, e indica a través del borde la posibilidad de introducir texto en la misma.
Elementos De Información De Salida
Los elementos de salida tienen que ver con elementos que se han ido configurando para dar información de estado del sistema al usuario en un momento dado. Normalmente las aplicaciones reservan un área de la ventana, donde posicionan estos datos. Existen varios elementos de información de salida, que vale la pena mencionar:
Barra de progreso
La barra de progreso es un elemento que indica al usuario el progreso de la acción que realiza el sistema. Todas las acciones del sistema, n o son realizadas de forma instantánea. Cuando el sistema requiere tiempo para realizar una acción, es fundamental dar feedback al usuario a través de la representación del proceso y por lo tanto del progreso de la acción.
Cuadro de consejo [tip box]
Es un recurso gráfico inspirado en los bocadillos de los cómics, que surge en ciertos elementos de la interfaz para indicar información adicional sobre algún elemento u acción del usuario sobre el sistema.
Barra de estado [Status Bar]
La barra de estado ofrece información variada al usuario sobre diferentes variables de la aplicación o del sistema. Normalmente es posicionada en la parte inferior de la ventana de aplicación. Suele estar divida en varias áreas de modo que en una misma horizontal se muestran varios campos con diferentes informaciones. Suelen ofrecer información técnica específica, muy útil cuando el usuario la necesita.
Interpolados 