5

On my website, there is a top-menu feature that I would like that a new visitor sees and understands immediately. Maybe only 10% of the visitors will use it (that's why it doesn't deserve a bigger space than top menu), but I want to be sure that these 10% understand this feature immediately.

I'm looking for ideas about :

  • how to emphasize the presence of this option

  • how to prevent recurrent visitors to be annoyed by this message (maybe using cookies to detect if new/recurrent visitor?)

(Poor quality) example :

enter image description here

Note: this is not a meta question, I just used the site ux.SE as an example.

3

The answer is right next to where you pointed in the screenshot. The yellow button.

You want to emphasize a menu item because it is something different or new, you can let it stand out by adding a color or border around it, giving it some sort of a ghost-button feel while it's still "just" part of your topmenu.

It won't be annoying either, because it won't be in anybody's way. It will just be a menu item which get's a little more attention than the rest. You can find this in a lot of websites nowadays, normally these types of items are somewhat different from the regular menu items, which is why it is emphasized more, exactly like what you're trying to achieve.

  • I agree with MJB, just make it a different color button and it automatically stand out of the rest. – Fasih Apr 29 '16 at 12:25
  • Interesting! In fact, I already have it in a different (flashy) color, but I would like to display some sort of tooltip to incite people to use this feature. – Basj Apr 29 '16 at 12:56
  • 1
    @Basj What you could look into is that kind of indications that Facebook, LinkedIn or even this website use. As if there is a notification, a red circle with a "1" or maybe an exclamation mark in it. – MJB Apr 29 '16 at 13:40
  • @Basj Just google for "facebook notification" or linkedin or youtube or what ever website you prefer :) – MJB Apr 29 '16 at 14:33
  • oh you speak about notification... I meant something a little different in design, i.e. the user should know it's not a notification but something like a newbie help – Basj Apr 29 '16 at 14:38
3
+25

You are talking about an on-boarding feature. An on-boarding feature is a thing which introduces new users to your system by putting a spotlight on one or more features. the spotlight can include some additional info via a speech bubble, etc.

However, after the user has used that feature you no longer show the spotlight.

This technique is also useful for introducing a brand new feature to existing users.

BTW This technique actually comes from the gaming industry because many computer games use this technique.

Here is an example from Linked in illustrating a speech bubble for onboarding:

Here is an example from Linked in

  • Thanks a lot for pointing me to the right term, I didn't think about this name... Two things : 1) I've found a lot of screenshots on Google Images with the keyword 'on-boarding website', but would you have some screenshots to share in your answer, that you personnally like / prefer / would recommand in terms of user interface / design? 2) Do you think storing a tuple (IP, UserAgent) on each visit is enough to test if a user is a new user ever, or returning user? – Basj May 4 '16 at 14:17
  • I added an example. How you identify new user will depend on your solution. If you have signed up people it is easier. If you don't then a tuple will be ok - you only need to uniquely identify someone. They key thing is that user does not want to see it every time they visit, so you might spotlight different feature the first few times they visit, but after that you never show them again. – SteveD May 4 '16 at 14:49
  • I've seen onboarding processes' that were essentially web site tours and can go over as many as 5 or 6 of the most important areas/functions of the site - they usually have a way to exit out of the "tour" for those visitor that prefer to explore and figure it out themselves. I may be in the minority on this next idea but I actually like it if I can relaunch the tour at a later date should I forget where something is or how it works - but yes generally I only need to have the onboarding process presented to me once and I'm a happy camper. – Steve Crow May 7 '16 at 0:32
  • Most of the "tours" I've seen were animated screens, probably using something like HTML 5, CSS and Javascript but I wonder if a video-based presentation might also be effective so long as they are short and have an easy out. – Steve Crow May 7 '16 at 0:32
  • I personally hate on-boarding features that go in my way when I want to first use an app/site and then I have no idea how to enable it again when I have more time to explore more features. – Aprillion May 7 '16 at 8:59
0

I'd recommend using onboarding techniques and some simple animation to show this element and its importance. A good example is the Floating Action Button (FAB) :: Transitions part of Material Design, specially the Morph and Full Screen sub-items. You'll see how the FAB morphs into another element.

enter image description here

(visit the page for a more clear video, this is a quick animation I did to show start and finish, but nowhere close to the real thing)

You could do the same with your nav: start with a clear call to action centered in your page, maybe the only visible element, explain what is is about, and when clicked, morph it to the element as expected, explaining the user the element will always be there. This way, by using a playful and easy to understand concept, it will be very easy for your user to remember about that element.

In psychology, this is known as memory imprinting or memory flash, a way to reinforce brain paths by using strong visual events, and transitions have been proven to play a big part on the recognition of the different states of an element, hence why it's used massively in UX, specially onboarding and user learning

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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