June, 2007

Jun 07

Why the iPhone is no Newton

Happy iPhone day everyone (iPhonemas?, iPhonukkah?). Steve Jobs is casting the release of the iPhone as a revolutionary event. On days like this it’s hard not to think back to previous revolutionary technologies, especially the ones that could have changed everything. One revolutionary technology in particular, also from Apple, and also on a handheld device, keeps popping into my head these days. It is the Apple Newton’s concept of “data soup.”

Here is the feature described in Apple’s getting started video that came with the Newton:

Everything is interconnected, you can get a message that someone wants to have a meeting with you, you can ask Newton to assist you, Newton will automatically put it on your Calendar… Kind of a communications center, or universal inbox or outbox.

What was truly revolutionary about the concept of data soup was that the Newton was able to break down all of the traditional barriers between applications. Barriers that still exist today.

Data in Newton is stored in object-oriented databases known as soups. One of the innovative aspects of Newton is that soups are available to all programs; and programs can operate cross-soup; meaning that the calendar can refer to names in the address book; a note in the notepad can be converted to an appointment, and so forth; and the soups can be programmer-extended — a new address book enhancement can be built on the data from the existing address book. (Wikipedia.org)

It’s been 14 years since the Newton came out. A lot has changed during these 14 years: we now have high resolution color displays, and multi-touch. We have wireless networking, and we have the Web. But the way we interact with data, and our ability to share it between applications didn’t improve. At all. Our applications are still data silos, we have to meticulously copy and paste structured data between them. We manually reenter information, into calendars, into address books, into forms on the Web. It is pathetic.

I’ve written a lot about my love of microformats, of the ability to send structured data from a Web page to another application with a single click. Imagine Firefox, with microformat detection and Places (SQLite data storage), running on a mobile device like the iPhone. After making a reservation at a restaurant, the user could bookmark all the associated data into Places (the soup) with a single tap. The restaurant’s phone number would be accessible from the phone’s contacts list, the resturant’s location would automatically appear in the phone’s mapping application, and the reservation itself would automatically appear in the phone’s calendar.

Mixing structured data on the Web into the data soup would make every application on a device like the iPhone so much more useful. Unfortunately, the iPhone is no Newton.

Jun 07

Humanized Puzzler: Firefox Tabs

Time to break out your favorite prototyping tool or image editing software, Aza Raskin of Humanized is running a design challenge for dealing with tab overflow in Firefox:

Not only does the winner get a Humanized Puzzler t-shirt, but also the very real chance of their solution getting integrated into Firefox! Post your answers as blog comments. Also, prototypes and mock-ups get extra brownie points: there is no substitute for getting your hands dirty and trying out the solution.

Mozilla’s UX team is really looking forward to seeing the creative ideas that people come up with.

Humanized Weblog: Humanized Puzzler #2: Firefox Tabs

Jun 07

Quantitative Design

Is it possible to prove that one user interface is quantitatively better than another user interface? Is interaction design all about personal opinion? How does one tell what is good interface, and what is a bad interface? If two people disagree on a design, how do you tell who is right?

These are all questions that have been coming up around Mozilla, in threads on mozilla.dev.apps.firefox, and on irc.

Here are some of the approaches the Mozilla UX team have found useful to bring some science to a field normally thought of as being predominately classified as art. Unfortunately, we don’t have all the answers, each of these approaches to quantify usability have particular draw backs that have to be taken into account.

Your Mom is Not Statistically Significant

…of course that doesn’t mean she isn’t a very nice person, simply that there is only one of her. It’s important not to take your own personal usage patterns into account when designing interfaces, or discussing proposed designs. For instance, if you use a del.ico.us extension every day, and have tagged several thousand pictures on Flickr, it’s still important to remember some studies have found that only 7% of internet users say they tag information online. Or, you may personally use the history sidebar all the time, but you also need to consider that some studies have found that only .02% of page visits originate from history, and only 8% of users know about the feature. Often people will realize that they skew a bit more technical than your average user, so they will discuss the Web browsing habits of their mom (serving the role of non-technical archetype), but that’s just trading one sample size of one for another.

So the first way to bring science to user experience design is usage data. However, usage data has its problems. First, it’s easy to assume that the data is true because it is expressed quantitatively, but the data could still be wrong for a wide variety of reasons. Secondly, the data doesn’t capture everything. Certain observations, like “sometimes auto-completing URLs can lead to embarrassing situations” are impossible to pull out of usage logs. And thirdly, this data only tells you how users currently use an interface, not how they would prefer to use an interface.

