Mozilla Labs Design Challenge

The Brief

For the fall ’09 iteration of our Design Challenge we work together with students from universities and schools specializing in User Experience and Human-Computer-Interaction studies around the world to find innovative concepts to the question:

“Browsing History — How can we make sense of this rich source of data and how do we best present this data to the user?”

Given:

  • Save your browsing history and make it easily accessible
  • Let the system give good advice in a user-friendly way

Tasks | Phase 1:

  • Research what people think, want, do, etc with their browsing history. What do they want – and what do they not want? Why? Try to understand these user needs
  • As a result you should collect ALL the research data and make it available for the entire group

User Stories

My personal User Story:

“I am a heavy tabbed browser user. Sometimes I have up to 6 separate windows with different subjects organized by window. Often when browsing, it is a mix of regular sites that I visit like gmail or the new york times and new sites that I navigate to from links at the older sites. In reviewing sites that I normally visit and unique sites, it’s difficult for me to go through the history and find how I got to the unique sites because the history tree shows only general information about the frequently viewed sites, and no images that might give me a clue to how I got from one place to another. After enough browsing, I can’t trace back to determine how I navigated to each site or when a tab became a new window.”

Other User Stories

Survey Questions

Some Survey Questions that I developed for the class survey:

How Quickly can you find what you are looking for?
1-30 secs
30sec-1minute
1minute-2 minutes
2 minutes-10 minutes
Greater than 10 minutes
Never

What are you looking for in the History?
A webpage on a site
A specific Site
Browser state at a specific time
What I was doing at a time
Other[text box]

What web browser history interface do you like best?
Internet Explorer
Safari
Opera
Google Chrome
Other [textbox]

Why?[text]

Survey Results.

Tasks | Phase 2:

  • Research the data you collected and try to find patterns. Use these to come up with possible concepts
  • Research what possible solutions already exist around us. Both user created solutions as well as solutions in other software (or maybe even physical)
  • As a result each group presents their ideas to the panel – which will give feedback

Ideas

A selection of some of the ideas that were used in my proposal:

  • use color
  • Hover state for fluid way to see visual image then descriptive data (timestamp, page name, domain)
  • Timeline AND path based browsing of history
  • themed windows for browsing & search
  • Cache webpage locally
  • overlapping and/or anchored window. more quick popup?
  • Design a browser built around more specific & useful info

Tasks | Phase 3:

  • With the concept and the feedback the groups have to continue. They now start creating mockups/prototypes of one concept each
  • The groups test the prototype with actual users. They use this data to improve their concept
  • They make a presentation of their end result.

Unique Site Visited History

Concept:

  • It is difficult for users to find the exact site that they might have browsed once or twice.
  • This difficulty is compounded when these Unique Sites are surrounded by Frequently Visited Sites.
  • The History window is often not integrated with the browser window and thus, easily gets lost when switching between windows.

Unique Site Visited History Browser

  • Enables the User to Separate Unique Sites form Frequently Visited Sites.
  • Visualizes the sites at the time of the original visit.
  • Gives memory cues to the user in the form of time and date stamps and a cached screen capture of the site.
  • Consolidates many Mozilla add-on history features into one application.
  • Multiple visits to a site will update the user’s Frequently Visited Sites list, with the site’s domain name.
  • The Threshold for how many visits constitutes “frequent” is adjustable for the user.

Low Fidelity Prototype:

The Low Fidelity Prototype was the first actual fleshing out of the Unique Sites History Browser. I took the integrated History window from Google Chrome and added Mozilla features. This was also the first test of the cached screenshot being linked to unique sites. Firefox already has a feature in the History that counted how many times a user visited a website, but it had to be toggled on. This feature side steps that and has the visit count be an important part of  keeping track of Frequently Visited Sites and reducing clutter in the History.

High Fidelity Prototype:

High Fidelity Prototype with Timeline Feature:

Final High Fidelity Prototype: