Building the Mail app

When we started planning the email experience for Windows 8, our goal was to create an app that embodied the Metro style design principles. It needed to be fast and fluid, be great with touch and a keyboard and mouse, focus on your content, provide the right features at the right time, and fulfill our expectations of email on modern devices. Starting from scratch gave us an opportunity to carry forward the essential functions of an email app, while also designing features with a fresh eye and taking advantage of what Windows 8 offers uniquely.

How people use email today

At the start of our design process, we conducted research into how people use email today. Email has been around for decades. It’s changed a lot and so have our expectations.

Multiple email accounts are common. The average user has 2 to 3 email accounts. One is for work, one is personal, and another account might be used primarily for mailing lists and coupons, or isn’t used frequently, like an account from a school that you no longer attend.

We receive a lot of email. Our data shows that those who we would consider light email users receive more than about 180 messages a week, while heavy email users receive more than 2100 messages a week. These numbers are growing as more services come online and support newsletters, coupons, receipts, and other types of messages via email. We need to make it easy to quickly get through all your email.

Folders aren’t used that often. This is probably a surprise to many people who rely heavily on folders, which is a very common practice in many enterprise environments, and for enthusiasts. At some enterprises, users have up to 50 folders, while the majority of people using Exchange and Hotmail have far fewer folders. The right balance for Mail was to make folders easy to use, but not to optimize for 50+ folders and deeply-nested hierarchies.

Email is real-time. While email is often used for asynchronous communication, where you don’t expect an immediate response, more and more, the expectation is for an immediate, real-time response. After you sign up for a new service, you’re often told to expect an email immediately. We expect to be notified the instant a new email comes in and most people check their email frequently throughout the day or leave it running all day long so they can see every message as it comes in.

People expect consistency with mobile phone experiences. Many people are using their phones in conjunction with their PCs. In fact, they’re using their phones for triage, reading, and filing away of mail (among other things). The importance of consistency between your phone view and PC view of email are more important than ever. The use of standard protocols such as Exchange Active Sync as implemented in the Mail app are increasingly important, especially because this protocol allows for syncing of contacts and calendar, in addition to mail. (Don’t worry, support for other protocols, such as IMAP, are on the way.)

We took these trends into account as guiding principles as we began to consider how people would use the Mail app to manage their email, write messages, and stay up-to-date.

Managing email

Accounts and folders

One of the goals of Metro style design is to emphasize the content of the app, and de-emphasize UI commands or navigation that you use rarely. We wanted the Mail app to allow you to focus on the most important aspects of doing email. The 16:9 aspect ratio of Windows 8 made it possible for us to comfortably fit all the essential pieces of content that we use every day: accounts, folders, messages, and a reading pane. It provides an easy way for you to quickly take in all of your email without switching views, and while still feeling open. This is a change from the way it appeared in Consumer Preview, where we only showed messages and a reading pane. We realized that switching accounts and folders wasn’t fast and fluid enough (and customer feedback supported this conclusion). Because folders and accounts are key pieces of content that you need to see, we updated the design to show them in Release Preview.

.

3-pane design of the Mail app

Both of these realizations led to the 3-pane design that you see in the Release Preview today. This design shows your different accounts so it is just just one tap to switch between them. The unread count on each account makes it easy to see if you have new mail to look at in that account. The same is true for folders. Even though most users don’t have many folders, they are a core way that many people use email, so we made it easy to quickly switch between them. An always-present folder list is especially valuable for people who use server rules to automatically filter their email into specific folders.

Commands

We spent a lot of time deciding which functionality, or commands,would be always visible in the app so that most people wouldn’t be distracted by commands they never used. We decided to include commands for the tasks that every person uses almost every time they launch Mail: creating, responding to, and deleting messages. All the respond commands are grouped into a single top-level command since they preform a similar function. Delete is in the corner, which also aligns with the Cancel command when writing an email.

