Dans un monde d’interfaces

Comment concevoir des interfaces pour des sites web, des applications ou encore d’autres types de solutions ?

Poser le problème

Concevoir une solution, c’est avant tout se poser les bonnes questions. Avant même de parler de technique, il faut être capable de définir son concept. L’objectif de cet article n’est donc pas de vous apporter un regard technique en design graphique, mais plutôt de poser les premiers jalons d’un cheminement mental.

Qu’est-ce qu’une interface ?

Une interface permet des échanges et des interactions entre deux acteurs. C’est souvent un moyen de communication entre un homme et une machine. Elle rend l’usage d’un produit ou d’un service possible. Par exemple, l’interface d’un distributeur m’offre la possibilité de retirer de l’argent facilement. La plateforme numérique de ma télévision me permet d’accéder à de la location de film. Je peux faire mes courses en ligne grâce à une application mobile développée par un supermarché. Les exemples ne manquent pas dans un système économique de plus en plus “serviciel”.

Avant de parler d’interface, parlez-moi de service

Mais n’oublions pas que l’interface n’est qu’un moyen, une intermédiation entre un prestataire de service et ses utilisateurs. Une interface performante, c’est donc avant tout s’assurer de la performance du service. Si je n’ai qu’une interface bien pensée, je n’aurai que la moitié du billet de 500 ! Avant de concevoir, il faut donc se poser quelques questions essentielles : Qui sont les utilisateurs de mon service ? Quels sont leurs besoins, leurs usages, leur environnement ? En quoi mon service va-t-il résoudre leur problème ? Pourquoi aurait-il intérêt à utiliser ma solution ?

Concevoir pour les utilisateurs

Un des fondements de la pensée design consiste à concevoir une solution à partir de l’analyse des utilisateurs. Il s’agit de comprendre leurs contextes, leurs besoins, leurs buts, et leurs motivations pour construire des solutions adaptées à leurs usages. Il ne s’agit plus de produire en fonction de nos propres idées, mais en fonction du véritable besoin de l’utilisateur.

Difficile de designer un produit pour une personne âgée lorsque l’on est un trentenaire ultra connecté non ? Nous n’avons pas les mêmes usages, pas les mêmes besoins et notre façon d’appréhender le monde est différente. La clé, c’est rentrer en empathie avec les “gens” pour les comprendre au-delà de simples hypothèses. Designer une interface, et même au-delà, un service, c’est donc avant tout une question de posture.

Concevoir des interfaces intuitives

On dit souvent d’une interface réussie qu’elle est « intuitive ». Mais concrètement, qu’est-ce que cela sous-entend ? Premièrement, l’utilisateur doit être capable de comprendre la fonction du service à travers l’interface dans les premières secondes. À quoi sert-elle ? Quel problème va-t-elle me permettre de résoudre ? En suite, celui-ci doit être en mesure de comprendre rapidement son usage ; c’est-à-dire, comment je m’en sers ?

C’est l’affordance cognitive. Autrement dit, la capacité d’un objet à suggérer son usage et sa fonction. Concevoir une interface intuitive revient à se demander si le format, les boutons, les couleurs, la typographie, la mise en page donnent les réponses aux questions ci-dessus.

Définir le bon support

Lorsque l’on prototype une interface, on se pose toujours en premier la question du format. Quel support choisir entre le Smartphone, la tablette et l’ordinateur ?

À l’heure du responsive design, la solution semble toute trouvée , mais le débat ne se limite pas à une simple taille d’écran !

En effet, réfléchir aux supports, c’est d’abord définir le contexte (c’est-à-dire l’environnement dans lequel les utilisateurs vont interagir avec l’interface) pour définir la fonction, mais aussi l’usage de chacun d’eux.

Quel est le support le plus adapté si les gens utilisent ma solution à la maison, au bureau, dans les transports ou dans la rue ? Au calme ? Dans un milieu bruyant ? Ont-ils besoin de la même architecture et des mêmes fonctionnalités dans toutes les situations ?

Dans certains cas il n’est pas pertinent de développer des solutions sur tous les supports. Dans d’autres, il faut adapter l’expérience et même les fonctionnalités en fonction du “device”. Par exemple, le site “Medium” (sur lequel vous êtes en train de lire l’article ;-) propose une application iphone/ipad qui n’offre qu’une possibilité de lecture aléatoire des articles tandis que le site propose des collections d’articles avec une fonction d’écriture et de publication. Le support iphone/ipad n’est pas adapté pour l’écriture, donc pas besoin de développer une fonctionnalité supplémentaire.

Organiser l’espace dans son interface

