Vous souhaitez créer vos maquettes et prototypes sur Figma et vous cherchez à optimiser votre travail ? C’est la première fois que vous utilisez Figma ou bien vous êtes un habitué de l’outil qui est curieux de voir s’il utilise tous ces « pense-bêtes » ?

Je vous donne quelques astuces qui pourront vous aider à booster votre performance.

Architecture de l’information : « La propreté est l’image de la netteté de l’âme » (Montesquieu)

Premier point qui parait évident mais qui ne l’est pas tant que ça finalement : L’ordre. Le rangement, le ménage, appelez cela comme vous voulez. L’important est de ranger les éléments dans des parties puis sous-parties puis sous-sous-parties, etc… Qui sont en réalité nommées des "Groups", mais vous avez compris. Tel des poupées russes, oui tout à fait.

L’objectif est que chaque élément ait une place et qu’il y soit, afin de le retrouver rapidement et ainsi de gagner du temps (ou en tout cas de ne pas en perdre !). De plus, lorsque vous transmettrez votre travail aux développeurs ou si une personne extérieure vient travailler sur ce projet, ils ne s’arracheront pas les cheveux en tentant de comprendre. C’est également valable pour vous, vous aurez les idées plus claires et lorsque vous reviendrez de votre pause-café vous ne prendrez pas peur en essayant de vous rappeler où est-ce que vous en étiez. L’autre avantage que vous avez à tout "caser" est que cela vous simplifiera la tâche lorsque vous créerez les liens entre les pages pour concevoir le prototype. Alors, ne craignez pas de créer beaucoup de cases. 😉

Règle de nomenclature : « Appeler un chat un chat »

La nomenclature. Rien de mieux qu’une suite d’éléments nommés "exemple 1", "exemple 2", …, "exemple n" pour attraper un mal de tête au bout d’une heure et s’emmêler les pinceaux. Il est donc important de réfléchir au titre qu’on donne à chaque élément. Cela vaut également pour les pages, vous pouvez notamment compléter l’intitulé initial par une description précise, par exemple : "Accueil" suivi de la page "Accueil / Inscription". En ce qui concerne les détails de l’intitulé, n’en mettez pas trop. Par exemple : "Bouton de validation OK orange" pourrait simplement être "Bouton OK" ou juste "OK". Ne perdez pas de vue que votre espace de travail doit être propre et simple. Evitez aussi les couleurs dans les titres, « orange » dans l’exemple précédent. En effet si vous décidez, après coup, de changer la couleur d’un des éléments (logo ou autre), vous devrez rectifier la nomenclature de chacun d’entre eux… Ce qui nous mène à : penser à utiliser les "components". Cette fonctionnalité est un vrai gain de temps quand on sait l’utiliser. Elle permet de faire une modification d’un élément présent sur toutes les pages en même temps et non de devoir toutes les rectifier une par une. 

Test and learn : « Ne sait ce qui est bien qui nul n'essaie »

N’hésitez pas à faire des pages "inutiles" c’est-à-dire des pages d’essai brouillon qui servent de comparaison pour vous aider à prendre du recul et avoir un œil critique sur le choix des éléments ou de leur emplacement, donc qui ne sont en réalité pas inutiles du tout.

D’ailleurs, ce n’est pas une honte de demander l’avis de ses collègues ! Bien au contraire, les utilisateurs qui vont tester votre maquette auront tous des avis et des goûts divergents, alors n’hésitez pas à vous ouvrir à d’autres opinions. N’ayez non plus pas honte d’essayer des choses, c’est en testant qu’on se rend compte si quelque chose est laid et que l’on peut faire mieux. Enfin, inspirez-vous ! Allez chercher l’inspiration sur les sites qui existent déjà ou sur des templates. Plusieurs sites existent pour vous donner des idées, je pense notamment à awwwards ou dribble, mais vous pouvez aussi vous inspirer sur Free Frontend pour les éléments. Ne croyez pas que les autres ne copient pas, c’est faux 😉 C’est important de rester à jour des tendances, donc tenez vous informer de ce qui plaît ou ne plaît pas.

