1

This question already has an answer here:

The proposed duplicate is symbol plus label. This is button versus symbol which is similar. I was hoping for advice on how to get users to realize the symbols are clickable. Putting a label next to the symbol is not going to help the user realize it is clickable. The question is not how to get them to recognize the symbol but to realize they are clickable. In WPF users are used to clicking buttons (not text or symbols)

This is for a document management application
This is a thick client (WPF) not a browser application
But it will have a sister browser application
In demo we get comments the screen looks busy
The button line and image / icon lines are two options (will go with only one of those options)
Search, browse history back, browse history forward, snapshot
I like the image / icon
Will users figure out they are clickable?
What can I do to help the user figure out they are clickable?

enter image description here

This is the top left of here. There are 6 click symbol/icon.
What make a user know the symbols are clickable?
enter image description here

Sorry if I wrote poor question but duplicates and answers are not addressing my question.
What can I do to help the user figure out the symbols clickable?
This may be a better perspective. There a 6 clickable symbols on this page.
How do I get users to recognize the symbols are clickable (even if they don't know what it means)?

From the aswer from Devin I am trying to represent the context of navigation bar.
This is were I am currently:
enter image description here
I am not UX trained but I don't like the label. I think it is too much noise/clutter. It makes identification harder. It is not sexy. They can learn the function of a button in a mouse over and will quickly memorize.

marked as duplicate by Mayo, Evil Closet Monkey, Devin, SteveD, JohnGB Oct 11 '16 at 10:51

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 2
    Nielsen/Norman are clear about your first question: Icons need labels. – Ken Mohnkern Oct 7 '16 at 11:38
  • @ken Magnify glass is an example of a universal icon in that article. Good article. Thanks. – paparazzo Oct 7 '16 at 11:51
  • I don't want to edit and bring it to the top of queue. There are 10 clickable symbols. – paparazzo Oct 7 '16 at 18:26
3

I assume you have created few personas before jumping onto the design. These are a couple of recommendations.

  1. It is always better to use with labels when you don't have page real estate issue.
  2. For canonic icons / images, the labels can be skipped, but you can have the title displayed upon hover over. Providing visual affordance and clues help the users to click on icons (images).
  • I'd suggest that it's always better to use labels with your icons, period. Make the space for them. And it's good to remember that fewer icons are canonical than you expect. – Ken Mohnkern Oct 7 '16 at 11:40
1

You won't be wrong either way. Minimally sufficient navigation which does the job is the best way forward.

If you have standard icons which are well understood, you can skip labels. But I see an icon for "Snap" and camera is used. I can interpret it differently than others as this is not universally accepted. For icons like these, try considering labels.

1

In order to communicate the "clickability" of an element, you need to think about affordances and context.

For example, let's take the UX.SE example. If you see an icon which is commonly associated with stats, and you see it in a toolbar or navigation bar, or any kind of nav control's group or container, you'll expect that the element has associated actions such as click (affordance) because it's located in such container (context). Additional reinforcements such as hover states help users to understand the affordance

However, if I place the same element inside the content, without any additional label or instruction about the element's behavior, users might be looking to an illustration, because they lost both context and affordance.

In short

if you're using icons on a control group or container, affordance is provided by context and behaviors are implicit

  • I am not a UX person and don't understand most of those terms but I will look them up and try and understand. I was actually hoping for how to just make those symbols look clickable. – paparazzo Oct 7 '16 at 18:38
  • ok, added links to most terms. But as I said: simply place the icons inside a navigation control and you'll be set – Devin Oct 7 '16 at 18:44
  • OK I am following more (I think). If you gave them the save background might that be sufficient context? – paparazzo Oct 7 '16 at 22:28

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