Tourner les pages d’un site comme l’on tourne les pages d’un livre à partir de la droite.

Exemple sur www.fantaisyinteractive.com

Question
Lorsqu’un utilisateur arrive sur une page, posez-vous la question : où place-t-il sa souris ? Sur la droite de l’écran. Cette navigation est affichée à l’endroit où la souris des internautes se trouve ! Finis les allers-retours à travers l’écran.

.

La barre de navigation s’affiche sur la droite de l’écran. Le titre des catégories peut être affiché à l’horizontal ou à la verticale. Vous pouvez afficher cette navigation sur deux niveaux. L’avantage de cette navigation est que vous avez plus de place pour intégrer des libellés plus éloquents (CTA : Call To Action). Imaginez que les internautes sont arrivés sur la page grâce à un moteur de recherche, affichez en colonne de droite des libellés correspondants à ce qu’ils pourraient se poser comme question.

Exemple sur www.nakedboyssinging.com

Des tests utilisateurs prouvent que le
fait de ne pas afficher le menu à l’endroit
attendu par l’utilisateur ne gênait pas
particulièrement ce dernier. L’utilisateur
se concentre sur le contenu.
Source Jacob Nielsens

Si vous choisissez ce système de navigation pensez à :

Exemple sur www.audiusa.com

Audi USA a mis en place 3 modes de navigation dans les pages :

une navigation interactive en flash en milieu de page

une navigation en haut de page

une navigation verticale en colonne de droite.

71%des clics se font sur la colonne de droite.

Capture d’écran sur téléphone mobile Nokia 6280 du site www.strategy-interactive.com/blog.com

Avantage moteur de recherche
Les moteurs de recherche analysent le début d’une page html. Très souvent le début du code est constitué du code html de la barre de navigation. Avoir le code html de son menu en fin de code permet de faciliter aux moteurs de recherche la différenciation des pages. Et ainsi d’éviter d’avoir toutes les pages de votre site classées en «pages similaires» dans les pages de résultats des moteurs de recherche.

Avantage gabarit d’impression Dans leur configuration par défaut les imprimantes coupent une partie des sites qui n’ont pas de gabarit d’impression spécifique. Le menu de navigation placé sur la droite a pour avantage qu’à l’impression ce sera le menu qui sera coupé et non le contenu.

Astuce Accessibilité
Pour les internautes qui lisent la page linéairement (personnes aveugles, handicapés moteurs, utilisateurs de téléphone mobile) insérez des liens d’échappement dans la page. Ils sont aussi appelés liens d’évitement. Ils doivent être intégrés tout en haut de la page. Ces liens donnent accès à un raccourci vers le menu sans avoir à faire défiler tout le texte. Ce sont de simples ancres - code HTML tag a name.... Ces liens sont au choix, visibles sur la page ou invisibles. Les utilisateurs voient les liens lorsqu’ils accèdent à la page sans feuille de style ou en tabulant dans la page.

Exemple sur www.alsacreations.com

Exemple sur www.eyrolles.com