Interface graphique : que doit contenir une interface uti­li­sa­teur ?

Les con­cep­teurs de site Internet et les dé­ve­lop­peurs de logiciels sont familiers avec le terme d’interface uti­li­sa­teur. Les nom­breuses abré­via­tions comme UI (de l’anglais user interface pour interface uti­li­sa­teur), GUI (graphical user interface pour interface graphique) ou encore UX (User ex­pe­rience pour l’ex­pé­rience de l’uti­li­sa­teur) té­moig­nent de la com­plexité de ce sujet. Pour justement obtenir une bonne ex­pé­rience uti­li­sa­teur, l’interface graphique et l’ergonomie Web sont désormais au centre des préoc­cu­pa­tions aussi bien pour les sites Web que pour l’uti­li­sa­tion d’un logiciel. Cependant nombreux sont ceux qui se demandent ce qu’est au juste une interface uti­li­sa­teur. Et pourquoi celle-ci est-elle un facteur-clé du succès ou de l’échec d’un site Web ? Notre article va apporter des in­for­ma­tions de base sur la bonne ergonomie Web et définir exac­te­ment ce qu’est l’interface uti­li­sa­teur.

L’interface uti­li­sa­teur, souvent abrégée par UI est un type d’interface qui permet aux personnes d‘interagir avec des machines ; c’est une sorte de jonction entre une personne et une machine. Ainsi, l’interface uti­li­sa­teur vous permet d’utiliser un or­di­na­teur, pour par exemple passer une commande, ou bien d’utiliser une ap­pli­ca­tion sur votre smart­phone, etc. L’UI comporte tous les éléments d’une surface que l’uti­li­sa­teur peut voir et avec lequel il peut interagir. Ceci va de la simple ligne de commande texte jusqu’à des in­ter­faces gra­phiques complexes. Dans le même temps, l’interface uti­li­sa­teur permet à la machine d’envoyer un retour, une réponse à l’uti­li­sa­teur : c’est de cette façon que ce dernier peut voir si son action a été prise en compte par la machine ou non.

Bien évi­dem­ment, l’UI est très liée à la facilité d’uti­li­sa­tion et à l’ergonomie d’un site Web ou d’un logiciel. Cependant il ne s’agit plus sim­ple­ment de créer une interface uti­li­sa­teur utile et pratique, les aspects es­thé­tiques prenant de plus en plus d’im­por­tance. L’interface uti­li­sa­teur est donc né­ces­saire et pri­mor­diale pour une bonne ex­pé­rience uti­li­sa­teur : c’est l’ex­pé­rience d’uti­li­sa­tion d’une personne avec un site Web ou un logiciel. Le but de chaque web­de­sig­ner ou dé­ve­lop­peur Web est donc de poser les bases d’une bonne ex­pé­rience uti­li­sa­teur avec une interface uti­li­sa­teur la plus intuitive possible. Pour cela, le recours à une interface graphique est souvent la meilleure solution, de même que recourir à des in­ter­faces uti­li­sa­teur no­va­trices qui fa­ci­li­tent et sim­pli­fient l’in­te­rac­tion avec les or­di­na­teurs et les autres appareils.

Depuis l’invention de l’or­di­na­teur, des méthodes de plus en plus avancées d’in­te­rac­tion homme-machine ont été dé­ve­lop­pées. Il existe désormais plusieurs types d’UI. Au tout début de ce dé­ve­lop­pe­ment on trouve les simples in­ter­faces en ligne de commande (CLI), mais de nom­breuses in­no­va­tions tech­niques ont conduit à une uti­li­sa­tion plus légère et plus directe, si bien que les in­ter­faces uti­li­sa­teur na­tu­relles (NUI) sont également utilisées. Même le contrôle de dis­po­si­tifs par la captation et la tra­duc­tion des signaux cérébraux est désormais possible et cette piste est même de plus en plus explorée. Ainsi, nous vous pré­sen­tons ci-dessous un petit tour d’horizon des in­ter­faces uti­li­sa­teur les plus im­por­tantes ainsi que leurs par­ti­cu­la­ri­tés :

