Apple's Safari 4 UI changes hint at plans for Snow Leopard

Posted:
in macOS edited January 2014
The new public beta release of Safari 4 reveals the deepest look yet at the future of Apple's software, hinting at what's in store for the closely guarded user interface revamp coming in Mac OS X 10.6 Snow Leopard, as well as appropriating ideas from other browsers and adding some original flourishes, some of which go boldly and decisively past the company's existing human interface design guidelines.



Something old, new, borrowed, blue



Some of the changes in Safari 4 are borrowed from external sources, some are new things that will likely migrate into future versions of Mac OS X, and some are features of Leopard or other Apple products that are just now making it to Safari.



Among the new changes is support for 'resolution independent' scaling of the entire web page, just like the iPhone. Rather than only bumping up the size of text and destroying the layout of the page, as web browsers have historically offered to do, Safari 4 allows users to scale the entire page up and down (below, scaled down), either using size buttons in the toolbar or multi-touch trackpad gestures on late modeled MacBook models.







Apple has also spruced up the Google search field to bring it up to par with other browsers, presenting Google Suggest results, Bookmark matches, and integration in-page search all in one instantaneous drop down of search results (below). There's also a curious holdover in the package: the Aqua blue scroll bar. For years, iTunes has signaled Apple's intent to drop the bubbly Aqua bar, so its appearance in the new Safari 4 is somewhat of a surprise.







Standards-based web development



To make standards-based web development even more attractive, Apple has expanded and improved upon its web development tools in Safari 4 to help debug, profile, and optimize the performance of JavaScript, CSS, and HTML code. The Web Inspector window (below top) can now be viewed within the browser window (below bottom).



The new Safari 4 raises the bar for other browsers in supporting HTML 5, which allows developers to build Rich Internet Applications (RIAs) using web standards rather than relying upon external web plugins such as Adobe's Flash or Microsoft's Silverlight. Other browsers, including Google Chrome, Firefox, and Opera are also actively working to support HTML 5 specification.



The new standard includes support for offline operations, allowing users to load RIAs that will continue to work even if they lose their Internet connection. These apps can also make use of HTML 5 databases, which work like huge web cookies to store data managed by a web app. This would allow a web application such as GMail to keep a local store of the user's email for access even when not connected to the Internet, for example.



Safari 4 also supports CSS Animations, Effects, and Canvas standards and supplies a big boost to JavaScript rendering via the Nitro JavaScript Engine, formerly called SquirrelFish Extreme. Together with HTML 5 support, these standards enable developers to do anything from adding animation effects to building full applications that run both within the browser and on mobile devices such as the iPhone, which already supports these standards.











Borrowing Google Chrome's "Tabs on Top"



While Safari originally borrowed the idea of tabbed windows from Opera and later introduced drag and drop tabs, the latest version takes a cue from Google's Chrome browser, which flipped its browser tabs upwards to poke into the unused space of the web browser's title bar.



This almost seems taboo; a window's title bar has long been a sacred cow designated solely for grabbing the window and presenting its title. Apple's earlier experiments to remove the title bar's stripes and slowly blend it into the body of the window in iTunes and later Tiger's unified look were rather conservative steps that were still met with some gasps from users resisting change.



While earlier versions of Safari made tabs an optional feature users had to activate themselves, Safari 4 takes the rather bold step of making its upward facing tabs replace the title bar all together, turning the former wasted space into a functional strip of tabs. The middle of any tab can still be used to grip and move the entire window, but the result is a more complex and advanced looking window, at least once several tabs are added to it.



The new convention also makes dragging a tab into its own window much more intuitive. There's now a gripper icon presented for each tab; simply grab it and the tab can be repositioned in the bar or dragged out into its own freestanding window. This drag behavior isn't new, but how to use it is much more obvious. Safari's title bar tabs (Apple calls it "Tabs on Top") may likely make it into other applications that make use of tabs sooner than later, perhaps even becoming a defining feature of many Snow Leopard apps.







Streamlined Toolbar



The original Safari aimed to present the web as efficiently as possible, paring the app's window frame down to nearly nothing and incorporating the loading progress bar into the URL address field itself. Safari 4 simplifies things even further, leaving one button for adding a bookmark of the current page and adding a refresh icon at the end of the URL field. This turns into the familiar spinning gear icon when the page is actually loading.



Combined with the new title bar tabs, Safari 4 sports the highest density interface found in Apple's consumer software. That's a surprising move for the company, which has historically aimed at targeting simplified needs of entry level users, at least outside of its Pro Apps such as Final Cut and Logic. It also suggests greater user interface sophistication on the horizon for Snow Leopard.



