La interfaz gráfica de usuario (Graphic User Interface, GUI) es comúnmente la parte del sistema con la que el usuario interactúa. La interacción humano-máquina (IHM) es la disciplina que estudia la relación en cómo las máquinas y las personas trabajan juntas.
El Diseño de Entradas y Salidas, y el Diseño de GUI, es un subconjunto de IHM. Nos centramos en:
- Distribución.
- Tipografía.
- Jerarquía.
- Legibilidad.
- Estética.
Una interfaz ofrece acciones que manipulan a los objetos y sus propiedades. Las operaciones pueden ser:
- Explícitas: modelo objeto-acción.
- Implícitas: modelo acción-objeto.
Estilos de interacción:
- Línea de comandos: sólo texto, se ingresan comandos por consola. Enfoque acción-objeto.
- Selección de menú: dado un conjunto de opciones, se eligen algunas.
- Formulario de entrada: pantalla estructurada de ingreso de datos.
- Manipulación directa: interactúa directamente con elementos gráficos. Enfoque objeto-acción.
- Antropomórfico: lo más humano posible, con voz o gestos.
La manipulación directa es un concepto que lo propone Shneiderman en 1982. Es un enfoque para el diseño de GUIs que se basa en:
- Extensión del mundo real, haciendo una analogía de un escritorio real (con carpetas, archivos, una papelera, etc).
- Objetos y acciones continuamente visibles.
- Acciones rápidas, incrementales, responsivas, y reversibles.
- Iconos memorizables e intuitivos (universales).
Clasificación según la distancia traslacional:
- Débil: teclado y ratón.
- Media: táctil y gestos táctiles.
- Fuerte: gestos corporales, voz.
- Inmersiva: realidad virtual y aumentada.
8 reglas de oro (según Shneiderman):
- Mantener consistencia.
- Usabilidad universal.
- Comentarios informativos.
- Diálogos con cierre.
- Evite errores.
- Fácil reversión de acciones.
- Mantenga a usuarios en control.
- Reduzca la carga de memoria.
Componentes de una GUI
Una GUI tiene ventanas:
- Primarias: interacción principal.
- Secundarias: de diálogo, mensaje (alertas), o utilitarias.
Menus: presentan una gama de comandos disponibles. Permiten jerarquizar la información. Conviene usar verbos para comandos, incluir al menos tres ítems pero con un solo nivel, y usar shortcuts. Hay de tipo drop-down, sub-menu, despegable, etc.
Controles: objetos gráficos que representan operaciones o propiedades. Es básicamente todo objeto visible en la pantalla. Hay botones, cajas de texto, etiquetas, radio-buttons, check-lists, group fields, listas, etc.