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:
We worked with multiple concepts before defining exactly what we wanted to do. Here are some of the ones we tried out.
- 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
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.
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.
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…
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.
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.
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.
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!
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:
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.
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.
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.
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:
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
More...