Quel est le nom du modèle de conception Web qui montre la forme du contenu pendant le chargement du contenu réel?

12

Il est assez courant que les sites SPA (Single Page Application) chargent et affichent la disposition du site avant de charger son contenu. Dernièrement, j'ai remarqué qu'au lieu d'afficher simplement un message d'attente ou un message "Chargement ...", beaucoup de ces sites affichent le modèle / la mise en page que le contenu remplira, avec le texte et les images remplis de géométrie plate formes.

Exemple de Slack

Cela semble être un bon modèle car c'est moins choquant que d'avoir une petite ligne de texte d'attente remplacée par un gros vidage de messages ou autre. J'aimerais lire le modèle, peut-être trouver une bibliothèque pour le faire plus facilement sur mon site, mais je n'ai aucune idée de comment l'appeler, et j'ai même du mal à le décrire assez succinctement pour effectuer une recherche efficace sur le Web . L'exemple le plus proche que j'ai pu trouver était cet ancien article qui ne donne pas à la pratique un nom spécifique.

"Placeholder" est la première chose à laquelle je pouvais penser, mais bien sûr, les <input>balises ont maintenant un placeholdlerattribut réel et beaucoup de gens posent des questions sur le texte de remplissage ou autre contenu (Lorem Ipsum, Kitten Ipsum, etc.), donc les résultats ont tendance à être inutiles . J'espère que l'industrie a convenu d'un nom descriptif unique pour cette pratique et je ne l'ai pas encore trouvé.

Coderer
la source
2
votre article dit "espace réservé au contenu"; quel est le problème avec ce nom? Je ne suis pas sûr qu'il y ait un "nom officiel" pour cela
Luciano
Je vois quelques mentions (appelant généralement Facebook par son nom) en utilisant cette chaîne spécifique. La meilleure piste est cette bibliothèque, mais je ne pense pas qu'elle conviendrait bien au modèle déclaratif / réactif angulaire. Je vais continuer à creuser, merci.
Coderer
1
@Luciano Le problème est que "l'espace réservé pour le contenu" pourrait également être facilement Lorem Ipsum et d'autres éléments similaires. Ceci est également utile dans la conception graphique, le terme est donc ambigu.
yo '11

Réponses:

18

La première chose qui m'est venue à l' esprit est que la suggestion de type affichée dans votre exemple est certainement appelée greeking .

La recherche de «greeking utilisé dans les écrans de chargement» m'a amené à plusieurs articles sur cette technique UX, et plus précisément celui-ci qui fait référence au concept comme un espace réservé de contenu .

Un terme aussi bon que tout je pense.

Donc, spécifiquement ici, vous avez des espaces réservés greeking et image et ensemble, le tout peut être appelé espace réservé de contenu.

mayersdesign
la source
2
intéressant, je me demande quelle est l'origine du terme "Grec" ...
Digital Lightcraft
1
@DigitalLightcraft Pourrait avoir quelque chose à voir avec l'expression «c'est tout grec pour moi». Pour plus d'informations, n'hésitez pas à poster une question en anglais.SE : P
Vincent
Heureux d'avoir pu aider, oui les origines du "greeking" me sont inconnues, je parie que c'est intéressant.
mayersdesign
2
Un peu intéressant à propos de l'origine liée au lorem ipsum: "L'utilisation du grec (également appelé texte factice) permet aux concepteurs de pages de placer du texte sur une page sans que le contenu réel agisse comme une distraction. L'histoire du grec n'est pas claire, mais c'était utilisé pour la première fois au milieu du XXe siècle. Le texte était basé sur les mots de Cicéron, un chef romain dont les écrits sont admirés. La langue qu'il parlait et écrivait était le latin plutôt que le grec, donc la dénomination de ce texte factice est trompeuse. " source
Jamie Bull
2

Certains de vos amis de développeur peut s'y référer comme effet de Facebook miroitement , puisque Facebook a popularisé la technique de l' espace réservé contenu avec un léger effet chatoyant et source ouvert leur code .

Le but de l'effet miroitant est d'indiquer que le contenu réel est toujours en cours de chargement, de sorte que les utilisateurs ne pensent pas que la page est bloquée et rafraîchie.

entrez la description de l'image ici

antoine
la source
-1

Quand j'ai utilisé ce modèle, nous l'avons appelé une page squelette. Super utile pour les grandes pages qui génèrent du contenu dynamique.

Joe B
la source
4
Comment cela ajoute-t-il aux réponses existantes? Il semble que Coderer ait déjà mentionné le terme "squelette"
Zach Saucier
Bienvenue dans la conception graphique! Si vous avez une réputation suffisante, vous pouvez voter pour la réponse que vous pensez correcte. Alternativement, "mettez en vedette" la question en tant que favori et vous serez informé de toute nouvelle réponse.
Luciano
-4

On les appelle des écrans squelettes.

pseudo
la source
Salut NIck, bienvenue sur GD.SE. Veuillez ne pas publier deux fois des informations qui ont déjà été mentionnées dans d'autres réponses. Merci!
Vincent