Notifications and Flow

When designing interfaces we often tend to focus on aspects like discoverability and functionality. For instance, if we didn’t place the Web feed glyph in the location bar, how would users be able to discover that they could subscribe to pages?

Feedicon

But what if that small icon based notification of functionality is too subtle, should a Web browser consider using an info bar?

Feedinfobar

What if a browser displays a notification bar for something, and the user doesn’t notice it? Should it check to make sure?

Informationbarmodaldialog

These types of escalating levels of notification can all work to capture the user’s attention, but is there a downside? Often when designing a feature we can be overly focused on what the feature is about, instead of looking at the much larger picture of what the user is thinking and doing. For instance, let’s imagine the user opens their laptop while running to quickly look up the location of an important meeting. They are late, they are frazzled, they are out of breath, and… updating…. some of their extensions are no longer compatible, would they like to check for updates?

Extensionupdates

That’s an extreme (and perhaps a little contrived) example of the browser jumping in the way of the intently focused user, but it’s important to remember that every single question, no matter how small and insignificant, comes with a cost. The cost might occasionally be the user angrily smacking mouse buttons after their browser jumped in their way. Or the user might form a seething hatred for an anthropomorphized paper clip (that is in many ways the polar opposite of this).

Officeassistant

In the case of the Microsoft Office Assistant, it’s easy to think about notifications as choosing to address the user without warning (they literally use a talk bubble). But really every form of notification is fundamentally about choosing to proactively address the user, regardless of how the dialog (in the literal sense) is styled. These are extreme examples of very directly interrupting the focused user. Much more often the notification is a quick question or a small icon, and the cost is just a few eye movements and brain cycles. The user notices the information presented, momentarily decides if they want to act on it, and then moves on. The problem with low impact notifications is that it’s easy to assume that there is no cost, the notification is free, only adding value.

The Cost: Breaking Cognitive Flow

The psychologist Mihály Csíkszentmihályi, defined the concept of flow, a state where the user is focused intently on their task, and the details of the interaction actually fade out of conscious thought. Probably the best way to understand the feeling of this mental state is to find yourself in it. For instance, while driving a car a long distance your mind may start to focus on more creative tasks, like talking to another passenger, or pondering where you should take your next vacation. After awhile, you suddenly realize that you haven’t been consciously thinking about the actual act of driving your car. You haven’t been driving dangerously, you’ve been stopping at stop signs and using your turn signal, it’s just that these details of the interaction were being processed outside of your conscious thought, just as tasks like walking or picking objects up are usually handled outside of conscious thought. The car becomes and extension of yourself that doesn’t need to be managed, and your mind is free to think about more interesting things. If you play a musical instrument you may notice that it can become an extension of yourself, and you don’t think about the details of playing it but simply create music. Or you might notice that you aren’t thinking about the controller when playing a video game, but the game itself. Basically your brain supports process isolation.

It Looks Like You’re Interested in Navigating to a Commonly Visited Web Site!

So what does flow specifically have to with Web browser design? If you think of the browser as your vehicle for exploring any type of information on the Web, it’s obviously very important that the tool cognitively fades away and disappears. It’s content over chrome, but in a mental cycles sense. Aspects like not visually integrating, or displaying a notification, will very easily break flow. Suddenly a few eye movements and brain cycles become a big deal, because it is pulling the user out of a whole cognitive state. The browser is no longer an extension of themselves. It has a question.

Opera, Chrome and Safari are now displaying commonly visited pages when the user opens a new tab, and Mozilla Labs is investigating similar interfaces. This is essentially a notification, without direct prompting the browser is notifying the user of what sites they regularly visit. If the user’s goal when opening a new tab is indeed to visit one of these sites, the interface is pretty convenient. However, if the user’s goal is to go somewhere else, what is the actual cost of the notification?

Mostvisitedsites

Unfortunately we don’t really have an accurate way of monitoring and logging the user’s train of thought to look for breaks. However, just by monitoring my own train of thought and talking to other users, I’ve found a most visited pages notification to be pretty disruptive.

Tools can influence their users just as much as users control their tools. It’s the “when all you have is a hammer everything looks like a nail” effect. So what kind of hammer is the most visited sites interface? I’m worried that it is an interface built around procrastination: it assumes the user is bored instead of curious. It reshapes the nearly infinite Web into a medium more akin to mindless channel surfing or a coffee table full of your favorite magazines. Of course instead of being presented with channels from traditional global media networks and broadcasters (IE4 channel bar), the page is highly customized to your individual tastes. But in terms of the cost of interruption, that just makes the alternate navigation paths all the more compelling. The user is focused on a particular task, and every time they create a new tab to continue working, Firefox attempts to draw them away, like a Siren armed with their full browsing history statistics.

This problem of redirection of intent even cropped up even when users were doing targeted searches with the awesome bar in Firefox 3. We received some feedback that the other results being returned were simply too distracting. Users reported that while looking for one particular page they would be interrupted as they glanced over the other search results, which also looked interesting. Sometimes they would select another result, even though it wasn’t what they were looking for. In terms of ranking results in order of what the user would likely be interested in, the algorithm was working beautifully, but in terms of keeping the user’s train of thought focused on where they initially wanted to go, the interface was failing.

As labs has been experimenting with the new tab interface, I’ve been pretty strongly advocating that they create an interface that isn’t just polite, but actually manages to not to break the user’s flow. This is obviously a rather difficult compromise to establish.

Our current attempt is something we’re calling the “cognitive shield.” This is a very light and (ideally) unobtrusive water mark on the new tab page that transitions to the most visited pages list when you mouse towards it. It’s purpose is to not be particularly interesting. Ideally it is hard to see, easy to miss, and doesn’t (on it’s own) provide any actual information. For instance, if it glowed when a page was updated (or was badged with a number of unread things like many OS X dock icons), it would be failing at it’s role of serving as cognitive shield.

Watermark

There is some type of threshold for breaking the user’s cognitive flow, and we need to figure out what it is and try to stay under it.

I’m interested to see how well the new design performs, please download the extension using the latest development build of Firefox 3.1. Right now the mouse movement to trigger the transition isn’t quite right (so you get some false positives if you are going to focus the location bar), and we still need to think about the visual design of the water mark, but hopefully we’ll be able to actually thread the interactive design needle that is mouse-based browsing and simultaneously maintaining flow. The transition between the water mark and the actual interface should also probably be cleaner, it’s kind of random right now, going from a circle to a list.

Overall we are trying to create an interface where the user controls the browser, instead of the browser controlling the user. Or to put it in terms of proper etiquette:

In the vast majority of cases, the user interface should only speak when spoken to.

