Tabs for content breadth/depth?

9 Jun 2009 - 10:55am
5 years ago
9 replies
382 reads
Lorenzo Chavez
2009

hey Jennifer,

danger will robinson, danger ... LOL, I have worked for several companies that have adopted "tabs" Initially they were simple enough, managing a small amount of data, but often what happens is that other groups within a company get ahold of this paradigm and use it for everything.

I have seen companies try to use tabs in a purchase flow. Tabs should have limited usage. Limited to displaying small amounts of data that a user can toggle between. They should never be used if there is a larger process involved like purchasing a product. Most people don't understand that if you have an open flow, you need to account for saving of data, and maintaining the state, error messaging, etc. of a process while the user is off tabbing into other data. I don't mean to rant, but have had my share of headaches dealing with issues associated with tabs. Its important to have a very specific usage for tabs making sure that all stakeholders understand how problematic they can be if used incorrectly.

From a very basic heuristic standpoint, the user can lose focus, get lost in the site, or be unable to recover from a process if tabs are used with too much data or within a process that should be closed.

Hope this helps,
Lorenzo

Comments

9 Jun 2009 - 11:28am
susukoch
2009

If the contents on the different tabs are completely independent from
each other - in other words: if each tab could also work as an
independent entity - that´s the only scenario when tab-structures
work in my opinion.

The design has to reflect the levels and the website needs a clear
highlighting. And the number of tabs has to be limited ... five
starts to look like quite a lot - depends on the wording.

And - YES - clients love tabs, because their internal organisational
structure may be transported to the website and most clients
automatically believe that they may use millions of tabs - like the
hateful windows system menus that use even rows of tabs - arrghh!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

9 Jun 2009 - 2:07pm
Anonymous

Thanks, guys :) I agree with the fear of losing sight of when/how to
use tabs when a client may be like, "hey, that is a GREAT solution
to what I want!" instead of thinking, "hmm, maybe I want too
much?"

I'm looking to produce some variations in the wireframes: tabs, no
tabs, just to cover my bases.

I had a couple of direct responses not shown here, each supporting
the use of tabs as a newish pattern. In one response, I like how he
likened tabs to the use of 'drawers' when trying to organize a
tangible environment, e.g., one's office. That is, when papers and
content are floating all about the room, wouldn't we want a way to
group the items together for ease of access? I always like tangible
metaphors, though.

Again, thanks, and I welcome other thoughts on this as well :)

-Jennifer

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

9 Jun 2009 - 7:41pm
DampeS8N
2008

I'm working on a heavily tabbed system myself right now. Most of them
make sense. I'm trying to keep reducing the number and merging them
into the areas that they make sense to be in.

The first thing we did was break them up into several major groups,
like meta-apps, and styled them differently but consistently. Each
group has its own set of tabs, but it works because people who work
in one area rarely, if ever, venture outside of that area.

Next, we merged adding content, editing content, previews of content
and so on into a single tab. Again, a kind of small mode within the
larger app that is content management, that is in the larger suite
that is website management and strategy.

Don't be afraid to segment out your app. Websites are getting more
and more complicated with more and more goals they try to meet. They
are all trying to snatch a chance at the all-in-one webOS pie before
it is baked. Many will fail, because they cram it all into one space.
Filling their page with dropdowns and flyouts. Hiding things in a sea
of unwanted.

Tabs have the happy side effect of making it very obvious when you
are trying to cram in too much to one area. This is one of the
reasons they are becoming popular. They are easy for a designer to
point at and say "We can't fit anymore, sir."

But they don't work miracles. And they can be very confusing.
Especially when the items in the tabbed section do unexpected things.
One of the major reasons to lose a "Add Content" tab is that new
content wouldn't be accessible from that tab if the user clicked a
different tab and then clicked the add tab again. It would add a
whole new piece of content yet again.

However. Space willing, it might make sense to add a tab for an
'open' piece of content when a user adds a new content in the
content section. For easy access. Might. It didn't for us.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

9 Jun 2009 - 2:10pm
digikev
2009

