User Experiences: An Insight into Our Design Process


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:

  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:

    Screen shot showing pinning a site to a taskbar on the left side of the screen

    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 (25)

  1. dkb1898 says:

    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!

  2. tuxplorer says:

    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.

  3. Still a failure either way says:

    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!

  4. Rick Roth says:

    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

  5. Roman says:

    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.

  6. Jason Hanford-Smith says:

    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.

  7. FileDialogsNeedLoveToo says:

    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.

  8. tuxplorer says:

    So you know have at least 3 core things to fix for IE 9.1/9.5 or IE10. 1. Give us back a dedicated search box as certain functions can only be performed and much faster with a dedicated search box.   2. Re-instate the property sheet to customize pinned site shortcut (.website) icon and target.  3. Fix the blurry text by not forcing ClearType on users.

  9. Ooh says:

    @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.

  10. Sterling says:

    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.

  11. Mario says:

    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.

  12. JohnCz says:

    While I think pinning sites is great, its experience and potential is hampered by several factors…

    1. Too many user chooses…to add to Favorites Bar or to Pin a Site is the question.  I think Microsoft should ditch favorites and leverage pinned sites.  Hiding Favorites Bar might buy IE team a little time but its in no way the proper solution.  Finish it in IE10.

    2. Limitation of Windows Taskbar to properly present & organize a large number of pinned sites.  IE should either provide a custom Windows taskbar to help with organizing  pinned sites or better yet, the Windows team should redesign the startbutton/taskbar/desktop to provide this system capability.

    3. Yuck, left with a text menu for Tools. How circa 1995 is that?  By default with pinned sites, all toolbars are hidden leaving the user only the Tools button to access print, etc.  That Tools button really really sucks.  Its not touch friendly.  At least the command bar, I can place a handy print icon there for easy access.  Frankly, the IE team needs redesign all lower level menus/screens to be touch friendly…its a nightmare today.

    4. Unexpected Result: Why is there an address "onebox" box if the site is supposed to act like an application?  If I'm viewing a pinned site and then go to another domain, shouldn't my addons and toolbars be visible for that browser tab?

  13. Pinned Sites Doomed to Fail says:

    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.

  14. Jack says:

    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?

  15. hdw says:

    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

  16. Si55y says:

    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?

  17. hannsg says:

    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.

  18. Si55y says:

    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.

  19. Echo 8 says:

    @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.

  20. Roland says:

    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)?

  21. DanglingPointer says:

    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.

  22. tuxplorer says:

    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.

  23. KS says:

    I'm still lacking to see what's so great about "pinned sites". The taskbar is not a garbage collector.

  24. mpoleg says:

    I have abandoned your "talanted" browser right now.

  25. takeylynn says:

    What no spell check? Where's the share/send to option tools for pics?