7

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

Improve this question
3
  • 1
    Can you post an image of your setup for reference?
    – Virtuosi Media
    Commented Jul 18, 2011 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
    Commented Jul 19, 2011 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
    Commented Jul 19, 2011 at 15:15

7 Answers 7

Reset to default
6

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.

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

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

Improve this answer
1
  • 1
    Icon + word = the best of both worlds. +1
    – gef05
    Commented Jul 19, 2011 at 13:11
2

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.
Improve this answer
1

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.

Improve this answer
0

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!" :)

Improve this answer
0

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".

Improve this answer
0

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.

Improve this answer
1
  • 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
    Commented Jan 23, 2017 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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