Aux débuts d’Internet, l’interface uti­li­sa­teur était, il faut bien le dire, assez ru­di­men­taire. Seule une ligne de commande et une invite de commande (ou prompt) pour afficher la position actuelle ornaient un écran noir, comme par exemple avec le premier or­di­na­teur MS-DOS. A l’aide de quelques commandes tapées, il était donc possible de com­mu­ni­quer avec l’or­di­na­teur via une interface de ligne de commande. Après le trai­te­ment de la demande, le résultat ou trai­te­ment est aussi affiché sous forme de texte. C’est la plus ancienne des in­ter­faces con­ver­sa­tion­nelles pour or­di­na­teurs et elle est évi­dem­ment obsolète aujourd’hui. Cependant, elle reste encore utilisée dans le logiciel cmd.exe par exemple, pour les systèmes d’ex­ploi­ta­tion Windows, bien que la syntaxe soit encore largement basée sur les ancêtres de DOS. Le contrôle via une CLI (de l’anglais command line interface) se fait ex­clu­si­ve­ment via le clavier, une souris n’est donc pas né­ces­saire.

Les in­ter­faces uti­li­sa­teur de texte sont bien plus con­for­tables. Ici encore, l’in­te­rac­tion avec l’or­di­na­teur n’est cependant réalisée qu’avec le clavier. Le TUI (de l’anglais Text user Interface) marque la tran­si­tion entre des in­ter­faces de lignes de commandes pures aux in­ter­faces gra­phiques. Le terme même a été établi ré­tros­pec­ti­ve­ment, de sorte de pouvoir dis­tin­guer les TUI des in­ter­faces CLI et in­ter­faces gra­phiques.

La dif­fé­rence avec une interface en ligne de commande est le fait que l’interface utilise l’écran en entier et qu’elle n’est pas limitée au trai­te­ment ligne par ligne. Toutefois, l’interface, comme son nom l’indique, fonc­tionne toujours en mode texte. Les pro­grammes ont gé­né­ra­le­ment 256 ca­rac­tères dis­po­nibles. TUI est encore utilisé par exemple dans les chargeurs de démarrage ou les pro­grammes d’ins­tal­la­tions BIOS (Basic Input Output System ou système élé­men­taire d’entrée/sortie).

Les in­ter­faces gra­phiques cons­ti­tuent aujourd’hui la norme. Un logiciel est désormais actionné par l’in­ter­mé­diaire de commandes gra­phiques et des symboles qui sont souvent inspirés par des objets du « monde réel ». La majorité des uti­li­sa­teurs ont recours à la souris et au clavier comme unité de commande, et de plus en plus fré­quem­ment aux capteurs pour les écrans tactiles. Avec l’interface graphique, les icônes peuvent se déplacer : comme le bureau ou les fenêtres. Avec la souris ou en touchant l’écran tactile, les éléments souhaités peuvent être sé­lec­tion­nés et ouverts par un simple clic ou une simple pression.

La con­cep­tion graphique s’appuie prin­ci­pa­le­ment sur le bureau analogue tra­di­tion­nel. Le résultat : tous les éléments peuvent être fa­ci­le­ment iden­ti­fiés et l’opération est plus intuitive que par exemple la liste de commandes d’une interface en ligne de commande. Les uti­li­sa­teurs, même les plus inex­pé­ri­men­tés, com­pren­nent ra­pi­de­ment les fonctions des icônes : en effet, une corbeille ou une icône sym­bo­li­sant une lettre ne né­ces­si­tent pas d’ex­pli­ca­tions sup­plé­men­taires. Cette uti­li­sa­tion des symboles est devenue un standard pour les in­ter­faces uti­li­sa­teur. Il n’existe guère d’in­ter­faces gra­phiques dont les icônes d’outils ne se réfèrent pas aux objets du monde réel, par exemple une gomme, un stylo ou une brosse, etc.

