I’ve been reading ‘Professional Mobile Application Development by Mcwherter and Gowell. The book explains the problems when designing User Interfaces and provides best practices to use. Its nots specifically on games but rather all content designed for mobile such as apps and web content. I’m keeping to a specific chapter called ‘Mobile User Interface Design’ and I’ll be pulling content that I think is relevant to my project and how its going to influence my design choices.
The chapter begins by defining the limitations of mobile such as speed, bandwidth but most of all screen size and is good practice in making effective use of screen real estate. Where designers fail is trying to provide limitless information which increases the users cognitive load (mental effort and memory) whilst also diverting the attention else where with the need to navigate and re-find original content. I can begin to see this happening in shapeThemix.
Currently the shapes and next X is located at the bottom of the screen and from playing it and receiving feedback it starts to get slightly annoying because your thumb is hovering over the next shape so you have to keeping moving your thumb out of the way to re-find the shape. It would be much better to have these located at the top of the screen where the player will already be looking when scanning the X’s on the grid. Another problem is the fact you have to touch the cannon to move it requiring you to look at the cannon to re-find it. It would be much better to touch anywhere on that 3rd of the screen and the cannon will snap to your finger.
The book encourages you to limit the features available on the screen, which I’ve tried to keep to from the beginning. At the moment there are very few distractions. “Help uses fight cognitive distractions with a clear information hierarchy” (McWherter, J. and Gowell, S, p90) . I need to make a clear visual hierarchy for the most important components in the game being the arrangement of Xs, the next X coming out of the cannon, the cannon itself and the target shape. The main colour on the screen is from the grid of Xs so its already holding the main focal area. “Users will be drawn to larger items, more intense colours, or elements that are called out with bullets or arrows; people tend to scan more quickly through lighter colour contrast , less-intense shades, smaller items, and text heavy paragraphs” (McWherter, J. and Gowell, S, p90) . The next X is the next important object and will need something else to attract its attention. I like the idea of displaying text saying ‘Next colour’ and in a font that’s bold and really stands out and then using an animation on the X when it changes. The cannon will be the largest object in the game and will be interacted with the most. It will also be on a groove which will act like a track that the cannon will roll along so it should be fairly noticeable to the player.
The book goes over the gestalt principles and things to keep in mind when making icons or leading the player towards something.
- Proximity – When objects are grouped together they are viewed as one.
- Closure – When enough of a shape is drawn the player can fill in the gaps preventing the player becoming over loaded with too much detail.
- Continuity – Users are compelled to follow one object to another because their focus will travel in the direction they are already looking at.
- Figure and Ground – There needs to be enough to distinguish the object from the background.
- Similarity – dissimilar objects become emphasized
Using these rules will help reduce player confusion.
The main message I’m getting is to start with a minimalistic approach and to get that right first before I start adding more and more objects to the game. The objects I am still unsure about are where the menu, upgrades and the score will all be displayed, but I must prioritise my visual hierarchy and to get that right first before deciding on these locations.
McWherter, J. and Gowell, S (2009) ‘Mobile User Interface Design’, in McWherter, J. and Gowell, S (ed.) Professional Mobile Application Development. New Jersey: John Wiley & Sons, pp. 89-116.