A Simple 10-Minute UI Litmus Test
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.
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):
Some mobile game examples (click on image to expand):
Some website examples (click on image to expand):
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.