Creating the User Interface For God of Blunder: Ale in Asgard

My main artistic role on God of Blunder: Ale in Asgard was to produce all of the User Interface mechanics, as well as the menu and tutorials. Here I’ll explain a little bit about the thought process that went behind the development.

Aside from small asset art, I designed all the UI mechanics and tutorials, including the inventory, menu, verb icon and cursor.

Basically three major necessities propped up between myself and the others when designing UI; the first being readability with the player’s eyes, the second being intuition with the player’s touch on the iPad, and the third being context within the game.

Readability was an obvious one; the players need to look at the screen point blank and almost instantly recognise what each of the UI elements represent. Symbols played a huge role in achieving this. The inventory carrying all of Oster’s items actually takes the form of Oster’s backpack as seen in his character design. Likewise, the menu icon shaped as a helmet carries an image of a ‘list’, which is commonly associated with a menu. All these icons had to be readable against the background and distinctive as UI, hence why they have a slight black alpha backdrop behind them.

Intuition became an importance that actually saw a lot of redesign of things like the verb icon. When the player selects an option from one of the three verbs on the viking longboat, nothing of importance may be shown underneath that button, or else the player’s hand will cover it. This is also why the information bar was placed at the top. The longboat provided an option where the player can move their finger side-to-side to choose verbs rather than up and down, as was in older versions. All the icons and assets in the game had to be at least the size of the point of an index finger. Also, we did notice with our PC demo, that gliding the cursor over items could reveal descriptions about them, however since the iPad does not utilise a cursor, this mechanic had to be replaced by holding a finger to the screen.

Finally, context was needed to place the UI into the theme of the game, to ensure it became consistent with the experience. I wanted to make sure that the art style of the UI was very much spot on with Sam and Paco’s art. I also tried to involve as much of the UI into the theme of Norse mythology as possible, which is another reason why the inventory is Oster’s backpack and the menu is a Viking helmet.

The tutorial also followed these three guidelines. I had to pay special attention to the readability and usability of the tutorial, whilst also keeping in mind the context of the theme. I tried as hard as possible to break down the mechanics simply, and in layman’s terms, so that the puzzles could be experienced by a wider range of ages. As for context, the tutorial template also came from the initial idea to place it on the wood of a tavern bar.

All of these UI elements were tested by family and friends alike, to ensure it achieved these three guidelines before we gave it the greenlight, as with any mechanic or puzzle in the game.

Click here for more on God of Blunder: Ale in Asgard.

Leave a Comment

Awesome! You've decided to leave a comment. Please keep in mind that comments are moderated.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>