Quelle est la meilleure barre de progression des boutons?
J'ai fait un croquis des différentes barres de progression des boutons, mais j'ai besoin de savoir laquelle est la meilleure et pourquoi, en fonction de quelques facteurs clés:
- Vitesse perçue (la plus rapide).
- Niveau de bruit/distraction (moins de bruit/distraction).
- Beauté (moar génial).
- Performances perçues (les plus fluides).
Dans l'esquisse suivante, j'ai numéroté chaque type de barre de progression de bouton avec un numéro différent, et à gauche, vous pouvez voir le mappage de la scène (état initial/neutre, entre le clic et la phase finale, Done msg et Final/done stage).
Je ne suis pas très expérimenté avec l'UX, donc j'espère que vous, gourous de l'UX, pourrez m'aider à résoudre ce problème!
Pour éviter toute ambiguïté, j'opterais pour quelque chose comme ceci:
Les avantages de cette opération sont que l'utilisateur reçoit un message clair indiquant que quelque chose se passe et plus important encore, il ne doit pas quitter la page actuelle tant qu'elle n'est pas terminée.
Peut-être même donner un vert plus clair pour la partie "pas encore terminée" de la barre.
En ce qui concerne la "vitesse perçue" - la recherche montre que vous ne devez jamais démarrer une barre de progression à zéro, quel que soit le temps nécessaire pour terminer un processus.
Edit: cette recherche parle en fait d'un cas d'utilisation différent, cependant, j'ai remarqué que Apple démarre toujours leur barre de progression générique avec un peu rempli, donc je dirais que cela s'applique dans ce cas ainsi que.
Eh bien, je ne peux pas commenter la partie vitesse/performance perçue car vous pouvez la rendre aussi rapide et fluide en jouant simplement avec l'animation.
La beauté est subjective, donc je ne peux pas vraiment commenter cela.
La seule chose que je peux noter est la suivante: les niveaux de distraction sont assez élevés lorsque le bouton se transforme soudain en chargeur circulaire. Ce problème peut être résolu en rendant le bouton moins visuellement différent du chargeur circulaire.
Quelques exemples:
Je suis d'accord sur "la beauté est subjective", mais je pense toujours que ce que l'auteur de la question signifie avec "beauté" a plus à voir avec "expérience utilisateur" qu'avec "décoration". Quoi qu'il en soit - juste pour moi, la solution la plus conviviale serait spontanément une combinaison de 1) et 4) tout en laissant le libellé ("SOUMETTRE").
C'est ou bien juste une vue personnelle - mais c'est aussi comme par exemple la barre de progression de vimeo ressemble à - et c'est une barre de progression que je voudrais appeler non seulement conviviale, mais belle.
Tout d'abord, vous disposez d'un mélange d'indicateurs de progrès déterminés et indéterminés. Tous vos exemples, mais n ° 3, sont déterminés et montrent que votre système peut quantifier les progrès réalisés vers un total connu. Le numéro 3 est indéterminé, ce qui signifie que quelque chose se passe, mais votre système ne sait pas à quel point il est terminé.
Mes suggestions? Numéro # 3 ou # 5. Voir ci-dessous pour savoir pourquoi.
# 1 semble esthétiquement agréable, cela pourrait être plutôt subtil et vous pourriez rencontrer un problème où l'utilisateur a cliqué et peut croire que rien ne s'est passé ou que le système ne répond pas s'il ne remarque pas l'animation.
# 2 incorpore certains changements, montrant que le système a répondu. Cependant, il est très similaire, mais différent, de l'état d'origine, et pour moi, quelque chose s'est cassé.
# Comme mentionné dans le premier paragraphe, il s'agit du seul indicateur de progression indéterminé, donc si votre action a un temps d'achèvement ou une progression inconnue, c'est votre go-to des 5 exemples. J'aime ce traitement car il est clair que quelque chose s'est produit et évite à l'utilisateur d'essayer de cliquer à nouveau sur le bouton. Vous voyez souvent quelque chose de similaire à cela dans l'appel à l'action "Passer une commande" sur les sites de commerce électronique, ce qui aide à garantir à l'utilisateur qu'il ne peut pas accidentellement passer plusieurs commandes.
# 4 et # 5 sont très similaires, mais je pense que les deux # 5 sont meilleurs. Ceci est le cousin déterminé de # 3. Je pense qu'il a les mêmes avantages que #.
J'espère que cela vous aidera dans votre décision.
Sur la vitesse/performance perçue: Une étude a montré que "un ruban reculant augmente la vitesse perçue d'une barre de progression" =. Vous pouvez appliquer cet effet à n'importe laquelle de vos options, bien que la recherche porte spécifiquement sur une barre horizontale. J'appuie également l'affirmation de @ DaveAlger sur ne commençant pas à vide .
Sur la distraction/impressionnant: Je trouve souvent ces deux objectifs opposés. À mon avis, votre option 5 est à la fois la plus impressionnante et la plus distrayante.