Hello.

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

The Watcher User Journey Audio Test

This is the first test with regards to adding outsources audio. It is coming along nicely however, I have asked the audio designer to create a sound effect for the keyboard movement and confirmation (which isn’t in this video) and a sound effect for the dial in the upgrade section as it needs some form of sound. I think it is the small things like this which will help add more life to the interface. 

Also, I have changed the map icons again back to black symbols because these are easier to recognise when using the scan line effect.

This test render has a technological ripple sound effect for when the upgrade menu opens however, it is difficult to hear with the change of screen state transition sound effect. I will remove this transition effect to allow the specific ripple sound effect to be heard. This will help breath life into the animation. I have also added the new sound effect for navigating the upgrade dial before entering any section, which sounds really nice. 

This video has a key press sound effect which gives the user feedback that their button press has been registered. A soft sound effect has been added for when the upgrade install is completed to again, help give subtle feedback to the user. As mentioned about I have also removed the transition sound effect so the upgrade widget sound effect is more prominent that before.

Register Profile Audio Test

This is illustrates the audio when navigating the keyboard such as manoeuvring and press down sound effects. These sound effects would be reused within other areas to improve consistency and efficiency.

The purpose of the graduation show:

“to communicate your research process, activities, and outcomes to a general audience in response to a clear project aim.”

My Project Aim

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.

Therefore, I have created a streamlined dashboard, to be used as both the main menu and pause menu in order to aid the flow of gameplay. 

Graduation Show

I have been allocated a space in the Hannah Maclure Centre (HMC) which was a nice surprise as I actually asked for an area in Whitespace as HMC wasn’t on the exhibition form. The area comprises of 3 boards, the measurement of one of the boards is 3ft 11″. I am sharing this space with another student who will be using one of the boards on the end. We both have a little extra space to use on the middle one however, this will be the area where the PC will sit which we both share to show the public our work. 

I have contacted Creative Graffix to have my work professionally printed on A2 5mm kapa foamboards. I initially wanted these mounted on black card or framed however, I couldn’t find somewhere in Dundee which would do this. 

Layout Examples

I decided to measure an area on my floor to ensure that A2 side by side would fit

I also tried the alternative layout to compare below

I have decided to go for 4x A2 width but cut in a 16:9 ratio as the artwork was designed for. Showing 4 images of the interfaceas the same size would look much nicer and uniform.

Even though these are expensive, I have set aside money for this because I think seeing my work professionally printed on A2 boards will look really nice. The A5 board will have my project aim and branding on it, the idea was for this to look like a plaque similar to those found in an art gallery below a painting.

I also had a quote for an A5 16pp booklet as I thought it would be nice to have the UI style guide printed for people to see. However, I have since opted to create a digital booklet and show this on my iPad which will contain selected work from my final project including flow diagrams and wireframes.

Artwork for Graduation Show

So the order of the above images would be top left, bottom left, top right and bottom right (A2 width with 16:9 cut) with the project aim located middle bottom (A5 width with 16:9 cut).

The branding at the bottom of the A5 foam board will coincide with my resume and business cards.

Original

White icon symbols

Square icons with white symbols

I have experimented with the icons on the map as I wanted something noticeably different to the user but with a small change as I felt the black icon symbols were to similar. I have opted to use the full coloured circle icons with white symbols as these coincide with the other icons making it consistent throughout. I think the square icons work nicely and are immediately recognisable as to being different from any other icon within the interface however, I feel the squares are just to sharp for the map which has many soft rounded corners. 

This was my first test render with all the footage together. It is looking good however, it is important to note that for the final artefact each task assigned to the user testing will have a caption such as “Register user profile”, “Logging into user profile” etc. There will also be one final user journey which will show a pre defined path from the user logging in.

I like how the dashboard has life to it with the small animations such as the delays in the level/proficiency gauges. This dashboard looks consistent in style and fits it’s target genre of a futuristic first person shooter. I still need to add the outsourced audio from my friend Irvine Cruickshank who is a sound production graduate, which I received over the weekend.

At the moment I am not happy with the gradient background as there seems to be some banding when viewed on YouTube and my desktop PC however, this seems to be fine on my MacBook.

I have removed the gradient background to keep this a flat dark green colour, which looks a lot better than the first test render. Below I have experimented with scan lines and a slight glow for an added futuristic effect. 

I really like how this turned out, I was surprised that for 1min 10 sec video took 3 hours to render though. It has added an extra rawness which ties in with the futuristic theme. Below I have experimented by adding an image of the Crysis 3 to show how this would look over real game footage.

I think ties in with the aim, to create a user interface design which aids the flow of gameplay. This helps keep the user connected to the gameplay, without removing them from the environment. As this dashboard is designed to be a part of the characters suit, which is used to operate various functions, it makes it an important aspect of the game. 

