Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Apple Moving Away From Traditional Tabs?

25 Jun 2003 by

Screenshots ( 1 | 2) from OS X 10.3/Panther reveal that Apple appears to be moving away from traditional tabs and replacing them with centered buttons instead. Interesting move — especially considering that tabs are pretty familiar UI controls these days (including Apple.com’s nav). Thoughts anyone?

And, is mesh the new transparency (which was the new black)? Get ready for a new design trend.

52 comments so far (Post a Comment)

25 Jun 2003 | tuddle said...

I don't know, it looks different, but is essentially still a tab in operation. I don't think it will be difficult for someone who is "tab oriented" to understand.

25 Jun 2003 | Paul Michael Smith said...

Pretty familar to intermediate user's maybe. I know plenty of people such as members of my family and people who i used to work with that could not visually grasp what the tab was with no real feedback did not realise they were clickable.

Maybe they consider buttons to be metaphorically better than tabs and I can't disagree too much, although there is a case for tabs being easier to understand in terms of the context of the operation because tabs usually mean you are performing tasks around the same area of function.

25 Jun 2003 | Tomas said...

The active "centered button" look inactive to me..

(By the way, this makes it harder to explain to people. Everybody know what a "tab" is on screen, but "centered button"? Seems less obvious..)

25 Jun 2003 | JP said...

I don't like the centered buttons; using the tabs seems more intuitave.

That said, I have never liked the tiered tabs so prevalent in Windows preference dialogs. Whenever I pick a tab from the back tier, the flip always throws me off for a second.

25 Jun 2003 | SU said...

Isn't this a case where tabs are "easier" simply because they are more familiar? I don't think either method is inherently superior when peoples' past experience is exempted from the equation.

25 Jun 2003 | rjs said...

I'd suggest a couple reasons for the new approach..

a) Identifying buttons as clickable things is faster or more intuitive than identifying tabs as clickable things.

b) It uses the page metapor we get from the web, and this metaphor is more direct and transparent because it doesn't try to explain itself. It's hard to look at a screen with tabs without thinking "oh this is organized into tabs; which one am I on and which do I want?".

25 Jun 2003 | Michael Spina said...

Without comparing the title of the tab to the contents of the screen, I guessed the lighter tab was active, and was wrong. Maybe with more than two it would have been clearer, but I still think the tab interface is more self-explanitory if done right.

25 Jun 2003 | Michael Spina said...

But on a positive note, I think the way they positioned the "tabs" through the top of the box going around a group of controls at least makes it clear that they switch between multiple views.

25 Jun 2003 | hurley #1 said...

Without comparing the title of the tab to the contents of the screen, I guessed the lighter tab was active, and was wrong.

Yeah, to me that's the one thing that makes these buttons more confusing than tabs, although with a bit of practice people would figure out the conventions and get used to it. Think about how long it took to get used to OSX after OS9, and how sucky you probably felt OSX was at first. But then once you got used to its interface, you liked it more (at least that was true for me; I know a lot of people still prefer OS 9 and earlier.)

25 Jun 2003 | Mike Beltzner said...

One of the large advantages of standard tabs is that it attaches the tab title to the page while simultaneously detaching the other tab titles from the page. As indicated in above comments, Apple's "Centered Button" relies on the less ambiguous button shading method of indicating which is the active tab (ie: is it the brighter or darker button?)

I don't see what advantages are obtained by centering the tabs, other than perhaps bringing them closer to the other UI controls within the tabbed pane (reducing the mouse movement distance). The OS X 10.2 tabs look just as "button-like" to me as these new ones. I like the clearer demarcation of the control group that is contained within a tab, but I think that could have been done without centering and floating the buttons over the tabbed pane's border.

25 Jun 2003 | Eric Gordon said...

On first glance, I think 10.3 way is a step backwards. In the first example, the highlighted "Printing" button suggests that's where you are; when in fact the opposite is the case.

With the existing tabbed format, it's pretty obvious what 'page' you're on versus the ones you're not. In the Panther version, you have to discern whether or not a button is 10% lighter or darker than another.

Oof.

25 Jun 2003 | dmr said...

