Boss

Marcus


UI Update


Hello internet, Marcus here with an update from HCG. You may be wondering what have we been doing in the past few weeks. Well, the short answer is... a bunch of things! Alright, bye!


 

Okay, don’t worry I wouldn’t end this post like that. We have a number of things in development and can’t wait to share the news with you. But we aren’t ready to reveal every single detail just yet. So allow me to share a small sample of what I’ve been working on.

 

One of the main things we wanted to change for Grobo was the menu. We felt the old menu didn’t quite fit into the overall aesthetics of the game and decided to move in a different direction. We have gotten a lot of positive feedback in regards to the art so we decided to highlight it more with the recent changes to the game.

 

For the current build, I took the opportunity to completely redesign the UI. The overall interface has gone through quite a few iterations since its conception. With each iteration, I’ve collected feedback from the community and researched different layouts and interfaces.

 

When designing the UI for the game there were many things I had to consider like how large is the phone’s display, what’s the average distance players hold their phone from their face, how do players hold their phones, etc. Some of these questions have straightforward answers; the iPhone X has an aspect ratio of 16:9, while the Galaxy S10 is 19:9. But other questions require a bit of extra research. For example, the distance a player holds their device from their face is affected by their posture, eye sight, environment and so on. The average player typically holds their phone roughly about a foot (12 inches or 30 cm) away from their face. This particular detail affects many of my design decisions when making the UI, such as the type of font that needs to be used and how large the text on the screen needs to be.

 

The phone’s distance also ties back into the screen size because the larger the screen the larger the visible area. With a bigger screen I have more real estate to spread the buttons further apart and make the text larger and easier to see. For this particular iteration of the menu, I wanted to make the UI more aesthetically pleasing while maximizing visibility. I decided to use higher contrast black and white buttons with a sleek radial menu. I also removed the old gray background and blueish green borders in favor of a frosted glass window look. By blurring the background art, darkening the buttons, and making the button shapes more distinct, I think the overall design should feel more comfortable for players while better showcasing the art.

 

 

Visibility wasn’t the only thing I had to consider. Each player tends to hold their phone differently. What do I mean by that? Think about how you might hold your device. Do you use two hands or one, are you righty or a lefty, does the base of the phone rest on your palm or your pinky, is your phone larger or smaller than your hand? All these things need to be considered. Being that Grobo was designed vertically and allows players to play using one hand, we can narrow the spectrum of possibilities.

 

Assuming the player is right handed, their thumb would be placed just about at the center of the screen pointing towards the top left corner. Using only their thumb to navigate the menu, they would have a specific range of movement.

 

Image Source: https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

 

For example, looking at the above image, the green area would be the points on the screen that are easiest and most comfortable for your thumb to reach. Whereas the red would be the most difficult. Following this philosophy, I planned the main menu accordingly, with the ‘Play’ button placed at the center of the screen and other buttons appearing in or as close to the green area as possible.

 

Hand position also ties back to visibility. Phones—for the most part—are designed to be held comfortably in your hand. However,  part of your hand will inevitably cover up an area on the screen, especially when placed in a resting position. I tried to make sure that most necessary buttons would remain visible when navigating menus and playing.

 

Through each iteration I have changed the menus quite a bit but you’ll find that there are a few, well received design elements that I have carried over. So I hope you look forward to seeing more of the game shortly.

 

Speaking of which, we are planning on a public Beta for Grobo soon that will feature many of the changes we made to the game, like this UI update. Stay tuned to our dev blog because we will be sharing more details in the near future.

Back

SUBSCRIBE

Join our mailing list to receive updates on the our current projects and latest blog posts.