Comment faire un bon Wireframe ? Définition et conseils

Se lancer dans la création web est toujours une bonne chose. Néanmoins, la clé de la réussite sera de le faire de manière ordonnée, et non en « freestyle » ! Pour cela, rien de mieux qu’un bon Wireframe murement réfléchi et fonctionnel. Mais qu’appelle t’on Wireframe d’ailleurs ? Et un Mockup, un Sketch, c’est quoi ? On vous explique tout.

Qu’est-ce qu’un Wireframe ?

Un Wireframe permet de poser vos idées, de les partager et au final vous fera gagner un temps précieux par la suite lors de la phase de production du site.

Besoin d’un expert pour votre projet de wireframing ?
CONTACTEZ NOUS

Un wireframe est une maquette fonctionnelle ou un prototype permettant de poser l’architecture d’interfaces web, mails, applications mobiles… Elles ont pour but de se soustraire au design graphique et de réfléchir à la manière dont l’information doit être organisée et hiérarchisée sur un écran ou une interface.

La question importante à se poser lors de la création de votre projet web est la suivante :  Comment les individus doivent et vont interagir avec ces interfaces (qu’il s’agisse d’un site web ou d’une application digitale) ?

Au risque de nous répéter, ne négliger en aucun cas l’importance des wireframesTrop souvent sous-estimée par les « non-experts » de l’ergonomie web, le fait d’oublier l’usage d’un « wireframe website » fonctionnel est souvent synonyme d’échec. Le risque de rendu Web final insatisfaisant décolle alors et peut créer un véritable gouffre financier !

Et oui, on ne construit pas une maison sans aucun plan, la règle est la même pour une interface d’application ou de site.

Un wireframe est indispensable lors d’un processus de création de nouvelles interfaces

Les wireframes répondent à des spécifications définies en amont pour un projet digital donné. Leur conception s’inscrit au début du processus de réalisation d’un projet web :

  1. Idées et réflexions sur un projet web pour définir des spécifications
  2. Traduction de ces spécifications en wireframe pour prévisualiser les écrans et définir le flux que suivront les visiteurs
  3. Transformation des wireframes et prototypes en mockups designés prêtes à être implémentées par les développeurs
  4. Implémentation par les développeurs et déploiement sur un environnement de test
  5. Tests et retours sur les nouvelles fonctionnalités et interfaces
  6. Mise en production des différentes pages et écrans

Il y aura certainement des itérations (plusieurs versions de mockup, allers/retours) aux étapes 2, 3 et 5.

Quel que soit l’outil wireframe choisi (et il existe une flopée d’outils et de logiciels répondant à cet objectif), il est important de comprendre la nécessité de ce dernier pour communiquer les intérêts respectifs en interne, entre les différentes équipes impliquées.

>Certaines entreprises pensent aller plus vite sans réaliser cette étape. C’est bien souvent une erreur car au-delà du fait qu’un Wireframe permet de prévisualiser une interface web, il évite aussi de solliciter des équipes inutilement.

Sans wireframe et mockup, la mise en place de nouvelles interfaces et fonctionnalités passera par les équipes design et développement … sans fil conducteur. Ils produiront alors les interfaces qui seront déployées sur des environnements de tests et pour lesquelles il y aura inévitablement des retours. Les itérations entre les équipes vont alors commencer et peuvent très vite devenir chronophages.

L’utilisation d’un wireframe tool (outil ou logiciel de création de prototype) permet d’éliminer un grand nombre d’erreurs et se place au début du processus de réalisation des nouvelles interfaces. Vous n’aurez sans doute pas la solution idéale du jour au lendemain car ce sont bien vos utilisateurs qui décident des meilleures solutions. Cependant, vous aurez un support indispensable pour communiquer en interne, avec les équipes et la direction.

Le wireframing permet l’élimination de nombreuses erreurs et se place au début du processus de réalisation d’un site internet ou d’une application.

