A nice little talk from Dorottya Kollo on the way to approach the design of interfaces in your games.
A nice little talk from Dorottya Kollo on the way to approach the design of interfaces in your games.
Introduction
Hi! My name is Dorottya Kollo but people call me Doro for short. I am a Hungarian nationality (UI/UX) User Interface and User Experience designer, living and working in London. Currently, I am working in the games industry at Splash Damage, based in London.
I started off my career within the industry as a QA Tester, and then a year later I moved into UX/UI field. I have worked on several great titles, such as Transformers, Gears of War: Ultimate Edition, Gears of War 4, Dirty Bomb and others.
I feel that I have always been a gamer and creative person at heart which made me really passionate about working in the gaming industry. I graduated as a Book Artist and Designer at University of Arts London, then I slowly worked myself up to where I am now.
User experience has always been exciting to me because it’s about putting yourself into the shoes of each user in order to understand their needs and to predict how they might approach and react to different sections within a product. It’s quite a challenging but satisfying job, as it feels like a complex puzzle which is extremely rewarding when solved well.
Staples of UI Work
Each user interface has their own specific purpose (website, games, apps, etc.) and therefore their own goals and problems to solve. In all of these cases, UI should be guiding the user and not stand between them and the product. For example, adding unnecessary animations or having a badly designed layout can easily distract the user and can sabotage the whole user flow. Personally I always try to go for a minimalistic approach so as not to overwhelm the user too much and offer them a ‘smoothest’ journey possible.
For games, it’s very important that the UI is consistent with the game itself as well. It has to represent the mood and the message of the game. Take Gears of War as an example; from the first moment you can tell that it’s a gritty, dark and gory game. Even down to the small assets, like fonts or icons, they are chunky, dirty and monochromatic, which compliments the feeling of the game and creates an artistically cohesive experience.
Balancing and Prioritizing Information
Balancing and prioritizing information is a significant and important part when it comes to the User Interface. It’s not just about communicating all of the information to the player, but it must be restrained enough to not ‘overpower’ the player too much by selectively showing only the most important information.
For example, if the player is playing a game and unlocks an item, it’s essential to retain the notification in a subtle but noticeable manner until they can acknowledge it.
Although every game has their own approach when it comes communicating with their players. Some of the most common approaches I like to use; subtle animations, glow effects, icons or luminesce colours. These ‘notifications’ have to be coherent with the rest of the interface so they don’t feel foreign within the layout.
In the end it really depends on the type of product and importance of the information you want to message across to the user. Some games might add flashy animations or strong sound effects as it might work for their style.
Prototyping
I usually work from a detailed design document which contains all of the information I need in order to start sketching out some possible ideas on paper. I generally make notes and prioritise information (primary and secondary), then I try to group them where possible.
After having a clear idea what I want to achieve, I start creating various wireframes to experiment with layouts and ideas. If the brief is more complex and involves multiple screens, I create user flows and interactive prototypes using Axure Pro.
In order to create suitable user interface, playing the game is a significant process to understand what’s needed and how the game feels. However, most importantly, interacting with passionate gamers and designers on the team who are testing the game is always very helpful for finding the best solution.
When I feel I found the most suitable layout for the task, I then move onto the UI art stage using a style guide as a reference. If there is no set style for the game yet, I always try to make sure I create one. This helps setting an artistic consistency across the product.
In my opinion, focusing on the UI art side is secondary compared to the user experience, as the design must be functional and user friendly before putting all the effort in by making the interface appealing visually.
Icons
In my opinion, taking time to do proper and thorough research is vital. It allows you to discover a common visual language which can be understood quickly by anyone at a glance. (A simple example being how people associate the ‘cross’ icon with hospitals/health in general)
An easily recognisable set of icons can make the interface a lot more user friendly, as they offer aid to users rather than being an obstacle of understanding.
Icons might seem simple from the outside, but they are quite tough to handle sometimes. When you work on games, you tend to come across more complex terms that have to be translated into a visual format. It also makes it harder, when the icon must be small but still readable.
In general, I try to approach icons in either a metaphoric way or think of the most obvious visual synonyms for them that will be very recognisable. I use this as the base language in the icon, and add the artistic touches on top.
Start Early
I think some companies make the mistake of leaving the UI Design too late. I have been on both sides; being involved quite late and also quite early on. To be honest, I much prefer the latter option. When you are in the beginning of any project, you have more time to properly plan and establish all possible solutions you might need for the UI based on how the game is being developed. (For example; navigation, assets, fonts, UI system and so on).
I feel like, if you leave enough time to create a proper interface, you will be able to create a seamless user experience which will guide players through game, without causing confusion or issues.
Also on the plus side, it’s not just going to be functional, but you will also have the time to make it look exciting and unique by adding those extra bits which you could not have otherwise!