If you’re at MassArt, you have to stop by the Wentworth gym (just across Huntington Ave.) and check this out: Expresso Fitness has cre­ated a sta­tion­ary bike with mov­ing han­dle­bars, a shifter, and, yes, a 3D graph­ics engine. And it is awesome.

By pro­vid­ing you with an on-screen avatar and over 50 courses to choose from, the Expresso sys­tem pre­vents your brain from acknowl­edg­ing the painful, bor­ing, phys­i­cal fact that you’re really just sit­ting in one place and ped­al­ing for 30-60 min­utes. You’re dis­tracted from any phys­i­cal sen­sa­tions when you real­ize that there are other peo­ple on the course with you (a gender-balanced and racially diverse crowd, as it turns out), and, as in a video game, you are moti­vated to beat them, to do bet­ter. So you start pass­ing your fel­low cyclists, even though you know that they’re not real, and they don’t care. You can lit­er­ally ride right through them, and they won’t even blink. Keep an eye on your pacer — he’s really the one to beat, as you’re ped­al­ing through Muir Woods, or an Aztec ruin, or even up in space.

If fake bicy­clists aren’t enough to moti­vate you, maybe real ones will. Like an old-school arcade, Expresso tracks each rider’s per­for­mance, pre­sent­ing a sort of high score list at the end of each ride. Did you beat Tommy M.? Ouch, looks like Jane S. tore through your best time! If you pro­vide the bike with your email address, it will notify you when other, real peo­ple beat your times. And of course you can log on to the web­site at any time (from home, not while on the bike) to track your progress, miles ped­aled, calo­ries burned, and so on. Since your motions are being recorded, you can also race your­self — your “ghost” — and improve your mad (sta­tion­ary bike) skillz.

This Internet-connected bike isn’t just mon­i­tor­ing you, though: it’s record­ing everyone’s rides, aggre­gat­ing the data, and gen­er­at­ing some inter­est­ing fac­toids. That’s how Expresso knows that peo­ple rid­ing its bikes ped­aled 1.4 mil­lion vir­tual miles, burn­ing 44 mil­lion calo­ries in September, as reported in the com­pany newslet­ter.

For a long time, gym­na­sia have been decid­edly low-tech places: think med­i­cine balls, stretch­ing mats, and free weights. But with tools like Wii Fit and Expresso bikes, our work­outs are going digital.

From Michael Chang, the guy who brought true scal­able type to Processing, comes a demo reel of data vis inter­ac­tion inspi­ra­tion. In my own work, I’ve focused on just “get­ting it to work” and dis­play the data, but now I want to make sure the whole expe­ri­ence is as beau­ti­ful and fluid as in Chang’s work.

A few weeks ago, I wrote admir­ingly about the ground­break­ing, orientation-independent inter­face of my favorite iPhone game, Dizzy Bee.

I shared my admi­ra­tion with the folks at Igloo Games, and got a response from Nathan, the designer and devel­oper behind Dizzy Bee, the company’s first prod­uct. He agreed to answer a few ques­tions for me, shar­ing some of the process behind this inno­v­a­tive game and UI.

Scott: How many oth­ers did you work with to cre­ate the final product?

Nathan: Three total. I did all of the pro­gram­ming and design. Art was han­dled by my good friend, and the sounds were con­tracted out.

How did the con­cept for the game orig­i­nate? Can you describe your process for evolv­ing the con­cept and new ideas?

The game started as a twist on a labyrinth game. I felt there would be a lot of accelerometer-based flat games, so I decided to try a ver­ti­cal ver­sion. (Many peo­ple seem to pre­fer to play it flat, though.) I’m a big fan of character-based action, so I like to put eyes on just about every­thing — rather than balls and holes, I wanted to have good guys and bad guys. I felt like con­trol­ling mul­ti­ple good guys would be really com­pelling, so I started with that. It wasn’t clear what was going on, who the main char­ac­ter was, and what you were try­ing to do, so I decided we’d have a main char­ac­ter to draw your focus, and we would build toward con­trol­ling mul­ti­ple friends — that’s were the cages were born. Then we put in the basic bad guy that moves almost the same as you, and we knew we had a game. After that, it was just play­ing with dif­fer­ent physics aspects to make unique char­ac­ters. The birds just have a max­i­mum speed that they go, so they kind of fall slowly. The big guy is much larger and heav­ier than you, so he doesn’t fit in cer­tain places. I tried tons of dif­fer­ent enemies/objects out. The ones I could make a cool stage out of stayed, and the rest were tossed.

