Cela fait un moment que nous n’avons pas partagé un article sur notre blog, nous avons été très occupés entre les sites Web en cours de réalisation et les nouveaux projets de marketing Web !
Pour créer un site web, il est en effet indispensable de s’occuper également de sa conception et notamment de l’étude de son architecture : quels contenus choisir ? Comment les organiser ? Comment les gérer à travers la mise en page graphique ? Faisons ensemble les premiers pas dans le monde de l’utilisabilité.
Commençons par les bases
En 2020, pour répondre aux paramètres de convivialité, un site doit être réactif (nous avons parlé de réactivité dans certains articles précédents, par exemple “Où allez-vous si vous n’avez pas de site réactif ?”) et donc s’adapter complètement aux différents appareils sur lesquels il est affiché. En fait, pensez qu’à l’heure actuelle, le trafic Internet généré par les smartphones représente 60 % du total, dépassant de plusieurs longueurs le trafic des ordinateurs de bureau !
Outre ces données quantitatives, d’un point de vue qualitatif également, la navigation mobile ne peut être ignorée : comme le montrent les données analytiques, lorsque les sites ne sont pas optimisés pour la navigation mobile, la qualité de la visite elle-même est sérieusement affectée, le temps passé sur le site est réduit de moitié et le pourcentage d’abandon augmente. Cela dépend évidemment des différents modes de navigation : ceux qui accèdent à un site à partir d’un téléphone portable doivent pouvoir en apprécier le contenu encore plus immédiatement et plus rapidement.
Si cela ne suffit pas, Google a tendance à pénaliser les sites qui ne sont pas optimisés pour le mobile dans le SERP (la page de résultats de recherche).
Menu
Pour entrer dans la création d’un site web, en suivant les impératifs de convivialité, il faut s’occuper de son architecture interne et de la définition de son contenu.
Comment gérer les différentes pages ? Le menu est le pivot qui guide l’organisation des contenus. Nous commençons par établir les différents éléments qui guideront l’utilisateur dans sa navigation, en essayant de lui permettre d’atteindre les pages principales avec le moins de clics possible. Ce n’est pas un défi facile, mais nous vous assurons qu’il peut faire la différence.
Mieux vaut ne pas être trop créatif dans le choix des noms que nous donnerons aux éléments du menu et dans leur tri : notre but n’est pas de surprendre dans ce cas, mais d’être clair pour l’utilisateur. Essayons de ne pas utiliser des termes trop originaux et de maintenir une succession classique des différents éléments. Voici la séquence la plus classique :
Accueil : la première entrée doit toujours être la page d’accueil, la page principale du site. Pour de nombreux utilisateurs, il ne suffit peut-être pas de cliquer sur le logo pour y revenir, il vaut donc mieux choisir une solution textuelle, peut-être même accompagnée du symbole d’une petite maison ?
Qui nous sommes : nous insérons toujours une page pour vous présenter notre entreprise et notre personnel. Dans ce cas, il est également possible de changer le nom par “A propos”, “Le Studio”, “Notre société”, …
Services/Projets/Clients
Blog
Contacts : si nécessaire, en plus du formulaire, nous pouvons également ajouter une carte qui permet à l’utilisateur d’avoir les indications pour rejoindre notre siège (dans les sites d’activités locales, en effet, il convient d’insérer une page “Où nous sommes” appropriée, qui précède les contacts)
Profondeur du menu
À l’exception des sites physiologiquement exterminés (pensez par exemple au site de l’université de Bologne, qui nécessite inévitablement de nombreux modules de navigation), la profondeur de navigation doit être minimale : comme nous l’avons déjà mentionné, chaque page doit être accessible d’un seul clic.
Pour atteindre cet objectif, nous pouvons utiliser des menus déroulants qui apparaissent lorsque le visiteur passe avec la souris sur les principaux éléments, afin d’offrir un modèle de navigation plus complexe. Cependant, évitons les structures tentaculaires et essayons de n’utiliser qu’un seul niveau de menus déroulants, et évitons que les sous-points en aient d’autres à leur tour, ou la navigation sera complètement perturbée.
Tri des pages
Lorsque nous disposons d’un menu déroulant, il est bon que l’élément principal soit également cliquable. Oui, mais qu’est-ce qu’on met dessus ? Nous allons créer une page de tri qui affiche tous les éléments du menu déroulant, afin que ceux qui viennent du menu principal puissent facilement atteindre la page souhaitée en un seul clic !
Cela est particulièrement utile pour les sites qui sont affichés par des tablettes : souvent, le menu affiché est la version de bureau avec des menus déroulants, des éléments et des sous-éléments. Cela peut compliquer la navigation pour les utilisateurs moins expérimentés (pensez-y : vous devez cliquer sur un élément du menu, puis faire apparaître la liste déroulante et enfin choisir le sous-élément souhaité), mais avec une page de tri nous résolvons tous les problèmes
Menu Burger
Il s’agit du menu burger, qui est un sandwich ! C’est évidemment le bouton qui, depuis le mobile, permet d’afficher le menu généralement en format vertical, et non pas avec la barre de navigation classique disposée horizontalement sur le site. Il doit être présent, mais uniquement pour ceux qui consultent le site depuis leur téléphone portable.
Juste pour assurer aux utilisateurs une navigation rapide entre les pages, si notre menu est plein de rideaux, nous pouvons choisir de ne mettre que les éléments principaux dans le menu du burger : les sous-pages seront toujours accessibles grâce aux liens des pages de tri (comprenez-vous maintenant pourquoi ils ne sont pas optionnels ?
Textes
Contrairement à ce que l’on entend souvent, les textes longs et riches en contenu sont les bienvenus sur le web : nous allons rendre les utilisateurs et Google heureux ! C’est valable que vous soyez déménageurs ou comme moi dans la voyance Suisse !
Cependant, il est essentiel de prendre certaines précautions lors de la rédaction pour le web : nous utilisons la mise en forme avec intelligence et nous insérons des éléments, même graphiques, qui permettent à l’utilisateur de jeter un coup d’œil aux différentes sections de la page et à son contenu, même avec un simple défilement.
Prenons comme exemple cette page d’un cours de départ de inSegno, une école d’informatique de Bologne pour laquelle nous avons créé le site web.
Comme le texte de la page est très long, nous avons correctement mis en évidence les différentes sections (en utilisant h2 et h3), et implémenté (uniquement dans la version de bureau) un menu qui suit l’utilisateur dans sa lecture et permet de se déplacer rapidement vers la section souhaitée
J’enseigne
Appel à l’action
Il est également utile de mettre en évidence les messages principaux de chaque page, définis dans le jargon Call To Action, ou “appels à l’action” que nous pouvons utiliser pour inviter l’utilisateur à nous contacter, à s’abonner à la newsletter, à acheter un produit… Call-To-Action doit être bien visible au-dessus du pli (c’est-à-dire dans la première partie de la page, celle qui apparaît lorsque vous ouvrez le site sans faire défiler la souris). Attention : si votre site est réactif, le pli ci-dessus varie d’un appareil à l’autre, et il est important de s’assurer que notre CTA peut être vu dans tous les différents appareils.
Images
Les structures graphiques des sites modernes sont en fait extrêmement minimes et c’est aussi la raison pour laquelle les images sont si importantes.
Vous souhaitez une démonstration ? Les plus techniques d’entre vous peuvent installer l’extension “Web developer toolbar” sur Mozilla Firefox, et ouvrir n’importe quel site. Essayez Yoox, par exemple. Cliquez ensuite sur “Images” et “Désactiver toutes les images”. Comme vous pouvez le constater, même le plus beau site est un peu dépouillé sans images !
Il est d’autant plus important que les images soient de bonne qualité. Super si elles sont également originales (c’est-à-dire prises directement chez nous), bonnes si nous les achetons en stock (il existe plusieurs sites qui vous permettent de le faire de 123rf.com à depositphoto.com), mauvaises si ce sont des photos originales mais de mauvaise qualité.
