User Experiences: Quieter Notifications

Today, there are various ways in which the browser communicates with you to help provide a safe and reliable browsing experience. IE9 emphasizes site content, to keep your focus on the site, with a quiet and consistent way for the browser to communicate with you.

This builds on the work done in Windows 7 to reduce notifications (see Chaitanya’s blog post that talks about the Windows notification area as “The whisperer”). We designed a new notification bar that delivers messages in a consistent and clear manner while allowing you to keep your focus on the site content.

This blog post explains how we’ve classified notifications and reduced browsing interruptions through a design that is both available and ignorable.

When you drive on the highway, you want to focus on your driving. Any sign post on the road is a potential distraction and can be dangerous, but some signs also convey useful information. Similarly, in the browser, any notification has the potential to distract from your browsing, and at the same time, you depend on the browser to keep you safe and warn you about security or privacy concerns.

Quieter

We set out to minimize unnecessary distractions and quiet the overall experience so you can focus on your sites. We looked at all the forms of notifications in IE and placed them into 3 categories – blocking messages, suggestions and affirmations.

Blocking messages typically come in the form of a dialog that takes focus and forces you to act upon it immediately. This can be perceived as an “interruption” to browsing. These should be used sparingly for when the browser needs consent before moving forward. On the road, this is analogous to a stop sign. You have to come to a full stop – think about what to do and move forward. For example, if the SmartScreen Filter detects that the webpage is a phishing site, IE gives a full-page blocking experience to warn you that this is believed to be a malicious site.

Suggestions are actionable messages that do not require a decision before proceeding. Like an exit sign on the road, you can choose to act on the browser’s suggestion if you want to or ignore it and continue browsing. Examples include the browser asking if you want to save the password for a web site.

Affirmations inform you of something that happened but isn’t actionable. An example is the browser telling you that your browsing history was successfully cleared after you delete your browsing history.

Through this classification, we then looked at how these notifications are surfaced in browsing: dialogs, balloons, information bars, gleams, and sounds. We found that many of these could be removed, and overall we removed 23 blocking dialogs. Some of these were unnecessary confirmations, like “Are you sure you want to delete this Favorite?” We also turned off the sound made when you click on a link since the browser offers other cues (ex: address bar update and the spinning doughnut on the tab) to indicate that it received your input (Sounds can be re-enabled in Internet Options > Advanced > Play System Sounds).

Next, we found that some blocking messages could be converted to suggestions or affirmations so that they are less disruptive. These are presented in the new notification bar.

For example, when you log into your web mail account, IE asks if you want to save your password. We know from telemetry data that 45% of people like to save their password, and in IE8 this question appears in the form of a dialog that requires an answer. We want to continue providing this functionality and in IE9, the password experience is available through the notification bar where you can choose to store your password, or simply continue using your web mail without answering the question.

The illustration below shows how we mapped these messages in IE8 to the notification experience in IE9.

Designed to be available and ignorable

The notification bar is designed to be available and ignorable to keep the primary focus on the site. However, while we want people to focus on sites, we also want them to easily find a message from IE when they are looking for something.

One aspect that helped us achieve this goal is striking the right balance between “noisy” and “quiet”. If there are too many notifications, people tend to ignore them and might miss an important message. As mentioned above, we kept or removed messages based on telemetry data around how often people interacted with them and the options they chose. We found that the current design achieves on this goal through our user studies. In eye-tracking studies, we found that all participants noticed and interacted with most of the notification bars they cared about, particularly as we progressed through the session.

It’s important that notifications are consistent and have the same UI appear at the same location. This way, people have one place to look for messages from IE. To aid this, we’ve also moved all the information bars from the top to the new notification bar. With a consistent and predictable place for all notifications, people are able to ignore the notification and are able to find it easily when they want to interact with it.

Less visual noise helps notifications be ignorable. We prioritized reducing noise over discovery and have this new control be a learnable design so that over time people will naturally look to the bottom for notifications. Since it is new look and behavior, we recognize that this may take a couple of times before one will notice the new location. We saw in usability studies that participants in the lab easily adapted to the new experience and location. Participants liked the fact that the notification bar was no longer “in your face,” like the password dialog. Some participants looked at but did not interact with notifications they didn’t want to. A few specifically mentioned that they could continue to browse instead of being interrupted by a dialog. This was in line with the goals of the design – to be both noticeable when necessary and ignorable when not.

A clean experience with less visual noise is also achieved by showing only one notification bar at a time. All notifications are prioritized such that the most important notifications are at the top and once people interact with a notification, the next one becomes visible. Notifications which are shown as the result of a user action are given highest priority (ex: downloading a file). Suggestions which are actionable and can improve the user’s browsing experience (ex: add-on performance notifications) are next in line, while affirmations (ex: “Your browsing history has been deleted”) have the lowest priority.

Since notification bars are designed to be out of your way, they persist beyond a single navigation only if it makes sense to persist them across navigations without change of context. This helps people continue their task and act on IE’s suggestion at a time of their convenience. In the password example mentioned above when you log into your email account, you can first click on your inbox and as your emails load, you can choose to save your password. Most Suggestions will go away when you navigate to a different site.

Fast

We also considered the performance impact of a notification. The information bar in previous versions of IE (and other browsers) pops from the top of the frame into the content area and causes the web page to re-layout. This can take valuable seconds depending on the complexity of the page. With IE9’s emphasis on improving all-around performance, we designed the notifications to overlay the content and de-coupled the bar from the web page layout area to avoid any delay. Web pages often have critical information at the top of the page (their branding, navigation menu, search box, sign in controls). By placing the bar at the bottom, we avoid obscuring important page elements.

Trust and confidence

It’s important that people know that a notification comes from IE without distracting the focus on the site content. We’ve stylized the notification bar to be similar to the Windows Action Center, where the use of the yellow bar indicates secondary information. The horizontal bar provides a clear separation from the page for easy readability. In our user studies we found that participants were able to identify that the message was coming from IE. One participant shared:

“I assume that's the browser. It's Internet Explorer saving it, not being done through the website itself. When the window pops up on the browser at the same spot as manage add-ons and stuff like that, it seems like it’s all part of the deal there.”

Internet Explorer is designed to be secure-by-default: privileged actions like showing a popup or downloading a file are automatically blocked. People may use the Notification Bar to override the browser’s default behavior and grant a page permission to perform a privileged action.

Handy Shortcuts

You can use these handy shortcuts to interact with the notification bar through the keyboard: