Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm trying to come up with two icons to represent ascending-descending sort order which would allow the user to sort the members ('bars') of a chart/visualization.

The control will be a toggle allowing the user to select one option or the other. I included a few variations, I'm wonder what you think is the most intuitive/clear:

Sort icon options

One note, not sure if this relevant or not,potentially could impact the usability of the icons: often the data has more members than the chart can display - for example a bar chart can only fit 20 bars while we have 200 cities in the data. In this case what happens is the 20 biggest/smallest bars are displayed (based on the sort order) and the rest are just averaged and grouped into an 'others' bar.

share|improve this question
1  
from those three, (B) because on the other two, one of the arrows is in conflict with the adjacent graphic –  Roger Attrill Oct 27 '11 at 18:57
    
(b)............ –  Emil Oct 28 '11 at 0:49
    
Yes Icons from (B) absolutely –  sysscore Oct 28 '11 at 11:10
add comment

closed as off topic by Benny Skogberg, Rahul May 20 '12 at 9:27

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

4 Answers

up vote 2 down vote accepted

I don't think the 'others' bar will have an adverse effect on the user experience, if you always put it as the last item on the bottom, and clearly label it. (You can use parenthesis or italic font on the label to make it stand out even more, then most users will not confuse it for a normal label.)

For the icon: what do the colours mean, why is one green and the other grey? If it indicates the current order, I think the selected one could be brighter and perhaps have a bit of glow (and I think this is a good way of showing the current state.)

On unsorted data, I would make it neutral (both options equal.) The current contrast between green and background is a bit too low and a bit difficult on the eye.

(To compare other applications: mail, windows explorer and others just use a single triangle to indicate the sorted column, and assume the users know clicking on headers will sort. Some webapps use an up-down arrow on hover (if applicable - not for mobile) to indicate the possibilty. Word uses an a-z with downward arrow, a visualisation tool uses almost the same icons as you do, but split into two separate buttons. In a new application, the first option is probably too undiscoverable.)

share|improve this answer
add comment

I like this example from AristsValley.com, though the icon itself is much too large and requires too much detail for your likely use case:

enter image description here

The important features are the width of the rows (which are shown as the actual chard will appear) and also the width of the arrow. The width of the arrow also projects the "top heavy" appearance the chart will show once you click the button. As your examples show, normal, non-top/bottom heavy arrows are ambiguous.

High Fidelity MS Paint Mockup:

enter image description here

share|improve this answer
add comment

For the examples you provided, "B" is the most intuitive because it shows a difference between up and down in the bars, but its making me think too much. Depending on where you position the icons (in a header, for example) you can do away with the bars and just put icons with Up and Down. Or a simple triangle pointing up, or pointing down.

In regards to your other concern, have an "Others" bar is self explanatory that there are other cities and you're only showing the top ones. I'd test it with users to see if they understand what it's trying to do, and go from there.

share|improve this answer
add comment

I'd try to avoid the arrows, because it is unclear what they should mean. Instead, I would only use the increasing/decreasing bar widths: options a or b without arrows.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.