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. Mais qu’appelle t’on Wireframe d’ailleurs ? Et un Mockup, un Sketch, c’est quoi ? On vous explique tout. 😉
Définition d’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.
Un wireframe est une maquette permettant de poser l’architecture d’interfaces web, mails, applications mobiles… Elles ont pour but de se soustraire au design et de réfléchir à la manière dont l’information doit être organisée, hiérarchisée.
La question importante a se poser lors de votre projet web est la suivante : Comment les utilisateurs doivent et vont interagir avec ces interfaces (sites ou applications web)?
Au risque de nous répéter, ne négliger en aucun cas l’importance des wireframe. Trop souvent sous-estimée par les « non-experts », le fait d’oublier l’usage d’un « wireframe website » est souvent synonyme d’échec. Le risque de rendu Web final insatisfaisant et de gouffre financier s’envole alors !
Et oui, on ne construit pas une maison sans aucun plan, la règle est la même pour une interface.
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 donné. Leurs conceptions s’inscrivent au début du processus de réalisation d’un projet web :
- Idées et réflexions sur un projet web pour définir des spécifications
- Traduction de ces spécifications en wireframe pour prévisualiser les interfaces et définir le flux que suivront les visiteurs
- Transformation des wireframes en maquettes designées prêtes à être implémentées par les développeurs
- Implémentation des interfaces par les développeurs et déploiement sur un environnement de test
- Tests et retours sur les nouvelles fonctionnalités et interfaces
- Mise en production
Il y aura certainement des itérations (plusieurs versions maquettes, allers/retours) aux étapes 2, 3 et 5.
Quelque soit l’outil wireframe(et il en existe une flopée), 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 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.
Un wireframe tool 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 placent au début du processus de réalisation d’un site internet ou d’une app.
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 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 sur.
- Gérer les évolutions d’un site. Certains projets de grandes envergures 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 par étape et en condition réelle les composantes du projet. Les maquettes web peuvent alors évoluer durant la vie du projet et il faudra ajuster les interfaces en fonction des retours. Le wireframe s’intègre parfaitement dans un processus de réalisation et d’évolution d’un site internet.
- 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 !
L’optimisation pour le référencement naturel (SEO), l’optimisation pour améliorer la transformation de vos prospects/clients (CRO) et l’optimisation de l’expérience utilisateur (UX) 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 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 maquettes transformées en vrai design.
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 interfaces.
Wireframes & SEO
D’un point de vue SEO, il y a quelques préconisations « onsite » à considérer et à intégrer dans les maquettes. Il y a des impératifs SEO à respecter, comme par exemple :
- Un seul H1 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 « 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 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, les 3 premières seraient :
- Qu’est ce que je vois en premier sur la page durant les 2 premières secondes ?
- Est-ce une image, une organisation , une information ?
- Est-ce l’élément à mettre en avant pour transformer les visiteurs ?
Il est vrai que sans une couche design les réponses à ces questions sont moins évidentes. Cependant si vous y répondez lors de vos mockup et maquettes 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), 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.
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 device pour que la grille s’adapte 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 une impact sur les performances.
Pensez également aux nombres et à la taille des images sur vos interfaces, 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, il faut penser à la taille des éléments sur les interfaces, se demander si les utilisateurs peuvent facilement utiliser les interfaces. Ceci est d’autant plus vrai sur mobile.
Mobile ou Desktop first ?
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 interfaces desktop. En réalité, tout va dépendre de la répartition du trafic entre les différents supports. Si la grande majorité du trafic est sur Desktop vous allez alors sans doute démarrer les wireframes desktop, pour rapidement communiquer en interne sur les nouvelles interfaces.
Gardez tout de même dans un coin de la tête que ces maquettes é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 sur des interfaces dont sa 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 la cible de vos clients en terme de trafic et de conversion.
Nos 8 conseils:
Ne mettez pas de couleur ou presque …
C’est une architecture d’interface que vous proposerez. Lors de la construction de l’architecture d’une interface, il faut éviter de distraire l’oeil 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
Quelque soit la page, demandez vous si l’information la plus importante est ce que vous voyez en premier. Vous devez penser en terme d’espace entre les éléments, 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 futures interfaces, 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 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 terme de typographie et d’espacement des éléments.
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 vu que le site possède une certaines visibilité sur les moteurs de recherche. Il est donc parfois indispensable de réintégrer les éléments importants 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 mobile, 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 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 ces éléments.
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.
