Telling user about action when clicking on a column in table

Question

A table has a head row, which tells user the meaning of the column, like Google file table has name, id, mime type, created and modified date.

But, in addition to presenting information in the table, I wanted the user to be able to perform some actions on the row objects: open the file for instance, or rename it, or make a copy of it. It is very convenient to do by simple click if you click one column, you open the file, if you click the name column, the name becomes editable, for instance, and so on. It is much more convenient than providing a menu button per every row, that needs to be opened with extra clicks.

Another option would be to add extra "action" columns to every row, the menu in the ready-unfolded form, which enables the single-click actions but takes a lot of space, failing the table to fit into the user screen.

That is why I tend to the dual use columns -- it displays some attribute of the row/object but does some unrelated action when clicked. How do you tell the user what is going to happen when he/she clicks the cell? Tooltips on mouse hover?

Answer 1

In general, avoid actions that are invoked simply by clicking on a cell value, as these are hidden actions that won't be clear.

To me the only thing that would be intuitive is clicking on a cell to get more details about that cell, as this is a standard web drill-down paradigm. As long as the cell value is clearly a link, this will work.

But it isn't obvious, for example, that a table on a website is editable by clicking on a value. And other actions will be less obvious.

I think you have a couple of options here.

Display icons next to the cell value to signify actions like editing. For example, a pencil icon for editing.

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you have several options associated with a cell, or just don't want the table to look cluttered, you could have these icons appear only on mouse over.

If editing is very common, you could make the cells always editable and communicate that by making the table a spreadsheet-like grid in appearance, or making it form elements.

This won't look as nice for reading, but if editing is the main task, then it will make things easier.

Answer 2

The best option is to show up the action bar dynamically, specifically for every row like Blogger does, instead statically tying actions to unrelated columns.

The Blogger gives you a list of posts. It displays an action bar under every post row whenever you hover your mouse over the table. This saves space (well, I remarked that Blogger reserves the space for the action bar despite one row is active at most but we should not do that) and avoids which stems from the need to recode between displayed data field and unrelated action mapped to the same column.