Jérémy Le Piolet - Blog

De l'importance d’une bonne interface utilisateur

On ne va pas se mentir, pour beaucoup de développeurs, coder une interface utilisateur, c’est aussi intéressant que de marcher pieds nus sur une planche à clous. Après tout, quel intérêt de passer 5 heures à essayer d’aligner deux boutons alors que c’est le traitement déclenché derrière qui compte vraiment ?

Résultat : une interface souvent mal structurée, difficilement utilisable et moche (il faut bien le dire), qui traduit tout l’intérêt que la personne lui portait. Pourtant, il y a beaucoup à gagner à passer du temps dessus. Elle peut même déterminer la réussite ou l’échec d’un projet.

Qu’est ce qu’une interface utilisateur ?

Histoire d’être sûr que l’on parle de la même chose, définissons ce qu’est une interface utilisateur. Une interface utilisateur est composée de deux mots : interface et utilisateur.

Une interface est un moyen de faire communiquer deux éléments disjoints. Une personne peut par exemple faire office d’interface : un technicien de hotline fait l’interface entre les clients et les développeurs en remontant des problèmes. En informatique, une API est une interface entre une application cliente et les traitements serveurs.

Un utilisateur, maintenant, est une personne qui utilise un service ou un appareil. Par exemple, les utilisateurs de la carte bancaire. En informatique, c’est la personne qui utilise le logiciel/site web.

L’interface utilisateur est donc le moyen de faire communiquer des utilisateurs avec un produit final. C’est ce qui va permettre à l’utilisateur d’utiliser le produit. Tout simplement.

Pourquoi est-ce important de disposer d’une bonne interface utilisateur ?

L’interface utilisateur est ce qui fait la jonction entre l’utilisateur et le produit. Mais après tout, on peut se dire que c’est le produit derrière qui est le plus important et que l’interface n’est qu’un moyen, non ? Pourquoi y passer autant de temps, sinon plus, que le produit ?

Tout simplement parce que, vos utilisateurs, ils ne verront que l’interface. Ils n’auront accès qu’à elle, ce sera leur seul point d’entrée. Et ce sera la seule chose qu’ils retiendront. Ils se moquent de savoir si derrière c’est un système Java, C++ ou NodeJs. Ce qui compte pour eux, c’est de réussir à l’utiliser. Et s’ils n’y arrivent pas, ils rejetteront votre produit, aussi bon soit-il.

J’ai eu l’occasion de travailler il y a quelques années sur un produit qui gérait des fichiers sous Linux. Sauf que le seul moyen de l’utiliser, c’était de lancer des scripts bash via une commande ssh sur un serveur dédié et de lire les résultats dans des fichiers texte. C’était très puissant mais pas vraiment le genre de produit que pourrait utiliser le quidam lambda !

Interface en ligne de commande
Un bel exemple d’interface inutilisable pour le commun des mortels – @Michael Stapelberg – Wikimedia Commons – CC BY-SA 3.0

Il ne faut donc surtout pas négliger ce point. Sur deux produits similaires, ce sera quasiment toujours celui avec la meilleure interface utilisateur qui gagnera, même si celui-ci est un peu moins performant.

Mais, en fin de compte, une interface utilisateur, ce ne sont que des composants et de jolies couleurs, non ?

Pas. Du. Tout.

Tout d’abord parce qu’une interface utilisateur, ce n’est pas que du graphique sur écran. Cela peut par exemple être des boutons physiques comme sur les automates bancaires. Ce peut aussi être des commandes vocales, qui se démocratisent de plus en plus via Siri, Cortana ou Google Assistant. Tout ce qui peut permettre à l’utilisateur d’utiliser le système est considéré comme de l’interface utilisateur.

Ensuite, le résultat graphique n’est que la partie émergée de l’iceberg. Faire une interface utilisateur, c’est prendre en compte un ensemble de petites choses qui formeront un tout cohérent. Actuellement (parce que ça change selon les modes), on appelle ça l’Ux Design (User eXperience Design).

Pour bien comprendre, voici une image d’illustration :

En haut, un bol de céréales, une bouteille de lait, une cuiller, des cornflakes, étalés les uns à côté des autres Ils représentent le produit. En bas, l'ensemble dans le bol représentant l'expérience.
Différence entre le produit et l’interface – @ed_lea

En haut, le produit. C’est votre service. Tel qu’il est fourni. Brut. En bas, l’expérience utilisateur qui rend le produit utilisable. C’est bien la réunion de tous les éléments qui rend le tout utilisable. Si on ne met pas les céréales et le lait dans le bol, c’est juste une bouteille de lait et des céréales.

Il en est de même pour une interface utilisateur : si on se contente d’aligner les boutons, ceux-ci restent juste des boutons. Ce n’est que si on arrive à les combiner en un tout utilisable qu’ils peuvent former une bonne interface utilisateur.

De toute façon, l’utilisateur sera capable de s’adapter !

Dans le meilleur des cas, voilà ce qu’il va se passer :

