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"

enter image description here

and "Amounts"

enter image description here

  • 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" enter image description here

and "Keys" enter image description here

  • 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?
  • Strange. Looks like an old app which where restricted due to width (which isn't a factor today). I'd use four columns and skip the toggle all together and call it Service Pack 1 :-) Commented Oct 5, 2012 at 15:20
  • That's true, it is an old application. That's why I see a solution in changing the width. But what to do when the toggle is more like functional. Some will look at quantities, while others will look at amounts (when looking at amounts, the quantities won't matter and vice versa)?
    – Kim
    Commented Oct 5, 2012 at 15:22
  • That's why it's better to show all four at the same time, no need for unnecessary interaction. Commented Oct 5, 2012 at 15:29

2 Answers 2


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


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.

  • certain grids are already detailed information, for example the available supply for a certain article. So these grids don't have a more detailed view than that grid. My first suggestion would be to use or extend the available width. But what if maximum is reached, and there is no detailview. Create a popup with an extended view launched by a "More details" link?
    – Kim
    Commented Oct 8, 2012 at 13:39
  • 1
    @Kim Definately. A "more..." link is very useful in this case, and users often knows what to expect from such a link. Commented Oct 8, 2012 at 14:00
  • Thanks for your answers. One of the other ideas was a "Settings"-like button, to configure the grid and define the columns there. What would you prefer more?
    – Kim
    Commented Oct 8, 2012 at 14:03
  • Personalisation is always good, and if your users want it - go ahead. Be sure to let them know what they can do first, or implement different views. Commented Oct 8, 2012 at 14:04

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.