6

we are redesigning our webbased software product. All main tabs (called: modules) have the same layout: In the upperleft of each they have a breadcrumb and the page title.

Most modules have a second navigation level, represented by a second horizontal tabbar as shown in wireframe A

Our configuration Module also has two levels, but here the second level has just too many pages for a horizontal tabbar.

Vertical tabs could be a very good sollution. See wireframe B.

However, the vertical tabs make the title and breadcrumb shift to he right. that doesn't feel too consistent to me! Because of this, I prefer to place the vertical tabs on the right of the page. Wireframe C

Is placement of vertical tabs on the right side wrong or 'not done'? Does anyone have some insights about this?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

kastark
  • 6,478
  • 1
  • 34
  • 59
Maarten
  • 127
  • 1
  • 5

3 Answers3

5

In an application we have developed, we have the same issue. The approach we have used is Wireframe B. Overall it is quite convenient, and from what we gather from feedback, users have no problems understanding it.

The major problem that we have is that sometimes we do not have "enough" horizontal spacing to hold the forms, since we still target 1024 screen resolutions. So this is something that you should keep in mind as well.

I would suggest Wireframe B however, since I personally think it is more familiar to most end users. Whereas, Wireframe C, with the tabs on the right is not that common, so many users might not get it at first.

Nikos Steiakakis
  • 151
  • 3
  • Horizontal space will be the next challenge for sure. and by the way± vertical (direclty followed by vertical space of course...) – Maarten Dec 03 '12 at 11:53
  • Well the vertical spacing won't be a problem probably, since users are used to scrolling up and down in browsers. Whereas horizontal scrolling is more of a nuisance. – Nikos Steiakakis Dec 03 '12 at 12:16
1

I have always used B with good success. I wouldn't worry about the breadcrumbs moving; they're in a relatively similar spot (top left, above the page title) and it's not as if someone won't see them because they moved 200 pixels right. Placing the nav on the right risks people not seeing it and I might even argue that it doesn't properly set the hierarchy of nav & content.

thehilker
  • 69
  • 2
  • it's not as if someone won't see them because they moved 200 pixels right Ok, that one puts it into perspective for me! thanks! – Maarten Dec 03 '12 at 11:48
0

I use Microsoft One Note which use your B sample it seems natural. Have a look.

Microsoft One Note 2013

Benny Skogberg
  • 54,996
  • 22
  • 140
  • 241
pierre lebailly
  • 316
  • 1
  • 5
  • That's nice, but is there any proof of that this is a convention in other applications than Microsoft apps? I like your answer, but I think you need to elaborate a little on the topic and possibly add an image and a reference too?! – Benny Skogberg Nov 30 '12 at 06:55
  • Isn't that actually the "C" wireframe, with tabs on the right? – Yamikuronue Nov 30 '12 at 19:34
  • I've had a look at Microsoft OneNote. It's funny to see they combine A, B and C. The only thing missing are bottomtabs. They are getting close to the ´surounding Tab Design Pattern!´ The images you've uploaded however only shows A and C. – Maarten Dec 03 '12 at 11:43