La navigation émotionnelle

Après un petit rappel sur la nécessité de multiplier les modes de navigation, je voulais reprendre le propos sur la navigation émotionnelle.

L’émotion, le moteur de notre navigation

Le web a ses côtés très rationnels, cartésiens, normés et informatisés… mais la navigation sur Internet reste le fait d’internautes doués d’émotions et dont les décisions et les comportements face à un écran passent par le filtre émotionnel.
Savoir prendre en compte ce processus décisionnel et sa phase émotionnel c’est aussi là que réside l’art du web design.

Les neurosciences et l’analyse cognitive peuvent nous en apprendre toujours plus sur ce sujet – voici d’ailleurs une petite liste d’articles hyper instructifs sur l’état de l’art en la matière !

Petit illustration pratique avec le paragraphe ci-dessous

Par exemple, saviez vous que notre oeil au milieu d’une page web est toujours attiré par un visage humain ? La photo de gauche a forcément retenu votre attention oculaire et cérébrale avant la lecture de ce texte… si jamais vous lisez même ce texte !

Notre internaute, dans certaines circonstances, va raccourcir son processus décisionnel et cliquer sur un élément de design qui fera appel à son émotion.
Technique bien connue des e-publicitaires et e-commerçant pour nous inciter à clicker.

Navigation rationnelle ou émotionnelle, mon coeur balance

Le débat permanent qui va se poser : dois je faire appel à l’émotion pour inciter l’internaute à visiter les pages que je veux lui montrer (navigation émotionnelle) ou favoriser sa satisfaction en facilitant l’accès à la page qu’il recherche (navigation rationnelle) ?

Il s’agit d’un jeu d’équilibre permanent. J’ai retenu ici deux exemples de sites pour illustrer le concept :

Le cas materiel.net

Vous avez pu découvrir dans l’article sur la navigation rationnelle le site de materiel.net et bien regardez comment sur la page d’accueil, sans rien perdre de son efficacité rationnelle, ils ont su largement faire appel à votre émotion de geek pour promouvoir les derniers produits les plus high-tech : par ici pour une plongée sur une home-page efficace

Le cas airfrance.fr

Par opposition, regardez la home page du site d’Air France : aucune navigation émotionnelle … place au rationnel uniquement. Pour une compagnie qui développe une communication autour de l’émotion et de son claim « Faire du ciel le plus bel endroit de la terre » c’est assez surprenant.

Et en pratique chez ?

Au sein de l’agence, nous avons mis en pratique ce type de navigation sur de nombreux sites et en premier lieu sur les pages d’accueil, quelques liens utiles pour vous le prouver :
– Les sites web du groupe EDF : par ici
– Le site corporate de Sogeti France : c’est ici
– Le site corporate de Sodexo : c’est par là
– Le site d’ : par ici pour

A très bientôt pour d’autres modes de navigation …

Et toi ? tu navigues comment ?

A force de concevoir des sites Internet (plus de 15 ans d’ancienneté dans le domaine !), il y a une seule chose dont je suis de plus en plus sûr : nous ne naviguons vraiment pas tous de la même manière.
Alors pourquoi réfléchir à une seule ergonomie qui peut paraître simple et intuitive à l’un d’entre vous et totalement déconcertante à un autre.

Au sein de , la réponse que nous essayons d’apporter est donc multiple :
– navigation rationnelle
– navigation contextuelle
– navigation séquentielle
– navigation émotionnelle
– navigation scenaristique
– navigation géographique
etc.

Navigation rationnelle


Pour attaquer une petite série d’articles sur les différents principes de navigation, démarrons par le plus connu : la navigation rationnelle.

Tout le monde connait : on navigue par menu, sous-menus d’une page à une autre au sein d’une arborescence de contenus.
Les contenus du site sont organisés en arbre et on passe de l’un à l’autre en remontant ou descendant le long des branches de l’arbre.
On s’y retrouve grâce à un menu (arborescence), un fil d’ariane éventuellement … un pied de page et une page plan du site vous permet de tout retrouver facilement.

L’enjeu est donc de présenter efficacement cette arborescence et de faciliter les « sauts de branches » : comment faire passer d’un contenu à un autre en un seul hyperlien sans perdre l’internaute.

J’ai sélectionné quelques réalisations que je trouve vraiment bien faites dans le domaine :
– le site d’Icade : les smart-menus permettent de visualiser la structure de l’arborescence dès le passage de la souris. Le niveau de détail de l’arborescence a été adapté par section pour donner l’information principale et importante et ne pas noyer dans les détails > à voir ici – site Internet de Icade (icade.fr)
– un site d’e-commerce : regarder la navigation principale de Materiel.net. Rubriques à l’horizontal, sous rubriques et sections dans le menu de gauche. Filtres de résultats sur critères en centre de la page, fil d’ariane permanent. Si vous êtes cartésien ce site devrait vous plaire ! On sait à tout moment où on est et où on va. à voir ici – une page intèrieure du site materiel.net
– un site media pour terminer : j’ai retenu celui du figaro pour son sytème de navigation à 3 niveaux. Une entrée principale Actualités/Economie/Culture/… qui propose ensuite sur la ligne du dessous ses rubriques puis ligne encore en dessous ses sous rubriques. Un système de couleur vous indique à tout moment où vous vous trouvez dans le site. Simple et imparable ! à voir ici – les trois lignes de la barre de navigation du figaro