A Simple 10-Minute UI Litmus Test

This article was originally posted on Kongregate's Developer Blog.

About a year ago, I gave a talk to a small group of mostly indie and small-studio game developers about how to incorporate the UI process into their games, and one of the pieces of advice I haphazardly slapped on an ending slide was, “Think like a player [when looking at the UI for your game].” Essentially, I was asking developers to remove themselves from the game that they had poured their blood, sweat, and tears into.

To the surprise of probably no one, the first question I got was, “How do I do that?”

So, how do you do it? Let's say you have a Store for your game, and it's really important because, well, it pays the bills. You want to find out if the button to the Store is easily found. But you had added the button months ago, have play-tested the game every day since then, and now can find it with your eyes closed. How do you go from being the person who knows this game the best, into someone who knows the least?

There are a lot of different ways to do this: Some require another human body (asking family/friends), some may take time to get results (online or in-person usability tests, data analytics), and some may cost a lot of money to conduct testing (external user testing consulting). But here's a simple and quick option you can try on your own, though you will need some type of image-editing software. (By the way, Pixelmator is a great, low-cost, Mac-only alternative to Photoshop.)

The original idea grew from gray box wire framing, which I first read about 12(!) years ago by the designer Jason Santa Maria (who designed the original Kongregate website). Gray box wireframing ensures that your wireframes only contain the basic structure and components of your UI, so you don't get caught up in more of the visual elements in high-fidelity mockups, like typography, color, copy, etc.

Gray Box Wireframe example from Viget Labs

Since gray box wireframing occurs in the beginning stages of the design process, I wondered if you could reverse the process if you wanted to figure out if the visual hierarchy in a current WIP or finished design is obvious. So here's a simple UI sanity check that you can conduct yourself:

Step 1
Pick a page from your website or screen from your mobile app/game. Determine what the 3 most important elements you want your users to find are, and write them down in order of importance. If you're having trouble choosing 3, ask yourself what the user wants to do on this screen and what you want them to do. These aren't always the same thing!

Step 2
Take a screenshot on that page or screen that you've chosen and open up 2 duplicate versions of it in your image-editing software. Apply a blur filter on one copy, to the point where words and images start to become unrecognizable (I used a 4-pixel Box Blur in Photoshop). On the other screenshot, desaturate to the point where it's completely grayscaled.

Step 3
On each of the screenshots that you've applied filters to, mark the elements (or grouping of elements) that you feel stand out to you the most, in order. You may find that zooming out of the image helps with this.

Blurry Twitter Guest Homepage - may be easier to find your focus points when then screenshot is zoomed out.

I usually suggest to people that this is more easily done if you print it out, plus then you get to use a red marker which is always fun. You can even send out your blurry and grayscale screenshots to others to see if they corroborate with your importance rankings.

Now take a look at your list from Step 1 and see if they match the list in Step 3! For the most part, it should match up pretty well. If they don't, it might be time to revisit your UI to make sure it does. (This may be a future blog post on how to update your UI.)

Some game examples (click on image to expand):

Burrito Bison Revenge - One of my favorite games on Kongregate. On their Upgrades screen, my eyes focus on either theGet More Money button or the Upgrade button, which is good. The Fight button gets more lost for me than the top 3 elements, so perhaps making that stand out more would help.

Contract Wars - One of the most popular games on Kongregate. There is a lot going on in their main screen, but there are some elements that do stand out consistently, like increasing your experience points or the button to start a Quick Match. There's definitely room for improvement on establishing a visual hierarchy for better groupings of related content together. Instead of your eyes focusing on many separate elements on the screen, they would focus on different content groupings, then drill down in detail for each grouping.

Some mobile game examples (click on image to expand):

Clash Royale - It's clear from this UI that the Battle and Open Chest buttons are the main actions on this screen.

Candy Crush Soda Saga - Once you are out of moves on a certain level, a popup display asks if you would like to continue the level (with hard currency). This is likely the most important element the game wants users to focus on. Though having the button centered on the screen with adequate whitespace certainly helps with its prominence, perhaps it would help if the popup had a transparent overlay behind it to reduce the visual noise.

Some website examples (click on image to expand):

Apple - The homepage does a great job of grouping related content together so your eyes only focus on a few things on the page.

Facebook Guest homepage - While there are many more elements and text on this homepage than Apple's, Facebook did a great job with color and contrast to only make the user focus on a few elements on the page.

Lyft - Lyft mainly relies on using their trademark hot pink color to draw your eyes to the middle "Sign Up" button, and the "Drive with Lyft" upsell horizontal bar. While the color greatly stands out against the image background, relying on mostly color sets up variables that may affect the effectiveness of the callout, including monitor quality, environment darkness, and color blindness.

Theresa is a Product Designer in San Francisco and currently leads Creative Direction at Kongregate. After graduating from Berkeley with a Linguistics degree, she realized she was having way more fun building websites on the side and decided to make a career out of it. She's been at Kongregate since the early days in 2007.

She tweets about design, baseball, and dogs at @theresachien