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 sur
ce site. Il ne comprend donc pas d’autres critères techniques comme le temps de chargement, le poids des fichiers, etc.

1 : la ligne de flottaison

La ligne de flottaison : limite virtuelle des informations principales de votre page
En vous rendant sur
https://eco.e-bourgogne.fr/,
voici ce que vous verrez à l’écran.
La page d’accueil, organisée, structurée.

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 scroller
avec 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’organisme
L’accroche,
simple et efficace
L’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 perdre
Fil 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 ce
site 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).

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.html
Ne 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

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.html
Depuis 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.

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.

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

En vedette

En vedette (20)

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

Similaire à Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple (20)

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