User Experiences: Site-Centric Browsing on Windows

Dean shared earlier today that the IE9 beta is available for download at www.BeautyOfTheWeb.com! Through continuous releases of the IE9 platform preview we’ve shown how the platform uses the whole power of the PC to deliver HTML5 experiences that feel like Windows applications. Sites can create amazing experiences through hardware-accelerated SVG, canvas, video and audio that use the same markup across HTML5 browsers. We anticipate a new class of sites for this era of modern browsers. Our objective with IE9 is to create a user experience that complements these immersive sites and make them shine.

IE9 on Windows 7

Today, sites are contained in the context of the browser, and the way to launch, consume, and interact with them is through the box of the browser.  This is different from how people interact with Windows applications – each application has its own representation on the Taskbar, with the fundamental conveniences of launching, switching and jumping to a specific task.  We found that people fully utilize these capabilities on the PC. For example, 86% of people who use Windows 7 launch applications from the Taskbar.

People spend about half their time in the browser and the other half in Windows applications. Today, only the Windows application experience is represented on the Taskbar.

A typical setup of the Windows 7 Taskbar – Windows 7 customer data

Shouldn’t all the things you do on the PC be at your fingertips? If people spend a significant time on the PC reading news, shopping, socializing and watching videos, shouldn’t the Taskbar look more like this?

The Windows 7 Taskbar with sites through IE9

We focused on an experience for sites in the context of the entire PC instead of the browser. We were inspired by having sites on the Taskbar, and further explored how sites could be the primary focus. These explorations, research, and discussions led us to the user experience goals for IE9.

We want IE9 to be great at three things – helping sites shine, being a natural extension of Windows 7, and delivering the fundamentals of a fast, safe, and reliable experience.

A natural extension of Windows 7

We start by looking at the environment in which sites live in – the PC. Our approach is that your favorite sites should be a natural part of the PC experience. By building on what you know and enjoy with Windows 7, it not only makes tasks on the web easier to do, it increases your confidence in the overall experience of the PC. Your sites are now an integrated part of the whole system.

Your Sites on the Taskbar

The Taskbar is the most used piece of user interface of Windows 7. With IE9, you can pin your sites on the Taskbar. This is much more than just a “shortcut” – these are sites that can fully take advantage of the Taskbar capabilities you already know how to use; Jump Lists for common tasks and destinations, Thumbnail Toolbars to interact with sites directly, and icon overlays for site notifications. 

Facebook Jump List tasks and new content notification Jango with audio Thumbnail Toolbars

By simply dragging a tab to the Taskbar, the site is pinned there for immediate access. Your Taskbar can now be personalized to how you use your PC.

You can pin any site to your Taskbar, and in a future blog post we’ll describe how site developers can create Jump Lists, Thumbnail Toolbars, and more ways to make sites flow into the Windows 7 experience.

Tab Aero Snap

Tabs are a way to organize lots of sites in one window, and it’s a great way to queue up search results, news articles, or whatever you want to get to later. In addition to queuing up pages, people want to view pages side-by-side – for instance watching a video while reading an article or comparing two product reviews on separate sites. We want to make this task easier for you to do.

We learned that 40% of sessions have two or more windows visible at the same time. This was the main motivation to design Aero Snap to swiftly arrange two windows for a side-by-side view. For IE9, we wanted to extend that ability to tabs in the way that people understand today. With IE9’s integration with Windows 7, a tab behaves like a window where you can snap it to the side of a screen for a side-by-side view of web content.

The experience as you drag a tab is smooth and the rendering is continuous throughout the entire motion – for instance if the webpage has an active video, you can watch the video play as you drag the tab.

Sites shine in the browser

When designing the interface itself, we took a step back and thought about the browser design exclusively from the perspective of the sites. Traditionally browsers approach the interface in a browser-centric way, where the focus is about the capabilities of the browser and not the site.

We asked ourselves what can we do to help sites shine?.. We began by looking at the ways people use the browser. We instrumented over 700+ of the commands and controls in IE8 and analyzed the ways in which people use these commands and controls. It was clear that there were some that were used a lot more often than others.

Browser Command and Controls Usage Graph

We took the top 90% of controls used and broke them down by task: interact with the site content, navigate to other sites, or change the settings on the browser. From there, we mapped out how often these controls are used within a browsing session.

Occurences of top 90% of controls. 64% are Site experiences, 36% are navigation related and 0.4% are browser settings related

The majority of browser usage is within the sites’ content (like clicking on hyperlinks and copying content on a page) followed by navigating to sites and switching between sites through the Address Bar and tabs. A distant last is modifying the browser settings (like deleting browsing history and rearranging links on the Favorites Bar). Comparing the use of the IE-specific commands and controls with the use of Windows 7 controls like the Taskbar, we had the opportunity to make what’s easy and familiar on Windows available for websites and the people who browse them.

A Site-Centric Design

First, we optimized IE9 to integrate well into Windows 7 through the things that you know and use already - Taskbar and Aero Snap. Within the browser, we prioritized the site content first, followed by the navigation controls with a natural way to get to browser settings.

The frame layout surfaces only the most essential controls for navigation. The linear layout of the controls makes efficient use of the growing horizontal dimension that we see with wide screen laptops and desktops. This gives even more space to sites.

IE9 on Windows 7

The IE9 site-centric frame brings focus to the site content, especially when the site is pinned to the Taskbar:

Amazon frame when pinned to the Taskbar CNN frame when pinned to the Taskbar

Through the use of a glass frame, monochrome treatment of controls, and the back and forward buttons that take on the branding of the site icon, the browser visually recedes to the background. Even though settings are rarely used, they are important when you need them. The way to get to the settings needs to be predictable, which is why we put them all in one location in the new tools button in the upper right corner of the frame.

By removing distractions in the frame of the browser and integrating with the Taskbar, the focus of IE9 is shifted from the browser to the site content and getting you where you want to go quickly.

A Quieter Notification Model

The browser needs to communicate with the user to provide a safe and reliable experience, for example to notify when a site is trying to pop-up a window or to indicate browser history deletion. To minimize interruptions and keep the focus on your sites, we looked at all the different forms and occurrences of notifications that browsers use today – dialogs, balloons, gleams, sounds, and information bars.

We discovered that we could create a quieter notification experience so that people can see, hear, and experience the site, not the browser. The new notification bar delivers suggestions in a consistent and clear manner that is decoupled from the site. For instance, through the notification bar you can choose to accept file downloads, save passwords, or choose to ignore these entirely. This keeps you browsing, and you have the choice to interact with the suggestions you care about.

Notification bar at the bottom of the page asking if the user wants to save their password.

Fast, Safe and Reliable Features

The experience isn’t complete without fast, safe and reliable browsing.  Each feature is designed with the whole system in mind, so that in combination browsing is fast and fluid. Here’s a quick glimpse at the features we’ll share in greater detail in future blog posts:

  • An integrated navigate and search experience that respects your privacy with One Box.

  • A new tab page to quickly get you to your popular sites with a design that helps you easily recognize the sites you visit often.

  • A smooth file download experience with built-in safety through the SmartScreen Application Reputation service.

  • A new Add-ons Performance Advisor that gives you performance information to help you decide which add-ons you want use. You’re in control of your browsing experience and which add-ons you use.

  • An improved hang recovery experience that isolates site issues from the rest of the browser.

The IE9 platform and user experience have a combined mission to provide the best experience for your sites, using the full power of your Windows PC. With the IE9 beta your web sites shine.

Install the IE9 beta at www.BeautyOfTheWeb.com and browse around with the new frame, Aero Snap with a tab, and pin your favorite sites to the Taskbar. Some fun ones to try are Facebook, WSJ Magazine, CNN, Discovery Channel, IMDb, Amazon, Jango, PhotoBucket and more from beautyoftheweb.com). We are eager to share more detail about the design and process in the coming weeks and look forward to your feedback (from the tools menu)!

Send Feedback option in the Tools menu

Jane Kim
Program Manager Lead of User Experience