web-dev-qa-db-fra.com

Compteur dans un coin d'un bouton

Je crée un contrôle utilisateur qui est essentiellement un large bouton de type tuile (pensez aux tuiles du menu Démarrer de Windows 8 "large"), mais dans le coin supérieur droit il y a une zone sombre qui contient un compteur. Ce nombre peut varier de 0 à 99999 (eh bien, techniquement, le nombre peut être encore plus grand, mais les scénarios réels ne devraient pas le voir dépasser 20000, ce qui représente 5 chiffres).

Les boutons ont également une icône blanche au milieu, qui ne sera pas visible dans les captures d'écran suivantes.

Tile with non-rotated counter

Les problèmes sont les suivants:

a) S'il y a un petit nombre, il semble ... mal à sa place. Il peut être mis à l'échelle pour occuper plus d'espace, mais deux tuiles avec des nombres différents (une avec quelques chiffres, une avec plusieurs chiffres) semblent étranges, car les nombres sont maintenant de tailles d'affichage différentes

b) J'ai essayé de faire pivoter le nombre à l'intérieur du compteur de 45 degrés, ce qui me donne plus d'espace horizontal pour travailler. Ce tri supprime le problème de taille d'affichage, mais, bien, l'utilisateur doit maintenant lire le nombre sous un angle étrange.

Tile with rotated counter

c) J'ai également essayé de définir une limite de nombre maximum (disons, 999), et si ce nombre dépasse, afficher un + à la fin (il devient donc un 999+ et ne grandit plus). Cela limite la quantité d'informations que l'utilisateur reçoit quelque peu (bien que si les nombres atteignent de telles valeurs, l'utilisateur ne perd pas vraiment beaucoup d'informations - il connaît le nombre s'il est élevé, ce qui est important), mais j'ai toujours besoin de suffisamment d'espace pour s'adapter à au moins 4 caractères ...

Dans l'ensemble, c'est un problème UX mineur auquel je suis confronté, mais qui me dérange depuis un moment. Je me demande quelle est la meilleure façon de résoudre ce problème.

EDIT: Je pourrais également ajouter - les boutons sont affichés sur une grille de type Windows Metro, donc ils sont côte à côte. Tous les boutons n'ont pas de compteurs. Actuellement, si un bouton n'a pas de compteur, la zone sombre ne s'affiche tout simplement pas.

EDIT 2: Je devrais également noter - le nombre affiché est ... eh bien, j'ai un peu de mal à juger de son importance pour l'utilisateur. Les boutons représentent des tâches de différents types assignées aux travailleurs (utilisateurs). Le compteur doit représenter le nombre de tâches de chaque type qui ont été attribuées. Certains boutons sont des tâches non affectées dans le système, donc ceux-ci n'ont pas de compteurs. Sinon, il me semble que l'information la plus importante n'est pas vraiment le nombre de tâches assignées, mais:

  • s'il y a des tâches assignées ou non
  • si le nombre de tâches a changé
  • la portée générale des tâches assignées - 10s? 100s? 1000s?

J'étais donc disposé à aller avec un peu moins de lisibilité pour plus d'esthétique.

EDIT 3:

Un de mes amis a suggéré ce qui suit:

Tile with rotated counter

10
Shaamaan

Êtes-vous limité à utiliser un coin incliné?

Sinon, une boîte serait beaucoup plus simple et élégante.

enter image description here

Sinon, si vous êtes coincé en utilisant le coin incliné, l'alignement vers le haut à droite plutôt que le centre est probablement votre meilleur pari! enter image description here

21
alexbouchard

Une option que vous pouvez essayer est de rendre la variable de zone sombre, en fonction du nombre de chiffres. De cette façon, la zone sombre fonctionnera également comme un repère visuel, indiquant l'ampleur du nombre.

enter image description here

enter image description here

11
DesignerAnalyst

La mise à l'échelle du texte en fonction de la taille de l'échantillon, sur des images comparables, donne le plus souvent de mauvais résultats. Essayons de contourner cela.

Les petits nombres (comme dans les nombres à un chiffre) peuvent sembler trop isolés et inesthétiques lorsqu'ils apparaissent sur une plus grande toile.

enter image description here

Cela peut être évité dans une certaine mesure en faisant en sorte que la place du dix conserve une valeur par défaut (0 dans notre cas). Par exemple,

enter image description here

Laissez ce modèle être suivi des chiffres jusqu'à "99", puis continuez comme on le ferait normalement, comme,

enter image description here

Si le numéro est pertinent pour l'utilisateur (il ne devrait pas être là en premier lieu si ce n'est pas le cas, donc je suppose qu'il l'est), ne le tronquez pas, sauf si vous prévoyez de l'afficher en entier en survol /concentrer. Tant que vous parvenez à le placer esthétiquement, la taille ne devrait pas avoir d'importance.

enter image description here

Sur une note latérale, je suggère de ne placer aucun texte en biais par rapport au point de vue de l'utilisateur, à moins que ce soit dans un cadre totalement informel. Je suppose que le canevas donné n'est pas la version finalisée, il convient donc de mentionner que l'ensemble du contrôle pourrait sembler plus élégant si vous réduisez la taille de la police d'un peu et ajustez son placement. Comme,

enter image description here

Bonne chance pour ton projet.

2
JaikGeorge

Avez-vous essayé de décaler les valeurs en fonction du nombre de chiffres?

En d'autres termes, définissez le décalage vertical pour les nombres à un chiffre pour supprimer l'espace vide, puis déplacez les nombres vers le haut à mesure que le nombre de chiffres augmente.

fewer digitsmore digits

Le côté positif de cette approche est qu'à présent, en plus du tri basé sur la longueur visuelle déjà présent, le tri basé sur la hauteur pourra également être utilisé, car les valeurs inférieures seront plus faibles sur leurs icônes.

0
shade4159