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)
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)
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)
A lire aussi :
Très très classe ces screencasts Jacinthe !
T’as vu je viens de découvrir la vidéo ! Eheh !
😉
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
Une boite d’insectes…. hum hum….
Des morbacs ? Ah non, je vois ce que tu veux dire : une ruche dont la Reine est cannibale ?
Le mois dernier, j’ai découvert http://www.dontclick.it et c’est carrément énorme, avant-gardiste, mais un futur exemple à suivre… Du moins en partie, car les habitués du click-à -tout-va seront frustrés :o))))
ouiii, je connais Dontclick.it !
Une navigation pas forcément éévidente à prendre en main… mais très sympa !
Bizarre, je ne vois que du noir, aucune vidéo. Ni sous firefox ni sous Opéra… 🙁
@ 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
Cool merci 🙂
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 !!)
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
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/
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!
salut,
merci pour les liens !
une proposition : http://www.larevueeclair.org