For Context: So I am performing some user testing, and the interface is changing how tabs work with in the system. Currently tabs indicate the top level of different customer define hierarchies. The new interface is changing tabs to act like browser tabs, as in, the tab indicates the location you are at allowing you to leave tabs open and jump to different levels in the hierarchy or hierarchies.

Tabs with navigation below
Note: image above is cropped version of the wireframe

I expected the users to have some trouble initially as the entire mental model of tabs is switching from what they are today (top level locations only) to any location. What I didn't expect is that users seem confused what the + sign next to the tabs indicates. They have (3-5 users) indicated that they thought that it would show them additional tabs that are already open. In the tests, however, there has only been one tab open at the beginning of the test, which would seem counter-intuitive as there is a large amount of white space to the left of the tab.

The Question Is this a case of, in this case rely on the "strong designer" design model and stick with the plus (as the mental model is supposed to emulate how the user already uses their browser)

Or is my test really revealing that i need to replace the icon with something else. If so, whats your opinion on what icon screams "Add New Tab"enter image description here

  • 1
    Can you post an image of your setup for reference? – Virtuosi Media Jul 18 '11 at 22:19
  • 1
    Why even use a +? Browsers use a + to conserve space. You don't have to. Try something else, like "Add new tab here" – Rahul Jul 19 '11 at 9:38
  • 1
    Because, just like a browser, the user can open any number of tabs, the site needs to preserve the horizontal space as well. The customers setup can contain 1000's of locations within different hierarchies. Though individual users general do not have rights to all locations. – Chris Janssen Jul 19 '11 at 15:15

The add new tab concept has been around for a while, but apparently not long enough to filter through to all users. Tabbed browsing has only been available in IE since 2006.

All major browsers use the concept, with some small variations to the design you are using:

  • Firefox (same as the design)
  • Internet Explorer (no plus sign)
  • Opera (doesn't look like a tab)
  • Chrome (doesn't look like a tab)
  • Safari (placed on the far right, doesn't look like a tab)

My suggestion is that you stick with the "strong designer" model. It is a very learn-able concept and most users will be familiar with it within the next few years.

  • 1
    "Tabbed browsing has only been available in IE since 2006..." I wouldn't describe five years as "only". – gef05 Jul 19 '11 at 13:09
  • :) yes, true. It was a cheap shot at IE (Opera had it since 2000) – Jaco Briers Jul 20 '11 at 6:07
  • I consider Opera as the pioneers of web browsers UX, firefox learned much from them. – Motaz Al-Thaher Jul 24 '11 at 19:16

Below is an example that I have found to work well - the new button doesn't look like a tab - it looks like it's waiting in the wings waiting to be clicked and made into a tab at which point this placeholder shifts right as the new tab is inserted.

Chrome has a similar approach in that theirs looks like it's almost a tab but not quite, but they just use + and no wording. Opera used to have the word 'New' and placed their icon to the left but that just hints to me that the new page will be inserted at left...funnily enough now they have done the same as Chrome but using a squarer semi transparent little tab shape with a +.

I think in your context a simple word 'New' with an icon - like the example below, and don't make it look like a tab already, then this will help a lot.

enter image description here

  • 1
    Icon + word = the best of both worlds. +1 – gef05 Jul 19 '11 at 13:11

To reduse the confusion about the [+] icon:

  • Add the text "New tab" next to the [+] icon.
  • Let it look slightly different (eg. another bg.color).

To meet the users expectation of "more tabs":

  • Add yet another tab (or something more appropriate) that shows a complete list of all open tabs in a dropdown menu.

How about this?

enter image description here

or maybe even this?

enter image description here

Here it's usually semi-transparent, and becomes opaque on mouseover.


If "+" doesn't work, perhaps "+1" does? I know this is a convention for "agreed", but these users don't seem too knowledgeable about them. "+1" could also be reduced to "+". "Oh look! We reduced the clutter!" :)


A Tab with "+" is a misleading metapher. A better solution: add a button with a "+"-icon or combine the button with "+"-icon and text "New tab".


Also consider the shortcut related to this ui pattern (cmd+t) A lot of people will know the ui pattern but only use the shortcut.

  • The issue with this is that it would override the browsers shortcut of cmd+t, which has a user expectation to create a new browser window not a new navigation tab within the web app. – Chris Janssen Jan 23 '17 at 18:56

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.