Organiser l’espace de son interface consiste à repenser au service effectivement rendu, mais aussi aux différentes fonctions de sa solution. Quel service je souhaite rendre à mon utilisateur ? Comment est-ce que je souhaite le faire ? Est-ce que je souhaite l’informer, le faire acheter, le faire jouer, le faire apprendre, etc. Les fonctionnalités traduisent ensuite le “comment”. Par quels moyens le faire apprendre, jouer, lire, etc. ?

J’articule entre elles les fonctionnalités pour produire un système de navigation en cohérence avec mes objectifs et mes intentions. Ensuite, le jeu consiste à traduire la fonctionnalité en éléments tangibles (visuels ou sonores) puis de les positionner. Par exemple, une fonctionnalité de “contact” se matérialise par un bouton , des éléments de type texte, un formulaire, etc. Je positionne ensuite mes éléments en fonction de l’usage des utilisateurs et de l’importance de ma fonctionnalité.

Définir la nature des messages

Dans la plupart des cas, l’interface requiert du contenu, car il s’agit de transmettre des messages à l’utilisateur. Là encore, la nature des messages dépend de la fonction du service effectivement rendu et des questions à résoudre. De quelles informations ont-ils besoin pour comprendre la nature du service rendu ? Son intérêt ? Son usage ?

Ensuite, l’intention définit la forme et le ton du message. Est-ce que je souhaite convaincre, expliquer, raconter, informer, inciter, etc. ?

Vient finalement la question de la forme. Quel est le meilleur format pour transmettre mon message et optimiser son impact ? Faut-il utiliser du texte, de l’image, du son ou de la vidéo ?

Pour finir, il est important de créer un langage commun, compris par tous mes utilisateurs. Le vocabulaire utilisé dans mon interface n’est-il pas trop technique ? Les termes utilisés sont-ils compris par tous ? Ce dernier point, trop souvent négligé, reste pourtant primordial en terme d’usage de l’interface.

Travailler sur la couleur

Depuis toujours la couleur reste un élément fondamental dans la perception d’un message. Elle est souvent un raccourci permettant d’interpréter des messages beaucoup plus rapidement. Par exemple, dans le Code de la route la couleur bleue reste associée aux obligations tandis que le rouge nous rappelle une interdiction. Sur un site web, l’erreur se traduit par le rouge et la réussite par le vert. Souvent la couleur suffit à comprendre la nature du message.

Si la couleur nous permet d’interpréter des messages, elle reste une accroche visuelle puissante pour différencier des éléments dans un espace. Par exemple, je peux m’en servir pour attirer l’attention sur une fonctionnalité importante à travers un bouton d’une couleur spécifique et très contrastée avec le reste de l’interface.

La couleur c’est aussi (et souvent) respecter la charte de la marque qui a conçu le service. Mais c’est le faire avec discernement ! En effet, il ne s’agit pas de faire une interface entièrement bleue si l’on travaille pour Décathlon ou entièrement rouge si on travaille pour la Société Générale. Le bon sens devrait vous aider sur cette partie !

Ne pas négliger la typographie

Au même titre que la couleur, la typographie joue un rôle essentiel dans la transmission d’un message. La « typo », c’est d’abord une accroche visuelle et esthétique qui donne envie de lire. C’est un élément qui offre des bonnes conditions de lecture et améliore ainsi la lisibilité d’un message. Et le plus important c’est le sens qu’elle révèle et la promesse qu’elle peut faire. Une typographie sans-sérif suggère généralement un univers moderne tandis que le sérif traduit un côté plus traditionnel. Dès lors, attention à l’usage des typographies et aux différents niveaux de sens qu’elles véhiculent.

Pour conclure

En tant que « non-expert » du sujet, au sens scientifique du terme, je ne puis apporter une théorie exhaustive sur le sujet. Bien évidemment, il y a bien d’autres points à aborder dans la conception d’une interface. On pourrait parler notamment du niveau d’interactivité recherché, la question des animations pour rajouter de l’affordance ou encore l’usage du nombre d’or pour concevoir des structures “visuellement parfaites”. En bref, le sujet n’a pas fini d’être exploré d’autant plus que les technologies n’ont pas fini d’évoluer (et de fait, les interfaces aussi).

Aussi je pense qu’il est capital de rappeler que la conception n’est pas l’apanage des designers. Comme je l’ai dit tout au long de l’article, la conception d’une solution fonctionnelle s’étudie en amont, au niveau du concept et requiert le regard de plusieurs experts. La co-conception devient capitale. Donc messieurs designers et développeurs, marketeurs (et les autres aussi !), travaillons ensemble pour concevoir des produits d’exceptions !