Préconisations d'optimisations d'éléments en e-commerce : performance et accessibilité

L’accessibilité des pages web e-commerce

Il ne va pas être question de faire un tour exhaustif des points à suivre pour monter son score d’accessibilité web et e-commerce – nous ferons un article dédié, un petit comme celui pour atteindre le 100/100 au Page Speed insight.

Mais il y a des principes généraux sur les visuels à suivre, qui seront favorables à l’accessibilité de votre site e-commerce mais également pour son référencement (SEO) ; l’accessibilité étant un critère pris en compte de longue date.

La hauteur standard d'un menu de navigation pour un site web e-commerce se situe généralement entre 50 et 70 pixels. Cette dimension est basée sur plusieurs facteurs techniques et ergonomiques :

Lisibilité : Une taille de police standard pour un menu de navigation se situe entre 16 et 18 pixels pour assurer une bonne lisibilité. En tenant compte des marges et des espacements, cela nous amène à une hauteur minimale d'environ 50 pixels.

Accessibilité : Pour les utilisateurs naviguant via des dispositifs tactiles, la recommandation de la norme WCAG (Web Content Accessibility Guidelines) est d'avoir une taille minimale de 44 pixels pour les éléments interactifs, afin d'éviter les clics accidentels et d'assurer une bonne expérience tactile.

Design et esthétique : Une hauteur de 50 à 70 pixels offre suffisamment d'espace pour intégrer le logo de l'entreprise, les éléments du menu, ainsi que d'éventuels sous-menus ou icônes (comme le panier d'achat ou la loupe de recherche) sans que le menu ne paraisse surchargé.

Adaptabilité : Cette plage de hauteur permet également une certaine flexibilité pour s'adapter à différents designs, tailles d'écran et résolutions.

Une zone cliquable en mobile ?

= 48px sur 48px

Pour garantir une accessibilité optimale des éléments tactiles, ceux-ci doivent avoir une dimension d'au moins 48px par 48px, avec un écart d'au moins 8px entre eux. 

Si une page présente ce genre de souci, il est impératif d'apporter des modifications aux styles CSS. Pour agrandir les éléments en question, on peut par exemple augmenter la propriété "padding". De la même manière, l'écart entre les éléments peut être modifié en utilisant la propriété "margin".

Cependant, il est essentiel de toujours tester la hauteur du menu sur différents appareils et tailles d'écran pour s'assurer qu'il offre une expérience utilisateur optimale.

Les formats image, photo et vidéo les plus utilisés en e-commerce

Voici une liste, un peu en vrac, de différents formats « standards » que l’on retrouve en e-commerce, avec leur résolution, leur poids et leur format :

Images :

Sliders / Bannières / Headers :

• Résolution : 1920 x 1080 pixels (ou proportionnelle)
• Poids : 100-300 Ko
• Format : JPEG (pour les photos) ou PNG (pour les images avec transparence)

Fiches produits :

• Résolution : 800 x 800 pixels (ou proportionnelle)
• Poids : 50-150 Ko
• Format : JPEG ou PNG

Miniatures / Vignettes :

• Résolution : 300 x 300 pixels
• Poids : 20-50 Ko
• Format : JPEG ou PNG

Remontées d'informations / Promotions / Offres spéciales :

• Résolution : 600 x 400 pixels
• Poids : 30-100 Ko
• Format : JPEG ou PNG

Logos :

• Résolution : 400 x 400 pixels (ou proportionnelle)
• Poids : 10-50 Ko
• Format : PNG (pour conserver la transparence)

Références / Témoignages / Logos de partenaires :

• Résolution : 150 x 150 pixels
• Poids : 10-30 Ko
• Format : JPEG ou PNG

Vidéos :

Présentation de produits / Tutos :

• Résolution : 1920 x 1080 pixels (Full HD) ou 1280 x 720 pixels (HD)
• Poids : 2-10 Mo pour une vidéo courte (moins d'une minute)
• Format : MP4 (recommandé pour le web)

Témoignages clients :

• Résolution : 1280 x 720 pixels (HD)
• Poids : 1-5 Mo pour une vidéo courte
• Format : MP4

Préconisations pour l'accessibilité et le taux de conversion :

1. Optimisation des images : Utilisez des outils comme Imagify,  TinyPNG ou ImageOptim pour réduire la taille des images sans sacrifier la qualité.
2. Alt text : Assurez-vous que toutes les images ont un texte alternatif pour l'accessibilité et le SEO.
3. Responsive : Assurez-vous que les images et vidéos sont adaptatives pour tous les appareils (desktop, tablette, mobile).
4. Lazy loading : Chargez les images et vidéos uniquement lorsqu'elles sont visibles à l'écran pour améliorer la vitesse de chargement.
5. Testez : Testez régulièrement la vitesse de chargement de votre site et l'affichage des images/vidéos sur différents appareils et navigateurs.

Conclusion

La standardisation est souvent regrettable, mais pourtant inévitable. Ce qui fonctionne le mieux est souvent unique donc se standardise. 
Toutefois, avec ces éléments il n’y a pas de quoi trop standardiser, mais éviter les sorties de route. En espérant que ces éléments vous auront été utiles ou à tout le moins source d’inspiration et de vérification pour votre site web ou e-commerce !