Screen Designs — Menus intro
So, now that the theory is out of the way, it’s time to obviously design the screens. The first thing I wanted to make sure I did, was sketch some wireframes for the screens. For these, I made sure to follow the same principle that I normally use with graphic design. Start simple, scale it all the way up. The UI’s described in the last post are the products of wireframes that have gone through re-designs upon re-designs, some even after going live (asphalt 8 being the eighth entry into the series). This isn’t the case for my product, so as a result I gave myself some leeway. As the Bruce lee saying goes “I fear not the man who has practised a thousand kicks once, but the man who has practised one kick a thousand times”.
This is the controls/Pause screen. It was later decided upon to actually add another screen to this. This was well past the sketch stage so I instead had it as a screen of two icons which would then lead to this screen.
For the record, the more is a mistake. This was supposed to be “tutorial”. By the time I had corrected this, I was well past the wireframing stage
Keep it simple, keep it stylish, send the user straight into the gameplay.
So, the first idea that I wanted for the sketches, was that for anything not related to going straight to the racing, I wanted them to be interlinked. This sounds complicated, but all it means is that you can go straight from one screen to the next with ease. How most screens go are the following
A > B > C
As of the time this is being written, the name of the product hasn’t been decided (working name is project lagoon). From screen A, you have three options, but once you select one of those options, you can only go back or forward, you can’t say, select the options menu, and then go straight into the time attack mode. You have to go backwards first to the main menu. This particular restriction is actually normally present on consoles, the older PC games do not have this problem, and I also feel like I get the chance to bring this advantage back slightly with the current layout. Having the menu fixed for the entire experience, while giving me a bit less space to work with, gives me a sort of consistency that avoids any sort of complication that can arise from having differently structured screens, perfect for what I am trying to achieve here.
As a side note, this also made me realize the other reason that I wanted the screens and process to be so direct; that is how I attempt to navigate through most interfaces, much preferring the hotkeys to navigating with the mouse if I can. Just an interesting thought that I realized whilst drawing this screen.
Another design choice I made with these screens, was to actually have it diagonal. Because the games designed to be played horizontally, I felt like having the user simply use their thumb to scroll would make scrolling back and forth a lot easier. I actually got this idea after using the xbox 360 controller. I feel like the natural placement of where someone’s thumbs where would be a good idea to replicate ergonomically, and also give the app a memorable look and feel.
Screen Designs — In game
The first thing you will notice is the rectangular block in the middle of the page. This is where the users eyes are mostly going to be directed, as this is where the action is happening. The smaller the rectangle is, the more you are being affected by tunnel vision as the car is speeding up. Whilst the UI might seem slightly out of the way (particularly the hand brake and nitro button) there are reasons for this. Firstly, the users fingers are always going to be on the corner of the screen (this is why the directional buttons are there). This means that the user can easily access them via the thumb, similar to how someone uses a controller, secondly these buttons are not static interactions. Touching the button will cause interaction within the game world. It is the opposite of the situation of the warframe picture from the previous post. Your interaction with the world in warframe effects the UI. Here, your interaction with the UI will effect what happens in the world. In this case, you either drift, or you speed up considerably. Because of this, the user will ALWAYS know when they have pushed these buttons.
This screen is a slight bit more generic but there is one thing that I wanted to do a call back to. Placing the speedometer at the very top of the screen. This actually for two reasons. A. It is a call back to the older racing games that would do this (like scud race), the other reason, is because users are often holding the screen by their thumbs, which would obscure the speedometer, meaning they have to possibly hold it in an uncomfortable position. The directional buttons, I actually decided to use the same principle I did above. Instead of having the user slide his thumb left to right, they do it from top to bottom. This notion, as tested by various others, felt a lot more natural, as the left direction is designed to be sat right where your thumb rests.
Originally published at https://www.tumblr.com on February 15, 2019.
