My journey as a UX designer: bringing the UI into UX part 2
This article is about the process of creating the car select screen. This is the second and possibly most pivotal part of the process of not only improving my UI skills but also giving perfect lap the identity that will set it apart from its competitors. The reason for this is not just because my overall skills improved but my own personal vision for what the game could be visually improved along with it.
The Internet killed the magazine star
It was eventually decided that the styling of the game from the menus to the in game UI was to be in the style of a live moving magazine. To people even of this generation it’s little secret that magazines are seen as somewhat archaic to the new generation. With people much preferring to view content on either their computer or their phone magazines are one of the few existing relics today that everyone would recognise as a symbol of the past.
Looking into the future by looking into the past
One of the key messages/feelings that I wanted the game to convey to the user was that feeling of going back in time to an era that to many gamers younger than me (or even the same age as me) is more or less gone. This is achieved with not only the gameplay but the choice of cars and the sense of speed. One of the biggest developments happened when I bought the following book.
Ridge Racer Type 4 is once again a very interesting example. The styling of the artbook is more like a traditional car magazine than it is an art book. Looking through it feels more like you’re reading an issue of motor trend than through artwork for a game released in 1998. Compare these two pages
This is an aesthetic that I quickly took note of because this isn’t used anywhere inside of the game itself. I only myself purchased the book this year so as far as I knew this style for the game never existed. Why this is the case? Possibly system limitations, possibly time restrictions. It would be very hard to tell unless someone could interview the developers themselves. Regardless, once I saw this I decided to purchase several different car magazines and analyse their layout. In a very odd way, in gaining the “spark” that would allow me to distinguish the identity for the game even more, it still manages to relay all the back to its original inspiration.
This then, brings us to the car selection screen. Something that happened to me, that I only realised upon completion, was that I was influenced slightly by the gran turismo series. Specifically Gran Turismo 5. This wasn’t intentional, I was just simply watching a video about the series and it’s tracks that went unused in future iterations. This is stated simply to account for any questions that may arise from the styling in that regard.
Magazine Layouts
One of the greatest things about magazines is the way they layout and list large quantities of information. This actually works perfectly for a car selection screen. This is because the final plan is to have fifty different cars in the game. That makes for fifty different elements to list on the screen, not necessarily all at once mind you. Another unsung benefit to this styling is actually being able to take advantage of touch controls. The game isn’t also intended to be on console but also on switch and eventually on mobile. One of the best things in my opinion about touch displays is that you can swipe in different directions, patterns to perform a variety of different actions. This can account for doing several different tasks without having to put too much information on the screen, such as selecting a favourited car.
This doesn’t mean much at this stage however, being able to simply touch a car and select it with that method mentioned above can account for a lot in regards to creating a foundation to iterate on later.
Whilst Gran Turismo 5 was the unintentional influence the actual intentional resource that I drew from wasn’t just magazines but unexpectedly it was also E-commerce websites. Because the main idea is to just have a “catalogue” of cars to select from. One of the things that they tend to do (along with actual catalogues like Argos) is that they have a preview of the product along with the name and then you have click onto it and then get more information (See example A)
This line of thinking resulted in the following screen.
One of the biggest challenges of the overall UI is the high amount of information that has to be displayed to the user. On average I have to communicate five different elements to the user depending on if they’re playing the game or not. This can easily lead to information feeling overwhelming, but at the same time nesting it behind an icon can cause this information to be missed which absolutely cannot happen as all of the factors listed in this image influence gameplay.
The styling/look of the layout was likely the easiest part they’re many different references of how cars are displayed from showcases to simple car reviews on how to do this particular type of page. I opted to go with a short summary to keep the magazine feeling intact and also to immerse the user into the universe by giving a short introduction/history to the car. I opted to use the rest of the space to display the cars stats. A notable choice that I made was to actually leave the bottom empty simply for white space. The use of white space (or negative space) is to give the elements some breathing room, whilst distinguishing them from each other. This trick is also often used in magazines as well.
Overall, whilst these two screens are far from finished I feel that I have achieved a strong enough foundation point that I can write about them. The process as with many other elements will be refined and re-iterated upon as I gain more skills in this area the next point that I will write about is the in game GUI. I hope you enjoyed reading this article as much as I did writing it.
- Tim