Même si les in­ter­faces gra­phiques sont utilisées presque partout, le dé­ve­lop­pe­ment d’in­ter­faces uti­li­sa­teur n’a pas encore atteint sa limite avec les in­ter­faces gra­phiques : en effet, avec le VUI (de l’anglais voice user interface), l’in­te­rac­tion avec les or­di­na­teurs ou les machines est possible via le contrôle vocal. Chaque système d’ex­ploi­ta­tion offre désormais une interface uti­li­sa­teur de ce type : Siri pour Apple, Cortana pour les versions récentes de Windows, et même la recherche Google qui fonc­tionne désormais via le contrôle vocal. Ainsi, les uti­li­sa­teurs peuvent tra­vail­ler plus ef­fi­ca­ce­ment en ouvrant des ap­pli­ca­tions par la parole ou en dictant un texte qui peut s’écrire au­to­ma­ti­que­ment. La commande vocale offre in­dé­nia­ble­ment plus d’ac­ces­si­bi­lité.

Avec une interface uti­li­sa­teur naturelle ou NUI (de l’anglais natural user interface), la com­mu­ni­ca­tion avec une machine est par­ti­cu­liè­re­ment intuitive. Un NUI peut être considéré comme un pro­lon­ge­ment de l’interface graphique et de l’interface VUI : en effet cette interface in­te­rac­tive répond aux gestes, mou­ve­ments et à la voix. En outre, cette interface s’appuie sur la re­con­nais­sance des visages et des objets. Divers capteurs, caméras et mi­cro­phones per­met­tent la com­mu­ni­ca­tion avec la machine dans une grande variété de formes. De nombreux smart­phones et tablettes actuels sont de plus en plus tri­bu­taires de la tech­no­lo­gie NUI ; la console Wii de Nintendo l’exploite notamment pour obtenir une nouvelle manière de jouer.

En 2011, la pré­sen­ta­tion d’un projet de Microsoft a reçu un accueil en­thou­siaste : cette nouvelle tech­no­lo­gie qui porte le nom d’OmniTouch permet de projeter des écrans tactiles sur toutes les surfaces ima­gi­nables. OmniTouch est basé sur le con­trô­leur de mouvement Kinect de Microsoft qui a été lancé à l’époque pour la Xbox 360 pour con­cur­ren­cer la console Wii de Nintendo. De plus, ce programme utilise un pro­jec­teur par laser et une caméra spéciale. Cette forme spé­ci­fique d’interface uti­li­sa­teur naturelle est également dé­ve­lop­pée pour une uti­li­sa­tion mobile, où le matériel peut être porté sur l’épaule.

En plus des formes quo­ti­diennes de l’UI, il existe aussi des uti­li­sa­tions et des in­no­va­tions qui ne sont pas encore lancées sur le marché de masse, comme par exemple l’interface uti­li­sa­teur tangible (IUT), le per­cep­tual user Interface (PUI) ou encore l’interface neuronale directe (BCI).

• Avec l‘interface uti­li­sa­teur tangible (TUI), l’in­te­rac­tion avec une machine est réalisée avec des objets physiques comme des balles, des dés ou tout objet qui peut être manipulé (tourné, pressé etc.) dé­clen­chant ainsi des mé­ca­nismes ou ré­cu­pé­rant des in­for­ma­tions nu­mé­riques. Son uti­li­sa­tion reste assez ludique et encourage l’in­te­rac­tion. L’interface uti­li­sa­teur tangible est notamment utilisée dans les musées et les ex­po­si­tions.

• Le dé­ve­lop­pe­ment des per­cep­tual user interface (PUI) en est encore à ses bal­bu­tie­ments, mais il est de plus en plus poussé par la science. Il s’agit d’une interface uti­li­sa­teur axée sur la per­cep­tion, une sorte de com­bi­nai­son de VUI, GUI et de la détection élec­tro­nique des gestes pour interagir avec un or­di­na­teur.