From Leopard to Safari: Cover Flow



Safari's bookmarks page now shows bookmark collections using animated Cover Flow thumbnails of the pages themselves, just like iTunes first demonstrated and as the Leopard Finder adopted shortly afterward. This adds some strong branding to Apple's unique visualizer, which has also shown up in the iPhone and in iPods.



Cover Flow also allows users to rapidly review hundreds of pages when performing a full text search across their web history, something Safari could already do, but which presented results as rather opaque lists of URLs and page names. Now you can visually scan over actual representations of the query-matching web pages themselves, which is far more intuitive when trying to find information from a previous browsing session.







Borrowing Apple TV's video wall: Top Sites



Another feature of Google Chrome adopted in Safari 4 is the presentation of recently viewed sites as a starting point. Apple presents these Top Sites as an encircling grid of thumbnails similar to the video wall in Apple TV ads. It also supplies a way to edit and rearrange this grid, intuitively with drag and drop and pin controls.



Users can also select from a grid of small, medium or large thumbnails, depending on how many icons they want in their Top Sites page. By default, the Top Sites page acts as the default page when opening a new window or tab.



Sites added to Top Sites are tagged with a dog eared star whenever their content changes, making the visualization work like a simple RSS reader to highlight favorite sites with new content.







Looks like Windows on Windows



For Windows users, Apple has released Safari 4 with the native windowing look rather than the original Mac OS X appearance it debuted with. While the original appearance tied Safari's look in with iTunes and retained Apple's branding, it clashed with what users might expect to see on the Windows desktop and appeared somewhat fake looking.



Safari 4 not only adopts the Orange and Blue "Fisher Price" theme of Windows XP or the Glass look of Vista, but also provides Windows users with the less accurate but more familiar Windows-style rendering for text.



Looks like Snow Leopard on the Mac?



While Safari 4 on Windows looks more like a Microsoft product, on the Mac it looks like the future of Mac OS X. The latest developer builds of Snow Leopard feature only minor user interface enhancements, currently carrying forward the Time Machine "universe" branding that originally debuted with Leopard in 2007. While the thrust of the Snow Leopard release is on internal improvements rather than marketing features aimed at consumers, Apple has historically branded each new release of Mac OS X with significant user interface changes.



This indicates that Safari 4 offers a peak into Snow Leopard's as yet unreleased makeover on the horizon. The overall look of Apple's operating system has long adopted the features of key Apple products being promoted at the time of their release.



Mac OS X 10.0 and 10.1 reflected the blue and bright white translucent striped plastics of the original iMac.



Mac OS X 10.2 Jaguar added a brushed metal look first used by QuickTime and then iTunes to introduce iChat and iCal, branding the new apps as virtual hardware devices along the lines of the iPod.



Mac OS X 10.3 Panther spread the metal look across the Finder and iSync and darkened the bright white Aqua interface using shades of grey to make the desktop appear more serious and professional.



Mac OS X 10.4 Tiger introduced a new "unified" appearance that toned down the metallic look of brush metal and made it the default window appearance. This move was foreshadowed by prerelease versions of Safari and iTunes.



Mac OS X 10.5 Leopard further refined the desktop with more dramatic shadowing on windows, a more subtle menu bar, and a new Dock presented in 3D perspective with reflections, as well as a new full screen 'back in time' mode for Time Machine and universe themed packaging alluding to the new backup and restore features.



Mac OS X 10.6 Snow Leopard hasn't yet revealed its hand in the user interface department yet, but Safari 4 indicates a number of shifts that may make their way from the browser to the operating system, making them available to third party applications



Aspects of Safari 4 likely to find their way into Snow Leopard



Tabs on Top: by putting tabs into the title bar, they reclaim dead space in the user interface and make organizing the tabs within the window, and busting them out as their own window, more intuitive. Among the apps that could benefit from Tabs on Top are iChat, the iWork apps, and the Finder.



In more general terms, the Tabs on Top interface also shows Apple's increasing willingness to not only adopt good ideas from elsewhere, but also to change long standing rules that govern the user interface. Recently released iWork 09 apps similarly break convention to deliver useful new features, such as the ability to take a Pages document full screen and push the background desktop, menu bar, and other permanent user interface elements out of view. This deliberate effort to step out of the windowing structure is something a number of apps could benefit from without destroying the window metaphor when returning to a multiple window environment.



