Pourquoi les barres de progression s'animent-elles en arrière?
La nouvelle barre de chargement de Gmail a attiré mon attention sur ce point aujourd'hui:
Le motif coloré à l'intérieur de la barre s'anime de droite à gauche.
Les barres de progression de Mac OS font de même:
Y a-t-il une raison à cela? Si on me demandait d'animer une barre de progression, je le ferais automatiquement dans l'autre sens, donc je suppose que cela devait être une décision consciente.
Mise à jour
J'ai récemment lu un article qui comprenait d'autres façons de faire apparaître une barre de progression plus rapidement aux utilisateurs:
Augmenter le nombre de pulsations - "La barre de progression avec l'augmentation des pulsations était plus susceptible d'être perçue comme ayant une durée plus courte"
Accélérez la progression et évitez les pauses à la fin - Les barres de progression "avec la progression la plus rapide se produisant vers la fin du processus" ont été perçues plus rapidement que les barres de progression " avec des pauses près de la conclusion du processus "
Des études ont montré qu'il semble plus rapide et que la perception UX est tout;)
A étude (PDF) [1] montre que les animations peuvent augmenter la vitesse perçue d'un téléchargement jusqu'à 11% par rapport à une barre non animée. Avoir un arrière-plan animé en arrière comme dans la barre de chargement Gmail, ou avoir l'arrière-plan Pulse plus rapide lorsque la barre est presque terminée, les deux créent cet effet. Il y a ne vidéo illustrant les animations et résumant l'article.
[1] Harrison, C., Yeo, Z., et Hudson, S.E. (2010). Barres de progression plus rapides: manipulation de la durée perçue avec augmentation visuelle. Actes de l'interaction ordinateur-homme.
Cela a pris une éternité pour utiliser Image Ready. lol
À l'avenir:
Revenir en arrière:
Lorsque la spirale va dans le sens contraire de la barre, elle exagère visuellement la vitesse du mouvement de la barre.
Les barres sont assez proches les unes des autres, alors cachez-en une avec votre Palm et n'en regardez qu'une à la fois. :)
C'est une hypothèse, mais c'est probablement parce qu'elle fait que la barre de progression semble se remplir plus rapidement.
Cet effet est obtenu car le bord droit de la barre, la partie conséquente, se déplace dans la direction opposée à l'animation, ce qui fait que les incréments que le bord de la barre déplace apparaissent plus grands qu'ils ne le font par rapport à la boîte contenant la barre de remplissage.
En plus de la raison de la vitesse perçue offerte par les autres réponses, cette animation du motif intérieur a également un sens à un autre niveau logique/analogique.
Les barres de progression d'exemple s'animent de deux manières: (1) la zone représentant la progression s'élargit, avec son bord droit se déplaçant vers la droite; et (2) le motif coloré à l'intérieur se déplace de droite à gauche (la direction "opposée").
L'animation (1) sert à indiquer la progression globale - et bien que cet Edge se déplace sensiblement, il confirme également indirectement que quelque chose se passe.
L'animation (2) sert à montrer que quelque chose se passe même lorsque le niveau de progression global peut sembler bloqué ou bouger imperceptiblement.
En ce sens, l'animation (2) ressemble plus à un fileur: son mouvement n'est pas un indicateur de magnitude (de taux ou de progression absolue) mais une confirmation, alors qu'elle se déplace, que quelque chose est en cours.
Maintenant, pourquoi un spinner se déplace-t-il généralement dans le sens horaire? Parce que notre expérience des aiguilles d'horloge associe fortement cette rotation à la progression du temps.
De même, l'animation `` rampante '' (2) s'appuie sur notre expérience (au moins pour les lecteurs de langues de gauche à droite) qui suivant une ligne de texte jusqu'à sa conclusion provoque le déplacement du texte de droite à gauche sous notre regard . Il en va de même pour une chronologie généralement rendue, où les périodes ultérieures sont cochées vers la droite. Le revoir du passé au futur fait bouger ses tiques de droite à gauche dans notre vision. (La même chose est également courante pour les albums photo classés par ordre chronologique qui animent les photos vers l'intérieur et vers l'extérieur: le déplacement vers des photos ultérieures envoie les photos précédentes vers la gauche tandis que les photos ultérieures entrent par la droite, comme si sur une longue bande de film.)
La barre d'élargissement elle-même est donc une sorte de fenêtre sur une surface abstraite; le fait que la surface texturée se déplace de droite à gauche indique un mouvement vers le futur/l'achèvement. (Le fait que cette animation, contrastée avec le bord le plus à droite de la barre de progression, a également tendance à donner l'impression que ce bord de magnitude se déplace vers la droite même lorsqu'il est temporairement interrompu est un autre bonus visuel.)
Vous verrez de temps en temps des indicateurs d'activité "d'exploration" qui n'essaient même pas d'indiquer la progression globale via une largeur croissante. Ils ont juste un rectangle de taille fixe de rayures de bonbons ou autre texture. Ce motif intérieur se déplace également souvent de droite à gauche, comme pour la numérisation de texte ou d'autres supports linéaires ... mais se déplace également parfois dans l'autre sens, comme s'il faisait rouler/percer quelque chose vers l'avant. (Je soupçonne que c'est lorsque les gens voient la texture comme représentant leurs travailleurs-agents occupés, plutôt que le sujet numérisé, qu'ils voient de gauche à droite comme un progrès. Par exemple, le modèle mental peut être partagé avec le défilement latéral les jeux qui commencent à gauche et se déplacent vers la droite. Le personnage se déplace vers la droite, l'arrière-plan se déplace vers la gauche.)
Je l'ai pensé comme une vis d'Archimède, ou comme l'arbre d'hélice d'un sous-marin.
Sorte de pousse le sous-marin en avant.
En plus de faire en sorte que la barre progresse plus rapidement, je pense que la raison principale est que l'utilisateur peut dire que la page/l'application fonctionne toujours. La barre de déplacement indique à l'utilisateur que l'application fonctionne en arrière-plan et n'est pas bloquée.
Si une barre de progression n'est pas animée et n'a pas bougé depuis un certain temps, l'utilisateur peut penser que l'application "ne répond pas". Cela se produit généralement lorsqu'un programmeur utilise le thread d'interface utilisateur pour effectuer une tâche (ce qui est une mauvaise pratique).