Expérience utilisateur

Les configurateurs

Vous avez déjà été confronté à des problématiques de vente en ligne d’articles personnalisables ? Ce post est fait pour vous !

On reçoit le brief, tout semble clair dans l’instant “T” et pourtant, lorsque l’on se pose sur le sujet : quel véritable casse-tête ergonomique !
Voici 4 exemples de sites existants avec une ergonomie claire et efficace qui ont retenu mon attention :

Un configurateur à partir d’un choix de modèles : la couleur, l’intérieur, l’extérieur…

// Exemple avec le configurateur de sacs de Longchamp :

Pour commencer, on doit choisir un modèle parmi plusieurs :

1_site1

On confirme le modèle sélectionné :

2_site1

Les zones d’actions sont concentrées autour du produit : on peut paramétrer les poignées, les anses…

3_site1

A tout moment, je peux valider ma création, en bas à droite.

5_site1

Les + :

  • l’environnement visuel est très agréable, épuré.
  • Le rond blanc central attire bien notre attention, cela vient aussi du fait que le fond principal change de couleur et que ce rond est le seul endroit qui ne change pas de couleur.
  • Ce site est responsive, il est donc bien adapté pour les différents formats numérique.

Les – :

  • on aimerait palper un peu plus le produit, et pouvoir l’examiner dans les moindres détails. Il manque décidément un zoom.
  • cela peut perturber l’utilisateur que le menu secondaire prennent directement la place du menu principal.

// Autre exemple avec le site de Krys Like Me :

Un simple croquis nous incite à choisir un modèle.

9_site3

Au fur et à mesure, des tiroirs se déploient progressivement : les couleurs, les motifs

12_site3

11_site3

13_site3

Les + :

  • l’environnement est clair, le produit bien mis en avant, on peut même essayer virtuellement la paire de lunettes !
  • Le menu qui se dévoile petit à petit, une manière didactique pour montrer qu’elle est l’étape à suivre.
  • Si je fais une faute de goût importante, le configurateur me le signale : “attention, un motif rouge du un fond rouge ne se voit pas”… oui, c’est vrai !

Le – :

  • Ce site ne s’adapte pas à toutes les résolutions.

Un configurateur à partir d’un modèle présélectionné :

// Le site de nike propose de personnaliser ses baskets à partir d’un modèle prédéfini.

Chacune des zones personnalisables de la basket sont cliquables. Lors du clic, la palette de gauche se met à jour, le menu est contextuel.

6_site2

7_site2

Lorsque je valide ma paire de baskets, on me rassure sur mon choix 🙂

8_site2

Les + :

  • Le menu contextuel simplifie considérablement l’ergonomie.
  • A tout moment, si je manque d’inspiration, on me propose des modèles tout prêts.

Les – :

  • Ce site ne s’adapte pas à toutes les résolutions.

Un configurateur à partir d’un modèle unique :

// Exemple avec le site de Lexus :

Le modèle de la voiture est prédéfini. Sur la partie gauche, on voit clairement le nombre d’étapes à suivre, sur la partie basse la zone d’action et enfin, en haut à droite, le visuel qui s’actualise en fonction des choix de l’internaute.

18_site5

19_site5

Les + :

  • Le système d’étapes permet de bien structurer les différentes manipulations à effectuer, d’autant plus que dans l’automobile, il y a un nombre considérable d’options !
  • L’environnement est sobre, clair et met bien en avant le véhicule
  • Je peux choisir un affichage zoomé intérieur et extérieur qui me permet de bien prendre conscience de la vue d’ensemble du véhicule.
  • Le site est visible sur une tablette.

Les – :

  • La zone d’action qui actualise le visuel mériterait d’être plus associée au visuel.
  • Ce configurateur est intégré dans une longue page à scroller, il y a déjà tellement d’actions possibles dans cet écran que c’est dommage d’avoir accès à autant d’autres informations en scrollant juste un peu.

// Et enfin, un exemple avec le site my own bike :

Ce qui simplifie l’ergonomie, c’est qu’il y ait qu’un seul et unique modèle à customiser.

Par défaut, j’arrive sur un vélo neutre visuellement. A droite, j’ai mon fil conducteur :

14_site4

Au Roll sur une partie du vélo, celle-ci est mise en valeur visuellement grâce à un filtre qui désopacifie le reste du vélo.

15_site4

Au clic sur une bulle, une petite animation me rappelant la rotation d’une roue se met en place, il n’y a plus qu’à sélectionner sa couleur :

16_site4

A droite, mon fil conducteur se met à jour, et je peux rapidement comprendre ce qui me reste à customiser.

17_site4

Les + :

  • Visuellement agréable, la neutralité du fond met bien en valeur le vélo
  • en un clin d’oeil, je peux voir le champ des possibles
  • Ce site est visible sur une tablette.

Le – :

  • Il manque peut-être une notion des proportions : quel est l’encombrement de ce vélo ? à côté d’une personne de taille moyenne, à quelle hauteur se trouve la selle ?

Alors, quelle est la bonne recette pour un configurateur ?

Bien évidemment, il doit s’adapter suivant la typologie du produit.

  • Ne pas montrer toutes les fonctionnalités possibles en même temps, cela peut effrayer l’internaute (il se dit qu’il va devoir consacrer beaucoup de temps)
  • On optera donc plutôt pour un système progressif : les étapes se dévoilent petit à petit, cela permet une meilleure lisibilité des éléments présents.
  • Donner des détails sur le produit : ne pas oublier de pouvoir zoomer sur le produit et donner une idée de l’encombrement (cela dépend du type de produit).

Lire c'est bien, partager c'est bien aussi 😉

Vous souhaitez optimiser votre chaîne d'acquisition client ?
Recevez nos guides pratiques, livres blancs, dossiers thématiques
I agree to have my personal information transfered to MailChimp ( more information )
1 Commentaire
  • Yann
    Posté le 09/07/2013 à 05:43

    Merci Noémie pour cet article très instructif.

    Les configurateurs, c’est toujours très compliqué à mettre en place quand on connait pas en détail le produit.

    Les exemples fournis permettent déjà de poser une bonne structure de réflexion !

    Yann.

Réagissez à l'article

Votre commentaire*

Your Name*
Your Webpage