1

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?

2 Answers 2

0

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.

mockup

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.

5
  • It is not clear indeed. But, using informative icons is wasteful, IMO. We use tables to represent typical information and factor out all the common factors, like the units of measurement or column/attribute name into the column head. This saves a lot of space and makes the table. The table is a condensed representation of information. The cells must be unique pieces of information. The common stuff is factored out into the headers. Supplying the column-common icons into every cell is wasteful. This is what I tried to avoid, particularly saying that I do not want any extra action-columns. Jun 2, 2016 at 12:06
  • I do not have many actions per cell. I have many actions per row. I wanted to reuse the multiple columns that I already have for free for assigning row actions to them. The primary column concern should be to represent a specific row object attribute. The action is another, unrelated concern. This would save worksheet space without sacrificing single-click ability. The editable should be only one or two of the columns. I agree that they better made editable. I just wanted to communicate this action to the user intuitively. Jun 2, 2016 at 12:11
  • By 'not clear' I mean the hidden/unexpected user action that I want somehow to explicate. Jun 2, 2016 at 12:25
  • @LittleAlien I have to admit that now I am confused about your requirements. Maybe if you make your question more concrete with an example of what you are trying to do?
    – user31143
    Jun 2, 2016 at 12:52
  • Despite you was wrong that I have multiple actions per cell, you was on the right track suggesting to display the action bar dynamically one mouse (h)over. Jul 16, 2016 at 13:07
-1

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.

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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