Introduction
La marque à la pomme a longtemps maintenu son format 4", tout en talonnant ses concurrents dans la course au mobile le plus large. Une décision longtemps soutenue par ses aficionados, mais aussi par les nouveaux arrivants dans l’éco-système de la pomme via l’achat des mobiles reconditionnés ou par la récupération d’un mobile délaissé pour un modèle plus récent.
De nos jours, le mobile 4" est encore à prendre en compte lorsqu’il s’agit de penser une application mobile ou un site responsive.
Faites entrer l’accusé
Tout d’abord, petit rappel sur ce qu’est un produit configurable sur le CMS Magento.
C’est une page produit dont le client a la possibilité de le“personnaliser” avant l’achat. Les choix sont multiples tels que la couleur, la taille, le poids, etc.
Ce type de produit implique une réflexion sur la manière de maintenir un parcours client fluide et intuitif, quelque soit sa nature (simple ou configurable), et ce sur un écran de smartphone.
Contexte
Durant la refonte du site e-commerce Cellublue (Kyrena©), le graphiste en charge, a présenté la déclinaison mobile d’un produit configurable sur un modèle post iPhone 5 (écran 4,7").
Lorsque nous avons adapté son template sur un format plus petit (écran 4"), nous nous sommes aperçus des limites pouvant restreindre l’évolution de la fiche produit...
Problème identifié
Les visuels proposés par le graphiste répondaient parfaitement sur l’état actuel de personnalisation d’un produit : 3 choix de quantité , 3 tailles, 2–3 couleurs.
Toutefois, si nous souhaitons, à l’avenir, ajouter de nouvelles options (plus de tailles, plus de couleurs), le système atteindrait vite ses limites, nous poussant de nouveau à revoir notre copie.
L’objectif : trouver une manière de présenter les options de personnalisation de façon pérenne, sans être contraint de modifier l’expérience utilisateur à chaque mise à jour.
Quelle solution ?
Idéation #1
Au clic sur l’un des champs de personnalisation (“Quantité”, “Taille”, “Couleur”), on bénéficie de la largeur de l’écran pour afficher l’ensemble des options. Un bouton de fermeture a été ajouté pour revenir à la liste des personnalisations.
Bien que cette proposition soit plus aboutie, l’expérience utilisateur peut se heurter à un autre problème 😭 : manque de visibilité sur l’ensemble des options proposées.
La liste affichant les options à l’horizontale, si cette dernière se prolonge : comment l’utilisatrice comprendra qu’un défilement soit nécessaire pour voir la suite des options proposées ?
La présence du bouton de fermeture peut amener à cette mauvaise interprétation, indiquant à l’utilisatrice la fin de la liste.
Idéation #2
Lors d’un nouveau brainstorming, une idée est évoquée : s’inspirer du process de configuration d’un mini PC sur l’application mobile AliExpress.
Cette piste de réflexion présentait une partie de la solution : afficher l’ensemble des options pour chaque étape de personnalisation. Néanmoins, cette solution alourdirait la lecture et la rapidité d’achat pour notre cible utilisatrice.
Toutefois, une idée a émergé durant l’analyse de l’appli AliExpress : alléger l’affichage du process de personnalisation en procédant à un affichage de type “accordéon”. Ainsi, pour sélectionner une couleur, il suffirait de cliquer sur le titre “Couleur” pour déplier l’ensemble des options disponibles 🤔.
Sketching
Prototype high-fid
Conclusion
Lors de la mise en ligne de la refonte du site Cellublue (Kyrena©), les résultats ont été plus que positifs. Nous n’avons pas décelé de perte de transformation, ni reçu de retours négatifs sur l’expérience d’achat 😎.