Wireframe mockup

Pourquoi réaliser des wireframes ?

Au-delà des raisons évoquées ci-dessus, la réalisation de maquettes wireframe permet de :

  • Visualiser les interfaces et donc de concrétiser les spécifications d’un projet
  • Clarifier les idées, il toujours plus aisé de présenter une idée avec un dessin fonctionnel plutôt qu’avec de longues phrases
  • Se poser les questions sur la facilité à utiliser les interfaces. Un client ne doit pas apprendre une interface pour pouvoir compléter un formulaire ou acheter un produit. Si les clients se posent des questions en utilisant votre site, votre taux de conversion va malheureusement diminuer à coup sû­r.
  • Gérer les évolutions d’un site. Certains projets de grande envergure peuvent être découpés en plusieurs sous-projets dans le temps. Soit parce que les équipes ne sont pas assez importantes pour aboutir le projet dans sa globalité dans un délai raisonnable, soit parce qu’il est plus judicieux de tester progressivement étape par étape et en condition réelle les composantes du projet. Les maquettes web peuvent alors évoluer durant la vie des projets et il faudra ajuster les interfaces de chaque écran en fonction des retours. Le wireframing s’intègre parfaitement dans un processus de réalisation et d’évolution d’un site internet ou d’une application.
  • Mettre en confiance les personnes avec qui vous allez travailler surtout dans le cas d’une refonte d’un site web. Il y a toujours ces forces qui s’opposent entre le SEO et l’UX. L’un et l’autre peuvent très bien s’entendre et le meilleur moyen de les réconcilier est d’utiliser un Wireframe.

Les wireframes font donc partie du process de réalisation d’un site web, au même titre que la refonte ou l’évolution des sites sur lesquels vous êtes amené à travailler.

SEO, CRO & UX, le Wireframe sera l’arbitre de ce match !

Wireframe projet web

L’optimisation des sites pour le référencement naturel (SEO), l’optimisation de la transformation de vos prospects/clients (CRO) et l’optimisation de l’expérience utilisateur (UX) et de la navigation sont certainement vos 3 chevaux de bataille pour réaliser les maquettes. Le problème lors de la conception, c’est qu’il est parfois difficile de satisfaire les 3 à la fois.

Le Wireframe vous permettra d’imaginer un prototype de site équilibré et le plus efficace possible.

De plus, il n’y aura pas plus crédible auprès de votre Direction qu’un wireframe réfléchi qui présente des zones stratégiquement agencées (zoning) et qui est passé dans plusieurs mains d’experts.

Cela va sans doute en faire crier plus d’un mais, si vous et les services concernés (SEO managers, designers, etc …) êtes convaincus par les wireframes finalisés, vous aurez probablement une capacité d’abstraction plus importante.

Le fait de travailler et re-travailler le sujet à l’aide de wireframes sera un atout indéniable une fois les mockup transformés en vrai design graphique.

Il sera important d’ajouter de vrais images et rarement de la couleur à vos wireframes. Ainsi en les présentant à vos auditeurs, ils pourront se projeter plus facilement/concrètement sur ce que seront les futurs écrans de votre produit digital.

Wireframes & SEO

D’un point de vue SEO, il y a quelques préconisations « onsite » à considérer et à intégrer dans une maquette. Il y a des impératifs SEO à respecter, comme par exemple :

  • Un seul H1 (titre principal) dans la page, plusieurs H2 et également des H3.
  • Un ratio entre le texte et le HTML qui doit être au minimum supérieur à 10% (ceci est juste à titre indicatif évidemment). Mais retenez simplement que plus il y aura du contenu mieux ce sera niveau SEO
  • Au minimum 2 images dans une page
  • L’utilisation de légende et de l’attribut « alt » pour vos images
  • Priorisation des « éléments clés » en début de page, généralement au-dessus de la zone de flottaison
  • Mobile First et encore Mobile First, ne l’oubliez jamais lors de la conception de votre wireframe !

