2

The header on a website I've been working on has a few links that have sub-links underneath them. So for example, when you hover over Link 1, a sub navigation menu will appear that shows you Link1-1 and Link 1-2.

However, some stakeholders want to include text bubble call outs to drive users to click on Link 4 whenever there's something interesting going on in that link.

Call to Actions on Nav Links

I'm extremely against the idea of using the text bubble, but was wondering if there were any other ideas on achieving the same goal of driving users to Link 4.

1
  • Ugh. Is Link 4 interesting to users or just to the stakeholders? Jan 23, 2016 at 16:57

3 Answers 3

1

There are several reasons to not add a tooltip that says 'Click...':

  1. It adds no reason for the user to take an action. It provides no context. They can click anywhere on the screen at any time. Why should the be interested in clicking that particular link? What is special about it?
  2. It's non-standard approach for prompting a user to take an action on a navigation.
  3. It doesn't scale. What happens when every link in the nav has a call to action?
  4. It blocks other important information on the page, specifically the sub nav.
  5. It feels like a popup add which can illicit a negative response.

Here are some alternatives:

  • Add a badge to the nav item when something changes about the contents on that page.
  • Keep the call-to-action entirely separate from the nav item. Examples are a flash message and a notifications menu notifications menu
1
  • 1
    Thanks Patrick! I agree heavily on your points, and we've run into similar issues on point #3. A badge is what we've done a few times, but has a problem of not having enough context for what is so special about Link. (ie; if it says "NEW", stakeholders want something that says "new customers get x and y!") I think the separate bar CTA is a great idea! Thanks! Jan 26, 2016 at 0:20
0

I think a red (or another strong color) circle before or after the link label would be sufficient to draw attention, but since the stakeholders thought of text bubbles, they might want something more appealing to the user.

In this case, I'd use a corner ribbon with a strong color and contrast between the background and the text color, or animate the button with a pulsating different background-color.

If the stakeholders still want the bubble, you can transform the bubble in a tooltip, put the pulsating background-color animation or the colored circle on Link 4 and when the user hovers it, the tooltip would appear with the info (like "New content!" "Click here!").

3
  • The little red notification icon does draw attention to nav elements on a page, but when I click one I expect to see the new items flagged in the same way on the sub-page. It's like when you click the link that says "Inbox (10)" in your mail app. You expect to see the new things clearly marked, and you expect the little "(10)" to disappear once those things aren't new anymore. Jan 23, 2016 at 17:00
  • I agree, I thought of that idea thinking of a new content call on the link, in this case, i think the last paragraph I wrote would be the better alternative
    – Bruno Vaz
    Jan 23, 2016 at 17:33
  • Yes, Bruno. It depends on what that "new content" is. The red dot is perfect if it's temporary notifications, otherwise, I think the red dot has to be avoided. Jan 23, 2016 at 19:39
0

The call to action doesn't have to be directly under the link. Consider another option, to include a banner on top of the menu that links to the same page as link 4. Doesn't block the sub navi links.

enter image description here

1
  • That seems like a great idea! I'll see if it works for the current design of the product. Jan 26, 2016 at 0:21

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.