Today Oddage went live on iTunes. Incredible. It seems like only yesterday that I started building the randomizer engine that powers the gameplay of Oddage. Of course, it’s been two months. In that time I designed an app while learning Cocoa Touch and the iPhone SDK. The adventure has been fun. I’d like to tell you a bit about it. Check out the gameplay video here before we get started.

I made Oddage based on everything I would want from a simple iPhone timewaster myself: quick launches, short games and an experience that was easy enough to jump into that playing it wouldn’t become a project you avoided.

When I first started developing software for money in Second Life back in college, I followed the rule that I should make the best possible product that I would love, instead of worrying about what other people might kind of like. Years later, John Gruber and Tim Bray bear witness to this approach to building products. In Second Life, I made extensive use of everything I sold — and sold enough stuff to pay for my food bills during school. In Oddage, I feel like I’ve hit the same mark. I’ve solved my problem, boredom, while delivering a unique and polished experience. I’m excited to see how it’s received.

Building the Interface

I knew from the start how I wanted the gameplay to work. Random sets of three words plus one word that didn’t belong, for a total of four selections. Then six selections, then eight, then ten. How to present this experience was harder. At first I thought that instead of having buttons (so 20th century!) to represent the words, the words should just appear to exist as directly touchable entities:

Unlabeled UIProgressView bars lurk at the bottom, inscrutably detailing the user’s game stats. One represents the amount of bonus points the player gets for the current round. The other represents the player’s progress to the next level. Can you tell which is which? Of course not — neither can anyone else.

This, of course, sucked. The words didn’t invite you to touch them. The bars at the bottom were unexciting. The gameplay worked, but the presentation was dull beyond words and barely functional.

I decided to add buttons and spice up the stats display:

Blegh. The buttons are hideous — whipped up in about five minutes in Photoshop. The stats area looks better, but ultimately feels like something you might see in a utility app. Desgining Oddage, I felt it important to make it feel like it was of the iPhone without it feeling like it was of Apple. That means the toolbar at the bottom had to go. It was time to branch out a little bit and create my own UI elements to represent important gameplay events.

Thank god for Photoshop tutorials. The buttons look better. The big change is the new stats area at the bottom — those elements look familiar. The major innovation here, though, is that the buttons now build from the bottom of the interface toward the top. It was unkind to the player for important information to be so far from the action. Now the player doesn’t have multiple regions of the interface competing for attention. The stats bars are now vertical, which is a much better fit to their jobs. Since progress to the next level is a climb for a player, the yellow bar climbs toward the top. Since the total bonus points for a round drop with each second, the blue bar drops downward as well. Vertical works better while transmitting a greater sense of urgency and excitement to the player. A new utility row collects all the meta tasks into a single region, allowing the player to either flip to the info view, pause the game or mute the audio.

But it still needs work.

There she is! Now the bonus and level bars surround the play area, allowing the player to interpret them using peripheral vision. Much more satisfying.  The new prominence of the bars also continues to ratchet up the urgency of gameplay. Something about a precipitously dropping bar really motivates people. One person told me “I don’t know what it is, but I really don’t like to see the blue bar go down.” With the tall bars, I had stumbled into something twitchy in player response.

The Final Implementation:

All that was left was polish. The timer and point counter were the last bits of dullness to be excised. Both played huge roles in how the player felt about how the game was going and so deserved to be more than just simple text. I replaced them with animated images. The seven segment-style digits are fun when they animate. Seeing your score soar upward as the point counter ticks up feels good. The level and bonus bars also got some extra polish after weeks of experimentation. The angled cuts on buttons one through eight (counting from the bottom) suggest that each button belongs to a to-be-completed set. The top buttons have no cuts since they’re the final set the user will encounter. There’s also a branded background, which the user can replace with anything in the iPhone’s photo library. I also threw in a few alternate options built into the app.

Colors are more fun in the final revision, too. I always had the idea that the timer bar (the fat horizontal one at the bottom) should change colors as the player ran out of time. I decided that the button decorations should match that color. This added some additional dynamism to the application, which is nice, but the more important thing is that it reduced the importance of looking away from the playing field to check the time. Now the remaining time is encoded into every button’s appearance.

That’s the Oddage interface. I learned a lot from its progress, as well as from development as a whole. I’m certainly not done with improving the app. Still, after spending three weeks obsessively polishing the interface, I decided it was time to shove Oddage into the world and let other people have fun with it.