Do you use your back button?

Patrick Dubroy suspects you don’t.

Today he spoke at Mozilla about his very interesting research and field studies regarding how people use tabs in Firefox. He found that people who don’t use tabs really aren’t using the back button much – his participants’ median was once per 50 clicks, and that the more tabs a user opens the less they use the back button.

This really gives voice to some of the thoughts I was having about how the back button and tabs are related. In a sense, the back button is allowing you to go back in history blindly – there’s no way (other than remembering) to know where pressing back will take you. Opening new pages in tabs, however, give you a visual indicator of where you’d been, and allows you to skip backwards in time as far as you need. It can also prevent procrastination by showing you what you were doing (“Right, I was answering an email before I opened 5 Wikipedia pages”).

Another problematic relation between tabs and the back button, as Patrick pointed out, is that your 10 open tabs may all have different back histories. How can you possibly be expected to remember all 10 histories? You can’t, and if you have 10 tabs you probably aren’t using back much as a result.

Another problem of the back button is that it doesn’t work with all media (such as Flash sites) and sucks with web applications (like Google documents). I’ve been trapped many times by accidentally pressing back while banking or using a form, only to find that my data has been lost. These sites tend to offer their own navigation methods.

So, what tabs and the back button have in common is that they are ways to manage browsing histories. Tabs may have made an improvement on the back button, but they still present some navigation limitations.

HTML5 video tag update

Some changes are coming for the HTML5 video tag in the nightlies:

- Time-scrubber will be implemented
- Volume control will work (not just mute/unmute)
- Controls will be invisible until mouseover for videos that play on load, and visible until the user presses play for videos that don’t play on load
- Some graphic spiffups:

The graphics are being changed (in part because of your feedback) with attention to providing better contrast on differently colored backgrounds.

Other features coming up soon are notification when a video is buffering, and perhaps a time elapsed/total time indication.

The design for the controls is about as simple as it can be, because much like the browser, it is there to help you navigate your content but not compete with your content. I was surprised looking around the web at how over-designed and branded so many video controls are.

I maded you a meme…

Happy Memeday! Here’s two I made for Mozilla (click for larger versions).

First: Sorry sdwilsh:

Second: This has long been our malicious site test page:

I’d like to change the top graphic to this:

Give me my tools and back off

A good UI can balance a lot of contradictions. For instance, it should be discoverable – the user must be able to find that it’s there and what it does. But also, it should be invisible – a good UI steps aside and gives the user what he needs without making a big deal of itself.

Often, games get this balance very right. Partially that’s because the task is defined by the game itself, and partially because tutorials are something games do well and software does poorly.

Today’s thing-that-gets-it-right is a Auditorium, a silly Flash game with an elegant, discoverable UI that gives you exactly what you need and no more.

In my opinion, good user experience should feel like playing a game. Your graphics editor, programming toolkit, and web browser should be able to mirror that intense concentration you feel stalking a kill in Halo. If that sounds far-fetched, think about how you work in a state of flow. Like in a game, you lose track of time and are focused on your task – not your tools. In flow, either you’ve mastered your tools, or your tools are well-designed, or both. I think of flow as the goal in many user experience problems. For every UI design decision you make, you can ask if it helps induce flow for your user: Does it make your user’s tasks easier? Are the user’s available choices clear? Does it present the right balance of freedom and direction?

Content-aware resizing knows what you want

One of the biggest challenges of user experience design is predicting what the user wants. The best system possible is one that knows what you want completely and provides it before you ask. The worst system is one that thinks it knows what you want but is always wrong. An example of the former is sitting down to your computer in the morning and seeing the two new sites you always open first ready and loaded. An example of the latter is Clippy, the adaptive menus in Microsoft Office 2003, and any scene from the Jetson’s.

Two ways to predict what the user wants are by 1. knowing him better, and by 2. having more intelligent tools. A browser knows you go to Huffington Post and the New York Times every morning, because it sees your daily browsing habits and knows you’re liberal scum. But if a task is common and difficult, sometimes a more intelligent tool can be the fix.

Here’s a more intelligent tool to get excited about: content-aware image resizing in Photoshop CS4 (hat tip: Frederic Wenzel). This feature lets you resize an image while respecting its subject and complexity by scaling the non-complex, boring bits. Adobe has a promo video up, and here is a video from the Israeli researchers who thought of it first. This is a photo editing task which is normally quite difficult and tedious, and with better tools the user experience is massively improved.

