🌞 La météo sur France 3 Régions

Profitons du redesign de la page météo sur France 3 Régions pour analyser le processus de réalisation du design et plus précisément : la composition d’une interface utilisateur.

À partir du brief, des wireframes UX, jusqu’au design final, comment arrive-t-on à réaliser une interface graphique cohérente ? Comment créer quelque chose de beau et fonctionnel ? Les utilisateurs doivent pouvoir naviguer dans votre interface sans encombre, c’est aussi la responsabilité de l’UI. Alors, comment ? Voyons cela en détail…

TL;DR : le rendu visuel du produit est important pour les utilisateurs. C’est la première chose qu’ils vont voir. Si vos interfaces ne sont pas bien pensées et compliquées à utiliser, les utilisateurs ne reviendront pas une seconde fois.

La page météo : le processus de conception simplifié

Vous avez dit UI ?

La création d’une interface graphique est complexe car elle doit répondre à la demande client d’un côté et respecter les limites techniques qu’il peut y avoir sur le backend mais pas que… Il y a des enjeux importants à prendre en considération qui peuvent avoir un impact sur l’aspect fonctionnel ou graphique du produit fini.
D’un côté, l’UX est présent pour réaliser l’expérience globale de l’utilisateur, mais de l’autre, il y a l’UI, qui intervient à son tour pour donner l’identité visuel au produit. Ici, on va s’attarder sur cette dernière partie.

Ne pas confondre UX et UI bien que ces deux spécialités vont en fin de compte dans une même direction : donner vie à votre produit, ce n’est pas le même métier. Il faut les voir comme deux forces intrinsèquement liées qui vont, ensemble, donner vie et faire évoluer le produit.

Imaginez ça comme un film : l’UX serait l’écriture du scénario et l’UI la réalisation du film. Un film sans scénario est un mauvais film, et un film sans réalisation hé bien… vous voyez le truc !

“L’UX, l’UI, vous voyez la différence !” — Mr ADN

Un enjeu essentiel

Composés harmonieusement, les éléments graphiques vont faire naître une interface graphique. C’est ce à quoi va ressembler visuellement votre produit. La création d’interfaces ne se résume pas à piocher des couleurs juste parce que ça fait joli. C’est une étape majeure, car en tant que designer, rappelons le, vous avez une lourde responsabilité : votre produit va être destiné à des utilisateurs qui vont peut-être l’utiliser au quotidien.

Si l’UI est mal conçue alors vos utilisateurs s’en iront tout simplement. L’entreprise n’atteindra probablement pas ses objectifs de rendement et aura de mauvais retours, il faudra tout revoir. Vous l’avez compris, il peut y avoir des enjeux économiques importants et l’on entrevoit maintenant les risques qu’il peut y avoir pour une entreprise de manquer à ses objectifs.

Less is more !

En somme, l’UI n’est pas un processus mécanique où l’on aurait juste à cocher une case et hurler “c’est fait, au suivant !”. C’est un axe stratégique qu’il faut soigner dans vos projets. Malheureusement, je ne vais pas vous le cacher, il n’y a pas de formule magique qui dirait “voilà comment doit être un design pour que ça marche…”. En revanche, il y a des bonnes pratiques qui peuvent être appliquées et vont améliorer très certainement votre rendu final.

Ici, je parlerai essentiellement de l’UI et nous allons voir cela en détail, avec en fil rouge le design de la page Météo !

🌦️ Le début des problèmes

La plupart de mon temps, que ce soit dans l’élaboration du design ou dans la transformation d’une interface en code (l’intégration), l’activité peut se résumer à : j’ai un problème, il faut le résoudre. En d’autres termes, comment passer du point de départ au point d’arrivée ? De A à B ?

O.K, généralement quand on entame la construction d’une interface, le premier réflexe que l’on pourrait avoir est de trouver de l’inspiration sur des sites comme dribbble par exemple :

En fait, c’est une mauvaise idée et d’une manière générale je déconseillerais à tout le monde de vouloir chercher l’inspiration, du moins au début du projet. Pourquoi ?

Comme je l’ai dit, quand vous démarrez vous essayez de résoudre un problème. Le notre c’est : créer l’interface de la page météo.
Une fois fait, votre problème est résolu, bravo ! Mais, résumons. Entre le début et la fin de votre création, vous avez été confronté à des centaines de sous-problèmes qui entre-temps ont fait évoluer le produit…

Que ce soit le budget à respecter, les demandes du client, la stack technique, le mvp à honorer, l’audience à atteindre. Toutes ces réponses vont créer une kyrielle de questions sur la création de votre interface : De quelle manière dois-je mettre cette élément en avant ? Quelle couleur dois-je utiliser ? Quelle police de caractères ? Les différentes sections du design, la conception des pictos etc. Tout cela constitue au final votre solution, votre design.

