Buttons and navigation components are the most frequently used UI elements that you can find on a web site or mobile app. One of the reasons why buttons are so popular is their feature to imitate effectively contact with digital objects.
Those elements pull together an interface and allow users to provide the desired interactive feedback in a single click. It's the way to send a message, confirm the purchase, download a picture, or any other possible action. Let's check out how to design buttons that provide useful and actionable feedback for website or app visitors.
Differences between primary and secondary buttons
A typical site or app form (or dialog box) usually has several options. Usually, designers use only two — one stands for a primary default action and the secondary, which should be less utilized (i.e. allowing users to withdraw the data they have entered in the form or cancel the action).
For a better UX experience, it is crucial to give the highest visual weight for a primary button since users compare the importance of the click-based on this factor. Simply speaking, due to its highest visual weight the primary button gets the most attention. Hence, it is a bad practice to make the secondary button brighter and bigger than the main one. And if you do this, the user is more likely to choose the irreversible action as a default action and click it by mistake. The best way to indicate the weight of a button is to use visual cues: shape, size, colors, placement.
Shape
By and large, there are two main contemporary designs trends and both of them have their own unique style and set of traits: skeuomorphism that creates a sense of familiarity by imitating real materials and flat design that feels utilitarian and minimal. But UI/UX is constantly evolving, and nowadays designers have a choice of more than 2 major styles that can be applied for the entire interface and button design, in particular.
Three-Dimensional button
This design approach is based on the simple principle— using a border, gradient, and drop-shadow make the product stand out from the context and text, making it easy to recognize as a clickable object. We realize that the objects we interact with are not real. Yet, 3D or skeuomorphic buttons that imitate their physical analogs allow users to make it more obvious that they can click these elements on a flat-screen.
Flat Design Button
Buttons are presented as flat-mode elements, with no heavy visual effects. They look sleek, light, and do not copy the design of real-life buttons, which simplifies UI in general.
Floating Action Button
It appears in front of all screen content, usually as a circular shape with an icon in its middle. Unlike a fully flat button, this style uses subtle shadows and highlights to build some kind of a multi-layer UI. FABs function as call-to-action buttons that users need the most on that particular screen and represent a single action: create, add to favorite, share, or start a process.
Ghost Button
The ghost buttons are also one of the commonly used design trends. They look translucent and empty with a basic shape like a rectangular or a square. Ghost buttons in mobile apps are commonly replaced with a text link. Its background becomes visible only when the button is clicked.
This makes the user sure that the action has been taken. The main feature is that ghost design should be only used for secondary buttons as it shouldn't distract from the primary action. Ideally, you need the user to see your main CTA and then move the attention to the secondary button.
Toggle Button
Due to a toggle button, the user may adjust a setting between two states. The most common toggle element is used in the app settings as On/Off switcher. At the same time, toggle buttons can be integrated into a layout to combine similar, but more advanced choices.
Size
The next element to consider when designing in button is its size. UX designers should check how large a button is in comparison with other elements on the screen and make sure that the buttons are convenient enough for interactions. Google's Material Design recommends that the touch target should be at least 48 pixels wide 48 pixels tall. Apple’s iPhone Human Interface Guidelines suggest a minimum target size of 44 x 44.
Besides, you shouldn't forget about paddings (the space between the element and its border). It's crucial because visually impaired users who raise the font size in their browsers or app settings should be ensured that the text inside the button isn't cut off due to the bigger font.
Colors
It is important not only to choose the right palette but also to ensure that the entire interface is aesthetically pleasant and elegant. Take into consideration your template's background color to ensure colors combine with each other and button(s) don't look invisible.
Adding a red button, as opposed to a green one, may communicate a different message to the user. Therefore, when thinking about the colors, we advise you to determine the type of action that a button is performing:
Positive – confirmation of the chosen action. This button needs to have the highest contrast.
Neutral – doesn't cause any irreversible change. Neutral actions can be represented by ghost buttons.
Negative – for example, delete the item, block the content, erase data. It's important to show that clicking this button can lead to important change, therefore, those types of actions (for example, Delete) usually colored in red, orange, or another attention-grabbing color.
One more tip: Don't forget about people with visual impairments while designing a product. You can use an online contrast checker to ensure colors are accessible for everyone.
Call to action/text on the button
The call-to-action buttons lead to a conversion on a specific page or screen (such as purchasing, calling, subscribing, etc.) and convert a passive user into active. What differs CTAs from all the other buttons is its engaging message: it must attract attention and inspire users to take the necessary action.
Buttons with generic or deceptive names can be a huge source of user annoyance. Use labels on the button which explain clearly what each button does. Ideally, the text on the button should clearly define its goal. If possible, we encourage you to make the explanation specific and as short as possible, such as 'Start free trial', 'Download the app', 'Contact sales'.
Placement
As for UX button placement, using traditional page templates and standard UI patterns is considered as a good idea because classical button placement makes the interface more intuitive. In consequence, the page looks more understandable due to incorporating a traditional layout with a clean visual design.
We recommend leaving enough space between the main content (text/image/video) and the button itself. Putting them too close may cause 'the invisibility effect' when the user will not be able to notice the button among other objects.
Besides the fact that the primary button should be brighter and more attention-grabbing, we also advise you to locate it on the right side (left space should be used for a secondary action).
Button design tips
- Keep the user journey in mind - let users always know what's going on and choose the placement button based on that rule. For instance, if you need to create a landing page, design the layout where users can find the call-to-action button (order, download, or similar) after checking the offer description.
- Improve the button design based on the user's feedback - A/B testing is the process of creating two and more variants of a page, and then testing them to check which one is most effective at achieving the required action. If you’re not sure what is the best color, shape location of the button, you can test a few options to get a data-backed answer. Moreover, user research and analysis help designers identify target audience parameters and apply minor changes.
- Make decision-making easier - the simpler layout is, the faster it is for users to make the desired for your company decisions. This is why most of the landing pages have one call-to-action button.
- Make buttons look clickable - probably, it’s the most important tip that we decided to leave as a conclusion of the whole post. Customers shouldn't spend a lot of time figuring out which of the design elements are interactive while scrolling your page or app. That’s why it’s important to design all the interactive elements clickable and easy to find.
Buttons are the elements of User Interface that can’t be overestimated. Small and meaningful, they define the user flow and app/website navigation. In the end, you have opened this article page exactly by clicking a button 'Read more'.
