Afficher les grands nombres dans une petite zone
Je développe une application de comptabilité où j'affiche plusieurs commandes. Chaque commande a un prix. J'ai une boîte où je voudrais afficher le prix comme indiqué ci-dessous:
Cela fonctionne assez bien pour des nombres assez petits mais dès que je commence à avoir de grands nombres, la boîte n'est plus adaptée:
Une solution que j'ai trouvée consiste à n'afficher que des milliers comme indiqué ci-dessous:
- Certains de mes utilisateurs n'aiment pas la lettre
Kqui indique des milliers. - Certains d'entre eux veulent le prix exact et tous les chiffres à la fois.
Faire redimensionner la boîte pour qu'elle s'adapte à tous les chiffres du prix n'est pas une option car cela rendra certaines des boîtes plus grandes que les autres et la symétrie sera perdue.
Existe-t-il d'autres moyens de gérer ce type de problème?
La meilleure solution sera d'augmenter la taille de la boîte . Si vous pouvez le faire sans changer la mise en page, c'est bien.
Pour réduire la taille de la police , je suggère d'utiliser une seule taille plutôt que de descendre. C'est plus facile à lire.
Et, si vous voulez faire des représentations 'k' , assurez-vous que l'utilisateur a un moyen d'accéder au nombre réel, via une info-bulle ou un autre indice .
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Votre mise en page doit prendre en charge votre contenu. Premier contenu, puis mise en page appropriée. Vous ne pouvez pas facilement briser les contraintes physiques (comme un petit écran), mais peut-être même votre plus grand nombre pourrait être placé sur une ligne distincte sur le plus petit écran.
Je recommanderais également de garder à l'esprit trois étapes concernant les logiciels:
- Utile (fonctionnalité)
- Utilisable (utilisabilité)
- Esthétique
L'ordre est important, alors ne laissez pas l'esthétique battre la fonctionnalité et la convivialité.
Quelque chose qui se fait ici dans stackexchange est en utilisant des couleurs en combinaison avec k pour afficher le poids (et je devine aussi les m).
Regardez comment différentes couleurs représentent un poids différent, en combinaison avec les k, vous recevez quelque chose qui est indubitablement utilisable et compréhensible
Pour en savoir plus: Avez-vous envisagé d'ajouter une info-bulle/popover représentant le nombre exact?
Rendez la boîte assez grande pour contenir tout prix probable.
Si votre application a des prix pouvant aller jusqu'à six chiffres, faites en sorte que la boîte de prix soit suffisamment grande pour prendre un prix à six chiffres. Faites-le même si vous devez changer la disposition, même si l'immobilier est limité et que vous devez sacrifier autre chose pour lui faire de la place. N'utilisez pas "K" ou toute autre abréviation pour essayer de garder la zone de prix petite - comme vous le dites correctement, tout le monde ne le comprendra pas.
La raison pour laquelle je dis cela, c'est que pour la plupart des gens, le prix d'achat est une information très importante - plus importante que toute autre chose, à l'exception des informations de base "qu'est-ce que c'est". De plus, les gens n'aiment vraiment pas être induits en erreur sur le prix. S'il ne semble pas que vous soyez franc à propos du prix, les gens penseront que vous essayez de les tromper - même si vous ne l'êtes pas. La comparaison avec la réputation de Stack Overflow et l'utilisation de K n'est pas valide, car la réputation n'est pas aussi importante que le prix, et votre public est moins susceptible de comprendre l'abréviation.
La taille de la boîte est-elle une limitation comme cela a été demandé? La seule raison pour laquelle je pose cette question est le fait que vous pouvez probablement changer la taille de la boîte à la largeur du plus grand prix que vous avez et la définir comme largeur fixe pour la boîte. Centrez ensuite le prix à l'intérieur de la boîte et vous saurez qu'aucun autre prix ne peut dépasser la largeur car vous l'avez mis en mémoire tampon en utilisant le prix le plus élevé possible (vous pouvez peut-être ajouter quelques chiffres de plus à la taille maximale que vous souhaitez afficher).
De plus, si vous allez utiliser des prix avec un nombre décimal, je ne ferais que dimensionner la boîte une fois à la taille la plus grande possible, puis vous n'avez pas à vous soucier de la taille de la boîte qui change, mais vous pouvez commencer à centrer les prix à l'intérieur vous laissant ainsi un look uniforme sur le site.
Vous pouvez faire un compromis avec la souris sur tous les chiffres (si c'est une option), ou vous pouvez réduire/affiner les chiffres de fin (si vous avez la résolution).
J'ai essayé avec Calibri + Arial étroit, cela ne vous rapporte pas grand-chose:
(FWIW lors de l'utilisation de 'k', j'en utiliserais un petit, il se distingue mieux des chiffres et est SI-Correct. Pas de chance avec 'M pour million', cependant.)
En règle générale, envisagez de réduire le nombre total d'informations à l'écran. Si vous devez déjà saisir les données, votre problème n'est pas les éléments individuels.
Vous pouvez opter pour le symbole de devise + valeur,
123,786 $
peut être plus compact que
123k
Prix
[modifier] comme demandé: L'idée est de mettre l'accent sur les informations les plus importantes ("123" (k)) tout en conservant les détails. J'ai vu la version "one step" (2e et 3e exemple) plusieurs fois, mais généralement pour l'esthétique/le style plutôt que pour faire face à la densité de l'information. Utiliser des chiffres successivement plus petits était une idée spontanée pour étendre cela.
Comme le montre l'exemple, le "one step" n'achète pas beaucoup en termes de pixels, le second semble au moins inhabituel, sinon déroutant.
La notation scientifique voudrait que vous affichiez ceci comme: 1.23e5, c'est plus 'correct' quand il s'agit d'unités: 1.23e5 m a raison, alors que 123k m ne l'est pas (cela devrait être 123 km).
Cependant, si vos utilisateurs ne sont pas à l'aise avec le suffixe "k", je doute qu'ils aimeraient autant, je le mentionne simplement pour être complet.
D'autres possibilités pourraient être d'avoir quelque chose comme: 123tu ou 123, 000
C'est difficile à dire sans en savoir plus, mais voici quelques options possibles:
- Faire redimensionner toutes les cases pour qu'elles soient toutes aussi grandes que celle contenant le plus grand nombre
- Réduisez le rembourrage à gauche/droite de plus grands nombres pour qu'ils tiennent dans la boîte
- Rendre le texte numérique plus petit
- Gardez le 123K, et avez la possibilité d'afficher le montant total par une sorte de bascule (cliquez ou survolez ou autre)
Prenez exemple sur les widgets des réseaux sociaux. Les boutons J'aime/Suiveur/+ 1, etc. doivent tous afficher de grands nombres dans un tout petit espace.