Placing icons next to numbers - to the right or left?

Question

In our system, we have many places where we show number values, and next to them we show an icon indicating whether the value is good/mediocre/bad. Before I joined the team, there was no guidelines, so in some instanced they placed the icon to the right of the number, and in others, they placed it to the left.

Is there a rule/guideline/convention that specifies which is better and why?

Answer 1

The placement of the icons beside the numbers would go by the natural reading order.

Status icons would appear at the end of the line. As seen in the example below, this makes sense because the viewer sees the subject first, then the count associated with the subject, and finally the status of the count. (For RTL languages, the figure would be a mirror image of the one below; and even in this case, the icon would still remain at the end of the line).

^{download bmml source – Wireframes created with Balsamiq Mockups}

However, if the icons themselves are the subject, then they would be appear at the start of the line, and everything else would follow there-after. (Again, for RTL, the layout would be a mirror image of the one below).

^{download bmml source}

Answer 2

If it is only that data then I would agree with simonteo.

Using the indicator ( which will always be the same size ) as a bulletpoint much like Iphone OS uses Application icons as "bullet" points in list.

I generally try to place those values or "object" which will be constant to left. Constant in size, dimensions etc when working with a list or possible table of data.

Question regarding the values:

• What is more important to your user , the values or overview of the value so that they can concentrate on the good/mediocre/bad ones.

Answer 3

Icons to the left of the number usually indicate the intent of the data, icons to the right of the number usually indicate the quality of the data.

This is just my opinion + observation, but the flow goes from left to right:

What to enter >> entered value >> response to value entered

Answer 4

I would consider two main things:

1. proximity to another vertical line in the UI
2. Reading direction of the audience (western and asiatic languages are generally right-to-left)

Your example conveniently abstracts the column from a context, but this context is too important to leave out.

^{download bmml source – Wireframes created with Balsamiq Mockups}

A and D create stronger columns because of alignment and visual form. But, if these elements were not next to the edge of the window / screen, then the things they have proximity to then may change our reasoning for creating a 'strong column'

Answer 5

I agree with Don Nickel, in my experience the thought process followed is value -> status rather than status -> value. As previously pointed out, consistency across your UI is important, but given this specific scenario, I would go with putting the icons on the right of the numbers.

Answer 6

Some people write smileys this way =) and some others write smileys this way (= .

(= looks really weird to me and I'm always surprised when a person from the same culture as me types it that way. So I'm guessing that there isn't a definitive answer to the question of whether icons to the right or left are better.

I would suggest conducting a quick straw poll to see what majority of your users are used to. Once you have the answer, implement it consistently throughout your user interface and always use the same placement going forward.

Answer 7

If the icon is a comment on the figures, then it comes after.
This seems to be the case.
The iPhone examples don't apply here because in that case the icon is "the thing" and the text explains it.

Answer 8

My opinion is that this is the better design as the icons resemble bullet points and aid the user to view it easier.