Wireframes, SEO, CRO, UX et 8 conseils

Qu’est-ce qu’un Wireframe ?

Les wireframes sont des maquettes permettant de poser l’architecture d’interfaces web, mails, applications mobiles… Elles permettent de se soustraire au design et de réfléchir à la manière dont l’information doit être organisée, hiérarchisée et comment les utilisateurs peuvent interagir avec ces interfaces.

Attention, il est très important de ne pas négliger l’importance des wireframes, sans quoi le rendu finale de votre site risque d’être catastrophique. On ne construit pas une maison sans plan, même chose pour une interface.

Nos 8 conseils

 

Les wireframes sont indispensables dans un processus de réalisation 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 :

  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 interfaces et définir le flux que suivront les visiteurs
  3. Transformation des wireframes en maquettes designées prêtes à être implémentées par les développeurs
  4. Implémentation des interfaces 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

Il y aura certainement des itérations aux étapes 2, 3 et 5.

Quelque soit l’outil (et il en existe beaucoup aujourd’hui), il est important de comprendre le besoin des wireframes afin de communiquer leurs intérêts en interne. Certaines entreprises pensent aller plus vite sans réaliser cette étape. Ceci est bien souvent une erreur car au delà du fait qu’ils permettent de prévisualiser une interface, cela évite aussi de solliciter des équipes inutilement.

Sans wireframes la mise en place de nouvelles interfaces passera par les équipes design et développement … sans fil conducteur. Ils produiront 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.

Le wireframing 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 car c’est bien nos utilisateurs qui décident des meilleures solutions mais vous aurez un support indispensable pour communiquer avec les équipes et la direction.

Le wireframing permet d’éliminer un grand nombre d’erreurs et se placent au début du processus de réalisation des nouvelles interfaces.

ux-787980_1280

Pourquoi réaliser des wireframes ?

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

  • Visualiser les interfaces et donc de concrétiser les spécifications d’un projet
  • Clarifier les idées, il est souvent plus facile 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 vos sites, vous allez à coup sûr diminuer votre taux de conversion.
  • Gérer les évolutions d’un site. Certains projets de grandes envergures peuvent être découpés en plusieurs sous-projets qui seront réalisés 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 étape par étapes en conditions réelles les composantes du projet. Il est alors possible de faire évoluer les maquettes durant la vie du projet et d’ajuster les interfaces en fonction des retours. Le wireframing s’intègre parfaitement dans le 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. Or les deux peuvent très bien s’entendre et le meilleur moyen de les réconcilier est d’utiliser des wireframes.

Les wireframes sont donc une partie intégrante 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

chalk-791054_960_720

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.

Un autre aspect est de convaincre les hautes instances de l’entreprise concernée : la direction.

Un autre aspect est de convaincre les hautes instances de l’entreprise concernée : la direction.

Ce dernier point nécessitera peut être une couche de vernis sur vos wireframes. Cela va sans doute en faire crier plus d’un mais croyez moi, si vous et les services concernés (SEO managers, designers, etc …) êtes convaincus par les wireframes réalisés, vous avez probablement une capacité d’abstraction plus importante car vous
avez réfléchis, travaillé et re-travaillé le sujet et êtes capable de vous projeter sur ce que seront les wireframes une fois les maquettes transformées en vrai design.

C’est pour cela qu’il peut être 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.

S’il vous plait ne criez pas 😉 mais prenez en compte ce point, dans certains cas il est plus rapide de faire ces quelques modifications plutôt que d’argumenter « il faut s’imaginer l’interface avec les images …. ».

Wireframes & SEO

Coté SEO, il y a quelques préconisations « onsite » à considérer et à intégrer dans les maquettes. Par exemple, vous allez devoir tenir compte de quelques impératifs SEO :

  • d’un seul H1 dans la page, plusieurs H2 et également des H3.
  • d’un ratio entre le texte et le HTML qui doit être au minimum supérieur à 10% (attention, ce n’est qu’une alerte minimum, il est préférable d’avoir un pourcentage plus élevé), pensez donc à ajouter du contenu
  • au minimum une image dans la page
  • l’utilisation de légende à coté des images
  • Quels sont les éléments importants lors du crawl des moteurs de recherches que vous devez présenter en premier dans la page.

Il y a donc les préconisations SEO et le coté sexy du site apporté par les designers qu’il faut faire cohabiter. Si vous êtes en charge de la réalisation des wireframes vous serez en quelques sortes le médiateur entre ces deux services.

Wireframes & CRO

Il y a sans doute des questions assez simples à se poser, les deux premières seraient :

  1. Quel est l’élément qui me saute aux yeux au premier coup d’oeil sur l’interface ?
  2. 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. Mais si vous arrivez à y répondre avec vos 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 ?

desktopvsmobile

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.