• L’interface neuronale directe (BCI de l’anglais Brain computer interface) n’est plus de la science-fiction. En effet désormais, les ondes cé­ré­brales sont mesurées avec des élec­trodes, et les al­go­rithmes sont traduits en commandes de contrôle. Les premiers succès de la recherche sont déjà très pro­met­teurs, comme l’illustre l’exemple du patient américain paralysé qui peut contrôler un bras robotisé avec sa pensée. L’interface neuronale directe va sans doute ré­vo­lu­tion­ner à l’avenir les in­te­rac­tions entre la machine et l’homme.

Chaque con­cep­teur de site Web ou dé­ve­lop­peur de logiciel doit être plei­ne­ment impliqué quand il s’agit de l’interface uti­li­sa­teur. En effet, si vous souhaitez inciter les visiteurs de votre site Web à revenir ou les uti­li­sa­teurs de votre ap­pli­ca­tion à continuer de l’utiliser, il est important de réfléchir à la manière d’utiliser un produit pour que ce dernier soit le plus intuitif possible et simple d’uti­li­sa­tion. Pour cette raison, il est tout d’abord essentiel de dé­ter­mi­ner et de connaître votre public cible. La con­cep­tion de l’UI doit en effet dépendre et être adaptée au public cible. Ha­bi­tuel­le­ment, cette première étape est réalisée sur l’interface graphique : la fonc­tion­na­lité, la facilité d’uti­li­sa­tion, l’es­thé­tique, la rapidité et la li­si­bi­lité sont des critères décisifs pour une bonne ex­pé­rience uti­li­sa­teur et ergonomie web. Lorsque vous tra­vail­lez sur l’interface graphique, vous devez toujours garder à l’esprit l’uti­li­sa­bi­lité : en effet si une ap­pli­ca­tion ou un site Web est difficile à utiliser, une con­cep­tion es­thé­ti­que­ment at­trayante seule ne saura pas réussir à con­vaincre un uti­li­sa­teur de votre offre Web. Afin d’optimiser le site Web ou l’ap­pli­ca­tion, des tests détaillés sont gé­né­ra­le­ment né­ces­saires. Des études avec des uti­li­sa­teurs peuvent également fournir des résultats per­ti­nents et utiles comme les mesures tech­niques par l’in­ter­mé­diaire de l’analyse Heatmap. L’uti­li­sa­bi­lité est ainsi vi­sua­li­sée : le com­por­te­ment de l’uti­li­sa­teur est suivi au clic par clic, dé­fi­le­ment, mouvement de la souris etc. Le regard peut même être en­re­gis­tré avec certains outils et présenté par la suite sous la forme de gra­dua­tions de couleurs. Ce n’est que dans l’étape suivante que le point de vue es­thé­tique est pris en compte. Less is more : la sobriété est pré­fé­rable à la com­plexité. Le design doit soutenir la fonc­tion­na­lité de l’interface uti­li­sa­teur. En con­sé­quence, la con­cep­tion doit également être claire et struc­tu­rée. Ce qui ne signifie pas que le designer ne doit pas faire appel à sa créa­ti­vité, il est seulement né­ces­saire de connaître au préalable les habitudes d’uti­li­sa­tion du groupe cible et de ne pas res­treindre ou han­di­ca­per la fonc­tion­na­lité de la con­cep­tion.

