60 modèles de navigation passés au crible

Souvenez-vous, il y a quelques années (en 1998) sortait un livre intitulé « Web Navigation » qui décortiquait les quelques modèles de navigation de l’époque (6 types de site : shopping, community, entertainment, identity, learning et information).

Depuis il s’est passé presque 10 ans. Donc en théorie 10 x 6 ça doit faire 60.

Et le compte est bon puisque le livre dont je souhaite vous parler est construit autour de l’analyse de 60 modèles de navigation. Oui môssieur, 60 !

NavigationWeb

 

« Donne-moi ce que je veux ! » est un livre unique puisqu’il est composé d’une série de fiches qui décortiquent différents modèles de navigation : horizontale, verticale, menu déroulant, double bandeau….

C’est donc au final un très gros travail de recherche réalisé par Patricia qui a souhaitée prolonger l’expérience en créant un site communautaire pour faire vivre et évoluer ces modèles de navigation : Navigation-web.com.

Je précise au passage que j’ai eu la lourde tâche de rédiger la préface de ce livre, de même que de me prêter au jeu de l’interview d’expert sur le modèle N°55 (fil d’Ariane ou breadcrumbs en anglais). L’auteur fait d’ailleurs référence sur cette fiche au menu très inspiré de Yahoo! Food (nom de code : crumbing menu) dont j’avais déjà parlé dans un précédent billet.

Je précise également que malgré de nombreuses tractations, il n’a pas été possible d’insérer le très bon exemple de iLike (cf. Peut-on se passer des menus de navigation ?).

Bon bref, un livre indispensable pour pouvoir y piocher de l’inspiration ou pour avoir une vue exhaustive de ce qui se fait en matière de systèmes de navigation.

Normalement Patricia sera présente à la Journée Mondiale de l’Utilisabilité, donc si vous venez n’oubliez pas votre exemplaire pour vous le faire dédicacer.

Connaissez-vous l’ergonomie artistique ?

L’ergonomie artistique est un terme barbare qui désigne les expérimentations d’interfaces alliant des critères d’utilité (accès à l’information) et d’esthétisme (de l’art numérique). Donc pour faire simple, ce sont des sites qui explorent d’autres modes de représentations et de manipulation des données.

Illustration avec trois exemples de réalisations de Jonathan Harris.

Phylotaxis, une interface de découverte de news par nuages de vignettes :

Phytolaxis.jpg

We Feel Fine, un aggrégateur / navigateur d’états émotionnels :

IFeelFine.jpg

Universe Daylife, un agrégateur de news permettant de filtrer l’actualité selon des stages :

UniverseDaylife.jpg

Pour ceux que ça intéresse, je tiens à préciser que l’auteur de ces applications (Jonathan Harris) est un surdoué, un visionnaire, un demi-dieu des IHM. Pour en savoir plus sur son travail, je vous recommande cette stupéfiante vidéo : The Web’s secret stories.

Ce Jonathan Harris en question est également à l’origine du projet Yahoo Time Capsule :

YahooTimeCapsule.jpg

Et puisque l’on parle de Yahoo!, je vous recommande également de visiter le site de la Yahoo! Design Innovation Team qui elle aussi réalisée un certain nombre d’expérimentations visuelles très intéressantes.

Yahoo! Traffic Map, une représentation en temps réel du l’état du trafic :

YahooTrafficMap.jpg

Flickr Lens, une visualisation géospatiale des contributions à Flickr :

FlickrLens.jpg

Yahoo! Answers Clouds, une autre représentation spatiale des contributions à Yahoo! Answers :

YahooAnswersCloud.jpg

Dans la même série, je peux enfin (ouf !) vous recommander de jeter un oeil aux expérimentations du Digg Labs.

Face à autant de talent, je ne peux que m’incliner devant ces superbes réalisations qui nous font découvrir de nouvelles possibilités de représentation et de manipulation.

Tout ça me rappelle Digiquaria dont j’avais déjà parlé il y a trois ans : ça sert à rien, mais qu’est-ce que c’est beau !

