7 choses à ne pas oublier pour maquetter un site internet (partie 1/2)

Lundi matin, 8h. Vous êtes webdesigner, on vous demande de réaliser dans l’urgence une maquette de site web qui sera développée dans la foulée le soir même.
Urgence mais pas négligence : vous savez que quelques règles élémentaires sont à respecter lors de la réalisation d’une maquette web, quoiqu’il arrive. Nous vous en avons sélectionné 7, et voici dans cet article les trois premières règles, illustrées d’exemples et de contre-exemples qui vous parleront certainement :

Préférez le couloir au labyrinthe

Voyez votre futur site internet comme un couloir avec une structure simple ; visualisez une porte qui vous mène à d’autres portes ouvrant sur… encore d’autres portes. Tout va dépendre de la profondeur de votre site : plus il sera profond, plus complexe sera son arborescence. Cependant, si la hiérarchie de vos contenus est mûrement réfléchie, votre internaute ne se sentira pas perdu et naviguera sereinement entre chaque onglet. Logique.

Il faut donc toujours garder en tête que votre utilisateur doit pouvoir se situer dans votre site, quel que soit le niveau de navigation auquel il se trouve. Pour cela, vous aurez systématiquement besoin de créer un menu récurent qui apparaîtra sur les différentes pages de votre site.

Si vous avez construit trois niveaux de navigation ou plus, veillez à ajouter un fil d’Ariane sur votre page. Votre utilisateur est déjà familiarisé avec ce type de navigation, car de nombreux sites de e-commerce en possèdent déjà pour permettre à l’internaute de remonter rapidement d’un produit à sa sous-catégorie puis à sa catégorie. D’un autre côté, vous pouvez proposer un type de navigation d’un nouveau genre et laisser libre cours à votre imagination. L’important est de plaire à l’utilisateur, donc à votre aise.

Fil d'ariane du site Dammann
Fil d’Ariane du site de Dammann

En dernier recours, un plan de site est très utile pour accéder en peu de clics à la page voulue en affichant la totalité des onglets en un coup d’œil.

La Banque Populaire est un bon contre-exemple : son site regroupe l’ensemble du contenu sous deux labels : « Nos offres » et « Vos projets ».

Structuration de contenu du site de la banque populaire
A gauche : capture écran de la page « Particuliers Assurance Vehicule » du site de la banque populaire. À droite : capture écran de la page « Particuliers Assurer Vehicules ».

Malgré deux intitulés différents, le contenu de chaque pages est très similaire. Dans cet exemple, rubrique ASSUR-BP Auto, par exemple, est accessible par deux chemins différents.

Résultats :

  • Le site est alourdi inutilement par des pages dupliquées ;
  • L’architecture de l’information est complexifiée;
  • L’utilisateur peut avoir du mal à retrouver son chemin.

Testez la maquette de votre site

Vous avez à présent défini une bonne structure pour votre site et celle-ci a été validée par votre chef de projet. On vous demande de passer sans plus tarder à son maquettage.

Vous recevez un fichier texte qui contient cinq paragraphes d’une dizaine de lignes chacun.

Face à votre croquis, vous êtes un peu hésitant. Comment présenter le contenu de la meilleure façon ? Quels visuels, quelle quantité de texte, sur combien de colonnes ? Seriez-vous plutôt Gifi ? Ou Alinea ?

Présentations de contenus
À gauche : capture écran de la page d’accueil de Gifi. À droite : capture écran de la page « Catalogue Gallery 2 » du site d’Alinea

Faites le test sur votre voisin de bureau. Montrez-lui d’abord votre composition en trois colonnes, constituée de titres, sous-titres et surmontée de pictogrammes. Puis dans un second temps, ce même contenu agencé sur une seule colonne, avec quelques sauts de ligne pour donner un semblant d’aération, et des mots en gras disséminés dans les paragraphes. Le choix est vite fait, vous ne croyez pas ?

Pensez ergonomie

Le menu, pour commencer. On appelle Menu riche un menu de plusieurs catégories et sous-catégories, toutes détaillées voire illustrées. C’est très utile si l’on crée un site à forte densité et plutôt profond. Parlons-en justement, de cette densité. Si le menu occupe à lui seul plus d’espace que la taille de l’écran, croyez-vous qu’il soit possible de mémoriser tous ses items ? Avez-vous aussi songé à adapter l’ergonomie de votre site en version mobile?

Menu riche, site de la ville de Lille
Capture écran de l’onglet « Vivre à Lille » du site internet de Lille

La ville de Valenciennes propose une solution intéressante à la problématique : les onglets s’activent au clic.

Menu du site de la ville de Valenciennes
Capture d’écran de l’onglet « Vie municipale » du site de Valenciennes

Caractéristiques du menu :

  • Le site est davantage statique : l’utilisateur est plus concentré ;
  • L’impression de contrôle de l’utilisateur est plus grande ;
  • Les couleurs jouent un rôle de guide auprès de l’utilisateur ;
  • Le menu n’est pas parasité par des informations environnantes.

Autre maladresse à éviter dans votre maquette, celle de proposer des icônes sans label.
Parviendrez-vous à deviner vers quelles pages pointent ces pictogrammes ?

Menu du site internet de Maubeuge
Capture écran du menu du site de la ville de Maubeuge

La première, ok, on devine un rapport avec l’immobilier. Mais les autres ? Pas si évident, n’est-ce pas ?

Bon point pour la ville de Tourcoing en comparaison avec Maubeuge : le site propose des icônes labellisées. Mais on passe de 8 à 12 pictogrammes, ce qui est bien trop lourd pour la mémorisation de l’internaute.

Menu riche du site web de Tourcoing
Capture écran des services du site de la ville de Tourcoing

En dehors de cela, nous remarquons un choix de couleurs peu astucieux en matière d’ergonomie. Voyez-vous comme le gris vibre sur le jaune ? Cette superposition chromatique risque de fatiguer l’œil et à terme, de perdre l’attention du lecteur.

Voici déjà trois bonnes astuces pour maquetter un site web de façon professionnelle. Vous en voulez encore ? Rendez-vous à la deuxième partie de cet article pour découvrir 4 autres règles à respecter lors du maquettage d’un site internet.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Pin It on Pinterest