Skinning the Fennec

I've been working with the talented Sean Martell (of Kit and the Firefox 2 theme fame) on taking my Fennec interaction wireframes and creating a default theme for the browser. We're trying for something that nods back in the direction of Firefox on the desktop while still striking out in a direction that's appropriate for a small-screen finger-directed device.

He's posted some of the recent work to his blog, and he'll be posting more there as we go. This is a effort still very much in progress, so please jump in with your suggestions (generally or even about specific glyphs/icons). There's a Fennec UI discussion thread ripe for contribution.

This first set takes us through some basic Fennec operation.

1. Initial page load
When a page first loads, and you're still at the top, you see a Title Bar at the top, with an identity button and a reload button. You also have access to your bookmarks.

2. Movin' on down
As you pan down the page, the Title Bar scrolls off the top. The entire screen is dedicated to web content.

3. Take a step to the right
Panning to the right of a webpage causes the Control Strip to snap elastically into place — it provides most of the primary UI, including a starring (bookmarking) button, back and forward, and access to page actions (e.g. SMS this page to a contact) and browser tools (Preferences, Add-ons, and Downloads). There's more how these sections work in the wireframes, with pixel-designed screens on their way.

4. What about the other side?
Similarly, panning off the the left of the webpage gets you to your tab area, which also snaps into place. The bottom button, on the left, creates a new tab. The idea behind the button on the right is that you should be able to pull up, via Weave, a tab that you have/had open on your desktop.

More to come!

Update: My comments are broken, so please leave your thoughts in the Google group or on Sean's post. Sorry and thanks!

MobileHCI 2008 tutorials

MobileHCI 2008 is on right now, and Tuesday was the workshop and tutorial day. They've posted the slides for all six introductory tutorials, along with quick abstracts. If you want to leap right in, they are, individually:

1. Text input for mobile devices by Scott MacKenzie
2. Mobile GUIs and Mobile Visualization by Patrick Baudisch
3. Understanding Mobile User Experience by Mirjana Spasojevic
4. Context-Aware Communication and Interaction by Albrecht Schmidt
5. Haptics, audio output and sensor input in mobile HCI by Stephen Brewster
6. Camera-based interaction and interaction with public displays by Michael Rohs

They're all worth flipping through if you're new to and interested in this space.

Mirror-like finish

If you've been following along with the Chrome announcement, and you're interested in the whys behind their UI design, I refer you, gentle reader, to the Chromium Developer Documentation - User Experience, wherein is described

... the motivations, assumptions, and directions behind Chromium's user interface design. Its goal is to explain the current design in a way that further work can be developed in-style, or so that our assumptions can be challenged, changed, and improved.

Of course, the huge design choice that isn't explained, the giant in the room, if you will, shows up in this illustration from the comic:

I can't help but think that people will encounter some difficulties in using a browser that's taller than a man. The Fitts' Law hit alone seems worth a bit of rethinking on Google's part, at least without a lot of stretching.

Decisions, decisions

Firefox has a lot of preferences. For illustration, here's a map of all of them that are accessible from the Preferences (Mac) or Options (Windows) windows:

Click for the legible version (large!)

That's seven tabs, one of which contains four sub-tabs (Advanced), over the course of which the user can click on buttons to bring up a further 23 windows or panels, one of which has a further five tabs. That's leaving out the Add-ons Manager, host to preferences for add-ons, and the monster-filled fathoms-deep sea that is about:config.

It's hard to get rid of preferences. Typically, there aren't any that are entirely without worth, and, on an individual pref-by-pref basis, it's hard to argue that removing functionality is worth the small ease-of-use gain of one less item. Over time, though, you're left with a situation that is the opposite of simple.

This is a problem to chip away at in Firefox; for Fennec, it demands immediate attention. The smaller screen on a mobile device and a button-density dictated by the size of a fingertip make it impractical to show a huge number of preferences — assuming that you'd even want to inherit that problem! Another defining characteristic of mobile is that the ratio of power-users to non- is skewed even further to non-power-users than on the desktop. Mobile users are just less likely to want to "configure" their mobile browsers.

For comparison, here's the full set of "Settings" in mobile Safari:

• General
  • Search Engine - Google/Yahoo
• Security
  • JavaScript - ON/OFF
  • Plug-Ins - ON/OFF
  • Block Pop-ups - ON/OFF
  • Accept Cookies - Never/From Visited/Always
  • Databases - lets you see a list and delete>
• Clear History (button)
• Clear Cookies (button)
• Clear Cache (button)
• Developer
  • Debug Console - ON/OFF

What preferences do you think are absolutely necessary in a mobile browser?

Hand Machines

There's a really interesting article over here — China and the next billion mobile customers (via Semiconducted) — on the topic of the mobile phones in Chinese society. I was surprised to learn, when speaking to some Mozilla contributors from China at the summit, about the near-complete lack of voice mail usage there, something mentioned in this article. There's lots to learn about this space.

A couple of things that fit into place in my head:

1. Prying yourself away from the network

In China, not answering your mobile telephone is considered rude, no matter where you are, whom you are with, the time of day or what activities you are engaged in. And voice mail does not exist. Despite this cultural imperative to be available anytime and anywhere, there is a simple work-around practiced by hundreds of millions of Chinese. Manually removing the telephone battery creates a message to in-coming callers that the telephone's owner is out of range and thus unable to answer the phone. This regular subversion of the cultural imperative functions as an open secret, even playing a prominent role in a popular 2003 Chinese film called Shouji ("mobile telephone").

One of the defining characteristics of mobile users that they are always accessible/available, because their devices, and therefore the network, are always present. This can be great — it's a huge part of the value of mobile, because of the changes in behaviour that it allows (e.g. Shirky's transition from planning to coordination). As always, there are downsides as well. When the option to ignore your device, already rarely-chosen in North America, is actually ruled out as actively rude, the issues with constant availabilty are really thrown into relief.

There are cues and norms associated with being interrupted in "real" non-computer-mediated life, and, to some degree, these have grown up around fixed-place (desktop) computer use. At very least, we have basic tools (setting availability in your IM client) and some circumstantial divisions (if I stick to gmail and stay out of IRC when I'm not working, I won't get work-related messages). This all becomes more complicated when the same devices bridge all parts of our lives, and when the situations that can be interrupted are more varied and sensitive than sitting at a desk.

The ability to be appropriately available is going to be one of those issues around which there's going to be a lot of tweaking and perfecting over the next couple of years, I think. One early simple implication for the design of Fennec, though, is the possibility of a mechanism for setting your availability centrally in the browser, so that that websites and apps can pick it up rather than forcing the user to tell each site that he or she would rather not be bothered. Eventually, we could even start making this smarter, by basing some of it on the users location (taking advantage of GPS), schedule (I'm in a meeting), or even movement.

2. The potential of rich devices

Looking to the future, it is easy to imagine that in the next years China's mobile telephones will become the literal meaning of the Chinese word for mobile phones, shouji, "hand machines." Once rich data transmission becomes massively affordable, the mobile telephone will combine the pervasive, persistent and intimate qualities of existing phones with the internet's near limitless entertainment and communication options.

Literal translations are usually played more for laughs than for insight, but I really like this bit about hand machines. When people are dubious about the value of mobile access to the web and rich devices, it often gets phrased in the form of "Why would I want [a camera/TV/the web/other ability] on my phone?" The Chinese word captures it much better; what you've got isn't a phone – it's a hand machine. Making calls was just the great capability that got you carrying it first (no surprise that it was something to do with being social).