Internet, donne-moi ce que je veux ! 60 modèles de navigation pour satisfaire vos internautes

021 - Barre de navigation horizontale en pied de page

Utiliser les standards (OS,…) afin que les utilisateurs n’aient pas à réapprendre autre chose.

Note 4/5, coût 1/5, accessibilité 4/5Cette navigation s’adapte aux sites ayant un caractère ludique dont les pages de contenus sont très courtes et homogènes.

www.vertigonyack.com
Exemple sur www.vertigonyack.com

Pour qui ?
Cette navigation porte une touche d’originalité car son utilisation n’est pas très répandue.

Une barre de navigation horizontale en pied de page est une barre de navigation qui ferme le site en bas de la page. Tout comme la navigation horizontale en haut de page,un nombre limité d’éléments pourra être affiché en largeur.

Les règles d’ergonomie nous indiquent que tout système de navigation doit s’afficher au même endroit sur toutes les pages du site. Par conséquent toutes les pages du site devront avoir la même hauteur. Il est aussi vivement conseillé d’afficher votre système de navigation de sorte que l’internaute n’ait pas à faire défiler la page. Ainsi vous pourrez afficher votre système de navigation au-dessus de la ligne de coupure (en anglais : above the fold). Voir les encarts à ce sujet.

Origine de l’expression :
« Above the fold »

Lorsqu’un journal est plié, seul les gros
titres du haut du journal sont visibles.
Mettre un titre en avant au-dessus de
la pliure du journal garantit sa visibilité.
Sur le web, c’est la même chose.
Toute information affichée au-dessus
de la ligne de coupure (du fold) garantira
sa visibilité. Si l’internaute a
besoin de faire défiler la page pour
voir l’information, on dira que l’information
se trouve sous le fold.

N’affichez aucun autre système de navigation en haut de page. La plupart des internautes n’iront pas plus loin.

Avec cette navigation :

  • affichez tout le site au-dessus de la ligne de pli quel que soit le navigateur de l’internaute.
  • préférez du texte (html) à des images – si le design vous le permet.
  • donnez du volume à la navigation en insérant pictogrammes, illustrations ou
    variations de couleur et de mise en forme. Insérez des balises « alt » aux illustrations
    et aux pictogrammes.
  • rendez les illustrations cliquables. Un internaute est un enfant de 7 ans avec un
    pouvoir d’achat. Il lit ce qu’il y a écrit sur les boutons et clique uniquement sur les images.
  • allumez les navigations en cours de consultation.
  • Mais où est donc mon fold ?»
    Le fold est compris entre 350 et 890 pixels du haut de la
    page. Cela n’aide pas ! On se rend compte qu’il n’y a pas
    un fold mais des folds. 3 pics à 410, 580 et 830 pixels
    correspondant aux 3 résolutions majeures 800×600,
    1024×768 et 1280×1024. L’arrivée des écrans panomiques
    contribue à la dispersion du fold. Ma recommandation :
    intégrez le bas du menu à 560 pixels du haut de la page
    si vos utilisateurs sont principalement en 1024.
    Consultez vos statistiques.

    www.clicktale.com
    Distribution du fold des internautes d’après une mesure
    réalisée sur l’outil d’analyse du comportement des internautes www.clicktale.com au dernier trimestre 2006

    Attention aux jeux de cadre, iFrame / iLayer
    Limitez en hauteur, la tendance va à créer une page dans la page grâce à un système de cadre. N’utilisez pas de système de mini cadre - appelé iframe - qui sont déconseillés par les ergonomes car les internautes n’ont pas l’habitude d’utiliser plusieurs systèmes de défilement. Sans oublier que ces systèmes de mini cadre (iLayer, iFrame ou Frame) sont particulièrement difficiles à implémenter pour avoir un bon rendu auprès des moteurs de recherche. Les iFrames sont difficiles à implémenter si vous souhaitez rendre vos pages accessibles. Si vraiment, vous n’avez pas le choix, insérez des ascenceurs qui ressemblent le plus possible aux ascenceurs par défaut des navigateurs.
    Affichez coulisse verticale, flèches et barre de niveau de défilement standard. L’internaute
    identifiera d’autant mieux la fonctionnalité.

     

    Dans le livre “Internet, donne-moi ce que je veux !”, lors d’une interview Anne Choktsang, Communication Institutionnelle BNP Paribas commente le site www.jeu-echecs.bnpparibas.com :

        - Anne nous indique en quoi le coté ludique du modèle sert le modèle.
        - Elle nous parle bien sûr des + et des - du modèle surtout dans le cadre de l’accessibilisation du Flash.

    Laisser un commentaire

    Les champs marqués * sont obligatoires

    Les commentaires de ce site sont modérés. En ajoutant un commentaire sur ce site, vous acceptez de pouvoir être cité dans les futurs ouvrages édités par la société Kenazart Strategy Interactive.

     

    Prévisualiser

    Voir des extraits du livre
    Voir un extrait de l'intérieur (table des matières,
    des exemples de navigation,...)
    .
    Télécharger un extrait du livre (PDF 8 259ko).

    Paiement PaypalPrix TTC, Frais de livraison offerts,
    Paiement sécurisé
    Délais d'expédition 2 à 10 jours ouvrés
    164 pages, Format : 19,5x 18
    ISBN : 978-2-9528507-0-4

     

    Achetez le livre version pdf 27 euros (nouvelle fenêtre)

    Paiement Paypal NOUVEAU : Licence pour 1 utilisateur. Un seul fichier PDF de 10Mo à télécharger.
    Prix TTC TVA à 19,6%.
    Paiement sécurisé.

     

    Achetez le livre version pdf 97 euros - version Agence (nouvelle fenêtre)

    Paiement Paypal Offre AGENCES :
    Contient : 60 fichiers PDF des 60 modèles de navigation.
    Licence pour 3 postes utilisateurs (possibilité d'envoyer des fiches à vos clients).
    Prix TTC TVA à 19,6%
    Paiement sécurisé.
    Des détails sur l'offre ? Vous voulez une licence 10 utilisateurs, une licence Intranet ?


    RSS (?) Atom 1.0 RSS 2.0 AddThis Feed Button
    A garder : + à vos favoris