May 11, 2014
Quick, Press A!
UX / UI Design & Implementation
Quick, Press A! is an almost satirical take on the video game trope of “quick-time events”.
Available now on the App Store!
I am responsible for the design and implementation of the game’s art assets, as well as the interface.
Although quite straightforward and formulaic, there were a few challenges in creating the UI in Quick, Press A!.
Who’s it for?
The first question to answer in designing the menus was to determine just who would likely be using this app. I came up with the following three rough user personas.
1. Hardcore Gamers:
The first type of users considered are hardcore gamers. This term defines people who play a lot of games, and pursue gaming as a primary hobby. These individuals are familiar with both general mobile UI design trends, as well as trends specific to game menus. They are aware of the feature set typical of games, and have a desire to make efficient use of the depth the game has to offer. Hardcore gamers often participate in games not only for experiential leisure but to master the game. These users likely want the following from a menu system:
• Access to and information regarding the deeper features of the game.
• Fast and efficient means to make gameplay decisions.
• The ability to quickly jump back into the game at any moment.
2. Casual Gamers:
The next group likely to play Quick, Press A! would be casual gamers. These are individuals who play games occasionally for leisure, but do not pursue gaming as a primary hobby or interest. These users are likely familiar with general mobile UI trends, but may or may not have developed familiarity with game specific UI trends. These users want to be made aware of all the depth the game has to offer, but appreciate the freedom to participate as casually or as involved as they desire. These users likely want the following from a menu system:
• To immediately and easily understand what features and options the game has to offer.
• To easily make decisions on participating in deeper game features, while having the option to bypass them.
• To be able to jump back into the game quickly at any moment.
3. Tech Novices
The last group considered are those who are unfamiliar with mobile smartphone interfaces in general. This group may be unfamiliar with the expected interactions of a smartphone, let alone mobile games. These users also may desire to not interact with the deeper features of the game due to disinterest or cognitive burden. The top priority for the menu with these users is to ensure they never feel lost or confused. This group would likely appreciate the following from the menus:
• Easily understand what is happening, and what they can do next.
• Navigate and make informed decisions even if they are unfamiliar with typical mobile UI interactions.
• To have the option of participating in deeper game features, without ever having to be burdened with them if not desired.
Designing the menu.
The next task was to design a menu structure that best satisfied all the conflicting and varying needs of these three groups of users.
Clearly a few common needs could be identified. Just about anyone playing the game would appreciate the option to quickly jump back into the game whenever they desired. Additionally, clear, understandable, and fast navigation and interaction would benefit everyone.
As such, I designed the menu structure as follows:
No screen is a dead end, and every one of them includes the replay button in the exact same location. Additionally, every sub-screen is accessible from the single initial end game summary page. However, since the replay button is prominently featured on the first page from the moment the game ends, players who have no desire to dive deeper into the hierarchy can bypass it entirely.
Cheating Responsiveness
Next was the challenge of laying out each of the individual pages. I wanted to design a menu structure that would fit without modification on either a standard iPhone screen, as well as the elongated aspect ratio on iPhone 5(S) devices.
Ultimately the solution was to center the menu elements, while simply adding negative space to pad the extra screen real estate on the taller resolution.
I am happy with this solution for two reasons. One, it was a huge time saver in our development workflow. This game was initially created for the “Flappy Jam” game jam. The practical outcome of this also means the menu ends up centered on both screen sizes, which tends to be the most comfortable screen area to reach for.
Making Every Page Friendly
I also wanted to retain a retro aesthetic, while incorporating contemporary best practices in Interface Design.
I used commonly expected iOS button placements for actions like back and the replay button.
The replay button, as previously mentioned, is omnipresent and located in the same area on every page of the menus. This encourages the player to re-play the game by providing a quick exit from any level of the menu heirarchy.
Color coding is used to allow immediate differentiation between the three types of upgrade. Color also is used to differentiate buttons that navigate between pages and those that act on the current page.
The upgrade purchasing buttons also dynamically allow or deny the affordance of upgrading based on whether you can currently afford the next level’s purchase or not. Their visual appearance changes to represent this as shown on the Regen upgrade above.
The visual upgrade level bars provide information about the current state of the upgrades, while maintaining and enhancing the fun retro aesthetic. It should be noted that the current level of each upgrade is the only information provided about the upgrades. Specific information regarding the effects of the upgrades was purposfully withheld from the user. This was done to reinforce the ‘parody’ nature of the game. The mystery of the upgrades also incites curiosity and forces the player to rely more on curiousity and playfulness than pure practical reasoning.
Quick, Press A! was created by myself (@Evan_Sullivan) and Jake Cohen (@Cohen_Dev).
It is available for free on the App Store.
Thanks so much for reading! ^_^