Une route contourne une pelouse. Sur la pelouse, un chemin est tracé, montrant le passage de multiples personnes qui coupent à travers la pelouse au lieu de prendre la route. Le chemin par la pelouse est un raccourci.
Design vs User Experience – CC By Sa 2.0 – @Kai Schreiber

On constate ici que les gens ont pris l’habitude de traverser la pelouse parce que c’est plus rapide que de contourner et de suivre l’allée bétonnée. Initialement, les concepteurs ont pensé que les utilisateurs suivraient les allées bétonnées. En pratique, les utilisateurs coupent par la pelouse parce que c’est plus court. On note une différence importante entre la façon dont a été pensée la voie et l’usage réel.

Il en est de même pour une interface utilisateur. Si vous n’offrez pas une expérience satisfaisante à vos utilisateurs, ils trouveront des moyens détournés pour utiliser votre produit. Avec le risque de tomber sur des cas d’usages non prévus et donc de générer des bugs. Bugs qui pourront, à leur tour, causer des crashs et vous obliger à relancer un serveur à 3h du matin un dimanche. Vous le voulez vraiment ?

Et ça reste le meilleur des cas. Bien souvent, l’utilisateur ne cherchera même pas à comprendre, il considérera que c’est trop complexe et abandonnera. Votre produit ne sera pas utilisé et sera décrié, juste parce que l’interface utilisateur n’a pas été suffisamment travaillée.

Alors, comment faire une bonne interface utilisateur rapidement et sans prise de tête ?

Rapidement et sans prise de tête, ça va être difficile. Il faut bien se rendre compte que la conception d’interface utilisateur est un travail à part entière qui demande du temps et des connaissances poussées : ça ne s’improvise pas comme ça !

De nombreux métiers (ergonome, UX/UI designer, psychologues, sociologues, etc. ) ainsi que de nombreuses techniques (étude utilisateur, maquettage, eye tracking, tests utilisateurs, etc.) existent pour concevoir et développer une interface utilisateur satisfaisante.

Il n’existe donc pas de méthode miracle, tout dépendra du projet, du contexte, de la cible. Et tout évolue également au fil du temps (comme le développement en fait). On ne s’improvise pas concepteur sur un coup de tête !

Il existe néanmoins quelques règles de base pour limiter les dégâts et offrir une expérience, certes pas optimale, mais satisfaisante.

À quel moment faut-il travailler sur l’interface utilisateur ?

Si l’on prend un cycle de développement classique, on peut le simplifier en 3 étapes :

Étapes du cycle de développement
Étapes du cycle de développement
  • La phase de conception. C’est là que l’on définit l’architecture du logiciel, que l’on pense modélisation, que l’on fait des choix techniques, etc.
  • La phase de développement. C’est là que l’on code et que l’on suit, grosso modo, les directives définies dans la phase de conception.
  • La phase de test et validation. C’est là que l’on vérifie que le produit développé est en adéquation avec la demande et est exempt de problèmes.

Que le cycle de développement soit en V ou agile et découpé en sprint, on en revient à ces 3 étapes.

La construction d’une interface utilisateur s’insère dans ces 3 phases, comme n’importe quel autre élément du futur produit :

  • Durant la phase de conception, on va aller de la définition des attentes à la conception de maquette.
  • Pendant la phase de développement, on va tout simplement implémenter les différentes maquettes et indications définies en phase de conception.
  • Enfin, en phase de test et validation, on va s’assurer que l’interface répond bien aux attentes et que les utilisateurs finaux savent l’utiliser.

De façon simplifiée, il n’y a pas beaucoup de choses à modifier dans les cycles de développement, il faut juste ajouter un peu de temps pour l’interface utilisateur.

Pourquoi est-ce important que les développeurs aient des notions dans la conception de l’interface utilisateur si des personnes dédiées existent ?

Primo, parce que toutes les sociétés n’ont pas les moyens de se payer un UX/UI designer à temps plein. Et que parfois, pour un ajout de fonctionnalités, il n’est pas toujours nécessaire de sortir l’artillerie lourde.

Deuzio, parce qu’on peut avoir les meilleurs des meilleurs en phase de conception, il n’empêche que ce sont les développeurs pendant la phase de développement qui ont le dernier mot. Et que s’ils ne sont pas sensibilisés aux problématiques d’interface utilisateur, ils ne comprendront pas forcément l’intérêt que le bouton soit décalé de 10 pixels sur la gauche.

Tertio, parce que les développeurs ont le point de vue technique que les concepteurs n’ont pas. Par exemple, seuls les développeurs sont capable de dire qu’une requête va mettre du temps à s’exécuter. En conséquence de quoi, le concepteur de l’interface va prévoir un message d’attente adapté. Sans cette information, le concepteur ne peut deviner le temps que prend la requête et ne peut donc pas proposer de message d’attente. Il faut donc que concepteurs d’interface et développeurs puissent dialoguer tout au long du projet.

Bref, si vous êtes développeur et que vous touchez aux interfaces utilisateur, il vous faut des notions dans le domaine. Et ça tombe bien puisque dans un prochain article, nous toucherons un peu à la méthodologie pour concevoir une interface utilisateur, histoire de mieux comprendre le tout.