6

Often websites may include functionality that allows a user to select what columns appear in a table. When this occurs, what is the best way to visually communicate this action, so the user both understands it is possible and knows how to perform it?

We are trying to implement this functionality on our site, but we are at a loss for a good way to indicate it. Two icons have been suggested (a pencil and a hamburger) but they are both very general and may not be clear. It's not obvious that this functionality can be indicated with an icon.

Pencil edit

burger menu

Are there any alternatives to this approach?

7
  • Don't know why this got a mark down, can you please explain what is wrong with this. It is perfectly reasonable UX question, what is the current trend for this type of icon so that users naturally understand the notion behind the button. – Gurnard Jun 1 '16 at 9:27
  • Questions asking for specific icon suggestions are off topic: meta.ux.stackexchange.com/questions/629/…. – user31143 Jun 1 '16 at 9:33
  • FWIW I doubt an icon will clearly communicate "select columns to display". Consider text instead or in addition to an icon. – user31143 Jun 1 '16 at 9:57
  • 1
    @dan1111 I have edited the question. Does that meet the requirements now? – Gurnard Jun 2 '16 at 11:51
  • 1
    I have made further edits. I hope this is ok. I have nominated the question to be reopened. – user31143 Jun 2 '16 at 11:58
1

I would do something like the following:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This allows the user to see all available options and have quick access to enabling/disabling their display. The button dropdown communicates that it contains options (as opposed to triggering some immediate action).

Optional: I've seen the "eye" icon used for controls which affect visibility of elements. I don't believe you'll find a single icon that will communicate this effectively all on its own, but used with helpful text, I believe it will be very clear what it does and how to use it.

1

I think and "edit" icon or pencil could be misleading as the user may think they can actually edit the table's content. What about a solution that shows a Display All Columns option, along with the option to display a selection of columns? Here is a demo of what I mean: http://gergeo.se/RWD-Table-Patterns/#demo If all columns are displayed, you could make the Display All button look selected. If only some are displayed, you could make the "Display" button look selected.

Display menu allows user to select columns to display using checkboxes.

0

The pencil has been associated with editing for some time now, most users will understand this. Another alternative is a drop down. The Wordpress admin panel is using a dropdown to let the user select which widgets to display, add a dropdown arrow to your table head and let a block of checkboxes for your table columns slide out, alternatively stick with the pencil and provide the same dropdown view when clicked, the dropdown will ensure your users don't get torn out of the table context.

2
  • Yeah the pencil is related to editing. In wordpress adding widgets is editing a page correct? So actually changing the properties of an object: the page. The widgets will be changed for every object/page for everyone. This is not editing a page but just changing the view of the page just for this current user. It does not effect any object and only applies to the view of the current user not for anyone else. Do you still think the pencil would then be the most commonly used indicator for such an action? – Gurnard Jun 7 '16 at 7:56
  • Yes i think so: The pencil (in my opinion) stands for modification in general, you might use a wrench icon for this too. Discussing specific icons is out of the scope of UX though. – Jonas Köritz Jun 7 '16 at 7:58
0

I understand you want to communicate the action "edit", but it may prove advantageous to communicate another action ("add") and making the functionality clear after the user interacts. e.g.:

user clicks on "add", but after interacting the actual interaction seems clearer.

HOWEVER, depending on what kind of content you mean to display in the table, the "add" button may be interpreted as "adding an item to the table." It really depends on what kind of content you're displaying (and how editable it is), and on whether there is a "more important button" for adding things to the table itself.

0

This is tough to answer without knowing more about the platform you're working on, but i'll pass along what i designed for the platform I work on in hopes that it may help. I've read a few suggestions about using an 'Edit' pencil, but putting this much functionality behind an icon is tricky because it's a hard concept to convey with iconography.

At any rate, the image below shows the icon options I designed for the feature you're asking about in the SaaS platform i work on. In my situation, after signing in, users are presented with an interface that contains a grid of their orders, a search panel, and a panel of pre-defined filters. I added a new button to the toolbar in this area for user-specific column layout management. Clicking this button opens a dialog where the user can configure their columns by dragging/dropping to add, remove, or rearrange their layout.

enter image description here

Point is, i added a clearly understandable visual button to our toolbar which opens a dialog where column layout is configured.

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.