Une fiche produit complète à intégrer : fil d'Ariane, galerie à vignettes, bloc d'achat, produits associés. C'est le projet où j'ai le plus poussé la contrainte « sans JavaScript », jusqu'à obtenir en CSS seul un comportement que la maquette laissait supposer scripté.
Intégrer une fiche produit d'e-commerce à partir d'une maquette : une paire d'écouteurs sans fil à 179 €, avec sa galerie, sa description, son bloc d'achat et trois produits associés en bas de page.
La fiche produit est l'écran le plus exigeant d'un site marchand. C'est le point où quelqu'un décide de dépenser de l'argent : chaque élément doit être là où on l'attend, et rien ne doit se mettre en travers du bouton d'achat.
La question que je me suis posée : jusqu'où peut-on aller sans JavaScript sur un écran dont on attend qu'il réagisse ?
Deux profils arrivent sur une fiche produit, et ils ne font pas le même geste. Celui qui sait déjà ce qu'il veut cherche le prix et le bouton, dans cet ordre, et rien d'autre. Celui qui hésite regarde les photos, lit la description, puis va voir les produits associés - souvent sans jamais revenir.
La maquette répond aux deux : le prix est le deuxième élément lu, juste sous le nom, et les produits associés sont relégués sous un filet de séparation. Mon travail a été de tenir cette hiérarchie à toutes les largeurs d'écran, y compris quand la colonne d'images passe au-dessus du bloc d'achat.
Comme sur le projet précédent, je n'ai mené ni entretien ni test : la maquette était fournie. Ce que je décris est une analyse de sa logique, pas une recherche terrain.
Cette maquette est monochrome. Pas un seul accent coloré : du noir, trois gris et un beige très pâle pour les filets. Toute la hiérarchie repose donc sur la taille, la graisse et l'espace.
La fiche est un article qui contient deux colonnes : la galerie et les informations produit. Le fil d'Ariane est une nav avec une liste ordonnée, et son dernier élément porte aria-current="page" - il n'est volontairement pas un lien, puisqu'il désigne la page courante.
Les produits associés forment une section à part, avec son propre titre. Chaque produit est une carte entièrement cliquable, un seul lien par carte : le nom, l'image et le prix sont à l'intérieur du lien plutôt que d'être trois liens concurrents vers la même destination.
Comme sur Japan., le CSS est réparti en quatre fichiers chargés dans un ordre choisi, et toutes les couleurs sont regroupées dans color.css avec un commentaire par variable indiquant où elle sert.
Une palette entièrement neutre, six valeurs, aucun accent. C'est le genre de contrainte qui oblige à travailler la hiérarchie autrement que par la couleur, et c'est ce qui rend le projet intéressant.
Noir
#000000
Nom du produit, prix, titres
Charbon
#222222
Logo, bouton d'achat, pied de page
Gris
#888888
Liens de navigation
Lin
#E3DDDD
Filets et bordures de champ
Blanc
#FFFFFF
Fond de page et texte sur aplat sombre
Aucun pictogramme sur cette page, et c'est volontaire : la maquette n'en propose pas, et une fiche produit à cinq libellés n'en a pas besoin. Les trois traits du menu en petit écran sont dessinés en CSS, pas importés en image.
.cart-form:focus-within .qty-field.
:focus-withinLe champ n'existe visuellement qu'à partir du moment où l'utilisateur s'intéresse au bloc d'achat. Il reste dans le HTML, donc atteignable au clavier et lisible par un lecteur d'écran - je masque un affichage, pas une fonctionnalité. C'est la différence entre visibility et une suppression pure et simple.
L'image, le nom et le prix sont à l'intérieur du même lien. Trois liens vers la même page auraient forcé un utilisateur au clavier ou au lecteur d'écran à passer trois fois sur chaque carte pour la traverser.
aria-currentLe dernier élément n'est pas un lien : il désigne la page où l'on se trouve déjà. Il porte aria-current="page", ce qui annonce la position réelle plutôt que de proposer un déplacement qui ne mène nulle part.
Les transitions ne sont déclarées que si le système n'a pas demandé de mouvement réduit, et un second bloc les neutralise dans le cas contraire. C'est une ceinture et des bretelles, mais sur une page marchande, une animation qui persiste malgré le réglage système est une gêne réelle.
max-width, comme sur le projet précédent, et il n'y en a que deux. Un palier intermédiaire manque entre 512 et 1199 pixels.Il manque à cette fiche tout ce qui rassure avant un achat : les délais de livraison, la politique de retour, la disponibilité. Trois lignes sous le bouton suffiraient et elles pèsent souvent plus lourd qu'un paragraphe de description.
Je repenserais aussi le champ de quantité. Le révéler évite d'encombrer, mais un sélecteur de quantité qui apparaît puis disparaît est un comportement inhabituel : je testerais d'abord une quantité affichée en permanence, en tout petit, avant de conclure.