Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple

By www.silicom-vallee.com | avril 2015

Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple

avec le site « J’entreprends en Bourgogne » https://eco.e-bourgogne.fr/

Ce site est un sous-domaine de la plateforme e-bourgogne.fr/,dont le propriétaire et le gestionnaire est le Conseil Régional de Bourgogne via le GIP e-bourgogne,

destiné à mutualiser les moyens de déploiements informatiques.

Ici le champ d’analyse de l’ergonomie du site se limite à la navigation dans les pages et dans les recherches de contenus surce site. Il ne comprend donc pas d’autres critères techniques comme le temps de chargement, le poids des fichiers, etc.

https://eco.e-bourgogne.fr/


1 : la ligne de flottaison


La ligne de flottaison : limite virtuelle des informations principales de votre page

En vous rendant surhttps://eco.e-bourgogne.fr/,voici ce que vous verrez à l’écran.

La page d’accueil, organisée, structurée.

https://eco.e-bourgogne.fr/



Vous observerez que l’essentiel des informations figure tel quel, sans avoir à scroller.

Si vous scrollez, c’est-à-dire si vous glissez vers le bas de la page avec votre souris/curseur, vous verrez le pied de page.Cette zone est masquée sans scroller, elle figure sous la « ligne de flottaison ».


Ligne de flottaison

Partie « utile » visible sans scrolleravec le format d’affichage par défaut de votre écran

Les informations principales de votre page doivent figurer sur cette zone (titres, menu, accroches, boutons, publicités, …).

Partie « secondaire »en scrollant




La ligne de flottaison est un facteur d’organisation des informations de votre page.Elle est conditionnée par les différents types d’affichage (PC, tablettes, smartphones), les différentes résolutions d’affichage (1366 x 768, 1024 x 768, etc.), et les différents navigateurs. Tous les internautes, selon leur appareil et leur navigateur, ne verront pas le même affichage d’une même page.Pour ne pas se tromper, votre concepteur de site web adaptera le design en fonction de la plus petite résolution d’écran ciblée. Ensuite, au gestionnaire du site (vous-même, votre webmaster, votre prestataire délégué en contenu) d’adapter les contenus des pages au regard de ce facteur.

Pourquoi ? L’internaute ne rechigne pas à faire défiler la page vers le bas, en revanche, il faut lui en donner l’envie, d’où les infos judicieuses à placer en tête.


2 : Une architecture d’entrée structurée, premier niveau de la

navigation de l’internaute


Une architecture d’entrée structurée : une navigation compréhensible en un clin d’oeil

Une zone d’en-tête ultra claire :

Le logo de l’organismeL’accroche,

simple et efficaceL’accès à

l’espace adhérents

Concernant l’accroche, notez l’usage de la seconde personne du pluriel qui fait de cette plateforme « la vôtre » et non celle de l’organisme.

Un bel exemple qui laisse la place à l’internaute.


Une architecture d’entrée structurée : une navigation compréhensible en un clin d’oeil

Une zone de navigation organisée :

Un menu horizontal limité à l’essentiel (infos relatives à l’organisme)

En orangé, infos de service à

l’internaute

Au centre les pavés de

navigation organisés par

besoins ou statut de l’internaute. Un design qui se

prête particulièrement

au tactile des tablettes


3 : La ramification des sous-rubriques, deuxième niveau de la navigation

de l’internaute


L’architecture au deuxième niveau : orienter l’internaute sans le perdreFil d'Ariane

Une zone d’introduction qui gagnerait à être moins politisée. Les acteurs publics

français continuent de véhiculer le message de la crise comme une fatalité quand cette plateforme se veut une boîte à outils de l’entrepreneur.

Le titre de la rubrique bien en évidence dans un cartouche.

Organisation de la ramification :Il n’est jamais évident de lister un grand nombre de sous-entrées. Ici le pari est réussi, avec une présentation comme en « dos de classeur », en bibliothèque, et sans aspect rébarbatif.


4 : Les « hic » : quelques manques en terme de navigation et contenus


Hélas, ce site n’est pas responsive, c’est-à-dire que son affichage n’est pas optimisé pour le format des différents types d’écrans (tablettes, smartphones).Pourtant, au premier coup d’œil sur l’affichage PC, nous aurions pu le croire, car l’organisation en couleurs et par pavés, très claire, laissait présager un affichage responsive.

Rappel : pourcentage des internautes consultant / naviguant sur leurs smartphones : 80 % en 2014 (Global Web Index Device).

