Articles taggés avec ‘navigation’

Navandising, le merchandising appliqué à la navigation

J’ai toujours été fan des menus de navigation surdimensionné et du coup je suis tout à fait en phase avec le dernier article du blog de Get Elastic : Navandising: Merchandising in Navigation. L’idée est d’appliquer des techniques de merchandising (mise en avant de produits) aux menus de navigation. Bon par contre ça ne s’applique qu’aux boutiques proposant des panneaux de navigation suffisamment grands pour pouvoir y insérer des blocs.

L’auteur de l’article cite ainsi American Eagle (que l’on ne présente plus) :

Le merchandising des menus de navigation chez American Eagle

Le merchandising des menus de navigation chez American Eagle

Mais on peut également découvrir le site de Moosejaw :

Les encarts sur la navigation de Moosejaw

Les encarts sur la navigation de Moosejaw

À ces deux exemples je rajouterais ceux de Electronic Arts :

Mise en avant de produit chez EA.com

Mise en avant de produit chez EA.com

De même que le site de Sony :

Catégorisation avantageuse chez Sony.fr

Catégorisation avantageuse chez Sony.fr

Et enfin le site de Yves Rocher :

Les panneaux de navigation du site de Yvers Rocher

Les panneaux de navigation du site de Yvers Rocher

Une très bonne idée, que se soit pour mieux guider les internautes ou pour mettre en avant des produits. Si vous connaissez d’autres exemples, merci de laisser les URLs en commentaire.

Immersion et magazine en ligne pour la Panamera de Porsche

Vous avez forcément entendu parler de la Panamera, le nouveau modèle 4 places de Porsche. Je vous propose aujourd’hui de découvrir le mini-site qui va avec la voiture. Premières impressions : ce mini-site ne ressemble à aucun autre (un peu comme la voiture d’ailleurs). La page d’accueil propose ainsi un embranchement entre la découverte du modèle ou le magazine dédié :

La page d'accueil du site de la Panamera

La page d'accueil du site de la Panamera

En optant pour la découverte du modèle, vous arrivez sur un cube en 3D composés de couches de contenus :

L'accès aux contenus au travers des éditions en cube 3D

L'accès aux contenus au travers des éditions en cube 3D

Le cube change de perspective selon les déplacements de la souris. Un clic sur une case vous permet d’en dévoiler le contenu (ici la vue à 360°) :

La vue à 360° de la Panamera

La vue à 360° de la Panamera

Vous avez également la possibilité de naviguer dans les contenus en fonction de leur lieu géographique (je ne vois pas trop l’intérêt) :

La vue géographique des contenus

La vue géographique des contenus

De même, vous pouvez “vivre l’expérience” de la Panamera selon la chronologie de sa génèse :

La mosaïque chronologique de la Panamera

La mosaïque chronologique de la Panamera

Il y a finalement la fameuse vue “Magazine” du début qui est assez proche de la mosaïque vu ci-dessus :

Le magazine en ligne de la Panamera

Le magazine en ligne de la Panamera

J’imagine qu’ils ont choisi un fond noir parce que ça fiat plus classe (ils manquent de finesse sur ce coup là).

Au final nous avons un site singulier qui favorise une découverte empirique des contenus. Empirique est ici un euphémisme pour décrire un mode de navigation complètement aléatoire où l’on saute d’un contenu à l’autre. Pourquoi pas… si le tout n’était pas si lent à charger.

Décathlon adopte la frise à catégories (entre autres choses)

Souvenez-vous, à l’ouverture de ce blog en début d’année dernière je vous avait parlé de Koodza, une boutique de la galaxie Decathlon qui expérimentait un certain nombre de fonctionnalités “riches” : Koodza, une boutique riche pour Decathlon. Et bien figurez-vous que l’exercice à dû être concluant car c’est maintenant le site principal Decathlon qui intègre toutes ces fonctionnalités, à commencer par un menu sur-dimensionné (”Choisissez votre sport”), un panier dépliant ainsi qu’une frise à catégories :

La page catégorie de Decathlon.fr

La page catégorie de Decathlon.fr

Mais il y a aussi de très belles pages liste avec des filtres à rafraichissements silencieux, des infos bulles géants (au survol de “+ d’infos”) et le choix de la vue :

La page liste de Decathlon.fr