That's a little hyper-critical. Whether or not it's 10% lighter or darker doesn't matter when your clicking on it. It matters when you study a static image, but the interface isn't static; it responds to a person's input.

I only question why move away from tabs when they are just getting started with them (safari for example.)

25 Jun 2003 | Mike Beltzner said...

dmr raises a good point -- will they create a similar system for Safari, as well? If not, there will be two tabbing metaphors within the 10.3 release ...

25 Jun 2003 | jonathan said...

I think that interface is dramatically over done. I think all the seductive elements (the transparacies and reflections) increases the cognitive load to the point where it takes precedence over the task. Kinda of like hiring liberace to teach you how to play piano.

25 Jun 2003 | Paul said...

It's hard to tell which button is active, I'd guess, because both of Jason's screenshots feature inactive windows. Inactive windows have greyed-out controls in most cases (Safari, I'm eyeing you.) Take a look on Apple's faxing page and you can see in the thumbnail that the active ... er... button's color is the system's highlight color - in this case, Aqua.

I am tired of the tab metaphor, but the concept behind it is still fairly sound. I think Apple's variation on it may be a good one, and hopefully it will only mature over time.

25 Jun 2003 | Mike Beltzner said...

Addendum to my first comment: the Panther sneak preview offers a glimpse of how that tabbed character palette will look with the new system. It's a small image, but you get the idea. The blue highlighting definitely makes the active tab easier to see, but again, I don't see any huge advantage over the old way of doing things.