Once you had the idea for the game play UI (which uses only the accelerom­e­ter as input), how did you start think­ing about the UI ele­ments that appear between stages?

I often have to make tem­po­rary art while I’m pro­to­typ­ing things. I felt I could draw a blob and call it an island, so that’s where the island/sea con­cept came from. I had orig­i­nally gone for a more novel approach for unlock­ing stages. I had wanted each island to have a theme and a port city. After you com­plete the port city (kind of an intro­duc­tion to that island), you could play any level on that island. So after beat­ing the first island you would have 3 new port cities, and if you beat those right away you would have 12 new lev­els to try. I still like the idea, but the dif­fi­culty ramp­ing wasn’t work­ing. People would find a stage that was way too dif­fi­cult, and the unlock­ing of islands wasn’t really a reward at all, so I changed it to a more tra­di­tional progression.

As for the Results Screen, I wanted good replay value, so I decided on 3 things to grade peo­ple on. [The three scales that deter­mine one’s score are: fruits saved, flow­ers col­lected, and per­cent­age of fruits that exited the level in a chain — mean­ing, they were saved at the same time. See screen­shot above.] I wanted those to be very promi­nent. Also, if the fruits lived or not and if they chained or not are very impor­tant, so I wanted that to be visu­ally rep­re­sented as well. The rest I just left up to my artist, and what you see is what he came up with.

How would you describe the Dizzy Bee UI?

It’s an up-less spinny UI. As I was mak­ing the game, I took care to make sure that noth­ing after the splash/loading screen had an “up”. The dia­log boxes orig­i­nally could be rotated 360 degrees as well, but unfor­tu­nately I couldn’t get the refresh going fast enough to make them smooth, so I had to set­tle for 90-degree increments.

Another thing I like to do with UIs is take one theme and apply it to every­thing. For exam­ple, I made a level edi­tor in Mario vs Donkey Kong 2, and in that there were lots of things that would scale up and down with an elas­tic type effect, finally set­tling on the cor­rect size. In Dizzy Bee, all of the UI ele­ments are like a spin­ner on a nail with a weight at the bot­tom, so they like to keep some momen­tum and even­tu­ally set­tle in the right spot. Also, each weight is a lit­tle dif­fer­ent, so each indi­vid­ual ele­ment moves slightly differently.

What ter­mi­nol­ogy did you use inter­nally to describe all these ele­ments? I tend to use “UI” to refer to more tra­di­tional inter­face ele­ments, like the text and tap-able but­tons that appear out­side of the stages.

I use UI very broadly to mean any­thing that’s not the in-game action. There are a few terms to spec­ify which part more closely. I use front end to describe any title screens/credits/file selec­tors. Level select is the island/sea sec­tion screen. HUD is any­thing that is shown while play­ing the game, such as play­ers’ lives or health. (Incidentally, Dizzy Bee has no HUD.) Pause menu for… well, you know. Lots of com­pa­nies use these same terms in dif­fer­ent ways, which has caused me some con­fu­sion in the past.

I’ve called it an “orientation-independent” UI. Were you or oth­ers on the Igloo team think­ing in those terms, or did you use other lan­guage to describe what you were building?

I was just think­ing in terms of Dizzy Bee is an “up-less” game, but I looked back at an old e-mail, and I also used the term “ori­en­ta­tion inde­pen­dent”. There are a lot of things I do dur­ing devel­op­ment that I ques­tion if any­one will even notice. Thanks for rec­og­niz­ing it, and point­ing it out.

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:

We reviewed our “ges­ture” projects in class last night, and while I think we all had some inter­est­ing ideas, no one envi­sioned an inter­face where your entire body could pro­vide the input.

I just found out about this project called “You Move You Interact,” described as:

…an inter­ac­tive instal­la­tion, where one is sup­posed to build up a body lan­guage dia­logue with an arti­fi­cial sys­tem so as to effec­tively achieve a syn­chro­nized per­for­mance between the real user’s body and the vir­tual object itself. The project aims at explor­ing a spa­tial sphere, where the user/performer is invited to develop his own cre­ative inspi­ra­tion based on his own body ges­tures and move­ments. [ymyi.org]

Also inter­est­ing: It’s done using Processing.