Graphical User Interface (GUI)

Interacció

Descripció

La Graphical User Interface (GUI) és un tipus d’interfície que permet a l’usuari interactuar amb els dispositius per mitjà d’icones gràfiques i indicadors visuals, sent un terme encunyat en la dècada dels 70 per a distingir-les d’interfícies basades en el text. Així, les GUI van néixer arran de les dificultats d’aprenentatge per als usuaris que presentaven les interfícies tradicionals basades en comandaments. Es tracta d’un cas particular de la interfície d’usuari que permet interactuar amb un sistema digital, emprant per a això imatges gràfiques, a més de text per a representar la informació i les accions disponibles per a l’usuari. Les GUI es basen en la manipulació directa (es tracta d’un tipus d’interacció) i les tecnologies que fan possible el seu ús són els diferents dispositius d’entrada i sortida: teclat, ratolí, llapis, pantalla, pantalla tàctil, etc. Així, podem trobar GUI que permeten diferents tipus d’interacció.

D’aquesta manera, les interfícies gràfiques d’usuari empren comunament elements com ara finestres, icones, menús i punters (acrònim anglosaxó denominat WIMP) per a aconseguir els seus objectius de comunicació i interactivitat. Les interfícies gràfiques clàssiques d’usuari van introduir el concepte d’«escriptori» en la pantalla, atesa la seva similitud amb un entorn de treball, sent un element clau per a la seva ràpida adopció per part d’una àmplia varietat d’usuaris. D’aquesta manera, la GUI ha de proporcionar una sèrie de principis de disseny des d’un punt de vista tant funcional com estètic, com són:

Metàfora: conceptes essencials presentats per mitjà de diferents termes i imatges.
Model mental: organització de les dades, funcions, tasques i rols, a més de la navegació per mitjà de menús, icones, quadres de diàlegs i finestres.
Aspecte: propietats visuals, auditives, elements decoratius i controls.
Interacció: comportament dels controls i dispositius de visualització.

No obstant això, hem de diferenciar les interfícies gràfiques d’usuari d’un altre tipus d’interfícies existents:

CLI, interfícies de línia de comandaments (p. ex. MS-DOS, Unix)
NUI, interfícies naturals d’usuari (p. ex. Siri, sensor Kinect)
OUI, interfícies orgàniques d’usuari (p. ex. pantalles flexibles, realitat augmentada)
VUI: interfícies d’usuari per veu (p. ex. sistemes speech to text)

Aplicació

El gran repte per als dissenyadors de la GUI és poder presentar grans quantitats d’informació i funcions sobre un element de tipus visual d’una manera clara i eficient. Partint del concepte d’escriptori, els sistemes de finestres tradicionals divideixen la pantalla en àrees funcionals en què es poden interaccionar amb diferents elements i gràfics. No obstant això, algunes de les interfícies gràfiques dissenyades no empren els elements estàndards, sinó que una gran majoria utilitzen els sistemes de finestres (Windowing System). L’aparença i el comportament d’aquest sistema és determinat per un conjunt d’elements comuns del sistema de finestres, si bé les diferents GUI fan ús d’aquests i la seva nomenclatura pot variar en cada cas. Així, alguns dels elements principals de disseny d’una GUI són, entre d’altres:

Finestres: component que proveeix d’una estructura visual que pot ser desplaçada o redimensionada amb independència de la pantalla.
Menús: element que proporciona una llista d’execució de comandaments que permet veure o assenyalar, en lloc de recordar-los i escriure’ls.
Controls: qualsevol component que pot ser manipulat directament amb un teclat o un ratolí.
Quadres de diàleg: elements que proporcionen un context visual i funcional per a presentar opcions.
Element modal de diàleg: component que s’empra quan es requereix que l’usuari respongui abans que qualsevol altra acció pugui ser executada.
Panells de control: elements de sol·licitud explicita de paràmetres que es poden modificar mentre estigui visible.
Quadres de consultes: elements de consulta que pretenen donar resposta (per exemple, Sí o No) en el context en què es presenten.
Quadres de missatges: element amb què es pretén proporcionar informació crítica a l’usuari.
Interfícies de ratolí i teclat: proporcionen un mitjà eficient per a dur a terme les tasques que requereixen una manipulació espacial, posicionament, etc.. El teclat és més eficient per a les tasques que requereixen una entrada de text.

No obstant això, la utilització d’aquests elements, han d’anar en concordança amb els principis de disseny de les interfícies gràfiques d’usuari, destacant-ne els següents:

Organització: s’ha de proporcionar una estructura conceptual consistent (el disseny de la pantalla, les relacions i la navegabilitat són aspectes rellevants en l’organització), tant des del punt de vista de la consistència interna (s’estableix que els mateixos principis i regles s’han d’aplicar a tots els elements de la interfície gràfica d’usuari) com de la consistència externa (els principis culturals s’han de considerar en les interfícies d’usuari).
Economia: s’ha de maximitzar l’efectivitat amb un conjunt mínim d’estímuls. En aquest aspecte, s’han de considerar quatre punts rellevants: simplicitat (solament s’han d’incloure els elements que són més importants i menys intrusius), claredat (el seu significat mai no ha de ser ambigu per a l’usuari), distinció (les característiques de cada element han de ser distingibles) i èmfasis (els elements més importants han de ser percebuts fàcilment).
Comunicació: s’ha d’adequar la presentació dels elements a les capacitats de l’usuari. Aquesta ha de ser confiable (fàcil d’identificar i interpretar, i també atractiva), ha d’usar un conjunt limitat de tipografies que han de ser llegibles, clares i distintives, i múltiples perspectives (proporcionar múltiples possibilitats sobre la visualització d’estructures i de processos complexos).

Un altre aspecte essencial que s’ha de considerar dins de cadascun d’aquests principis de disseny és el color. El color és un dels elements més complexos per a aconseguir una bona comunicació visual, s’ha de combinar de manera que tinguin sentit visual. Com podem intuir, després de la presentació dels elements principals del disseny de les interfícies gràfiques d’usuaris, moltes d’aquestes propostes ja han estat creades i aplicades amb major o menor èxit al llarg dels anys. Algunes d’aquestes van funcionar tan bé que els dissenyadors van començar a usar-les repetidament i, mitjançant aquesta popularitat, els usuaris finals ja les interioritzaven. Aquest va ser el naixement dels denominats patrons de disseny. Es tracta de solucions recurrents de les interfícies gràfiques d’usuari que resolen problemes comuns de disseny i que són una referència estàndard per al dissenyador d’interfícies gràfiques d’usuaris. El document (físic o digital) que representa aquests patrons, i també els estils, les pràctiques i els principis d’un sistema dissenyat són les denominades guies d’estil. Aquestes sorgeixen a causa de la problemàtica d’aconseguir una consistència quan diversos dissenyadors estan involucrats en el disseny d’una interfície gràfica d’usuari. Per això, les guies d’estil i els estàndards de codificació s’empren per a mantenir un disseny consistent de les interfícies (per exemple, en sistemes operatius o serveis com ara Facebook o Google). No obstant això, hi ha molts altres àmbits que no compten amb una guia d’estil, la qual cosa suposa un repte major a l’hora de dissenyar-les.

Exemples

D’aquesta forma, la GUI, tal com la coneixem avui, s’ha convertit en un estàndard en la interacció persona-ordinador i el disseny d’interacció, i ha influït en el treball i les comunicacions de diverses generacions. Les interfícies gràfiques d’usuari actuals són fruit d’una evolució contínua al llarg dels anys.

A continuació, presentem algunes de les fites més rellevants en relació amb el disseny i l’evolució de les GUI:

1968: es presenta l’NLS, un sistema força rudimentari que fa ús d’un ratolí i múltiples finestres per a treballar amb hipertext.

Sistema NLS
Font: Wikipedia.

1970: es desenvolupa el paradigma WIMP (finestres, icones, menús i punters).

1973: es desenvolupa el primer ordinador que empra la metàfora d’escriptori i la interfície gràfica d’usuari, però no va ser comercialitzat.

Entorn Net Executive, Xerox Alto
Font: http://toastytech.com (inactiu).

1975: demostració d’una GUI incloent icones i menús emergents (Xerox).

1979: es presenta l’estació de treball PERQ, el primer ordinador que implementa una GUI i és comercialitzat.

Editor gràfic, PERQ
Font: http://toastytech.com (inactiu).

1981: es presenta una evolució respecte a PERQ (Xerox Star), sent la influència dels desenvolupaments posteriors de la GUI.

GUI de la Xerox Start
Font: Wikipedia.

1984: es desenvolupa el sistema X Windows, es tracta d’una plataforma independent del maquinari que permet desenvolupar les GUI en sistemes tipus UNIX. A més, apareix amb Macintosh que incorpora finestres i elements que es poden moure i arrossegar amb el ratolí.

Escriptori de Nathan’s Toasty Technology
Font: http://toastytech.com (inactiu).

1985: es desenvolupa Workbench v1.0, la GUI de Commodore, ja caracteritzada per incorporar elements a color

Escriptori d’AmigaOS
Font: http://toastytech.com (inactiu).

1987: es presenta Windows 2.X, que incorpora una GUI amb millores de teclat, en què les finestres es poden solapar i redimensionar.

Escriptori de Windows 2.X
Font: http://toastytech.com (inactiu).

1991: s’introdueix la vista 3D en el Workbench de Commodore.

1992: es presenta Windows 3.1, que inclou fonts TrueType, elements multimèdia i quadres de diàleg.

Escriptori de Windows 3.1
Font: http://toastytech.com (inactiu).

1993: es presenta Windows NT, en què els formularis HTML incorporen botons d’opció, caselles de verificació, llistes desplegables, etc.

1995: s’introdueix la barra de tasques i el botó d’inici, i també l’element de vídeo en Windows 95.

Escriptori de Windows 95
Font: http://toastytech.com (inactiu).

Referències

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 (2a. ed.). Amsterdam: North-Holland.

Marcusin, A. (1995). Graphical User Interfaces. Nova York: McGraw-Hill Publishers.

Webgrafia

Little Big Details: <http://littlebigdetails.com/>. [Data de consulta: 25 de gener de 2021].

User Interface Design Patterns: <http://ui-patterns.com/>. [Data de consulta: 25 de gener de 2021].

Exemples de guies d’estil de les interfícies gràfiques d’usuari de serveis: