Self-Teaching UI Series
Welcome back to Player Experience! We had a long hiatus due to me moving to a brand new city for a brand new game design job (come on, let me brag a little). Earlier this month I blasted out some future ideas for articles, and it was decided that people wanted to hear about self-teaching UI. This is one of my favorite subjects, so I’m going to break it out into a few smaller parts to make them a little more managable…(chicken nuggets, remember?). Today, we’re going to start with a simple one: proximity.
Proximity means the location of the UI bits in reference to other pieces of the UI.

Here’s a classic example: here we have a strip at the top of the screen that has our currency for the game. Next to our currency, we see a buttony little plus sign.

Normally, a plus sign denotes health, but here its proximity to a string of numbers tells us it’s something different. Because it’s in line with the number string, players will think of it like a mathematic equation rather than a medkit symbol, hence communicating through proximity that the button is to add more currency(you also want the button to look “tappable” - I’ll do an entry on buttony buttons another time).
Let’s look at another example - here we have a crafting menu.

We could put a single crafting button way down in the corner and have the player select a weapon from above, but that’s a behavior that you would likely have to teach them. Let’s make it easier on both of us and let the UI teach them for us through proximity…

Here we have the crafting buttons right there inside the recipe - it clearly messages that it’s a crafting button, and better yet, it clearly messages exactly WHAT you’re crafting because it’s right in there with the item - its proximity to the recipe means it’s easy to understand and hard to mistakenly make something different.
I could go on and on about how proximity of UI helps players learn, without a tutorial, what your UI does, but I want to hear from you! Does anyone have some great ways that proximity has taught them how a UI in game they’re playing works? Let me know in the comments!
Comments