1

I'm creating a table and I'm confused about the best order of table cells.

Right now I have the following table, based on the things the user probably wants to see first (Person, its properties, and a link with copy button to send to the person). Information like a linked contact person and last changes I placed more on the right because they're less important.

enter image description here

However, since the 'properties', 'client link' and 'option 1' columns all contain actions (download link, button and checkbox), would it be better to place them on the right side?

Should I order cells based on the most important information first, or keep the guideline 'actions on the right'?

In my example 'client link' and 'option 1' are fairly more important than for instance 'contact person nr'.. Thanks in advance.

  • Why aren't all fields editable? Or why some fields are and some not? – Alvaro Nov 21 '16 at 9:43
  • Because the static data in this table will be imported from another (extended) client database. The tool we're building has another function and therefore we needed to add actions to the table. – Luchadora Nov 21 '16 at 9:48
1

It is hard to say without the context, but in my opinion it might be better leaving the columns ordered by importance (most important on the left).

Right now you are making a difference of "columns with actions" and "columns without actions" but that is just a matter of how you want the user to use the Table. For instance all the fields might have an action, for example you could put a "copy button" in the "Contact person Nr.". Or if in some future you want to assign an action to a column, should you reposition it (if they were ordered by action)?

In Material Design tables it seems like they order the columns per importance.

table

And leaves an action button in the very right, and an action input in the very left.

enter image description here

0

I would try to condense all actions into a right hand column headed as "Actions" as a series of easily identifiable icons, each with a tooltip for when they hover over them. If you going mobile as well, I would also implement an icon key, to tell them what each means/represents to get the image across.

(Icons also help to save a lot of precious screen real estate, which can help a lot in making your site mobile friendly)

This may work for anything BUT the link copy. If you don't think that the end user needs to be able to read the link, especially it'll they all look like your example, then you could add a clipboard icon to the right Actions column for them and tell them what it does in the key.

Example Clipboard Copy Icon (source: http://www.iconarchive.com/show/mono-general-2-icons-by-custom-icon-design/copy-icon.html)

For the properties link, you could use a detailed list icon like so: Example Properties Icon (source: http://www.freeiconspng.com/free-images/details-icon-1413)

(A gear Icon may be better if you prefer)

I can't give a good example Icon for "option 1" though, the icon itself would depend entirely on what that option is, and if it's is an action that can be done to multiple list items in a list-wide fashion.

Hope this helps you in any way! Best of luck!

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.