User Experiences: Sites in the Spotlight

September 21st, 2010

The web is changing rapidly. More than ever before, websites provide highly engaging, immersive experiences that people revisit frequently (e.g., web email throughout the day) or stay on for extended periods of time (e.g., Facebook all day). From captivating media to highly interactive web games, from social networking sites to online productivity tools, sites enable people to do things that were previously not possible on the web. In turn, people spend the majority of their time (57%) on the PC on the web.

Our early design explorations and usability studies around Pinned Sites quickly revealed that focusing the browser on the site by reducing the amount of UI made the Pinned Site feature even more useful and desirable – developers have more flexibility in defining the experience and people using the feature are even more engaged in the beautiful, tailored sites. In fact, one of the questions that participants constantly asked in those early usability studies for the Pinned Sites was: “Have you guys considered minimizing the amount of UI for IE all the time?”

When looking at our usage data on how many tabs people use, we realized that an overwhelming majority of IE sessions (time between a window open and close) only have a few tabs – over 97% of IE sessions have 5 or fewer tabs, and more than 90% of users have never had more than 8 tabs open simultaneously. These numbers are consistent even when we filter out short sessions and sessions without navigations. This data helped us realize that the tab row is mostly empty, most of the time, for a great majority of people browsing the web today.

Clicking the Back button, switching to another tab and navigating via the Address bar are 3 of the top 5 most frequent actions that people do in the browser. By combining tabs with the essential navigation functionality and a streamlined Tools menu into a single row of UI, IE9 reduces the amount of vertical screen real estate dedicated to the UI, saving even more room for the important content – sites.

We understand that even though they represent a minority of people who use IE, there are a lot of people who consistently run IE with more than 5 tabs open. In fact, we suspect that most of the people reading this blog post have more than 5 tabs open right now :). In recognition of that, our tab layout algorithm dedicates more room to tabs by default at large screen sizes – at screen widths larger than 1280 pixels, tabs get 2/3 of the window width, and on widths smaller than 1280 pixels, tabs get 50% of window width.

Also, you can control exactly how much space you have for tabs by dragging the border between the Address bar and tabs.

We optimized the browser to be great at the few commands we know the majority of people use, as observed through careful scrutiny of real-world usage data representing hundreds of millions of sessions and tens of millions of users worldwide. A reduction in the number of top-level commands is a reflection of that data. This change also recognizes the fact that modern sites already include a lot of functionality (like sharing or authoring tools) that a browser had to compensate for in the past.

The layout of those top-level commands was influenced by two primary factors – historical consistency and relative usage data. Back and Forward buttons occupy the left-most position that they have always occupied. The Back button is by far the most used command in IE and it has been enlarged to reflect that relative usage. You’ll also notice that the Back button is cut off at the bottom. As important as the Back button is, this visual treatment further reinforces our desire to have the UI “step out of the site’s way,” communicating through the button’s relative z-order (it is “behind” the site) that its importance is lower than the importance we place on the site itself. The cut off also creates some visual interest around the most important command in the UI.

We’ll go into the details of One Box changes and improvements in another post, but it is worth mentioning here that its position is historically consistent. The majority of people see the Address bar as inseparable from Back/Forward functionality and this design respects those expectations. Back, Forward and the Address bar all apply to the active tab and keeping them together also separates them from the tabs, reflecting two basic types of navigation that IE affords and that dominate its UI – navigating within the currently active tab or switching to another tab.

Home and the modified Tools menu are to the right of tabs, where they historically have been in previous releases. Favorites’ positioning between Home and Tools is a change from where the button showed up in the past. This largely reflects the overall desire to support efficient scanning patterns and group similar navigation functionality together. Specifically, Favorites’ being next to Home reflects the fact that both of these commands enable people to quickly navigate to the site(s) they have “bookmarked” in the past.

Favorites bar, Command bar and Status bar are not shown by default. However, they are accessible through customization:

This design decision is consistent with the focus IE9 places on the experience of the site itself and is a reflection of the actual relative usage data for commands on the Favorite bar, Command bar and Status bar. For example:

  • 54% of people have 2 or fewer items on their Favorites bar (we ship with 2 by default); 99% of people have 0 folders on their Favorites bar.
  • The most used item on the Command bar is Favorites Center, clicked on by 30% of people, next is Home with 13%, and after that is Print with 4%. Everything else is lower than 4%. So we still surface at the top-level the most commonly clicked items in the Command bar.
  • The most commonly used item in the Status bar was “Select Preset Zoom” used by 1.6% of people. Setting the zoom level is now possible through the Tools menu, as well as through keyboard shortcuts (Ctrl+, Ctrl+0, Ctrl-).

All of these changes lead to a decrease in visual distraction from sites and a significant reduction in the vertical space that IE9 dedicates to its UI. Here is a visual comparison of the UI height in IE9 and few other browsers.

Vertical UI space is easy to measure and talk about. However, beyond decreasing the vertical UI space, the monochromatic icon treatment (based on the work and findings from the System Tray updates in Windows7) and a tight integration with Windows Glass in the title bar area helps sites to shine as well. These changes provide for a “quieter” frame, one that is not demanding attention. On a related note, by reserving the title bar space for a window drag action, we respect the basic usability expectations that Windows users have in terms of easy application/window management.

We are excited to ensure that in IE9 the spotlight is on sites more strongly than ever before. We are looking forward to Beta feedback and shipping a great user experience in IE9.

Get Microsoft Silverlight

Mirko Mandic
Program Manager, Internet Explorer User Experience