Maintenant, vous saisissez que chercher l’inspiration, c’est-à-dire chercher des idées sur d’autres projets n’a pas vraiment de sens. Bien sûr, c’est indispensable de comprendre à terme ce qui a marché et ce qui n’a pas marché ailleurs en faisant de la veille. Mais retenez que sur le moment, les problèmes doivent être résolus entre vous, les clients et vos utilisateurs. C’est le point fondamental qu’il faut comprendre.

Concernant la météo ça aurait pu être facile : il y a des centaines et des centaines d’idées disponibles sur des sites graphiques. Mais dans chaque idée, toutes sont des solutions qui auront répondu préalablement à un problème en particulier.

Une question de gout ?

Certains diront, “vous savez les goûts et les couleurs…” C’est vrai, mais dans le processus de création d’une interface cela n’a pas tellement une grande importance. Oui, chaque individu aura une sensibilité particulière de ce qu’il verra ou non, mais en réalité, lors de l’élaboration d’une interface le choix des couleurs, de la mise en forme, n’est pas du à une décision esthétique personnelle du moment.

Créer une interface c’est appliquer un ensemble de règles cohérentes qui vont marcher concrètement : créer des composants graphiques en leur donnant du sens. Et pas seulement prendre une couleur juste parce qu’on la trouve cool.

Le contexte :

Connaître ses utilisateurs est primordial. Quand ils sont sur votre site, sont-ils stressés, perdus, fatigués ? Savoir pourquoi les utilisateurs vont précisément venir sur cette page est important, cela nous permet de centrer correctement le besoin et de concentrer notre interface sur des points précis, pour attirer l’attention du visiteur là où il le faut.

Dans notre cas, ils consultent la météo pour voir le temps qu’il fait aujourd’hui à différents moments de la journée. Logique ! Ou, le temps qu’il va faire plus tard, sur plusieurs jours, le temps qu’il fait dans d’autres régions / villes. Ou encore de l’actualité liée à la météo. Bien que la finalité reste la même : consulter la météo, il faudra grouper les éléments de même contexte entre eux, étudions cela…

Assez de théories, passons à la pratique !

Les 5 règles d’or du design d’interface

1. Grouper & montrer

Vous avez le pouvoir de guider l’utilisateur sans encombre au sein de votre interface, avec les outils qui sont à votre disposition. Grouper les éléments entre eux est un bon moyen de voir dès le premier coup d’oeil les différentes parties qui composent le design.

Ici on voit les différentes zones que l’on a vues plus haut :

Des zones de même contexte séparées distinctement

N’oubliez pas non plus d’être transparent avec vos utilisateurs, vous devez montrer clairement ce qui est une action ou non, sinon vous pouvez être sûr qu’elle ne sera jamais utilisée.

“Si la feature n’est pas visible, c’est qu’elle n’existe pas”

2. La couleur

Mettre des éléments en couleur est aussi intéressant pour attirer l’oeil du visiteur, mais ça ne fait pas tout ! S’il y a trop de couleurs alors l’effet sera perdu. La couleur est un outil puissant si elle est utilisée avec parcimonie.

Ici dans notre exemple la couleur primaire bleue — la couleur principale de la charte graphique — est utilisée pour indiquer les interactions qui existent, ce sont les Call To Action principaux. Il y en a peu, c’est l’essentiel. La couleur ici est fonctionnelle et non décorative.

À retenir : La couleur doit accentuer un élément. L’élément ne doit pas être dépendant de la couleur. Essayez de désaturer votre site pour voir. Les interactions doivent rester visibles et l’interface compréhensible.

“La couleur ne doit pas être une fin en soi”

Le reste de la couleur sera composé de nuances de gris utilisé comme contraste pour mettre en valeur l’élément principal : la météo du jour.

En savoir plus :

Color in Design Systems

3. Espacements & alignements

Les espacements et les alignements sont la clé même d’une interface réussie. Sans espacement harmonieux, le design ne tient pas et devient incohérent. Il faut qu’il y ait une sensation de connexité, une grille invisible pour ne pas perdre la lecture du visiteur.

Est-ce que cet élément est centré ? Entrainez votre oeil de designer sur ce site :

It's Centred That | Test Your Inner Designer Eye

4. Typographie

Il y a tellement de règles sur la typographie que c’est sûrement le sujet le plus complexe à aborder. Décrivons les essentiels :

• Pour garder un style cohérent et une visibilité distincte, on évite généralement d’utiliser plus de 2 polices de caractères différentes. On jouera plutôt sur les différents styles de graisse (Gras, italique…).
• Éviter d’avoir un bloc de texte homogène, espacez-le en plusieurs paragraphes pour avoir des repères et un rythme de lecture agréable.
• La police doit être lisible quel que soit le support (Mobile ou Desktop), de manière générale on utilise une font de base de 16px et l’on ne descend pas en-dessous de 13 px au-delà l’accessibilité s’en verrait détériorée.
• Éprouver les maquettes. Votre maquette marche dans un monde idéal, mais qu’est-ce qu’il se passe si la longueur des textes est bien plus grande que prévue ? Ou plus petite ? Est-ce que vous avez prévu tous les cas ?
• Montrez de manière évidente ce qui relève de l’action utilisateur du contenu pur et simple. Il ne doit pas y avoir de confusions.

