Safari’s New Interface: A Shiny Mess

February 27, 2009 by Jonathan · Comments
Filed under: Apple, Technology, Web 

safari_logo

Though the Web browser has grown in importance and changed drastically in function since the first version of Netscape Navigator ruled a fledgling Web, its interface has not changed that drastically.

Though tabbed browsing introduced an important new element, most browsers sport forward and back buttons along with stop/reload buttons, an address bar and, more recently, a search box. Most browsers today look enough like Netscape Navigator 0.91 that few would be lost if they traveled back in time.

But lately there has been an attempt to shake that up some. First came Google Chrome, introducing the idea of tabs on top, and now comes the new beta of Safari 4, which adds even more new interface changes.

Though I’m always a fan of innovation, there’s a lot about these interface changes that bug me and not just the new “bug report” button. I’m admittedly no interface designer, but there are a lot of things that I would definitely do differently…

Just to be Clear

I want to make it clear that I really do like most of what I see in Safari 4. It’s a solid browser over all, especially for Mac users. I like how fast JavaScript moves on it, I like the new “Top Sites” feature and the way it is presented, I like the use of coverflow and I like the overall stability and speed. For doing the things that a browser does, it’s great.

The problems I have are isolated with the interface and some of the changes they’ve made since version 3 and even apart from the latest Webkit nightlies. They seem to have taken a serious departure from the standards of browser interface design and, though I have to admire their daring, it seems they’ve made a few missteps.

Specifically, there are two problems that have me unnerved.

Tabs on Top… Way on Top

When Google Chrome introduced the idea of moving the tab bar to top of the browser, it was a controversial move. I, personally, don’t like tabs on top because it is an ineffeciency for me. Look at this example.

safari-sample

As you can see, if I want to get my cursor from where it is locate to click on a tab, I have to go over not just where the tab bar should have been (the red box) but over the bookmark toolbar and address toolbar. This not only doubles the mouse distance for this very short move, but puts my most common mouse action farther away from where my mouse usually is. Most uses, for me, of the address and/or search boxes are through a command+t to open a new tab and then using the tab key to access the needed box.

However, I can’t begrudge Safari that as Chrome did indeed start it and it does have the benefit of giving one more room in the browser pane. Where Safari went wrong was having the tab bar also double as the title bar of the Window in both Windows and OSX. This is taking a weak idea and making it downright stupid.

The title bar is a crucial part of the Window. It’s how you interact with that particular window on your desktop, including minimizing, shading, closing and moving it. Now it also has to play the role of tab bar? This means you have to be able to open, close and reorder tabs tool. That puts no fewer than 7 major functions in one very narrow strip of screen real estate.

To make this work, Safari added a new convention. In Firefox or Safari 3, if you wanted to drag a tab, you just clicked anywhere on the tab and dragged it, easy. With Safari 4, click and dragging a tab blindly grabs the whole window. Instead, you have to grab the three diagonal lines on the right hand side of the tab to move it around. It’s another convention to learn and adapt to.

Is it minor? Perhaps. It isn’t the worst thing I’ve seen (anyone tried using the latest version of Microsoft Office?), but I don’t see any reason to crowd the title bar with tab functions when it hardly saves any screen real estate at all and seems to open the door to a lot of mistakes.

The Reload Button

Real fast. On the screenshot above, find the reload button. Trick question. It isn’t in that screenshot.

safari-reload2

The reload button is actually IN the address bar, the same way the RSS icon usually is.

it was bad enough when IE7 moved the reload button to the other side of the address bar, now Safari has to find a whole new place that no one will think to look for it. I grant that it is not a button that is commonly used and I agree with combining it with the “stop” button, if you need one you definitely don’t need the other, but it is it so rarely used that we need to play hide and seek with it?

The reload button is an important part of the browser for many people. I use it refresh statistics of keep on top of Twitter if I’m not in my Tweetdeck or to keep my email fresh if Gmail is acting funny. I don’t use it often but when I need it I don’t want to go hunting for it.

This is another classic case of change just for change’s sake. The nagivation bar has never been particularly crowded or cluttered and moving the reload button to the end of the address bar just necessitates that the address bar be longer and adds more buttons to the end of it, not actually cleaning anything up. Worse still, any gain is lost with the addition of the bug report button at the far right.

Because, you know, there’s a button I’m going to use a dozen times a day. At least I can remove it with “Customize Toolbar”.

Things that Still Suck

With that in mind, there are still a few issues I have with Safari that have been around since version 3 and beyond that I was hoping they’d fix with version 4 but, so far, no luck.

  1. One Window Mode: Why is it that I am constantly closing windows when I supposedly have pop ups blocked? Gmail links open in new windows as do any links have that designation. The problem is that, with Firefox, new window secretly means new tab, as it should be. With tab browsing there is NO REASON to have two windows.
  2. Tab Overflow: Tab overflow still sucks. You now get a “…” and you can click on that to get the full tab list but you have to close enough tabs to fit in your window before you can rearrange latter tabs. Firefox overflow management isn’t perfect, but a lot better.
  3. Favicons: Seriously? No favicons in tabs? You have to be kidding me. It is almost impossible to tell, at a glance, what is in which tab and, when you combine that with the ways tabs get compressed it is a real mess. You don’t even have to sacrifice screen real estate, just make them double as the close buttons on hover.