This step into interface isolation was pioneered by Leopard's Time Machine and Tiger's Front Row, and will likely find other uses in Snow Leopard outside of individual apps that take over the interface in the manner of Pages 09.



Top Sites: the new user configurable, visual presentation of recently viewed web sites would also make for a great opening screen for many document-centric apps. The new iWork apps present available themes as a grid of starting points. Why not supply a visual Top Documents view as an option in the standard open file dialog as well, allowing users to pin up an array of recently used documents, integrating Spotlight search results as well with Quick Look rendered results?



Lose the Aqua: one element found in Safari 4 that is unlikely to make it to Snow Leopard is the watery blue scroll bar. Already, iTunes has dropped the Aqua bar for a flatter and more subtle grey control. Snow Leopard may even go a step further to make scroll bars disappear until the user mouses over them or scrolls up and down using a mouse wheel or multitouch trackpad gesture. This is already the case on the iPhone and Apple TV, and is becoming common in other third party user interfaces as well.



What Snow Leopard will actually look like when it ships later this year is still kept tightly under wraps.
«1345678

Comments

  • Reply 1 of 144
    mr omr o Posts: 1,046member
    I really like the top sites view, but please replace the blue neon (when hovering over a site) with something more subdued. Neon is just too aggressive.
  • Reply 2 of 144
    Great article! It was really enjoyable to read. I'm totally loving Safari 4 so far. Ahh!
  • Reply 3 of 144
    messiahmessiah Posts: 1,689member
    I'm not sure about 'Tabs On Top' and I don't agree with comment that there is any 'wasted space' in the Title Bar.



    Like whitespace on a page, the space in the Title Bar allows the user to identify the window quickly in an otherwise busy environment. When you start to introduce tabs, the OS will start to look cluttered very quickly.



    Or perhaps I'm just scared of new stuff...
  • Reply 4 of 144
    "Top Favorites" screams for a full screen interface. Why couldn't Apple borrow Opera's full screen interface too? Add some gestures, keyboard shortcuts, and tie it to Spaces and it would be amazing.
  • Reply 5 of 144
    I really enjoyed working with Safari 4 yesterday, but for some reason, my main email host started failing to connect via IMAP after the install. I don't know if part of web kit was updated, etc. but as I couldn't get mail I uninstalled 4 and went back to 3 and all is well with mail.



    Could be a coincidence, but it makes me nervous about moving forward with this app. Having said that, the new feature, interface and speed were impressive.
  • Reply 6 of 144
    Quote:
    Originally Posted by AppleInsider View Post


    Among the new changes is support for 'resolution independent' scaling of the entire web page, just like the iPhone. Rather than only bumping up the size of text and destroying the layout of the page, as web browsers have historically offered to do, Safari 4 allows users to scale the entire page up and down (below, scaled down), either using size buttons in the toolbar or multi-touch trackpad gestures on late modeled MacBook models.



    ? that feature has been in other browsers such as Opera for some time, so tying the "zoom whole pages" feature to resolution independence is rather far-fetched.
  • Reply 7 of 144
    Quote:
    Originally Posted by Messiah View Post


    I'm not sure about 'Tabs On Top' and I don't agree with comment that there is any 'wasted space' in the Title Bar.



    Like whitespace on a page, the space in the Title Bar allows the user to identify the window quickly in an otherwise busy environment. When you start to introduce tabs, the OS will start to look cluttered very quickly.



    Or perhaps I'm just scared of new stuff...



    I don't really like it either - I like having File, Edit, all that stuff up at the top. Now I don't mind having the do-it-all settings button but I'd like both and I think the lack of File, Edit, etc is going to keep many in the general population away from this...



    Oh, and have links open in new tabs - what the heck is the point in tabbed browsing if when I click on something I get another freakin' window?



    EDIT: I also find that I have more "mouse miles" with the tab bar up top as my mouse is normally inside the structure of the page, having to go all the way to the top to switch takes more time... All of this is moot tho I'm sure - no way they are going to ditch the tabs at top thing.
  • Reply 8 of 144
    Quote:
    Originally Posted by mn_hawk View Post


    I really enjoyed working with Safari 4 yesterday, but for some reason, my main email host started failing to connect via IMAP after the install. I don't know if part of web kit was updated, etc. but as I couldn't get mail I uninstalled 4 and went back to 3 and all is well with mail.



    Could be a coincidence, but it makes me nervous about moving forward with this app. Having said that, the new feature, interface and speed were impressive.



    I had similar problems, with Apple Mail failing to download new messages and multiple copies of the same message ending up in my inbox before Mail crashed. The crash dialog mentioned Growl as a possible cause so I deleted Growl and Mail still can't finish downloading new mail (though it doesn't crash, I need to force quit to get beyond the endless download loop). Entourage 2004 (11.4.0) works fine.



    I'll revert to Safari 3 to see if that fixes it, though I hate to since I love the new features and faster browsing of Safari 4.
  • Reply 9 of 144
    Quote:
    Originally Posted by Evangelize With Respect View Post


    I had similar problems, with Apple Mail failing to download new messages and multiple copies of the same message ending up in my inbox before Mail crashed. The crash dialog mentioned Growl as a possible cause so I deleted Growl and Mail still can't finish downloading new mail (though it doesn't crash, I need to force quit to get beyond the endless download loop). Entourage 2004 (11.4.0) works fine.



    I'll revert to Safari 3 to see if that fixes it, though I hate to since I love the new features and faster browsing of Safari 4.



    Yup, reverting to Safari 3 seems to have fixed my Apple Mail connection problems (though it may have screwed up my account settings since I had to reenter account passwords again). Look forward to Apple working the bugs out!
  • Reply 10 of 144
    Quote:
    Originally Posted by Object-X View Post


    "Top Favorites" screams for a full screen interface. Why couldn't Apple borrow Opera's full screen interface too? Add some gestures, keyboard shortcuts, and tie it to Spaces and it would be amazing.



    Agreed, kills me that Apple still refuses to build in full screen capabilities. I had a plugin called Glims for Safari 3 that did both full screen & max window, sadly no worky with 4 beta.



    I really think the full screen being left out is just a stubbornness to not carry over anything that Microsoft pioneered. They will borrow from others but Apple really doesn't like borrowing from MS, especially since they like to bash MS for borrowing so much from them.
  • Reply 11 of 144
    I think Tabs on Top could be problematic as it's currently implemented if it spreads to all other Apple apps. It just seems too cluttered and makes it more difficult to grab and move the entire window. The handle on the Tabs to move them around also looks like a resize control. Tabs on Top serves it's purpose saving space, but I'm not sure the trade-off in compacting everything together is worth it. Hopefully, like Leopard's dock and the transparent menu bar, it's a work-in-progress that'll see further refinement before release.
  • Reply 12 of 144
    Quote:
    Originally Posted by Messiah View Post


    I'm not sure about 'Tabs On Top' and I don't agree with comment that there is any 'wasted space' in the Title Bar.



    Like whitespace on a page, the space in the Title Bar allows the user to identify the window quickly in an otherwise busy environment. When you start to introduce tabs, the OS will start to look cluttered very quickly.



    Or perhaps I'm just scared of new stuff...



    I'm still a bit dubious about it also, (especially this particular implementation), but I must admit I'm getting used to it already and it's only day two.



    From a design point of view you could look at it as the removal of duplication. The title bar only ever had two uses, one is the name of the window/program/page/whatever, and the other was a place to grab the window when you want to move it. Tabs on the other hand served the same function as the first one, they were just labels on (multiple) windows. By combining the two they've removed the duplication of having a browser window name and sub window names. The user knows they are in Safari already, the only other information the title bar carried was the name of the page, which was actually carried by the tabs anyway. Now that they've done it, in retrospect it's quite an obvious move.



    The article doesn't mention it but I think an obvious candidates for this kind of treatment in Leopard are multiple document situations in other apps. This would be a killer thing to do to the text editor for example, or even Preview.app. Being able to push documents into each other so they become tabbed or rip them apart into separate pieces would be a very efficient way to deal with clutter.
  • Reply 13 of 144
    Quote:
    Originally Posted by Messiah View Post


    I'm not sure about 'Tabs On Top' and I don't agree with comment that there is any 'wasted space' in the Title Bar.



    Like whitespace on a page, the space in the Title Bar allows the user to identify the window quickly in an otherwise busy environment. When you start to introduce tabs, the OS will start to look cluttered very quickly.



    Or perhaps I'm just scared of new stuff...



    Indeed, the window title bar is not wasted space at all.
  • Reply 14 of 144
    Quote:
    Originally Posted by PACraddock View Post


    ? that feature has been in other browsers such as Opera for some time, so tying the "zoom whole pages" feature to resolution independence is rather far-fetched.



    This comment doesn't make sense. It's a comma-splice of two separate ideas.



    1) The feature has indeed been in Opera for a while, so?



    2) To call it 'resolution independent' (in quotes) is merely correct, and is not necessarily "tying" it to the concept of resolution independence as an OS level feature AFAICS.
  • Reply 15 of 144
    vinney57vinney57 Posts: 1,162member
    What happened to the 'go back to the original page' button? (I forget what it was called). I use that all the time!!!



    The browser itself is definitely faster but I not sure about 'Tabs on Top' yet. There's something unintuitive about it and greater mousing distance is required. The developer tools however are totally awesome.
  • Reply 16 of 144
    http://www.flickr.com/photos/[email protected]/3308614371/



    Here's a mockup design of what I think could be the new look of the Finder in Mac OS X Snow Leopard. Has tabbed interface like Safari 4 beta and other interface elements from iTunes 8. I think this look could be used across all Apple applications too.
  • Reply 17 of 144
    Quote:
    Originally Posted by Virgil-TB2 View Post


    I'm still a bit dubious about it also, (especially this particular implementation), but I must admit I'm getting used to it already and it's only day two.



    From a design point of view you could look at it as the removal of duplication. The title bar only ever had two uses, one is the name of the window/program/page/whatever, and the other was a place to grab the window when you want to move it. Tabs on the other hand served the same function as the first one, they were just labels on (multiple) windows. By combining the two they've removed the duplication of having a browser window name and sub window names. The user knows they are in Safari already, the only other information the title bar carried was the name of the page, which was actually carried by the tabs anyway. Now that they've done it, in retrospect it's quite an obvious move.



    The article doesn't mention it but I think an obvious candidates for this kind of treatment in Leopard are multiple document situations in other apps. This would be a killer thing to do to the text editor for example, or even Preview.app. Being able to push documents into each other so they become tabbed or rip them apart into separate pieces would be a very efficient way to deal with clutter.



    The reason why tabs on top was never done before today isn't because nobody had thought of it before and that Apple was the first to think about it. No, it's because it's a shitty idea that doesn't work well in practice.



    Couple that on top with the notion that tabs is a solution in search for a problem (on the Mac with Spaces and Exposé) and you've got a mess on your hands.



    Tabs are already unnecessary to begin with. They don't scale well beyond a certain number of tabs. They offer hardly any visuals to someone that would want to switch to a web page quickly. And when they replace the titlebar, they cause a handful of new problems.
  • Reply 18 of 144
    paxmanpaxman Posts: 4,594member
    It makes sense that all the other browser apps (Finder, iTunes, iPhoto) borrow from Safari (or from one another) to achieve a more unified interface. There are differences but these are all apps designed to browse and help decipher large amounts of information as efficiently as possible so uniformity and consistency, both visual and functional, is definitely a good thing. I would love to have tabs on top of my finder window, as well as a Bookmarks bar, for instance. I have a ton of folders in my Finder tool bar. This works great but there is no hierarchical drop downs. As I have said before, the only downside to visual streamlining and unification is that apps become indistinguishable from one another. When you have ten windows open you need an instant visual que as to what app is which.
  • Reply 19 of 144
    paxmanpaxman Posts: 4,594member
    Quote:
    Originally Posted by kim kap sol View Post


    The reason why tabs on top was never done before today isn't because nobody had thought of it before and that Apple was the first to think about it. No, it's because it's a shitty idea that doesn't work well in practice.



    Couple that on top with the notion that tabs is a solution in search for a problem (on the Mac with Spaces and Exposé) and you've got a mess on your hands.



    Tabs are already unnecessary to begin with. They don't scale well beyond a certain number of tabs. They offer hardly any visuals to someone that would want to switch to a web page quickly. And when they replace the titlebar, they cause a handful of new problems.



    Totally disagree. I would agree that tabs ought to be user invoked, however.
  • Reply 20 of 144
    All this tabs on top complaining about mousing distance is lame.

    ctrl+tab & ctrl+shift+tab switches between tabs. use it and stop whining.



    --



    So I've noticed the removal of the pill button in the top right corner. Usually you could cmd+opt click on it and edit the toolbar. Maybe this function will be removed in 10.6? I sure wouldn't like to see it gone, I like making my icons smaller and removing the text from below them in third party applications. It just saves space and cleans things up a little.



    I applaud Apple on UI simplification and unity, but changing OSX to be MORE like iPhone's OSX is a big mistake. If the scroll bars disappear or fade away once a page opens that requires them, new users of the OS could be put off by how vastly different and inherently confusing life without scroll bars could be.



    I think changing all the aqua to the iTunes style is a good step forward.
Sign In or Register to comment.