Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 4 down vote favorite

I am trying to create a navigation menu with 2 functions in it... the website 'page' navigation links and 'action' buttons... sort of like this image http://skitch.com/christieday/gg2sr/dribbble-hunter-vision-nav-by-jeremiah-shaw

the navigation would have links to the appropriate pages as well as 2 buttons, 'log activity' and 'create route'.

The buttons of course behave differently than the navigation. They are primary calls to action on the site. The 'log' button opens a form on the same page, the 'create route' button leaves the page.

Im wondering if there is a way to combine links and buttons without confusing the user, and if there is an appropriate way to go about it.

Please advise.

share|improve this question
1  
Christie, I am not quite sure what your question exactly is, because from both your description and screenshot, it seems you are doing everything exactly right. Main navigation links are text and the major calls to action are buttons - there is nothing not to like about this model, so perhaps I am just not following your question. Could you add some additional details about what you want answered? – Nadine Schaeffer Nov 8 '11 at 4:05

3 Answers

up vote 1 down vote accepted

You've really answered your own question. They way to distinguish between them is to use text for navigation and buttons for calls to action. Many sites do that (including this one) and I've never seen anyone get them confused.

If you're worried about people not being sure that the text is navigation, just use a small marker or arrow to show the current page. It's not necessary, but it does improve discoverability.

enter image description here

Just make sure that you don't mark the current page in the navigation by putting a block around it - this will make it look more like a button. You just have to be aware of not putting anything on the navigation which looks similar to a button but isn't one. The navigation below is an example of what not to use if you have a call to action button in your navigation. It's a good navigation bar if it is used without call to actions.

enter image description here

share|improve this answer
Thats a great point I didnt think of... I can see the importance of highlighting the current page in the navigation without a container, to not confuse the user between a button and a 'selected page' on the nav. Great observation. – Christie Day Nov 8 '11 at 13:37
up vote 0 down vote

Usually you'd have some kind of legend, at least as to how you're designing, that suggests button visual treatment means something different than text links. For example, while they're not mixed together form buttons usually indicate an action while text links indicate navigation.

Why would you mix them visually? Even if you feel they belong on the same horizontal or vertical plane in the UI, wouldn't you still separate them? Text links all aligned right and then the buttons aligned left ... Going way back, a rule of thumb I learned a long time ago, which I still feel is warranted, is that you keep navigation and control separate.

share|improve this answer
Well i sort of feel the same way about keeping them separate. However, its for a web app and the controls are just as important, or more important than the pages. The goal is to have the button controls visible on every page in the same spot. It feels sac religious to do but I see it more and more each day. Ive never seen it done with 2 buttons though – Christie Day Nov 8 '11 at 13:35
up vote 0 down vote

Christie, you're already on the right track but if you want to see another example of a global header containing 2 action buttons take a look at the English National Opera site.

enter image description here

share|improve this answer
Thanks! yes, I am looking for successful examples of these... this is great – Christie Day Nov 8 '11 at 16:34
This is weird because the links captions feel more like actions than actual links. And they are dropdowns. – Rahman Kalfane Nov 8 '11 at 18:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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