Is it OK to have a global navigation tab link to another site?

Question

My organisation, which provides information and advice, is starting to sell things online as well. The 'shop' will be run on a different platform and is effectively a different website (but will be branded to look like our main website).

Our current website's global navigation (horizontal tabs) is topic-based, eg 'Money advice', 'Health advice' etc. We want to add 'Shop' to the navigation. But if the user clicks it, they'll be taken to the retail site, which has different horizontal global navigation (eg 'Kitchenware', 'Gardening' etc).

I feel like this breaks the 'tab' design pattern - if you click a tab, you don't expect the rest to disappear.

But if we change the design of the shop enough, it should be clear the user has been taken to a different site - so will they still be confused?

A similar example is http://www.redcross.org.uk/

Answer 1

While you could probably get away with it, it is a bad idea.

If you're going to use a well know pattern like this, it raises an expectation about its behavior. This is why patterns are so powerful and useful: users will recognize them and immediately be able to build a mental model of the way your website works.

If you break this pattern, you break all understanding your user just built up about how to navigate your website. Instead of a site structured by a number of main subjects listed in the global navigation, who knows what the structure is if some of those items in the list are something entirely different?

If you have a lists of things you can click on, and each thing looks the same, clicking each of them should have the same effect (e.g. open a new page below the tabs).

It's ok to add a button to that list, and it makes sense in a lot of practical ways, but make sure it stands out.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

It is absolutely okay to chose that pattern. The only thing you should worry about is making the link different enough from the others that user will know that something else will happen once he/she clicks on it.

The easiest and least subtle way to do this would be to style the tab completely different from other tabs — for example like a link:

Or you could just move it a bit further from the other tabs (and maybe highlight it differently?):

Choices are endless — just remember, if the tab will be styled the same as the rest of the navigation, the user will expect it to behave like the other items in the navigation. And once he/she clicks on "Shop" he/she would probably get frustrated and irritated by your UI behaving differently from his/her expectations (changing the entire site instead of changing a section of current site).