Le temps de chargement d’une page web est l’une des performances d’un site qui doit être la meilleure possible. Cependant, en dehors du code les UX designers peuvent aussi contribuer à l’améliorer. Dans cet article, nous allons vous proposer une astuce afin de réduire cette impression d’attente.
Comme vous avez dû le voir dans le titre, il s’agit du Skeleton Screen ou en français l’écran squelette. Mais avant tout, quelques mots sur l’inventeur.
Luke Wroblewski
Luke Wroblewski est sans aucun doute un homme passionné. Directeur de produit chez Google, précédemment PDG et cofondateur de Polar ainsi que directeur de produit et cofondateur chez Bagcheck. Une vie donc bien remplie !
Il est l’auteur de 3 livres et compte de nombreux articles publiés, notamment à l’origine de ce qu’il a nommé pour la première fois dans l’un de ceux-ci : le Skeleton Screen.
En effet, il a remonté le constat que les loading habituels attiraient l’attention des utilisateurs sur le fait qu’ils sont en train d’attendre. Aujourd’hui, personne n’aime attendre, et c’est aussi le cas sur le web, qui est dans l’esprit utilisateur immédiat.
Une idée est alors née, changer la perception des utilisateurs en leur indiquant que le contenu arrive bientôt et non qu’il charge. C’est cette perception que l’utilisateur touche presque du bout des doigts la page à l’inverse du sentiment d’attente qui change tout !
La naissance du Skeleton Screen
C’est dans un article datant de 2013 que Luke Wroblewski a mentionné le principe d’écran squelette, mais nous vous assurons que c’est toujours d’actualité. Et encore aujourd’hui tout le monde ne sait pas ce que cela signifie. Heureusement, nous sommes là pour vous aider.
Le Skeleton Screen n’est pas un concept difficile à comprendre. Nous n’allons pas nous contenter de vous l’expliquer, nous allons aussi vous dire pourquoi il est judicieux de le mettre en pratique sur votre site web, votre blog ou votre application mobile.
Zoom sur le concept de l’écran squelette
Le Skeleton Screen est conçu pour s’afficher lorsqu’il détecte que le contenu de la page est en train de se charger. La page pouvant être asynchrone (c’est-à-dire qu’elle doit attendre que le contenu soit complètement chargé pour pouvoir s’afficher) crée une sorte de retard et donc d’attente du côté utilisateur.
Le Skeleton Screen sert donc à indiquer à l’utilisateur que la page est en train de se charger, tout comme ces loading habituels vous allez nous dire… 
Eh bien oui ! À la seule différence qu’il est très proche visuellement de la page finale que pourra consulter l’utilisateur. Ainsi, il permet de faire patienter celui-ci d’une façon plus efficace puisqu’il peut anticiper la page qui va lui être renvoyée.
Pourquoi utiliser cette méthode ?
Il est donc important de rassurer les utilisateurs que votre page charge, mais surtout avec la notion de rapidité !
Vous devez leur donner la sensation que le chargement est presque immédiat ! Pour cela, éloignez l’idée du chargement et attirez l’attention sur ce qui va s’afficher, en d’autres termes, projetez l’utilisateur dans le futur.
Mais l’avez-vous déjà peut-être remarqué ! De grandes entités utilisent cette méthode telles que : Google drive, Slack, Netflix, et bien d’autres encore.
Comment mettre en place le Skeleton Screen ?
Le Skeleton Screen peut être réalisé de différentes manières. Il peut être mis en place grâce à une bibliothèque Javascript, mais aussi avec du code CSS.
Il faut dans un premier temps que vous définissiez les zones de contenu qui sont répétitives et identifiables. Par exemple, les titres H1, les sous-titres H2, les images et quelques lignes de contenu. Ensuite, il faut les représenter par des carrés, des lignes, des ronds, des rectangles, enfin peu importe, du moment qu’ils ont la forme et la place qu’ils occupent réellement sur votre page.
Pour finir, à la place du contenu, remplissez ces formes par une couleur froide. Pas de bleu roi ou de rose fuchsia, non, plutôt du gris, ou un bleu grisé par exemple. Surtout, veillez à ce que les deux pages soient visuellement identiques sur la forme !
Maintenant, il reste à éviter que l’utilisateur pense être arrivé sur la page finale. En effet, si la page reste statique, rien ne lui indique que le contenu est en train de se charger en arrière-plan. Cela peut nous être problématique puisque, rappelez-vous nous essayons de garder l’utilisateurs lors de l’attente du chargement de la page. Rassurez-vous, encore une fois rien de compliqué. Animer le tout suffira à leur indiquer. Une animation de dégradé, un mouvement sur les formes, ou un effet d’effacement, à l’horizontale ou à la verticale, à vous d’être original !
Par exemple avec le blog de Numendo :
Lancez-vous, testez et regardez les effets positifs que pourra vous apporter le Skeleton Screen sur votre audience.
Pour lire plus d’articles concernant l’UX, allez sur le blog de Numendo catégorie : UX/UI
Pour aller plus loin dans le perfectionnement du temps de chargement au démarrage d’une page web, je vous propose de regarder la vidéo sur le BinAST dans notre article Coup d’œil sur le Meet Up organisé par Numendo le 01 Octobre 2019
