2

On the image below, the title 'Admin access' is a link that allows you to view the user role. At the same time, under the 'actions' section there is also a button (eye icon) that does the same thing. That is redundant but I don't know which option I should go for:

  1. Remove the link from the 'Admin Access' title name and just have the button on the Actions

  2. Keep the link and remove the 'eye' button to view it

enter image description here

3 Answers 3

6

By removing the icon, you can separate viewing from modifying a record. You also reduce ambiguity from icon interpretation.

Since a common use of a list is to access a record and view its details, you could keep the actions as 'actions' which you have as specifically editing and deleting a record.

Try to remove ambiguity

If it's obvious that you can select and drilldown on the row, there's no need for a view icon, and in light of the fact that icons alone can be ambiguous, the less of them (without labels) the better.

(As a side note: The 'eye' icon is often meant for 'show/hide' in many contexts, which you definitely did not intend.)

Make selection easier

I don't know your use case, but if the most basic and non-destructive action is viewing details, make it easy to select a record, you can do this by signifying on hover that it can be selected, and you have an opportunity to increase the hit area.

enter image description here

See Fitt's Law re: selection

The aim of user interface design should be to reduce the distance from one point to the next and make the target object large enough to enable prompt detection and selection of interactive elements without sacrificing accuracy.

For validation, you can test with your users.

1
  • thank you for the thorough answer, makes sense Jun 6, 2019 at 8:17
1

For having two links to view, I don't think there is an issue. The "name" being a link is helpful and non-obtrusive.

Having edit and delete exposed might suggest having the view link as well to reduce confusion that those would be the only two options. (I would push harder for this if your <tr> has a hover state which could reduce the focus on the linked "name").

Plus I would argue that grouped icons typically create an ecosystem themselves and should be complete in offered functionality. There are often arguments that lists are dangerous because users often take them literally. If nothing is shown it may all exist, if two items are shown we must either accept that is the complete list or wonder if there is more.

Example 01: If I always knew all three buttons were on the right, I think eventually my mouse would start to hang there. That quickly might become a smoother UI.

Example 02: If all I ever do is view this content, is it easier to click on the bigger "name" link? If so, maybe the edit and delete buttons should just reside on the node. I'm never on that side of the page...

I think the biggest caveat is the distance from the title to the view/edit/delete links. It takes a little aim visually to line up the "name" to link. So ensure your <tr> hover effect takes place even when hovering on elements inside the <tr>.

1
  • You've raised a lot of interesting considerations which I guess only a heat test and usability tests would answer, useful though thanks Jun 6, 2019 at 13:48
0

I'd go for Option 2 - remove the "eye" icon and leave the link in the record name. The "eye" icon is ambiguous: it's used as a Show icon (to reveal obfuscated info like passwords, reveal hidden objects) and sometimes as a View icon. "View" isn't a CRUD action unlike Edit and Delete, so why load up the actions column? It's typical for the row entry name to click into the details and if the name is presented in the same visual treatment as links (color, font weight and style), it would be clear to the user that it can be clicked.

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.