Buttons that click
Written by Kenney on 05/09/2016
Buttons are meant to be pressed. If it isn’t satisfying to press, it’s not a very good button. Let me tell you a few quick tips to improve the look and feel of your buttons. Some of these things might come off as fairly obvious but I still see these simple mistakes made daily. First, the styling;
Just like any other UI element buttons should fit in the overall theme of your game. It’s common to use materials related to the time period of the game. Medieval games often use stone and parchments to base their UI on, future/sci-fi games use metal and holographic elements instead.
If the time period doesn’t play a large role in the game or you don’t want a very distracting UI, then you’d want to go for a more generic UI with flat styles and non-distracting colors. On mobile it’s common to create large buttons so they’re easy to press with fingers. Make sure to change their size when porting to PC/consoles though, keeping them large might make your game come off as a cheap mobile port.
Since buttons are interactive, make sure the player knows they can be interacted with. Adding depth or an outline are simply ways to set them apart from the background.
A simple way to add depth to a button is to create a copy of your button sprite, making it slightly darker and moving it a few pixels under the original sprite. Then, add a thin highlight between the original and the dark sprite, as seen here:
Leaving more room between the original and darkened sprite creates greater depth, you can try giving important buttons more depth than others. This is optional for any button, but it's rather easy to do and doesn't require a whole lot of design skills.
The button size is an important aspect and greatly depends on the importance of the button, the screen space available and even the platform on which the game will run. For mobile games, create huge buttons that are easy to press. When porting over a game from mobile to any other platform, make sure to change the button sizes back to something reasonable on a large screen. Keeping large buttons might make your game come off as a cheap port.
Adding a little feedback when a player hovers over the button can make navigation easier and buttons feel responsive. Changing the size or adding an outline are easy ways to give visual feedback. When changing the size on hovering make sure to create an animation and add easing to the size change, otherwise it’ll feel jerky.
When choosing a font for the text on buttons make sure that it fits with the style, and is easily readable. Overall, sans-serif fonts are the better choice. Decorative fonts are often hard to read and don’t look too good when extensively used in the UI. If the background of the button has lots of detail or a texture with strong contrasts, you can add a thin outline around the text to make it stand out from the button itself.
When pressing a button, it’s crucial to show the user that the button has indeed been pressed. Immediate feedback like that makes it seem that the game responds quickly, even if there’s a slight delay in the action afterwards. If the button has depth added, you can try moving the original sprite a few pixels down when pressed. This creates the illusion of a physical button being pressed.
For sound design it’s important that the sound of the button corresponds to the action. If the button purchases an upgrade or item, a cash register sound would work well. If a button is often pressed (menu navigation, options, toggles) make sure to use a sound that doesn’t get too annoying quickly. In those cases it’s better to use a sound file that doesn’t really stand out too much.
Hope you’ll find some helpful tips in here!