These are just a few of the UI decisions with Safari that I have a beef with that haven’t been fixed. Though the new version 4 is an improvement in almost every way, it takes the existing UI problems and magnifies them all many times over.

Say Something Nice

Real fast, since my mother would not be happy that I haven’t said anything nice about the new UI, I do have a few words of praise.

Here are a few new things that I actually do appreciate:

    li>Tab Highlighting: One of the problems with Safari 3 was that it was almost impossible to see what tab you’re in. All of them looked about the same. With 4 that problem is gone. The tab you’re in has a noticeably different tint to it and the tab itself is wider. A pretty slick way of handling the problem.
  1. Top Site Interface: This is a bit of cheat since it is only new because the feature is new, but managing the top site feature is very slick. I ended up making mine all pushpins since my browsing history is too thin to be of much help to it (I switch browsers too often). You can ban sites from appearing, drag and drop entries and doing so automatically makes them “stickies”. Very intuitive.
  2. The “Wonder Bar”: The new address bar functionality is simply superb. If you type in a domain it defaults to taking you to the root, not to some random URL on it. However, if you want said random URL, you can always arrow down. It also is smart enough to pull from both your history and your favorites. Though not quite as smart as Google Chrome’s one bar, it is pretty slick and is a huge leap forward.

Though it seems that most of the interface decisions put this new version of Safari back a ways in usability, there are at least some people on the team who aren’t asleep.

Bottom Line

Me, I like Safari. It’s not a perfect browser and the extension junkies are going to always harp on how you can turn Firefox into everything from a Web development client to a blender. I have nothing against Firefox, but it seems to me that Safari, especially 4, just moves that little bit faster, looks a little cleaner and is a little more gentle on my system. There are a few Firefox extensions I love, but, for most things, Safari gets the job done fine and a bit faster.

However, even as I use Safari 4 to type this, I feel like I’m tolerating the interface. Where once it was one of the draws to the browser, now it is a drawback. If it weren’t for the souped up page loading and JavaScript, I probably would just ignore it and go back to Firefox.

For right now though, I plan on using it. I may switch back in a few days but so far I am pretty happy. I just wish they could get these UI bugs fixed. It might make it a little more bearable to use.

Final Note: Share some of these gripes? Fix them using the commands in this video. (Note: The Reload button is NOT in my Customize Toolbar for some reason. I’ve checked repeatedly).

  • I am using Safari 4.0.3 and there is no 'tab on top'. Instead the tabs remain at the red box you highlighted in the first image. The one thing that I hate about Safari is the difficulty to find the reload button. Apart from that, everything else works fine for me but I would stick to Firefox, if I were to choose only one browser to use for life. Safari is like a reserve for me, just like Opera but I definitely won't use IE (no matter what versions). I am experimenting with Flock but although Flock is based on Firefox, something is not right, yet.
  • The Reload Button was placed there likely to keep Safari seamless across platforms. The iPhone required it to be in the address bar, as space considerations precluded it from being anywhere else.

    As for firing off multiple windows, there should be an option to force it go to tabs regardless of the coder's intention. However, there is a very legitimate need for multiple windows -- being able to display one or more web applications at the same time. On dual-screen setups, this is invaluable.

    Most of your issues can be mitigated by use of hot keys to switch windows, reload pages, etc. Therefore, the GUI changes aren't nearly as grating to me.
  • The reload button is a good point, but the question there is why not include it in the "Customize Toolbar" feature so I can add it back if I don't use the iPhone? I know iPhones are huge but there are still plenty of Safari users that don't routinely mess with the iPhone version.

    I have to disagree with the multiple window issue there. Though some might have a use for it, A) Fluid solves much of that issue on its own and B) There are far more popups that I don't want opening in a new window than those that I do. The default should be a new tab with the user choosing what to break out.

    Though i do make heavy use of the hotkeys, especially when I am typing, when I am in "mouse mode" I still like the visual GUI to be where I want it. It really depends on the task at hand.
  • To be honest I've pretty much given up on Apple. They constantly tell developers to "follow the aqua guidelines" yet they break the rules themselves all the time. Not a good way to set an example IMO.

    Plus their software is getting too bloaty. Hope the next OS X fixes that. If not I'm done with them.
  • Since I don't develop for them I can't comment on that much, but I don't feel that their software has been getting too bloaty, certainly they're still better than Vista. Though I, like you, hope the next version brings both sexy and speedy back....
  • Better than vista heck no - I agree - but if the next OS X is anything like Win 7 I'll be one happy geek. If not, hello Win 7.
  • It looks like the next gen OSes for both will be more about speed and fixing bloat than anything. I think that's good for everyone. Apple and Microsoft fans.
blog comments powered by Disqus