Quatre navigations innovantes

La semaine dernière Smashing Magazine a posté un billet sur une soixantaine d’exemple de site web proposant des menus de navigation à la fois beaux graphiquement, ergonomiques et qui peuvent refléter les tendances actuelles. Qu’ils soient statiques ou animés, sobres ou chargés, ce billet fait une belle récapitulation des menus et permet de constater une évolution qui vont à l’encontre des conventions habituelles. Parmi les exemples, 4 ont retenu mon attention…

Des menus pictographiques

Ce site web comporte un menu fixé à gauche composé de pictogrammes qui illustrent les différentes rubriques. Même si la plupart de ces pictos sont compréhensibles par leurs simplicités graphiques, aucun ne sont accompagnés d’un intitulé. La balise « title » étant trop longue à s’afficher, elle ne permet pas une compréhension instantané des pictos. Toutefois, l’animation colorée qui se joue lors de l’ouverture du site guide l’utilisateur afin de lui faire comprendre où la navigation principale aura lieu et bien avant qu’il commence son exploration du contenu. (voir vidéo)

Playgroundblues.com


Pour ce portfolio, à la différence de l’exemple ci-dessus, chaque pictogramme est accompagné d’une infobulle qui s’affiche automatiquement lors du rollover. La particularité de ce menu est son organisation et son mode de fonctionnement : les sous-menus sont omniprésents (en-dessous des rubriques pictographiques) et sont organisés chronologiquement. Lors du rollover d’un des pictos, les items y correspondant s’affichent d’un fond de couleur cohérent à la rubrique. (voir vidéo)

Designforfun.com/portfolio.php


Un menu temporel

Malgré sa petite taille, cette navigation est une reconstitution visuelle et temporelle d’un calendrier qui permet la consultation de chaque projet réalisé de cette agence. (voir vidéo)

Polkdesign.net


Un menu expérimental

Après substitution du curseur par une étoile, l’utilisateur doit naviguer à l’aide d’un menu sous forme d’étoile interactive. Toutes ses actions vont se faire grâce au mouvement de la souris et du clic gauche actionné (la validation d’une rubrique se fait en relâchant le clic gauche). Cette navigation est très intéressante mais toutefois difficile car le manque de précision avec le mouvement de la souris pose parfois problème. A tester !
(voir vidéo)

Nickad.com


A lire aussi :

Quatre navigations innovantes

14 réflexions au sujet de « Quatre navigations innovantes »

  1. Hé, le deuxième me rappel des recherche de couleurs dqns une boite « d’insectes » où j’ai travailler. Une charmante graphiste avait proposé une charte graphique avec ouleurs différentes pour chaque gamme de produit. Un menu pictographiques comme le deuxième aurait été génial

  2. Une boite d’insectes…. hum hum….
    Des morbacs ? Ah non, je vois ce que tu veux dire : une ruche dont la Reine est cannibale ?

  3. ouiii, je connais Dontclick.it !
    Une navigation pas forcément éévidente à prendre en main… mais très sympa !

  4. Jacinthe dit :

    @ Rémi : c’est bon le problème est résolu. Les premiers screencasts étaient réalisés avec http://www.jingproject.com/
    très pratique sauf qu’il ne supporte pas la charge de visite. Arrivé à 1GB… plof :(

    « Your Jing account has reached the monthly bandwidth limit of 1GB. Viewers cannot access any media in your account until your next monthly bandwidth allocation begins. »

    Donc… op ! j’ai trouvé une solution et le tout est sur Vimeo

  5. Certes la navigation de Nickad est originale mais je la trouve vraiment pas pratique du tout… (et avec le pavé d’un ordinateur portable c’est juste ingérable !!)

  6. amelie dit :

    J’aime beaucoup les deux premiers, peut être a cause des couleurs. Je vais me garder cela dans un coin de la tête pour mon futur book-en-ligne. Merci

  7. Le premier exemple ne marche pas sans titre associé au picto. Une seul marque à pu se le permettre : Nike. Ça vient du contexte à mon avis.

    J’adore les deux suivants, et surtout la nav’ par historique, qui peut être aussi géographique, nia, nia, nia et compagnie. Ça introduit des nav’ plus visuelle dont la compréhension peuvent se révéler plus immédiate, à la Apple. Il y as aussi une question de contexte et de mise en valeur de la navigation de manière à en comprendre la fonctionnalité.

    A voir ;) : http://www.fredcavazza.net/2008/03/11/ne-peut-pas-etre-apple-ou-google-qui-veut/

  8. rilax dit :

    Au niveau ergo par contre c’est pas vraiment ça, le guidage utilisateur est assez mal fichu, particulièrement dans le dernier, complètement décalé par rapport au standard, et finalement assez anxiogène j’ai trouvé.
    Sinon ça à le mérite d’ouvrir de nouvelle piste de réflexion, alors merci!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.