web-dev-qa-db-fra.com

Placer des icônes à côté des nombres - à droite ou à gauche?

Dans notre système, nous avons de nombreux endroits où nous affichons des valeurs numériques, et à côté d'eux, nous affichons une icône indiquant si la valeur est bonne/médiocre/mauvaise. Avant de rejoindre l'équipe, il n'y avait pas de directives, donc dans certains cas, ils ont placé l'icône à droite du numéro, et dans d'autres, ils l'ont placée à gauche.

icons on righticons on left

Existe-t-il une règle/directive/convention qui spécifie ce qui est le mieux et pourquoi?

10
Dvir Adler

Le placement des icônes à côté des nombres irait par ordre de lecture naturel.

Des icônes d'état apparaîtront à la fin de la ligne . Comme on le voit dans l'exemple ci-dessous, cela a du sens car le spectateur voit d'abord le sujet, puis le compte associé au sujet, et enfin le statut du compte. (Pour les langues RTL, la figure serait une image miroir de celle ci-dessous; et même dans ce cas, l'icône resterait toujours à la fin de la ligne).

mockup

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

Cependant, si les icônes elles-mêmes sont le sujet, alors elles apparaîtront au début de la ligne , et tout le reste suivrait ensuite. (Encore une fois, pour RTL, la mise en page serait une image miroir de celle ci-dessous).

mockup

télécharger la source bmml

17
SNag

Si ce ne sont que ces données, je serais d'accord avec simonteo.

L'utilisation de l'indicateur (qui sera toujours de la même taille) comme un point de puce, tout comme Iphone OS, utilise les icônes d'application comme points de "puce" dans la liste.

J'essaie généralement de placer ces valeurs ou "objet" qui seront constants à gauche. Constante en taille, dimensions, etc. lorsque vous travaillez avec une liste ou une table de données possible.

Question concernant les valeurs:

  • Ce qui est plus important pour votre utilisateur, les valeurs ou la vue d'ensemble de la valeur afin qu'il puisse se concentrer sur les bons/médiocres/mauvais.

enter image description here

2
hoektoe

Je suis d'accord avec Don Nickel, d'après mon expérience, le processus de réflexion suivi est la valeur -> le statut plutôt que le statut -> la valeur. Comme indiqué précédemment, la cohérence dans votre interface utilisateur est importante, mais compte tenu de ce scénario spécifique, je choisirais de placer les icônes à droite des chiffres.

1
hidrees

Les icônes à gauche du nombre indiquent généralement le intention des données, les icônes à droite du nombre indiquent généralement le qualité des données.

Ceci est juste mon opinion + observation, mais le flux va de gauche à droite:

Que saisir >> valeur entrée >> réponse à la valeur entrée

1
Don Nickel

Je considérerais deux choses principales:

  1. la proximité d'une autre ligne verticale dans l'interface utilisateur
  2. Sens de lecture du public (les langues occidentales et asiatiques sont généralement de droite à gauche)

Votre exemple résume commodément la colonne d'un contexte, mais ce contexte est trop important pour être omis.

mockup

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

A et D créent des colonnes plus fortes en raison de l'alignement et de la forme visuelle. Mais, si ces éléments ne se trouvaient pas à côté du bord de la fenêtre/de l'écran, les éléments à proximité peuvent alors changer notre raisonnement pour créer une `` colonne forte ''

1
New Alexandria

Certaines personnes écrivent des smileys de cette façon =) et d'autres écrivent des smileys de cette façon (=.

(= me semble vraiment bizarre et je suis toujours surpris quand une personne de la même culture que moi tape de cette façon. Donc je suppose qu'il n'y a pas de réponse définitive à la question de savoir si les icônes à droite ou gauche sont mieux.

Je suggère de mener un sondage rapide pour voir à quoi la majorité de vos utilisateurs sont habitués. Une fois que vous avez la réponse, implémentez-la de manière cohérente dans toute votre interface utilisateur et utilisez toujours le même emplacement à l'avenir.

0
Zach

Si l'icône est un commentaire sur les chiffres, alors cela vient après.
Cela semble être le cas.
Les exemples d'iPhone ne s'appliquent pas ici car dans ce cas, l'icône est "la chose" et le texte l'explique.

0
Juan Lanus