I have been experimenting with the HUD design. The above image shows all the assets on screen at one time. 

The radar is located in the top left which is consistent with the map found in the dashboard. Radar’s are usually found top left or bottom left of the screen.

The bottom left corner shows the weapon select widget which would allow the user to change their primary, secondary, tactical and visor on the fly by assigning these from the inventory section within the dashboard. This was something which was identified as a nice addition during user testing. The design of this is consistent with the square wireframe panels found within the dashboard but I think it looks a little regimental. 

In between the radar and the weapon select widget is the area notification will pop up such as achievements and mission objectives. I have decided not to put these near the centre of the screen which is found in other games because it is distracting to the user. I have adopted a more subtle approach in the hope that it does not hinder their experience.

The instructions below the centre of the screen show how the user would pick up ammo. However, more experimentation is needed to make this more visual without supporting text. 

I have also added a red triangle to highlight enemy targets when activating the scout visor.

I have moved the weapon select widget to the middle of the screen but below the eye line in order not to distract users. I have decided to use the circular widget which coincides with the upgrade menu widget. This is again controlled by the D-Pad to assign primary weapons etc on the fly. 

I have added a skull to the red target which makes this a lot more clearer to the user although, this does clash with the bounty icon it still enforces the fact that it is an enemy target.

The weapon display has been added to the bottom right of the screen which is common area. I have experimented with using the gauges to illustrate ammo count instead of numbers as this coincides with the futuristic theme. Each dot symbolises how many ammo clips the user has for that specific weapon, white represents full clip and grey would illustrate empty clip. I have also experimented by adding attachments next to the specific weapon to make it clear to the user what is selected.

I have since changed the colour scheme of the HUD as I thought the yellow was rather distraction so I have opted for the white as this looks clean. Any colour presented on screen will help aid the player such as red being an enemy, teal being a mission objective and yellow being an achievement. 

I have changed the way the user would see the (X) button to pick up weapons. There is no text but when the user approaches an ammo crate the (X) button would appear with a grey circular outline around the button, when the user presses X the outline will start to fill white. If the users holds (X) for long enough their ammo will replenish, should they stop the white fill will slowly deplete to where it began.

HUD Designs in Action

Below are the final designs for the HUD. The only thing left to do would be to tilt the UI 35° inward to help create depth and the essence of wearing a visor.

Collecting Ammo

Here is an example of the HUD working while picking up ammo.

Activating Scouting Visor

This shows the user pressing down on the D-Pad to change to their scouting visor.

Scout Visor (Without bottom visor line)

Once the user activate the scouting visor they can add targets to help identify enemies. The design coincides with the map of the dashboard and that of a drone or surveillance camera helping the user relate to it. 

Scout Visor (with visor line)

This design is the same as above except for the bottom visor line being visible. I think having this keeps the HUD consistent with the other default visor but without it makes the screen clearer however, both work perfectly fine. I think for consistency I would choose this design.

Notification: Mission Objective

This image shows an example of the mission object coming on the screen. This would fade in and the lines would draw on screen to coincide with the dashboard animation sequences.

Notification: Upgrade Points

This is an example of the player being awarded an achievement. This is discrete allowing the user to concentrate on the gameplay. Supporting audio would help the user understand that they have unlocked upgrade points etc. The icon for this is the arrow from the mini map, I thought using this made sense as the user knows that the icon represents them. The colour yellow is recognised with their system throughout the dashboard which would mean when they see this that they have unlocked something for their system. 

Honeycomb Mesh (convey loss of health) 

As you can see I have added the honeycomb mesh to this to help convey damage to the user. It is quite difficult to see from the size of the image but to someone immersed within the game environment would instantly recognise this.

There are dead cells present on the screen as well. The more damage received the more dead cells would appear, I imagined this being a 3 stage damage before death.

Alternative Honeycomb Mesh (convey loss of health)

This is an alternative mesh which fills in the hexagons rather than only the stroke however this is very intrusive. I think the subtle approach works better. 

Early Honeycomb Mesh Designs

This was an earlier honeycomb mesh design which shows the identified enemy target fully red. The periphery of the mesh is also read to show loss of health.

This is an alternative honeycomb mesh showing an inside and outside stroke.

This is another alternative honeycomb mesh with the inside filled to help convey loss of health better.

So far I have my business cards which I ordered from Moo. They have a good range of specifications to choose from. I decided to print these on their luxury card as this offered the option for a black inline which matches the colour of my logo design.

I decided on this design because they are friendly and inviting, I tried to add a little personality to them because of it being the Graduation Show. I thought if I am away from my stand that I having a friendly hello might encourage someone to pick it up so they can look at my other creative work located on my portfolio. 

