The Watcher, UI/UX for Games
User Journey
This is a video demonstrating my UI/UX design created for a futuristic first person shooter as part of my honours project at Abertay University. This specific video shows a user journey, navigating the interface before reaching the gameplay. Below illustrates a user registering a profile before progressing.
Registering User Profile
My aim was to explore user experience design and emerging technology in order to understand the extent to which graphical user interface design can impact upon the flow of gameplay.
I created a streamlined menu system, in the essence of a dashboard, for a fictitious AAA game title, The Watcher. This was designed to be used as both the main menu and pause menu to aid efficiency in order to aid the flow of gameplay.
This year has been a journey, learning what defines user experience within games while iterating existing designs to create a seamless branded user interface. The research began by looking at traditional software methods used by leading industry professionals, including Jakob Nielsen. His theories coincide with the conventions of computer games to create an efficient user friendly interface.
In order to make this easy to learn and memorable I looked into psychological theories, one of which was by George Miller in 1956, this looked into how the human brain interprets information by associating chunks of information as patterns. This method suggests that the user should be able to remember information easier due to the way it is structured. Miller’s theory states that grouping information between 5 - 9 items allows for the brain to process this better. Therefore, the basis of my designs have been created around this method.
Additionally, an important factor discovered throughout this research was consistency which filters through into each area of user experience design. Visual design was essential to support all the information on screen therefore, coinciding with Miller’s theory the use of colour helped create defined categories which are instantly recognisable at a glance. This method allowed for the information architecture to be structured in an effective way.
The audio for this project was created by Irvine Cruickshank and this helped support all the visual elements and animation by offering effective user feedback. The audio and animationed transitions tie in with the futuristic theme while breathing life into the user interface.
When moving onto the heads-up-display (HUD) it was important to carry the same design principles forward in order to create a seamless project. The research for this area looked into non-diegetic, meta, spatial and diegetic UI, each offering different levels of immersions. The original idea was to focus on spatial UI and diegetic UI to convey these elements within 3D space to refrain from cluttering the user’s screen. However, late into the project it became apparent that the footage was unable to be tracked inside After Effects due to the sporadic movements. Without the use of these tracked points on screen it was next to impossible to create this effectively. Each assets would have been assigned to markers which would have created an authentic visualisation of how this would look in game, without the method of camera tracking it could not be done. I did however try to do this manually but it did not look professional as the UI elements did not stay static when moving on/off screen. Therefore, I decided to create still images to convey non-diegetic and meta UI to convey the information the user needed to know.
This design looks clean and consistent with the previous menu system. the bottom right corner shows information relating to the users primary, secondary and tactical weapons. The ammunition is conveyed using dots, white represent a full ammo clip and a semi transparent dot resembles a used ammo clip. The vivid white weapon with the corner highlight illustrates to the user that this is their selected weapon, should the user press button Y this would then change to the weapon below and button RB would throw the grenade.
The radar located top right coincides with the map found within the menu system allowing the user to instantly relate to it. The objective information shown on the left side is minimal in order to keep the user engaged within the gameplay. All notifications would appear in this area with an associated icon for consistency.
This image illustrates the quick inventory select menu whereby, users can assign weapons from their inventory using the button Y. During gameplay this menu can be accessed using the D-Pad. Once summoned the user can press up to change primary weapon, right to change secondary weapon, down to change visor and left to change tactical weapon. This menu helps aid the flow of gameplay as it avoids the user needing to pause the game to change a weapon.
This shows the scouting visor being selected from the quick inventory select menu. The visor changes to allow the user to highlight enemy targets enabling them to plan more efficient attacks. This spatial UI coincides with all the other assets found in previous menus discussed.
The honeycomb mesh is regarded as meta UI as this ties in with the narrative of the futuristic theme. The hexagons are what makes the users visor therefore, when they receive damage this honeycomb mesh appears on screen with a red highlight around the periphery to symbolise damage. This is accompanied with dead cells on screen to further convey prolonged damage. This was something which the participants during user testing were fascinated with as they thought it was a cool idea.
Reflection
One of my favourite parts of the project, other than creating the final artefact was user testing. During this session, I managed to see first hand each participants reaction to my wireframe designs which was a positive experience.
The biggest challenge, other than the dissertation, was the animation of the UI assets within the dashboard. Animating transitions to breathe life into the interface is difficult when everything should be loaded almost instantly. The time available to animate was around 1 second therefore, many iterations had to be completed before finalising. This was a great challenge, something I really enjoyed.
Unfortunately, the game footage could not be tracked therefore I was unable to simulate my HUD working in real-time. I should have tested the video sooner but it took a while to obtain high quality footage. Having used this feature before I didn’t think that this would have been an issue. This meant I spent a little longer on my dashboard making the animated transitions a lot slicker and I also created an inventory menu.
The still images of the HUD designs are good, as they tie in with the theme and coincide with the assets designed in other menus. My only concern was not being able to create diegetic UI, by assigning ammo to the gun however, I was limited in the area with or without footage as my restrictions are only what the video shows. If this was designed for virtual reality, such as the Oculus Rift, the user would be able to look anywhere in the environment enabling them to see the ammo count on their gun.
I had also planned to show the holographic map being unlocked to show this during gameplay which didn’t happen. The idea was for the holographic map to beam out from the users feet allowing them to look down at a small representation of the map to see near by amenities and enemies etc to create an immersive experience.
Although, there was some issues, I think I have taken a lot from this project. The wealth of research can be seen throughout my project as everything has a purpose to help aid the flow of gameplay. The final video shows an image of a game underneath the menu system to help keep that connection with the game and the user, which was a big goal for me. The final artefact is consistent throughout and I managed to design over 50 icons, 33 of which are located within the upgrade menu. That itself was a challenge. I found it easier creating these directly inside illustrator as the pen tool is such as powerful element with the ability to add and delete points to create shapes. Creating new unique icons is a challenge, especially when trying to keep these minimal to tie in with the overall theme of the game. A lot of pre planning went on in the background to create the tier structure and to establish which each unlock gave to the user.
If I was to start this project again knowing what I know now I would choose to implement this into a game engine. It was unfortunate that I couldn’t find enough tutorials to understand how to use Autodesk Scaleform, which is used to embed SWF files into 3D geometry to create diegetic UI. The reason I didn’t stick with trying to program an interface was down to the fact I wanted to show this working in real-time over existing game footage. However, I still learned a lot in the process.
Despite the ups and downs of the project over the course of the semester I learned everything I needed to in order to create an effective user interface for a first person shooter. This research could also be applied to other game categories and technology in order to create a good user experience.
References
Game images used within interface:
Link 1
Link 2













