Nothing particularly ground-breaking here, am I right? Since the introduction of the <button> tag in HTML4, buttons haven’t been particularly challenging to make. Despite this, it’s relatively easy to find buttons that don’t adhere to the fundamental best practices, so in this blog we’re going to delve a little deeper into them. A professional UX designer always pays attention to details like these, because buttons play a crucial role in guiding user interactions.
Make Your Buttons Look Like Buttons
The key to buttons is that they must have a buttonlike appearance, with some shading on their surface or around their edges to distinguish them from the background and give them the appearance of being clickable.
Words by itself definitely doesn’t provide enough visual cues, nor does a shape around a word without any shading to make it look buttony.
A button may lose its button-like appearance if it is made too large. For example, an ux designer would quickly notice how oversized buttons can confuse users rather than encourage them to click.
Despite the fact that it seems obvious that buttons should look like buttons, many website designers fear that a plain button would ruin the elegance of their design. But an ux designer knows that usability should never be sacrificed for aesthetics.
Despite the fact that it seems obvious to me that buttons should look like buttons, many website designers seem to be concerned that a sloppy old button would ruin the lovely lines of their design. Naturally, they could be right: we want that main action button to look fantastic in addition to looking like a button. Since it’s the only place your users will look, it needs to be visually appealing.
Put Buttons Where It’s Easy For Users To Spot Them
Is the OK button to the left or right of the Cancel button? It’s one of the most contentious issues in user experience. And there is also the issue of Next and Previous buttons. There are opinions everywhere, and they’re frequently supported by studies even actual research.
In our experience, there is usually just 2 buttons in a dialogue box or survey: OK and Cancel. Sometimes the buttons are Next and Previous in survey forms. This is usually preceded by a question or image. However, before users can proceed with an action button, what are they looking at? What will lead them to select Back or Cancel?
Generally speaking, when you’re on a web page, it’s all about knowing what catches your users’ attention which motivates them to take action. The image or text must inspire them to take action so that you know where to put the corresponding action button.
Put the primary action button, Next, OK, or Send, as close to the left-end of the final field on the form as you can because, in the world of forms and surveys, users have just tapped or clicked a field.
An experienced UX designer understands that placement is critical. Buttons should be positioned where users naturally expect them to be. For example, forms should always have the “Next” or “Submit” button aligned to the logical reading flow.
Make the Most Important Button Standout
Another strange technique for making it challenging for users to play “hunter-for-the-button-I-want” is to provide them with a lot of buttons arranged in a row that all look very similar.
Instead, a skilled UX designer ensures that the most important button stands out, whether by using color contrast, size, or placement. The goal is to make the user’s path to completion as smooth as possible.
Put Buttons in a Logical Order
Where should the other buttons go if the main action button needs to be the first thing users look at?
It goes without saying that you should hide the other buttons so users won’t accidentally press them. This is good advice, but if you abide by it without considering other design factors, it might result in undesirable layouts like the one in the photo below.
For languages that read left to right, a Previous button should always be to the left of a Next button. An UX designer considers cultural and directional reading patterns to ensure button order feels intuitive to users.
Label Buttons With What They Do
Sometimes we encounter buttons with strange labels. We can’t help but ask what they do. Take a look at the message on the photo after we uploaded a file. It provided me with just the Awesome button. What was the intended meaning of that? What effect had the button? How could I achieve my objective of making that presentation the best it could be?
A thoughtful UX designer ensures that button labels are clear, action-oriented, and immediately communicate what the button does—whether that’s “Submit,” “Download,” or “Cancel Order.”
If There is No Action Required, Then Don’t Put a Button for It
We have also encountered many forms with useless buttons. I try to fill them out honestly to see if they work, but I don’t really want to sign up for a website, apply for a loan, or do anything else that they might ask me to do, so I find a Reset or Cancel button rather handy.
We haven’t seen a Reset button on a form in a very long time, and even Cancel buttons are getting harder to find.
We also continue to see a lot of buttons that simply repeat the same action, so users get the feeling that they aren’t making any progress. For instance, I recently began the process of applying for a credit card. The primary action buttons from the first three steps are shown in the photo below. Since none of them offered me a form before I had even answered a single question, I quickly gave up on that process out of impatience.
An ux designer would simplify these interactions, eliminating redundant buttons to streamline the experience and keep users focused on their goals.
Make It Hard to Find Destructive Buttons
Despite my arguments against providing users with buttons for actions they don’t want to take, there are times when we must provide harmful buttons, like Cancel This Order. This was one of the plausible Cancel buttons that I found in my library, from a Web site that is aimed at non-savvy users who were about to commit to a rather large purchase, with long-term monthly payments, and who might not realize that the Close the Window option would let them escape.
A good ux designer will deliberately make destructive buttons less obvious by changing their styling or making them smaller. This reduces the chance of accidental clicks while still giving users the option when needed.
Final Thoughts
A crucial part of user interaction is played by the modest button. A short form with a visible button works well; a long form without one above the fold might frustrate users. An ux designer knows that buttons are more than just visual elements—they’re the key drivers of task completion. By paying attention to placement, design, labeling, and hierarchy, designers can craft experiences that make users feel confident and in control.
