A behind-the-scenes look at designing the new Hotmail: part two

A behind-the-scenes look at designing the new Hotmail: part two

  • Comments 23
  • Likes

In the first part of this series on the design process for the new Hotmail, I mentioned the very important role that user feedback plays and highlighted the principles we use to make decisions that lead to meaningful, discoverable improvements for our users. Now that the new Hotmail has been released to the whole world, I wanted to provide a closer look at it and share our thoughts on the iterations that went into creating some of the new features.

Helping users clean out the clutter and find important mail quickly

In the new Hotmail, we wanted to make it easy to do email “triage.” That’s what we call the process of managing email – deleting the stuff you don’t want, junking the stuff that slipped through spam filters, and filing away important stuff you want to keep.

A couple of requirements we kept in mind:

  • One-click access to find important messages (e.g., "from contacts," “from social networks,” etc.)
  • Quick ways for busy people to remove clutter from their inbox

We worked with multiple concepts before defining exactly what we wanted to do. Here are some of the ones we tried out.

Early Concept 1: Making a fun interaction by putting the filters as buttons on top of the message list

In this concept, the big buttons would be the way you would “show” or “hide” email in the various categories. How’d it do? Well, in user testing, people felt it took up too much space and required too much interaction. It was kind of fun to use, but we heard comments like “awkward” and “cumbersome,” which clearly didn’t fit with what we were trying to do.

Filters, take one

Early Concept 2: Doing something more expected by putting the filters as links in the message list

In this concept, simple links in the message list would allow one-click filtering. We ended up throwing this concept out because it was virtually impossible to get a multi-filtered view using this model (not super helpful for triage mode). Not only that, but adding these links to each line item in the message list would further reduce the available space for more important stuff like the sender’s name and the message subject. Not good.

Filters, take two

Mid-Process Concept 3: Narrowing it down with split dropdowns for the filters

The approach here shows where we were mid-way through our design and research process. “Split dropdowns” are what we call something that has two behaviors—you could click “Contacts” and filter by contacts, or you could click the arrow and see a dropdown menu with other options. To take up less space, the filters were grouped into two categories: “concepts” (e.g. “from contacts”, “from social networks” etc.) and “status” (read, unread, flagged, etc.). However, this design just didn’t allow for one-click access. Back to the drawing board…

Filters, take three

Mid-Process Concept 4: Dumping dropdowns and making the filters into simple text links on top of the message list

Another option we explored was just surfacing all of the filters as text links by default. We tested this pretty extensively in usability sessions (as well as in a longitudinal study over several months) and found that since the filter links were aligned right, they were pretty much invisible. That didn’t fit the bill either.

Filters, take four

Final: Putting it all together, with the filters as text links (aligned left) on top of the message list

So here is where we landed. We removed the blue link treatment, aligned them left (at the expense of our sorting functionality, which migrated to the less visible far right icon). We also evaluated this in usability testing and found that once folks interacted with the filters, it was clear to them how the filters worked, and over time, they grew to love them. Boom! Goal achieved: an easy way to slice and dice the message list for quickly managing your email.

Filters, take five. And... scene.

Hotmail’s navigation and overall UI

One of the harder principles to sort out is the idea that change is bad unless it’s great. To accommodate all the new features we wanted to add, we knew that we had to evolve the overall “wrapper” (that’s what we call the outer edges of the Hotmail interface). But we didn’t want to disorient anyone.

One of the first places we started was the left-hand navigation. We knew that we wanted to make the left-hand navigation in Hotmail work more like the left-hand navigation in Windows Explorer for Windows 7. This goal was hard to achieve, but it made sense to us, in order to make your overall Windows experience feel consistent.

Early concept

Early on, we explored placing the search entry box in the left-hand navigation area. We also made the “cogs” (which open little panels for actions like “manage folders”) visible by default. Given our desire to reduce distractions, we ended up making the cogs visible only when you move your mouse near them. That made them harder to find, but it tidied up the interface. Another decision we made early on was to remove the active email address. This allowed the top of the blue box around “Inbox” to be nicely aligned with the box around the message list.

Left navigation area, early concept

Final decision

Late in the process, we decided to move search out of the left-hand navigation area since it didn’t really have a lot of space for typing. We relabeled “Contacts” to be “Messenger” since we wanted to make sure folks knew that this wasn’t simply a contact list for sending email – it’s a way to start IM’ing!

Left navigation area, final

Conversation threading (back and forth conversations in email)

