23 Apr The 8-Step Guide To Interface Design for iPhone Games

I have found that interface design is one of the toughest parts of creating a game. With so many different screens, and so little screen space, every pixel needs to be thought through.

We have recently redesigned the entire interface for our upcoming game, because we realized the user experience simply did not work as we intended. There was too much information on screen at one time, and without a clear focus, people did not understand what they were looking at. People looked at the screen for about 1 second, then clicked on the “Next” button and started the next level. In other words: The interface simply did not do its job.

Above: The crowded victory screen that is currently getting a full make-over.

For all you game interface designers out there, here is an 8-step guide to interface design – specifically tailored to iPhone, iPad, and Android games.

Ready? Let’s go! 🙂

1. Determine the platforms

The first step is to find out which platforms your interface will support. With Momonga, we are supporting iOS and Android at launch. This seems simple enough, but in fact we need to support for the following screens:

iOS device resolutions:

• iPhone 3GS and equivalent (480 x 320 pixels)
• iPhone 4(S) and equivalent (960 x 640 pixels at 326 ppi)
• iPad 1 & 2 (1024 x 768 pixels)
• iPad 3 retina (2048 x 1536 pixels at 264 ppi)

Android device resolutions:

• Samsung, HTC, Acer, Asus – resolutions are all over the place!

The displays for iOS are fairly straightforward. There are two aspect ratios, and retina simply doubles the pixels. If you are only developing for iOS only, you could consider making 2 different interfaces: One for iPhone / iPod Touch, and one for iPad. Design it at retina resolution and scale it down to fit the older models.

For Android, however, there are so many different devices out there that it is impractical to create a custom interface layout for each one. We therefore chose two basic resolutions (one for phones, one for tablets). We worked with the Samsung Galaxy S2 and the Droid, but any popular device will do.

We then make sure that the design matches those resolutions perfectly. The interface should scale and adapt to other resolutions. It will not be perfect on those devices, but it will work without too much extra effort.

Step 1: Determine which platforms you will support and make a list of all the resolutions the interface should cater to.

2. Determine the orientations

This is an obvious but easily overlooked step. Will you support portrait or landscape orientation? Or both? This is a critical question before you do any design work at all.

Choosing one orientation cuts your work in half. For Momonga we use landscape only, because the game simply plays better in landscape mode. Don’t be lazy though – there are many different mobile gamers out there, and they each have their own preferences. Play around a bit to see what works and what does not. Then stick to that decision.

Step 2: Decide the orientations you will support.

3. Search for references

There are so many great games out there, that it would be silly not to look for references. Buy some games, make screenshots of the interface and take a bit of time to think about the decisions these designers made. Will they apply to your game?

These are some of the iPhone games I have looked at for the Momonga interaction design:

Above: Interfaces for Angry Birds, Heroes of Kalevala, Squids, and Tiny Wings. 

The trick here is to look beyond the visual splendor and identify the purpose of the screen. Bluntly copying a design won’t make you smarter, and it might not fit your specific goal. Ask yourself these questions:

• What information do I need to convey to the user?
• What kind of functionality does the user need?
• What needs to stand out from the rest?
• What is the context for this window?

Step 3: Use references for inspiration and benchmarks. Don’t copy, but learn from them. No need to invent the wheel.

4. Make the Screen Flow

Before you start on the individual screens, make a list of all the windows your game will have. This is your to-do list for the upcoming weeks. 😉

When you have that ready, it is time to make a flowchart of all those screens. I call it the “screen flow”. It is a handy flowchart that states how do all those screens relate to each other. When you complete a level, which screen comes first? Should you be able to go to the high score list from the main menu? These are tough questions, and you will probably have to make changes to the screen flow as you progress through the design process.

Here is the screen flow for Momonga:

Above: Example interface flowchart. (Click for larger version)

It has a main menu, a victory sequence, a game over screen, level selection screen, all the things the game needs to work well. The screen flow tells you which buttons need to be on every screen. Players need to be able to progress to the next window and in most cases, move back to the previous one.

Step 4: Make a list of all screens you need to design. Then create a flowchart with those screens. This will allow you to see how they all connect together.

5. Choose the functionality

The next step is to choose the functionality of the screens. This is where you actually start the interaction design for your game. An interface does two things: It provides information and it allows the user to do something.

It is your job to decide what information should be on the screen and what actions the user can take. I make small and simple sketches of what buttons the interface should have, and what info should be displayed. These sketches are small and rough – they don’t take into account size and positioning. The question here is: To Be Or Not To Be. Should the button be here or not? Where you place it, and how big it is, that is for the next step.

Here are some examples of this:

Depending on my mood and the stage I’m in, I sometimes sketch with a marker, sometimes on super small stickies, sometimes in Photoshop.

Some things to keep in mind:

• Less is more. Keep information and buttons to a minimum.
• Stick to the one primary purpose for the screen.
• Keep the context of the screen flow in mind.
• Try to remove any doubles you may find, unless it is a necessary one.
• Consider splitting things up on multiple screens, to keep the info bite-sized.

Step 5: Make the functional drafts of the screens. The result is a basic sketch of the interface, outlining what needs to be in there.

6. Make the Wireframes

This is where things get Photoshoppy! The next step is about making the basic layout of the screens, without colour or fluff. This is still about interaction design, but this time we start to think seriously about positioning and size. In step 5 you were probably making a doodle on a napkin, but a wireframe is more than that. It is a guideline for the designer, and you want to do the thinking for him.

Here are my tips for wireframing your game interface:

• Use a template that supports all your device resolutions.
• Before you start, sit down with your programmers to discuss the implementation.
• Along the way, sit down with your programmers regularly to verify that your design is feasible.
• In Photoshop, make a group for every screen of your game. Fill them with your wireframes as you go along.
• When making a destructive change, copy the entire group and start with a new one. You can always go back that way.
• One grid to rule them all: Create your guides and stick to them, no matter the platform or screen you are working on.
• Work in greyscale. Emphasize buttons with colors if you need to.
• No rounded corners yet: you will do a lot of re-sizing and plain rectangles are much easier to work with.
• With Dropbox you can easily test the designs on your target devices. Save it as jpeg in Dropbox, and open the design right on your iPhone.
• I like to save the designs as jpeg often. In the end I have all chronological steps in numbered files.

Step 6: Make the wireframes. No fluff, but don’t leave any gaps either. Test on your target devices. Make sure the programmers and designers can take it from here.

7. Create the design

This is where the Photoshop Guru takes over. That could be you, in my case it’s Jimmy. If you did your design work well, the making of the actual shiny interface should be a breeze in the park.

Of course, that is not how it works in real life. No matter how well you thought everything through, when it is time to really make the thing there will always be gaps to fill. Stay in close touch with your Photoshop Guru and be prepared to answer some tough questions. Make sure that you allow for creative freedom, and stick to your guns when necessary.

I won’t go into the little details of photoshopping an interface, but I have one tip for designing for mobile games: Work with vectors. We have made the mistake to work in pixels on our previous interface, and when the iPad 3 came out with its fancy retina display, we had to do the whole thing over again.

Here is the new interface for Momonga. Work in progress, mind you! 🙂

Step 7: Design the interface. About time.

8. Test and iterate

This is the part where you get to do the whole thing over again.

All jokes aside, in this step the programmers take over the show and implement the designs in the game. Of course this will be a breeze and there will be champagne and happy faces. In your dreams. Be prepared to do things over again. Design is a wicked problem: You only know if it works when you have built the darn thing and see it in action. So test your interface, and get back to the drawing board when necessary.

We are currently in the process of a complete redesign of the interface. This hurts: We spent a lot of time designing the old layouts and the visuals were carefully crafted. We spent weeks on it. But it didn’t work. So we have to do it again. This time in vectors for retina, and this time with a better interaction design.

Could I have known that the old design would suck? Maybe. Looking back, it is quite obvious. But then again, we had to see it in the hands of testers to actually know it for sure. And that is simply the way it is.

Step 8: Implement the interface and test it. Go back to the drawing board if necessary. Iterate, iterate, iterate. Small changes can make a big difference.

So here you are: The 8-step guide to interaction design for iOS and Android games. I hope this makes your life a bit easier and your designs a bit better.

PS: If you want to see the results of the screens, check out this follow-up post on the new retina interfaces for Momonga!

So what do you think? Is this the way you work as well? Have some interfaces to show off? Let us know in the comments! And if you have any questions, as always, ask me anything.

Cheers!
Derk