So I have a plain old button (two buttons to be exact). The button reads "SORT", when you click the button, an option comes up and lets you choose a sort type.

I have two types of sorting: price and alphabetical.

For price, I decided to use font-size to designate ascending/descending order.

Something like this:

<span style='font-size:x-large'>$</span>
<span 'font-size:medium'>$</span>
<span 'font-size:small'>$</span>

This does not directly use the word "Price" but signifies order and variable. I currently use text for alphabetical ordering, but would want to switch to a symbolic approach like: a-Z or Z-a to signify alphabetical ordering.

So, my question is what is the BEST way to signify alphabetical order?

My own idea on the best way

  • 1
    Alternatively, you can use a drop-down menu similar to Amazon.com or eBay.com
    – kcdwayne
    Mar 20, 2014 at 12:12

2 Answers 2


I knew I had seen this before but here was an example of how Microsoft handled it. Pretty straightforward. There might be a prettier way to design the icon though. :)

enter image description here


Alternatively– a you mention price as another "column"– you could integrate the sorting buttons into the list itself similar to a sortable table. Unless the objective is to enable sort hierarchies (e.g. by name, then price).

Table sort

  • I think the column based is the best. It's pretty well assumed that first comes index, and by clicking any column header, the list gets sorted first by low-to-high (a-z), and by clicking that column again, high-to-low (z-a). It's what I prefer any day of the week.
    – kcdwayne
    Mar 20, 2014 at 12:12
  • I don't use a table, so clicking 'columns' are not useful to me, I use a horizontally scrolling list, but thanks for the suggestion. Mar 20, 2014 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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