5

I am designing a system of products, where the home page is presented a list of products with various filter options, and such filters selected through various buttons.

I would like to emphasize and differentiate these buttons using unique icons for each button.

The question is: is advisable / feasible to use icons to emphasize an action that the client can perform?

Matheus
  • 185
  • 6
  • Is the meaning of the icons obvious? Will they be combined with text? – SteveD May 13 '16 at 14:19
  • @Splatz Yes, icon and text. – Matheus May 13 '16 at 14:20
  • 1
    Unless all the options can have meaningful icons then you may be making far more work for yourself here. It's easy to have an intuitive icon for 'Date' for instance, but when you have more and more requirements needing adding and you're trying to represent 'Tax Group' as an icon you'd end up with 80% useless icons and 20% standard, and as a result people would just start ignoring them altogether. – JonW May 13 '16 at 14:22
  • So text ensures no ambiguity, so the question is: What are the values you are trying to prescribe to the icon? – SteveD May 13 '16 at 14:25
  • @Splatz Example: I have type category buttons with the values: action, adventure, sports. According to the text, the user already differs another button, but the idea is to use icons to highlight such buttons. Should I or not? – Matheus May 13 '16 at 14:34
  • So you will have an icon to represent each of those categories - got it. – SteveD May 13 '16 at 14:37

3 Answers3

5

There is a quote that says : "The best icon is a text label". However the icon on a button along with text provide a nice example, it enhance the beauty and better user experience.
But too many icons can create a mess.Icons are more effective when it improve visual interest and grab the user's attention.

Supriya Gusain
  • 301
  • 1
  • 5
  • 1
    Don Norman also says any design that requires a manual - even if it's just one word - is bad design. - Not voting you down just making sure there's a balanced view point. – Roux Martin May 13 '16 at 15:29
1

Combining icons and text will take the load of the cognitive process. The user will recall the action behind the icon faster and will choose faster the filter he is looking for.

The number of filters (text and icon) should be considered. If there is a lot of filters probably it would be a good idea to remove the text (so that you won't cluster the screen and make it hard to read) and add a tooltip on roll over. This will ensure that the user will get a direct feedback on what the icon represents without making it hard to read and navigate.

Loro
  • 591
  • 3
  • 18
  • 2
    Combining text and icons increases cognitive load as the reader has to process the two things and then verify if they are connected. However, as has already been said in the question comments, the extra load here could be preferable to the greater load experienced when the reader has to figure out an obscure icon representing something like 'Tax Group'. – Roux Martin May 13 '16 at 15:33
1

Why not implement the icons with accurate alt text? I'm assuming these are just navigation icons to get to the various areas you have. If they're actionable buttons that are assisting users with accomplishing some task, I'd say to avoid icons and just use text so there is nothing lost in translation.

JWilkerson
  • 21
  • 1