Qu’est-ce que le GUI ? Explication de l’Interfaces utilisateur graphiques

Dans le monde de la conception de l’expérience utilisateur, certains concepts constituent la base de tout ce que vous apprenez par la suite. L’interface utilisateur graphique, ou GUI en abrégé, est l’un de ces concepts.

La plupart des appareils et applications modernes exploitent une interface utilisateur graphique dans leurs versions – ils sont un incontournable depuis des décennies, et cela ne changera probablement pas de sitôt. Donc, il vaut vraiment la peine de comprendre les interfaces graphiques avant de plonger plus profondément dans l’UX.

Qu’est-ce que l’interface graphique (GUI) ?

Une interface utilisateur graphique (GUI) est une interface numérique dans laquelle un utilisateur interagit avec des composants graphiques tels que des icônes, des boutons et des menus. Dans une interface graphique, les visuels affichés dans l’interface utilisateur transmettent des informations pertinentes pour l’utilisateur, ainsi que des actions qu’il peut entreprendre.

Aujourd’hui, il est difficile d’imaginer des ordinateurs sans interface graphique. Mais, il fut un temps où nous n’avions même pas de curseur de souris. Regardons comment les interfaces graphiques sont apparues.

Une brève histoire des interfaces graphiques

Avant les interfaces utilisateur graphiques, les utilisateurs interagissaient avec les ordinateurs à l’aide d’interfaces utilisateur de caractères, ou CUI. Dans une CUI, les utilisateurs saisissent des commandes textuelles sur leur clavier pour exécuter des actions sur l’appareil.

Bien qu’utiles pour les programmeurs, les CUI n’étaient vraiment accessibles qu’aux professionnels de l’informatique et aux utilisateurs avancés. L’interface était déroutante pour les novices, ainsi qu’inefficace puisque les commandes devaient être mémorisées et tapées correctement à chaque fois – ce qui ne plairait pas à un marché de masse.

Puis, en 1981, Xerox a lancé la première interface graphique d’un produit grand public, le Xerox Star. C’est loin des interfaces utilisées aujourd’hui, mais a marqué un changement par rapport aux interfaces textuelles précédentes. Il comportait des images, des boutons et des couleurs reconnus par les utilisateurs non professionnels.

Quelques années plus tard, Apple a lancé son premier système d’exploitation à interface graphique, Macintosh, en 1984. Microsoft a lancé sa première interface graphique l’année suivante dans Windows 1.0. Ces deux systèmes d’exploitation révolutionnaires ont introduit des icônes pour représenter des éléments tels que des fichiers, des dossiers, des applications et des boutons. Voici à quoi ressemblait l’interface graphique du Macintosh au démarrage :

Xerox Star, Macintosh et Windows ont marqué l’une des avancées les plus significatives de l’informatique personnelle : leurs interfaces étaient accessibles au grand public. Désormais, l’utilisateur moyen peut faire des choses comme manipuler des fichiers et exécuter des scripts sans connaître de commandes ou de langages de programmation spécialisés.

Inutile de dire que les interfaces graphiques sont désormais la valeur par défaut pour presque tous les produits numériques commerciaux, des PC et appareils mobiles aux téléviseurs, consoles de jeux et réfrigérateurs – grâce aux interfaces graphiques, vous pouvez appuyer sur le bouton sur l’écran au lieu de taper votre demande à chaque fois.

Comment fonctionnent les interfaces graphiques ?

Dans une interface graphique, les éléments visuels représentent des actions que les utilisateurs peuvent effectuer, des objets que les utilisateurs peuvent manipuler et d’autres informations pertinentes pour l’utilisateur. Certains éléments visuels courants sont :

• le curseur de la souris, qui déplace et manipule d’autres éléments
• boutons, sur lesquels les utilisateurs peuvent cliquer ou appuyer pour lancer une action
• barre d’outils et rubans, essentiellement des groupes de boutons
• icônes, petites images qui représentent des informations ou des composants interactifs
• menus, listes d’éléments cliquables
• barres de défilement, pour faire défiler la page

