My journey as a UX designer: Bringing the UI, into UX Part 1
When I began my journey as a UX designer, one of the main things that I was constantly told, in terms of feedback was that whilst the decisions behind my work made a lot of sense, the visuals needed a lot more polish. I didn’t really understand what “polish” actually meant, at the time. To me it was simply iterating over and over again, optimising the process until it’s reached its full potential. As I’ve spoken about in previous articles that was from the viewpoint of a programmer, not a designer (note that I didn’t say UX Designer). Let me first define what I think is the meaning of polish for a designer an then I will speak about what I meant by those words in the bracket.
What is polish?
Polish is a series of small decisions that eventually add up to one large decision, or entity if you will. This can apply to many different things gaming to writing to artwork and to most importantly UX. Now what kind of decisions are the correct ones to make in this arena in relation to your field? The best place to start is always small. This is best evidenced with an example.
From going at Maximum Throttle to chasing the Perfect Lap
One of the greatest advantages of developing a game by myself is that UX design and game design overlap quite frequently. The goal in UX is to create the smoothest experience for the user that is possible. In game design this is also the case regardless of genre (imagine if reading the UI in Devil May Cry was as hard as the game itself for example). Another one of the great advantages is that because it is my own project I can use this to effectively practice UX/UI concepts that I can later apply to other projects. This is how the UI of my own videogame went from
This
To This
To this
Now as they say “Rome wasn’t built in a day”. A lot of learning and failing had to go into this project for it to progress from the first screen to the second screen. So let me start to explain the first major change.
The Psychology Of Colour, and what it meant for my game
It is no secret in the world of psychology that different colours give off different feelings to a user. This is absolutely crucial when focusing on branding and use cases (use cases describe what actions a user will want to perform). Before I actually chose the colour scheme that the game currently has (and will likely keep)First I had to figure out what information I wanted to share with the user and what method I would use to convey this. I also needed to understand why
The first message that I wanted to convey to people was that, at it’s heart, this is a game dedicated to fans of the old arcade era of games now passed. The second, was to also convey that this game was heavily inspired by the ridge racer series of the 90s (in particular, ridge racer Type 4) compare these two colours
If you’ve played ridge racer type 4, one of the most memorable aspects of the game was its sense of style. The way it used the yellow with the black, is something that actually became a trademark of that particular instalment (it was oddly enough dropped in all future games). RR Type 4 holds another particular distinction, it’s considered to have one of the greatest OST’s (original sound track release) of any game, racer or otherwise. It is also the last of the series on the PSX. This left a lasting impression on many gamers at the time (including me of course) and it is seen as one of the “iconic” games of that Era. It seems Sony agrees too because it was featured on the PlayStation classic in 2018.
The main thing I wanted the user to experience, was that same retro feeling that games such as Gran Turismo 2 and Ridge racer Type 4 often gave. The colour choice was the first step towards achieving that. This was a deciding factor as to why I chose to use the same tone of black as those two games do. It’s normally very rare to use tone of jet black as it often has the effect of making something look entirely flat (white can also do this) due to the fact it’s very hard to cast a shadow behind it.
Plagiarism, or Homage?
Something that plagued my mind was the main colour choice. At first, to pay homage to Ridge Racer Type 4. I used a very similar shade of yellow that it did (it is worth noting that this particular yellow, wasn’t exclusive to that series. Gran Turismo predominantly featured it in it’s UI from 1–3 and it can be found in quite a few car magazines of the time) alongside the black that it used.
The Ridge Racer series, alongside games in general of that era (Gran Turismo, WipEout, Need For Speed) all have a very specific “tone”. They will aim to emphasise its aesthetic at every turn, forgoing little sense of subtlety. This leads to them pushing its stylistic leanings in your face, giving a very distinctive memorable look. A side effect of this is that they also have this absolutely undeniable love for cars, and by extension car culture. In wipEout, you can tell instantly that it takes heavy influence from F1 and the club scene at the time. This is a game where you race each other in giant spaceships.
I actually kept the yellow tone for the game as the game at that point in time was very close to what I would imagine what a modern day Ridge Racer could play like. As game development progressed it began to take on more of it’s own identity. Other mechanics were in the process of being added and I felt that the UI needed to reflect this also. At this stage because the handling of the game had changed so much and new mechanics were introduced, keeping the yellow shade of old began to feel less like the homage it was intended to be and more like copying for the sake of it. Was it logical? I don’t particularly know but I was confident in my train of thought. The main change that spurned this thought process was the focus of the gameplay. As mentioned before, the handling of the game had been completely reworked, focusing more on precision as opposed to going sideways. Ridge Racer aims to be the driving experience. Perfect Lap now will be the best racing experience. Red is the universal symbol for danger and speed (it’s why Ferrari have it as their main colour) As a result, I made the shade a darker orange adding in a bit more red to give the colour a stronger more urgent feel.
A Sea Of Depth
One of the key understated tricks of Retro games especially of the PSX era is that a lot of them by today standards actually have a rather flat look. This works perfectly ages appropriately really well when scaled up to modern day resolutions.
With how the games of today present themselves I actually consider this somewhat of a lost art. It’s one of the few elements that I would like to see retained in the games UI in the future. I soon learned the importance of the illusion of lighting in creating a sense of depth in an element, whether it is a button, panel or anything that is displayed or interacted with. In my opinion this should be one of the first go-to changes you make when you want to polish your user interface.
I believe that my lack of experience in the use of shadows to give more depth is one of the key reasons why I was constantly told that my UI needed more “polish”. Compare the following.
Alongside the “hovered” state (the story element in the first, and quick event in the second) being reversed I decided to add a shadow and I have coloured the buttons a darker shade of the primary colour. This gives a more monotone out of focus look in order to indicate it is not selected but still keep it visible and presentable. These two additions create a sort of depth that the previous iteration just simply didn’t possess.
Tone
I mentioned that older, retro games from the PSX era have a tone that can only be described as “homage” like to the source material. This doesn’t just translate towards putting Easter eggs or references towards other brands in side of the games, or styling cars after Ferraris and such. Tone also pertains to the type of language used in the description of the games elements. Perfect Lap is a game designed to cater to all audiences and age range. This is key, it is supposed to be an easy game to pick up, but challenging to master. To cultivate an enjoyable environment selective language should be applied in order to adequately explain its mechanics. This means no words that are going to be esoteric to most users. For example, don’t describe a cars handling as power to weight ratio. Simply use handling. Use these words to describe how these mechanics will influence gameplay.
Due to this article being about the menu this is a fairly short section. There is only so much information you need to describe to a user. This ties in nicely with the menu UI. This is because you can still use this to add a small but important finishing touch to the menu to make it stand out. This encapsulates what I mean by small decisions, adding up to large ones. In the end all this translates to is a simple sentence underneath the element selected but it adds a level of arrangement that otherwise be missing had it not been present whilst also informing the user what this particular element does (see above example)
The next article due to be published soon will go examine the car selection screen which is where the game takes on an even more distinct identity. Follow me at @blue_spero, or simply follow my Medium to get the notification.
I hope you enjoyed this article as much as I enjoyed writing it. Have a good evening.
- Tim
