web-dev-qa-db-fra.com

Affichage / présentation des options parfaitement

J'ai une application Windows qui a quelques options concernant les notifications. Chaque type de message peut être activé et désactivé pour la barre d'état et pour les messages contextuels. Voici à quoi ça ressemble maintenant:

enter image description here

Je pense que cela a l'air assez horrible, mais il n'est pas évident pour moi quelle serait la meilleure présentation.

4
Randomblue

Pour commencer, vous pouvez rapprocher la colonne de gauche des cases de celle de droite, libérant ainsi de l'espace sur la gauche pour placer les étiquettes sur une seule ligne chacune. Vous pouvez également vous débarrasser des parenthèses, comme ceci:

enter image description here

4
Vitaly Mijiritsky

Quelques choses.

  • Les étiquettes ne doivent pas être centrées, c'est horrible pour le mouvement des yeux et la lisibilité.
  • Je préférerais la facilité de l'expérience utilisateur à la conservation des éléments html ici, même si le formulaire doit être plus long.
  • De plus, les mouvements oculaires nécessaires pour naviguer dans cette forme sont fous. En ayant deux colonnes avec une étiquette au-dessus de chacune, l'utilisateur doit constamment revenir à l'en-tête de la colonne pour se rappeler quelle option il modifie. Ce n'est pas une forme longue, pourquoi être si conservatrice?
  • J'utiliserais le contraste pour permettre au texte secondaire d'être facultatif, un texte d'aide.

Cette conception allonge le formulaire, mais en tant qu'utilisateur, je m'en fiche - surtout quand ce n'est pas un long formulaire pour commencer. Je peux aller de haut en bas rapidement sans avoir à rescanner la page entière à chaque fois. Chaque élément individuel peut être isolé comme mon domaine de concentration.

A revised dialogue box

Eye movements for each dialogue

En fait, pour les utilisateurs qui savent qu'ils ne doivent pas réellement cibler la petite case à cocher, mais la case à cocher entière et son étiquette en tant que zone cliquable, cela devrait ressembler à ceci:

Nearly linear eye movements

3
Adam Grant

Cela peut sembler stupide, mais à mon avis, ce sera beaucoup plus clair si vous changez de colonne et de ligne.

Utilisez simplement un gris clair pour le texte sur la deuxième ligne (pas de parenthèses) * avec une taille de police plus petite: s'ils ont besoin de plus de détails, ils le trouveront facilement sans gêner la numérisation des débutants.
Ajout de petites icônes à côté de Boîte de dialogue et Message de la barre d'état pourrait aider les moins informés en matière d'alphabétisation à deviner de quoi vous parlez.

* un peu contradictoire je sais

1
Knu