*This post was originally written for Nix Hydra's Development blog, and can be viewed there as well*

Hail and well met fellow game lovers and egg enthusiasts! I’m Katie, the User Interface Artist and Designer / User Experience Designer currently working on Puzzlescapes! Today’s blog post is going to be about the wonderful world of UI Art and Design, designing good user experiences and a little insight into my process as a designer and artist when creating some of the interfaces you see in our games.

To start off here’s a little summary of what I do in my day to day job - since I really have 3 jobs that all go hand and hand and skip down the development pipeline together:

To illustrate the long and perilous journey each of my designs goes through on its road to become the best UI it can be I am going to walk through the process I took to create the main menu screen in our newest game Puzzlescapes: Interactive Jigsaw.

THE FANTASTIC FOUR FEATURES OF FABULOUS UI DESIGN

• A good user interface is focused : Each element of the interface should serve a purpose and have a singular goal. It should not meander or take its time getting the player from point A to point B. Once that goal has been accomplished the UI does not overstay its welcome and gets out of the player’s way.
• A good user interface is feeling : The UI is empathetic and full of feeling. It understands what the user is going through, and offers the appropriate responses and reactions to make the user feel understood. It is designed in such a way that it makes the player feel the proper emotional response at each stage. In most cases this response should be positive although that is not always the case!
• A good user interface is flavored : Each aspect of the interface should tie into the core aesthetic of the source material and feel like an extension of the world it exists in. While this is important in all forms of UI Design, it is particularly important when designing  UI for games.
• A good user interface is functional : The number one most important thing that any user interface can be is functional. It has to work. It doesn’t matter if it hits all of the previous points - if it doesn’t work it has already failed.

So now that we know what makes a good interface lets get back to our menu and the question at hand. How do we get it to the point where it meets all four of these criteria?

There are so many questions to consider when designing UI. You have to juggle creativity and artistry with functionality and form. You have to consider what your players know and what you can teach them. You even have to think about the limitations and scope of your media!  Often it can feel a little overwhelming when first starting out- especially when you add a time limitation to your design process.

Over the course of designing, I’ve found that using an investigative approach (much like how Sherlock Holmes would crack a particularly puzzling case) is the best way to solve any UI mystery. I use these six classic queries in order to organize my information and determine what information I need to convey with my designs:

The 5 Ws and One H of UI Design

• What - What needs to be shown on this particular element? What information needs to be presented? Usually I write this one out in the form of a big itemized list.
• Who - Who is this being designed for? What type of user and demographic? While this question is usually universal for most of the game, it is a very important thing to consider. Interfaces designed for older demographics should look vastly different compared to an interface designed for kids.
• When - When is this going to be seen in game? Is it the first screen we see, or an edge case popup. This one helps me place the screen within the larger flow of the game.
• Where -  Where is the player at when they are on this screen. I approach this considering the emotional state of the player. For example if I am designing a storefront I want the player to feel positive about making purchases here. If I am designing a popup to force a clutch purchase in a puzzle game, I want to consider the stress the player might be under at that moment.
• Why - Why is the player using this particular screen? What are they trying to accomplish when they use it?
• How - How does this interface compare to similar products? How can I use and reinforce common mobile patterns related to this type of application? How can I educate users about new patterns for my specific game? This can be a complicated question to unpack and answer but it’s important to consider what exists in similar games, and how you can emulate the user patterns that already exist and how you can improve them.

I begin my process by answering these questions and making some rough sketches. Since there is so much information on this menu screen spent a lot of time thinking about the visual hierarchy or how to order the information so the most important info was seen first. I sketched out a lot of different designs, some of which were taken to more final stages. These sketches range from super rough to more clean iterations - whatever it took to get the idea across!