As we started working on conversation threading, we paid close attention to how Gmail, Outlook, and of course our sister product, Windows Live Mail, handled the feature. We all agreed that none of those designs were optimal for the Hotmail experience. We knew that we needed a design that would allow users to understand distinct messages in a thread, turn threading on/off easily, and collapse unread messages in an elegant and intuitive manner. We also were conscious of the fact that conversation threading was going to be new to a lot of people. So we wanted something that would be completely clear at a glance.

Early on, we thought about email conservations being more like instant messaging, with speech bubbles:

Conversations as message bubbles

The trouble with bubbles is that they limit the overall width available to the message, so we tried another approach. To help each box “feel” like an individual message, we put a big ol’ yellow Unread envelope at the top. We also added a “show message history” as a way to build a bridge to the previous messages in the conversation and began exploring where to place reply actions.

Unread envelope and show message history

The next image shows where we were toward the end of the process, when we were still exploring where to put the reply actions. Here, we moved these actions to the top. We felt it was close, but one of the biggest pieces of feedback folks in our user studies told us was, “Hey, when I have a long message, I have to scroll all the way to the top to respond.” The concerns around customers seeing where each individual message starts and ends were something we had to take care of.

Reply actions at the top

After this, we moved the reply actions to both the command bar and the bottom of each page. To help users reply to individual messages, we also provided an “actions” pull-down menu within each message.

Finally, reply actions at the top and the bottom

The biggest issues we faced—breaks between messages, the placement of reply actions, and overall layout—required extensive iteration, consideration, and feedback from customers.

Could conversations be the default view for all Hotmail customers?

We asked our longitudinal study participants whether they wanted to use the existing “one line per message in the inbox” approach or group messages by conversations. That is, “Should everyone on Hotmail see messages grouped by conversations by default?” We gathered feedback after 7 days, 45 days, and 90 days, and here’s what we heard them say:

Popularity of conversations trended downward over time

Needless to say, this told us that we probably shouldn’t turn it on for everybody. It was promising at first (72% said “yes”) but over time it slid progressively downwards from 58% to 51% the last time we asked, so we’ve left “conversations” as something each individual user can turn on.

These features took a lot of time to get just right, and they represent a lot of hard work. Needless to say, we’re thrilled with the way they came out, and judging from what we heard before and all the way through our design process, we think you’ll like it too.

I hope you’re enjoying this look at how and why we do what we do here at Hotmail. Part three will be coming soon, with a look at some more of the fun and super useful things we’ve put together for you. Check back soon.

Michael Kopcsak – Senior User Experience Lead, Windows Live

