4

I'm wondering what's the UX point of view of using only icons or a list with text + icons.

Only icons

enter image description here

List with icons

enter image description here

The only icons options provides a faster way to access to the action, as you don't have to click on the arrow to open the menu.

On the other hand, I think the list provides a more clear view of the different actions to do as you can see the text of all of them. The icons only view would only show the text for the hovered icon.

5 Answers 5

9

I'd suggest to go with the option with the labels, because with icons alone it isn't clear what they do in most situations.

http://uxmyths.com/post/715009009/myth-icons-enhance-usability

In your example you also have 2 icons which do 4 different things. It would be much clearer if you used other icons for showing the comments and allocate a truck.

I may be incorrect, but it seems that you're using twitter bootstrap, so you could already use the "glyphicon glyphicon-comment" icon for the comments.

I've also found a truck icon on font-awesome. This webfont is compatible with twitter bootstrap. You have to google this, because I can't post more than 2 links.

As a user as long as it is clear where to click it isn't bad if you have one click more.

http://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3-clicks

With the arrow for the action list you have the same problem. You should maybe add a label with the text "Actions" so it is clear what hides behind the button.

1
5

The most important thing to bear in mind with icons is that icons only work when they don't need explaining

In the first example you give, the meaning behind the icons is not immediately clear. The user is unlikely to understand what the icons mean (especially as the same icon is used for different actions). In the second example it is immediately clear to the user what the actions are.

Also remember, the annoyance of accidentally clicking on the wrong icon (because the user didn't know what it means) would be much more annoying than having to click a drop down.

Hope this helps!

2
  • I disagree with your bolded statement; I would say "icons work when the user knows what they mean". This can occur either because they don't need explaining or because the user has learnt what they mean. Commented Sep 7, 2015 at 17:45
  • Hi Jack, I don't think you're disagreeing. "Icons only work when they don't need explaining" = "Icons work when the user knows what they mean" Commented Sep 8, 2015 at 9:27
0

I'd say if your icons can fit on the available space, use icons and only use list if you have more actions that do not fit in the available space, your icons should be familiar enough for users to know what they are intended for, if you need labels for your users to know what your icons are for you have a different issue in your hands.

0

It depends on who is intended to use it and how

I'm going to assume the replicated icons are down to this being a quick knock-up rather than the intended design. If you really intend to duplicate the same icon, or even have two very similar icons, then use the dropdown.

The first design, with the icons, is faster to navigate than the second, with the dropdown list (since it requires one click vs. two) but this mildly quicker interface comes at the cost of being less clear and slower for unfamiliar users. It's thus up to you to decide, or figure out, whether this is likely to be a commonly used task for a group of users who will become familiar with the UI or a task which is either uncommon or carried out by unfamiliar users.

Also, if you opt for the icons give them hover text so that unfamiliar users can find out what they do without clicking.

0

I'd say it depends on how often you'd typically use those commands. If you don't use them a lot, then it makes sense to put them in a menu that has to be triggered first. They won't clutter the view and if you need them, you can clearly read what they do.

If you use them a lot, it makes sense to have them readily available. People will also quickly learn what they mean, if they use them a lot. If this is HTML based, I'd also make use of the title attribute to have the tooltip appear with a short explanation. Only works on hover, I know, but better than nothing (screen-readers might make use of it, too).

Your Answer

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

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