Tuesday, March 22, 2016

toggle - Icon for ascending-descending sort



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.



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...