Get a sneak peak of UX improvements to Firefox

As many people already know, at Mozilla we do our work in the open. Many people may also be aware of our Release, Beta, Aurora, and Nightly channels. One lesser known fact is that we have a special Nightly build that showcases some ideas that we have for improving the Firefox user experience.

Started in mid-May of this year, a special Nightly-UX branch was created as a place for the community to test out ideas and see how well they work over time. Over the weekend I was very happy to find that there are now about 2,000 active daily users on the Nightly-UX branch.

The biggest single proponent of this large user base is most likely the mockups from the UX Presentation on the Future of Firefox. Feel free to download the Nightly-UX today

Applying Fitts’ Law to Commonly Used Buttons

In a previous post, I covered my work on improving the usability of the Back button in Firefox. Starting with Firefox 8, clicking on the area between the edge of the window and the Back button will fire a Back-navigation event.

The idea behind a change like this comes from Fitts’ Law. From Wikipedia, Fitts’ Law “predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target.”

All operating systems that I have used stop users from moving the mouse off the screen (outside of the virtual desktop space). This means that if a user hurriedly moves their mouse across the screen, it will stop on the pixel that borders the edge. By adding an action to this area, the area becomes a very easy to hit target for users.

Taking advantage of this feature is not unique to Firefox. There are many individual parts of the Windows user interface that exhibit this same usability trick.

1. When a window is maximized, the Close button is positioned in the top-right corner of the desktop. Visually, there is four pixels of padding between the button and the right edge of the screen. However, clicking in the padding will still close the window.
2. The Start button is located in the bottom-left corner of the screen. There is eight pixels of padding between the button and the left edge of the screen. Clicking in this padding will launch the Start menu.
3. Windows 7 introduced a button in the bottom right of the screen that is used to show the desktop. There is no padding between the button and the edge of the screen.

I was not part of the decisions to place these button in these positions, however I strongly believe that Fitts’ Law played a role in their location.

These are just a few of the many ways that Fitts’ Law can be found in user interface design. See if you can find others that I didn’t mention

Increasing the usability of Firefox’s Back button

The Back button is one of the most used features of the Firefox chrome. Based on a 117,000-person study ran in 7 days of July 2010, the Back button was used by 95% of users and clicked over 105 times on average.

The design of the standard Firefox theme changed between Firefox 3.6 and Firefox 4 towards a more streamlined user interface. This has brought with it some great usability improvements, but one of the nice usability features of Firefox 3.6 regressed in the new theme. In Firefox 3.6, clicking to the left the Back button would still bring the user back to the previous page they were at.

The behavior in Firefox 3.6 was justified by Fitts’ Law. To quote Wikipedia, Fitts’ Law “predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target.” The back button sits right next to the edge of the browser. Ideally, this allows a user to quickly move their cursor to the side of the screen and have the cursor stop near the Back button.

If we can push the clickable area of the Back button to the edge of the browser, then we can increase the size of the target enormously.

In Fitts’ Law terms, the amount of time that it takes a user to hit the back button drastically reduces with a subtle change like this.

I have submitted a patch to increase the clickable area of the Back button. I hope to get it landed in time for the Firefox 7 Firefox 8 release train.

Special shoutout: This graphic was made with Snagit, the Swiss Army knife of screen capture tools. Made by TechSmith (my former employer) in mid-Michigan, the product comes with a free 30-day trial.

Update: I was unable to get a quality patch completed in time for the Firefox 7 release. I hope to land this patch in time for the Firefox 8 release (September 2011).

Improving the Core Usability of Software

What do you mean the software is confusing? We just added a new feature to the software, can’t we fix it in the next minor release? If we stop and fix it, will we slip on feature X? If we leave out that feature, will the users still purchase?

Often times, these are the questions thrown around when usability concerns are brought up. When these questions begin, it is easy to tell that the discussion of the software usability is quickly getting thrown out the window.

It is now 2011 and development teams need to fully understand what it means to implement a feature. In the early 90′s software could ship and if it wasn’t that usable, the customer would purchase and live in suffering. There is too much competition to continue that trend today.

Sometimes it is the little (or major) tweaks that can make or break the user experience. The ROI on user testing is huge, and it may take a team multiple releases or sometimes infinite to understand this.

A Quick Story

I begin with a story of a customer in a rush. This customer, lets call her Jo, uses Amazon frequently, and just got off the phone with her mother. Her mother’s birthday is coming up and Jo forgot to purchase a gift, but she is in a hurry (as always), and needs to run out the door to get to her 8 a.m. Monday meeting.

Jo logs on to Amazon, finds a nice little trinket and goes to check-out. She wants to purchase in the morning to make sure it gets shipped same day. If she doesn’t purchase before she leaves, she won’t have time until after work.

Quickly, Jo adds the trinket to her cart and is off to check out. But wait, the site wants her to:

1. Log in (30 seconds)
2. Select her mailing address (10 seconds)
3. Choose her credit card (10 seconds)
4. Confirm her order (15 seconds)

That’s a total of 1 minute and 5 seconds, probably 1 minute too-many. Jo jumps in her car and is now off to work in a hurry.

Amazon 1-Click

What if Jo could have purchased the trinket in only one click? She could have saved that painstaking minute and been on her way to work. Amazon 1-Click solves this, and it wasn’t easy. Amazon had to do a ton of work to make purchases non-atomic, as well as keeping them just as secure as they were before.

What does this mean?

While Amazon 1-Click sounds like a new feature, Amazon simply improved the core usability of their product. Making good software isn’t always about supporting the newest standards or adding more features, sometimes it’s about making the ones that you already bought into better.

I’m currently working on a couple bugs in Firefox that probably won’t be advertised in our next release, and that doesn’t bother me. I hope to increase the clickable area of the back button as well as add support for using the video content area as a giant play/pause button with the HTML5 video tag.

What are some things in Firefox (or other software) that you think could be improved?

Automating Mundane Tasks

A couple days ago I wanted to move all of my work email out of the inbox and into an archive folder, similar to how I use Gmail but I ran in to a problem. I had over 3,000 emails in my inbox and Outlook Web Access only allowed me to move up to 100 emails at a time.

The process to move emails is as follows:

1. Click the check box in the table header that checks all of the emails.
2. Click the ‘Move’ button
3. Choose the folder to move it to
4. Click the ‘Move’ button to commit the move

Who wants to sit around clicking the same buttons for 20 minutes just to move messages. It sure would be nice if Outlook Web Access had the same feature as Gmail:

So instead of doing the same old, mundane, click-wait, click-wait task, I downloaded and installed Firefox and the Selenium IDE plugin.

Selenium IDE is a free plugin that allows you to record your use of a web page and play it back. I’ve been using it now for some time in creating automated tests of a website I’m working on.

I played the test back and it worked beautifully. I then copied the test steps and pasted them countless times within the same test. Next I hit ‘play’ and was able to watch a recorded lecture while all of my mails were moved over to the archive folder.

Problem solved. All emails were moved in a couple minutes time.

I will be on the lookout for more ways that Selenium IDE can save me time.