“Séparer le contenu de l’action”

En savoir plus :

Rhythm in Web Typography

5. Icônes

Enfin, un mot sur les icônes. Elles doivent être reconnaissables d’un coup d’oeil, l’utilisateur ne doit pas se poser de questions sur la nature de l’action qu’il y a derrière. Généralement, ce n’est pas le cas. Bien qu’il y ait maintenant des icônes dites “universelles” (ex: la disquette pour enregistrer :D), sur d’autres icônes ça peut être plus délicat, car chaque personne a sa propre définition. D’où l’interêt d’associer un label à une icône.

“Des icônes sans légende c’est pire que des légendes seules”

Dans notre cas l’exemple est encore plus flagrant. Comment dissocier une averse d’une pluie, d’une pluie fine à une bruine ? Pas évident ! Même si les icônes suivent une certaine logique. L’icône, dans ce cas, est trop complexe pour qu’on puisse se passer d’une légende.

Les icônes sont en SVG et adaptatives : en fonction de la taille de l’écran (mobile ou desktop) on enlèvera du détail pour que, même les toutes petites icônes puissent être compréhensibles.

des icônes adaptatives

Pour terminer, votre set d’icônes doit avoir une certaine homogénéité : même style, même taille de contours, respecter un ratio etc. Pour en savoir plus :

How to Design an Icon Set: Simple Checklist for Graphic Designers

En bonus !

⚡ Les 50 ms

C’est le temps qu’il faut pour que l’utilisateur ait une première impression sur votre site. Certains parlent de 150 ms (millisecondes !) d’autres de 77 ms, etc. Vous l’aurez compris, c’est très rapide. Ce qu’il faut surtout retenir c’est : la première impression. Si dès cette première empreinte, votre utilisateur trouve votre produit complexe, ça sera très dur de lui faire changer d’avis.

Donner l’info essentielle au visiteur du premier coup

C’est vrai, sur le web vous pouvez tout faire. C’est surtout d’autant plus facile avec l’émergence des nouveaux frameworks JavaScript, le CSS 3, les animations interactives, les micro-interactions n’auront jamais été aussi simples à faire. On aurait tendance à vouloir piocher naturellement comme dans un catalogue et mettre ce que l’on veut sur notre produit. Mais, encore une fois, ça n’est pas parce qu’on peut le faire qu’on doit le faire. Rappelez-vous que c’est votre produit, vos problèmes, vos solutions.

“Créer des composants graphiques et leur donner du sens”

Above the fold

On dit souvent que, tous les éléments importants doivent être mis au-dessus de la ligne d’horizon. Pourquoi ?

Voyez “la ligne d’horizon” comme une ligne invisible juste en bas de l’écran de votre téléphone. Ainsi, tout ce qui n’est pas visible immédiatement à l’écran est situé sous la ligne d’horizon. On dit que, comme les utilisateurs ne scrollent pas (ou très peu), on veut leur montrer le précieux contenu par-dessus cette fameuse ligne d’horizon.

Mais en réalité… c’est plus subtil que ça. Avec ce qu’on a vu plus haut, vous serez d’accord que si vous donnez beaucoup trop de choix ou d’informations à l’attention du visiteur, vous avez plus de chances de les perdre et au final, il ne cliqueront sur rien du tout.

Effectivement, on peut mettre le contenu important en haut, mais juste suffisamment pour donner envie à l’utilisateur de scroller. L’astuce consiste à avoir la ligne d’horizon coupant le milieu d’un composant graphique. Inconsciemment on sait qu’il y a encore du contenu en bas donc on scroll.
Si la ligne d’horizon ne vient rien couper, alors vous avez plus de chances d’avoir l’effet inverse, car rappelez-vous, ce qui est caché n’existe pas.

Il y a encore du contenu en dessous ¯\_(ツ)_/¯

🌇 Conclusion

En conclusion, dans votre projet il faut que votre design soit pensé de façon logique. S’il ne l’est pas, vos éléments se retrouvent en compétition entre eux et votre design laissera un sentiment d’avoir été fait à la va-vite. L’utilisateur n’arrivera pas à saisir clairement le chemin que vous essayerez de lui faire prendre et sera perdu. En tant qu’UI designer vous avez le pouvoir d’orienter le visiteur d’un point A à un point B, faites en sorte que l’utilisateur puisse naviguer au sein de votre produit sans se poser de questions, il en va aussi de votre responsabilité.

On ne le dira jamais assez, mais un bon design n’est pas seulement le fait de rendre les choses belles, mais c’est aussi une affaire de business. Si un design ne marche pas, l’image de marque de votre entreprise peut vite s’en trouver dégradée.

Pour terminer, il ne restera plus que l’intégration en HTML, CSS et JavaScript à faire. Mais ça, c’est une autre histoire… ;)

Ces articles peuvent vous intéresser :

Psychologie cognitive en UX design — Introduction

Stratégie & Ux Design — Introduction