Iterating on AwesomeBar HD with user studies

Ed Lee

The Prospector team has been busy collecting user feedback and conducting user studies to see how people discover and use AwesomeBar HD. The team has also been busy releasing new versions in response to the findings — at one point, a new version every day! Below we quickly summarize some of the changes since the original interface:

Underlined blue categories

One initial problem was that people didn’t realize the category text in the location bar was clickable because it looked just like any other placeholder text — gray and faded. While the text would turn blue and get underlined when the user pointed the mouse at it, users didn’t think about pointing at the text. So now, on opening a new tab, each of the gray categories gets underlined and colored blue, and users immediately recognize they are links and clickable.

Showing clickable links

Hidden categories

Some users did find out that categories were clickable, but only by accident. They would try clicking in the location bar to type in something, but they actually end up clicking a category! Now clicking will always get an editable location bar. Clicking the url will keep the url around for editing while clicking in the whitespace will show an input box with no text ready to search. The categories are then shown when the location bar isn’t showing a url, e.g., when it’s empty on a new tab.

Showing what a click does

After making it clear that the categories were clickable, some users would click them and expect a page to load. So they sit around not realizing that there is some text on the left. As an initial aid, the add-on now hides the rest of the categories and animates the category text towards the left to hopefully indicate to the user that the location bar is waiting for something to be typed.

Animating the keyword to the left

Activating on click

Related to the previous issue, if a user has instead typed something first and then clicked a category, the user would have expected a page to load. What was actually happened was the category keyword text got inserted at the beginning of the input, and the add-on waited for the user to press enter or type more. Most likely if the user has already typed something, there won’t be a need to edit it when selecting a category, so the obvious thing to do is what the user wants — load the search result immediately!

Clicking the text box

Turns out a lot of people like clicking in the location bar. Some want to edit the url and others want to fix typos, but more importantly, they want to use the mouse to position the cursor as opposed to using the keyboard. There was some technical trickiness getting the category links to show up in-between the top layer of the input box (the text) and the bottom layer (background) because the input box is just one HTML element. This resulted in a fake text-box that didn’t act like a normal input box for clicks. We’re glad to report that starting with version 6, the input box is more normal and allows for the usual clicks — including right-clicking for copy/paste.

Customization

One common response from many of the users is the desire to customize the interface. And this is expected of Firefox users! The whole browser is customizable. So when the add-on comes pre-configured with a fixed list of categories and providers, users start looking for ways to remove some and add their own. We don’t have customization yet, but we know it’s an important feature that is also core to the Mozilla principles. However, the Prospector team is first interested in finding problems like those listed above so that people are able to discover and make use of AwesomeBar HD.

If you’ve previously tried out AwesomeBar HD on Firefox 4, please let us know on the forums if the new changes are better or not for you. You can also take a look at a list of changes in each of the previous versions and submit issues or suggestions on GitHub.

- Ed Lee on behalf of the Prospector team
.aligncenter { margin: auto; }