C’est ce quʼutilisent notamment Facebook et Medium, dont le contenu respecte un gabarit constant. En terme dʼinterface, ça me semble vraiment plus agréable que le classique ouroboros.

Et figurez-vous que pour le moment, tous les retours sont extrêmement positifs. En session de test utilisateurs, la plupart des testeurs lʼont remarqué et ont tenu à le signaler comme un élément « très agréable ». Moi qui pensait mʼamuser à suivre un effet de mode à la mords-moi-le-nœud et être passé du côté obscur de la Force, me voilà confondu. Cet effet semble conférer une réelle valeur ajoutée à lʼexpérience utilisateur, alors jʼaie envie de vous montrer ce quʼil y a sous le capot afin de partager et dʼaméliorer encore tout ça.

Quelques recherches pour démarrer

Bon, bizarrement, je nʼai pas trouvé beaucoup de ressources pour faire ce truc. La plus visible est une expérimentation sur codePen qui est franchement sale. Une soupe de div, chacune positionnée en absolu et calée au pixel près. En revanche lʼarticle de lʼapprenti magicien est relativement intéressant : « Facebook content placeholder deconstruction ». Très relativement, hein. Ça manque cruellement de référence donc si vous avez, elles mʼintéressent !

En revanche il lie un autre article un peu plus intéressant qui aborde le sujet de lʼexpérience utilisateur : « Making Wait Times Feel Shorter » de Dmitry Fadeyev. Jʼen retiens surtout la dernière phrase :

This isn’t just simple courtesy, watching the progress bar move makes time fly faster.

Je traduis sommairement : ce nʼest pas une simple question de courtoisie, regarder lʼindicateur de progression fait passer le temps plus vite. Ma foi, ça a du sens. Dans cet article, lʼauteur préconise également de spécifier le délai dʼattente quand cʼest possible afin que lʼutilisateur sache à quoi sʼattendre. Et bien cet effet de faux contenu en attendant le contenu réel donne une indication plus précise du format de données que lʼon attend et nous permet dʼanticiper la lecture du contenu et de nous projeter dans son parcours.

Faire plus simple

Utiliser un élément graphique

Tout ça est bien joli, mais niveau code cʼest quand même assez moyen (à mon goût en tout cas). Par exemple nous parlons ici dʼun effet purement graphique — voire esthétique — alors pourquoi utiliser des éléments HTML pour le fabriquer ? Un élément graphique semble plus adapté, et ô comble de joie il est possible dʼutiliser des images en HTML depuis 1994.

Prévoir une alternative

Cʼest un visuel porteur dʼinformations, et à ce titre il doit disposer dʼune alternative textuelle pertinente. Je vous laisse (re)lire le critère associé du RGAA qui, comme pour témoigner de son importance, porte le doux nom de critère 1.1. Ce point nʼest a priori pas très complexe à mettre en œuvre.

Faire passer le temps

Il ne faudrait pas omettre que lʼobjectif est avant tout de faire patienter lʼutilisateur de la manière la plus agréable possible. Pour cela nous évitons le (très frustrant) petit disque qui tourne en rond, cʼest déjà bien. Mais si lʼexpérience peut sʼavérer agréable, ce serait encore mieux ! À cette unique fin, je vais suivre les exemples de Facebook et Medium qui ont mis en place un effet de balayage lumineux afin de cadencer le temps dʼattente.

Super ! Ça donne quoi ?

Créer lʼimage dʼattente

Pour démarrer, on va choisir un contenu quʼon pourrait attendre. Jʼen ai choisi un assez connu et avec un gabarit familier et reconnaissable : la carte de profil sur Twitter.

Ma carte de profil sur Twitter
La carte de profil indique le nom, le pseudonyme et l’avatar Twitter, mais aussi les nombres de tweets, d’abonnements et d’abonnés.

Cʼest donc la-dessus que va se baser la création du visuel dʼattente. Sur le principe, je me contente de créer un bloc en aplat gris par élément, afin de représenter sa masse visuelle.[1]

Gabarit de carte de profil twitter
Gabarit de carte de profil twitter représenté en masses colorées

Bon, jʼadmets également avoir exporté un SVG plutôt quʼune bête image bitmap. Pour tout vous dire ça nʼest pas nécessairement le meilleur choix, étant donné que pour une image aussi simple le SVG est plus lourd quʼun PNG bien optimisé et quʼon perd nécessairement en support navigateur.

Implémenter une alternative accessible

Pour celui-ci aucun mérite, puisque lʼaccessibilité des SVG commence à être bien documentée. Je vous laisse farfouiller un peu les artères du web pour trouver votre bonheur — personnellement jʼai abouti à ceci :


