An Introduction to GUI Design and Process
- Tamikat
- Nov 30, 2015
- 4 min read
By this I mean an introduction for us. Fall is our first game and while we had the skills to create the visuals of and program a user interface, it seems we skipped the actual ‘design part’ for quite some time. We are currently in our fourth GUI iteration, so we want to share what we’ve learned in creating the user experience (UX) of Fall so that you can learn from our mistakes.
We've been through four stages so far with our GUI Design. Here's a brief overview:
Stage 1 - Otherwise know as don't let an artist ‘wing it’
Our first pass of the GUI probably didn't count. It involved some basic design concepts for the game that looked sleek and shiny but offered very little usability. There was nothing to distinguish the buttons from the game area, or the game area from the buttons. It looked pretty but it wasn’t functional.
Stage 2 - Don't overcorrect and add all the text
Our second pass at the GUI was an overcorrection from the first stage, but it taught a valuable lesson. We created a death screen literally full of information that no one wanted to know or read. People were overloaded. On the upside, we added actual button imagery which really helped people click straight past all the information.
Stage 3 - Avoid letting a programmer rebuild it to convey ‘all’ the functionality
Our third pass was another overcorrection on our overcorrection. We decided that people didn't care about all that information because it wasn't spread out enough. We split the death screen summary into three smaller successive screens. It felt better for awhile but ultimately hindered the ability to 'Play Again' quickly, which tends to annoy people who like playing games.
Stage 4 - Do some research, plan ahead and think about what actually needs to be on screen
This is where Fall is currently at. After clicking through the death screens three too many times, we decided another re-design was in order. We did some serious research this time and really thought about creating a proper user experience with some key ideas in mind:
Speed and ease of use
Consistency
Simplicity without oversimplifying
Using these principles, we began to redesign the experience around the game.
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 and achieve for a reward of 15 Gems, but we re-organised this into 1 Feat at a time with 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 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 Stage 4, we had already developed a consistent button and font system but its 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 overcomplicated 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.
Stage 5 - Try to stay open to change and new ideas
The most important thing we’ve learned is staying open to change. If we’d stuck with any of our stage 1, 2 or 3 designs, our game’s UI would be terrible. It may not even be finished now. It's a lot better than it was but there’s always room for improvement and remembering that is what has gotten us to this point.
Some of the best links we found for UI design:
http://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crash-course-in-the-good-and-the-bad--gamedev-3943
This is where we got the quote in the second imager came from. A good read for anyone interested in UI design and focussing on what’s important.
https://www.goodui.org/
A page that lists out lots of good design rules to apple to website design for increased conversion rates. It doesn’t directly relate to App UI design but a lot of the principles can be adapted. I read somewhere that the best way to practice UI design is to design websites which makes this even more applicable.
https://en.wikipedia.org/wiki/Principles_of_user_interface_design
A list of some basic rules to apply to your UI design