(also, I notice that they cleared up the problem of the ambiguous tab border in this revision -- that's nice)

25 Jun 2003 | Joshua Kaufman said...

Pages 79 - 81 of Don't Make Me Think pretty much nail why tabs work so well on the Web. Two of Krug's reasons are especially relevant to the Mac OS:

  • Tabs are self-evident: users immediately understand what they do.
  • They suggest a physical space: users immediately know which tab is active tab because one appears to be in the front.

Tabs are extremely easy to understand and use, and have subsequently become a standard interface widget. Apple would be plain stupid to abandon them unless they have solid user research that suggests they're new buttons are better.

25 Jun 2003 | Steven Garrity said...

I'm with Joshua on this - tabs are self-evident, like a pile of paper, anyone knows you can pick one out from behind. I would guess that this new method does not have that same advantage. That said, I would defer to some simple user-testing to know for sure.

25 Jun 2003 | scottmt said...

I'm lucky enough to have gotten my hands on the WWDC build of Puma, installed it and have been tinkering with it this morning. The UI and speed differences are very noticable, more so than I saw going up to Jaguar. Here's some comparison screens Puma-Jaguar, tabs VS "centered buttons".

Displays Preference pane:
Puma
Jaguar

Sharing Preference pane:
Puma
Jaguar

My first reaction is I like it. More pleasing to my eye and umm ... Its not as confusing as some of us make it out to be.

I do have to wonder why they would abandon tabs (after Jobs claiming Safari's as the best implementation thereof), and I wonder if they will hang around for the next version of the developer tools ......

Puma rocks !! Expose is very very very cool :)

25 Jun 2003 | initialThought said...

why is the human tendency to resist change? just because the majority of people are comfortable with tabs, does that mean no one should be searching for, testing and developing other systems that might be better?

i'm not a mac fanatic, but personally, i'm glad to see apple trying to push forward instead of settling on using the standard tab system.

and even so, is it really that drastically different?

25 Jun 2003 | Darrel said...

I'm all for change, but Apple better get its act together soon and start remembering that it really needs to come to terms with solid, consistent UI guidelines for OSX. OS9 was perfect in terms of a consistent UI. OSX, as great as it is, is a mishmash of UI elements. The fact that you can throw software like the GIMP and OpenOffice doesn't help the matter either.

25 Jun 2003 | asdf said...

ScottM - what's Puma - I thought it was Panther?

25 Jun 2003 | fajalar said...

I would say that, as is usual for design, it depends.

It depends on who your users are. Tabs are not necessarily self-evident. I've tested an app that used tabs to switch back and forth between two modes of navigation (searching and linking), and 1 out of the 8 people got it.

I talked with a couple of others here at work and they have similar experiences.

But the user groups were being migrated to Web apps from host-based systems, so pretty much all WUI/GUI metaphors are lost on them unless that are intermediate to expert Web users at home.

I don't think anyone will have a problem with it as the widgets are in the same place on the screen that the tabs were. So for those who are already familiar with OSX, it shouldn't matter. For those who are not familiar, only testing or (better yet) actual use will tell.

25 Jun 2003 | scottmt said...

Darrel, what are some specific mismatched UI elements that are part of the OS X System? Cos I'm not seeing that many glaring inconsistencies, and none that haven't been worked on / are a work in progress.

You can't say third party software is the problem ...

25 Jun 2003 | SU said...

FYI...

Puma = 10.1
Panther = 10.3

25 Jun 2003 | hurley#1 said...

Puma = 10.1 Panther = 10.3

Leopard = 10.4
Tiger = 10.5 (involves elaborate licensing deal with Exxon)
Lion King = 10.6 (involves elaborate licensing deal with Disney)
Mighty Joe Young = 10.7
King Kong = 10.8
Godzilla = 10.9
Mothra = OS XI

25 Jun 2003 | hurley #1 said...

Wait a minute, what was I thinking?

OS XI = The Blob (remember, Steve McQueen's first movie?)

25 Jun 2003 | fajalar said...

I think with as bloated as most OS are these days, they all qualify as being "The Blob."

25 Jun 2003 | [email protected] said...

Puma is the phonetic, its how i've been pronouncing "Panther"

(see also jag-wire)

:P

ack, it isn't even monday

25 Jun 2003 | Darrel said...

Darrel, what are some specific mismatched UI elements that are part of the OS X System?

- Look at any of the current apps out there...Safari, IMovie, iTunes, etc. The interfaces are much less consistent than one would think. They might all be equally as usable, but the consistency is dissappearing.

Daringfireball.net is a place that often points out t

You can't say third party software is the problem ...

No, but it doesn't help. In OS9, you pretty much had to use the widgets available with OS9. But with X-windows and such, there's an immense number of newer widgets available. Apple needs to tighten up it's own UI so that it is clearly delimited from the 3rd party non-OSX native apps.

25 Jun 2003 | Bill Brown said...

I'm fine with the buttons; I think people are used to buttons and know exactly what happens when you click one. However, I don't think buttons are usually used to express state—that one's a little weird. Of course, this is from the same company that thinks an address field is a great place for a progress bar.

What I would really want is for consistent and stable UI. It seems like every iteration has had some major interface changes: the System Preferences are constantly being reordered, tabs become buttons, Finder toolbars become expandable then disappear completely, the Finder is the desktop but really it's an always-open application but now it's just an application. The strength of Mac OS was that there were new things but the UI was strictly adhered to. When you upgraded to OS 9, you weren't worried that the Finder's purpose or appearance would radically change.

On a related note, there's an interesting interview with Jonathan Ive on Wired. It details the design details and decisions that went in to the PowerMac G5 and I really like the amount of thought that he's expended on this.

25 Jun 2003 | Sean Tevis said...

I was quietly hoping that they'd open up the Aqua layer to let you design your own interface look-and-feel. While technically only "skinnable" and not a true GUI where you could modal behaviors, I've always thought the glowing buttons, low-contrast and lined panes, and the brushed metal look of Aqua could be greatly improved upon. There used to be several third party "theme" hacks for OS 7 before Apple gave up and gave us our own built-in tools in OS 8.5. So far, though, I've seen no third-party hacks.

25 Jun 2003 | JF said...

I've always thought the glowing buttons, low-contrast and lined panes, and the brushed metal look of Aqua could be greatly improved upon.

It appears Apple is already on the case. The stripes in 10.3 are more subtle and I've heard that horizontal lines dividing selection groups in pulldown menus are back (currently there's just space between groups).

25 Jun 2003 | Anthony said...

It seems like Apple's legendary interface consistency and usability is going out the window.

The centered buttons do make it difficult to figure out which one is active. The tab gives you a visual cue of which is in front.

Between that and the "make everything look like iTunes" strategy which they can't even seem to do consistently and we've got some major deterioration.

Geesh...they changed Command-N in the Finder. What's next?

25 Jun 2003 | kageki said...

the new gray shading without lines in Panther look like NextStep. Minimal.

I dig that better than the iMac lines or the faux brushed metal Apple is incorporating in all its new software.

25 Jun 2003 | fajalar said...

Somewhat OT, but is anyone going to the Chicago store opening? Who doesn't want a free t-shirt that tells the world which store you shop at?

25 Jun 2003 | LukeW said...

One thing I will say is that in the case of tabs gone wild, buttons might help? But rows of buttons vs. rows of tabs... the bottom line is too many features, too many options, too much complexity. That said I do appreciate how the new UI does look "cleaner".

25 Jun 2003 | mark said...

At first I thought the changes in the UI where just cosmetical, but try placing the images that scottmt posted in back and fwd positions in your browser... You'll see there was a lot more thought put into panther than is apparent at first sight. There's a hell'alot of attention put into detail.

Try pasting http://klyxonica.colorado.edu/displays_jag.gif into your address bar and then change the "displays_jag.gif" to "displays_puma.gif".

26 Jun 2003 | mark said...

26 Jun 2003 | mark said...

Oh, and I'd also like to some of the new Panther idisk features in an ftp mountable volume, such as local mirroring.

Although anarchie already does it.

26 Jun 2003 | Paul said...

Anthony: The centered buttons do make it difficult to figure out which one is active. The tab gives you a visual cue of which is in front.

I'm afraid I don't understand how having a button highlighted in Aqua or Graphite is any more difficult than having a tab highlighted in Aqua or Graphite. Can you explain?

falajar: I'm going, because I want a free shirt. Darn it.

26 Jun 2003 | hurley #1 said...

I'm afraid I don't understand how having a button highlighted in Aqua or Graphite is any more difficult than having a tab highlighted in Aqua or Graphite. Can you explain?

Buttons have borders, wheras with a tab there's no border between the tab itself and the "page" or area that you're looking at. That's the source of confusion. With buttons, you have to learn which color means "here's where you are," whereas with a tab it's self-evident.

That said, I still don't think it'll take users long to learn the convention, as long as it really is a convention and thus applied consistently.

27 Jun 2003 | BL said...

It's perforated metal not mesh. And it's it's translucency not transparency.

27 Jun 2003 | Panther said...

I've played with Panther and I think the buttons solution is better than tabs. Plus, there's some subtle shading going on around the edges that really helps.

28 Jun 2003 | Jon Hull said...

My biggest concern is that this one look is being overused. In Pather there are 4 seperate places where it is used tabs, the finder's view control, iPhoto's almost tabs, and Safari's front/back buttons. Each has its own behavior! At-least the new tabs have the darkened well to distinguish them from the others.

Safari's use is the most troubling since the others at least have exactly 1 section always selected. (The Finder's view control is the best implementation IMHO)