Capture d’écran réelle au 08/04/2015

sur Sony Xperia

Le format d’affichage de cesite reste correct sur tablettes.

Testez votre affichage avec www.responsinator.com/.

C’est votre cas ? Il n’est pas trop tard. Consultez votre prestataire agence web (pour l’adaptation du « squelette », le contenant, de votre site) et Silicom Vallée (pour l’adaptation du contenu).

http://www.responsinator.com/


Le logo ne permet pas le retour à la page d’accueil.Dommage, un basique pourtant. Avec ce site il faut cliquer sur « page précédente » avec votre navigateur.

Attention aux pages en cours de construction !https://eco.e-bourgogne.fr/filtre-annuaire/115.htmlNe laissez pas de notes personnelles visibles par les internautes, c’est peu professionnel et source d’abandon de la visite en cours.En revanche vous pouvez indiquer « page en cours de construction », « contenu en cours d’élaboration, merci de votre prochaine visite », etc.

Les couacs en ergonomie et contenus : les améliorations possibles

https://eco.e-bourgogne.fr/filtre-annuaire/115.html


Attention au linking interne et aux erreurs 404.https://eco.e-bourgogne.fr/actualites/Depuis le plan de site, la rubrique « présentation » dirige sur la page « actualités », ce qui est discordant, en plus d’arriver sur un lien mort.

Une navigation moins évidente dans le plan de site …https://eco.e-bourgogne.fr/actualites/1.htmlDepuis ce même espace, la rubrique « actualités » dirige sur une seconde ramification « actualités-1 ». Dommage de partir d’une architecture d’informations bien orchestrée depuis la page d’accueil pour arriver sur un plan de site en jachère où il reste du travail, et source de démotivation pour l’internaute.


https://eco.e-bourgogne.fr/actualites/

https://eco.e-bourgogne.fr/actualites/1.html


Un minimum de contenu sur une plateforme active !https://eco.e-bourgogne.fr/rubrique.php3?id_rubrique=40&theme=15&sso

Un annuaire de contacts ne contenant qu’un seul contact (ici la DIRRECTE, pour du conseil en financement), c’est dire si l’internaute sera déçu !De plus à ce stade le fil d’Ariane n’apparait plus, et comme le logo d’en-tête ne permet pas le retour à la page d’accueil, difficile de l’orienter. Les chances de le perdre sont élevées.


https://eco.e-bourgogne.fr/rubrique.php3?id_rubrique=40&theme=15&sso


Conclusions :

Un outil prometteur depuis la page d’accueil, pour l’internaute entrepreneur, avec un design et une navigation d’entrée simples et plaisants. Mais plus celui-ci s’avance dans le contenu du site, plus il est confronté à quelques surprises : liens morts, pages vierges ou hors ligne, annuaire incomplet et inefficace selon ses requêtes, défaut d’affichage de titre sur certaines pages, des zones de pages incomplètes, …. Qui laissent supposer la livraison d’une refonte de l’outil plateforme sans actualisation et maintenance derrière (l’outil a quelques années maintenant).L’investissement de départ (pour cette refonte), bien que réussie en matière de design, ne satisfera pas l’ensemble des internautes, à la recherche d’informations précises via les annuaires et outils de recherche. L’objectif de se projet sera donc partiellement rempli.

Qui pour gérer mes contenus web ?A défaut d’un collaborateur dédié (webmaster, chargé de communication),vous pouvez externaliser, occasionnelle-ment, périodiquement ou de manière pérenne l’animation des contenus. C’est le propre des web content managers indépendants ou en agence.

Ceci pose également la réflexion des moyens alloués à l’animation (la fraîcheur des données, l’actualisation, les vérifications, …) d’un site internet. Encore trop nombreux sont les organismes à refondre (ou à créer) le design d’un site web sans en faire aboutir le contenu jusqu’au bout, ou jusqu’à un niveau « acceptable » pour l’internaute, ce qui conditionne la crédibilité de l’outil et donc de l’organisme.

Rédaction web & print - Référencement naturel - Animation communautaire - Veille concurrentielle et sectorielle

www.silicom-vallee.com

Silicom Vallée défend des contenus utiles et actuels de vos supports web,au service des objectifs de votre identité numérique et de votre organisation.

« Tour de site »

effectué par SILICOM VALLEE

management de contenus web à Dijon

http://www.silicom-vallée.com/

Marketing

Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple