Toggling columns

Question

I have some questions about toggling columns:

in an older application, we have some columns that a user can toggle (regardless of available horizontal space). For example, the toggle between quantities and amounts. When the user clicks on the amount button, the columns for quantity change to amounts.

Toggle between "Quantities"

and "Amounts"

• What control should be used to make the toggle?
• Where should these buttons be placed? It could be that we toggle only a single column, or a group of columns.

---

Otherwise, it could be that we toggle columns because of available width.

Toggle between "Extra description"

and "Keys"

• We could solve this by extending the width of the form or by making these columns scroll behind more important columns. Is this the way to solve this?
• Could we hide this under a 'More columns' button with drop down list?
• Should there be a closer relation between the toggle and the buttons that are affected by it?

Answer 1

I think all of the approaches could work. I would definitely allow people to select columns, preferably in the view itself. You could either use a button group with pressed/depressed buttons (like the [b] and [i]-buttons in word), or a button that pops up a checkbox menu. This is the way for example Thunderbird handles it. Those controls should probably be expected at the right top of the table, near the column titles it relates to.

Detailed view is very useful, but it makes scanning of a table impossible for the fields hidden from viewing, so it might not be enough. You could also consider showing the information in a hover popup, which is faster than clicking and clicking away. (I'd still provide the clickable link to detailed view though, to make it more discoverable and also to make it easier to copy values, because the information won't disappear. And of course hovering isn't necessarily available to tablets and phones.)

Answer 2

From a User Experience perspective I would suggest the following:

• Avoid toggle
• Avoid too much scrolling
• Show only the needed columns

In your case this would mean to have eight columns if all are needed. Som of that information (key 1 and key 2) might be better placed in a drill-downed product description page? Then your down to six columns, where one is Product description.

Ask your users what information they would put in the columns if there was only six columns available, with the possibility to add extra info on the product page.

Inline scrolling is even worse than pagination. If you can - implement a full view option where every product row is visible. That way your users can do a page search hitting CTRL+F. If you want to, you could also implement a filter to make it easier for your users to find the product they are after.