Il y aura toujours des choix à faire entre les besoins SEO qui impacteront directement votre ranking et donc votre visibilité dans les moteurs de recherche, et de l’autre les nécessités d’offrir un service web agréable visuellement et au design soigné !

En tant que « chargé wireframes » vous serez en quelques sortes le médiateur entre ces deux services.

Wireframes et CRO

Il y a sans doute des questions assez simples à se poser au niveau de l’optimisation du taux de conversion de votre produit online. Les 3 premières seraient :

  1. Qu’est-ce que je vois en premier sur la page durant les 2 premières secondes ?
  2. Est-ce une image, une organisation, une information ?
  3. Est-ce l’élément clé à mettre en avant pour transformer les visiteurs en clients ?

Il est vrai que sans une couche design les réponses à ces questions sont moins évidentes. Cependant si que vous y répondez dès de la conception de vos mockup et maquettes en travaillant le zoning, vous faciliterez le travail des designers et serez à coup sûr dans la bonne direction pour obtenir un bon taux de conversion.

Vous devrez mettre en avant vos « call to action » (CTA ou bouton d’appel à l’action). Pensez à la ligne de flottaison pour que les premiers produits soient visibles sans scroll, réservez un espace pour les accroches marketing … voici quelques astuces.

Besoin d’un expert pour votre projet de wireframing ?
CONTACTEZ NOUS

Wireframes et UX

L’expérience utilisateur est un vaste sujet qui va dépendre évidemment de la cible du site. Il y a certainement un point qui est pour nous le plus important : le temps de chargement de votre site. Alors comment ce critère, qui est également un point crucial pour le référencement et le taux de conversion, peut-il être pris en compte avec les wireframes ?

Et bien, c’est vrai que vous n’aurez pas de réelles influences sur ce critère qui va dépendre des équipes de développement et des administrateurs systèmes. Cependant, vous pouvez penser à vos développeurs quand vous concevez les interfaces. Ceci est d’autant plus vrai lorsque les sites doivent être pensés en responsive, ce qui est aujourd’hui 99,9% des cas.

En d’autres termes, pensez aux emplacements de vos CTA, images, textes, … sur les différents devices pour que la grille et le zoning s’adaptent naturellement sans qu’il y ait trop de modifications à apporter en CSS et JS. Cela permettra de ne pas ajouter trop de lignes de codes et donc de diminuer la taille des fichiers à télécharger par le client => ceci a un impact direct sur les performances.

Pensez également au nombre et à la taille des images sur vos pages, cela peut pénaliser les performances. Il existe des astuces de chargement des images en asynchrone (lazy loading) mais cela peut impacter le travail sur le référencement des images et inévitablement ajouter du code pour gérer ce type de chargement.

Coté expérience utilisateur et ergonomie, il faut penser à la taille de chaque élément sur les écrans, simplifier la navigation et se demander si les internautes peuvent facilement utiliser le service. Ceci est d’autant plus vrai sur smartphone.

Mobile ou Desktop first ?

Mobile first Wireframe

Beaucoup de discussions sur ce sujet, mais n’oublions pas les priorités de nos clients : le temps, le budget…et surtout une connaissance de votre marché et de vos utilisateurs.

Techniquement il est plus confortable de commencer par les interfaces mobiles et d’évoluer vers les versions desktop. En réalité, tout va dépendre de la répartition du trafic entre vos différents supports. Si la grande majorité du trafic est sur Desktop vous allez alors sans doute démarrer le prototypage desktop, pour rapidement communiquer en interne sur les nouvelles interfaces.

Gardez tout de même dans un coin de la tête que ces prototypes évolueront vers les tablettes et les mobiles dans le cas de design responsive. Il m’est arrivé de devoir faire ce choix afin de pouvoir rapidement communiquer avec mon client dont la priorité était la version desktop.

