3

Im building I table and I need an advice in which technique is the most recommended and why. I currently have an "edit" button at the end of each row , but I believe adding a link on the first column is the right approach.

  • It's not easily understood what you are asking for. Better if you could post some images and elaborate more about what you think and what you want to know. – divy3993 Jun 28 '16 at 9:48
  • What will happen when you click the Edit button (or link)? How many rows are you likely to have? – SteveD Jun 28 '16 at 11:51
  • There's only one edit action which takes you to the register's detail. And there might be around 1k rows. – Gustavo Reyes Jun 28 '16 at 17:23
3

You could use Googles Material Design as inspiration here. While you describe the component you're designing as a table, it also sounds similar to a list pattern. When designing lists, material design guidelines recommend placing the primary action on the left and secondary actions on the right.

https://material.google.com/components/lists.html#lists-content

Depending on how important the edit action is to your users, you could place it on the right as a pencil icon. I agree that, from a visual design perspective, a repeated button that says "Edit" in every row can be a bit overwhelming. Although, you have to be careful with labeling important actions just with icons and should test this approach with users.

I also think it depends how you style your hyperlinks. To me, underlining the first column of every row also clutters the visual design. You could make the text of the first column a different color, and, if this is a desktop application, consider adding a hover effect on the row.

If you go that route, I would also recommend making the entire row clickable, not just the edit hyperlink in the row, so that users have a larger target.

1

Typical number of rows is likely to be the decider.

For example, if you have a few rows, Edit buttons might look ok, but if you have many rows each with a Edit button then this might over dominate the visual design, so hyperlinks on column one would lead to a cleaner, less dominant visual design.

I personally prefer to use hyperlinks on the primary piece of data (which might not be in column 1) because it makes the visual design much cleaner, whilst still communicating that it has a purpose, i.e. its a trigger to launch some feature.

The only time I would typically prefer to use explicate buttons is if there are multiple different activities that can be triggered on each row, e.g. Edit, Print, Export, etc.

1

I believe that the number of columns in this table is the real decider.

Without an example table this is all conjecture, I would recommend adding an image so people understand what you are asking. However, that being said, lets' examine your table interaction.

Examination:

Based on your own words, "EDIT" is the main control. If we are dealing with simple key|value pairs: E.G.

|-----------------|-------------------|
|       KEY       |      VALUE        |
|-----------------|-------------------|

Then adding an edit button at the end of the table (whether icon or text link) probably makes sense. Users workflow would consist of three possible options:

  1. Edit KEY
  2. Edit VALUE
  3. Edit BOTH KEY & VALUE

So a single control to handle all three of these edit options will afford a simple solution while still following Fitt's Law.

However, if you are dealing with a more complicated data set in your tables:

E.G.

|----------|---------|---------|--------|---------|--------|
|  VAL1    |   VAL2  |   VAL3  |  VAL4  |   VAL5  |  VAL6  |
|----------|---------|---------|--------|---------|--------|

Then adding a single "edit" button adds confusion to the user based on the many possible permutations of edits they could be doing with this single row of data. Clicking on "edit" and making each value editable is opening this data up to user error and increased cognitive load. Also, looking at this from a broader context, the edit button could also be understood by the user as a way to reorder the rows inside the larger table. This is due to the buttons' position "outside" the context of the values in the table. Moving the edit button to the beginning wouldn't help these issues.

Recommendation:

First of all, you should do user studies to see what sorts of edits are common in your data. That will inform your decision better than anything anyone can say in this site.

That being said, if we are dealing with the latter data set (many columns), I would recommend making each cell editable via user interaction. This could be a small pencil icon, making the text selectable, or just making the entire cell a button and switching the user to an "edit" context. This way, the interaction and the edit are closely related in a physical context. You could even add a notification next to the edited cells, letting the user know that there has been a change that needs to be saved.

E.G. * denotes edited values

|----------|---------|---------|--------|---------|--------|
|  VAL7  * |   VAL8 *|   VAL3  |  VAL4  |   VAL5  |  VAL6  |
|----------|---------|---------|--------|---------|--------|

If you are dealing with the former data set, key|value pairs, I think following @JD_Jones recommendation of using the material lists is the way to go.

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.