Brandon Sheffield breaks down the design of Atebit's Letterpress in the May issue of Game Developer magazine. Atebits's Letterpress was one of the more popular iOS apps of late 2012, with 60,000 downloads on its first day alone. It was one of those games that everybody suddenly seemed to be playing, and it's been in constant play on my iPad since release. This success is warranted -- on top of being a fun, competitive word game, it has a fair amount to teach us about intuitive UI and game design on touch devices. For those who haven't played, Letterpress is a turn-based word game about claiming territory. You have a grid of letters, and you're supposed to make the longest words you can with them. The letters needn't connect -- you can use any on the grid, and gain a point for each letter you use. But when your opponent uses your letters in their words, they steal the points back (and vice versa). Any letters you've surrounded with other letters you've captured become "saved." Your opponent can still use these letters, but they won't get a point for them. They can use the letters surrounding your "saved" letters though, and thereby make them available for capture next round, if you don't save them again. The game fixes one of the problems I've had with word games in the past, because it encourages you to make the largest, most impressive word at any given time. Rarely can you find an impressive word and not be rewarded for its use, unless strategy suggests you wait. Now let's get into these UI and design lessons a bit more. Letterpress

Learning from Letterpress

Start the game = play the game. When you start the game, you see an option for "new game," and one for "about," which has information about how to play and who made it. That's all there is. This initial area becomes your game screen - all the games you've ever played (or are playing) are stored here. Importantly, your current games are on top, and "new game" is relegated to the very bottom, because you often rematch from the win or lose screen. It's very cohesive, and makes a lot of sense! Many console games still have a "start game" splash screen, when you really only need to use that once. Letterpress is more efficient; the starting screen launches games, and is never useless. Show, don't tell. The game board is quite spare in its design, but everything is utilitarian, and nothing leaves you guessing. There's a grid of letters, and two icons. One icon represents you and your Game Center ID, one represents your opponent's. An arrow under the icon shows whose turn it is. Captured letters are a light colored shade, saved letters are a darker shade of that same color (and your opponent has a different color). You instantly know how well you're doing by looking at the game board, even if you don't look at the score. Even better, this is represented by chunky pixels, "zoomed out," in the main game screen, where you can see all your games. A micro version of your board is displayed there, which gives you an idea of what's happening in games you're playing before you even enter them. Everything is subtly and clearly laid out, and obvious. Meet logical expectations. Spare though it may be, everything in the game does something, and trial and error is rewarded. Touch an avatar icon, and see the word that you or your opponent played last. Touch an empty space in the game board, and see where that letter is in the current word you're spelling (which is helpful when strategizing), and you can easily rearrange your letters in the playfield. It even tells you if a word you're trying to play would be acceptable if you hit the submit button when it's not your turn. If you hold the "clear" button, you can save the current word you've spelled, even if it's not your turn. Anything you might try to do has been anticipated and integrated into the UI design. Teach through interactivity. On the main game screen, you can move the whole screen around if you choose to, because nearly everything moves when you touch it. This made me wonder whether touching and dragging one game from my game list would do something, and indeed, moving it all the way to the right reveals a prompt to remove the game from your list. It was something I thought would be nice to do, I tried it, and there it was. That kind of movement happens throughout the game -- you can slide around any pop-ups or notifications, or toss them off the screen. That's intuitive design! This didn't need to be explained to me -- I was able to figure out everything I needed to know by simply touching and sliding things, as is natural on a touch platform. Details matter. Letterpress is very simple, but it has a few excellent little design flourishes. If you pick up a letter, it jiggles with life, and tends to tilt in the direction you're swiping. As you bring it up to the live area where you build words, the player avatars jump pleasantly out of the way, using a classic animation bounce. It makes just interacting with letters feel good, which is important, since that's all you really do in the game! Monetize intelligently. Letterpress is free, but the monetization scheme is smart. If you pay 99 cents, you get more color themes for your board, the ability to start more than two games at a time, and the ability to see all prior words played. None of these things grant a real advantage over a free player, but they do make things a bit more convenient, without making the free game any less convenient, or feeling like something truly valuable was hidden. Letterpress basically asks you "How much do you want to play this game?" If the answer is "a lot," you'll spend those 99 cents. Nothing forces you to buy anything, nothing compels you to tweet - the game's success was natural, simply because it was good. And the social networking elements of this game are all hidden in the "about" section (surprisingly subdued, considering Letterpress was made by Loren Brichter, the same dev who made the Tweetie iPad app which got snapped up by Twitter itself). Make it whole. The lessons Letterpress teaches are obvious, yet somewhat subtle. It has a holistic design, and everything you expect to be able to do can be done. With such a simple game, it is very possible to meet players' expectations, and yet we so rarely see this kind of well-thought-out design. The extra touches to the menus, the way you can instantly get a grip on how your game is going, and the seamless integration of everything into the core experience all show that the UI is an actual part of the game - it's not a skin, it's not a barrier, it is the game. UI should not be a gatekeeper of content or an afterthought. It should be an integrated part of the game's experiential design. UI should be part of the game's core. While Letterpress may not explicitly teach you how to do this, it's a great example of thinking about your game as a holistic product. Try the game for yourself and see if you don't agree!