La page liste de Decathlon.fr

Un site d’une sobriété exemplaire qui prouve que l’on peut tout à fait proposer des raffinements au niveau de l’interface quand on s’adresse à un large public. Oubliez donc vos histoire de “Est-ce que ma grand-mère saurait l’utiliser ?” et réfléchissez plutôt à ce que cela peut apporter en terme de confort d’usage.

Est-ce la mode des interfaces gestuelles ?

Les interfaces riches sont formidables car elles nous permettent de repousser toujours plus loin les limites des sites web et du bon vieux HTML. Mais par moment on se demande s’ils ne les repoussent pas trop loin ces limites… Prenez par exemple ces trois sites qui proposent une interface gestuelle :

  • Red Issue, un site de styliste où il faut tracer des flèches sur les bords de l’écran pour parcourir les différentes pages du site

    La navigation gestuelle de Red Issue

    La navigation gestuelle de Red Issue

  • Toshiba What’s Next, un mini-site “expérientiel” où les éléments du décors réagissent en fonction des symboles que vous tracez à l’écran

    Le mini-site What's Next de Toshiba

    Le mini-site What's Next de Toshiba

  • Citroën DS Inside avec son configurateur gestuel

    Le configurateur gestuel de la Citroën DS

    Le configurateur gestuel de la Citroën DS

Tout ça c’est très sympa mais est-ce réellement viable ? Si vous êtes un créateur en décalage par rapport au marché et à vos concurrents, admettons que vous ayez besoin de vous démarquer à tout prix. Mais si vous êtes une marque grand public avec des produits grand public et que vous devez séduire le… grand public, alors je m’interroge sur la pertinence d’une telle démarche.

Il est à mon sens essentiel de mettre en valeur les produits (ou l’expérience qu’il proposent) au travers d’une interface novatrice dans la présentation et la mise en scène, mais pas dans le système de navigation / manipulation. Ce dernier est en effet soumis aux mêmes règles d’utilisabilité que les sites en HTML : simplicité, facilité d’apprentissage, guidage, tolérance aux erreurs…

Bref, je reste persuadé qu’il y a un fort décalage entre l’ambition affichée par les deux dernières marques (qui, quoi que le directeur marketing ou l’agence en pensent, restent des marques grand public) et les produits vendus (qui ne sont pas censés révolutionner le marché). Apple n’a pas eu besoin de ce type d’interface pour promouvoir son iPod ou son iPhone, un “simple” site web suffit : simple, utile, informatif. Et puisque l’on parle de l’iPhone et de son interface tactile, je précise que les trois exemples montrés plus haut me font plus penser à l’interface d’un Palm Pilot qu’autre chose.

Ne vous méprenez pas sur ma prise de position, je reste un fervent adepte des interfaces riches appliquées au e-commerce, mais on ne peut pas tout se permettre sous prétexte que les objectifs de vente sont élevés (”il faut frapper un grand coup“). Le but du jeu est de séduire, pas de désorienter, non ?

(via Hebiflux et Interfaces riches)

Zoomii met en scène les rayonnages riches

Vous souvenez-vous de Borders, ce marchand de livres qui utilisait une interface de visualisation des livres qui reprenait la métaphore des rayons ? Et bien figurez-vous que j’ai encore plus fort à vous proposer avec Zoomii, une boutique en ligne qui présente les produits dans un rayon gigantesque :

Zoomii.jpg

La navigation au sein des rayons se fait soit en glissant les rayons (comme dans Google Maps), soit en utilisant les flèches (comme dans Google Maps). Il est possible de zoomer sur un rayon (comme dans Google Maps) ou au contraire de prendre du recul pour avoir une vue d’ensemble (comme dans Google Maps).

Ce principe n’est pas nouveau (puisque déjà exploité par Browse Goods) maisil est ici superbement implémenté. Le plus drôle dans tout ça, c’est que Zoomii n’est qu’une interface, c’est bien le catalogue Amzon qu’il y a derrière.

Voici donc un bel exemple de mashup marchand : l’interface de Google Maps et le catalogue d’Amazon. Plus d’infos ici : Zoomii, A Virtual Book Browsing Service et Visual book browsing with Zoomii.

Une boutique riche pour les Galeries Lafayette

Et voilà, les Galeries Lafayette viennent de rejoindre le clan des cyber-marchands avec une boutique en ligne toute fraiches (il y a encore écrit “beta” dessus) : GaleriesLafayette.com. Pour les détails techniques, ça se passe sur le blog de Michael Amar.

La première impression est plutôt bonne avec une cinématique d’accueil tout en dorures et en éclats. Vient ensuite une page d’accueil très sobre qui privilégie les larges visuels avec un carrousel pour n’afficher qu’un seul produit à la fois :

Galaf_Accueil.jpg

L’accès aux produits se fait par marques (premier item de la liste) et par genres. Ils ont fait le choix (audacieux) de faire défiler les marques dans une frise horizontale :

Galaf_ListeMarques.jpg

Idem pour les pages de gamme qui reprennent le principe des menus en fish-eye (un peu comme le dock d’Apple) :

Galaf_Gamme.jpg

La fiche produit est très sobre et laisse une large place aux visuels (dommage pour cet espace vide à droite) :

Galaf_Produit.jpg

Le panier est plutôt réussi avec une très bonne lisibilité :

Galaf_Panier.jpg

Conclusion : une première expérience concluante. Alors bien évidemment il y a beaucoup à redire sur cette boutique (la liste du Capitaine Commerce est là : Site du jour : GalerieLafayette.com) mais le commerce en ligne est un secteur très dure où de nombreux paramètres viennent influer (dégrader ?) le résultat final. Certains observateurs sont d’ailleurs très critiques envers cette boutique : Grosse déception face à la nouvelle e-boutique des Galeries Lafayette.

Cette boutique nous prouve une fois de plus que le rich commerce est un domaine complexe avec une courbe d’apprentissage assez longue. Même avec un grand nom et de gros moyens il n’est pas possible de faire mouche du premier coup.

Connaissez-vous la navigation par clavier ?

Une fois n’est pas coutume, je vous propose de découvrir un site qui propose un mode d’interaction à la limite du vintage : le clavier !

Le clavier ? Oui tout à fait, c’est ce que propose la boutique We are the Superlative Conspiracy :

WESC.jpg

Au final, l’expérience n’est pas inintéressante, c’est un mode assez linéaire mais qui pourrait intéresser certains utilisateurs qui apprécient les modes de découverte systématique des gammes (un produit après l’autre).

Bref, une boutique à tester pour stimuler vos réflexions…

(merci à David pour le lien)

Un système de navigation 3 en 1 chez Burton

Je vous propose de découvrir un système de navigation 3 en 1 chez Burton : navigation principale + navigation locale + chemin de navigation avec possibilité de passez d’une branche à une autre (Men, Women, Youth). Et en prime ça ne prend pas trop de place sur le haut de la page :Burton1.jpg

Vous remarquerez au passage que les planches peuvent être comparées à l’aide de différents critères (5 en tout) mais qu’ils proposent une lecture simplifiée à l’aide d’un critère unique (baptisé ‘feel‘).

Au niveau de la fiche produit, on retrouve ce même système de navigation mais avec l’affichage de l’intégralité de la gamme au survol de la souris sur le picto avec les silhouettes des planches :

Burton2.jpg

Ce système est très intéressant car intuitif et surtout très économe en place. De plus, les URL sont lisibles. Un bon exemple à mettre dans vos benchmarks.

/!\ Billet initialement publié sur FredCavazza.net.

Etsy : une expérience de navigation très intéressante

Décidemment, je découvre des concepts innovant tous les jours. Dernier en date : Etsy.

Le logo de Etsy

Il s’agit d’un site de e-commerce CtoC où des particuliers vendent des objets fabriqués “maison” à d’autres internautes. Jusque là rien de très nouveau. Sauf que le site propose deux modes de navigation inédits :

  • Time machine, qui permet de naviguer dans un nuage les fiches produits qui défilent en fonction de leur heure de création. En actionnant la molette de la souris, vous pouvez avancer ou reculer dans le temps. Vous pouvez également attraper des fiches au vol.
  • Shop by Color, qui comme son nom l’indique permet de parcourir les différents articles en fonction de leur couleur.

Le système de navigation temporel de Etsy en action

Ces deux systèmes de navigation ne sont pas évident à expliquer alors le mieux c’est encore de les tester, et n’oubliez pas d’actionner la molette !

/!\ Billet initialement publié sur FredCavazza.net.