oSkope expérimente de nouveaux modes de présentation des listes de résultats

Connaissez-vous oSkope ? Il s’agit d’un moteur de visualisation des résultats de recherche en provenance de sites marchands (Amazon, eBay) ou de sites de partage (FlickR, YouTube).

Les résultats de recherche peuvent ainsi être présentés sous forme de grille, pile, bazar, liste ou encore graphique.

Ici le mode stack :

oSkope_Stack

 

Et ici le mode graph :

oSkope_Graph

 

Voici donc une expérience intéressante à mi-chemin entre Kartoo et les expérimentations visuelles de Jonathan Harris (We Feel Fine, Universe…).

(merci à François pour le lien)

Peut-on se passer des menus de navigation ?

Les menus de navigation sont ancrés dans les pratiques du web : ils apparaissent comme quasi-indispensables, notamment pour aider les utilisateurs à s’orienter et à se déplacer au sein d’un site. Par conséquent nous (les internautes) sommes habitués à trouver ces menus en haut des pages. De même, nous (les concepteurs de sites) ne nous posons même plus la question de savoir s’il faut un menu ou non.

Et pourtant… je viens de découvrir un site qui a fait le choix audacieux de substituer un menu de navigation permanent par un chemin de navigation : iLike. Dans les faits, ce site (qui possède une structure et une arborescence tout à fait classique) mise tout sur la navigation contextuelle. Illustration avec cette page dédiée à un album d’Enrique Iglesias :

iLike

 

Hé oui, pas de navigation, juste un « fil d’Ariane » accolé au logo (qui sert de retour à la page d’accueil). Je ne peux que reconnaitre la réussite de ce système de navigation minimaliste qui « fonctionne » parfaitement bien.

En fait les avantages de cette solution sont multiples :

  1. cela dégage un maximum de place
  2. cela permet de contextualiser les pages et de concentrer l’attention en allégeant la structure
  3. cela facilite la compréhension de l’arborescence par les utilisateurs

Bref, une réussite sur toute la ligne. Mais attention, cette solution ne s’applique pas à tous les types de sites. Une arborescence large ou profonde peut par exemple être très problématique à gérer en l’absence de menu de navigation (difficulté à se repérer, problème pour basculer d’une section à une autre…).

Je trouve dans ce site l’illustration parfaite d’une recommandation faite à un client il y a quelques années : supprimer la barre de navigation principale au profit d’une navigation contextuelle (en coeur de page) afin de concentrer l’attention. Dédicace spéciale à Monica et GOB ;-)

En tout cas je vous invite à réfléchir très sérieusement (en vous inspirant de cet exemple) sur l’intérêt réel du menu de navigation de votre site :

  • Comment naviguent vos visiteurs : en cliquant sur les liens ou en utilisant le menu ?
  • Votre site serait-il toujours utilisable sans la navigation ?
  • Quel gain de place cela représenterait-il ?
  • Comment pourriez-vous réexploiter l’espace ainsi gagné ?

(liste à compléter dans les commentaires)

Une nouvelle version pour eBay

Aviez-vous remarqué la nouvelle version d’eBay ?

EbayNew

 

Bien plus agréable à l’oeil et surtout beaucoup moins austère que la précédente version, cette nouvelle page d’accueil privilégie avant tout le guidage (plus d’espace blanc, gros bouton « Inscrivez-vous ») et la réassurance (« Tout savoir », « Tout connaître »).

Pour en savoir plus, je vous recommande la visite guidée : New Homepage Demo.

Cette version est visiblement fortement inspirée d’eBay Express dont j’avais déjà parlé dans un précédent billet (Un site pour deux expériences utilisateur différentes). Comme quoi, même les piliers du web peuvent (et doivent) se remettre en question.

En tout cas je ne peux que saluer le travail des concepteurs qui ont remarquablement bien redressé la barre même s’il reste encore beaucoup de travail à faire, notamment sur l’inscription et le processus de dépôt d’annonces. (via Kelblog)