Comment accélérer votre UX avec des écrans Skeleton –

Votre interface utilisateur, aussi bien conçue soit-elle, va devoir attendre que quelque chose soit chargé pour le charger.

Photo: Marco Giumelli, “ Waiting ”

Une étude menée en 2014 par le MIT a montré que les humains peuvent percevoir des images discrètes en aussi peu que 13 millisecondes, mais que décider de la mise au point prend entre 100 et 140 millisecondes. Concrètement, cela nous donne environ 200 millisecondes pour présenter un changement d'état de l'interface utilisateur afin de s'afficher instantanément.

Entre 200 millisecondes et 1 seconde, les utilisateurs ont le sentiment d'être dans le flux de leurs actions. Après 1 seconde sans autre retour, la mise au point commence à changer. Au-delà de 10 secondes, il est probable que l'attention de l'utilisateur sera totalement perdue.

Pour rendre les gens heureux, nous devons indiquer que il se passe quelque chose . Cela nous laisse avec trois options de base:

• barre de progression si nous pouvons mesurer la durée;
• spinner si nous ne pouvons pas; et
• rien du tout.

Les études psychologiques sur les indicateurs de progrès montrent que notre interprétation de ces indicateurs est tout sauf linéaire. Notre méthode de traitement des délais ne correspond pas à la réalité.

La compréhension de ce concept nous conduit à manipuler des interfaces pour améliorer la perception.

Dans la conception logicielle, les écrans squelettes offrent une alternative aux méthodes traditionnelles. . Plutôt que d'afficher un widget abstrait, les écrans squelettes créent une anticipation de ce qui doit venir et réduisent la charge cognitive.

Les écrans squelettes à l'état sauvage

Apple a incorporé des écrans squelettes dans ses instructions d'interface utilisateur iOS sous le nom "lancer des images". Les directives d’Apple recommandent d’afficher un aperçu de l’écran initial de l’application, à l’exception du texte et des éléments susceptibles de changer.

Horloge d’Apple

L’horloge d’Apple est un exemple classique d’écran squelette.

Cet écran de lancement affiche les grandes lignes de ce à quoi ressemblera l'application et crée une impression de chargement plus rapide de l'application. de l'application et des quatre icônes à la base de l'écran.

Une fois lancés, tous les éléments de texte et les éléments variables de l'interface utilisateur sont renseignés.

Nintendo

Nintendo a récemment lancé sa première application mobile, qui n'accorde aucune attention aux directives en matière d'interface utilisateur ni à la décence habituelle.

L'écran de lancement initial affiche le titre de l'application et une image d'arrière-plan dont aucune ne reflète l'utilisation de l'application. 19659005]

Après le lancement, un écran de chargement contient tout d'abord un indicateur de texte «Chargement» en tant que disque tournant minimaliste.

Ensuite, vous obtenez un Indicateur de progrès umeric.

Et c'est suivi par un autre spinner.

Enfin , l’application elle-même apparaît.

Au cours d’un temps incroyable de temps de chargement de 14 secondes Nintendo utilise deux fileuses et une barre de progression, dont aucune ne fait beaucoup Allégez le temps de chargement. Les «astuces» dynamiques au cours de l'écran de chargement jouent également un rôle pivotant en modifiant l'état de l'interface utilisateur et en créant un sentiment de progression.

Chaque écran discret nécessite un nouveau balayage visuel et donne l'impression que le processus de lancement est encore plus lent.

Facebook

Tandis que Nintendo se trompe très fort, Facebook se trompe vraiment. Leur écran de lancement initial suit les instructions d'Apple.

Après avoir atteint l'objectif des instructions initiales, Facebook remplit maintenant une plus grande partie de l'écran avec l'en-tête, le pied de page et l'espace réservé. images dans le corps. Le temps nécessaire pour charger le contenu final étant inconnu, une animation subtile à la place d'un disque apparaît également sur cet écran.

[1945]. 19659005] Ensuite, l'interface utilisateur finale est chargée.

Making it Happen

En regardant les exemples ci-dessus, vous avez peut-être remarqué que les images utilisées ne sont pas radicalement différentes des images filaires. C'est dans cette observation que beaucoup de travail peut déjà être fait pour vous.

Dans cette démonstration, nous avons constaté que le chargement initial prend plus de temps que nous le souhaiterions, il est donc temps d'ajouter des écrans de squelette pour améliorer le temps de chargement perçu.

Voici notre structure filaire initiale montrant la disposition de l'écran.

Lors du rendu initial, seuls l'en-tête et un espace réservé pour le contenu sont affichés. 19659005]

Pendant que nous attendons, l'image de la structure filaire est affichée.

[1945] 19659005] Ensuite, le texte est rendu pendant que nous attendons les images.

Le contenu final rendu est ensuite affiché.

En rendant progressivement chaque composant, l'attente semble courte er.

Résumé

Les écrans squelettes peuvent améliorer la sensation de n'importe quelle action prenant plus de quelques centaines de millisecondes. Si vous les appliquez à vos goulots d'étranglement de rendu, votre interface utilisateur se sentira plus rapidement et rendra les gens plus heureux.

Chris a débuté en tant que développeur Web lorsque Netscape a régné sur le monde. Il a fondé un groupe communautaire Singapore CSS parce que quelqu'un le devait. En plus des distractions musicales et de l'accumulation de points de fidélisation, Chris et son épouse Sarah se retrouvent en compagnie de leur petit être humain.