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:

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.

Tabs Want to be Seen

I’ve been posting lately about how browsing in Firefox could be greatly enhanced with visual navigation. Last month, I posted about Control+Tab, a new Firefox 3.1 feature which is the first step in this direction. Now, let’s take another step by improving Control+Tab to meet the needs of more users.

Design for everyone is hard…

The hardest thing about designing for Firefox is that the solutions have to meet the needs of everyone, and everyone is different. There are generalizations that can be made about how humans tend to behave, but each person works and even thinks differently – even from moment to moment. So, good designs for Firefox should support different ways of working and thinking.

An issue with the current design of Control+Tab is that it supports one way of working but neglects others. For people that often switch between two tabs, this is an excellent quick key-stroke. But for people who switch between three or four or hundreds of tabs, it isn’t very efficient. A better system would adapt as a user’s browsing session changes and allow for multiple modes of use, drawing on the many ways our memory encodes and recalls items.

…let’s go shopping (for existing solutions)!

If you’re on Windows or Gnome/KDE, hit Alt+Tab (Cmd+Tab on Mac). What you should see is a visual preview of your running windows or applications, and likely in most-recently-used order. This display does some important things that the new Control+Tab feature doesn’t. Most importantly, it allows for visual search as well as quick-switching. If your last used item is in your short-term memory, it’s a quick keystroke to flip back to it – just like Control+Tab. However, if you have an idea of what something looks like, just visually scan to the match. If your item is recent, tab over to it – if not select it with your cursor. Another benefit of this system is that it gives you a survey of your whole inventory so you can get a sense of not only what kinds of items are open, but how much content there is.  This is a positive solution for operating systems, and I believe it’s a positive solution for Firefox too.

This method even integrates well with operating system seach: Cmd, Alt, and Ctrl are all near each other, so you change between OS-wide and browser-wide preview by a shift of the thumb. It could also be designed to have a visual look identical to the current OS previews.

This new version would also solve some of the general problems with Control+Tab, such as only showing three previews at once and having to wait for distracting animations. Also, by introducing grid-view, the linear view of Control+Tab would no longer compete visually with the linear list of tabs in the shelf chrome.

This is, like the previous Control-Tab, is only a step in the right direction. There will be plenty more to do from here. For instance, application icons are recognizable and therefore don’t need labels – tabs probably do. There are also ways to enable search and content organization from this window eventually – but I’ll blog about that later. For now, I just want to continue the discussion on Control+Tab that’s currently going on in bugs and hopefully reach a consensus on what to build for 3.1.

Control-Tab: A New Feature for Firefox

As many of you know, Dão Gottwald has been working for awhile on his Ctrl-Tab add-on. Ctrl-Tab has two parts: a filmstrip that allows the user to quickly jump to recently used tabs, and a tab preview mode. These features have been widely used, and lately we at Mozilla have been working to give them a home as a Firefox feature.

Dão and I have been working on the design of a feature based on Ctrl-Tab, while Dão has been building patches. We’re happy to announce the filmstrip of recently-viewed tabs landed today and will show up in tomorrow’s nightlies as a new Firefox feature: Control-Tab.

Since this change will affect current Firefox users’ workflow, I want to describe briefly how Control-Tab works, why it is being added, and what changes you’ll see.

How does Control-Tab work?

Pressing Control-Tab in Firefox will bring up a filmstrip view of your recently visited tabs. Pressing Tab repeatedly with Control held down will cycle through thumbnails of the tabs you’ve visited in order, with each press of Tab going one thumbnail back in time.

Why Is Control-Tab being added?

  • Fast Switching between Tabs. Control-Tab will show thumbnails of the last tabs you have visited in the order you have visited them. This means that if you’re on Site A, pressing Control-Tab will take you to Site B that you last visited. Pressing Control-Tab again will take you back to A, and again to B, etc. This is useful if you need to quickly flip between two tabs that aren’t next to each other and makes it easier to carry out tasks which require multiple tabs.
  • Visual Navigation. Control-Tab shows thumbnails of your previously used tabs, so finding them by sight is fast. This is especially helpful if you’ve opened up so many tabs that some are obscured.

What’s going to change?

Pressing Control-Tab will no longer open the next tab (Control-PageDown still will). We know that expert users are used to this shortcut, and changing it will mean an annoying adjustment.  However, we’re creating Control-Tab because we feel the benefits it offers are greater than the drawback of having to adjust your workflow.

Control-Tab is a first step towards increased visual navigation and content organization features, and we would love to hear what you think. Usage and feedback of Control-Tab will help guide future designs and features, so please leave a comment here or in the forums to tell us your opinion.

Is visual navigation ahead for Firefox?

The release of Firefox 3 has happened, and there was much rejoicing. And now, our sights are set for Firefox 3.1 and beyond.

As I wrote in a previous post, a lot of people’s sights are on better ways to incorporate visual navigation into Firefox (see posts from Madhava, Aza, Bryan, and Andy.)

Some ways of incorporating visual navigation are relatively minor and would actually bring more consistency to the Firefox interface, allowing the same navigation for tabs as already exist for bookmarks and tags. Two of these are:

  1. Awesomebar results giving indication if an item is already opened in a tab (see Madhava’s post )
  2. Tabs shown in the sidebar, and thus easily scanned, deleted en masse, and grouped by characteristics such as domain and frequency of visit

