RichCommerce.fr Tout savoir sur les interfaces riches appliquées au e-Commerce

L’industrie automobile est décidément une source quasi infinie de bonnes pratiques en termes d’interfaces riches dans un contexte marchand. À défaut de « sites marchands », nous pourrions plutôt parler de « sites participant activement au cycle de vente », mais le résultat est toujours très agréable à regarder et à manipuler.

Commençons avec Toyota qui débute la commercialisation de la troisième génération de sa Prius avec ce mini-site qui met en scène les différentes qualités du véhicule et notamment sa forme aérodynamique :

La simulation d'aérodynamisme de la Prius

Des « particules » (pétales de fleurs ?) sont ainsi projetées sur l’avant de différentes silhouettes de voiture. Dans la cas de la Prius, ces dernières flottent de façon harmonieuse autour de la carrosserie alors qu’avec les autres silhouettes elles se dispersent de façon disgracieuse. Ce n’est pas une vidéo mais bien une animation en temps réel qui rajoute un effet hypnotique à ce démonstrateur.

Il y a également cette simulation de températures extrêmes pour mettre en valeur le toit solaire qui capte l’énergie et la transforme en air frais :

La simulation de températures extrêmes de la Prius

C’est beau, ludique et informatif.

Autre exemple dans un style complètement différent avec le mini-site de la Toyota iQ : Virtual Test Drive. Les internautes sont ainsi invités à tester la petite dernière de la gamme sur différents circuits qui mettent en valeur les qualités du véhicule (ici le circuit « sécurité ») :

La piste sécurité de la Toyota iQ

Vous apprécierez le style graphique très particulier (qui me fait penser au film Tron) de ce démonstrateur 3D où la voiture évolue dans un décor fixe (écran par écran). Le rendu est excellent et l’on passe beaucoup de temps à optimiser ses trajectoires et éviter les obstacles.

Bref, encore une fois c’est propre, beau, ludique et ça permet de capter l’attention des internautes. À rajouter à ma longue liste de bonnes pratiques.

(via Away 3D blog)

Connaissez-vous Gocycle ? Pour faire simple disons que c’est le Apple du vélo pliable : performant, technique, très élégant et surement très cher ! Au niveau de leur site web il y a comme un clin d’oeil à la marque à la pomme avec une mise en page parfaitement épurée et un très beau visuel détouré :

La page d'accueil de Gocycle

Ce qui frappe dans cette page d’accueil c’est l’absence totale de texte. Un simple visuel avec des points d’attention sous forme de (+). Une fois cliqués, ces derniers ouvrent de petites séquences vidéo sur les caractéristiques du produit :

Le (+) produit de Gocycle

Les textes y sont minimaliste, le traitement graphique aussi, par contre les cinématiques de même que les transitions sont plutôt agréables. Un petit clic sur (x) permet de revenir au visuel général.

Rassurez-vous il est tout de même possible d’accéder à d’autres pages à l’aide d’un menu de navigation qui se déplie sur la bas de la page au survol de la souris:

Le menu de navigation de Gocycle

Au final nous avons une réalisation remarquable par son côté ultra-minimaliste mais avec un temps de chargement un peu long. Mais bon… c’est pour un vélo électrique donc nous ne leur en tiendrons pas rigueur.

(via Springwise)

Ce coup-ci c’est la guerre… il y avait bien trop longtemps qu’ils se regardaient de travers sans oser passer à l’attaque mais depuis le début de l’année les armés sont en marche et cette guerre ne fera pas de cadeaux. Bien évidement je veux parler de la guerre que se livrent Lego et Magebrand pour imposer sur le marché leurs marques de robots de combat (respectivement les Bionicles et les NeoShifters). Ces deux franchises sont assez similaires et les stratégies déployés par ces deux groupes pour séduire un public jeune sont également très similaires : des sites web dédiés avec des tonnes d’interfaces riches dedans.

D’un côté nous avons les NeoShifters de l’américian Megabrand :

La page d'accueil des Neoshifters

De l’autre nous avons les Bionicles du danois Lego :

La page d'accueil des Bionicles

Premier round : présentation des produits en Flash

Il y a tout d’abord tout à background à ces franchises : une trame centrale, des histoires parallèles, des personnages et plein de robots avec moultes caractéristiques. Au niveau des sites web, ça donne des pages produits avec des robots animés et des tonnes de contenu. Ici le Magna Rex :

La page produit des Neoshifters

Là, le Gresh :

La page produit des Bionicles