23 Comments
You must be logged in to comment. Sign in or Join Now
  • Dave T
    7 Posts

    Michael (David or Ben):

    1) It would be nice to be able to clean up the contacts (i.e. delete, correct spellings, etc)  right in the pull down used for inserting them in the "to" field. As it is I have to go to Contacts (or Messenger as you oddly prefer to rename them in some places) and edit them there. This is a cumbersome chore. You may consider revamping, make that do a major overhaul of, the contacts feature as part of v4.1 (or whatever your version numbers are up to now, I've lost track).

    2) I would appreciate more than a single arrow and arrow-to-the-bottom (or top) for the inbox page turning feature. I have thousands of emails in my inbox and I would like a way to page through them faster than one...page...at...a...time. Please add a skip-5 or -10 pages feature or the next 5 or 10 page numbers in between the forward and backward arrows. Also, how about a page number at the bottom of the inbox? Oh so simple!

    Thanks.

  • remain
    9 Posts

    The other thing I forgot to mention in my last post:

    A forum format would also allow for feedback to not be only "one-way" (like feedback.live.com is), but it could go back and forth between the users and the developers. For instance, if a piece of feedback was valid and useful, but more information or clarification might be needed, then a forum format would allow for the conversation to continue.

    But once again, I know this would be excessively time-consuming for developers. (Heck, responding to users' problems, bug reports and suggestions could be a full-time job...)

    @ Ben Vincent

    "the PM team are very focused on reviewing and acting on our customers' input. You'd actually be very surprised to know how much of the feedback comments, blog comments, forum postings and support issues we discuss on a daily basis."

    Very glad to know that!

    I think a lot of users, myself included, wonder just how often those "send feedback" forms are actually read. And not just with Microsoft products, but with ANY company.

    Often, it feels like you write on a sheet of paper and then slide it through a small slot in a giant wall, then you just *hope* someone on the other side will eventually read it.

    Anyway, thanks again for your time.

  • @Remain - Whilst our Developers are focused on coding at the moment, the PM team are very focused on reviewing and acting on our customers' input. You'd actually be very surprised to know how much of the feedback comments, blog comments, forum postings and support issues we discuss on a daily basis.

    One thing we also discussed just today was how many feedback entry points exists. This is something we will continue to improve over time.

    Ben

  • remain
    9 Posts

    Hisun Kim:

    << @remain, thanks for the followup. Web IM team has a plan in place to reflect more accurate status so that your friends would know that you are not 'Available'. Thank you. >>

    That's great to hear.

    Should the changes be expected in the following weeks? Or in the next major update in a few months?

    Thank you for the reply.

    I'd like to also mention that it would be nice if there were an official forum that allows us users and developers to interact, mainly for bug reports and feature requests/suggestions.

    feedback.live.com may allow for feedback to be submitted, but I think 1 insightful and detailed feedback submission might be drowned out by 1000 unhelpful ones ("it doesnt work!!", "i cant login!!!", etc.). I highly doubt developers have the time to sort through all the noise to find the genuinely useful feedback.

    That said, I do understand that such a forum would not be very feasible, since I doubt developers have the time to interact with users on a forum on a daily basis.

    Ah well...

  • I have two different live email addresses and was trying to use the options to allow one to send email from the other. When Hotmail creates the email to click the link to authorize this, the link results in an error. Is this a bug?

  • @remain, thanks for the followup. Web IM team has a plan in place to reflect more accurate status so that your friends would know that you are not 'Available'. Thank you.

  • @caroleboisvert - We have disabled auto sign in but if you already have the cookie you will continue to be signed in. Clearing your cookies for *.live.com should stop it happening. Let me know if this doesn't resolve the problem.

  • Is there a way to NOT sign in automatically to Messenger when checking my Hotmail messages? I really want to turn this feature off. Thank you.

  • I'm thoroughly impressed with thew new user interface and experience in Hotmail. It's interesting to see how Hotmail was developed and refined to the point where we are at today, and I'm glad that the team took it's time and did their homework to ship an excellent product instead of shipping something half-baked.

    I like how the items on the left hand side of the screen are more interactive (e.g. collapsible sections & quick access menus when you hover over the appropriate sections and click on the cog). I also think that it was a good idea to remove the user's e-mail address from the Inbox view as, IMO, it was generally pointless.

  • langware
    154 Posts

    @bg1,

    The "View Message Source" feature is still there, but Microsoft chose to FIRST require that one open a message before its source can be viewed (I think that was a poor design choice). Once you open a message (either in preview or full view), then click the Actions link (at top right). You will see "View Message Source" in the drop down list.

    I think that Hotmail should retain the feature of viewing a message's source BEFORE having to open the message. Since that feature was part of the previous release, it cannot be too difficult to put that feature back (put the View Message Source feature into the drop down list that is displayed when one right clicks a message's check box in the inbox or other folder view .... probably 5 minutes of coding would fix this problem).

    Anyone from the Hotmail Design team care to offer a good technical reason why the ability to view a message - BEFORE the message is opened - was removed from Wave4????

  • @wesdo SSL (HTTPS) is coming soon per our launch announcement. Stay tuned.

  • wesdo
    4 Posts

    I like you frequent postings, keep up the work.

    One question though, when will httpS be possible? Where is MS dedication to security here?

  • Some things that seem awkward to me and could use some cleaning up, would be great if we could create sub-folders within folders. Also, the folder list should be able to be sorted and add some space between folders. They start to all run together.

  • New hotmail is awesome. However, I don't still get why Hotmail is killing itself by not providing cross integration across multiple platforms. Not having an IMAP support in today's world is inexcusable. I got my hotmail account when I was 10 years old (23 now) and I have been using it everyday, however, over time it is becoming my alternative email account. Because Gmail is able to synch across my blackberry, iphone, and non-microsoft email clients, I have more range and more options to use it. If you provide such great service why not extend it across smartphones, and other devices. Add as many features as you want, if you don't get imap and better integrate your service for non-microsoft products you will cede control to other email services. It is kind of sad that we have to use a third-party software (izymail) to get imap support for hotmail.

  • bg1
    1 Posts

    Where is the "view message source" function?  Without it Hotmail is useless.

    I don't trust any emails I receive so I used to simply right click on each email to view the message source before opening it (avoids malicious email from activating something on opening).  What happened to view message source function?

  • Newbie
    2 Posts

    Social updates filter doesnt show comments or any other messagers from Facebook.

  • remain
    9 Posts

    Hello.

    I would like to bring once again to the developers' attention the following issue:

    In the previous blog entry entitied "Hotmail respects your inbox," I made a post to report a bug in the Web-based Messenger interface that is integrated into Windows Live pages.

    Here was a post:

    ==========================

    <<By the way, I have a fairly major bug to report for the new Windows Live, particularly regarding the web-based Messenger that is now integrated into any Windows Live page.

    If you sign in on the web-based Messenger, and then you navigate away from the page, whether it be going to a non-Windows Live page or just plain closing the window, you will keep appearing online to others.

    And the worst is, if people send you messages while you're in this 'false' online state, you will NEVER get these messages. No, they will NOT be received by you when you get on Messenger (web-based or client) next time, unlike offline messages.

    This is fairly serious, I think, since this would mean people would see you as online, and send you messages, and expect that you actually received them. But you didn't and NEVER WILL.

    I know this is not the place to report bugs, and this is quite off-topic to this blog post, but I really do hope this will be fixed very soon, as I find it to be a very huge flaw. [...]>>

    ==========================

    Hisun Kim responded to my post with the following:

    <<@remain Thanks for your feedback. There's 2 minutes window we keep a user logged in when hethey just navigates away without explicitly signing out from Messenger, for the user's own error correction and smooth perf in short comeback. We will keep an eye on this issue for those unexpected side effects as you observed.>>

    ==========================

    In another blog entry entitled "Windows Live Messenger full or compact view—you decide," I replied:

    <<[...] I understand the idea behind the 2-minute window. In fact, I suspected that this was the reason for it, since a user might keep navigating from page to page, so you'll see the user go online-offline-online-offline constantly.

    However, I do believe that 2 minutes is MUCH too long of a window. ESPECIALLY when the user has completely left Windows Live pages. This is worsened by the fact that this also means that for 2 minutes, this user's friends will be sending messages that will VANISH into thin air and never be received. EVER. And they will not know about it at all. [...] >>

    Hisun Kim did reply once again and mentioned that they were "reviewing [their] design for possible solutions with this issue."

    I do indeed hope that this issue will be fixed soon.

    It's been around 2 months since my original message. Also, many users have been using the new web-based Messenger for 1-3 months now, especially as the new Hotmail (a super popular service) has been rolling out.

    This issue essentially affects every single user of the web-based Messenger. Now that the Hotmail rollout is complete, this could mean A LOT of people. We're talking millions here.

    Now, every time I sign into Messenger from Hotmail or other Windows Live pages and then I sign off or navigate away, I always worry that someone would send me a message shortly after, thinking I'm still online, and yet, I will never receive it and neither me nor the other person will ever know about it.

    Thank you once again for your time and attention!

    (I apologize yet again for the slightly off-topic post.)

  • danielgr
    73 Posts

    Btw, still missing the possibility of choosing the spell checking language... although less than in WLM. At least in hotmail I can use browser based spell checkers, but I still don't understand what's the point of the hotmail tool if you can't tell it the language.

    I do believe many people outside the US and UK constantly write e-mails in several languages... And it's even more frustrating if you consider Microsoft has all those dictionaries available, since it's enough to change the account settings to get the one you want. Obviously though, that's not something you are going to do every time you want to write an e-mail... Just give me a language drop box !!! Please !!!

  • danielgr
    73 Posts

    Two questions:

    - Why couldn't you get my own answers within conversations in WLM as you are doing in the web-based client & Outlook 2010? Now I find myself preferring to use the web client even at home...

    - Where are the new promised skydrive integration for sending documents / photo albums? Unless I missed something, I can't get anything but the old school photo/file sending stuff.

    PS: Love the new hotmail

  • 7flavor
    352 Posts

    The new Hotmail is great but switching linked accounts isn't as easy as the previous version. When I click my account name to make the dropdown appear, it doesn't always appear reliably, sometimes I need to double click to make it appear and then again switching doesn't work sometimes by single click. Please improve this area. With the earlier Hotmail, I could check all 5 of my email accounts in less than a minute. Now it's a bit time consuming.

  • qiziq
    23 Posts

    @JohnCz.  I too made the mistake of clicking on "show CC/BCC".  Cannot find any way to hide.

  • caoke
    4 Posts

    I like the new Hotmail. I feel that the loading progress is a little longer than I expected (I’m in China). Gmail has a loading progress bar. It’s a good design.

    Most of we Chinese don’t us facebook, youtube,flick,etc (we are in the world’s greatest LAN…). We want to link to the local services in Hotmail.

  • JohnCz
    204 Posts

    Alot of great UI work in this release.  A less glamorous feature I really like is Advanced Search.  And even simple changes like enabling users to expand Bing photo/clipart search results to display more content enhances the overall experience.

    One bug I've noticed, when you display CC/BCC in the compose message screen...it seems to set that as a default and you can't hide those items again (at least I haven't found a way to do that).

    The two Hotmail features I still would like to see implemented is the ability to Insert/Remove Signature (if configured) and to paste images from Windows Clipboard.