Il faut garder en perspective les délais qui vous sont impartis pour réaliser les maquettes, votre capacité à les produire et à les ajuster et surtout penser à la cible de vos clients en termes de trafic et de conversion.

Nos 8 conseils pour créer de bons wireframes 

Ne mettez pas de couleur ou presque …

C’est une architecture et une proposition d’ergonomie que vous proposerez. Lors de la construction de l’architecture d’une interface, il faut éviter de distraire l’œil par des couleurs. Cependant, comme évoqué plus haut, il est peut être nécessaire d’en introduire un peu, par exemple avec des images. Attention toutefois à ne pas faire le travail des designers.

L’information la plus importante doit être la première chose que vous voyez

Quelle que soit l’interface à travailler, demandez-vous si l’information la plus importante est celle que vous voyez en premier. Vous devez penser en termes de zones, d’espaces entre les composantes, de surface occupée, de ligne de flottaison. N’hésitez surtout pas à communiquer sur ces éléments. Faites des tests en présentant le wireframe et en posant la question avant de le montrer : « Dis moi, sans réfléchir l’élément qui te saute aux yeux ».

Utilisez de vrais contenus et respectez la lisibilité des textes

Essayez d’utiliser au maximum de vrais contenus. Bien que les wireframes présentent une structure des futurs écrans, il devra y avoir un effort mental à faire pour visualiser ce que seront les futures interfaces. Placer le vrai contenu en situation vous permettra de décider comment certains éléments se positionnent dynamiquement entre eux.

Les textes participent au référencement, mais également à l’engagement de vos visiteurs. Ils doivent être lisibles sans effort. Il faut prévoir une taille de police suffisamment grande, un nombre de caractères compris entre 50 et 75 par ligne et travailler également l’espacement des lignes.

Tous ces éléments pris en compte vont inévitablement avoir un impact sur la structure fonctionnelle de vos wireframes, ne les oubliez pas.

Tous les éléments doivent être présents, pas plus, pas moins

Utilisez uniquement ce qui est nécessaire, il ne faut pas surcharger les wireframes. Soyez consistant en termes de typographie et d’espacement entre chaque élément.

Ne pénalisez pas les sites

Il peut y avoir des contraintes incontournables à prendre en compte lors de la réalisation des wireframes. Si cela concerne la refonte d’une ou plusieurs pages d’un site existant, il ne faut pas perdre de vue que le site possède déjà une certaine visibilité sur les moteurs de recherche. Il est donc parfois indispensable de réintégrer les composantes importantes dans la structure pour ne pas pénaliser le site.

Pensez mobiles, tablettes, desktop

Adaptez les interfaces en fonction des supports. Il existe plusieurs façons d’aborder l’agencement d’une même interface en fonction du support : d’abord le smartphone, puis la tablette et enfin le desktop ou l’inverse.

De manière générale, c’est la première approche qui est préconisée, car il est plus facile de placer les composants en élargissant l’espace qu’en le confinant. C’est à vous de voir, car certaines contraintes vous obligeront à suivre une approche plus qu’une autre. Nous vous conseillons de suivre la première en démarrant par le mobile…mais encore une fois vous devriez vous baser sur votre marché et une analyse approfondie de vos utilisateurs.

Quelques conseils pour les mobiles et tablettes

Il faut évidemment prendre en compte la manière dont l’utilisateur interagit avec ces supports. Il existe certaines préconisations que nous suivons également pour rendre une interface conviviale et interactive. Pensez à la taille des éléments sur les supports tactiles, ainsi qu’à l’espace entre eux.

Communiquez, communiquez et communiquez

Prenez en compte le fait que vos propositions doivent être soumises et vont être sujettes à des modifications. Présentez-les le plus tôt possible pour gérer les retours et si vous fourmillez d’idées profitez de ces moments pour les soumettre de vive voix, cela permettra également de les « pré-tester » et vous fera gagner du temps.