As well as promoting myself for the graduation show as a UI/UX Designer I need to remember that there is always the option of marketing myself as a freelancer as well as a UI/UX designer for the graduation show. Although, I have been aiming towards Graphic Design and UI/UX design I have also acquired skills in designing for print including branding and editorial design. Graphic designers work with different mediums, which can be misunderstood due to the many fields within this title such as typography, illustration, web design and editorial design etc. Therefore, I decided to label myself as a designer who focuses on branding, editorial design, graphic design and UI/UX Design. Graphic design in this case would relate to the artwork needed to support these areas.

As I previously posted there was an issue when tracking the footage of Crysis 2 therefore, my plan was to do this manually. Unfortunately, animating spatial and diegetic UI manually has been incredibly time consuming. I even changed my approach my using a 2D overlay (non diegetic UI) but the scope of my in game sequence is still to ambitious given the time left plus, I did spend a lot of time animating my dashboard and designing icons for the upgrade menu. 

I have since decided to conduct experiments of the HUD focusing on still images and if there is time left before submission I will create some animation tests such as collecting ammo and firing the weapon.

Below is a test render of the HUD overlay on top of gameplay footage:

This was a challenge to animate spatial UI over gameplay footage because of timing issues. The biggest road block for this was the fact that I could not track this footage to assign UI assets to markers. I tried to show how it would look when the player marks a target during gameplay however, trying to keep this above the enemy was difficult due to the sporadic movement of the player. This enemy comes on and off screen a couple of times which draws more focus to this area therefore, unfortunately there isn’t enough time to do this to a high standard.

Before

After

I have made the profile menu animation transition a lot slicker than what I created previously. I have managed to reduce the loading sequence by 1 second which has made a great deal of difference. The animation took 3 seconds but now it takes 1 second with an additional second to load the fill inside the level bar.

I experimented with a similar scaling animation as the upgrade widget however, this unfortunately overlapped the loading instructions. There isn’t enough white space to allow room for this type of animation sequence therefore, another will have to be experimented with.

This shows the scaling animation from 0 - 100 with no squash or stretch which works better but it doesn't have the same impact as the other menu screens within the dashboard.

I added some opacity animation alongside the scaling animation to give a flicker effect which works well but again it still doesn’t have the same impact. To animate the lines drawing onto the map would be overkill as there are many of them. 

This render also shows the map legend, navigating to the mission icon and setting a waypoint which looks good for now. It conveys the right amount of information and the animation sequences are quick and responsive to the user.

This is the same render as above but includes the navigation. I think overall, the menu is consistent throughout and ties in with the futuristic theme. The typography and icons are clean making this easy to read which improves the flow throughout the interface. Each design has been influenced with the research conducted throughout this year to create a user friendly interface for a futuristic game.

This was my first test render to find out how the upgrade widget looked when opening. My aim for this animation is to add some life to the interface by creating a ripple animation with some extra pace as this widget is intended for games therefore, this should be prompt at loading and opening. I like the speed of this as it draws focus to the widget create a wow factor.

My second test render includes text and colour to highlight how the user would select upgrades to install and how they would establish what that icon represents. For consistency I have animated the information box lines, which draw onto the screen adding more life to this interface.

This test render illustrates the process of navigating to another upgrade icon and installing this, which includes user feedback with yes or no options and an installation bar to coincide with the loading/proficiency bars seen throughout the menu screen so far. This quick animation helps build the relationship between the user and the user interface as they should feel they are installing these upgrades to their personal visor to aid them during gameplay. 

This clip shows the user how it would look when navigating back out of the combat section and highlighting another before entering. As you can see I have also animated the lines coming off screen when exiting to coincide with the drawing in animation.

This render shows everything working as planned, during this animation sequence 2 upgrades are installed, one from the combat section and one from the tactical section. I aim to show the unlocking of the holographic map during gameplay to show how this would look in game. My intentions are to have this map consistent with the map found in the dashboard but open up around the players feet upon pressing select.

This was my first test render which I was really pleased with. The thing that needs attention is the proficiency bars, they require more time to match the consistency of the profile menu. I will need to make sure that the number counters match this increase. Other that I think it looks good and the animations are rather slick which is a good thing as users will be able to access the informations immediately. 

I have increased the frames of the proficiency bars which looks a lot nicer and the number counters match this too. For consistency I will need to increase the loading text (bottom left) to match that of the profile menu.

This was my final test render which includes the navigation and the same amount of frames for the loading text (bottom left) as the profile menu which improves the consistency. I am happy with this for now, things that I will improve will be smoothing out the loading/proficiency and experimenting with a blur effect on the number counters.