Lego propose en prime un module d’explications animées des combats avec ces figurines :

Les explications des Bionicles

Round 2 : la synergie online / offline

Autre champ de bataille des deux géants du web : la possibilité de trouver un code au dos de la boîte pour pouvoir jouer avec le double virtuel du robot. Chez Lego ça s’appelle les B.I.O. codes mais ils ne sont mis en avant qu’au travers du club.

Pour les NeoShifters, il s’agit d’une ligne de produits spécifique (les Web Battlers) et la page de présentation est nettement plus incitative :

Les WebBattlers de Neoshifter

Round 3 : Les jeux en ligne

Passons la vitesse supérieure avec les jeux en ligne mettant en scène les produits. Oui, c’est bien d’un démonstrateur dont nous parlons. Chez MegaBrand ils’agit de NeoShifters Resistance, un simili univers virtuel :

Le jeu en ligne des NeoShifters

Notons qu’il existe également un autre mini univers virtuel pour les Magnetix (une autre franchise de la marque) :

Le jeu en ligne des Magnetix

Pour Lego, nous avons quelque chose de plus classique avec une série de jeu multi-joueurs mais un univers peut-être moins immersif : Glatorian Arena.

Le jeu en ligne des Bionicles

Conclusion

Au final nous avons donc deux univers de marque très dense, des sites dédiés à la réalisation exemplaire. Petit bémol pour les NeoShifters qui sont dans un module encapsulé donc sans historique de navigation ou possibilité de référencement (pas d’URLs lisibles). Un exemple pour qui veut développer un univers de marque cohérent et gagner la fidélité de ses clients.

Tiens ça fait bien une semaine que je n’ai pas parlé d’American Eagle Outfitters (de très loin le marchand en ligne le plus performant que je connaisse). Je vous propose donc de découvrir le site de Martin+Osa, une marque dédié au « business casualwear » (ou un truc dans le genre).

Page d'accueil de Martin+Osa

À priori rien de très nouveau dans ce site, toujours de très belles pages d’orientation et une page produit très bien hiérarchisée :

Page produit de Martin+Osa

Ce qui va vous intéresser par contre c’est ce mannequin virtuel (« Layer Your Look« ) :

Le mannequin virtuel de Martin+Osa

Ce qu’il y a de particulièrement intéressant, c’est qu’il est possible de superposer un certain nombre de couches (avec une gestion parfaite des exclusions) :

Les différentes étapes du mannequin virtuel

Voilà encore un module très bien conçu, très bien réalisé et dans l’ère du temps (les superpositions sont à la mode cet hiver).

Rien à redire.

J’ai déjà eu maintes occasions de vous vanter les mérites de la vidéo pour mettre en situation un produit. Je vous propose de découvrir un nouvel exemple qui risque de faire référence dans l’industrie du textile : GAP Jeans.

Dès la page d’accueil de la catégorie vous êtes accueilli par un module de visualisation : des vidéos de démonstration pour illustrer les différentes coupes des jeans.

Une fonctionnalité très simple mais terriblement efficace pour bien se rendre compte des différences entre les produits.

Vu sur le site de IKEA aux États-Unis, un moteur d’inspiration avec une interface riche très convainquante : Get Inspired

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

Après Sherwin-Williams (voir à ce sujet mon précédent billet : RIA et peinture), c’est au tour de Dulux de nous proposer une très belle interface riche : Paint a Room.

En plus de ce très bel outil de simulation, le site propose également d’autres fonctionnalités remarquables :

• Latest paint colour trends, où les dernières tendances en matière de décoration sont superbement mises en scène (petit plus : on peut sauvegarder des couleurs mais également des images pour s’en inspirer dans l’outil de simulation) ;
  
• Painting competition, où les utilisateurs peuvent envoyer des photos de leur réalisation (un mix de marketing viral et de collaboration, c’est redoutable).

Rien à redire : c’est propre, créatif, utile, agréable et superbement réalisé.

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

Encore un très bel exemple d’interface web enrichie : Sherwin-Williams DIY Painting (cliquez sur le lien Launch Color Vizualizer).

Encore une fois, vous remarquerez que sur une interface de dimension modeste (moins que du 800*600), un nombre assez conséquent d’informations et de d’interactions sont proposées aux utilisateurs. De plus, le traitement graphique est sobre et très efficace, le simulateur est facile à prendre en main grâce à un guidage contextuel à chaque étape et le tout est très ludique. Rien à redire, c’est parfait ! Au fait, vous aimez mon choix de couleurs pour cette chambre à coucher ?

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