For the game UI, I wanted to keep the buttons simple and clear. Upon research of UI and User Experience, I discovered the following points:
- When user experience is enjoyable from the beginning of interactions with an app, there’s a greater chance of the app being popular among users.
- Splash screens are the first image users see when launching a mobile app so their duration should be short (4-8 seconds) to avoid user annoyance and have a minimalistic design; logo, title or slogan. They should be positioned in the center of the screen in order to look good on all screen sizes. Grace is designing our title page with this in mind.
- Buttons and menus should be easily accessible with a tactile, slick design and not obstruct the game levels.
- When designing buttons, focus on their purpose. Accessibility is a priority for users. Buttons need to look like buttons.
- When positioning the in-game UI, the least used button is typically placed in the top left of the screen, movement/control buttons in the bottom corners and menu navigation or additional buttons in the top right. This is for ease of use and fits with how a phone is held when playing games. Players shouldn’t have to stretch their fingers far to navigate the game.
- Key information throughout the game should be clear and appear without distracting from the gameplay.
I originally entertained the idea of having the character movement linked to swipe gestures on the phone screen but felt for such a crucial aspect of the game the potential for this to create response issues was too great. I then decided to go with a ‘tap’ input method and arrow keys for movements. Touch targets should be at least 48x48dp (density independent pixels) with 8dp between them and have appropriate padding or white space around buttons to avoid mis-pressing.
As triangles and arrows are commonly used to symbolise movement in games, I decided to use triangles for our buttons as they would be globally recognisable and are simple in their design. I drew the triangles in Photoshop, cut a segment out of the middle so I could place a lower opacity triangle in the centre so the user can see the game level behind them. Using the bevel tool created a contrast between the centre and the outer triangles. When placed over the game levels, the overall triangles will have a lower opacity to minimise obstruction of the level.
For the settings, a cog will be ideal as a lot of apps use this. A simple design created with a circle with the inner cut out and tapered round-edge rectangles. A beveled edge was used for contrast.
Hearts will symbolise Blip’s health. To indicate the loss of health, a segment will be taken away. Initially, I showed this with an empty/non-coloured half but found this wasn’t clear against the backgrounds. Semi-transparent grey half is much clearer. A yellow outline was not a good fit over the level designs so a black outline will be used instead.
The group discussed having a timed element to some levels. To demonstrate this, a stopwatch was chosen by the group. Created in Photoshop using basic geometric shapes; circles, rectangles and triangles, this design choice is simple and clear.The time is displayed on the right of the stopwatch rather than inside as the placing the text inside could make it too small and unreadable on smaller screens. Also, having the text on the outside allows the timer hand to be animated.
I experimented with colour, creating a grey version so the timer is visible for darker levels and a red version for when the timer starts running out. It may be a good idea to have the red stopwatch blink/flash when the timer runs down and perhaps a klaxon or alarm sound too.
For the menus, I originally thought of having them yellow in colour but found this to be too jarring and harsh on the eyes. I instead chose orange as it contrasts with blues, greens, purples and is still bright enough to stand out against black and grey tones. Using two shades of orange and a beveled edge provides a clean edge. To allow for the menu buttons to be the same shade as the menu a beveled edge was used again as well as a drop shadow. When a button is pressed on the menu, it will grey out to indicate that it has been pressed.
To allow the player easy access to the in-game menu, I created an icon that is similar in appearance to the menu. I made this square rather than maintain the rectangular shape of the in-game menu so that it would fit well in the screen corner and take up less space in the game area. The menu tabs are a dark grey colour here so that they are noticeable when scaled up or down for differing screen sizes. When the menu tab is pressed the game is paused and the above menu will appear on the screen, giving the player the access to the store, moments (previous game saves) and the means to go back to the main menu if they wish.
To see how all these different elements would look when placed over the level, I created a mockup using a template of the latest phone model, the iPhone X. Im very pleased with the result and feel that the different elements aren’t obstructing the level or drawing too much attention from it. I really like how the orange of the menu stands out against the level design. On the iPhone X template, even though the screen size is larger than previous models I stayed away from positioning any UI in the leftmost corner (the top of the phone when upright) as this is not usable space and the player wouldn’t be able to press any buttons placed there.
I added a treat counter using the hamster treat asset created by Lauren. I positioned this to the left of the centre of the screen to leave adequate room for the stopwatch for any timed levels.
For the main menu page, I wanted to incorporate Blip and Hammy in some way. Since the premise of the game is Blip trying to catch Hammy, I thought it would be a great idea to show this on the main menu page. Players would know what the game is about, if they didn’t already. I chose grass and an open sky for the background here as the first level of the game will be outdoors so it ties in with that. I opted not to include any trees here to keep the background clear and uncluttered and the menu and title noticeable. Blip and Hammy were both created by Lauren, I simply positioned them onto the background I had created and only had to change the position of Blip’s feet to fit with the background and bring the opacity of Hammy’s ball down so that the background was slightly visible through it. I added in the title, using the font and font settings used by Grace on the splash page.
And that concludes the UI section of the game app concept.
Thanks for reading!