This was my first test render which is a good first attempt. I wanted to try add some life to this interface by drawing out the lines which gives this a technical feel. The timing is out with regards to the navigation and the profile menu as there is some overlap but that is easily fixed. Also the faction emblem, username and the user level icon come in at the same time so I will need to fix this. I think the level meter and mission gauge could come in once everything is loaded as it would have more of an impact, adding a little wow factor. I’m trying to keep the animations down to around 3 seconds if possible as it is intended for a game therefore, users will want immediate access to information. However, I am unsure how annoying this would be after to 100th time entering the menu but I am trying to add some life to this in order to make it more appealing and coincide with the theme.

This was my second test render, I removed the navigation to focus on the profile animation. When I was iterating I experimented by increasing the pause between the loading text (bottom left) and the profile information coming in on screen but the pause is to long. As previously mentioned, I brought the level meter and mission gauge in once everything else had loaded but since viewing this I think the level meter and gauge could extend for longer, I feel this is a little sharp and that lengthening it will add a nicer transition. 

I still need to fix the username and level icon timing as these both come in at the same time but it is moving in the right direction.

This test render has all the fixes that I pointed out earlier however, I have noticed that some extra time needs to be given to the loading text (bottom left). I think having the level meter and mission gauge animation last that little longer looks a lot nicer than before. 

As mentioned in my previous post I wish to use simple and subtle animations as the user will want to get through these sections such as the intro, registering and signing into a profile rather quickly in order to get to the gameplay. Having nice animated effects which last a while would no doubt infuriate the user therefore, it is my role to come up with something visually engaging and user friendly.

This was my first test render of the keyboard animation sequence and I was pleasantly surprised how this turned out. I focused on the keyboard first in order to make sure the timing was good. I was unsure whether to animate it in a way that it resembles a real user such as putting a mistake in and having the user delete the mistake and different pauses on each letter etc. However, I have decided for now to animate it as though a pro was using it.

I also made a concious design decision to remove the loading bar on this screen as it isn’t needed anymore. My intention was to have this symbolise the position the user was from loading to finalising registration etc. However, from animating the intro sequence I believe once the system is booted that there is no need for a loading bar anymore although, I have decided to keep the animated text to offer user feedback with regards to which screen state the user has progressed to.

This was my second test render which shows the username appearing on screen in the text dialogue box. Nothing has been changed to the keyboard animation as I think this is a great first pass for now but I will return to this once I have completed the other sections. 

I wish to keep the animation simple and subtle throughout my design as this user interface design concept is intended for a game engine. I am using a low number of assets which are reused on different screen states which still conveys the right amount of information the user needs to know while coinciding with the theme. 

The important role of the animated transitions is to breathe life into the user interface while remaining consistent and true to the target genre and nature of the game. 

This was my first test render to see how it looked overall with regards to timing and fade in/fade out transitions. This was a good first attempt, I like the button ‘(A) Continue’ pulsing as it immediately recognisable however, I didn’t like the loading bar staying on screen once it had reached 100%. I am questioning whether the loading bar is needed but it does help link the player to the menu screen which would be their visor which is a good thing. I am trying to convey the experience of booting into their own system, which I believe would be magnified using a VR headset.

I have removed the loading bar once this has completed and added text which appears after stating ‘System Ready_’ giving indication to the user that the system is now loaded and ready to use. This works nicely but there needs to be a delay between ‘System Ready_’ and the logo appearing on screen with the continue button. I feel the logo coming on screen is almost like a wow factor, revealing the fictitious game title of a futuristic bounty hunter therefore, having a slight pause would allow the users eye to travel in a diagonal line from top left to the middle (the reveal) and then to the bottom right before progressing. 

Since adding the pause between the ‘System Ready_’ and the logo transition it has made much more of an impact just by a subtle timing change. I think the pause could slightly longer however, this is a good first pass for now, once all the sections have been animated I will return to this intro sequence to see what tweaks are needed.

I have created storyboards to illustrate what I wish to animate. I plan to animate the tasks I asked users to complete during the usability testing: 

Register a user profile

Navigate to the upgrade menu and install a combat ability 

Navigate to the map and set a waypoint to the mission

As well as showing these individual tasks I would like to show a user journey of an existing user navigate through these steps and into the gameplay. During gameplay I can show the honeycomb visor and quick weapon select menu.

Register a user profile

Navigate to the upgrade menu and install a combat ability

Navigate to the map and set a waypoint to the mission

The user journey before initiating gameplay 

I am really happy with how this has progressed over the semester and I am looking forward to animating this inside After Effects. I want to experiment with subtle animations and effects which would could be used inside a game engine.

These subtle animations will consist of lines and shapes drawing on screen to help breath life into the interface. Also simple fade-in/fade-out and squash and stretch animations will be highly effective to tie in with the futuristic theme. I am looking forward to animating the upgrade widget as I have an idea to animate this like a ripple effect.