2

I'm wondering since years why in Balsamiq the arrows for sorting the table are right-aligned. I could agree on that from a design perspective, but in most cases I need sortable tables, there is a user need for that. I want to see the users that they are able to sort and don't hide it at the furthest possible place.

Is this legacy UX or am I missing the point?

2 sortable tables

5

It's not just from an aesthetic design perspective - it's usability design, too.

Your example shows this all too well. When you left-align things to the right of variable-length text, then it's going to look disjointed, aesthetically.

However, that disjointedness also reduces the consistency of the control. Users are now having to guess where the control will be. It won't take them long to find it, but you are increasing the friction on what can already be a complex interface.

In addition to this, it actually becomes more difficult to scan the heading when the arrows are so close to the text.

Hope that helps :)

  • 2
    Would that be true if you have no lines for separating columns? Which I have the feeling makes a difference for that decision. – Gustav Jul 25 '17 at 14:31
  • 3
    That's a great point. Reducing the visual weight by removing the borders can be a good strategy for simplifying a complex table. If that was what you were going with, I would consider having the arrows to the left of the column heading. That way, they are still always in the same place, while staying clearly within the implied boundaries of the column. – cheersphilip Jul 25 '17 at 14:35
1

The control is not relative to the text, it's relative to the column, and should appear consistently across columns.

To maximize consistency, fixed-width content should be outer to fluid-width content. The control is fixed width, the text is not. So if the control is not on the far right, it should be on the far left, with the text following.

It's worth noting that reducing distance may not always improve clarity. You may find that keeping the control left of the text looks cluttered. But it could still be beneficial; for instance, if you had a style without gutter lines, keeping elements closely paired could reduce ambiguity as to which column the control belongs to.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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