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 build 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 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:
-
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. -
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 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
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