Monday, July 21, 2008

Mobile Firefox and Designing Without Modal Overlays

The problem with modal overlays ...

"In the concept video I recently did for laying out the interface paradigms for Firefox Mobile, I listed five guiding principals.

1. Touch it with your finger
2. Large targets are good
3. Visual Momentum and Physics are compelling
4. Typing is difficult
5. Content is king

It’s these principals that inform the design of new features long after the original design as been coded, released, and iterated on. In discussions with the perspicacious Mike Beltzner, another design principal emerged.

6. Use modal overlays sparingly, if at all.

To be sure we are on the same page—I’m may be partaking in the dangerous hobby of coining new terminology—an overlay is simply a content area that sits in front of the content beneath it. The aspect that makes a modal overlay modal is that when it is up, the content “beneath” the overlay cannot be acted upon until the overlay is dismissed. Although a modal overlay may be visually transparent, it is never interaction transparent: you must always take action, like clicking “okay”, before continuing with your workflow. While I’m living dangerously, I’ll toss one more phrase into the mix: a state-forgetting modal overlay is an overlay whose state is reset every time it is summoned. That is, any work you do in the overlay is lost when you dismiss it.

Some examples of modal overlays are dialog/monologue boxes, ever-so-Web-2.0 Lightboxes, and the bookmarks interface for Mobile Safari. Some examples of overlays that aren’t modal are transparent messages and the OS X’s on-screen display for volume. The former have a number of interaction pitfalls that the latter do not share.

What’s wrong with modal overlays? In a word, they are modal: You are either interacting with the content or the overlay. Modal overlays don’t allow you to refer back and forth between two sources of information, or move fluidly between two actions. The second problem with modal overlays are that they are disconnected and disjoint from other overlays—knowing how to access one doesn’t yield a physical sense of how to access another one; they do not scale to give a unified, cohesive interface."    (Continued via Aza’s Thoughts)    [Usability Resources]

Safari Bookmarks Checklist - Usability, User Interface Design

Safari Bookmarks Checklist


Post a Comment

<< Home

<< Home