User Experiences: An Insight into Our Design Process

项目
03/21/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 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

Comments

Anonymous
March 21, 2011
Great stuff IE team, now get your brothers over on the WP team to provide this same type of feedback, improvement loop and engineering blog...PLEASE!
Anonymous
March 21, 2011
In RTM, I am unable to SHIFT+drag a site to the taskbar to create a legacy URL shortcut instead of pinned site shortcut. Also, the reason I prefer the URL shortcut is because it has a tab in Properties to change its icon and target should the URL change. The Pinned Site Shortcut also had this tab in the beta but for the sake of taking more control away from the user, the IE team removed the property sheet in the RC to change the icon and change the target URL.
Anonymous
March 21, 2011
This is still a failure either way. When I pin the site it takes on UI changes based on a COLOR from that site. My browsers' UI now no longer conforms to IE in general there's a new icon, and my home button is gone. (BAD) Then when I open new tabs to other sites, the UI chrome remains that of the original tab. Why? When I close the original tab and I have 2-5 other tabs in the frame... the custom UI for a tab that doesn't exist still remains. Why? If I pin a site that pointed to a PDF or other local webpage - why does the pin remain when the file is deleted. How do I get rid of it? Why bother adding options to the task list on the taskbar item? I will never navigate away from the top part of a pinned site to access features of that site that are already right at the top of the site! This is totally counter-intuitive. Finally, why was Move/Resize/Maximize options removed from the taskbar right click menu? these were the only features that I actually found to be HANDY in that list!
Anonymous
March 21, 2011
How would you address pinned shortcuts where the web site author has not included a favicon? For example, I've pinned a shortcut to Bugzilla and one to the HTML 5 spec at the W3C. Both have the generic IE icon, and that makes them difficult to distinguish from each other. It appears in pre-release versions of IE 9 users were able to change the icon of the pinned shortcuts through a "Website" tab in the Properties dialog (see windowstotal.com/how-to-change-pinned-website-icons-in-ie9). A user on Super User (Stack Exchange) posted a solution to my dilemma, but it doesn't seem to work. (See superuser.com/.../can-you-change-the-icon-of-a-pinned-ie-9-web-application-and-how-do-you-do-it.) Is there a way for users to address this problem, or are there features coming from the IE team that will address this? Thanks, Rick
Anonymous
March 21, 2011
Interestingly but that feature doesn't work if you have two monitors and the taskbar is "in the middle" of the two, i.e. on the right side of the left monitor, or on the left side of the right monitor. Yes, this is the way I use my taskbar and I must say it's quite comfortable. Too bad it isn't supported for tab pinning. My only option is to drag by favicon which seems to work.
Anonymous
March 21, 2011
For some reason, the release version of IE9 causes Microsoft SharedView to crash when joining a session. I proved this out by building a VM of Win 7 x64 and installing SharedView. I connected successfully to an ongoing session. I then installed IE9 and after reboot, attempted to reconnect to that session. Instead I got the message that SharedView Console had crashed. Allowing VS 2010 to "debug" the issue shows an unhandled exception in SharedView.exe with the call stack showing mshtml.dll at the top. As, I said above, I've been using IE9 through beta and RC and have not had this issue before. Hope this info helps.
Anonymous
March 21, 2011
could I offer a feature for some ui love next time around? The File dialog, used not just for saving but for any interaction between local files and Web apps, is as ugly as XP and about as annoying for the way it forgets everything between interactions. For 'recent places' reverting to the default of alphabetical order rather than last modified is less than helpful. As Web apps become more used in pinned sites, there's more likelihood of interaction with local files in them; that's not a good experience in the current dialog.
Anonymous
March 21, 2011
The comment has been removed
Anonymous
March 21, 2011
@Mirko Mandic: "We hope you enjoy being able to pin your tabs to the taskbar in the Release Candidate build of IE" -- uuh, seems like this post was in the queue for quite some time! Great it found its way :) @Still a failure either way: 1) The customized colors always remain the same after the browser started. What's so bad about this? I would freak out if the colors would change whenever I change tabs. 2) How should the browser determine that you deleted the target of a taskbar icon? Taskbar is part of Windows, not IE. 3) Move/Resize/Maximize was also changed by Windows 7 and has nothing do to with IE9. Shift+Right click your icon to get the old system menu.
Anonymous
March 21, 2011
I think people will pin sites on the taskbar more than on the Start menu, but the default option on Tools > File > is Pin to Start menu.
Anonymous
March 21, 2011
Hello IE9 team! i have a question... I reseted Internet Explorer 9 on my windows 7 computer.. Should everything on Internet Explorer be the way it was When i first installed IE9? And I hope in the next version of Internet Explorer when ever it is. make IE make a restore point and put a undo reset in internet explorer.
Anonymous
March 22, 2011
The comment has been removed
Anonymous
March 22, 2011
Although i think it is neat that you can do it - why bother? I have a bookmarks/favorites bar/panel... where I can save 10's, 100's, or 1,000's of links in an easy to see format that I can even search/sort. Pinning 2-5 sites to my task bar to consume taskbar real-estate 24/7 makes no sense at all. I will not be one of the lemmings to switch to this when it clearly shows much less possibilities and intrinsic limits.
Anonymous
March 22, 2011
Ignoring all the trolls- here's a real question from a client-side dev: How was the choice made to use <meta> tags rather than the html 5 <nav> element to automatically generate this list without having to add extra markup? Is that something that may be looked at for a later version of IE / an update to version 9?
Anonymous
March 22, 2011
Pinned sites in theory is a good idea but I feel that it's kind of half baked at the moment .Addons beign disabled is a deal breaker for me . I use speckie,roboform & simple adblock and these don't work with pinned sites ;not something I would call a good browsing experience. Also For some reason IE's password manager doesn't ask me whether I want to save passwords
Anonymous
March 22, 2011
When i type something in the address bar and clicking the search button a ? always appears in the first word. Is that normal? are there any reason for the ? being displayed?
Anonymous
March 22, 2011
Anybody else having trouble downloading Opera or Firefox in IE 9? HP's support site won't load in 9 so I needed a browser that worked. Took a while but finally got Opera to go, then used that to download Firefox (easy as pie) and used them to get to HP to get drivers Server 2008 couldn't get for me (it just never ends with these guys). Microsoft, it's not the 90's anymore. You have competition now.
Anonymous
March 22, 2011
you guys remove the status bar completely in IE9 please make it similar to chrome and FF4 at least by showing more information like it's connecting, waiting and transferring.
Anonymous
March 22, 2011
@Si55y: "When i type something in the address bar and clicking the search button a ? always appears in the first word. Is that normal? are there any reason for the ? being displayed?" The ? at the start means that it will perform a search for whatever you type in the address bar.
Anonymous
March 22, 2011
For years, I've dragged favicons from the address bar to the desktop to create reminders for Web pages (for later reading; after reading, I deleted the .url file from the desktop). With IE9, after dropping the favicon, IE9 immediately opens the Web page in a new pinned site window. However, I dont't want to open the Web page at this time, I just created the shortcut for later use. Thus, I've to close the automatically opened IE window each time after creating the Web page shortcut. In addition, IE always creates the desktop shortcut as a pinned site (all add-ons are disabled after double-clicking the .url file). How can I create just a plain shortcut to the active Web page on the desktop (as it was possible from IE4-IE8)?
Anonymous
March 22, 2011
If you drag the tab to the taskbar (situated at default-pos: hor/bottom), it asks for Pin to Taskbar, but if you keep dragging away from the taskbar, it let you do so while keeping the drag item as tab rather a separate window... But if someone drag the tab to the top of the screen, the aero snap is activated which creates a new window for the tab. But if the intent was to reposition the tab and the user is still dragging away from the top-aero-snap location, it should undo the aero-snap on the tab and undo the window creation at the same time so the user ends up with dragging the tab rather a separate window.
Anonymous
March 22, 2011
See this screenshot IE team: img101.imageshack.us/.../tablistcontrol.jpg (login to imageshack if you can't view this image). IE9 can't login to imageshack btw in either mode. not even in compatibility view mode. By removing the tab list control (Ctrl+Shift+Q), it is now difficult to see which update is which on the tabs without switching to or hovering over each tab. The tab list enabled me to quickly jump to any tab I wanted as it showed the full name of the tab without truncating it.
Anonymous
March 22, 2011
I'm still lacking to see what's so great about "pinned sites". The taskbar is not a garbage collector.
Anonymous
March 24, 2011
I have abandoned your "talanted" browser right now.
Anonymous
March 31, 2011
What no spell check? Where's the share/send to option tools for pics?

通过