S’inspirer n’est pas tricher
Reposons le contexte. Lorsqu’un utilisateur navigue sur une interface, il est amené à prendre une série de choix et à réaliser des actions pour atteindre son objectif. Un enjeu primordial pour un Product Designer est de savoir simplifier et rendre accessible ce parcours utilisateur.
Ne serait-il donc pas logique de réutiliser des patterns et des composants provenant d’autres produits (similaires ou non) pour faciliter cette prise de décision ?
On parle ici de “Biais de familiarité”. Les utilisateurs auront généralement tendance à être plus à l’aise et à préférer des expériences familières. Il conviendra donc d’utiliser au maximum des patterns visuels que vos utilisateurs connaissent dans vos interfaces. Si jamais vous devez introduire un nouvel élément qui n’est pas familier, tâchez de l’associer à un élément plus commun pour faciliter son adoption.
S’inspirer est donc positif à bien des égards puisqu’il vous permet en tant que designer de trouver des sources d’inspiration pour initier et compléter votre solution. Mais il permet aussi à vos utilisateurs se sentir en confiance en reconnaissant ces patterns qui leur sont familiers.
Bien construire son benchmark
Le benchmark est un outil indispensable avant de se lancer dans une phase de conception. Il convient alors d’être exhaustif et méthodique dans son approche pour en tirer le plus de valeur possible.
Avant de commencer un benchmark, il est intéressant de se poser plusieurs questions :
- Quels sont les points clés de l’expérience que je cherche à concevoir ?
- Quels sont les produits qui ont déjà mis en place avec succès ces points clés ?
- Quels sont les produits leaders réputés pour la qualité de leur expérience — pas forcément dans le même domaine d’activité.
En ayant ces trois questions en tête, on va pouvoir se mettre en quête de captures d’écrans de différents produits.
Prenez le temps de faire vivre votre benchmark et nourrissez-vous des recommandations d’autres stakeholders. Plus vos sources seront variées et plus vous aurez de possibilités lors de la phase de création.
Une fois votre collection d’écran réalisée, triez-les par grandes catégories et mettez en évidence le pattern ou la partie de l’expérience qui vous sera utile dans votre conception.
Vous pourrez ainsi rapidement naviguer entre vos maquettes et votre benchmark si besoin. Lorsque vous présenterez votre travail, N’hésitez pas à y associer les inspirations qui vous ont poussé à faire des choix de design. Elles pourront vous servir de justification, mais ne doivent pas être l’unique raison de votre choix.
Dribbble : un faux ami ?
Pour chercher des sources d’inspirations, on peut être tenté de se tourner vers des sites comme Dribbble. Ils recensent bon nombre de projets de designer qui mettent en lumière des maquettes, des prototypes ou des études de cas.
Gardez tout de même en tête que les écrans présentés sur ces sites sont souvent hors contexte, parfois enjolivés pour être plus “attirant” à l’œil, et n’appartiennent parfois même pas à de véritables produits.
Bien souvent, les “shots” Dribbble s’affranchissent de certaines contraintes produit pour apparaître plus attractifs. C’est un parti pris qui peut vous biaiser si vous recherchez à coller aveuglément à ce genre d’écrans.
Soyez capable de faire la part des choses et prenez Dribbble comme une formidable source d’inspiration visuelle, cherchez-y des mots clés précis sur des composants de votre solution. Vous trouverez alors une multitude d’exécutions du même composant, vous permettant d’apporter une qualité visuelle très élevée à vos maquettes.
2 références fiables : Material Design & Human Interface
En cherchant des inspirations dans différents produits, on peut parfois se perdre dans la multiplicité des composants mis en œuvres et ne plus savoir lesquels serait les plus adaptés pour notre cas d’usage.
Un bon réflexe est alors d’aller se référer aux guidelines rédigées par Google (Material Design) et Apple (Human Interface) accessibles librement sur internet.
Exemple de documentation du composant “Bouton” sous Material Design
Chaque pattern ou composant est documenté, dans son contexte, avec les règles et intentions de design associées. La partie visuelle aura une teinte très “Google” ou “Apple”, ce sera donc à vous de composer avec les contraintes visuelles de votre produit. Mais, les choix que vous pourrez faire seront toujours éclairées en se basant sur les recommandations de ces deux systèmes.
Dans le même esprit, vous pouvez aussi vous référer aux design systems publiques de certaines entreprises tech. Moins universel et objectif que ceux de Google et Apple, il peut être intéressant de voir les adaptations et les compromis mis en œuvre pour correspondre à d’autres produits.
L’avantage de s’inspirer de design system, c’est que les composants et exemples d’interfaces y seront documentés et seront basé sur une étude approfondie des équipes design.
C’est donc un point de départ solide pour démarrer votre benchmark et trouver de nouvelles sources d’inspiration.
Des outils pour vous simplifier la tâche
Quand il s’agit de récupérer des écrans ou même des parties intégrales d’expériences produit, on peut vite se heurter à des barrières techniques et y passer un temps non négligeable.
Il existe des plateformes comme Screenlane, NicelyDone ou Mobbin, qui vous proposent une bibliothèque d’écrans d’applications mobiles et desktop les plus utilisées. Simples d’usage elles vous permettront de rapidement consulter des flows par catégories et même de découvrir de nouvelles applications pour diversifier vos sources de benchmark.
Si l’application ou le site que vous cherchez n’est pas disponible, vous devrez alors manuellement prendre des captures d’écrans via votre navigateur. Bien que fastidieuse, cette méthode reste néanmoins très efficace pour mieux appréhender le ressenti et l’expérience proposés par un produit.
L’extension de navigateur GoFullPage vous permettra de capturer l’intégralité de la page courante, y compris les éléments non visibles sans scroll.
Pensez bien aussi à consulter la version responsive du site pour comprendre les adaptations qui entrent en jeu. Sur Google Chrome en appuyant sur la touche F12, vous accédez à l’outil “inspecteur” qui vous donnera la possibilité de visionner la page sur d’autres devices.
