*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 assignment: Create a central screen/ home menu  that players will use to access the core functionality of our game.  Overall this screen should be a positive experience for the user, and excite them about the content of our game.Before we get into the nitty gritty, let’s start with the basics. What makes a user interface a good experience for the user? Here’s what I usually look for:

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!

Here's how I applied the five W's and one H to this screen.The What : This screen needs to serve as a central hub for the entire game. It should show the player their current collection of puzzle packs, allow the player to select a pack and puzzle to play. It should connect to the puzzle selection popup so players can select their puzzle play options (piece selection, rotation etc.). It should display information about the puzzle packs, their description, title and cost. Players should be able to access the global charm store, settings menu and keep track of their current charm amount. There should also be a system for keeping track of puzzles a player has completed or is currently playing.The Who : For this game we knew our demographic would skew older so I wanted to emphasize simpler interfaces with larger font sizes and accessible tools. I didn’t want to isolate younger demographics with my choices, so I needed to make sure everything still felt stylish and seamless for more universal appeal.The When : This is the first screen after the splash that we see in game. It serves as the launch point for all of our game interactions. Therefore it is going to need to allow for several other popups to layer on top of it, and seamlessly connect to the gameplay screens.Where : This is the beginning of the game, so it needs to feel welcoming and exciting. The player should feel like there are endless opportunities to explore. I realized here that I wanted the puzzle art to be very prominent on these screens the further entice the player to tap new puzzles.Why : Players are most likely using the screen to select a puzzle to play. They want to sift through lots of information and possibilities and select their favorite choice to play.How : I studied a lot of other mobile games and how they presented their content. I noticed a lot of the top competitors had very organized libraries to access each of their puzzles, but some of their interfaces lacked a consistent style or unifying theme.At this point in the process I also took the wireframes and mocked up how this screen would transition to other parts of the game. I also sketched out different states for this screen.  It’s always important when designing UI to think 4-5 steps ahead of the part you are currently designing, so it all flows naturally together. Never design in a vacuum!
I like to ensure that my designs are as user forward as possible so I took these designs and built several prototype versions so I could get them in front of users as soon as possible. After conducting several user tests and getting some feedback on designs we decided that the first menu style was the most promising.  Personally I was a fan of this design because it emphasized a vertical display of information that allowed the users eye to travel down the screen, collecting information as they went. This helped my influence my decision to have a drop down “drawer” for displaying the different puzzles that made up a pack.This is where the UI Artist aspect of my job kicked in. I started thinking about the "flavor" of our UI. As a team we decided that our game should have a library sort of feel as it is a collection of stories and puzzles. I translated this into the UI Art by determining we should have a paper/book theme. I looked at a lot of pictures of books, paper textures and UI Art for other literary games. Then I began taking my layouts and beautifying them. Eventually as a team we determined we liked this menu design and presented it for company feedback.
After getting company feedback and reflecting a bit more on this first pass, I realized there were a lot of things I could do to improve the menu design.  So back to the drawing board I went. And eventually we ended up here!
While I loved the tactile feeling of the textured edges of the first design, they made the pack buttons feel messy, and they did not fit well together. I went for more clear cut shapes, which were more organized and then applied a texture overlay to keep the tactile paper feel. Originally I thought the tab layout would be good for our older audience, since all the information would be upfront and available for the user. However having tabs created a whole new slew of problems in organizing data when we had more than three categories of puzzle. So I did away with the tab system and went with a swipe filtering system. Finally I toned down the colors to use a darker background with lighter accents, which felt more mature and luxurious versus our original menu layout which skewed a little younger. The final result was definitely something I felt satisfied about. It looked great on device too!
Almost there! As a UI Designer and Artist I absolutely love motion - honestly I could write a whole other blog post on the importance of motion in UI design. But lets save that for another day. Not only does animation make the whole system look a lot more polished it also can educate the user on the function of certain elements. I always like to do a couple motion passes to demonstrate how I, as the designer, want screen elements to move together. They also help to clearly convey my ideas to the programmers and rest of the team so we are all on the same page! 
Finally programming gets all of my mockups and notes and begins implementing my dream UI. I help by adjusting placements in Unity and implementing some of the smaller stuff if they have too much on their plates. I also answer any and all questions they may have about certain elements.Once its in game its time for another lengthy round of playtesting and usability testing. I determine the best type of testing needed for the situation and structure the tests according to premeditated guidelines. During the tests I take lots of notes on how I can make the experience better for our users and tweak things until it feels just right!And after all that it is done right? One super cool menu that is hopefully focused, feeling, flavorful and overall functional!  But don’t get too comfortable. One thing about the field of user experience is it is always growing and changing. And since our development cycle is largely agile, I am always looking for opportunities to go back and improve things as we add new features to Puzzlescapes. For example, I just used that same process to redesign the Puzzle Selection popup you can see in the above gif. And next week I am going to be using my process to design a storefront, reworked menu and possibly a whole new game.*Sigh* My work is never done. Its probably a good thing I love doing it!
Published by Katie Lucas in Uncategorized