Affichage de l'état d'une action sur un bouton

Question

J'ai une application qui peut synchroniser le contenu entre un site Web et un réseau social. avec un bouton, vous pouvez activer et désactiver la synchronisation.

l'utilisateur doit voir l'état (synchronisation activée ou désactivée) et l'action (activer ou désactiver la synchronisation).

Entre l'activation et la désactivation de la synchronisation, il y a un temps d'attente, qui devrait voir l'utilisateur.

C'est ma solution? Existe-t-il une meilleure façon d'y parvenir?

le texte de l'étiquette montre l'action et les bulles indiquent le statut. tandis que le temps d'attente le texte d'étiquette devient "attendre ..."

Answer 1

Il peut être déroutant de mettre quelque chose qui c'est (c'est le statut) dans un bouton qui représente quelque chose qui pourrait être, (c'est l'action).

Essayez de séparer l'état et l'action (ou le bouton) en deux des éléments clairement différents, par exemple une étiquette de texte et un bouton:

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Ensuite, appliquez la mise en page appropriée pour communiquer ce qu'est une action (styles de bouton, avec ou sans icône), ce qui se passe (spinner, dot dot dot), afin qu'elle soit conforme au reste des couleurs et des symboles de votre page Web.

Answer 2

Gardez à l'esprit la fonction des objets de l'interface utilisateur.

Affiche et icônes d'état sont des objets en lecture seule pour informer l'opérateur.

Boutons permettent à l'opérateur de prendre action d'une certaine sorte.

La combinaison de ces deux fonctions a été popularisée par le bouton lecture/pause sur les lecteurs audio et vidéo d'ordinateur. D'un point de vue, il est logique que 2 actions mutuellement exclusives partagent un même contrôle. Mais la raison pour laquelle ces systèmes fonctionnent si bien est que l'audio ou la vidéo fournissent une rétroaction abondante à l'utilisateur de l'état actuel. Le fait d'afficher uniquement les informations d'action sur un bouton sans rétroaction de l'utilisateur laisse à l'opérateur le casse-tête de déduire l'état actuel, ce qui introduit une ambiguïté. Si un bouton est étiqueté "Verrouiller la porte", cela signifie-t-il que la porte est actuellement ouverte ou actuellement déverrouillée? Personne ne sait.

Je dirais que le feu vert est trop ambigu pour informer efficacement l'utilisateur du statut. Le voyant vert signifie-t-il qu'il se synchronise ou qu'il est prêt à se synchroniser? N'oubliez pas que votre travail consiste à éliminer l'ambiguïté. Vous devez ajouter une étiquette au-dessus du bouton pour informer l'opérateur de l'état. Après tout, ce n'est pas plus de travail d'ajouter une étiquette au-dessus du bouton que de mettre un voyant d'état sur le bouton. L'étiquette devrait afficher "synchronisation" ou mieux encore "synchronisation maintenant" avec "attente" et un autre mot (ou simplement vide) pour tout autre état nécessaire.

Answer 3

Je garderais le même bouton/icône dans différentes variantes pour communiquer

• Syched 
• Non synchronisé 
• Démarrage de la synchronisation 
• Arrêt de la synchronisation 

De cette façon, vous obtenez une cohérence plus élevée et moins de contrôles utilisateur. Pas besoin de montrer le contrôle à démarrer la synchronisation lorsque l'application est déjà en cours de synchronisation.

Answer 4

Ils disent que 90% des actions des utilisateurs sont basées sur son expérience actuelle. Sur cette base, je pense que l'expérience utilisateur actuelle est que les commandes doivent exprimer l'état actuel du système. De plus, le bouton est censé être cliquable.

Donc, il semble que vous devriez avoir un texte de bouton lié à l'état actuel et le bouton lui-même suggérera que l'état peut être changé.

[ο Désynchronisé]

[● Synchronisé]

[@ Attendre]