Una interfaz gráfica de usuario (GUI) es un componente visual común a dispositivos como smartphones, ordenadores y tabletas.
En este artículo, ofrecemos una visión general de lo que es una interfaz gráfica de usuario, incluyendo sus elementos y beneficios.
¿Qué es una GUI?
Una interfaz gráfica de usuario (GUI) es la interfaz de un dispositivo electrónico que permite a los usuarios interactuar con él mediante elementos gráficos. Es un aspecto importante del desarrollo de aplicaciones de software en lo que respecta a la interacción entre el ser humano y el ordenador, ya que sustituye los comandos basados en texto por acciones fáciles de usar. Una interfaz gráfica de usuario permite al usuario ver, comprender y utilizar fácilmente los puntos de decisión. En otras palabras, el dispositivo puede controlarse con un ratón, un bolígrafo o incluso un dedo.
La GUI se creó porque las interfaces de línea de comandos de texto eran complicadas y difíciles de aprender. El proceso de la GUI le permite hacer clic o señalar una pequeña imagen, conocida como icono o widget, y abrir un comando o función en sus dispositivos, como pestañas, botones, barras de desplazamiento, menús, iconos, punteros y ventanas. Actualmente es el estándar de diseño centrado en el usuario en la programación de aplicaciones de software.
Los programas que utilizan GUI se conocen como “programas GUI.” El programa crea pequeños cuadros de tareas o funciones y espera a que el usuario interactúe con ellos. El usuario controla cuándo y cómo se van a utilizar. Para seleccionar las funciones, los usuarios pueden utilizar un teclado, un dispositivo señalador, como un ratón, un panel táctil o una pantalla táctil, según el dispositivo.
Elementos de la GUI
La interfaz gráfica de usuario utiliza elementos estructurales que, en conjunto, definen el aspecto de la interfaz. La GUI extrae sus elementos de cuatro grupos básicos, entre ellos:
1. Controles de entrada
Estos son ejemplos de elementos de control de entrada de la interfaz gráfica de usuario:
- Botones: Los botones son círculos que permiten tomar decisiones inmediatas y realizar acciones. Los botones de radio vienen en grupos en los que sólo se puede seleccionar un botón a la vez. Los botones de etiqueta tienen texto. Si quiere que se seleccione más de una opción, considere la posibilidad de utilizar una casilla de verificación.
- Casillas de verificación: Las casillas de verificación son una caja cuadrada en una lista de una o más opciones. Al hacer clic en la casilla, ésta queda seleccionada. Se presentan mejor en una lista vertical. Una casilla de verificación puede ser una sola casilla, como el reconocimiento de una declaración, o una lista de elementos relacionados, como una lista de compras.
- Recogedor de fechas: Un selector de fechas permite seleccionar una fecha y/o una hora. El creador puede elegir un calendario o una opción de relleno. Asegura que se utilice un formato consistente, como “día, mes, año”
- Lista desplegable: Una lista desplegable le permite seleccionar un artículo a la vez. Se pueden incluir varios artículos de forma compacta. Considere la posibilidad de añadir indicaciones, como “seleccione uno” para que el usuario sepa qué debe hacer. El creador puede añadir o eliminar elementos para mantener la lista actualizada.
- Enumerar los cuadros: Los cuadros de lista le permiten seleccionar varios elementos de una lista compacta. Utilice esta función de la GUI si tiene una larga lista de opciones para que el usuario las considere. Existen cuatro variantes de cuadros de lista: de una línea, multiselección, multiselección con casillas de verificación y cuadros de lista multiselección-dual.
- Cuadro de texto: Un texto es un campo que permite introducir texto. El creador puede controlar la cantidad de texto que se permite.
-
Conmutar: Un botón de conmutación le permite cambiar un ajuste, normalmente como estados de apagado/encendido.
2. Componentes de navegación
Estos son ejemplos de elementos de navegación de la interfaz gráfica de usuario:
- Migas de pan: Las migas de pan proporcionan un rastro de páginas que se pueden consultar. Le proporcionan un mapa visual de las páginas para facilitar su navegación.
- Iconos: Un icono es una pequeña imagen que se utiliza como símbolo para ayudar a navegar por el sistema. Suelen utilizarse para indicar una aplicación, carpeta, archivo o navegador web. Utilizar un icono es una forma rápida de abrir documentos y ejecutar programas. Además, todos los archivos que crees en la misma aplicación tendrán el icono de la aplicación y la misma extensión.
- Carrusel de imágenes Un carrusel de imágenes le permite desplazarse por un conjunto de imágenes y elegir la que le gustaría ver ampliada. El carrusel suele contener imágenes en miniatura que pueden tener un hipervínculo.
- Paginación: La paginación divide el contenido en páginas y permite saltar entre ellas o seguirlas en orden.
- Campo de búsqueda: El cuadro de búsqueda le permite introducir una palabra clave o una frase para buscar resultados relevantes en un índice. Suelen ser cuadros de texto de una línea con un botón de búsqueda.
- Slider: Un deslizador tiene una barra y una marca que se desliza por ella. El creador puede controlar el tamaño de la barra y del tick, los márgenes de la barra y su orientación.
- Etiquetas: Las etiquetas permiten encontrar contenidos dentro de una misma categoría. Las opciones incluyen dar al usuario la posibilidad de añadir sus propias etiquetas en el sistema.
-
Fichas: Una pestaña es un pequeño cuadro que muestra el nombre o el icono gráfico asociado a una ventana específica. Cuando elija una pestaña, verá los controles e información específicos que se presentan en esa ventana. Por ejemplo, cuando abre varias páginas en un navegador web, verá las diferentes pestañas que aparecen en la parte superior de la ventana del navegador.
3. Componentes informativos
Estos son ejemplos de elementos informativos de la interfaz gráfica de usuario:
- Buzón de mensajes: Un cuadro de mensaje es una pequeña ventana con información, como una política o un descargo de responsabilidad. Requiere que usted realice una acción antes de continuar.
- Notificaciones: Una notificación es un cuadro de mensajes. Normalmente se utilizan para indicar avisos de emergencia, mensajes de error o finalización de tareas.
- Ventanas emergentes: Una ventana emergente, o modal, requiere que se interactúe con ella antes de poder volver al sistema.
- Barra de progreso: Una barra de progreso muestra dónde se encuentra en una serie de pasos de un proceso. Normalmente, no se puede hacer clic en las barras de progreso. Por ejemplo, una barra de progreso podría mostrar el estado de su pedido de pizza’en el proceso de pedido, cocción y entrega.
-
Consejos sobre herramientas: Una sugerencia de herramienta le ofrece más información cuando pasa el ratón por encima de un artículo. Por ejemplo, puedes recibir una definición y ejemplos de uso cuando pasas el ratón por encima de una palabra o frase.
4. Contenedores
Aquí hay un ejemplo de un elemento contenedor de GUI:
-
Acordeón: Un acordeón es una lista apilada de elementos que tiene una funcionalidad de mostrar y ocultar. Cuando se hace clic en la etiqueta, la lista se expande a su tamaño completo.
Elementos de interacción de una interfaz gráfica de usuario
Aparte de los elementos estructurales, una interfaz gráfica de usuario también cuenta con elementos de interacción, como:
- Cursor: Un cursor indica el lugar donde el sistema aceptará la siguiente entrada. Puede ser un puntero, que sigue los movimientos de un dispositivo señalador—como un ratón—o un cursor de texto, que indica el punto de enfoque en un cuadro de texto actual.
- Selección: Una selección se refiere a una lista de elementos a los que un usuario aplicará una operación. Un usuario seleccionará una porción de texto para realizar operaciones de corte, copia y pegado. Las aplicaciones de edición de imágenes permiten a los usuarios seleccionar y modificar determinadas áreas de una imagen utilizando las herramientas de selección varita mágica o lazo.
-
Manejar el ajuste: Un asa sirve de indicador de una operación de arrastre y colocación. Cuando un usuario coloca el puntero sobre el asa para iniciar el proceso de arrastre, su forma cambia a un icono que representa la función de arrastre.
¿Cuáles son las ventajas de una interfaz gráfica de usuario?
Los sistemas operativos de escritorio más antiguos, como MS-DOS, y muchos lenguajes de programación actuales, emplean interfaces de línea de comandos que requieren que se escriban largas líneas de código en una línea de comandos para acceder a las funciones del sistema. Hay que conocer los comandos disponibles en el sistema y cómo introducirlos en el formato correcto. Esto significa que los pequeños errores, como las faltas de ortografía o el espaciado incorrecto, impedirán que se ejecute una función.
La interfaz gráfica de usuario utiliza elementos visuales para representar esas líneas de mando ahora ocultas. Basta con seleccionar un botón o un icono para llamar a la función correspondiente. El fácil uso de las GUI ha hecho posible que el público en general, independientemente de su experiencia o conocimientos, pueda acceder a todo tipo de sistemas de uso cotidiano.
El uso de la interfaz gráfica de usuario tiene muchas otras ventajas. He aquí algunas de las más comunes:
1. Uso fácil
Como los datos se representan mediante símbolos, formas e iconos, los usuarios pueden reconocer, clasificar y navegar fácilmente por las opciones. Basta con un simple clic para adquirir una función. Como es tan fácil de usar y entender, la interfaz gráfica de usuario se ha convertido en la preferida para ordenadores y dispositivos móviles.
2. Fácil de entender
La representación visual de los datos se reconoce más rápidamente que el texto. A los no programadores les resulta fácil utilizar las interfaces gráficas de usuario, ya que no requieren experiencia con los comandos informáticos. No tienen que preocuparse de escribir o depurar código. Por ello, los usuarios encuentran en las GUI una interfaz fácil de aprender.
3. Atractivo
La interfaz gráfica de usuario tiene características visualmente atractivas y no está abarrotada de códigos de línea de comandos. Las imágenes visuales pueden retratar emociones, comentarios y situaciones con largas líneas de lenguaje informático. Las imágenes y demás son fáciles de entender y suelen tener un significado universal.
4. Atajos
La interfaz gráfica de usuario permite a los usuarios aprovechar los atajos de teclado para minimizar las pulsaciones. Una combinación de dos teclas en lugar de varias acciones ahorra tiempo al usuario y aumenta la productividad. Por ejemplo, un botón de llamada a la acción puede abrir un formulario, una carta prefabricada o una lista de información de contacto. Ese único botón ahorra la búsqueda de la misma información.
5. Multitasking
La GUI permite a los usuarios trabajar y ver dos o más programas al mismo tiempo. Por ejemplo, puedes ver una presentación en streaming mientras buscas en Internet desde un navegador. Puedes ver un vídeo mientras escribes una reseña de la presentación con un buscador en otra pestaña.