đ 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.
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 !
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.
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 :
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.
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.
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.
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.
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.
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.
đ 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⊠;)