11 comments

  1. From my own perspective, Most visited based start pages are one of the most annoying, recent browser developments. In Chrome I find myself, half subconsciously, trying to game the system just to be able to have the pages I want appear.

    I understand that it opts in any user, without the necessity of them actually going to the trouble of setting it up, however I don’t like having my work flow determined by someone else’s concept of how it should be. As unelegant as it might be I think more trust has to be placed in the hands of users on how they want a start page to function and not on the designer, because as designers there’s always the chance that we could get it wrong.

    I prefer (and use) a fast dial based approach, but I think there is still lots of room for improvement.

    Thanks for the thought provoking post.

  2. I think that when you open a new tab that you are usually trying to complete a task where you know where you want to go or what you want to search for. I usually don’t even make new blank tabs anymore. I make new tabs by opening a feed item in a new tab or creating a new tab from the searchbar or awesomebar. There’s also opening links in new tabs but that’s usually part of the same task. When I mistakenly open a new blank tab that’s usually just from it being an old habit. I really should remove the mouse gesture for opening a new tab to break that habit. So for me this is pretty much a moot point. Why does one really need to make new blank tabs? The only thing I can think of is to make sure you don’t mess with the current tab by accidentally not opening you search/awesomeba result in a new tab.

    If the user is bored then they may be looking to see some site they’ve never been to. Opening a new tab could show new sites like stumble upon results.

    But I think you guys got it right with the feed notification. It’s there when you are looking for it. Otherwise it stays out of the way.

    As for most visited sites, my daily visited sites are usually always open thanks to session restore. And why would this most visited new tab interface be better than the most visited smart bookmark already provided by places? (Which I never use anyway)

  3. I already have access to my most visited sites (if I want them) through the “Most Visited” menu on my Bookmarks toolbar. If I want to go to one of those sites, I just click the link, middle-click the one I want, and there it is. I don’t need to open a new tab, “browse” my favorite sites (it’s not like I’ve forgotten them, after all!), and “discover” that I feel like visiting one. I think this is a case where an interface that would be nice for browsing new content, or even reminding the user of old or rare content, is being misused to present the most common sites. It’s totally redundant.

  4. Maybe it would be worth conducting a usability study on this instead of relying on purely anecdotal evidence? It wouldn’t surprise me if Google tested out Chrome’s new tab UI on a group of users before giving it the green light. I know they’ve done similar tests in the past.

    Maybe casual users do, in fact, open new tabs with the intention of going to a site they frequently visit. (I think I read somewhere that the average Internet user really only frequents about ten different Web sites.)

  5. Interesting post.

    Glad to hear you are aware of the possible annoyance factor of this feature. I really hope you manage to get the best of both worlds, i.e. suggest sites but in an unobtrusive way.

    Really good decision to ditch the website miniatures. They really don’t do a good job of (quickly) identifying different sites.

  6. I’ve been using the extension for quite some time, and I find that having news feeds there is distracting.

    My reasons:
    1, It updates with some delay so the whole content moves. It even moves as I have a mouse pointer over it. I haven’t misclicked anything just yet, but I see how I could.

    2, it adds unfamiliar content. For example I have a wikipedia entry there, and rss feeds under wikipedia articles are a highly random list of recent changes to that article. I keep staring at it and wondering “what is this?”

    Has someone considered the following alternative: instead of rss feeds, put more sub-pages from the same domain. If I have a wikipedia article there, add three more (or whatever) wikiedia articles I’ve visited.

  7. “Shiretoko prevented this site (blog.mozilla.org) from asking you to install software on your computer. — [Allow][X]”

    Why did it do that? I *just* clicked to install it—why can’t you just get on with it?

    Shiretoko has prevented the site from asking *me* to install software?! *I’m* the one who wants to install the software! Get on with it, petulant browser.

    ***

    Shiretoko says it has prevented something from happening and offers the option to undo. This immediately begs the question “what did you do *that* for?”.

    Just rephrasing this as “something is about to happen—is this OK?” would seem less intrusive.

    c.f.: “This site (blog.mozilla.org) is about to install software (abouttab-latest.xpi) onto your computer. — [Allow][X]”

  8. I don’t find the new-tab content in chrome annoying at all — it’s no different to me than if it opened up a blank screen. I just ignore what’s in the window and start typing. The cursor is in the right place, and I almost don’t even have to pause.

    In firefox, on the other hand, the cursor doesn’t end up in the right place, so I can’t just start typing. And I haven’t figured out how to quick-key in firefox to the address bar, so I have to go get the mouse to do it. Then, if I didn’t get confused and have to mouse to the search box, I find that firefox brings up a nice list of items that complete what I’ve typed so far, but I have to remember to tab down to the one I want because it doesn’t pick one And, of course, all this happens typically after chrome hangs, so I’ve had to start up firefox, wade through the “update me now” and the “update my extensions now” processes. After all this, it doesn’t really matter because I’ve been interrupted by someone or forgotten what I was going to do, anyway.

    We are serial single-taskers.

  9. Not the right place I suppose, but another Mozilla product is notorious for getting in your way with notifications – THUNDERBIRD!
    Worse of all it suspends all other tasks waiting for you to click on the silly ok button. Now imagine you have 10 email acc’s and one in the middle is unreachable – aaargh.
    Also a pet hate, it has a habit of telling you its busy now and cant do what you need -” Thunder… is busy processing folders, please…” why could it not just queue the request and put a subtle notification in red somewhere with a big yellow exclamation mark on it ?

  10. Funny that you should mention the example of being late to a meeting and getting the dumb extension updater. I experienced that exact scenario just a couple of weeks ago! I needed to look up the address of a meeting on Google maps, and had to fight through the updater. I know some people like lots of control over how and when their software gets updated, and sometimes, I might like that too, but there should be a way to set up REAL automatic, no hassle, completely in the background updating. (and in my humble opinion it should be the default behavior) If you want to make the software unobtrusive keep in mind that the less savvy user, like my mom and dad, would expect that their software is ALWAYS up to date, and they don’t have to fiddle with it. (this is their #1 complaint about Firefox as well) It should download updates in the background, and install them in the background, and take effect the next time I start the software. (I realize this is more difficult on Windows than Mac or Linux, but it is possible at least to update on reboot) It doesn’t have to even tell me it updated, but a little indicator on the status bar wouldn’t hurt. Opening up to a custom homepage designed by the software team should be an option – not automatic. Every time that pops up, and it does for every extension that updates, I have to close all those tabs to get to what I wanted to do in the first place – VERY annoying. I’m sick and tired of having to click to approve an extension or Firefox update or go look for updates. Just update already and let me get on with what I’m doing! And like I said, there should be options for notifications of updates, or approval of various parts of the process for those who want it – But “automatic” and “in the background” should mean just that.

    On another note, I’m not sure where the jab at the Mac dock was headed. I don’t suffer unread stuff on it as you assert. Maybe I turned all that off long ago and don’t remember?

    (thanks for trying to make “most visited pages” invisible as possible. This will be most annoying for all the reasons you state. Heck, why is the team still trying to code it in at all? It’s a really bad idea to start with.)