Some people change the read/unread state of emails or move emails frequently, but for the majority of users, this is actually a pretty rare task. Deleting, starting a new mail, and responding to mail dramatically overshadow these as common tasks, so we made sure these commands would always be visible. The other commands are quickly accessible via the app bar at the bottom of the screen (Windows key + Z, or swipe up from the bottom of the screen, or right-click to invoke the app bar). If you select multiple messages, we anticipate that you’re likely to use “Mark as read” or “Move,” so we automatically bring up the app bar for you.

The app bar automatically appears when you select multiple messages

Message list

In Release Preview, we also updated the message list to show as many messages as possible, to help you get through your email more quickly. The message list spans from the top to the bottom of the app, doesn’t show a message preview, and uses a smaller font than before. At a resolution of 1366x768, this allows you to see 14 messages instead of the 8.5 messages you could see in Consumer Preview. It’s a delicate balance to create a message list that has large enough items to work great for touch, but still provides the density that many enthusiasts expect. We also added profile pictures to the message list, so you can quickly spot messages from the people you care about most, like friends and family. This helps the message list come alive and provide a more personal experience. The profile picture comes from your friends on different social networks that you’ve connected to your Microsoft account.

Reading pane

The reading pane makes it fast and fluid to switch between messages, so you don’t need to go through a full page transition. The reading pane is optimized to be 640px wide so it can fit newsletters, receipts, and other commercial mail without showing a horizontal scrollbar. Also, we’ve found that when using our default reading font, 640px is the optimal width for reading a line of text so you don’t get eye fatigue or lose your place. When you receive an email we restrict the text to conform to this optimal line length, whenever possible.

There is a large profile picture so it’s easy to see who sent the message. We made the subject line bold to make it stand out more in the reading pane, since it sets the context of the message. If you know on the sender or another recipient of the message via a social network that’s connected to your Microsoft account, you can tap on her name to view her profile page in the People app. From there, you can see her latest status, send an IM, etc.

Writing email

The screen you see when writing an email is composed of two panes, side-by-side, so that you have more room to write your message. The touch keyboard limits the amount of vertical space available, so it didn’t make sense to put the To, Cc, and other information above the body of the email. To create more space for your content, we put the To and Cc lines in one pane, and the subject and body into another. This also groups the info logically: all the information related to addressing the message is in one group, and your content is in another. The formatting commands are hidden by default to give you more space to write your email.

.

Writing an email

Even though formatting is not used frequently in email, it is critical when you need it. To make it easier to format messages, Mail automatically shows the formatting commands when you select text in the message pane. After you apply formatting, the commands go away so you have more room to focus on what you’re writing. Our goal is to provide the right commands at the right time. When you’ve selected text, it’s most likely because you want to copy or format that text, so those options automatically come up. Many of the formatting keyboard shortcuts that you’re used to from Outlook work as well.

When writing an email, select some text and the formatting commands automatically appear above the keyboard.

Designed for Windows 8

Another part of designing a great Metro style app is to make sure it takes advantage of the unique aspects of Windows 8. Mail does this by deeply integrating into the operating system to make it easier to share, print, and stay up-to-date on your email.

Snap

I frequently snap Mail to the side of another app (or the desktop) so that I can easily stay on top of it while I’m doing something else. It allows me to instantly see when I have new email and act on it. I can delete, move, or respond directly from the snapped Mail pane, so I can quickly get back to what I was doing. In Release Preview, you can also switch accounts and folders in the snapped state, so you can stay on top of any folder or account while you’re using another app. With these updates, it’s easy to keep the snapped view of Mail up all day long.

This is really useful if you are composing a long email and need to copy and paste things into it from multiple apps. You can start a new message, snap Mail to the side, and then on the main part of the screen, switch between other apps to get everything you need and directly paste it into the message.

.

Mail snapped to the side of IE

Print

Printing is still a common need–to print a ticket, receipt, or coupon you received in email–and it’s something every Windows user expects to just work. In Release Preview, you just need to select the email you want to print, then open the Devices charm and select the printer you want to print it with.

.

Printing in Mail

Share

Mail integrates with the Share contract so that you can easily share to Mail from any app. Many times you don’t want to send something to your entire social network. Instead, you want to send a link, some photos, or a game score to just a few of your friends. Mail provides a great way to accomplish targeted, private sharing from other apps via the Share charm. If you’re sharing with the same group of people again and again, Windows remembers that group so it’s easier to share with them the next time.

.

Open the Share charm from IE and you’ll see a list of the people you commonly share with using Mail

Mail supports sharing text, links, and pictures. If the app provides a public URL, Mail automatically grabs a picture, title, and description from the webpage. Then, you can add your message and send it to your friends. Using Mail from the Share charm looks and behaves the same as the when you compose a new message in the Mail app, so all your formatting keyboard shortcuts still work, like CTRL+B for bold.

.

When you share from a webpage, you can send a preview in Mail

Live tiles

We expect modern devices to always be up-to-date with the latest info. The Mail tile does this by rotating through the last 5 unread and unseen messages. This lets you know if there is something new since the last time you checked your email.

You can also create a secondary tile for any email folder or account, and pin that to the Start screen to see live updates of new mail in just that folder or account. This is very convenient if you use server rules to automatically move email to another folder.

For example, I’ve arranged Start to have separate tiles for my corporate Exchange account and my Hotmail account, so I can easily tell if I have new email in either account.

You can pin tiles to the Start screen for any email account or folder

You can also put these secondary tiles on the lock screen so it’s easy to see if you have new email and what folder it’s in, without signing in to your device.

.

Lock screen with new mail counts for both Exchange and Hotmail

If you want to know immediately when new email arrives, you can turn on notifications for each account by going to Settings, and then Accounts.

New email notification

Of course, all of these are customizable, and if you prefer, you can reduce the amount of information that appears on the tiles or the lock screen. You can turn off Live tiles individually for each of your pinned folders or accounts. Notifications can be controlled for each account from the Settings charm, and include a sleep mode with several levels of silencing.

Always up to date

On a modern device, we just expect to have our email (and other information) always up to date. We also expect our apps to be respectful of CPU usage and battery life. Mail strikes this balance by using the background processing APIs built into Windows 8. These allow the Mail app to be suspended, but still wake up the email sync engine when new email arrives (push) or when a timer fires (polling). We’ve factored the email sync engine into a separate process so that only the minimal amount of functionality is run to keep you up to date and preserve the battery. This is what drives the Mail app’s tile and notifications.

Mail has account-specific settings, so that you can choose the configuration that works best for each account on your device. By default, all accounts will download new email “as items arrive” (push), but you can configure that to happen every 15 minutes, 30 minutes, 1 hour, or manually.

We want to prevent bill shock, so we try to use the minimal amount of data necessary while still delivering a great experience. One way we prevent out-of-control data usage is to only download the last 2 weeks of email by default. We’ve found that most people only actively engage with the last 2 weeks of email, so we don’t download all of the messages in your multi-gigabyte email account unless you specifically configure it that way for any given account. Also, this provides a much faster first download, so you can start acting on your messages more quickly.

Mail default account settings for Exchange

If you’re on a metered network where you pay per MB of data you use, Mail uses the new networking APIs in Windows 8 to detect this, and only downloads the first 20KB of each message body and no attachments. For the majority of messages, this is the entire thing. If it’s a larger email, it’s just one tap to download the rest of the message. If you’re on Wi-Fi, the entire message is downloaded by default.

What’s next

Email is an important part of our daily lives. We’re still continually working to improve Mail and have many more features on the way. Today we’re excited about the response to the app and the first preview release. We believe that people want a great email app that meets their modern expectations and, based on usage, we are seeing this in the Windows 8 Mail app.

Source: Windows 8 Blog