I recently worked on the development of a mobile game. It was a two-person project, one programmer and one artist and subsequently led me to my first serious 'User Experience and Interface' design challenge.
Current UI design and layouts for 'Fall, Endless Painting Roller'
Initially, I thought creating the UI for a mobile game would be simple, wow was I wrong. It became one of the most challenging aspects of our development. It took four complete design re-writes to end up with our current UI, and it was only after taking the time to learn about UX/UI development that we ended up with something we were happy with.
Below are some of the designs we went through in those first three stages of design. The ideas swung wildly from over-simplified in the beginning to overly complex and busy before starting to settle on something more user-focused rather than design or developer-focused.
After going through 3 complete redesigns that were mostly based on guesswork we decided to do some proper research and get serious. After learning lots about the topic we came up with a neat scope of what we wanted from our UI - essentially we wanted a more cohesive user experience out of our interface.
Ease of Use - Consistency - Simplicity
We then began to rebuild our UI around these principles, focusing on what would most benefit the player.
The first step was getting the number of menus and screens right. We started by focusing on the death screen summary (by far our most challenging screen) and reducing it back to a single screen. We did this by rethinking what the player actually needed to know to play the game. We originally presented them with 3 Feats to try and achieve for a reward of 15 Gems, but we re-organised this into 1 Feat at a time with a reward of 5 Gems. Same amount of challenge and reward but simplifying the way it was presented to the player.
Following the idea of organising what the player really needs to know helped streamline the rest of the GUI re-design. A new visual style also helped simplify the number of 'menus' and 'screens' as we developed a pop-up system. This helped minimise the number of different areas the player has to recognise by making 'screens' such as the Settings or Everyplay menus appear as pop-ups over the home screen, reducing the amount of mental navigation required to get from one to the other. It was a way of making it seem like there are less 'screens' or areas of interaction than there actually are.
Following the idea of organising what the player really needs to know helped streamline the rest of the GUI re-design. A new visual style also helped simplify the number of 'menus' and 'screens' as we developed a pop-up system. This helped minimise the number of different areas the player has to recognise by making 'screens' such as the Settings or Everyplay menus appear as pop-ups over the home screen, reducing the amount of mental navigation required to get from one to the other. It was a way of making it seem like there are less 'screens' or areas of interaction than there actually are.
This also helped with visual consistency. Our pop-up menu system consists of darkening the current 'screen' and displaying the new information on banners floating above this. This is the visual style used for around 30% of the 'screens' in the Figure above (EveryPlay Menu, Settings Menu, Pause Game and Death Screen).
By the time we reached this redesign, we had already developed a consistent button and font system but it's worth mentioning that these are important and were left untouched simply because they already suited our choice of visual style. Keeping things visually consistent is incredibly important in creating trust with the player. If the player learns how something works on one screen it should be consistent or follow a similar pattern on other screens. This includes the visuals relating to buttons, fonts and information placement.
Part of our move to simplify and make things more consistent was the addition of the 'Essential Information' area. It is present on every single screen despite not every bit of information being in it being necessary on every screen. We decided it would be over-complicated to adjust this based on screen content and we didn't want to frustrate the player by making them change screens just to find certain information.
Visually a lot of our screens were beginning to look consistent, but we kept looking for ways to increase consistency outside of straight visuals. One way was making sure that all screens were designed with their interactive areas towards the bottom third of the screen both for ease of use and the aforementioned visual consistency. Keeping buttons in the lower third of the page reduces the players need to stretch to navigate around the app and also teaches them where to expect a navigational button to be.
The most important lesson I learned from this project was how important it is to stay open to change. If we had settled for our earlier UI incarnations the game would have been worse off even though these changes didn't affect the gameplay itself. This was a valuable experience and a great first project for learning about user experience as an invaluable part of design.