{"id":15644,"date":"2018-07-19T11:34:11","date_gmt":"2018-07-19T10:34:11","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15644"},"modified":"2020-12-21T05:16:46","modified_gmt":"2020-12-21T05:16:46","slug":"basic-rules-for-button-design","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/basic-rules-for-button-design\/","title":{"rendered":"Seven Basic Rules for Button\u00a0Design"},"content":{"rendered":"

Buttons are an essential element of interaction design. They have a primary role in the conversation between a user and the system. In this article, I\u2019ll review seven basic principles you need to know to create effective button design.<\/p>\n

\"button<\/a>

Image: Gal\u00a0Shir<\/a><\/p><\/div>\n

1. Make buttons look like\u00a0buttons<\/h2>\n

When it comes to interacting with user interface, users need to know instantly what is \u2018clickable\u2019 and what\u2019s not. Every item in a design requires effort by the user to decode. Generally, the more time needed for users to decode the UI the less usable it becomes for them.<\/p>\n

But how do users understand whether a certain element is interactive or not? They use previous experience and visual signifiers to clarify the meaning of the UI object. That\u2019s why it so important to use appropriate visual signifiers (such as size, shape, color, shadow, etc.) to make the element look like a button. Visual signifiers hold an essential information value \u2014 they help to create affordances <\/em>in the interface.<\/p>\n

Unfortunately, in many interfaces the signifiers of interactivity are weak and require interaction effort; as a result, they effectively reduce discoverability.<\/p>\n

If clear affordances of interaction are missing and users struggle with what is \u201cclickable\u201d and what is not, it won\u2019t matter how cool we make the design. If they find it hard to use, they will find it frustrating and ultimately not very usable.<\/p>\n

Weak signifiers is an even more significant problem for mobile users. In the attempt to understand whether an individual element is interactive or not, desktop users can move the cursor on the element and check whether the cursor changes its state. Mobile users don\u2019t have such opportunity. To understand whether an element is interactive or not users have to tap on it \u2014 there\u2019s no other way to check the interactivity.<\/p>\n

Don\u2019t assume that something in your UI is obvious for your\u00a0users<\/h3>\n

In many cases, designers intentionally don\u2019t identify buttons as interactive elements because they assume the interactive elements are obvious for users. When designing an interface, you should always keep in mind following rule:<\/p>\n

Your ability to interpret clickability signifiers aren\u2019t the same as your users\u2019 because you know what each element in your own design is intended to\u00a0do.<\/span><\/p>\n

Use familiar button design<\/h3>\n

Here are a few examples of buttons that are familiar to most users:<\/p>\n