Une page « suivre ma commande », où le client saisit son numéro de téléphone et voit l’état de sa commande sans créer de compte, est petite mais très visitée sur la plupart des sites e-commerce bangladais, où l’achat sans compte est la norme. Dans cette boutique, l’affichage des résultats avait manifestement été conçu et testé uniquement sur mobile : étroit, uniquement textuel, sans images produits et en grande partie vide sur un écran d’ordinateur.
Ce qui manquait à la mise en page d’origine
La page fonctionnait (un client pouvait réellement voir l’état de sa commande), mais la présentation ne lui rendait pas justice. Sans vignettes, un client ayant commandé plusieurs articles devait lire attentivement les noms pour vérifier ce qu’il avait reçu ; les informations de facturation et de livraison s’enchaînaient en texte brut, sans séparation visuelle ; et sur un écran d’ordinateur, une colonne de largeur mobile au milieu d’une page large paraissait inachevée.
La refonte
Les changements ont été volontairement ciblés, sans tout reconstruire :
- Des vignettes produits sur chaque ligne, ajoutées via le filtre
woocommerce_order_item_nameet limitées à cette seule page pour ne pas modifier l’affichage des articles ailleurs dans WooCommerce. - La facturation et la livraison dans une vraie carte, clairement séparée du tableau des articles au lieu de former un seul bloc de texte.
- Un conteneur plus large sur ordinateur, pour que la page utilise l’espace disponible au lieu de laisser flotter une colonne de largeur mobile au milieu du vide.
- Un ordre repensé sur mobile, avec l’adresse du client au-dessus du tableau de commande : la première chose que le client vérifie est « est-ce que ça part au bon endroit ? », avant de faire défiler pour voir le contenu de la commande.
Points clés
- Une page conçue et testée pour une seule taille d’écran se dégrade discrètement sur toutes les autres : il vaut la peine de vérifier volontairement les deux extrêmes.
- Limiter étroitement un filtre de modèle (à une page, un contexte) évite les effets de bord sur le reste de l’affichage de la plateforme.
- L’ordre des éléments sur mobile doit suivre ce que le lecteur a besoin de vérifier en premier, pas seulement une version réduite de l’ordre sur ordinateur.
À lire aussi : visibilité personnalisée des colonnes sur mobile, notre travail de design UI et UX.
Vous rencontrez une limite similaire dans votre administration WooCommerce ou WordPress ? Parlons-en : ArtinTech Solution conçoit exactement ce type d’outils sur mesure pour les boutiques.