Parfois, les graphiques de l’interface graphique sont liés à des objets du monde réel pour représenter leur objectif et aider les utilisateurs à comprendre les fonctions à leur disposition. Par exemple, un répertoire (c’est-à-dire un groupe de fichiers et/ou de répertoires) est représenté par une icône de dossier, et la corbeille est représentée par une corbeille.

Les utilisateurs peuvent interagir avec les éléments d’une interface graphique de plusieurs manières. Le plus souvent, nous cliquons et défilons à l’aide d’une souris sur les ordinateurs de bureau, et nous appuyons sur un écran tactile sur les appareils mobiles. Tous les systèmes d’exploitation GUI populaires et de nombreuses applications logicielles permettent également l’interaction via les commandes du clavier (une fonction d’accessibilité clé), et certains acceptent également les commandes vocales.

Lorsque l’utilisateur initie une interaction, l’interface graphique répond généralement par un signal tel qu’un changement de couleur ou de taille dans l’élément cliqué, un son ou un autre effet, puis le système exécute l’action demandée.

Vous utilisez probablement plusieurs interfaces graphiques chaque jour, au point qu’il semble évident de savoir comment elles sont conçues pour fonctionner. Cependant, des décennies de réflexion et de recherche méticuleuses ont été consacrées à la création d’interfaces que les utilisateurs apprécient, et les conceptions continuent d’évoluer chaque année. Par exemple, lorsque de nouvelles versions de logiciels sont publiées, elles incluent souvent des mises à jour de l’interface pour une meilleure expérience utilisateur. Plus récemment, la réalité virtuelle et les commandes vocales ont gagné du terrain.

Abstraction dans les interfaces graphiques

Le but ultime des interfaces graphiques est de permettre aux humains d’interagir avec le code sous-jacent d’un appareil en nous séparant des détails techniques et en présentant une interface simplifiée à l’utilisateur. Ce processus est appelé abstraction et est un concept clé lors de la conception et de la construction d’interfaces.

Pour mieux comprendre ce qu’est l’abstraction, on peut la comparer à la conduite d’une voiture. Pour conduire votre voiture, vous n’avez pas besoin de connaître les détails spécifiques du fonctionnement exact du moteur et de la colonne de direction de votre voiture – ce serait une longue classe de conduite.

Au lieu de cela, ces concepts avancés sont abstraits derrière l’interface utilisateur de la voiture : les pédales et le volant. Tout ce qu’un conducteur doit savoir, c’est qu’appuyer sur la pédale d’accélérateur fait avancer la voiture et que tourner le volant fait avancer la voiture à gauche et à droite.

Il en va de même pour les interfaces graphiques : les icônes de dossier ne sont pas de vrais dossiers sur votre écran, et lorsque vous faites glisser un fichier dans votre corbeille, vous ne mettez évidemment pas quelque chose dans une vraie corbeille. Ce ne sont que des abstractions du code logiciel sous-jacent.

L’abstraction va encore plus loin que cela : le code logiciel est une abstraction du langage d’assemblage et du code machine de l’ordinateur, qui est lui-même une abstraction du matériel de l’ordinateur.

La clé à retenir ici est que ces couches d’abstraction permettent à pratiquement n’importe qui d’utiliser des ordinateurs, qui sont assez complexes sous le capot, dans leur vie quotidienne.

Exemples d’interface graphique

Vous n’avez pas besoin de chercher bien loin des exemples d’interfaces utilisateur graphiques – vous en utilisez une en ce moment. La plupart des sites Web, des applications Web, des logiciels (par exemple, Microsoft Word et Apple Music), des navigateurs Web (par exemple, Chrome et Internet Explorer) et des systèmes d’exploitation (par exemple, Windows, macOS, iOS et Android) ont des interfaces graphiques.

