{"id":16912,"date":"2022-11-01T20:49:58","date_gmt":"2022-11-01T20:49:58","guid":{"rendered":"https:\/\/uxmag.com\/?p=16912"},"modified":"2025-01-15T10:50:17","modified_gmt":"2025-01-15T10:50:17","slug":"designing-the-perfect-button","status":"publish","type":"post","link":"https:\/\/uxmag.com\/articles\/designing-the-perfect-button","title":{"rendered":"Designing the Perfect Button"},"content":{"rendered":"\n

Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button clicks. So it\u2019s crucial to communicate to the user how a button works and where it\u2019ll lead them. Over the years, our design system has fine-tuned the craft of our buttons.<\/p>\n\n\n\n

Buttons allow users to control the product and achieve their goals. It can help them navigate the interface, modify content or both.<\/p>\n\n\n\n

\"Three<\/figure>\n\n\n\n

Principles<\/h3>\n\n\n\n

As Google explains<\/a>, a good button design follows 3 principles. It must be Identifiable, Findable and Clear. We keep close to these principles at Wix.<\/p>\n\n\n\n

Making a button clear<\/h4>\n\n\n\n

A button must clearly communicate what it does, with zero space for interpretation. Text is the primary element that explains intention.<\/p>\n\n\n\n

Of course, you can include an icon which helps to identify and understand the context. But without any text, it\u2019ll lack full meaning. The text is a promise of what exactly will happen when that button is clicked.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Sometimes buttons need to include multiple messages, where the text and icon can even have different meanings.<\/p>\n\n\n\n

\"A
In this example \u201cMore Actions \u25be<\/em>\u201d, the text indicates that here you\u2019ll find more actions, while the icon indicates that the menu of more actions will display in a dropdown once you click the arrow.<\/figcaption><\/figure>\n\n\n\n

Case study<\/strong><\/h4>\n\n\n\n

In 2019 the OS Team at Wix decided to change the button hierarchy. When we first launched, our design system had buttons with text only in our primary CTAs. Any secondary CTAs we had on the page were indicated with just a button \u2014 no text. After our update, we turned all our icon-only buttons into text or text + icon buttons. This small change led to a huge increase in click rate for \u201cCreate New Folder\u201d<\/em>. The top bar actions next to the primary CTA got more exposure too.<\/p>\n\n\n\n

This visual comparison shows how the upper layout won the test against the bottom layout:<\/p>\n\n\n\n

\"Two
\u201cCreate New Folder\u201d click rate significantly increased without harming the main goals.<\/figcaption><\/figure>\n\n\n\n
\"Two
Before the change, when \u201cCreate New Folder\u201d button displayed only the icon, few people managed their sites into folders.<\/figcaption><\/figure>\n\n\n\n

Making a button findable<\/h4>\n\n\n\n

Actions must be located where users expect to find them. The main action must always be visible and positioned in the top area. Navigation actions can look neutral but also must be visible. Only the least important actions that don\u2019t affect the main path (e.g. \u201cdelete\u201d<\/em>) can be hidden under popovers.<\/p>\n\n\n\n

\"Two<\/figure>\n\n\n\n

Avoid placing tool actions with navigate buttons in the same list. Users might not expect to find buttons that are out of context.<\/p>\n\n\n\n

\"A
In this example, the \u201cCategory Manager\u201d button is out of context. \u201cMore Actions\u201d communicates that the menu will provide actions but doesn\u2019t tell the user that there will be navigation buttons.<\/figcaption><\/figure>\n\n\n\n

Join the UX Magazine Community!<\/h3>

Dive into exclusive articles, podcast episodes, whitepapers, and more on the cutting-edge of AI and automation. Stay ahead of the trends reshaping industries.<\/p>Become a member<\/a><\/div>\n\n\n\n

Making a button identifiable<\/h4>\n\n\n\n

Users must easily understand which interface parts are static and which are clickable. Wix uses blue color for all major actions. Lighter blues can be used only as the button\u2019s background color.<\/p>\n\n\n\n

\"Two<\/figure>\n\n\n\n

In some cases, like on colored backgrounds, the blue color can\u2019t be used due to the contrast. Then, text, contrast and shape plays the major role in making the button look recognizable and distinct from the rest of the environment. Following Web Content Accessibility Guidelines<\/a> helps to provide a good text contrast, so the majority of users will be able to read it.<\/p>\n\n\n\n

\"A
Black action works well on colorful backgrounds. Underlined text makes it clear that it\u2019s actionable.<\/figcaption><\/figure>\n\n\n\n

Text<\/h3>\n\n\n\n

Text is the primary element that explains the button\u2019s intention. It should be clear, predictable and simple. Start with a verb to encourage action. Verbs must tell the user what happens once a button is clicked so they can predict the next step. Use simple language that will be recognized by any age group.<\/p>\n\n\n\n

\"Two<\/figure>\n\n\n\n

Case Study<\/strong><\/h4>\n\n\n\n

Wix\u2019s Photo Studio Team performed an A\/B test which showed that users engage more when buttons are displayed with text. The application tested three layouts; icon only, text below the icon and text on the side. Versions with text won the experiment.<\/p>\n\n\n\n

\"Two<\/figure>\n\n\n\n

After a failed test, the layout was reverted to the original.<\/p>\n\n\n\n

\"A
This version shows the final solution used by Photo Studio. It solved the initial problem and led to a slight increase of tabs use.<\/figcaption><\/figure>\n\n\n\n

This study showed that text plays a crucial role in making buttons clear and actionable.<\/p>\n\n\n\n

Text in context<\/h3>\n\n\n\n

A button\u2019s text should reflect the context. Make sure the user is aware what action is available. For example, alert modals appear fast and change the layout. Therefore, the potential actions must be very clear.<\/p>\n\n\n\n

\"A
The good example showing how both buttons are clear what they will do. The main button reflects the content\u2019s title \u2014 it makes an accurate alert message.<\/figcaption><\/figure>\n\n\n\n
\"A
The bad example showing how buttons don\u2019t explain what would happen if they\u2019re clicked. A user must remember their previous actions to understand the context.<\/figcaption><\/figure>\n\n\n\n

In modals that just state the facts, like \u201cSuccess\u201d<\/em> or \u201cTwo users can\u2019t edit at once\u201d<\/em>it\u2019s ok to use less descriptive buttons such as, \u201cGot it, Thanks\u201d<\/em>.<\/p>\n\n\n\n

Icons<\/h3>\n\n\n\n

Icons help users understand the context. However, icons can often be misinterpreted. Icons don\u2019t encourages users to take action in the same way text does. For this reason, you should use single icon buttons with caution.<\/p>\n\n\n\n

Icon buttons work great for professional tools where a user will regularly click buttons and memorize them. Placing icons next to a button with text will increase the chance of being noticed by users.<\/p>\n\n\n\n

\"Four
\u201cEdit\u201d button attracts the user\u2019s attention to this button group. Mouse hovered icon buttons reveal their labels in a tooltip making it obvious what the icon button will do.<\/figcaption><\/figure>\n\n\n\n

Case Study<\/h4>\n\n\n\n

Side navigation testing showed that Wix users engage more with drill-in buttons that have arrow icons.<\/p>\n\n\n\n

\"Two<\/figure>\n\n\n\n

This study shows how text and icons can give additional context when used together. This helps users understand what buttons leave the page and what buttons display more options.<\/p>\n\n\n\n

Hierarchy<\/h3>\n\n\n\n

Applications tend to have multiple actions. Some actions are always used, others just occasionally. Not every button needs full attention but all buttons must be discoverable. A good hierarchy means every action will be discovered easily when needed. There are multiple techniques on how to create a good hierarchy.<\/p>\n\n\n\n

Placement<\/h4>\n\n\n\n

The most important actions must be put in the most visible area; at Wix it\u2019s the top of the page in the right hand corner. The lower the button, the less discoverable it\u2019ll be.<\/p>\n\n\n\n

In languages written left to right, users start to read from left, that\u2019s why it\u2019s good to display the main call to action last on the right side. Users can take an action once all options are already presented. According to psychologist Herman Ebbinghaus the first and last elements in a sequence are the easiest to memorize. This tendency is called the serial position effect<\/a> and it\u2019s used in UX design.<\/p>\n\n\n\n

\"A
Most important actions \u201cSave\u201d and \u201cCancel\u201d are positioned in the top right corner so they\u2019re always visible.<\/figcaption><\/figure>\n\n\n\n

Emphasis<\/h3>\n\n\n\n

All buttons must be recognizable actions. Use emphasis to achieve that. Note that not every button must be emphasized at the same level. A single page should have only one main action. Other actions should be secondary or tertiary.<\/p>\n\n\n\n

\"Multiple<\/figure>\n\n\n\n

Style<\/h4>\n\n\n\n

Each button can have a style based on its own intention. A set of styles creates a design language which customers use when working with an application. There can be a different style for general, navigation, social share or upload buttons. Each brand product can have its own set of button styles.<\/p>\n\n\n\n

\"Multiple<\/figure>\n\n\n\n

Size<\/h4>\n\n\n\n

Buttons can appear in multiple sizes. Large buttons should appear in large and spacious layouts, tiny buttons should be used in small and crowded spaces.<\/p>\n\n\n\n

\"Four<\/figure>\n\n\n\n

Summary<\/h3>\n\n\n\n

A well organized hierarchy between the actions creates harmony on the page so it\u2019s easy for the user to read and understand. For example, Wix Seatings Map Builder<\/a> shows how button\u2019s different properties make a clear hierarchy between actions \u2014 primary, secondary and least important.<\/p>\n\n\n\n