User interface design in Horizon Chase. A natural evolution.

The user interface is a really important aspect to any videogame. In Horizon Chase for iOS we had to find the perfect balance between the objectivity of a good mobile game and the simplicity we inherit from the classic references we took inspiration from.

We were aware that we had to go for a minimalist design in our interface, where less is more. The information should be minimized in favour of the clarity of what is shown. In this interview we talked to our UI Artist Leandro Verassani, who explains us how some key menus and screens were designed and their evolution through time until the game launched.

Road Map.

The game’s roadmap interface allows the player to select the cups and circuits he wants to race in. The screen had to be modified and enriched as the game grew in complexity along the development. It started as an environment to let the player select a circuit and then evolved into a space where he could monitorise his progress and performance-related information. The UI was ultimately being designed to motivate the player to beat his own marks. All of this implied to add many elements, you can get an idea by having a look at the following comparison: 

At the beginning of the project (left image) it wasn’t clear which features the game would  end up having. We ended up adding bonus tracks, showing the number of trophies on each cup and used color codes to show the player performance in each cup in a very immediate and clear way. Red as default, blue indicating finished, gold to show the player got the maximum punctuation on that track and white for bonus, since they needed to look different, more as a binary challenge, appearing after you beat all the other circuits. As the features were added to the game, we evaluated wether or not was necessary to immediately display that info to the player in the map menu.

The same process was followed when creating the HUD - the layer of information shown to the player during the race. We needed to do lots of sketches and modifications, so we could display all the information without jeopardise the visibility of the horizon and 3D elements that we considered extremely important for the game. If the player couldn’t appreciate the horizon entirely, it would be a problem for the overall game concept.

Also, as Janderson (Salgado) was creating the scenarios for the map, we were in constant communication to keep the harmony in between both, the map environment and the design of the  interface elements. So we kept that design in the interface, with sharp vertices and secondary and complementary colors.

Another interesting detail, initially we had a the car representing the player in the map. We ended up removing it, since when you look at the map, as a player you aren’t in any specific place, and also haven’t selected a particular vehicle yet. We prioritized the usage of colors instead of texts, that’s common when you are creating an interface. To simplify the information doesn’t always mean to add elements, it could also mean to remove the non essential ones.

HUD design:

At the begining of the game the game didn’t have fuel as a resource, there was only a bar for nitro that showed how many of them you had depending on how full it was. Then nitro evolved into a “NITRO” label, and a number indicating the amount of impulses the player has.

Regarding colors, we went red for gallons (at the beginning it was in between yellow and red). Tokens were blue and we needed a different one for nitro, it ended up being purple-ish orange.

HUD elements reorganization: 

At some point in the development, we noticed the circuit map was covering the landscape in the upper-center part of the screen. That way, that element was preventing the player of enjoying the beautiful sunsets, city skylines and other amazing backgrounds that we crafted with so much effort. We opted for giving the horizon the protagonism that deserved by moving the map to the side of the screen. That implied reducing some other elements in the HUD a bit, like the race position, lap counter and the timer.

We also reorganized other interface elements in a way they were all grouped by function, leaving all the race position / time indicators on the left side and the car status info on the right side. The concept of nitro also evolved during the development. In earlier versions the player had to swipe the screen forward to activate the nitro, but we decided to display a proper button for its activation instead. After many playtests we discovered that the best way to implement the nitro button was by displaying how many nitro units the player has in the own button. Also we discovered that the button couldn’t be transparent, the players didn’t see it at all, so finally we enriched with a subtle animation to make it stand out from the super fast and multicoloured moving background.

Mini-map design:

We were questioning ourselves about different issues related to the mini-map. Which could be the color of your own car? Was it necessary to represent all the opponents? how to represent them? How to represent the first place? how to differentiate if it was your car or an opponent?

We didn’t want to put too many informations in the map, so finally ended up showing the player’s car position, your rivals and the first place. All those elements were necessary to be shown, but we always thrived to display all of them in the less aggressive way we possibly could.

Can you tell me about your favourite part of the UI work?

It has to be the roadmap. It was fascinating to see how it evolved along with the game, being modified to respond to the interface, game design needs, I like how organically it was shaped.

And what was the most challenging part of the development for you?

The HUD was the most delicated and complex part when it came to the point of pleasing all the members of the team. A clear example of that was the yellow tokens. Everybody thought that yellow was the perfect color to represent tokens, as they looked like coins which are quite valuable objects in most games. Then just in the very first moment we playtested the game with yellow tokens we noticed the game was impossible to play. There was a lot of confusion among many elements in the tracks, as the sidewalks arrow directions, that were yellow, causing the race experience to be really confusing and a lot less enjoyable. In the end it seemed there was a very unique recipe to achieve that common satisfaction/agreement point, so we needed to iterate a lot to get to that point, and we finally, gladly, got to it:

You can find more articles about the development of Horizon Chase on our devblog.