Wire Frames — Menu Research

Wire Frames — Menu

Before any work could happen onto the computer. The first thing that really needs to be done, is to take a thorough look into what is on the market currently. Whilst I mentioned that many games today have an overly complicated UI and an average at best UX, this is was more to do with my experience as a gamer myself, it wasn’t concentrated targeted user research. This was. So, as I was starting on mobile. The first thing to be done was, go and download some mobile games. I started with three main titles.

Asphalt 8

As a graphic designer, the first thing that struck out to me personally, was the high quality and polish of the components. I always appreciate buttons and transitions that are well made. One thing I do not ever appreciate however, was how scattered everything felt. I’m also not a fan of how I had to stare at a set of notifications that I had no idea of (first time playing the game) before I got to actually stare at anything. Thankfully, upon getting into the game, it allowed me to look at tutorials. I didn’t need to, as I’ve played racing games before. One of the more annoying things I had to deal with, was the sheer amount of information. I actually felt it quite overwhelming. The UI is clearly designed to push events to the forefront and get you playing (this I appreciate) though it all felt a bit…overwhelming. It didn’t help that the options at the top were incredibly small. But overall, the menus were very solid, as was the car selection screen.

what does spending coins have to do with racing exactly?

Lovely. The first time I play a game. It assumes I’ve never played a game before.

Real Racing 3

Whilst I like to have games that put you straight into the action, one thing I absolutely hate, is forced tutorials, or an interfaces that forces you into the racing immediately. This is, in my opinion absolutely sacrilege in regards to UX. The user is meant to be naturally “guided” towards it, not literally shoved into the gameplay. This particularly struck me as frustrating, as I wanted to look at all of the screens. This singular experience alone, has caused to decide design a tutorial button, solely to avoid having anyone deal with this when they first open up my game. The way I will remedy this is simple. Have the tutorial button animate in the opposite colours to the other buttons (so if the other buttons are black with a white border, the tutorial button is white with a black border). This is pretty much how Asphalt 8 handled it. If you want to do a tutorial, that is fine. Just tap yes, otherwise proceed to play the game. Animations in particular are a go to for me, as they draw attention, can be scaled to be either blatant or subtle, and you do

not have to worry about users who are colour blind or deaf, (just don’t design the animation with colour in mind)

That pain aside, the first thing I actually noticed about the game, was how it didn’t actually look “gamey” so to speak. In context, things that look gamey, are elements or aspect that remind you, you’re in a game. It’s hard to give an example of this in side of say UX and/or UI, the best example is most likely a realistic shooter or racer, that has a visible health bar on the screen. Simply put, it’s something that breaks immersion of the user and causes disconnect. The first thing I noticed, was just how clean everything looked. When you realise that is a sim racer, this minimalist look is important. The first thing I’m greeted with, is three large screens. A dashboard at the top telling me my stats and a row of buttons at the bottom. The layout is clearly well thought of, and I definitely intend to study it further. The one thing I like, that pertains to my main goal, is the large screens/images at the very front. They stick out to you immediately, and it works very quickly to “tell” the user where to go, without actually telling them.

Granted, when there is literally only one option that isn’t greyed out and has a huge lock symbol on them, there isn’t really much else that can be said.

Hovercraft Take down

Out of all of the interfaces I did, this was probably the most interesting. This game, honestly embodied what I meant when I spoke about my game funnelling the user straight into the gameplay, the UI is so non-existent, that I actually put my phone down and accidentally started the game. I had to restart it just so I can take the current screenshot you’re seeing below this paragraph. This game, to me, represents the core ideals I am trying to follow with my game to the absolute maximum. In a way, it’s actually very interesting. Upon opening the game, there isn’t really a “UI” to speak of. The game boots up, there’s a play button. You hit it, see a distinctive picture and a small piece of text explaining it and then you’re in the game. That is literally the UX of the game. In a way its quite testing to my initial theory, because this is the embodiment of my theory/beliefs on how to the execute the game.

This is probably the most important UX for me thus far. I got to see just how effective this was re-playability, and compared to the two previous experiences I just went through (especially with a forced tutorial and an added 30 minutes of time before I could just boot the game up and explore it) it definitely came with an “oh” factor to it, an element of surprise that a game simply lets me…play it.

This is a pretty huge revelation to me, as this isn’t standard in games any more. There’s tutorials, cutscenes, customisation screens, all sorts of filler, but the actual gameplay UX wise, often takes a back seat to this. Averting this (in my opinion) annoying trope was a great choice. Hovercraft Take down confirms this.

Stay tuned for more.

Kind Regards

Originally published at https://www.tumblr.com on December 15, 2018.