Creating an Adventure Game UI

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.“ – Antoine de Saint-Exupéry

One of the things we have been discussing from the start while doing developments for the Seven Tides game is how we would be approaching User Interface.

Having people with User experience and User interface skillsets in our project (Duarte and myself) has been a big plus in this regard, and while we had many discussions around what we wanted to achieve, we didn't really started touching this part of the game design until recently.

User Interface in Point and Click adventure games

Point and click adventure games are special, they have their very own pace (slower than most games) and they work really well when the player can be totally immersed in the game and the artwork.

There are also very specific things you do on an adventure game like working with inventory items, look / use / talk actions on hotspots..These are very familiar to someone who has spent some time with adventure games but they are totally foreign concepts to someone who hasn’t, since pretty much no other genre really uses these concepts in the same way.

We wanted from the very beginning of the game to cater to both types of players, those who are already familiar with Adventure games and those who never played one in their lives. UI and UI design play a big role in achieving this goal and so we would like to share some of our thoughts during this process and what were some of the key concerns and decisions.

Less UI = more immersive player

Adventure games are all about telling a story, getting a player fully immersed in both the environment, story, characters and puzzles.

If we really want the player to be immersed into the environment and the artwork we are creating for the island of chelonii we need to make sure that UI will not be interfering and taking the player “out of Chelonii”, not only with overuse of buttons and all kind of UI elements spread across the screen, but also with the style we use for them.

Because an immersive environment "feels" real, and reality doesn't have buttons and texts how we implement these things affect user experience in a significant way.

Showing how to occupy less space

Our approach was to have as less space occupied by the UI elements as possible while still having a proper identity and carefully crafted design elements

 

We opted for having only the inventory bag item displayed at the bottom right screen so that we can insure maximum screen space is used for game and artwork.

Triggering options with the escape key is something we opted for in order to not have to use a button to trigger the options menu, and although we will still user test this approach it was intuitive enough for every team member which can be already a good indication.

Inventory items - cohesive and understandable design

One particular aspect of adventure games is the heavy use of the inventory and its items. We use items with things in the environment, we combine items between themselves and we also even give items to NPC’s or use items on ourselves (the player in this case Jon). So it’s important to have in mind some important aspects when designing items for the inventory.

Design - Real vs Flat vs Font

The first thing is the design of the item itself. There were a couple approaches we tried before landing on a particular design for the items.

Inventory menu bar

An example of how the inventory items are displayed in our inventory bar

 

Flat icons or even font icons make designing the icons simpler since there are packs available with hundreds of them, but it is often the case that it will be very hard to find a right icon that expresses what a specific inventory item is. For example we use an “old rag” in one of our scenes (won’t spoil for what it is used) and designing a flat icon or finding a good icon to convey an “old rag” can be hard. So we ended up going with real icons, they still look really nice and crispy and tell the user with a lot more accuracy what an item really is without having to hover to see the label.

Old rag icon

sometimes all you need is just a dirty old rag..

 

Consistency

Another important aspect to look at when dealing with the icons is consistency. We want the items to feel like they not only belong to the game, but they also belong together, they are part of the same system.

The approach here was a simple Photoshop macro to create specific effects to all items we create (creating a ring circle, adding embed and shadow filters etc) so that all the items have things in common and they all have the same style, even if the original image for the item itself was very different.

Inventory items

Even though originally items have very different images, with some design process they all belong to the same system and have a common identity

 

Item states - active, hover, default

The third aspect we wanted to make sure to cover is the different states of an item. When a user hovers an item or even picks up an inventory item for example, that action should be clear / visible to the user. It’s just an extra layer of information for the user that he is now picking up an item and he can use it in specific places. When hovering a hotspot where you can use a inventory item we opted for changing the ring of the inventory item to a highlighted ring to make it clear to the user that he has the item in his hand and that it can be used here.

Using menu items

Using a inventory item on a hotspot will highlight it when hovering

 

Options / Settings screens

Another aspect of not only adventure games but any kind of game, is that you have to have somewhere where you save a game, load a previously saved game, change volume of voices or sound etc. These are the options screens (pause, load, save etc), there are several of them and although it might seem like a “less important” screen to think about (it’s pretty trivial right just put some ui elements in a screen, it’s not actual game) we consider them to be as important as any other screen.


The reason why these screens are so important is that if we are not careful we might totally lose a player on one of these screens. We made a game that is immersive and feels really nice, but as soon as a player just wants to change the volume, or save a game, he struggles / can't use for some reason / does not find it, these are important aspects to think about.

The main menu screen on seven tides

The main menu screen on seven tides

 

In terms of design what we wanted to do here is keep things simple and obvious (no fancy and potentially frustrating UI elements like dropdowns or autocompletes) but at the same time keep the mood we have in the game in these screens as well making it a nice and smooth transition from in-game to options and the other way around.
 

Integrating sound design into the User experience

Another important thing we recently started experimenting with is using sound design to help the UI in making the UI screens more immersive and lighter on the player making that transition from in-game to options menus even better and smoother.

We are currently experimenting with adapting the sound so that the theme (music) of where the player is keeps playing when entering options screens or dialogs, removing any drums or harmonic elements but keeping the melody going.

We will be showing more of this when we do a future blog post about sound design but this has been a huge win in terms of keeping the mood of the game and the player immersed in the experience, even when using a settings screen or going through a dialog.

Interactions

Last but not least, we need to handle interactions. In adventure games this typically means use, look, talk, walk interactions that a player does with other NPC's, items or interacting with the set itself.

We didn't really reinvent the wheel here, common icons for walk, talk and use are easy to find and so we just made sure to keep them in sync in terms of design with the remaining items and set. it is key that the actions that one can do are clear and obvious, adventure games can already be a little overwhelming when puzzles are tough, having to battle to understand the UI on top of that is not a very good experience in general.

Here are some examples of interactions in The Seven Tides game.

Indie development - asset packs are your friends

As you might have known by now, we are a small totally independent team developing the game. The budget is close to non-existent and so we need to be smart and cut corners wherever we can without damaging the final result of the game.

It’s very common to hear overly criticism around asset packs, especially amongst developers. Packs are confusing, poorly developed and they are just “lame”.

We embrace packs and the Unity asset store has an amazing set of everything you might need to start developing your game. For the UI we looked both "Yamato" and "Captains UI"

I would like to give props to the developer of both UI packs, which are very well organised and an incredibly good value for money.

Wrapping things up

We are still working on some other UI things, like dialogs, integrating the sound like we talked here and other improvements on the design / layout itself.

But in general this has been our approach to developing the UI, let us know your feedback and if you like it share the word :)

 

References