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.

On a just-now-coming-alive web page, I have two columns: change and change-percent. In the headers of the two columns, I want to give the user a small control so he can toggle between sorting the columns by abs value; and arithmetically.

In the first case, I can show him something like:

 +-----+    +-----+
 | ABS | or | MAG |
 +-----+    +-----+

What two- or three-letter abbrev can I give him to select sorting by signed value?

Or what graphics can I use to express the same ideas clearly and with good affordance?

share|improve this question
4  
Mag...mag...mag...oh - magnitude! I get it. If your users get that, they'll also understand % and |%| –  Roger Attrill Jul 19 '11 at 15:01
1  
Just out of curiosity, why is there a "valid html?" button at the top of that page? –  Rahul Jul 19 '11 at 15:51
1  
@Rahul - I think it's a 'development only' HTML5 validity checker for debug purposes. –  Roger Attrill Jul 19 '11 at 16:49
    
@Roger Attrill -- " % and |%| " Brilliant! Thanks. –  Pete Wilson Jul 19 '11 at 22:34
add comment

3 Answers

up vote 5 down vote accepted

At the risk of creating an SE black hole, here's my answer from the original.

I think ABS and MAG are decent keywords you can link to control sorting, especially if you have mouse-over text pop up that explains the action - i.e. "Sort by absolute value". You do have a nice setup with your icons though, and we should work to preserve that.

Currently, you have icons that you click to control highlighting and sort order (asc/desc)

Current

I think that you should separate them a bit, and enhance the sort order with an absolute value modifier. By clicking the word 'abs', you might highlight the word (to show that it's active) and toggle between sorting regardless of sign. Here's my prototype:

enter image description here

Cheers

share|improve this answer
    
Thanks so much, that's very helpful! Now I'm looking for the abbreviation that tells the guy it's a signed-value sort rather than a sort by absolute value (abs). Aha! Maybe the string "+/-" would do it. I like your idea of putting the asc/desc icon in parens: that sets it off nicely. As to the threatening black hole, I notice the question was moved to at least one other group, as well, so we shall just have to wait and see :-) –  Pete Wilson Jul 19 '11 at 15:12
add comment

It's a pity that you have so little space availabe, otherwise you could expand on your sorted graphs icons. The bottom graphs are sorted on absolute value (red is for negative values):

sorted series

Abs(x) works pretty well as an abbreviation. If your users have a mathematics background, you could use |x| instead.

share|improve this answer
add comment

I would just add to the other great answers that for clarification you should make sure to have prominent tooltips that explains in plain language the two sorting options:

  • "Sort by magnitude, from positive to negative numbers"
  • "Sort by absolute value, from large to small numbers, ignoring positive or negative valence."

To make the tooltip more effective you might consider:

  • including the graphical icon from the column header in the tip
  • short latency for tip display (e.g. 250 ms)
  • include links in tooltip to relevant sections on your site that provide context for your choice of sorting options.
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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