Souvent, différentes interfaces graphiques sont superposées les unes dans les autres. Par exemple, si je diffuse de la musique à l’aide de Spotify dans mon navigateur Web, je travaille avec l’interface graphique de l’application Web Spotify (en orange ci-dessous), qui se trouve dans l’interface graphique du navigateur Google Chrome (en vert), qui se trouve dans l’interface graphique du système d’exploitation de mon Mac.

En zoomant sur l’interface de Spotify, nous voyons quelques exemples de composants communs de l’interface graphique, comme les boutons, les menus et les curseurs :

utilisez probablement aussi un smartphone, qui a sa propre interface graphique pour son système d’exploitation et différentes interfaces graphiques pour chacune de ses applications. Tous les sites Web populaires adaptent leurs interfaces graphiques à la taille de l’écran sur lequel ils se trouvent. C’est ce qu’on appelle la conception réactive et c’est une considération essentielle dans la conception d’interface graphique aujourd’hui.

Avantages de l’interface graphique

Aujourd’hui, chaque produit avec un écran a une interface graphique. Voici pourquoi:

• Convivialité : les interfaces graphiques sont plus intuitives pour la plupart d’entre nous que les interfaces textuelles, suffisamment pour que même ceux qui ont une connaissance très limitée des ordinateurs puissent les utiliser sans apprendre un langage de codage ou des commandes informatiques.
• Efficacité : les interfaces graphiques permettent aux utilisateurs d’effectuer des tâches plus rapidement et plus facilement. Une tâche qui prendrait plusieurs commandes tapées dans une CUI peut être réalisée en quelques clics de souris dans une interface graphique.
• Clarté : les interfaces graphiques indiquent clairement ce que fait chaque élément visuel et fournissent aux utilisateurs un retour visuel pour indiquer si leurs actions sont réussies ou non.
• Esthétique : les interfaces graphiques sont visuellement plus attrayantes pour nous que le texte brut, et les développeurs ont beaucoup plus de contrôle sur leur personnalisation visuelle pour créer une expérience utilisateur agréable.
• Accessibilité : dans de nombreux cas, les interfaces graphiques sont plus accessibles aux utilisateurs handicapés et limités.

Inconvénients de l’interface graphique

Les interfaces utilisateur graphiques sont omniprésentes dans l’informatique personnelle, mais elles ne sont pas universelles. Certains utilisateurs préfèrent les interfaces textuelles, comme l’exécution d’actions via la ligne de commande. Voici quelques inconvénients mineurs des interfaces graphiques par rapport aux autres interfaces :

• Vitesse : les interfaces graphiques sont plus lentes et nécessitent plus de puissance que les interfaces textuelles.
• Utilisation de la mémoire : les interfaces graphiques nécessitent plus de mémoire informatique que les interfaces textuelles.
• Manque de flexibilité : généralement, un utilisateur doit travailler dans les limites d’une interface graphique et ne peut pas modifier ses fonctionnalités. Avec les interfaces textuelles, il est facile d’installer des packages avec de puissantes commandes personnalisées.
• Inefficacité : Oui, l’efficacité est un avantage majeur des interfaces graphiques pour la plupart. Cependant, de nombreux utilisateurs férus de technologie trouvent qu’il est plus efficace d’exécuter des commandes dans une CUI. De plus, les commandes CUI peuvent être automatisées.
• Construction : les interfaces graphiques doivent être construites par une équipe de conception et de développement, ce qui prend du temps et des ressources supplémentaires.

GUI : comment la plupart des gents utilise les ordinateurs

Les interfaces utilisateur graphiques sont si répandues aujourd’hui que nous les tenons pour acquises.Cependant, il fut un temps avant les interfaces graphiques où beaucoup moins de personnes utilisaient des ordinateurs. L’avènement de l’interface graphique a marqué le passage d’un passe-temps de niche pour les geeks de la technologie à la nouvelle révolution technologique que nous avons vue se dérouler au cours des 30 dernières années.

C’est pourquoi il est important de prendre du recul et d’apprécier tout le travail qui a été fait pour rendre les ordinateurs si utilisables. En tant que designer vous-même, c’est à vous de découvrir où nous allons ensuite.