<svg viewBox="0 0 320 215" width="320" height="215"
   aria-labelledby="title desc" role="img"
   xmlns="https://www.w3.org/2000/svg"> 
  <title id="title">Chargement en cours…</title>
  <desc id="desc">La carte de profil est en chemin !</desc>
  <path role="presentation" d="…" />
</svg>

Je vous passe les détails sordides des multiples <path> dans le SVG, vous pourrez jouer avec dans la démo — et accessoirement, cʼest une partie que vous devrez personnaliser, donc… Mais normalement ce magnifique assortiment de <title> et <desc> liés au SVG via aria-labelledby fait lʼaffaire et rend le tout intelligible.

Implémenter une animation

On est dans du SVG

À lʼaube du premier jour, jeune et fougueux que jʼétais, je me suis dit « Yay, dans du SVG, je vais enfin pouvoir jouer avec SMIL ». Que nenni !

Deux (plutôt) bonnes raisons de sʼen dispenser :

  1. Le support est très moyen, notamment absent des navigateurs Microsoft ;
  2. Chrome et Opéra lancent (depuis deux ou trois versions) une alerte dans la console lorsquʼon utilise SMIL, quʼils considèrent déprécié et dont ils vont abandonner le support un beau matin.

Ça nʼest guère glorieux, même si un charmant tutoriel en anglais me montrait quʼon pouvait facilement animer un dégradé en remplissage dʼun SVG. Dommage.

Mais on fait du CSS

Cʼest donc finalement vers les animations CSS que je dois me tourner. Cʼest moins rigolo puisque je connais déjà, mais au moins le support est excellent.

En revanche impossible dʼanimer via CSS le remplissage dʼun SVG. Le SVG sera donc rempli en aplat, et il va falloir se débrouiller autrement pour lʼeffet de balayage. Voilà comment jʼai réssolu la chose :

  • un dégradé linéaire allant du transparent au transparent — afin de profiter du merveilleux SVG derrière — en passant par une étape de blanc pour apporter la lumière en ce bas-monde ;
  • une dimension dʼarrière-plan pour ajuster la mise en scène du dégradé ;
  • et finalement, une animation dont la seule préoccupation est de déplacer lʼarrière-plan.

Cʼest donc un poil plus complexe que de simplement remplir le SVG avec un dégradé qui sʼanime tout seul, mais bon ! En revanche il ne vous aura probablement pas échappé quʼil nous faut cette animation devant le SVG. Et pour cela un pseudo-élément serait fort agréable. Malheureusement SVG est un élément remplacé, ce qui empêche de lui appliquer un pseudo-élément. Pour pouvoir implémenter lʼanimation, il nous faut donc un élément conteneur qui portera le pseudo-élément (ce même conteneur qui pourrait fort bien vous servir dans un contexte adaptatif ou simplement pour la mise en page).

La démonstration

En supposant que vous utilisez une division comme conteneur, voici les styles du pseudo-élément :


div::after {
  animation: placeholder 2s linear infinite;
  background-image: 
  linear-gradient( 
  110deg, 
  rgba( 255, 255, 255, 0) 10%, 
  rgba( 255, 255, 255, .33) 30%, 
  rgba( 255, 255, 255, 0) 60% 
  );
  background-size: 20em 13.4375em;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

Un détail peut vous surprendre : je nʼutilise pas le mot-clé transparent mais la notation rgba( 255, 255, 255, 0 ). Peut-être le savez-vous déjà mais le mot-clé qui semble définir la transparence est en réalité une notation raccourcie de rgba( 0, 0, 0, 0 ), comme le précise la spécification du module « Couleurs » de CSS3. Ça nʼa lʼair de rien comme ça, mais ça a son importance si vous appliquez un dégradé — disons du blanc au transparent, par exemple — et que vous regardez le résultat sur Safari : il interpole le dégradé en tendant vers le noir (ce qui est relativement logique) et vous donne donc un intermédiaire immonde entre votre blanc nacré et votre transparence parfaite. Un gros pâté noir, quoi. Bref, cʼest moche. Utiliser le blanc avec une opacité nulle résout facilement ce travers.

Ensuite pour animer le dégradé, cʼest plutôt simple puisque vous avez déjà vu lʼappel à lʼanimation placeholder, pour une durée de deux secondes et en boucle. Elle se contente de déplacer le fond dʼune distance équivalente à la largeur du bloc, afin de générer une véritable boucle visuelle.


@keyframes placeholder {  
  from { 
  background-position: -10em 0; 
  } to { 
  background-position: 10em 0; 
  }
}

Et voilà !

Si vous souhaitez jouer avec ou le reprendre, vous trouverez le tout sur Dabblet. Rien de bien complexe, mais cʼest tellement simple et efficace quʼil serait dommage de sʼen priver 😇

  1. Cʼest le même principe que le gris typographique en composition de page. ↩︎

Article rédigé par . Modifié le .