Zips dominate modern fashion, but what happened to the humble button? Wait, that’s not the type of button design we’re talking about today? My apologies. We’re here to talk about the far more high-tech button. UX buttons are an essential component of interactive design. However, making them effective is not as easy as ensuring they’re part of the design. Time to delve deeper into just what makes a UX button effective.
What is a UX Button, Anyway?
UX buttons are an interactive part of the design that triggers a specific action to the system. At its core, a button is a way for the user, or learner, to interact with the interface. A button helps the user and the designer achieve a specific goal. These can be anything from buying a product to downloading a free eLearning manual. A button gives a user a choice. Choices are a rarity in an online-sphere dominated by being spoken at.
You can often find buttons in:
- dialog windows
- modal windows
Types of UX Buttons
Let’s define the UX button scope before we talk about the best way to make them work for you and your needs.
Some of the basic types of UX buttons are:
- Text Buttons: Words on their lonesome to describe what’ll happen when you click. Usage? This one is for the less pronounced actions.
- Contained Buttons: Makes use of both elevation and color-fill. Usage? Primary, necessary actions. These bad boys stand out.
- Outlined Buttons: Some text and a neat outlined box around them. Usage? These are when you need more emphasis than a text button but less than a contained button.
- Toggle Buttons: My personal favorite. Making use of these de-selects one option and selects another. For example, subscribe/unsubscribe. Usage? Perfect for grouping together related actions.
5 Principles for Most Effective Button Design
Okay, okay, I won’t keep the super-secret knowledge from you anymore. Remember, use this knowledge for good, not evil.
Bonus Tip: Make Them Mobile Friendly
Too many mobile apps make buttons too small for the average adult hand. I have pretty dainty fingers. If I struggle to use a button, I can’t imagine what someone who isn’t part elf does to get to their end-goal. Average finger pad sizes are 10-14 mm; fingertips are slightly smaller at 8-10 mm. Try to aim for a good ten by ten mm size button to avoid frustration.
UX buttons help give your learners a choice and guide them along the right path simultaneously. Please make use of every trick in your psychological design toolbox to make them as effective as possible. This stuff takes too much time for it to be wasted!