Graphical User Interfaces, or GUIs, are one of the most underappreciated aspects of game design. A game’s GUI consists of everything that you can see and interact with outside of the core gameplay. Menus, buttons, and checkboxes are all classic examples of GUIs. They help you guide the player to a game’s various modes and options, and navigate features like leaderboards and matching servers.
Recently, while reorganizing the menus in Deathfall and IKAROS, I discovered a simple technique that we’ve found to be very helpful in designing elegant and robust GUIs. This technique is so simple, in fact, that I’m afraid some of you may call it “obvious.” However, it took me six years as a professional GUI designer to stumble upon this process, so I’m hoping that it might also be new to some of you!
GUIs are often designed using flowcharts. A labeled box represents each screen, and arrows indicate how players can progress from screen to screen.
This sort of diagram works very well for mapping out the overall flow of a game. However, in my experience, they can get quickly out of hand in more realistic situations.
Above is an actual flowchart from Cash Cow, and as you can see it’s starting to get out of control. Its overlapping and tangled lines obfuscate the most important information it is trying to reprsent: “If the player is on one screen, what other screens can they get to?”
The Navigation Grid
My solution provides a single, easy-to-read summary of an entire GUI flow that I call the “navigation grid.” It is constructed in three steps:
1. Create a square grid, with dimensions equal to the number of screens in the GUI. So if a game has eight screens, create an 8×8 grid.
2. Label each row and column of the grid with the names of each screen. (Each screen will appear twice, once on the vertical axis and once on the horizontal axis.)
3. Mark a dot or “X” on the grid wherever it is possible to navigate from a screen in a row to a screen in a column. These connections are “one way,” meaning that the player might be able to go from the Pause Menu to Level Select, but not directly from the Level Select to the Pause Menu. In the image below, the Splash Screens can go to the Title Screen and the Title Screen can go to Options, Credits, and Level Select, etc.
There are several advantages to using this tool:
1. When creating the layouts for each individual screen, the navigation grid acts as a concise reference as to which navigation points need to be designed into the layout.
2. The grid provides a fast “gut check” of a GUI’s simplicity. Are almost all of the grid squares filled in? The screens might be too complicated. Is the grid very large and sparse? Perhaps some screens can be consolidated.
3. By scanning each column, you can easily determine the entry points to each screen. This can be used to determine what sort of game data will be available, what graphics are already loaded, and even whether background music needs to be changed.
4. The grid is a compact list of test cases. A tester simply needs to test each “dot” to make sure that navigation is working correctly.
5. The grid scales well. If a screen needs to be added, you only need to add a row and column. Flowcharts get messier and messier because of their combinatorial nature.
6. As you are filling out the grid, it forces you to think, “Do I need to be able to do Thing X from Thing Y?” A flowchart, being more freeform, does not prompt a designer to explore all potential navigation possibilities.
The navigation grid provides a great summary of the flow from screen to screen, but it does not replace the value of traditional flowcharts. It is not a good representation of a player’s overall path through menu screens. A flowchart illustrates this more effectively.
Additionally, the grid does not give any indication as to how the player gets from one screen to the next. Is there a button? Does the transition happen automatically when the player wins? This sort of information is also better represented by labeling the arrows of a flowchart.
Use in Combination
The navigation grid is most powerful when used together with flowcharts and layout diagrams. Because it exhaustively represents each navigation possibility, it can be used as a starting point and crosscheck for more detailed designs. Most importantly, it is one more tool that we as designers can use to help ensure that our interfaces are simple, intuitive, and consistent, so that players have a positive experience from our games even when they aren’t actually playing them!