>
>
>

L’interface au centre des métiers du web (G.U.I)

G.U.I, pour Graphic User Interface. Ces trois lettres ont la cote dans le petit monde du digital. En effet, bien que relativement récente, la réflexion G.U.I est en passe de devenir une étape indispensable dans toute création web. Cécile Tasquer, intervenante UX Design à l’ECV Digital Nantes et Laurent Duserre, directeur artistique pour l’agence Nouvelle Vague nous expliquent de quoi il s’agit…

 

UNE INTERFACE GRAPHIQUE ?

 

Une interface graphique est un ensemble d’éléments positionnés : menus, boutons, etc… Ils permettent à l’utilisateur d’interagir avec une machine ou un programme sans avoir à passer par un langage de programmation.

 

Aujourd’hui, la quasi-totalité des utilisateurs du web est confrontée à des interfaces graphiques. “Cela peut commencer dès le matin avec la consultation d’applications sur smartphone, puis dans les transports avec un jeu sur tablette, enfin sur un ordinateur avec un navigateur et des sites web. Les interfaces graphiques sont absolument omniprésentes”, illustre Laurent Duserre. Avec le développement des appareils mobiles, smartphones, tablettes et autres, les utilisations ont changé. Les temps d’interactions sont désormais extrêmement brefs et ponctuels (attente d’un bus, une pause au travail, un moment d’ennui). Ces courtes plages d’utilisations sont appelées “micro-moments”.

 

D’où la nécessité d’avoir des interfaces plus simples et intuitives. Tout se joue donc au moment de la conception, durant laquelle les designers s’efforcent de relever ce défi.  “Il faut susciter des réflexes visuels. Il faut que le système de navigation et l’information principale soient immédiatement compris et identifiables. Le maitre mot doit être la simplicité, c’est ce qui nous guide à chaque étape de notre travail de design.” explique Cécile Tasquer.

 

UX + UI = GUI

 

La recherche de la simplicité nécessite un processus de conception complexe mettant en jeu différents métiers du web. Tout d’abord, un User eXperience (UX) designer analyse les besoins et attentes des utilisateurs ciblés par l’interface (les « cibles »). Il transmet des recommandations en termes d’ergonomie et d’interface à l’User Interface (UI) designer. Celui-ci est chargé de transformer les recommandations de l’UX designer en propositions graphiques, d’organiser et de concevoir les différents éléments de l’interface. Une fois ce travail effectué, la maquette repasse dans les mains de l’UX designer, qui va la soumettre à différents tests pour valider son efficacité. “Nous effectuons des tests avec un panel d’utilisateurs : impact visuel, analyses de parcours sur l’interface, zone de clics, temps de réflexion etc… tout est passé au crible. Puis nous modifions notre maquette en fonction des résultats, et refaisons les tests pour valider nos modifications. Différentes itérations du même projet sont souvent nécessaires pour obtenir un résultat satisfaisant. On réussit rarement du premier coup ! Comprendre le problème, pourquoi on n’impacte pas la cible comme prévu, refaire des tests… C’est un processus parfois assez long, que l’on mène tout du long en collaboration avec les UI” détaille Cécile Tasquer.

Twitter_GUI_M1

Les métiers d’UX et UI designers sont donc intimement liés. À la suite des tests, ils établissent ensemble la GUI, équivalent numérique de la charte graphique du design “print”. Son but ? Définir précisément des codes pour l’interface: tel police pour tel menu, le style des boutons, l’inter-lettrage des titres, les couleurs etc… Cette véritable bible stylistique assure une cohérence graphique, facilite le travail de l’intégrateur web, la maintenance et la transmission du projet à d’autres équipes. “La rédaction de la GUI n’est pas la partie la plus fun de notre métier” avoue Cécile Tasquer, “mais cela clarifie la construction et permet d’éviter des abominations stylistiques !

Style_GUI_ECVDigital_Nantes

CONSEILS DE PRO

 

Voici quatre éléments indispensables pour une interface réussie.

 

1 Bien choisir ses éléments d’interface.

Pour qu’un utilisateur comprenne l’approche d’une interface, il faut qu’il se sente en terrain connu. Suivez les règles « communes » du web : une flèche sert à naviguer dans une page ou un menu, une croix ferme un élément, etc… Ne surchargez pas en boutons et pictogrammes ! Même si vos clients ont une tendance symptomatique à avoir « peur du vide », nous ne cesserons jamais assez de le répéter : le plus simple est le mieux. Allez à l’essentiel et rationnalisez, pas besoin de faire trois boutons de défilement en bas de page, un seul suffira amplement…

 

2 Soigner sa mise en page.

Idem que pour le point précédent, il est important de se baser sur des codes existant. Les utilisateurs possèdent tous des réflexes acquis au cours de leur vie numérique. Même si vous aspirez à révolutionner le web, il va falloir modérer vos ardeurs, au risque de totalement perdre l’utilisateur. Gardez comme objectif numéro un la simplicité de la lecture. Il est nécessaire de hiérarchiser vos informations grâce à différents styles. La typo, les interlignages et les inter-lettrages doivent être des indices pour l’internaute. Jouez avec les colonnes, pour donner du rythme, tout en étant vigilant à la cohérence. Évitez d’avoir trop de blocs, qui vont venir polluer votre contenu principal. Pensez responsive design, projetez-vous graphiquement avec les déclinaisons mobile et tablette !

Tweet_ECV_Digital_Nantes

3 Utiliser des éléments qui font sens.

Ne multipliez pas les codes graphiques. Position, alignement, couleur, et typo devront être cohérents sur l’ensemble de votre interface. Vous pouvez tenter de sortir des sentiers battus mais il faut que cela soit justifié, pour un portfolio ou une agence créative par exemple, mais pas pour un site institutionnel. Une fois de plus…Allez à l’essentiel, vous faciliterez la vie de vos utilisateurs en leur faisant gagner du temps. Nommez les pictogrammes et leur signification pour que tous les utilisateurs comprennent de quoi il s’agit.

 

4 Se souvenir que l’utilisateur est humain.

Votre utilisateur est humain, comme vous ! Il peut être impatient voire “fainéant”. Facilitez- lui la vie si vous ne voulez pas le voir fermer la page. Guidez-le à chaque instant par des éléments visuels facilement reconnaissables et des suggestions. Raccourcissez au maximum les temps d’attente et de chargement. Faites des formulaires courts, en plusieurs étapes pour casser l’impression de longueur… Bref, faites simple !

 

Rédaction Maxime Horlaville – Bachelor 1