Users should clearly understand what happens when they click on a button.

Ideally, the button’s label should clearly describe its action. Write button labels that clearly explain what each button does. Label buttons with what they doīuttons with generic or misleading labels can be a huge source of frustrations for your users. When users first navigate to a page that contains some actions that you want them to take, it should be easy to spot an appropriate button for the user. Tip: Test your design on discoverability. Combining a standard layout with clean visual design and ample whitespace makes the layout more understandable.ĭon’t play hunt-the-button game with your users With a standard layout, users will easily understand the purpose of each element - even it’s a button without strong signifiers. Use traditional layouts and standard UI patterns as much as possibleĬonventional placement for buttons improves discoverability. If users can’t find a button, they won’t know that it exists. Put buttons where users expect to find themīuttons should be located in places where users can easily find them or expect to see. Here are a few examples of buttons that are familiar to most users:Īs a user, you can’t tell whether it’s a box or a button. Your ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your own design is intended to do. When designing an interface, you should always keep in mind following rule: In many cases, designers intentionally don’t identify buttons as interactive elements because they assume the interactive elements are obvious for users. Don’t assume that something in your UI is obvious for your users To understand whether an element is interactive or not users have to tap on it - there’s no other way to check the interactivity. Mobile users don’t have such opportunity. 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. Weak signifiers is an even more significant problem for mobile users. If they find it hard to use, they will find it frustrating and ultimately not very usable. If clear affordances of interaction are missing and users struggle with what is “clickable” and what is not, it won’t matter how cool we make the design. Unfortunately, in many interfaces the signifiers of interactivity are weak and require interaction effort as a result, they effectively reduce discoverability. Visual signifiers hold an essential information value - they help to create affordances in the interface. That’s why it so important to use appropriate visual signifiers (such as size, shape, color, shadow, etc.) to make the element look like a button. Generally, the more time needed for users to decode the UI the less usable it becomes for them.īut 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. Every item in a design requires effort by the user to decode. When it comes to interacting with user interface, users need to know instantly what is ‘clickable’ and what’s not. In this article, I’ll review seven basic principles you need to know to create effective buttons. They have a primary role in the conversation between a user and the system. Buttons are an essential element of interaction design.

Google web designer button