User Experiences: An Insight into Our Design Process

March 21st, 2011

We wrote about the critical role your feedback plays in helping us refine Internet Explorer. We also described some of the user experience changes in IE9 Release Candidate that were inspired by that feedback. With this post, we provide a deeper insight into our design process by looking at a tab pinning improvement we shipped in the IE9 Release Candidate.

Pin Sites via Tab Drag

The ability to pin a site is a new feature in IE9. People can get quick access to their sites in IE9 by pinning them to the taskbar, just like they pin applications. To provide an even stronger focus on a pinned site, IE9 frame assumes site’s branding. Additionally, Web site developers can improve common tasks specific to their pinned sites by programming jump lists and notifications.

When evaluating pinned sites early on in our usability studies, we noticed that people often expect to be able to pin a site by dragging its tab to the taskbar. For an action that is as “physical” as site pinning, reaching for the most interactive representation of the site in the frame, the tab, made sense. So, in addition to enabling people to pin a site by dragging its favicon to the taskbar, we enabled site pinning via tab drag in Beta.

The Problem – Disambiguate User Intent

However, our Beta builds enabled tab pinning only when the taskbar was at the bottom of the screen. Trying to pin a tab to the taskbar at the top or sides of the screen resulted in window snapping to the screen edge. You noticed that this functionality was missing and this was one of the most frequently reported Beta issues.

Knowing that this was one of the top Beta issues that you reported was particularly interesting in the light of the fact that only about 2% of people who use Windows have their taskbar at a non-default, bottom location. For us, that discrepancy provided yet another reminder that a lot of people who install pre-release builds are remarkably enthusiastic about technology and IE; they often take the time to customize their software and frequently use it in ways that deviate from how the majority of people use it. Even though pinning sites was possible via favicon drag and although we knew that majority of people would never hit this issue, we worked on solving it with the same zeal and attention to detail as on user experience issues with broader impact.

The biggest challenge in solving the problem came from the fact that there are several reasons that can motivate a person to drag a tab:

  • Move the tab within the IE window, changing its location with respect to other open tabs,
  • Drag it to a different or a new IE window,
  • Use Windows 7 Aero Snap feature to snap the tab to the screen edge,
  • Pin a site.

Interpreting the user intent incorrectly in any of these cases would result in an undesirable outcome.

The Goal – Enable Both Tab Pinning and Tab Aero Snap When Taskbar is on Top/Sides

The 1st and 2nd tasks listed above don’t require dragging the tab to the taskbar and we could remove those tasks from consideration. So, we were left with a problem that required reconciling tab Aero Snap and site pinning – when a tab is being dragged over the taskbar, is the person trying to pin the tab to the taskbar or snap the tab to the screen edge?

Since Aero Snap doesn’t allow window snapping to the bottom of the screen, there is no dichotomy when the taskbar is at the bottom – in that case, tab pinning is the only thing that a person can do. And, when it comes to the cases when the taskbar is at the top or on the sides, we knew that always choosing one of the two options wouldn’t always work for all the people, as illustrated in the aforementioned Beta feedback we received. Therefore, our goal was to find a solution that enables both, tab pinning and snapping the tab when taskbar is on the sides or at the top.

Iteration – Top Options

After several rounds of brainstorming and rough sketching, we decided to create medium-fidelity interactive prototypes for two most promising options:

  1. In the 1st option, as soon as the person started dragging a tab, we would show target UI adjacent to the taskbar. Dragging the tab onto the target UI would pin it; dragging it to any other taskbar surface would snap the tab to the window edge.

  2. In the 2nd prototype, we enabled the person to use a single motion to alternate between pinning and tab snapping. Dragging the tab onto any point within the taskbar would enable the person to pin the tab first.

    If the person didn’t want to pin the tab, she could just drag the tab away and back over the taskbar again without releasing the mouse. At that point, the window would snap to the edge.

    This solution intentionally favored tab pinning over tab Aero Snap since we anticipated that tab pinning would be more frequent of the two actions, under the premise that people would drag the entire window (and not a specific tab) when wanting to snap it to an edge.

The Solution – Single, Continuous Motion

We analyzed the pros and cons of both ideas. We also shared these two prototypes with Microsoft employees who weren’t directly involved with the problem space, looking for quick feedback on the desirability of each.

After analyzing the different design proposals and measuring them against the two key scenarios (pinning and tab Aero Snap), we decided to pursue the 2nd option for few reasons:

  • It was more flexible than the 1st one. In it, the pinned site could go exactly where the person wanted it to show up on the taskbar. Contrarily, with the 1st design, the target UI was always showing up in the same taskbar location (at the end of the list of taskbar applications) and the person was forced to pin her site at that location.
  • It was less “loud” and more in line with our overarching goal of highlighting Web content and not focusing on the application itself. There was no additional UI, no new concepts to learn, no target UI showing up when people moved tabs for reasons other than wanting to pin them to the taskbar. Simply, it “just worked.”
  • It was more fluid. Through a single, continuous action, the person was enabled to both pin and snap the tab to an edge.

We hope you enjoy being able to pin your tabs to the taskbar in the Release Candidate build of IE, even if your taskbar is not at the bottom of the screen. We also hope you enjoyed reading about how we went from a realization that there is an opportunity to improve the user experience to actually designing the change that shipped to millions of people.

Thanks for your continuous support and for your help in making IE9 great.

—Mirko Mandic, Program Manager, Internet Explorer