September 05, 2008

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!

Posted by madhava at 01:54 PM | Comments (0)

September 04, 2008

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.

Posted by madhava at 02:34 PM | Comments (0)

September 03, 2008

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.

Posted by madhava at 10:38 AM | Comments (3)