Facebook is acting like your mother, and she’s very disappointed in you

I hate online ads, in part because they are anti-user experience. Good user experience enables users by giving them positive interactions with the content and tools they want to access, while advertising steers them away from what they want to access. While user experience caters to users’ wants and needs, advertising attempts to hijack them. User experience focuses, advertising distracts.

Fair enough, we’re intelligent people and know that pinching the monkey won’t win us an iPod. But lately, I’m even more disturbed by Facebook’s acutely targeted advertising. It goes beyond critisizing your purchases and begins to critisize you. Mossop pointed out to me last week that Facebook is analyzing your profile and selecting ads which more than suggest a product, suggest you should be living your life differently. I checked my own profile, and here’s what I found:

Lots of engagement rings. Nowhere in my profile have I mentioned an interest in getting married, but I’m a female over a certain age and I fall in Facebook’s targeted social bracket. Facebook thinks it’s about time! Facebook wants grandchildren!

The trend here is disturbing – that as advertising becomes “better,” it begins to sound less like an annoying child and more like a judging peer group. You know you’re fat, because ads are telling you about diet plans. You know you’re old, because ads are telling you about wrinkle cream. We’ve heard complaints that advertising gives us unreasonable expectations from body image to income, but in the pre-digital age these expectations were leveled at no one in particular. With the internet, these ads are targeted at you – your life, your problems, and your choices. If we continue to not care how much companies like Facebook and their advertisers learn about us, the projection here is grim – that advertising becomes a more increasingly personalized, feeding on our insecurities and urging us to conform through consumption.

I’m not trying to be alarmist here, but only say that we must care about where our data goes. The game here is becoming more interesting, because the nature of the internet and even free speech is at stake. Yesterday, the Guardian wrote that the South Korea, a democracy, would like to more heavily police the internet and essentially terminate its anonymity (link). Steps away from anonymous data are harmful ones. Gabe’s dickwad theory aside, the anonymity of the internet is a wonderfully subversive thing – it can guarantee freedom of speech for those otherwise without it. Mitchell Baker has been posting recently about why Mozilla should think about and respond to data (introduction, related topics, what Mozilla should do). Here, she write that Mozilla’s principles of enriching lives, providing security, and giving us control of our online experience “are at risk if individuals have no control over the creation or use of the data that describes us.” How to protect users while still steering away from proprietary data will be a difficult problem to tackle, but we’re in a good place to start the discussion.

HTML 5 video tag, pirate edition

Ahoy mateys of the open source seas! Here’s another thing coming in Firefox 3.1: open source HTML 5 video support! This is going to bring some cool new functionality to developers, such as being able to access video elements through the DOM, intersperse video with other web content, and manipulate playback with JavaScript – all without the need for lubber bilge monkey plugins (see blizzard’s post).

A project I took over from the comely wench Wei was to design the controls for the video tag. So, how should they look? The first design iterations focused on geling with Firefox’s overall branding. However, thinking the problem over, these video controls are different from Firefox’s chrome and menus because they appear in the content of a page itself. So, though maintaining Firefox’s brand look & feel throughout the browser is important, I think not interfering with web content is more important. To create “Firefoxy” controls on videos would essentially brand a user’s videos. So, I’m proposing something more neutral and would love feedback:

10 Reasons Firefox won’t be worried about Chrome

Oh internets, you hysterical zeitgeist, please simmer down. Google Chrome is not the end of Firefox. Another open-source browser is not going to bring down Mozilla’s ten years of development and evolution overnight. Here’s a quick 10 reasons not to panic:

10. Chrome is going to have problems releasing on Mac and Linux. You have to imagine it broke Google’s heart not to release for Mac and Linux when they released for Windows. The only conceivable reason they didn’t release for all must be huge, ugly dev problems that will take a lot of time and work to tackle. For instance, I’m guessing they can’t do multiple process rendering to a single window on Mac yet. There’s no supported way to do this as far as I know. And that’s only the beginning of the challenges involved with multiple processes (more here).

9. Chrome wants to be like Firefox. Many of Chrome’s main features – such as its “omnibar,” private user mode with icon, one-click bookmarks, and drop-down notifications are lifted directly from Firefox’s features and planned features. In places they used Mozilla’s code directly. I think this says that Chrome would like to be more like Firefox than its statements imply.

8. Chrome’s got security issues to work out. One biggie is its vulnerability to carpet-bombing attacks. Another is malicious links through undefined handlers.

