🌞 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 :


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 :


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 :


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 :


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
 ;)