In particular, usage data isn’t very helpful when designing brand new features. Studies about Web page revisitation might help a designer make more informed designs about a new bookmarking and history interface, but what about microformat detection? Since it is new, there are simply no usage studies to take into account.

Cognitive Performance Modeling

One way of quickly evaluating the efficiency of a new interface is through cognitive performance modeling, using a program like CogTool. By evaluating an interface with a simulated user, designers can rapidly iterate on their design without having to constantly bring in real users for testing. For example, cognitive modeling was used extensively by Google and NASA to improve the user interface of tab browsing in Firefox 2. For a feature we are considering for Firefox 3, microformat detection, we could use cognitive modeling to demonstrate how much time the average user would save when completing a task like adding an event to their calendar. However, cognitive performance modeling is based on the assumption that the user already knows how to interact with the interface. Additionally, it can’t tell you if users will actually want to use a particular feature, just how efficient the feature’s UI is.

You Can’t Ask Users What they Want

Analyzing the efficiency of a UI for a new feature like microformat detection doesn’t answer the question “do users actually want to quickly send events to their calendar?” Unfortunately, getting quantitative data for a question like this isn’t very easy. One direct way to is to literally ask users if they find this type of feature interesting. Unfortunately, this isn’t a very reliable source of data, because we can’t assume they actually know what they want. For instance, In a study conducted in the 1950s, people were asked whether they would prefer lighter telephone handsets, and on average, they said they were happy with the handsets they had (which at the time were made rather heavy for durability). Yet an actual test of telephone handsets, identical except for weight, revealed that people preferred the handsets that were about half the weight that was normal at the time (MIT 6.831 lecture).

Another problem with asking users what they want is that they have preconceived notions of what is possible. For instance, Dean Kamen conducted a number of user interviews with people in wheelchairs. Often, when people were asked how they would improve their wheel chair, they would focus on mundane improvements, like having some type of mud flaps to stop water from flying up from the wheels when in rain. Dean Kamen described the interviews saying “I thought they would have wanted to be able to travel up and down stairs.”

A Mozilla employee (who shall remain nameless), once told me about their involvement in one of the first user studies of tabbed browsing. This unnamed Mozilla employee remembered: “I didn’t like them, and I said I didn’t think other people would find them very useful. And tabbed browsing turned into one of our most popular features…”

So it would appear that the only way to get really accurate data on features is to let people actually use the feature for awhile, long enough for the novelty to wear off, and long enough to hammer out teething problems, and then analyze if people feel the feature is useful.

I should also note that just because you can’t always directly ask users what they want, that doesn’t mean that you can’t learn an incredible amount about their needs through observation. Often you can get a better sense of their problems from watching them complete tasks than from literally asking “what problems do you think we should solve.”

Also, just because asking users what they want isn’t always a reliable source of data, that doesn’t mean we don’t love hearing your opinions on what we should improve :)

Quantitative Aspects of Visual Design

Visual design is not purely art, there are different aspects of it that can be quantified. For instance, leveraging specific visual variables:


And Gestalt principles:


Aesthetics are subjective, but complexity is not. We can produce quantitative measures of how complicated an interface is, both in terms of interactive elements and in terms of visual elements. And these are really not the same thing. For instance back and forward in Firefox consists of 4 visual elements and 4 interactive elements:


Back and forward in Safari consists of 1 visual element, and 4 interactive elements (including press and hold):


Unfortunately simplicity is not necessarily king, pressing and holding the back button isn’t exactly discoverable, but the controls are noticeably simpler.

Quantitative Aspects of Usability: Heuristic Evaluation

There are a lot of usability heuristics we can use to evaluate an interface, identifying usability problems without ever having to rely on our personal views of what makes something easy or hard to use. These heuristics serve as great guidelines for identifying specific usability problems.

Intuition and Experience

While all of these quantitative aspects of interface design can help during the design process, decisions will often still come down to the designer’s intuition, which is gained through experience and training. Just as developing software can be full of trade offs, (like using compression to trade processing power for storage space), interface design is also full of trade offs (like simplicity versus discoverability). Knowing the right choice when dealing with these types of tradeoffs often comes from experience, but having all of the above sources of quantitative data certainly can help.

Jun 07


I’m getting married! Earlier today I proposed to my girlfriend Anna Vitebsky, pictured here at the Attack of the Squirrels party for the launch of Firefox 2:


I first met Anna at our undergraduate orientation. We were each asked to say our name and a word that started with the same first letter that we felt described us. Anna said “my name is Anna, and I don’t play stupid games.” I was in love. We later got to know each other better watching Star Trek the Next Generation in the student lounge every night at 2am. We dated throughout college, as well as graduate school, when I spent a lot of time traveling between Boston and New York to visit her at Columbia.

Anna is currently an associate scientist at Consumer Genetics, a small start up in Silicon Valley that creates genetic tests. After work in the evening I’ll often get her feedback on some UI mockups I’m working on for Firefox, and she’ll swab out the inside of my cheek to get enough DNA to run in some new test she is working on.

Anna is smarter than I am, cooler than I am, and geekier than I am, and I will be incredibly lucky to call her my wife.

Jun 07

The User Interface of Firefox 3: Features

Firefox 3 is going to provide a wide range of improvements to performance, stability, and security, and it’s also going to present several new user facing features. Here is a quick recap of design work that’s been going on in the Mozilla community over the past few weeks for Firefox 3, along with information about how you can help contribute, by providing feedback on these designs, or creating your own UI mockups.

In case you are wondering how Mozilla decides on which features to include in Firefox, we believe in “Delivering the right set of features – not too many or too few. (The goal is to create a useful browser, not a minimal browser.)” We are only interested in adding features that are universally useful, and have no impact on performance. For previous releases of Firefox we added features like RSS detection, spell checking and session restore. Here are some of the user facing features we are considering for Firefox 3.

Standard Mockup Disclaimer
All of these images are only conceptual mockups of Gran Paradiso, any particular feature may end up looking entirely different, or may not even make it into the final release. On a lot of these features we are iterating very quickly on the UI design, so even the mockups posted here may already be old.

User Facing Features in Firefox 3

Places: Bookmarking, Tagging and Historymore information
Places is our new infrastructure for storing bookmarks, history, and other information about Web pages. We are working on interfaces that allow users to quickly bookmark pages:


Tag pages:


Bookmark “saved searches” in Smart Folders:

We believe these interfaces will allow users to organize bookmarks in the ways that work best for them, ranging from constructing traditional folder hierarchies to quickly searching a Web 2.0-esque tagspace. Places will also enable a lot of really innovative bookmarking, history and annotation extensions.

Discuss Discuss the Places UI

Malware Detectionmore information
Similar to how Firefox 2 blocks Web sites that are potentially going to try to steal your personal information, Firefox 3 will block Web sites that we believe are going to try to install malicious programs on your computer. Mozilla is coordinating with Google on this feature.


Discuss Discuss the Malware Detection UI

Content Handlingmore information
Firefox currently has different dialog boxes for dealing with content depending on if it has a MIME type, is a protocol, is being delivered through RSS, or is an application being downloaded. In addition to unifying our internal architecture for content handling we are also working on a unified content handling user interface. The user will have a consistent UI for selecting the actions they would like associated with content, regardless of if the content is a file being download or is a microformat embedded in a Web page.


Discuss Discuss Content Handling UI

Microformat Detectionmore information
I can’t post to this blog without mentioning microformats at least once per post :) Based on feedback from previous design work I’ve posted, we are now looking into changing the mouse cursor for interacting with microformatted content in the context of the Web page. This idea was suggested by Jeff Carlsen in a comment on a previous post, and by Jesper Kristensen on the brainstorming wiki page.


Discuss Discuss Microformat Detection UI

Changes to the Location Barmore information
We are considering removing the favicon from the location bar, and changing the location bar so that everything except “Public Suffix + 2” is greyed out. This will prevent malicious sites from placing visual cues in the location bar (like using a lock as a favicon), and the change in text color will help users identify the web site domain.


Discuss Discuss Location Bar UI

Private Browsing – more information
The purpose of private browsing is to put Firefox into a temporary state where no information about the user’s browsing session is stored locally. When in this state, we are considering changing the appearance of the location bar:


Or maybe even a drastic change to the entire theme (my apologies for the shoddy photoshop work on this one):


Discuss Discuss Private Browsing UI

Coming Soon

A few other features that are also on our radar, but don’t currently have any UI mockups yet:

-Offline Web applications
-Improvements to the password manager
-A graphical keyboard-based UI similar to Quicksilver and Enso for searching the Web, bookmarking and tagging pages, navigating recent history, and switching between tabs. Note: this feature isn’t in the Firefox 3 PRD, and it will probably be released as an experimental extension through Mozilla Labs before it gets considered for inclusion into Firefox.

How you Can Contribute

Provide feedback on any of these above features in their respective threads (or comment below)
Create your own UI mockups of these Firefox features, using your favorite image editing application

Technorati Tags: ,