My journey as a UX designer: bringing the UI into UX Part 3
The third and final if you can call it that, step towards developing the UX of the game came in the form of the in-game GUI (graphic user interface). The main reason I would consider this the final step is not because it is the very last thing to do, in fact there is many things that will need to be conceptualised after this such as the post race screen, the tutorial and the campaign modes themselves. The primary reason is that the in game interface signifies the final step towards me understanding the sort of style that I want to ultimately go for in presenting the game to the user. Before I was able to get to this point I had to first make some distinctions and priorities
Information Overload?
One of the main problems that had arisen in the design was the absurd amount of information that the user would need to have constantly on screen. This was determined by creating user stories for the in game GUI. User stories describe what actions the user will be performing in the game and why. These allow me to create a guideline as to what I should design around. Once I had done this it was determined that I needed to keep the following information in mind when designing the elements for the game.
- Speed of car (whether in KMH or MPH)
- Transmission of car (Automatic or manual)
- RPM of the car
- The gear that car is in
- The value of the players boost meter
- Best Lap
- Best Sector
- Position
- Overall Race Time
- Current Lap Time
- Lap Time for the lap when finished
- Sector Speed
- Sector Grade
- Your steering value on the minus and plus axis (left and right)
- Your throttle value
- Your brake value
- Your position on the map
That’s sixteen different elements that have to be onto the screen either at a particular point, or constantly on the screen. All of these elements either affect gameplay constantly or are a reflection of your gameplay, therefore making them a crucial part of the user feedback process. With all of those factors included along with the magazine style look of the game, the questions began to build up, how would I display all of this information without overwhelming the user?
Fail to plan, Plan to fail.
With this many elements on the screen, the first logical step was to group them into their own sections. By sheer luck, sixteen is an even number. This makes life a lot easier, as there is no odd variable left out that has to be grouped by itself, though asymmetric layouts can work, for something that is constantly viewed on screen I much prefer an even set of information. The first step was to take all of the elements that had mutual factors and group them together. They would either become one element by themselves containing this information OR they would be in a container so user story one to five, simply became the speedometer which looks like this.
With seventeen elements to display all at once. Being able to display five at once in a way that is concise and can be conveyed to the user with ease is important. For reference, elements before they put into Unreal Engine 4 are always imported as separate layers. This is so I can control and scale different parts if I need to. They are also always in white, so that they can be recoloured if I desire. The speedo is probably the easiest place to start as it is an element in nearly every racing game so it makes sense to begin here.
The hardest part was actually figuring out how to visually group the rest. User story 14 and 15 (the brake/throttle value) can simply be put together as they the two methods that the user interacts with the game, the same with steering. That was effectively solved the moment it was determined. However, grouping in lap times, sector times and your position, in a way that isn’t incredibly distracting proved to be a problem. Because it was such a difficult process, I actually subtracted two of those stories from the group and made them as pop up messages (sector speed and lap time). That however, still left me with eight different lines of information to feed to the user at once.
Health, Safety and inspiration?
One of the unsung things about research is that unlike other processes research never really ends. Normally my research consists of me using other products, roaming around pinterest and talking to other people in the industry and getting their insight. Either that, or having people use my product, conducting surveys, gathering data and then making data informed decisions off of that. This is what a regular day of research looks like for me. What is unique however, is that at random moments you can see parts of a product or interface that make you just think “this would be brilliant for my work”. This is exactly happened to me whilst looking at health and safety of all things.
As I had designed for a health and safety site in the past, I was already fairly familiar with the protocol and what each sign represented. This wasn’t something that came into my mind, nor was it the reason but it is worth bringing up as it is something I have experience with and me knowing what to look for likely played a part in this step of the process. Whilst I was looking into traffic signs for environmental art, I noticed something about the layout of these signs and the way they are designed.
These signs are not only designed to be instantly recognisable upon seeing them but are also designed to be seen from non-optimal positions. Namely, when you are driving a car. To actually test this I got a friend to drive me around on the M2 motorway so I could actually see the signs in action. I normally only took glancing notice of the signs but the symbols combined with the colours meant that he changed his actions accordingly every time he saw them. This particular change in his behaviour indicated to me immediately that this is something I needed to look into.
The other one was another sheer coincidence. Nearby my house is a set of flats currently in process. As a result, there is always people in construction site uniform nearby. With that of course comes its own safety postings to ensure nothing happens. I was passing by one, and a particular one caught my eye.
The third one caught my eye because of the information inside, moreover it was the way it was listed. They’re simple sentences. These sentences made me think because, these are in themselves groups of information and with this it is conveying several different things at once that can easily be remembered. The information that I need to give to the user was for the most part number based so character limit wasn’t too much of a worry. This immediately spurned me to try this out. Which resulted in the following.
At first, I simply used the same layout with the circle being distant. But when joined I also realised that I could also put another piece of information in there, much like that icon. By sheer coincidence I realised I could put the player position in one, and the lap number on the other. To give it a bit more organisation and to help tie it into the magazine styling, I put underlines to space out each piece of information. It is also worth noting that when I designed this in illustrator and Photoshop I also made sure to put it at full view of 1920x1080 so I would know precisely how it would look in game.
The sector speed and grade pop up, also followed this same layout. However to account for the information and give it it’s own look, I split them into three. So it would be Grade as the largest piece of information as it impacts the gameplay the most and is the shortest in terms of character count. It is always one and the higher your grade, the more boost you get back.
At this point, I was somewhat in the zone. Using the design momentum I quickly designed the progress bars for the users left/right inputs. Additionally, I actually added one more user story to the GUI, making it a total of eighteen. This was to inform the user of when they were being too heavy handed with the car, causing it to spin out. This came about as a way to not only add more user feedback to the game but to also mask the fact that I was using two separate progress bars for the input on screen, killing two birds with one stone quite nicely.
I tied this in by also adding another element to this. The accelerate/decelerate bars are the other factor that affect gameplay. I put a bell underneath these to account for the user watching the two bars with the corner of their eye. If they are looking at these, it is very likely they will miss the information elsewhere on the screen due to the spacing of the elements. I put this together with the map, as these elements of information are primarily there for beginner players. More advanced players would be familiar with the layout of the games courses due to constant repartition of the circuit.
Overall, once this had tied together. I was extremely satisfied with how it all looked. It The border placements allowed me to colour different aspects of the elements, allowing me to tie them into the overall theme whilst keeping them clear. The shape also gave me the adequate space to have enough characters of a sufficient size in order to have them be clear and readable in high stress situations. The last step of this was to lay these all out in a way that that would keep the action clear of any distractions. This was the final result.
If you want to see this all in action, you can simply watch this video, and many other on the channel.
https://www.youtube.com/watch?v=nyjvU7qX84o
This is what I consider the final step in developing my UI skills to the level they are now. This is not the final step towards developing my UI skills as a whole, or even for the game. Everything you see is still subject to change or improve in this case. It is likely this will occur. I hope you enjoyed reading this as much as I did writing it. If you want to see more, you can follow Perfect Lap on youtube or follow me on here, on twitter as Blue_Spero