I also write the HTML and CSS for tabs when they are decided upon in
an interface. Tabs, in order to look visually like tabs, need to be
rounded at the top corners. The tab label needs to be able to expand
depending on the font size selected by the end user. This would all
be fine if browsers were able to round off corners. Mozilla and
Webkit browsers use proprietory code to replicate what CSS3 will
allow in interface designs. Internet Explorer unfortunately does
not. As a result hacks have to be implemented to add images in the
right places to provide rounded corners on each tab. Maybe you would
like the button to be more responsive so a different colour is used
for the mouse hover state - that is more images. Perhaps a selected
state too? More images. This kind of development is costly.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

10 Jun 2009 - 5:25am
digikev
2009

Another thing to note is that the tabbed region will consist of the
menu with tab labels and the individual panes as separate entities.
In context the label on the tab menu works as a header for the pane.
Out of context, in the flow of the HTML document, each pane requires a
header. If the end user disables javascript the panes will stack on
top of one another. Without a header for each pane, the design
pattern will consist of a menu at the top of a number of unlabelled
panes. Ensuring each pane has a header label eliminates this problem.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

10 Jun 2009 - 6:32am
Marty DeAngelo
2007

I would disagree that tabs must have rounded corners to be
recognizable as 'tabs'. Not only are there numerous other methods for
creating a tab metaphor (notched corners, color labels along the top
or side borders, etc.) but many sites use rectangular borders with
effective results. It's harder perhaps but not too difficult. And
while the different browsers' implementations of CSS3 rounded corners
is imperfect, it WILL make the process easier once fully implemented.

I do want to complement DigiKev for including the part about making
sure these tab structures degrade gracefully (or are progressively
enhanced). Making sure this solution doesn't fall into chaos if
javascript is disabled is a key aspect.

Marty DeAngelo
Director, UX
Digitas Health

On Tuesday, June 9, 2009, DigiKev <kevin at digikev.co.uk> wrote:
> I also write the HTML and CSS for tabs when they are decided upon in
> an interface.  Tabs, in order to look visually like tabs, need to be
> rounded at the top corners.  The tab label needs to be able to expand
> depending on the font size selected by the end user.  This would all
> be fine if browsers were able to round off corners.  Mozilla and
> Webkit browsers use proprietory code to replicate what CSS3 will
> allow in interface designs.  Internet Explorer unfortunately does
> not.  As a result hacks have to be implemented to add images in the
> right places to provide rounded corners on each tab.  Maybe you would
> like the button to be more responsive so a different colour is used
> for the mouse hover state - that is more images.  Perhaps a selected
> state too? More images.  This kind of development is costly.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=42699
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

10 Jun 2009 - 7:28am
digikev
2009

Yes I agree I worded the need for rounded corners too strongly before.
I do find that rounded corners are requested both by my head of
digital and clients frequently. You can get away with other tab
metaphors or straight edges but take on board that rounded corners
may be requested. I was lucky in a recent implementation [Newcastle
under Lyme College tab example] that progressive enhancement was
accepted. Take a look at the example in both IE and FireFox/Safari
browsers. IE degrades to straight edges whereas the CSS3 proprietary
coded browsers round off. I feel with the spacing between tabs and
the colouration used this was a successful implementation.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

10 Jun 2009 - 7:29am
digikev
2009

Sorry, I thought a little HTML would be allowed, here is the link to
the example http://www.nulc.ac.uk/pages/school_leavers/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

10 Jun 2009 - 1:26pm
Anonymous

Thanks DigiKev for the reminder of how semantic markup will aide in
graceful degradation in this case. I too am - or was, until my recent
position - the person who not only designed, but also built the
interfaces (HTML/CSS presentation). I'm struggling to get that sort
of thing done here as our website is nearly 100% built in a CMS,
which requires us to use modules that had been developed long before
I arrived.

And, I would agree with Marty that rounded corners are not necessary
from an intuitive as well as design standpoint. Sounds like you agree
as well, but have been - like me - regularly requested to incorporate
such design treatment. I think tab design should blend well with the
design perspective of the site, which means that it could be nearly
anything. :)

Something I just realized yesterday while I was wireframing a version
using tabs is that tabs seem great if there is enough content to fill
the space. However, some of my content is quite limited and it feels
like I'd be forcing the tab pattern onto something that really
doesn't warrant it in the first place.

-Jennifer

-Jennifer

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=42699

Syndicate content Get the feed