Prenons un exemple simple, le symbole d’un papillon : au niveau es­thé­tique, il est gé­né­ra­le­ment considéré comme beau et renvoie une image positive pour de nombreux groupes cibles. Toutefois, si le symbole du papillon est utilisé pour l’icône « en­re­gis­trer », alors le design ou l’es­thé­tique prime sur la con­cep­tion, l’in­tui­ti­vité. En effet, personne n’associe un papillon avec un processus de stockage. Par contre, une icône re­pré­sen­tant une disquette est très ra­pi­de­ment comprise et associée au processus de stockage, car même si la disquette est un support de stockage depuis longtemps obsolète, elle reste malgré tout utilisée comme symbole pour n’importe quel processus de stockage. Les uti­li­sa­teurs, en effet, s’attendent à voir ce symbole et re­cherchent ins­tinc­ti­ve­ment ces icônes bien connues. En con­clu­sion, il est donc important de tenir compte des con­ven­tions et des habitudes au niveau des icônes et des symboles afin de garantir une bonne ex­pé­rience uti­li­sa­teur, et avoir au final une interface uti­li­sa­teur gra­phi­que­ment intuitive et largement com­pré­hen­sible.

Cet exemple montre qu’en tant que con­cep­teur Web ou dé­ve­lop­peur de logiciel, il est né­ces­saire de toujours re­cher­cher un équilibre entre l’es­thé­tique et la fonc­tion­na­lité, puisque l’op­ti­mi­sa­tion de l’interface uti­li­sa­teur est cruciale pour apporter aux uti­li­sa­teurs la meilleure ex­pé­rience possible et une bonne ergonomie web. Tout dépend évi­dem­ment de l’orien­ta­tion et du but de votre projet Web. Mais glo­ba­le­ment, la recherche prin­ci­pale consiste à engendrer un maximum de con­ver­sions et avoir de bonnes re­com­man­da­tions ou, pour un logiciel, obtenir une com­mer­cia­li­sa­tion vaste et rapide.

Par l’in­ter­mé­diaire de l’interface graphique, l’in­té­gra­tion d’in­ter­faces uti­li­sa­teurs sup­plé­men­taires est également très utile : par exemple, un contrôle vocal d’une ap­pli­ca­tion ou la pos­si­bi­lité d’utiliser un écran tactile sur un or­di­na­teur portable assure plus d’ac­ces­si­bi­lité et permet une meilleure ex­pé­rience uti­li­sa­teur.

Une bonne interface graphique a aussi un impact positif sur votre ré­fé­ren­ce­ment naturel (SEO). Si les uti­li­sa­teurs naviguent con­for­ta­ble­ment sur votre site Internet et y passent plus de temps, c’est un facteur important puisque la durée de visite d’un site est désormais prise en compte par les moteurs de recherche pour estimer la per­ti­nence d’un site Internet pour chaque requête. Par con­sé­quent, lors de la con­cep­tion de l’interface graphique de votre site Web, vous devez toujours vous mettre à la place d’un uti­li­sa­teur qui visite votre projet Web pour la première fois. En effet, s’il ne trouve pas ra­pi­de­ment ce qu’il souhaite lors d’une première visite, il risque de quitter le site ra­pi­de­ment et de chercher des al­ter­na­tives. De même, une na­vi­ga­tion intuitive est cruciale pour le dé­ve­lop­pe­ment de logiciels. Une bonne na­vi­ga­tion peut être par exemple réalisée par le biais de liens internes ap­pro­priés et utiles qui per­met­tent aux visiteurs de cliquer sur votre site. Ces liens sont aussi utilisés par les robots d’in­dexa­tion des moteurs de recherche. Le chemin doit toujours être clair et pas trop long. Une mesure souvent ju­di­cieuse est par exemple de recourir à la na­vi­ga­tion dite de fil d’Ariane (image tirée de la my­tho­lo­gie grecque, en anglais on utilise le terme bread­crumb qui signifie miette de pain et fait référence au conte de Hansel et Gretel des frères Grimm), cette ergonomie Web rend l’interface uti­li­sa­teur beaucoup plus agréable car le visiteur conserve un aperçu et peut donc savoir exac­te­ment où il se trouve sur le site et comment il peut revenir en arrière. Les barres de menu affichent le chemin parcouru sur le site. Dans un magasin en ligne pour vêtements par exemple cela peut res­sem­bler à : accueil – homme – vêtements – jeans/pantalons – jeans. Ha­bi­tuel­le­ment, une na­vi­ga­tion de type fil d’Ariane est située cen­tra­le­ment au-dessus du contenu de la même manière que notre guide digitale. Pour plus d’in­for­ma­tions sur les liens Internet du point de vue SEO et sur la bonne structure d’un site Web, vous pouvez lire notre article sur les bases du SEO.

