Icon for ascending-descending sort [closed]

Question

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:

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.

Answer 1

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.)

Answer 2

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.

Answer 3

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.

Answer 4

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:

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: