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.

gui_concepts_victory_19_win_challenge3

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:

photo-3 photo-6 photo-5 photo-7

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:

momongascreenflow-1

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:

photo-8 functionalitysketch

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.

momonga-menus-interaction-design-challenge-complete momonga-menus-interaction-design-3k

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! 🙂

gui_vector_leaderboard_3 gui_victory_sequence_1

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

25 Comments
  • Tim Miller
    Posted at 19:03h, 04 May

    Great article, Derk. Thanks for taking the time to put this together!

    I notice that you specify that the iPhone 4 retina display is 326 ppi and that iPad 3 is 264 ppi. When setting up a photoshop file, I usually set the Pixels/Inch to 72 – should I be setting this higher when creating art for retina displays?

    • Derk
      Posted at 20:44h, 04 May

      Hi Tim,

      We do that as well and it works just fine – I guess a pixel is a pixel no matter the screen density. Having said that, it’s tough designing for high ppi densities on 72 ppi. I use dropbox to test the designs on the target screens.

      Have fun! 🙂
      Derk

  • 5 Alternatives to a Game Design Doc And 3 More Devblog Posts :: Control Magazine (beta)
    Posted at 14:25h, 09 May

    […] 2. Paladin Studios: The 8-Step Guide To Interface Design for iPhone Games […]

  • Snow
    Posted at 21:12h, 16 May

    Thank you very much for this Derk. This is exactly what I need. I never studied graphic design and by nature – I draw like a photo copier, but I cannot design myself out of a paper bag. I have a few upcoming apps that require simplistic, but functional and professional looking UI’s. So this guide is perfect.

  • Design 45
    Posted at 09:53h, 05 August

    Nice article, puts things into context.

  • priyanka
    Posted at 08:33h, 18 October

    hi derk…thnx for uploading the 8 step guide..i am a fresher in game designing n UI is a tough task to me..but it is helping me to understnad the interface design 😉

  • begadangsekali
    Posted at 17:55h, 16 January

    nice article dude.. its very usefull thx

  • Rohini Gupta
    Posted at 13:25h, 23 January

    This tutorials really helped me a lot..I like your screen flow.Looks simple but works gr8..

  • Jean Menezes
    Posted at 03:59h, 18 March

    Thanks for sharing your knowledge my friend, it surely helped a lot..

  • Alan Schramm
    Posted at 22:09h, 13 April

    Obrigado! Esta me ajudando muito

  • tony tarr
    Posted at 00:48h, 31 October

    Hi Tim, We are trying to better understand what is the best way to create the art. We have been dealing with art flexibility and reuse. We have created art in illustrator but it’s still a pain to get it into development environment and process. We are considering to redo the art in programming language like QT or iPhone or android. Like for instance if I create a button in illustrator with a 2 pixel corner radius and save it out for use in a QT developed application I am now forced to resend new graphics every time I want to update that button. But if design the button in QT then all I have to do is change the corner specs in the code. thanks for any insight. Tony

    • Derk De Geus
      Posted at 15:13h, 31 October

      Hi Tony,

      I’m not much help here, because our workflow is fairly static as well – when we need to change the visual style of a button, it’s back to Photoshop and re-importing to Unity. I did hear some rumours about a new feature in Photoshop CS that lets you define a batch saving process based on layers – but we haven’t tried it yet.

      Good luck! And keep us posted 🙂

      Cheers,
      Derk

  • Momonga Monday: 4 Work-In-Progress Updates » Paladin Studios
    Posted at 11:41h, 01 November

    […] Yorick and Tedo are working hard on the implementation of the new interface. You have seen the interface designs for the iPhone and iPad versions of the game, and now we are making them functional. (And by the way – if you are interested in the interaction design process, here is an 8-Step Guide To Interface Design for iPhone Games.) […]

  • Momonga Monday: The New Retina Interface » Paladin Studios
    Posted at 11:42h, 01 November

    […] our recent Interface Design Tutorial, I mentioned that the interface was getting a complete makeover. With the retina interface for the […]

  • Interface Design for iPhone Games – Notes » lolwithtims blog
    Posted at 00:06h, 11 May

    […] are the notes I’ve gathered while reading through this article on Interface Design for iPhone […]

  • Jeppe Kilberg Møller (@JeppeKM)
    Posted at 10:47h, 25 June

    Fine post! Test & Iterate could easily be moved up to save you time in the long run: Both paper prototype testing and testing in wireframe could save the UI artists and designer time, so redoing things ismdone when it’s the least time consuming.

  • Eleojo
    Posted at 18:32h, 27 August

    Thanks Derk, awesome article.

  • Demos, CGs, GUI, oh my! | Cyanide Tea Blog
    Posted at 03:26h, 31 January

    […] as some potential future changes. The mobile world is pretty all over the place. I’ve found this article to be very enlightening on mobile UI design, they know a lot more than I […]

  • Shalin
    Posted at 10:53h, 20 February

    Very good tips and fine article. Thanks

    Regards,
    Creately

  • PC Jyo
    Posted at 21:32h, 25 May

    Thank you sir !

  • S03 – Progress Report – P01 – The User Interface Monster – Beginning – colorgameplay
    Posted at 08:04h, 17 November

    […] Games, 2. (2016). The 8-Step Guide To Interface Design for iPhone Games. Paladin Studios. Retrieved 17 November 2016, from http://paladinstudios.com/2012/04/23/the-8-step-guide-to-interface-design-for-iphone-games/ […]

  • Syed Hassan Raza
    Posted at 23:33h, 11 March

    Derk you are my hero, I am new to game ui designing and I will apply your 8 steps and guidelines…….thanks for sharing this important piece of knowledge and experience.
    Regards
    Syed Hassan Raza

  • sania
    Posted at 03:30h, 21 January

    I have tried to learn game designing before but failed, I have partially updated some of the stages and level code for some games
    if anyone would be interested
    http://bit.ly/2mWrY0X
    this game has the issue of updating before but not working well and show extremely exciting
    thanks to anyone who would be interested and give me ur opinion about it,

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.