Interfaz gráfica
La interfaz consiste en un área de trabajo, es el modo de visualización que permite al usuario elegir comandos, iniciar programas y ver listas de archivos y otras opciones utilizando las representaciones visuales (iconos) y las listas de elementos del menú, en pocas palabras, interacción entre el usuario y la aplicación informática.
Las interfaces gráficas de usuario ofrecen un entorno que se encarga de la comunicación con el ordenador, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador.
Misiones
- informar al usuario acerca de los elementos que tiene a su disposición y para qué sirven
- brindar la posibilidad de elegir entre las distintas opciones.
Elementos interactivos de la interfaz gráfica
- Dispositivos de interfaz humana
- Ventanas
- Menús
- Iconos
- Tipografía digital
- Controles:
- Botones
- Elementos de entrada de texto
- Elementos de información de salida
- Elementos compuestos
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.
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 iconos, 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).
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
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 items que contienen obteniendo una respuesta inmediata al respecto.
Los items 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 item (activado - desactivado) o el tipo o clase a la que pertenece siendo acompañada de un icono.
Normalmente los menús sintentizan una estructura de elementos de forma jerárquica por niveles, representados de modo que se muestra una lista, tanto de forma horizonal 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ú.
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 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
• 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 real31.
Tipografía Digital:
Un elemento no menos importante en la interacción con los ordenadores a través de las interfaces gráficas son los signos textuales.
Uno de los recursos textuales más trascendentes en la actualidad en sistemas digitales y especialmente para los sistemas de información en línea, es el hipertexto.
El hipertexto es un tipo especial de texto, que contiene propiedades interactivas en el contexto de los sistemas digitales, con un funcionamiento muy similar al de un botón. Dispone también de su propia gramática. Su gramática por defecto corresponde a la adición de texto azul y subrayado sobre el signo textual para indicar que puede ser accionado sobre el mismo.
Controles:
- 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.
- 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.
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.
- Cuadro de consejo: 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: La barra de estado ofrece información variada al usuario sobre diferentes variables de la aplicación o del sistema
Elementos Compuestos:
- Barra de tareas: Consisten en una barra dispuesta de forma horizontal, en la que se posicionan diversos elementos interactivos, normalmente iconos, que activan aplicaciones y sirve además para ir añadiendo y alojando aplicaciones útiles para el usuario. Suelen estar dividido cuanto menos en cuatro partes:
- Botón de Inicio: Sirve para activar el menú de inicio y poder acceder a sus funciones.
- Área de aplicaciones más usadas: Muestra de forma sintética iconos de las aplicaciones más usadas en el sistema como puedan ser el escritorio y el navegador de internet o navegador de archivos.
- Área de descanso: En un principio desocupada, es la parte de la barra de tareas destinada a disponer los elementos minimizados cuando el usuario ejecuta más de una tarea en el sistema.
- Área de aplicaciones del sistema: Muestra de forma sintética, a través de iconos, diferentes aplicaciones relacionadas con cuestiones técnicas del sistema que operan en el momento de su ejecución.
- Combo de texto: El combo de texto, es un elemento formado en un estado inicial por un campo de texto y una pestaña. El usuario puede introducir texto sobre el campo, pero si pulsa la pestaña despliega una ventana completa con elementos de navegación incluida. Es un elemento combinado que dispone de varias posibilidades de interacción y de acceso a la información introducida.
Diseño orientado al usuario
El Diseño Web Centrado en el Usuario se caracteriza por asumir que todo el proceso de diseño y desarrollo del sitio web debe estar conducido por el usuario, sus necesidades, características y objetivos. Centrar el diseño en sus usuarios (en oposición a centrarlo en las posibilidades tecnológicas o en nosotros mismos como diseñadores) implica involucrar desde el comienzo a los usuarios en el proceso de desarrollo del sitio; conocer cómo son, qué necesitan, para qué usan el sitio; testar el sitio con los propios usuarios; investigar cómo reaccionan ante el diseño, cómo es su experiencia de uso; e innovar siempre con el objetivo claro de mejorar la experiencia del usuario.
La mayoría de los procesos que hacen Diseño Centrado en el Usuario tienen el siguiente esqueleto:
- Conocer a fondo a los usuarios finales, normalmente usando investigación cualitativa o investigación cuantitativa
- Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones
- Poner a prueba lo diseñado, normalmente usando test de usuario
Ley de Fitts en el diseño Web
El tamaño de un elemento y la cercanía de este respecto al puntero del ratón, es inversamente proporcional al tiempo que necesitaremos para acceder a el.
Algo que resulta evidente y muy lógico, pero que se suele pasar por alto en muchas ocasiones, a veces en pro del diseño gráfico y en deterioro de la usabilidad.
Algunos consejos para aplicar la ley de Fitts
- Se pueden agrupar y minimizar el espacio entre los elementos que pueden ser accedidos de forma consecutiva.
- Puede ser conveniente incorporar un botón “subir” si el sitio web tiene mucha verticalidad y el menú se encuentra en la zona superior.
- El “botón retroceder” es el más usado del navegador, por lo que es conveniente minimizar la distancia entre la zona de actuación de la página principal y el botón retroceder.
- Si el tamaño de los elementos es “grande” el usuario podrá acceder a ellos de forma rápida y precisa.
