Concevoir un site internet utile et utilisable n’est pas une mince affaire. Votre site web doit répondre aux besoins de vos cibles, tout en leur permettant d’accomplir leur objectif le plus facilement possible.
Si la notion de site « utile » est relativement simple à satisfaire : votre site internet doit répondre à un besoin en proposition des produits ou des services, la notion d’utilisabilité est éminemment plus complexe. Pourquoi ? Car il est très aisé, lors de la conception d’omettre quelques notions ergonomiques vitales, qui peuvent se retourner contre vous en rendant le web design de votre site inefficace.
D’une certaine manière, créer un site internet, c’est comme rédiger un écrit. On a la tête dans le guidon et au bout d’un moment on connait tellement bien son œuvre, qu’on ne se rend plus compte des erreurs que l’on a commises. Pour un écrit il s’agira des fautes, pour un site internet d’erreurs ergonomiques qui peuvent potentiellement ruiner l’expérience utilisateur.
C’est pour se prémunir de tels problèmes, que nous allons voir ensemble 4 bonnes pratiques pour réussir le web design de votre site internet.
Réfléchissez à votre arborescence en amont
Se lancer bille en tête, n’est jamais une bonne idée. Nous avons l’impression, notamment avec les outils modernes comme les CMS, que tout est plus facile et qu’il est bien plus aisé, que par le passé, de rattraper ses erreurs. Dans l’absolu, ce n’est pas faux, mais pourquoi se rajouter des difficultés, quand il suffit de prendre un stylo et un papier pour se faciliter la tâche ?
La conception de l’arborescence de votre site internet est un moment charnière qui doit se réfléchir avant toute action à entreprendre devant son ordinateur. Vous devez penser à l’agencement de vos pages, à celles qui vont interagir entre elles, et surtout au parcours que va entreprendre l’internaute pour accomplir le but fixé par votre média. C’est là où la notion d’utilité de votre site intervient. À quel besoin répond votre site ? À partir de la réponse à cette question, on amène l’interrogation qui y est liée : comment le visiteur valide ce besoin de la manière la plus simple, afin qu’il n’abandonne pas en cours de route.
Voici un exemple : un site internet de vente de pièces détachées de voiture. Quel est l’objectif du site ? Répondre au besoin des possesseurs de véhicules qui souhaitent acheter eux-mêmes des pièces détachées. C’est un vaste marché : une voiture à de nombreuses pièces différentes qui sont achetables par un particulier. De plus, il y a plusieurs marques de voitures, et chaque marque à plusieurs modèles, qui peuvent avoir plusieurs variations. Cela constitue un catalogue produit absolument énorme.
Si l’ensemble de l’arborescence n’est pas mûrement réfléchi en amont, vous pouvez être quasiment sûr que le nombre de clics pour arriver jusqu’au produit espéré dépasse bien largement le nombre rêvé maximum de 3. Afin que le visiteur du site ne se retrouve pas perdu dès que la page d’accueil s’offre à lui, il faut épurer au maximum les interfaces et bien délimiter les choix qui lui sont offerts.
En posant sur le papier les grandes catégories du site, les pages utiles pour arriver au résultat escompté, on limite fortement les risques de se retrouver avec un site à la structure bancale, où le possible client préfère se rendre chez la concurrence.
Adapter son contenu pour être mobile friendly
En 2021, le trafic internet mobile représentait 55,56% des consultations du web mondial, soit plus de la moitié. Les terminaux mobiles ont pris une telle ampleur qu’il est difficile de ne pas y penser lorsque l’on conçoit un site internet. Pendant quelques années, il a été question créer des sites internet responsives c’est-à-dire qu’ils s’adaptent à toutes les résolutions et formats d’écrans. Aujourd’hui, on va plus loin et on parle de mobile first : on imagine un site en premier lieu en imaginant son ergonomie pour le mobile, avant de construire sa structure pour ordinateur.
La grande majorité des outils de conception de sites web adoptent un format responsive natif lorsque l’on développe un site. Mais créer un site adapté aux mobiles et tablettes ce n’est pas seulement le fait qu’il s’affiche correctement sur ces terminaux, c’est aussi une réflexion sur les éléments qui constituent votre site internet, et qu’il convient de conserver, transformer ou ne pas intégrer dans la version mobile du site.
Un exemple simple : sur le site internet d’un architecte, on retrouve une vidéo hébergée sur une célèbre plateforme. Celle-ci a une vraie utilité sur la page où elle se trouve, car il s’agit d’une démonstration d’un outil de conception assisté par ordinateur dont se sert le cabinet d’architectes. La vidéo sert à appuyer son propos et argument concurrentiel.
Sur la version pour ordinateur, pas de problème, le format de la vidéo est parfaitement adapté, elle est parfaitement lisible grâce à un écran de grande taille et avec une grande résolution. Mais sur mobile, ce n’est pas la même histoire. L’écran est en longueur, la vidéo est minuscule, et si l’internaute veut la regarder il faut la lancer, pivoter le téléphone en espérant que la rotation automatique fonctionne bien (ce n’est pas forcément gagné lorsque l’on ne se trouve pas sur l’application Youtube directement).
Que faire ? Et bien, en réalité c’est très simple : il ne faut pas hésiter à adapter son contenu suivant le type d’écran. La vidéo peut provoquer un problème d’ergonomie ? On ne la met pas sur les versions mobiles et tablettes. Mais on souhaite mettre en avant cet avantage commercial ? Si on peut enlever des éléments de la navigation mobile, cela signifie que l’on peut en rajouter. À la place de la vidéo, on mettra 2 images explicatives et un peu de texte.
Penser un site internet en premier lieu pour le mobile, c’est penser à l’ergonomie mais aussi aux contenus.
Un menu de navigation toujours visible
Un point court mais important, à mon sens. À une époque, pas si lointaine, les menus de navigations des sites internet étaient…un peu partout en fait. Nous pouvions avoir un menu horizontal, comme cela est la norme aujourd’hui, mais aussi vertical, des menus différents suivant la page sur laquelle on se trouve, ou qui glisse sur le côté sous la forme de barre latérale qui glisse au gré du défilement de l’écran.
Aujourd’hui, nous trouvons, globalement, deux grands types de menus : le menu horizontal et le menu burger. Le menu burger, pendant longtemps, était l’apanage des appareils mobiles. Mais de l’autre côté de l’Atlantique, il est de plus en plus fréquent de voir des menus burgers sur ordinateur. Cela épure davantage l’expérience utilisateur, et les internautes américains ont pris le pli de ce type de navigation. En Europe, et notamment en France, cela commence à arriver, mais ce n’est pas encore un code parfaitement établi.
Un menu complet, positionné horizontalement et donc la norme communément admise. Ce menu doit être le même quel que soit la page sur laquelle le visiteur se trouve, afin de ne pas perturber son expérience utilisateur. Et, le menu doit être accessible, où qu’il se trouve sur votre page.
On nomme sticky menu, un menu de navigation qui va rester accroché en haut de la page internet. C’est une bonne pratique qui permet de toujours laisser un repère au visiteur. Ainsi, s’il souhaite changer de page, revenir à l’accueil, ou accomplir une action comme rentrer dans votre page de contact, il a toujours tout à portée de main, sans efforts.
Logo cliquable en haut à gauche (ou au centre, ça passe)
Vous connaissez la lecture en Z (ou en F, il existe des variantes) ? Je vous le fais grossièrement : dans les pays occidentaux notre sens de lecture va de gauche à droite (logique me direz-vous, vous ne m’avez pas attendu pour savoir cela). C’est pour cela que sur des documents importants, de communications, publicitaires, et donc aussi les pages web, on essaye de respecter certaines règles afin d’accrocher l’œil du lecteur.
L’œil humain occidental aura très souvent le réflexe de débuter la lecture d’un document en haut à gauche, avant de glisser en haut à droite, puis de partir en diagonal sur le corps du document à partir de cette dernière position. C’est pour cela qu’il est important de positionner son image de marque sur le premier endroit qu’il consulte.
Et sur un site internet qu’est-ce qui représente l’image de marque d’une entreprise ? Son logo, bien sûr. C’est pour cela que je vous recommande de toujours positionner votre logo en haut à gauche, sur la même ligne que le menu de navigation. Le mettre en position centrale peut aussi être adapté, avec le menu disposé de part et d’autre. En le positionnant de la sorte, vous donnez un repère visuel à l’internaute (surtout si vous adoptez le sticky menu, et que le logo reste présent où que se trouve l’internaute dans sa navigation). De plus, il est prouvé, dans les usages actuels, que l’internaute considère votre logo comme étant un élément cliquable lui permettant de revenir sur la page d’accueil. Vérifiez donc bien que ce soit le cas pour le vôtre, car vous pouvez être certain que le visiteur lui, tentera le coup.
En appliquant ces quelques principes, vous faciliterez le cheminement de l’internaute, et vous augmenterez vos chances de créer un environnement propice pour que vos objectifs se réalisent. Bien entendu, il ne s’agit que de conseils de base, et d’autres lignes directrices doivent être mises en place pour apporter la meilleure expérience utilisateur possible, mais cela nous le verrons dans d’autres articles.
