fabernovel loader

23 mai 2017 | 4 min de lecture

Design

Pour designer une bonne interface, soyez appliqués !

Mathilde Maitre

Lead UX Designer


FABERNOVEL INNOVATE
Simple, accessible, belle, ludique, intuitive, déroutante ou surprenante … Autant de réponses apportées à la question «  c’est quoi une bonne interface ? » lors de la dernière session de la FABERNOVEL SCHOOL consacrée au design. Au-delà des tendances et de la sensibilité de chacun, Mathilde vous partage quelques bonnes pratiques à appliquer pour concevoir des interfaces.

On axe souvent le travail de design sur une recherche de l’effet « whaou »… Je vous comprends : l’interface est la partie visible de l’expérience utilisateur, celle que vont avoir vos utilisateurs entre les mains. Elle incarne la relation client ou vous permet de vendre votre produit. Néanmoins, elle doit leur permettre de réaliser leur action simplement et efficacement.

Les usagers sont de plus en plus exigeants, et quitteront un site ou une application s’ils ne leur permettent pas d’atteindre sans effort leur but. Au risque de vous décevoir, le travail de conception résulte d’un travail scolaire, exigeant et rigoureux. Voici quelques conseils pour vous permettre d’en concevoir à votre tour.

L’interface est le fruit d’un design maîtrisé (clair, bien structuré et cohérent) car rationalisé

En tant qu’utilisateur on n’en a pas forcément conscience mais ce qui fait qu’un site ou une application est simple, que les actions qu’ils permettent de faire sont comprises immédiatement et effectuées sans effort, est que le designer l’a conçu sous contraintes. Il a suivi un ensemble de règles et s’est appuyé sur des principes de conception :

1/ L’importance de la grille :

Quelque soit le format du support, l’interface utilisateur est conçue en s’appuyant sur une grille pour construire les pages : elle sert d’armature pour organiser la page et son contenu.

Une grille est constituée de colonnes et de repères verticaux et/ou horizontaux, séparés par des gouttières (les espaces entre les colonnes) permettant de structurer le contenu. Elle permet d’atteindre un équilibre harmonieux entre l’espacement et l’organisation des différents blocs. On obtient alors une page plus lisible et plus homogène.

Après avoir constitué sa grille, il s’agit maintenant de la « remplir » avec les différents blocs qui accueilleront les contenus (Textes, images, etc.)

2/ Un choix limité de patterns :

Les utilisateurs se sentent plus à l’aise lorsqu’ils retrouvent leurs repères ; on utilise ainsi un nombre limité et courants de patterns : c’est à dire qu’on représente ou on anime toujours de la même façon des éléments qui ont la même fonction. L’utilisateur prend ainsi ses marques, a la sensation de gagner du temps en comprenant le fonctionnement plus vite et s’en souvient plus longtemps.

Google Material Design, la bible UX de Google, rassemble l’ensemble des spécifications des composants d’une interface : composition, style, interaction. Suffisamment générique pour être multi-devices et illustré pour permettre de comprendre son usage.

Chaque composant a son propre pattern, immédiatement compris et actionnable, pour tous les supports. Ainsi, par exemple faire une recherche s’effectuera toujours de la même façon qu’on soit sur un des sites de Google (gmail, docs, etc) ou développé sous Android : le comportement du champ de recherche, l’affichage des résultats et jusqu’à leurs apparences sont normés.

3/ Un minimum d’éléments graphiques :

Chaque élément graphique (couleur, typographie, visuels, picto, etc.) doit participer à la compréhension de l’écran et des interactions.

Loin d’un travail d’artiste, qui jouerait avec sa palette graphique selon son intuition, le travail du designer résulte davantage d’une maîtrise de l’art de la composition et de la scénarisation pour diriger ou détourner l’attention en utilisant stratégiquement la couleur, les textures ou visuels. Doublé d’une bonne connaissance des possibilités techniques.

Concrètement, il s’agit de prendre moins d’éléments graphiques :

Par exemple pour la palette de couleurs : définissez la couleur principale de votre interface et cassez le rythme par une couleur tonique qui viendra porter l’attention sur les éléments clés de votre parcours ; ajoutez des teintes neutres pour définir les différentes zones et si besoin de créer des variations subtiles, éclaircissez ou assombrissez vos couleurs principales.

Pour les typographies, limitez-vous à deux dont chacune aura un rôle clair dans l’interface : corps de texte et boutons d’actions pour la première, titres pour la seconde par exemple. Puis faites varier les graisses et tailles pour apporter de la hiérarchie dans les écrans.

Et, enfin ajoutez des éléments graphiques supplémentaires (ombres, textures, images, traits, etc.) que s’ils permettent réellement de renforcer le sens.

Les règles à retenir :

  • une grille sur laquelle s’appuyer pour structurer et hiérarchiser les contenus et les actions,
  • des patterns choisis avec soin pour permettre à l’utilisateur de réaliser facilement toutes ses actions,
  • une palette d’éléments graphiques limitées (Deux typographies, deux couleurs principales) pour renforcer le sens et les interactions.

 

En résumé : ce qui se conçoit bien se comprend clairement (sic)

Ayez en tête ces règles, contraignantes au démarrage mais en définissant un cadre de conception clair, elles vous permettront in fine d’être plus créatif et de vous consacrer sur ce qui a de la valeur.

Car ce qu’on conçoit ce n’est pas seulement une interface, mais bien une expérience.

Le point de départ de la conception de toute interface est donc de bien comprendre les besoins et les comportements d’un utilisateur à un moment / à une action donnée. Puis de trouver la réponse formelle adaptée à la finalité ou l’objectif à atteindre : est-ce que l’objectif de ce site est de présenter un nouveau produit ? De permettre des opérations complexes en autonomie ? De poursuivre une conversation en ligne ?

Les meilleures interfaces sont celles qui sont presque invisibles pour l’utilisateur. Elles évitent les éléments inutiles, artificiels et privilégient clarté et cohérence et surtout prennent en considération les besoins utilisateurs.

Vous êtes intéressé(e) par la conception et la réalisation de parcours utilisateurs et de services innovants ? Ca tombe bien...

On recrute un UX Designer !
logo business unit

FABERNOVEL INNOVATE

FABERNOVEL INNOVATE explore et construit le futur de vos industries. À la vitesse des startups.

à lire