Saturday, November 24, 2012

Letterpress Deconstructed

The iPhone game Letterpress is incredibly popular with my friends. Games usually only make it on the iOS platform if they're very polished and have elaborate graphical detail. Letterpress is a different kind of polished. Its look is sparse, strict, and minimalist.

Because Letterpress is lacking gradients, drop shadows, and other embellishments, the Google Product Manager in me decided to take it apart and analyze what makes it a great experience. I found no bells and whistles, just carefully executed transitions and animations at every step.

I present to you Letterpress, deconstructed.

If you haven't heard about Letterpress, it's a word game where you have to form words with letters on a 5x5 grid. When you use a letter, that turns it blue. When your friend uses a letter to form a word, those letters turn red. Once the entire grid is covered in red and blue, the letters are counted up and if there's more blue than red, you win. It looks like this:


The Story Behind Letterpress

I would have expected a bit more of a back story on the app's website, but it only provides two sentences about the origins [2]. I found this Mashable piece that provides a bit more background. Letterpress was made by Loren Brichter, whose previously worked at Apple, and then built Tweetie where he invented pull-down-to-refresh. He sold Tweetie to Twitter where it became Twitter for iPhone. He recently left Twitter and started "atebits", the company behind Letterpress. Atebits is really atebits 2.0 - the first company that made Tweetie had the same name. He developed the Letterpress idea when he and his wife were playing SpellTower in single player mode side by side.

Why It Works 

Competitive element: Competing with your friends is addictive. There are enough games like Scrabble and Words with Friends that make it feel familiar. This makes the rules of the game easy enough to understand and get started quickly, and hard enough to master to feel challenging. [4]

Unusual navigation: Any other developer would have put a navigation bar on top of the app with its name on it. This is what we did with DrawChat - trying to burn the name into people's memories. Yet you can't find the name of the app anywhere in Letterpress. The little back arrow on the top left feels exciting and new, yet familiar enough to be useful.



Animations: There are a handful of really well-executed animations in the app. Despite the relative dryness of a grid of letters, this conveys to the user that the app is well-executed and fun.

Wait spinner: Since Letterpress has to load the current game state from the web, a user will see the wait spinner pretty often. The Letterpress wait spinner is the company's logo. This has long-term brand benefits. But also it's cute and well-executed. Every 8 turns, it randomly spins backwards to give it some personality. This is apparently in reference to the company's name (atebits = 8 bits).




Zoom into game: Clicking on a game zooms into the current game, rather than just opening it in a new page in the traditional iOS style. Note that all of the table view cells get animated at the same time, not just the one you selected.



Last word played: After opening a game, the last word played in the game gets popped up.


Dialog animation: Dialogs come in top-to-middle and fade out middle-to-bottom. At the very end, they get a little shake before they disappear.



Clear animation: Clearing the word in a game makes the tiles animate back to their original location.


Sounds: The most recent version of the app (V1.1) adds sounds to almost all actions in the game. The developer notes in the upgrade notes that he spent a lot of time on these. The sounds of selecting letters, clearing your word, and receiving a word from your opponent are very satisfying.

Game Center: I'm undecided on whether this is a benefit. Game Center allows Letterpress to piggyback on the existing social graph of iOS. Thus it doesn't have to deal with the messiness of integrating with Facebook directly to match you up with friends. But two things speak against it: First, Game Center is ugly and soils the look of Letterpress. Second, Game Center's screens are a bit too complicated for the average user to understand and thus cause a bit of churn: For example, what does "Invite up to 1 player" mean in the friend selection screen? You should just click on one and the game should start. In addition, Game Center's design is uncharacteristically kitschy for a core iOS app and going between this and Letterpress feels jarring.

Purchasing Flow The prompt to purchase the game comes in at exactly the right point: You've already played a game, so you know how the app works and that it's fun. You're prompted to purchase the $0.99 multi-game upgrade just as you hit the "New Game" button. It's clear to you what you're buying and why you should buy it.

Not Rocket Science

Overall, none of this is rocket science. I'm pretty sure that all of this could have been done with UIKit, but it turns out Brichter implemented his own animation engine in OpenGL [1]. What sets Letterpress apart is that there are few screens and little complexity, every screen in the app is thoroughly executed, and every transition is carefully animated. Nothing you or I couldn't do. "Modern art is when you could have done it, but you didn't," the saying goes, and it is also true for Letterpress.

--

Conversation on Hacker News

--

Notes and Corrections

[1] The original version of the article stated "This is all UIKit", but the animation engine is actually implemented in OpenGL (thanks to wallflower on Hacker News for the tip)

[2] The original version of the article said that "the app and its website play the mystery card", but the website actually provides some background about the origins. I changed the post to reflect this. (thanks to pflats on Hacker News for the tip)

[3] The original version of this article said that "Sometimes the spinner randomly spins backwards", but xuki points out on Hacker News that it's actually once every 8 turns.

[4] Great point by nbashaw on Hacker News on the game mechanics of Letterpress: "I love how letterpress is really a territory game disguised as a word game. Instead of rolling a dice like you do in Risk, you find words to form your attacks. Rather than trying to pick up words with obscure letters, or lengthy words, you try to capture strategic tiles and expand your controlled area. Once you cover a large area of dark blue tiles, you choke out your opponent's ability to score points, and the game slowly snowballs further in your favor. It's really fascinating."

No comments: