8 March, 2013 § 30 Comments
If you’ve ever tried to read a plain-text file in Firefox, you may have noticed that we didn’t have an option to apply word wrapping to the text. New in today’s Firefox Nightly build, we are now applying word wrap to plain text documents by default.
For example, this file is very hard to read when the lines aren’t wrapped. The lines scroll offscreen horizontally, and the user has to use the horizontal scrollbar on the bottom of the screen to read the file (yuck!). Here’s a screenshot of what I’m talking about:
With word wrapping applied, the text is much easier to read and the line length will adapt to the size of the browser window:
Some documents aren’t ideal for word wrapping, and to aid that we have made it easy to disable the feature. To toggle whether the document is wrapped on a case-by-case basis, you can change between the “Wrap Long Lines” stylesheet and “No Style”.
If you’d like to disable the feature entirely, you can go to
about:config and set the
plain_text.wrap_long_lines preference to
5 February, 2013 § 5 Comments
Last week I was in Toronto, ON with the rest of the Firefox Desktop team. We met for a week and discussed a number of topics that we want to get moving in Q1 and Q2 of 2013.
On Monday we had a 2013 overview by Johnath where he gave a similar talk that he has been doing at the MozCamps around the world. This was nice for us because it is not often that we get to see how Firefox and Mozilla are talked about at these events (I was lucky enough to attend the MozCamp in Poland in 2012 though).
We also got a deep dive in to the various personas of Firefox users in a presentation given by Bill Selman. Bill talked about there being seven distinct groups that users fall into. These range from “evergreens” to “wizards”, and we talked about what features to add/remove to help these users, as well as how to go about making changes to the software so as not to adversely affect these users.
On Tuesday we did an “ideation” activity, also known as brain storming :P, where we wrote down ideas of things that we would like to change with Firefox. After writing these down on post-it notes, we then grouped them together with other like-minded ideas on the wall and named the groups. On Tuesday afternoon we paired up in small teams to try to tackle some of these issues.
I spent Wednesday, Thursday, and Friday focusing on three small projects.
On Wednesday I worked with Dão Gottwald and Felipe Gomes on a simple slow start-up feature. The feature works by keeping track of the previous 5 start-up times. If the average startup time is greater than our threshold (currently 1 minute, with plans to lower it), then we will show a notification bar at the bottom of the browser window.
With help from Matej Novak, we got some nice whimsical text for the notification bar. When the user clicks on the “Learn how to speed it up” button, they are taken to a page on SUMO that can guide them towards a faster start-up time. Not pictured in the below screenshot, but part of the feature, is a second button that says “Don’t tell me again”. Stephen Horlander created the turtle icon.
On Thursday I worked with Stephen Horlander to see what parts of our user interface can have animation added to them. I wanted to work on a feature that is toggled often, thus having higher visibility. Stephen spent some time looking at transitioning the site-identity information in our location bar, and I spent some time working on adding a transition for the Find toolbar. You can follow along with my work in bug 836867.
A project that I had started a while ago but never finished was a refresh of Firefox’ in-content error pages. I got a few requests to resume that work and on Friday I unbitrotted Blair’s patch for bug 676795. That work is now awaiting Blair’s feedback and I’ll keep working on the bug when I get time.
On Friday night, I went with Paolo Amadini and Marco Bonardo to see the Johnson Report’s concert (starring the Firefox desktop team’s own Mike Conley on the guitar). The concert was at Lee’s Palace on Bloor St, and I must say that Mike and his band had an amazing performance. A funny kicker to the story is that each attendee to the show got a raffle ticket. Paolo, Marco, and I left early to catch the midnight subway back to the hotel and gave our raffle tickets to Mike’s girlfriend. We found out on Monday that she won the guitar! :-D
23 July, 2012 § 25 Comments
Almost exactly a year ago I wrote about applying Fitts’ Law to commonly used buttons. Fitts’ Law is pretty well known among user experience professionals and front-end developers as it can be used to make commonly accessed user interface elements much easier to target. Hick’s law is probably less known, but its effectiveness is just as great.
Hick’s law “describes the time it takes for a person to make a decision as a result of the possible choices they have.” This law can be applied to the number of options for a question on a form, the number of dishes offered on a restaurant menu, as well as the number of menu items on a context menu.
In the case of Firefox’ context menus, we were able to remove a very seldomly used menuitem (“Send Link…”), and combine the “Reload” and “Stop” buttons.
Our new heatmap data showed us that only 0.89% of users clicked on the “Send Link…” menuitem. This is not really a surprise, given that the location for the majority of webpages can be found by looking at the location bar. This is in contrast with “Send Image…” which was used by 3.34% of users. “Send Image…” likely has higher usage because the majority of image URLs are not available in the primary UI.
Combining “Reload” and “Stop” gives us another nice win because the two states are mutually exclusive and the combination reflects the default state of the two actions in our location bar. Making this change led to discussions about removing the “Forward” menuitem when it is disabled, similar to how we remove the Forward button in the navigation toolbar when it is disabled. While removing the “Forward” menuitem would align with internal consistency, it would also make the remaining menuitems more ambiguous (“Back” and “Reload”).
The disappearance of the Forward button in the navigation toolbar does not make the Back button ambiguous. The back button is visually connected to the location bar (signifying a relationship between the two items), and the arrow describes moving backwards. If the context menu only contained “Back” and “Reload”, or potentially “Back” and “Stop”, then there is a much greater chance of confusion as to what “Back” really does. In other words, the presence of “Forward” helps to provide a navigational context for the other menuitems in their group.
19 January, 2012 § 2 Comments
For a long time, one or two members of the Firefox UX team received the majority of feedback and ui-review requests. Sometimes an the requestee goes on vacation, leading to slow feedback loops and stalled work.
The reality is that submitting patches that alter the user interface of Firefox doesn’t need to be a scary or long process. I’ve been working with the UX team to put together a set of steps that contributors can take when they want to get feedback or ui-reviews from the UX team.
Asking for general direction?
There are times where you may not know in which direction to go. There is nothing wrong with implementing what you think will provide the best user experience or implementing multiple variations of your idea. Sometimes the experience of implementing another idea may show advantages and disadvantages in the design and help with your decision making.
If you still have some general questions about design, please don’t hesitate to join the #ux channel on IRC. If somebody doesn’t answer your questions, just ask again in a few hours (people may be sleeping due to timezone differences).
Looking for specific feedback or ui-review on your patch?
If you’re about to upload a patch and request feedback or ui-review, please link to either a screenshot, screencast/video, and/or try-server builds that contain the patch.
Here are links to some good software that can be used to create screenshots and screencasts:
- TechSmith Jing (free and paid version makes PNG screenshots, free version makes SWF videos, paid version makes MP4 videos)
- TechSmith Camtasia Studio/Camtasia:Mac (useful for detailed/longer screencasts)
- Quicktime X/Player included on Snow Leopard and higher can do screen recordings (File > New Screen Recording)
- Miro Video Converter (to convert videos to WebM format for easy viewing in the browser)
Please attach your screenshots/screencasts to the bug, since Bugzilla will probably outlive an external media hosting website.
After attaching your media, please flag the special UX email address, firstname.lastname@example.org, for feedback or ui-review.
Expectations of the UX team
The UX team has a goal of responding to feedback and ui-review requests within 48 hours.
Special thanks go out to Jennifer Morrow (Boriss), Frank Yan, Matthew Noorenberghe, David Lawrence, Ann Ignacio, Henry Langi, and Alex Limi for their help in putting this all together.
For more information
If you have any changes that you would like to make or to see the most up-to-date version of this document, please see the page on developer.mozilla.org.
19 September, 2011 § 17 Comments
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 :)
11 July, 2011 § 14 Comments
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.
- 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.
- 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.
- 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 :)
30 June, 2011 § 11 Comments
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).