An Orientation-Independent User Interface

2008 August 03

People have been talk­ing about resolution-independent user inter­faces for years — such a UI would grace­fully scale larger and smaller, and look good on any dis­play, whether an old 72 ppi CRT or a higher-resolution 163 ppi iPhone.

But I’ve never heard any­one dream of, let alone imple­ment, an ori­en­ta­tion-inde­pen­dent inter­face, one in which text and other ele­ments would always be dis­played “upright” from the user’s per­spec­tive, regard­less of the phys­i­cal ori­en­ta­tion of the dis­play in space.

The cre­ators of the new iPhone game Dizzy Bee have done just that, how­ever, and the exe­cu­tion is com­pletely flaw­less. Just as the iPhone itself has set the stan­dard for multi-touch inter­faces, Dizzy Bee has bro­ken new ground and estab­lished a suc­cess­ful struc­ture for future orientation-independent UIs.

Here’s how it works: UI ele­ments rotate freely so that their bot­toms point down in the phys­i­cal world, as detected by the iPhone’s accelerom­e­ter. This is appro­pri­ate, given that the game itself is played by rotat­ing the phys­i­cal device in order to direct the bee (and other ele­ments) as they “fall” in the direc­tion of grav­ity. Here’s an exam­ple of the UI shown between lev­els — this is one of the islands around which Dizzy Bee navigates:

And here’s that same screen, as it appears when I rotate the device around 180 degrees:

Notice how, while the island and com­pass rose remain fixed on the dis­play (so they appear “upside down” here), all the text ele­ments rotate to stay “upright.” Here’s a shot of the screen that appears when you com­plete a level:

Here’s that same screen, but I’ve tilted the device 225 degrees clockwise:

From this, I will infer four new guide­lines for suc­cess­ful orientation-independent interfaces:

  1. Each UI element’s top and bot­tom edges must be defined.
  2. A point at which the rota­tion occurs must be specified.
  3. Elements should be placed so as not to over­lap too much, no mat­ter the rotation.
  4. Background graph­ics should be appro­pri­ate at any rotation.

And as if a ground-breaking UI weren’t enough, Dizzy Bee is also just really fun to play, with cute graph­ics, great sound design, and lots of puz­zling lev­els to play through — for only $2.99! See it in action here:

No comments yet. »

No comments yet.

RSS feed for comments on this post.

Leave a comment

Site content and design © copyright 2006–2008 Scott Murray.