Hey folks, and welcome back to Player Experience, a blog that talks about the intersection of Game and UX design. Today I want to talk about buttons. And not just any buttons—buttony buttons!
So… what the hell does that mean?
Well, let’s all remember that long before we did everything on a two-dimensional screen, we interacted with technology in meatspace. Buttons in meatspace look like this:
In product design (and I mean physical product design), buttons are designed to be pressed. When you press a button, you receive the visceral, physical feedback of the button sinking into its casing. This is how you can tell you activated the button.
Unfortunately, we can’t use the internet to give people the satisfying, physical feeling of depressing a button(yet). But a mouse on a computer screen is a direct analogue for touch(this is why it was pretty easy to transition to our touch devices). So clicking the mouse is akin to touching something on-screen, and buttons are how we’re used to interfacing with machines. So, we began designing UI on computers to reflect real, physical buttons.
The 3-pixel, 4-color bevel is a classic element of the original computer buttons. It was beveled this way to make it look like a physical button, and the down-state reflects this.
This was really, really useful in the early internet and even web 2, because a lot of people didn’t really know how to use a computer yet. I mean, we did, but we’re nerds. Imagine your parents trying to use a website 20 years ago. It’s beneficial to relate the function to something in the real-world.
So one way to make a button “button-y” is to make it skeuomorphic(look and act like its real-world analogue, even though it’s not functionally necessary). In web 2, we really leaned into this. Remember buttons like this?
Wow, those glossy, glassy, candy-bright buttons take me back! You might think, “what a strange trend? Why did we do that?” It wasn’t just because it was in-fashion at the time. It was because those buttons looked buttony! They looked shiny, they looked loud, they looked like candy. And when something looks like candy, we want to eat it—even against our better judgment.
There’s just something tempting about that bubbly, glossy surface and those bright colors that draw people in. They look like they would be pleasant to the touch, smooth and tactile. You don’t just know you can touch it—you want to.
As the internet became more ingrained in people’s everyday lives, and as designers grew more experienced in the field, we learned we don’t need to make a button look like jello to get people to click on it. However, that doesn’t mean this tech history lesson isn’t important! There are elements of these old, shiny buttons we still use today. This is why buttons now almost always have beveled edges, and why marketing websites often make the Button They Want You To Click a bright, contrasting color, so it stands out against the rest of the site, drawing you to it.
So how do we use this practically? Am I suggesting you go full iOS 4 on your UI? No. But it's useful to know some subtle steps you can take to make a user more likely to click on something.
Maybe you discovered in testing that it's not immediately apparent to users what they should click on, or maybe you or your team are having these concerns even before shipping. One way to subtly push users in the right direction is to make that button look more buttony! I’ll list the features, in order from subtlest to most glaringly obvious, that can help make a UI element look buttony.
Round off the corners
Make it a contrasting color
Give it a sense of physical dimension (bevel the edges, use a vertical gradient, etc.)
Make the down state look like a depressed button.
Make it look shiny, glossy, or otherwise pleasantly tactile.
This one is pretty basic, but I hope these quick and simple tips can help you create awesome UI that users want to reach out and touch. Thanks, and see you next time!
Comments