GUI and Layout Design
GUI and Layout Design of an iPhone game
One of the main unsung heroes of game design, GUI and Layout Design. Flashy? No. Glamorous? Not really. Important? I have found that to be an obvious and resounding yes. Over the course of Sminis I have learned that one of the main elements that really gives a video game that extra polish needed to look truly professional is the GUI. If everything in a game doesn’t truly come off as a polished cohesive unit it becomes noticeable instantly, this certainly includes the GUI.
Mobile games are especially tricky because a lot of the rules that apply to GUI in traditional console and PC gaming just don’t fit into a small hand held device. One of the main problems with working with something like the iPhone is simply the lack of real-estate, you have to keep the menus and controls simple enough that you don’t need many buttons. One of the first things you really have to do when designing an iPhone game is figure out how the controls work. Grabbing a random touch screen phone and placing it in your hands and pretending to control the game is a great way to try and get a feel for what will work well for your game. In terms of cluttering the screen with buttons the GTA 3 port to the iPhone -barely- manages to pull off having around 12 elements on the screen at one time, higher resolution displays help make this possible clearly, that is a ridiculous amount of elements but it is fantastically impressive that it seems to work… mostly.
There have been tons of iPhone games up until now and most of them have, lucky for us, done a lot of the research and testing already. I’m not saying one should completely bite off of another game, but using them as reference materials for developing menu systems and an effective layout can save you a lot of time. The other reason why looking into other games menu systems and buttons will help is because if one of the future players of our game has already played something like Cut The Rope or Angry Birds a million times then they already know what happens when they press a button with an arrow on it facing right, or when they hit a button that has three dashes with dots in front of them, there is no need to explain in any kind of tutorial and that helps the player understand and get to the game faster.
Another factor that will greatly impact the type of buttons and layout of them in an iPhone game is obviously the type of game. For games that use mostly touch controls such as Fruit Ninja or Angry Birds one doesn’t need to create any actual “action” buttons. Doodle Jump simply has you tilting the screen to control the game, and many racing games have similar controls, with Sminis we created gameplay that only required one button which made things fairly simple in that regard (and also happens to be one of the staples to our entire game play mechanic). The placement of our main action button had to be toyed with a little to where it felt just right but over all that was probably the easiest part.
The main menu screen is generally made with the thought of “get the gamer to the game as fast as possible”. In an age where mobile gaming is becoming so ridiculously popular so quickly, people are evolving their expectations of a game just as quickly. What this type of evolution means is that every popular game that has come out prior to our game has now set the bar in terms of the ease of letting the gamer pop open the app, play a level or two, and tuck it back away in between conversations or any day-to-day chore or activity. Attention spans for these types of game are limited in my experience and the GUI has to help make the action happen faster.
Keeping in mind the basic color coordination and using graphics to effectively demonstrate intent of use are another entire section or two that could be discussed, but I’m gonna leave it at that for now.
In summation… The GUI is important, do not leave it to till the last minute, the design of it can greatly affect many elements of game play and style in a game.