Depuis sa naissance, le web n’a fait qu’évoluer à vitesse grand V. C’est devenu un outil accessible à tous, sur lequel chaque individu peut désormais devenir producteur de contenus (avis clients, blogs…). Les réseaux sociaux et la notion de connexion « constante » (avec l’arrivée des smartphones) ont accentué cette situation. Aujourd’hui le responsive design est devenu incontournable (risque de pénalité par Google), les sites web en une page sont devenus légions… La veille est devenue indispensable afin de se maintenir à niveau, maintenir son site internet à niveau, et créer des sites internet respectueux des bonnes pratiques. Quelques règles et bonnes pratiques pour la création de votre site internet et concevoir un cahier des charges optimal.
Création de site internet et bonnes pratiques ?
Il s’agit de créer des sites internet en tenant compte des notions d’ergonomies, des pratiques des utilisateurs. L’objectif est de produire un site internet utilisable pour tous. Pour autant, les objectifs du site ne doivent pas passer à un second niveau et il conviendra d’arbitrer entre « bonnes pratiques » et « performances du site web ».
La performance d’un site web
Un site internet doit être utile (utile à l’entreprise éditrice et utile au visiteur), il doit répondre à des critères de fiabilité (temps de réponse, disponibilité, absence de bugs…), il doit être accessible (affichage sur les différents navigateurs, optimisé en fonction des types d’utilisateurs comme les mal-voyants, accessible en fonction du terminal utilisé – notion de conception responsive…), il doit être « utilisable » et intuitif, le visiteur devant pouvoir comprendre le fonctionnement du site sans difficulté (notion d’ergonomie) et accéder facilement aux contenus en fonction de l’état de sa navigation. Pour finir, un site internet se doit d’être engageant, en favorisant l’instauration d’une relation de confiance entre le visiteur et le site, en faisant en sorte de représenter pour le visiteur un puits d’informations incontournable. Il doit être porteur de valeurs et de sens.
L’optimisation du site internet
Le site doit être optimisé pour le SEO (choix des expressions, optimisation des zones chaudes, optimisation des contenus, partage sur les réseaux sociaux, contenus de qualités et uniques, présence d’un plan de site, d’un fichier robots.txt…). Le site doit de préférence proposer un thème par page, chaque page étant optimisée sur une RP (requête principale) et sur plusieurs RS (requêtes secondaires). Les attributs Alt et les noms des fichiers photos doivent être optimisés
Le site doit s’afficher rapidement, le visiteur pouvant faire « demi-tour » à chaque instant. La solution d’hébergement doit être considérée avec sérieux lors de la création d’un site internet.
Organiser l’information sur le site web, plan du site internet
L’internaute doit être mis cœur de cette phase de conception de l’arborescence, de l’architecture du site. Il s’agit de viser l’efficacité, la performance et l’utilité du site web en tenant compte avant tout du visiteur.
Les futurs contenus du site web doivent être dans un premier temps listés. Il s’agit ensuite de répertorier les fonctionnalités du site internet. Ce travail permettra de travailler l’ergonomie puis les aspects graphiques du site.
La classification des contenus peut se faire par source (Exemple : par contributeurs, rédacteurs. Simple pour l’administrateur, plus compliqué pour l’internaute), par nature de contenus (exemple : Agendas, Annuaire, Vidéos…), par thèmes (plus pratique pour l’internaute, plus difficile à gérer pour l’administrateur), par besoin (en fonction des attentes de l’internaute, cela sous-entend souvent des contenus en quantité et de qualité et une connaissance réelle des personas), par identification des utilisateurs (catégories de cibles), par catégorie de produit (pour un site e-commerce par exemple)…
L’organisation choisie n’empêche pas de proposer des alternatives à l’intérieur du site (sur la page d’accueil par exemple ou dans le cadre de navigations transversales). Il conviendra cependant de ne pas « perdre » l’internaute en lui proposant des chemins de navigation trop complexes.
Les éléments de réassurance doivent être mis en avant sur la page d’accueil et rappelés sur toutes les pages (dans le footer par exemple) et bien sûr, lors du tunnel de commande pour un site e-commerce.
Il convient d’organiser les contenus en distinguant les rubriques principales des rubriques secondaires.
Les types d’arborescences
Les arborescences larges se caractérisent par de nombreuses rubriques de même niveau mais avec peu de profondeur. Les catégories sont facilement visibles et l’accès au contenu est rapide. En revanche, l’internaute est soumis à un choix très important de rubriques rendant le choix plus difficile. Si les rubriques proposées sont facilement identifiables par les visiteurs, ce type d’arborescence peut être efficace.
D’une façon générale, il est recommandé de limiter le nombre de rubriques de premier niveau à 9.
Au delà, il conviendra de trouver des éléments visuels permettant de simplifier le compréhension globale de l’architecture par le visiteur.
Les arborescences profondes proposent peu de rubriques de premier niveau niveau mais avec une profondeur plus importante. Le visiteur est en mesure de choisir plus facilement sa rubrique principale mais ce type d’organisation augmente le nombre de clics utiles pour accéder à l’information ?
Il est à noté que si l’internaute de choisit pas du premier coup la bonne rubrique principale au regard du contenu recherché, ce type d’arborescence peut être vite décourageant.
Un moteur de recherche performant sera souvent indispensable à ce type d’arborescence.
L’idéal est bien sûr de trouver un compromis entre ces deux types d’arborescence, de ne jamais dépasser 2 niveaux de profondeurs et environ 6 à 8 rubriques principales. Chaque contenu doit être accessible en 3 clics.
La navigation de l’utilisateur
Navigation utilisateur descendante : ce type de navigation se fait depuis la page d’accueil via le menu ou suite à l’utilisation de filtres ou facettes (pour un site e-commerce par exemple).
Navigation utilisateur transverse : l’utilisateur passe d’un rubrique à une autre sans utiliser le menu.
Les mises en avant d’articles, de produits (sur la page d’accueil ou sur des pages internes), les notions de produits ou articles associés, les éléments présentés dans le footer ou dans le header, facilitent la navigation transverse.
Un chemin de fer est souvent utile à l’internaute pour l’aider dans sa navigation.
Le plan de site sera également un outil très utile.
Contenu unique et contenus « dupliqués »
Un contenu peut, dans un site web, n’être présenté que dans une seule rubrique (tout en étant accessible de différentes façons). Cependant, dans certains cas (classification par « utilisateurs » par exemple), un même contenu peut se retrouver dupliqué. Il conviendra de tenir compte de cet aspect dans le cadre de l’optimisation du site pour le SEO.
Cette notion peut également être rencontrée au niveaux de rubriques « dupliquées ».
Adapter l’architecture et le contenu en fonction de l’utilisateur
Cette situation peut se rencontrer en différenciant un utilisateur logué d’un utilisateur non logué. Cela peut être la conséquence de l’appartenance d’un utilisateur à un groupe d’utilisateur ou, encore, des informations mémorisées par le site et concernant un visiteur préçis (exemple : derniers achats d’un internaute sur un site e-commerce)
Les principes de navigation
En fonction des types de terminaux, il conviendra de déterminer quels menus de navigation afficher et quelles structures de pages proposer à l’internaute.
Les élements de navigation doivent être facilement identifiés par les visiteurs d’un site internet.
Les liens devront se distinguer des autres éléments textuels, évitant ainsi au visiteur de les rechercher ou de « tester » le contenu en le survolant afin de trouver les éléments cliquables. Sur les smartphones, les liens ne pouvant être « survolés », il conviendra de pouvoir les identifier d’un seul coup d’oeil. Il en est de même pour les boutons qui doivent se distinguer des autres éléments graphiques (relief, ombres…).
Proposer un lien doit s’accompagner d’une information ce qui est proposé à l’internaute, au travers de ce lien. Cela passe par des libellés de liens clairement rédigés et optimisés pour le réfrencement du site internet.
Mettre en avant les sous-menus
Un visiteur visitant une rubrique est souvent exposé à des sous-menus. Ces sous-menus doivent être identifiables via des puces ou des boutons.
Un fil d’ariane doit être mis en place.
Ces sous-menus doivent de préférence être positionnés au même endroit sur toutes les pages du site internet.
Les boutons retours
Un lien direct pour le retour à la page d’accueil doit être proposé à l’internaute sur toutes les pages du site internet (via un bouton « home » ou via un lien sur le logo)
Un bouton « retour » sur la page précédente peut parfois être utile, notament dans le cadre d’une navigation transversale (la fonction est cependant présente sur les navigateurs et bien utilisée par l’internaute).
Navigation et menus sur les ordinateurs
De nos jours, les menus sont présents à l’horizontal dans le header ou/et dans la colonne de gauche. Le type d’arborescence va influer sur le choix de la position du menu principal. Si l’arborescence est large, il sera plus pérenne de l’implanter dans la colonne de gauche. A l’inverse, en cas d’arborescence profonde, un menu horizontale sera recommandé.
Le menu peut être fixé dans la partie haute du site (par exemple) et être ainsi toujours disponible pour l’internaute.
Il est parfois utile de cumuler un menu horizontal et un menu vertical pour afficher par exemple les sous-rubriques.
En cas d’affichage des sous-rubriques au survol d’un rubrique, il conviendra de trouver une alternative pour les terminaux mobiles.
Principaux types de menus sur les mobiles
Menu au tap (sur un bouton en haut de l’écran ou à droite) ou au swipe (menu à gauche de l’écran et à la verticale)
Le menu déroulant : choix de la rubrique dans un menu déroulant traditionnel
Le menu « hamburger » : composé de couches successives afin de permettre à l’internaute de passer de rubriques en sous rubriques (les couches s’empilent à la façon d’un « hamburger »)
Les gabarits de page
Page d’accueil : il peut s’agir d’une page d’accueil basée sur un gabarit de page dit structuré. Il s’agit d’anticiper les besoins des visiteurs et de mettre en avant dans le haut de la page les rubriques ou produits les plus importants. Il s’agit également de mettre en avant les informations pertinentes liées à la stratégie du site. Ce type de gabarit est également utilisé pour les pages d’entrée des rubriques principales. Un gabarit structuré ne permet pas au visiteur d’accéder à toutes les rubriques mais en revanche, cela lui permet d’être orienté, pris en main, ou d’accéder plus facilement à ce qu’il est censé rechercher en arrivant sur la page. L’alternative et un gabarit dit en mosaïque. Sans ce cas, toutes les rubriques sont représentées au travers de visuels dans des blocs souvent égaux en taille. Tout est accessible mais seul l’ordre des blocs permet de hiérarchiser les rubriques ou de mettre en œuvre une stratégie spécifique.
Pages de listes : elles sont utilisées pour des actualités, des bibliothèques de ressources, des catalogue produits… Les éléments présentés peuvent être « empilés » avec un ou plusieurs éléments sur une même ligne. Il peut s’agir de blocs constitués d’une photographies, d’un titre, d’un texte, d’un prix (pour un catalogue produit)… mais ils peuvent aussi être constitués d’une vignette seule, pratique lorsque le visiteur à besoin d’un repère visuel.
Les liste supposent l’implantation d’une pagination ou d’un affichage progressif des éléments au fil du scroll (scroll infini)
Des filtres et tris peuvent être proposés sur une liste (exemple : navigation à facette)
Ouverture des pages cibles
Une nouvelle page peut s’ouvrir dans la fenêtre en cours ou dans une nouvelle fenêtre. Si la page cible s’ouvre dans une nouvelle fenêtre, cela peut rendre la navigation plus difficile (bouton précédent du navigateur inopérant, par exemple). En revanche, si la page cible est localisée dans un site tiers, une ouverture dans une nouvelle fenêtre augmente les chances de ne pas perdre l’internaute qui retrouvera plus facilement la page de départ.
La light box est une alternative à ne pas négliger.
Le Header
Il permet d’identifier le site (au travers du logo), sa promesse (baseline) et compte de façon essentielle dans la « première » impression qu’un internaute va se faire du site. On y trouve le logo (qui permet de revenir à la page d’accueil du site internet d’un simple clic), les liens vers les différentes versions étrangères, le champ de recherche, le compte client ou utilisateur (à droite), le panier (s’il s’agit d’un site e-commerce), le menu principal (en cas de menu horizontal). Certaines rubrique peuvent « ressortir » et être mise en avant dans le Header comme la demande de devis, les contacts, la rubrique « Presse »…
Le header devra être repensé pour les tablettes et les smartphone, proposant une version allégée avec un menu accessible au clic (tap ou swipe). Le logo et sa baseline devront cependant toujours être présents.
Le pied de page (Footer)
Cette zone est présente sur toutes les pages du site. On y trouve généralement le plan du site, les liens de contact, le lien vers le plan d’accès, les CGV, les mentions légales, les crédits, les réseaux sociaux liés au site (à différencier des boutons de partage dans les contenus)… Les éléments de réassurance peuvent y être rappelés. L’inscription à la lettre d’information est souvent présente dans le footer mais il conviendra également de la proposer sous des zones riches en informations et proposant par conséquent un contexte favorable à l’inscription.
Le pied de page peut être très « massif » dans certains cas. Un rappel des rubriques peut y être installé, ce qui permet au visiteur de continuer sa navigation sans avoir à remonter en haut de page vers la barre de navigation.