Another quick way to add visual navigation to content is to expand tooltips to include information such as thumbnails.

These changes are fairly basic and nondisruptive to the current workflow. However, more substantial ways of browsing content could pay off in increased efficiency online.

In brainstorming what some of these could be, I thought about the drawbacks of the current system of tabbed browsing. One problem is that tabs are displayed linearly, while the tasks they contain can be sprawling and nonlinear. In the following sketch, the user is visiting five domains, but the tab structure gives no visual indication of the link between the tabs other than the favicon and title:

Being able to group open tabs by domain is one way to address this problem. In the following sketch, based on an idea by Jay Sullivan, the user clicks and holds down a tab. This produces a drop-down menu which shows all tabs open for that domain. This interaction mirrors the operating system method of seeing all windows open for a particular application in that application’s menu.

Another way to bring visual navigation to Firefox would be to expand the metaphor of the desktop and bring its interactions into the browser. The current Firefox library is similar to an OS file directory, but with none of the visual navigation that OSes do well. Allowing the user to navigate their library visually would draw on a familiar metaphor, give visual navigation only when needed, and perhaps ease users into the browser and desktop beginning to merge. Certainly one could imagine dragging a “file” from the Firefox library onto the desktop, turning the item into a web application.

As always, more details are in the wiki and comments are very welcome!

What’s Google doing in Hong Kong?

No really, what are they doing?  I ran into this outside Admiralty MTR station.

Giant Google map pointers in  Hong Kong

Browser Functionality vs. Extensions

It was great to get so much valuable feedback in response to my last post about possible future interactions with tabs.

There was a lot of discussion about the role of browser functionality vs. optional extension functionality.  This is definitely a useful conversation to have, as our notion of what features should be in the browser will certainly change as we redefine what the browser is.  I do think that the extensions that are the most useful to the most people are the ones that eventually should work their way into the browser.

The way I see the browser is the way I see my beloved Honda Civic.  My Honda is not the sexiest car on the road, and it certainly doesn’t come with a ton of complicated features and aesthetic additions.  What it is is a solid and fun car experience for about any user.  And any feature added to a Civic, like seatbelts or a radio, has to pass many tests to be proven right for all drivers before it comes standard.  So one way to look at the incredible work of the Firefox extensions community is as a unique testing-ground for what users actually want the future browser to look like.  The features that are most popular give us a glimpse of how users want their browsing experience to change.  And because there are so many excellent extensions regarding tabs, I take that as a sign that people love their tabs but want them to work a little harder.

Improving tabs

There’s been a lot of recent forum and blog posts on the subject of tabs. Brian Clark’s and Aza Raskin’s posts got me thinking about how tabs are one of the tiny changes that redefined the web browsing experience, but they still have plenty of shortcomings. These shortcomings are primarily in the areas of preview and search, and are exacerbated when people use a superhuman number of tabs at once. The system wasn’t quite designed for this, but if it’s how people work best the system needs to adjust – not the users.

Here’s some problem with the current system:

  • No way to preview content in tabs
  • Current tab disambiguation with favicon and title often identical for many tabs
  • When many tabs are open, most are obscured under excess tab menu. This prevents the user from quickly finding the tab they want and getting a sense of how many tabs they have open (see Aza’s post).
  • No way to detect multiple instances of the same tab.
  • No way to search open tabs textually or visually.
  • No way to tell loading status of tabbed content.

Over the past couple weeks, I’ve been sketching some possible first steps at solutions to these problems.

Prototype 1: Tab preview

The first prototype is for a quick way to preview tabbed content as thumbnails. The user goes to any tab and drags down to see thumbnail previews of the tabs at the top. If the user continues to pull down, he sees thumbnails of previously obscured tabs. If a tab is only partially loaded, this is represented by a semi-transparent loaded bar over the tab.

This addresses the problem of many tabs looking identical by allowing the user to get a quick view of what’s open and what’s loaded.

The user can drag a tab to the left, right, or bottom of the screen to move all of their tab previews.

Sketch 2: Tab Management

These sketches are for a separate “tab management” window, where the user can organize and view tabs visually. They can view open tabs as a grid, a list, or in “scatter,” mode. Scatter mode provides the user with a free-form arrangement of tabs (and possibly history) which they can organize spatially. The user can choose to view their tabs in scatter mode:

  • By site. This groups tabs together by what domain they were reached through. If the user has ten articles open from the New York Times, these will be grouped together with the New York Times homepage being largest.
  • By topic. This groups tabs together by what searches they were accessed through. If the user has performed a Google search on San Francisco restaurants, all tabs resulting from this search are grouped together.
  • By recency & frequency. Using the idea behind the Awesomebar, sites which are visited frequently and recently appear larger in tab view and are thus easier and faster to recognize and click.
  • In freeform.  The user can resize and move tabs, grouping them in whatever way fits with their working model for a project.  They can add labels and fields to help create organizational systems and save their tab configurations for future sessions.

More details and sketches on these prototypes can be found in the wiki.  I’d love to hear thoughts and feedback. These are in no way final solutions, but more of a way to move the discussion forward by addressing specific tab concerns.  So, please feel free to reply to this post or email at jboriss at mozilla dot com.