Atomic Design : « Le diable se cache dans les détails » (Nietzsche)

Techniquement parlant, le moindre détail est important. Que ce soit sur l’alignement des éléments, le même espace entre les blocs, la dimension de ceux-ci, etc… Vous le comprenez, le diable se cache dans les détails.

Et je ne vous parle pas là encore que d’esthétique. C’est un point très important pour la réalisation du développement par la suite. Une des méthodes que nous pratiquons chez Netnco pour assurer une homogénéité de conception est l’Atomic Design. Cela consiste en la décomposition de la maquette en différents composants : atom, molécules, organismes, template et pages, afin de rendre l’interface fonctionnelle et agréable. Nous en parlerons plus en détail dans un nouvel article très prochainement.

Mais pour l’instant, il est facile d’être attentif aux détails lors de la conception de la maquette de manière simple. L’important est de le faire progressivement, au fur-et-à-mesure que vous créez les éléments. N’attendez pas d’avoir créé tous les éléments pour vérifier la distance entre eux, sinon vous risquez de passer du temps à tout vérifier et réaligner. Pour connaître la distance entre deux éléments il suffit de les sélectionner tous les deux et de modifier la valeur suivante :       

Essayez aussi de respecter les mêmes distances entre les blocs d’éléments de vos pages afin d’avoir un rendu cohérent et globalement propre. Ce n’est pas un détail qui va faire que votre maquette sera mauvaise, c’est l’addition de plusieurs détails qui rendront le tout moins propre et donc moins bon. "Les utilisateurs qui ne sont pas des UX Designers ne verront pas ces détails" me direz-vous, en effet ils ne seront pas capables de relever un à un les défauts de conception avec un œil critique, toutefois le cerveau en fait une expérience globale qui inconsciemment sera meilleure sans ces défauts. 

Prototypage : « Parfois, il faut savoir prendre du recul pour mieux avancer »

Servez-vous du prototype pour vérifier toutes sortes de choses : l’alignement de certains éléments qui ne sont pas en cohérence d’une page à l’autre, une erreur de police à un endroit, etc… Le prototype sert principalement à faire tester la maquette à des utilisateurs, toutefois elle a un potentiel bien plus intéressant, à mon sens. Vous ne l’avez peut-être encore jamais vécu mais lorsque votre page Figma contient une cinquantaine de Frames, il devient difficile de tout vérifier pour être certain de ne pas avoir fait d’erreur d’un Frame à l’autre. C’est pourquoi je trouve vraiment efficace le fait d’interagir soi-même avec la maquette via le prototype. De plus, le nombre de liens entre les pages monte trèèèès rapidement, ce qui peut mener à des liens falsifiés. N’hésitez pas, donc, à passer de la maquette au prototype, au fur-et-à-mesure que vous créez les liens. Cela vous permettra également de vous projeter dans la peau des futurs utilisateurs et peut-être ainsi de vous rendre compte de certains bémols.

Résumé

Pour résumer, l’utilisation de Figma est comme une recette de cuisine : il est indispensable d’avoir un plan de travail propre et lisible pour ne pas mélanger les ingrédients et les mesures ne peuvent pas être approximatives. En effet 500 grammes de beurre ne sont pas 550 grammes, votre recette ne sera pas du tout la même. Il est donc important de se rappeler ses objectifs de temps en temps pour ne pas s’en éloigner : que ce soit toujours clair, pratique et propre.

Je ne vous ai pas donné d’astuces miraculeuses, mais quelques "pense-bêtes" afin d’utiliser l’outil Figma le plus efficacement possible. Si j’ai stimulé votre curiosité ou que je vous ai donné envie de faire appel à nos services, n’hésitez pas à nous contacter ou à découvrir nos prestations d'UX design !

Découvrez nos prestations : NOS PRESTATIONS

Credits Photos : Cottonbro, Charlie Deets, Olya Kobruseva, Chloe Maze et Adobe Stock