7. Navigating your tabs and windows is impossible in Chrome. In Firefox, not only can you install one of a countless number of extensions for organizing, sorting, coloring, grouping, fading, and poking your tabs , but also cool new features are being added that allow you to visually navigate your content. How do you find your tab in Chrome? You don’t… tabs are the same color, have no favicon or visual differentiation, and there’s not even a way to see the names of tabs when you have too many in a window.

6. What we’re hearing about Chrome is mostly hype. Chrome’s an interesting new project from Google, so of course the media is chroming at the mouth (pun credit) to tell you all about it, but this is how the media makes money. A plethora of coverage does not prove Chrome is the best browser, it proves it is the newest. We won’t really know what people think of Chrome until the smoke clears and people use it in their daily lives.

5. Chrome is an unfinished product that still lacks polish. While most Google products are in “beta,” this one has a ton of kinks to work out. Google’s documented some of the bugs here, and new ones are being reported here. Sure, Firefox has plenty of issues itself, but Mozilla’s been documenting and fixing them for a decade. Chrome isn’t even fully compliant with CSS yet. For more on why Chrome lacks polish, see Peter Svensson’s article

4. Mozilla has a dedicated fan base. I’d argue more dedicated than any other browser’s users. Have you ever met a passionate user of Internet Explorer? Chrome has plenty of people excited, but it’s unlikely to gain the same kind of loyalty that Firefox enjoys from its users worldwide.

3. Competition will only make Firefox better. Competing with Internet Explorer can at times be a bit too easy, because the product is so bad and so different from Firefox. But Chrome offers new challenges in the areas Firefox cares about, such as open standards and open source. Finally, a worthy competitor for Mozilla. I also predict that Mozilla will be more willing to make substantial improvements faster now that Chrome’s in play. And, unlike Google, Firefox is Mozilla’s flagship project and has the undivided attention of many more developers. Mozilla’s focus is fixed on the browser, but Google’s main attention is on search revenue.

2. Chrome can’t match Mozilla’s extensions, tools, and plug-ins. Mozilla has an ever-growing community of developers who build excellent tools for customizing your web experience. For nearly anything you want to change about your experience in Firefox, an add-on is available for free. If it’s not there, you can write and distribute your own add-on. Many of these add-ons have their own communities and companies – they’re established and depend on Firefox to reach their users. Chrome is starting out with nothing comparable in place and thus a user experience that isn’t customizable.

1. You can’t beat Mozilla’s community. What makes Firefox awesome is its volunteer army – the thousands of developers and supporters throughout the world that contribute to Firefox’s evolution. Forget even the Mozilla employees – the community is the heart and soul of the project. This is something Google can’t develop easily, even with all their employees and resources.

So what we’re looking at is not the end of Firefox, but another exciting step towards open innovation on the web. For a more on Mozilla’s exciting new challenges, see Mitchell Baker’s and John Lilly’s comments.

New Control+Tab Discussion Thread

Thanks everyone for contributing to the discussion on Control+Tab on my posts here and here. We’re going to be making the main thread of discussion from now on here, in dev.apps.firefox’s Google Group, so all the conversation going on in bugs & blogs can come together as we narrow down the design space to the final solution. I encourage everyone who commented earlier will continue to join in!

Tab View vs. Application View

I posted on Wednesday about why the new Control+Tab feature should be changed so that it both displays all tabs and looks native to whatever operating system it is displayed on. To make the point of the importance of native look and feel, I posted Control+Tab as it would look designed exactly like Cmd+Tab on OSX.

With that image I wanted to make the point that looking native to the OS is important.  The final visual design of Control+Tab would need to factor in the differences between tab and application preview. So, here’s the version I’d actually like to see be in 3.1. Labels have been added to tabs, so that a user can perform textual as well as visual search. This is especially useful when tabs can look similar (application preview rarely results in indistinguishable icons). Also, I’ve decreased the opacity so that the text can be read on multiple backgrounds. This new opacity is the same as OSX’s opacity in “Quick Look” mode. I suspect that Quick Look is darker than Command+Tab for exactly this reason – text is displayed throughout Quick Look mode.

Also, being able to close tabs from this preview mode I believe is important. I suspect a use case will be that if the user has too many tabs open, accessing this Control+Tab preview will be a quick way for them to close the tabs they are done with without having to navigate to them individually. Because the user would only close a tab that they are targeting, the close icon does not appear on a tab until the user has targeted it.

Windows’ preview mode already has text, so the design there would be very similar to current Alt+Tab.