Wednesday, February 25, 2009

On Safari 4's Tab Design & UI

Untitled.png
Everybody has been bashing Safari 4's Tab design like crazy and so I thought I'd try and be a sane middle of the ground response, offering my honest opinion here. Honestly I am a bit mixed on them, one would think that seeing Google Chrome with this type of UI that I would be prepared for a User Interface like this. So What's different?
chrome_tab.jpg
Well one thing I noticed is that Google Chrome has a background which the tabs are placed on. I can't say I am a fan of this as it reminds me of the MS Windows MDI interface I have a disdain for. It makes it look like there is a larger encompassing container holding all the tabs together which it may have in the data structure design in the application logic, however the user doesn't really need to see this unless it offers something that makes the overall UI more usable. Contrast that with Safari's tabs...
Picture 5.png
...which literally are at the top of the window and in which the tabs appear to exist without any encompassing container. In principal I agree with Apple on redesigning the interface. To me it makes more sense as it looks like Safari's tabs are literally like file folders where the whole interface is contained inside the bounds of the tab vs the older style tab UI used by older versions of Safari and shared with other browsers like Firefox and Camino where just the web view is inside the tab and the UI happens to adjust/switch to reflect to whatever the web view for the tab contains (i.e. the location bar suddenly switching it's url text when switching to a new/different tab.)
Picture 7.png
However my likes of principals and general use are different. I think the reason I (and many people) don't like the new tabs may be that it appears initially that the tabs have gotten a lot smaller. However when comparing the 2 tab styles it appears they are about the same size. One thing that does annoy me about the interface is the deceptive tab resize icon...
Picture 5.png
I say deceptive because it's the same icon (just rotated 90 degrees) that shows in the bottom right of each window on Mac OS X to indicate a drag area where you can click your mouse and drag the icon to resize your window. However on Safari 4 this only allows you to reorder your tab and drag it left to right and out of the window to create a new window, whereas clicking on the tab text is the same as clicking on the window itself and allows you to drag the window around. Really I think this is annoying only in their choice of icon. My First impression of this was that it would allow me to resize the tab width in the window. Another annoying thing is that the title bar is now suddenly complicated with a bunch of tabs. Leave it to Apple to try and simplify the user interface, but there is a balance between reducing the area that UI controls take up and a simplistic user interface, It feels like by merging the tabs and title bar into 1 control that the User Interface as a whole has gotten more complex, for 1 thing is now you can never really see the whole title of a webpage when it's in a focused tab and has and significant length for its title. It almost feels like this could work, but the UI control itself isn't quite polished yet like it's missing something if this is the direction that Apple is going to proceed in.
Picture 6.png
One thing I LOVE that Apple has done that is so stupidly simple & brilliant is the extended tab list. I love that Safari introduces this simple concept of shading the rows in the menu that aren't visible so you know what is and isn't visible. I really hope other browsers copy this concept. Conclusion Overall I am still mixed, I honestly think every browser sucks at something that makes it just short of perfect, however for me Safari ( with Webkit Nightly ) sucks the least and therefore is the best browser for me at the moment. However I don't stop using Camino, Firefox & now OmniWeb, they all have their purposes, just not as my primary browser. The thing to remember is that Safari 4 is a BETA yes I know it's not polished, but last I checked that's what Public Betas are for. Safari 4 will get better and maybe we will adjust to this new style of tabs at the top of the Window and it may become an accepted standard in browsers, however only time will tell and if you really don't like the new tabs you can always just change them with a hidden preference. For now I think I need a few more days to a week to get at a real deep sense of if I like the new tabs or not. Also another interesting trend is more eye candy in the browser ( Top sites and cover flow for history ), I can't wait to see where Apple takes this. Google Chrome CC screenshot http://flickr.com/photos/brullonulla/2826039336/sizes/o/

7 comments:

Anonymous said...

Good artcile, Colin.

I think Apple decided to move the tabs into the title bar to remove redundancy (in Safari 3 the same title is in the title bar and the corresponding tab) and save more space for the actual web page. For users like me who own a 17" MacBook Pro the gain of space might not be that noticeable or necessary, but think of some unreleased products like the long rumored tablet for example, which probably sports a smaller display where more space means less scrolling. Even if it's just about 25px in height.

Just my 2 cents.

Anonymous said...

I like the idea, but the current design is appropriate only for apps whose tabs do not represent editable documents. It would be nice to have an API for a window with tabs that represent NSDocument objects. I'm not sure how you would indicate a document's edited state in the Safari 4 design.

Also, I don't like looking at an X all the time.

Seems to me a better design would have been to assign a close button to each tab that looks and works just like the red close button (except it wouldn't be red), rather than have one red button for the window and a different looking button for each tab. The red close button shows state and acts as a close button _and_ it shows the X only when you hover.

Love the animation when you drag a tab to make it a separate window.

Anonymous said...

Dumb question, but...how do you show the extended tab list? I have searched and cmd clicked, but cant find anything like it...hmmm

Colin Wheeler said...

it's the *** button on Safari that shows when you have enough tabs open

http://img156.imageshack.us/my.php?image=picture8.png

Rishi said...

Good article mate. Specially the extended tab list.
Though i am beginner to Mac World of things but love the new look of safari..

Anonymous said...

@Anonymous: no, in safari 3 the title bar and the corresponding tab *don't* show the same thing -- if you go back and take a look at any web page with a title that's longer than about 20 characters, you'll see that the title bar shows the complete title but the tab only shows the first few characters of it. this change has nothing to do with removing redundancy, because the redundancy never existed in the first place.

Anonymous said...

I like the new bar, but when several windows are stacked, those tab's give you the impression living in the old microsoft way of having a lot of tabs in your window. See f.e the old excel pref window.

I believe that a small 2pixel border above the tabs will create a nice design. Also, what I really mis, is when I want to drag the current url into the tab bar to have a second tab with this url, that this isn't working anymore.

 
...