It's the same problem that the lisa had before they distingished the look of checkboxes and radio buttons and the solution is the same different looks for different behaviors.

28 Jun 2003 | Fortabs said...

What are you guys talking about? Tabs are everywhere! It is stupid to replace them with anything else. It is just plain stupid to even argue to replace them.

03 Jul 2003 | scottmt said...

now that the discussion has died down.

I finally got to check out the developer tools in Panther .. tabs are indeed gone from interface builder:

http://klyxonica.colorado.edu/tabs.gif

12 Jan 2004 | casino said...

Excellent site I have bookmarked your site and I will come back soon!

28 Nov 2004 | click said...

7280 Very well said chappy.

24 Jan 2005 | Seasonale said...

Seasonale Business:A small business owner was giving a speech on the troubles of running a business in today's society. He finished by saying "All lawyers are assholes"At that, a man in the back of the room stood up and yelled "Hey! I resent that remark!"The speaker asked "Are you a lawyer?""No," said the man in the back, "I'm an asshole."

31 Jan 2005 | compatelius said...

bocigalingus must be something funny.

02 Feb 2005 | online pharmacy said...

I really appreciate blogs like this one becuase it is insightful and helps me communicate with others.
thanks.also, that guy billyz, I really need to talk to you about that cure you mentioned.

Comments on this post are closed

 
Back to Top ^