Comme il existe de nombreux types d’in­ter­faces uti­li­sa­teurs, une seule liste serait bien in­suf­fi­sante pour illustrer toutes les meil­leures pratiques pour chaque genre. Les exemples de con­cep­tion Web suivants il­lustrent donc la mise en œuvre des lignes di­rec­trices de base pour une interface uti­li­sa­teur intuitive.

Le for­mu­laire d’ins­crip­tion est très simple. Seuls une adresse email et un mot de passe sont né­ces­saires. C’est donc largement plus agréable que les for­mu­laires d’ins­crip­tion in­ter­mi­nables. Il est de plus possible de se connecter sim­ple­ment via Google : aucun compte distinct n’est requis. L’USP (unique selling pro­po­si­tion) c’est-à-dire la promesse est im­mé­dia­te­ment mise en évidence : avoir vos notes toujours à portée de main et de manière syn­chro­ni­sée. La page d’accueil montre aussi les dif­fé­rents scénarios d’uti­li­sa­tion d’Evernote comme par exemple au bureau, sou­lig­nant ainsi les ca­rac­té­ris­tiques de base du produit sans toutefois perturber la facilité d’uti­li­sa­tion et la na­vi­ga­tion du site Internet.

Evernote est une ap­pli­ca­tion native pour quasiment toutes les pla­te­formes. L’interface graphique de l’ap­pli­ca­tion Web est réactive et adaptée pour toutes les tailles d’écran. Cette décision de con­cep­tion de l’interface uti­li­sa­teur apporte une meilleure ex­pé­rience uti­li­sa­teur car cette ap­pli­ca­tion peut être utilisée avec tous les appareils, n’importe quand et de n’importe où.

Les icônes d’ap­pli­ca­tions pour YouTube, Ac­tua­li­tés, Maps etc. sont visibles en un seul clic et faciles à trouver. Elles sont simples à com­prendre et logiques, et sou­lig­nent la fonction res­pec­tive de chaque ap­pli­ca­tion. L’in­té­gra­tion d’une interface VUI (Voice User Interface) est re­mar­quable. En effet, la recherche de Google peut être in­té­gra­le­ment réalisée via la commande vocale : c’est idéal pour une uti­li­sa­tion sur l’ap­pli­ca­tion mobile. Il suffit pour cela d’activer sim­ple­ment la commande « Ok Google » dans les réglages et, à l’ouverture de l’ap­pli­ca­tion de répéter « OK Google » ou d’appuyer sur l’icône re­pré­sen­tant un mi­cro­phone ; Google est en­tiè­re­ment uti­li­sable après avoir effectué ces étapes de la recherche vocale.

Selon que l’on sé­lec­tionne le guide normal ou le guide pour les ad­mi­nis­tra­teurs, chaque uti­li­sa­teur obtient une pré­sen­ta­tion des domaines et des questions per­ti­nentes avec une as­sis­tance. La na­vi­ga­tion est fluide, en un simple clic une rubrique s’ouvre sur la droite offrant une catégorie plus spé­ci­fique : la page ouverte défile ensuite du haut vers le bas. Des flèches sont uti­li­sables pour retourner en arrière ou avancer, afin de faire un saut en arrière rapide ou bien pour ap­pro­fon­dir un sujet. De plus, la table des matières est visible en un seul clic. Les icônes et les il­lus­tra­tions sont agréables, ludiques et claires, avec des tons pastel. La na­vi­ga­tion reste pratique, l’interface graphique alliant par­fai­te­ment l’es­thé­tique et la facilité d’uti­li­sa­tion.