· Mobilité

AMP & Design : peut-on réellement reproduire les services mis en place sur nos sites ?

L’AMP, une techno en vogue

Nous voyons de plus en plus de sites se mettre à l’AMP pour plusieurs raisons :

  • Gain en vitesse d’affichage de 15% à 85% (communication officielle de Google),
  • augmentation du taux de revisite : 63% avec AMP sous 7j VS 51% sans AMP sous 7j (REX Washington Post),
  • trafic total : 60% sous AMP (The Guardian),
  • SEO : AMP permet d’améliorer la performance des pages, le mobile friendly est abordé et capitalisé, les pages AMP remontent très haut et peuvent s’afficher dans le carrousel en haut de page sur Google.
  • des mises à jour très fréquentes de la bibliothèque de composants sont faites afin de pouvoir accroître les champs des possibles : page de catégorie ou page produit ou des moyens de paiement pour l’e-commerce, de plus en plus d’animations autorisées pour des sites vitrines vivants, etc.

Sites e-commerce proposant des pages en AMP
Sites e-commerce proposant des pages en AMP

Nous nous sommes penchés sur le sujet, chez Clever Age, notamment sur la partie design de composants et donc sur les fonctionnalités disponibles que l’on peut reproduire vis-à-vis du fonctionnement actuel que l’on retrouve sur les sites.

Nous avons tout d’abord étudié les possibilités en terme d’e-commerce et ensuite en terme de site d’information et vitrines. Nous vous proposons dans ce premier article une analyse et un état des lieux pour les sites du secteur e-commerce.

Logo AMP
Logo AMP

Mais tout d’abord qu’est-ce qu’une page AMP pour les néophytes ?

Pour mémoire, une page AMP (Accelerated Mobile Pages), est une page HTML pour le mobile mais aussi pour le desktop et tablette, ré-écrite avec des éléments AMPHTML, accompagnée de CSS, d’AMPJS et de l’utilisation du Google AMP cache. Ces pages sont interprétées par le moteur de recherche Google afin de charger la donnée de manière quasi instantanée malgré une mauvaise connexion. Google est l’auteur de ce projet open source depuis 2015 en partenariat avec plusieurs dizaines de médias du monde entier. L’objectif est d’améliorer la navigation web sur mobile en accélérant la vitesse de chargement des pages.

Base technique de l’AMP
Base technique de l’AMP

Sur le moteur de recherche Google, les pages AMP se reconnaissent facilement, avec l’icône “éclair” et le libellé AMP à côté.

Exemple de page AMP dans le moteur de recherche Google : la page catégorie d’eBay
Exemple de page AMP dans le moteur de recherche Google : la page catégorie d’eBay

Une fois la page ouverte, un bandeau s’affiche, il est possible de le fermer. Le bandeau indique l’url du site, un accès au site classique sans AMP, et des options (comme l’accès au compte Google si l’utilisateur est connecté).

Exemple de page AMP : la page catégorie d’eBay et son bandeau AMP
Exemple de page AMP : la page catégorie d’eBay et son bandeau AMP

Et l’e-commerce dans tout ça ?

Comme nous pouvons voir, eBay s’y est mis, AliExpress aussi ou encore Sephora. Des grands de l’e-commerce ont testé et certains y voient déjà des résultats. Mais que pouvons-nous donc faire en AMP pour l’e-commerce ?

Les pages catégories, à savoir un listing de produits affichés selon une ou plusieurs catégories sélectionnées, sont réalisables sous AMP. Nous avons à disposition :

  • Une recherche dans la page catégorie,
  • un carrousel de visuel pour remonter certains produits,
  • listing de produit avec visuel, titre, évaluation, tarif,
  • des tris, des filtres/facettes : qui auront un impact sur l’affichage du listing produit,
  • des recommandations/suggestions.

Exemple de composants AMP : la recherche illustrée dans une page catégorie avec filtres, tris et listing produits
Exemple de composants AMP : la recherche illustrée dans une page catégorie avec filtres, tris et listing produits

 

Exemple de composants AMP : affichage des filtres en panneau
Exemple de composants AMP : affichage des filtres en panneau

 

Exemple de composants AMP : des recommandations
Exemple de composants AMP : des recommandations

 

Il faut noter que la charte graphique appliquée est totalement modifiable. Par exemple, sur le site https://www.ampstart.com, des composants AMP sont proposés avec une charte graphique différente dans les couleurs bleues.

La page produit

Elle peut être construite quasi à l’identique :

  1. Le système de carrousel et lightbox pour afficher les visuels produits,
  2. des sélectionneurs pour la taille, la couleur et la quantité : qui auront un impact sur l’affichage des visuels et la dispo du produit,
  3. des zones de descriptifs produits avec plusieurs tabulations pour différents contenus,
  4. des suggestions produits avec système de popin-modal pour donner des informations complémentaires,
  5. du partage sur les réseaux sociaux,
  6. des avis produits : un système de login est possible lié au compte Google ; une seconde fenêtre s’ouvre afin de se connecter au compte Google.

Exemple de page AMP : une page produit
Exemple de page AMP : une page produit

 

Exemple de composant AMP : une lightbox pour afficher un visuel plus grand
Exemple de composant AMP : une lightbox pour afficher un visuel plus grand

 

Exemple de composant AMP : une popin-modal
Exemple de composant AMP : une popin-modal

 

Exemple de page AMP : le système de commentaire
Exemple de page AMP : le système de commentaire

Comme pour les pages catégories, la charte graphique appliquée est totalement modifiable.

La page panier

Une page panier peut être réalisée également de manière simple : un bloc avec une liste de produits avec intitulé, taille, couleur, quantité et tarif du produit ainsi qu’un bouton de validation.

Exemple de composant AMP : une zone panier
Exemple de composant AMP : une zone panier

On pourrait s’imaginer une page panier de cette façon :

Proposition de page AMP : un panier
Proposition de page AMP : un panier

Les pages tunnel et paiement

Plusieurs choix sont possibles :

  • Le tunnel peut être proposé directement en AMP : en utilisant les formulaires AMP et en ré-adaptant le process,


Proposition de page AMP : un tunnel
Proposition de page AMP : un tunnel

 

● l’interface du navigateur Google Chrome peut être utilisé avec une connexion au compte Google et les informations associées :

AMP-Paiement
AMP Paiement

  • une redirection vers le tunnel du site responsive peut être envisagée.

Oui, nous pouvons vendre en AMP !

Le parcours utilisateur e-commerce est donc faisable et réalisable en AMP :

  • Je recherche un produit sur le moteur de recherche Google, j’ouvre la page AMP, je le mets au panier et je l’achète via le tunnel AMP.

Votre page produit ou catégorie s’affichera dans les premiers résultats dans le moteur de recherche Google, la performance d’affichage et la navigation entre les pages seront améliorées pour une meilleure satisfaction de vos clients et sans doute plus d’achats sur mobile !

Mais…

Cela a un coût ! Il faut prendre conscience qu’il faudra re-écrire des pages HTML, CSS et JS : des fonctionnalités ne seront pas disponibles et il faudra les re-penser ou les supprimer pour la version AMP. En terme de maintenance, il faudra le faire sur les pages normales et celles en AMP. Il faut donc mettre en place un processus robuste pour être efficace et ne pas perdre trop de temps dans la mise à jour des pages. De plus Google ré-invente son “propre langage”, on s’éloigne de la standardisation du web et c’est dommage.

Et vous qu’en pensez-vous ? Discutons en ensemble !

Sources :

Ajouter un commentaire

3 commentaires

  1. Très intéressant, un superbe travail. Merci Myriam. Un article à traduire rapidement, car le sujet n’est pas chaud qu’en France !

    Répondre

  2. Jonathanulco

    Notez qu’Hugo le fameux générateur de site static propose les Custom Output Format autrement dit la possibilité de générer, en plus de l’html classique, de l’AMP avec ses règles spécifiques. Tout ça pour une maintenance simplifiée. https://gohugo.io/templates/output-formats/

    Répondre

  3. Romain Ducreux

    Très intéressant, merci :).

    Répondre

Ajouter un commentaire

Votre adresse email ne sera pas publiée. Les champs obligatoires sont indiqués par un astérisque.

Vous pouvez utiliser les balises et attributs HTML suivants dans votre commentaire : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre>