Want to tackle the Mozilla challenge? Here are three starting points:

1. What do you want to achieve?
2. What’s the situation?
3. What’s out there?

And from that: do you want to work macro or micro?

1. What Do You Want to Achieve?

Firefox is arguably one of the frontleading browsers (check out all the extensions!). So, you can explicitly choose to target power users and early adopters (don’t forget, there are still a lot of people around who don’t use Twitter … or Skype for that matter). However, there are other options. Youtube founder always thought about “the grandmother from the Midwest”. You may even want to take cues from screen readers – in real life they’re nothing like Bladerunner or Iron Man, but are pretty powerful when you see a demo of them. JAWS demo

2. What’s your Situation?

The strange trend is that while the browser has flattened from many windows to one, devices and data have gone the other way. The variables have changed.

From the devices angle, even though we’re in an era of Minority Report-inspired multi-touch, I’d say Back to the Future II got it right in how we like to split screens up.  I personally use dual screens and love it, and dual screen laptops and phones are beginning to emerge. The interesting issues that come to the fore with extra screens is how applications such as a web browser live in them (you may want to have a browser in one screen and a document in another. Or, as I’ve done sometime, you may want to pull a password from an online account and input it somewhere else).

In a previous article in this series, Dave Malouf warned against using symbolic metaphors (there’s been a recent discussion on the IxDA forum about how many people now wouldn’t know that the save icon is a floppy disc!). However, spatial metaphors are very different. In the book Metaphors We Live By, Lakoff and Johnson suggest that (for Western societies at least), “spatialisation metaphors are rooted in physical/cultural experience, they are not randomly assigned”. Examples they give include:

• COMMUINICATION is SENDING (his words carry little meaning)
• HAVING CONTROL OR FORCE is UP, BEING SUBJECT TO FORCE OR CONTROL is DOWN
• FORSEEABLE FUTURE EVENTS are UP (and AHEAD)
• TIME goes PAST US from FRONT TO BACK (we are looking ahead to the following weeks)

These cues are worth keeping in mind when making decisions about how users will move through pages. What’s the difference between moving through layers in data (as in pre-tab browsers and programs such as Photoshop), as opposed to moving along (as in tabs)? What’s the significance of moving in and out? Where is home?

Also worth keeping in mind is Fitt’s Law about where it’s easiest to find things: either at the edges of screens (top left is the best), or right next to a mouse (if you’re using it).

Conversely, data that was previously constrained in the browser is shifting beyond. OK, AIM was always offline, but now people are choosing to download applications for their Twitter feeds, Facebook updates, and to read the New York Times. While some browsers such as Flock (see below) are incorporating these feeds in amazing ways (which you may wish to explore), another way to take this is that maybe some of these datastreams can be best dealt with away from the browser. Because of this, you might wish to ‘bracket’ examples such as these rather than trying to create concepts that cover all aspects or navigation. (Or not – you can choose to embrace the idea of the browser as dashboard).

3. What’s Out There?

Browsershots - I count 20 different browers here alone!

Just as some people don’t know that tabs exist (they’re the people on IE6, and yes, I know first hand that they’re out there), you may not know about some of the more niche browsers out there. For example, if you use Browsershots to check your websites, you have a choice of 20!

What’s great about existing browsers is that, unlike concepts, they’re already fully resolved. (But be careful: it’s easy to get blindsighted by what someone else has done).

A couple of examples to look at are:

• Shiira (Mac): multiple pages are shown across the bottom of the screen, much as with Microsoft Vista
  

  The Shiira Browser

• Flock (Win/PC): this browser uses tabs, but also sorts media (video, Facebook updates, Twitter feeds) into separate areas. (Sarah Perez has written about the pros and cons of their approach)
  

  The Flock browser

• SpaceTime 3D (Win): one of the (many) browsers experimenting with 3D. (See also Browse 3D and 3B , both Windows.) View with an eye to whether it would be actually used.
  

  Space Time 3D

Back in 2007 Smashing Magazine did a compilation on some of the lesser known browsers out there (you can tell it’s pre-iPhone era since they call Safari a minor browser!) which is well worth checking out.

Beyond that, some interesting examples include Apple Spaces (though I have to admit, I can’t use it), the docking systems for both Apple Leopard and Windows 7, and Prezi (zoom in and out presentations).

Final Points

Given the range of angles to take the challenge (and there are many), I’d suggest that there are two ways to attack the concepts:

1. Macro: create a scenario, explore the overall concept, work down. This is the usability and wireframes technique, where you investigate the scenarios and then fill in the process. You could be making storyboards and low-fi screenflows. My advice with this approach is to create a realistic but interesting scenario that allows you to explore options.
2. Micro: focus on a small element, and make it amazing, reach up. This is the ‘rich description’ technique, as used by craftspeople or sci-fi writers. Rather than trying to resolve everything, you find an element that you can base everything else around; its ‘essence’ in a way. Example include the Digg button, the Google searchbar, the ipod clickwheel/coverflow, the Apple OSX transitions (and yes, probably the Firefox tabs up until now). This approach needs a higher level of finesse to really make it sing (proper animation, full renderings), but the payoff is the impact it has. Having something fully detailed also allows you to propose

Then you can bring them together: as Adaptive Path did in the Aurora Concept:

The Macro: collaboratively investigating weather data

The Micro - radial click sequence, mouse controller

Combining these different angles will help you create a design solution that is both immersive (you can work through what you need to do in it) and engaging (thoughtful details that make it a pleasure to use).

Good luck!

This article is written as part of the Mozilla Design Labs Challenge: Summer 09. For this Design Challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”