small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4?source=rss----819cc2aaeee0---4">UX Planet &mdash; Medium</a> | Nick Babich <img alt="" src="https://cdn-images-1.medium.com/max/800/1*3M9hkYLvrJ5xTR2_ZM0FAg.gif">Image: <a href="https://dribbble.com/galshir">Gal Shir</a></p>
<h4>by <a href="http://babich.biz">Nick Babich</a></h4>
<p>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’ll review seven basic principles you need to know to create effective buttons.</p>
<h3>1. Make buttons look like buttons</h3>
<p>When it comes to interacting with user interface, users need to know instantly what is ‘clickable’ and what’s 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>
<p>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’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. Visual signifiers hold an essential information value — they help to create <em>affordances </em>in the interface.</p>
<p>Unfortunately, in many interfaces the signifiers of interactivity are weak and require interaction effort; as a result, they effectively reduce discoverability.</p>
<p>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. If they find it hard to use, they will find it frustrating and ultimately not very usable.</p>
<p>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’t have such opportunity. To understand whether an element is interactive or not users have to tap on it — there’s no other way to check the interactivity.</p>
<h4>Don’t assume that something in your UI is obvious for your users</h4>
<p>In many cases, designers intentionally don’t 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>
<blockquote><p>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.</p></blockquote>
<h4>Use familiar designs for your buttons</h4>
<p>Here are a few examples of buttons that are familiar to most users:</p>
<ul>
<li>Filled button with square borders</li>
<li>Filled button with rounded corners</li>
<li>Filled button with shadows</li>
<li>Ghost button</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/224/1*UZTsPglcLschWx2IUMt7dg.png"></p>
<p>Among all those examples, the “Filled button with shadows” design is the clearest for users. When users see the dimensionality of the button, they instantly we know this is something we can press.</p>
<h4>Don’t forget about the whitespace</h4>
<p>Not only the visual properties of the button itself are important. The amount of whitespace near the button makes it easier (or harder) for users to understand whether it’s an interactive element or not. In the example, below some users might confuse the ghost button with an information box.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/420/1*AqsH5XIqUgL9v0_SWbwgKw.png">As a user, you can’t tell whether it’s a box or a button.</p>
<h3>2. Put buttons where users expect to find them</h3>
<p>Buttons should be located in places where users can easily find them or expect to see. <em>Don’t make users hunt for buttons.</em> If users don’t find the button most probably, they won’t know that such button exists.</p>
<h4><strong>Use traditional layouts and standard UI patterns as much as possible</strong></h4>
<p>Conventional placement for buttons improves discoverability. With a standard layout, users will easily understand the purpose of each element — even it’s a button without strong signifiers. Combining a standard layout with clean visual design and ample whitespace makes the layout more understandable.</p>
<blockquote><p>Don’t play hunt-the-button game with your users</p></blockquote>
<p><strong>Tip:</strong> Test your design on discoverability. 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.</p>
<h3>3. <em>Label buttons </em>with what they do</h3>
<p>Buttons with generic or misleading labels can be a huge source of frustrations for your users. <em>Write button labels that clearly explain what each button does. </em>Ideally, the button’s label should clearly describe its action.</p>
<p>Users should clearly understand what happens when they click on a button. Let me give you a simple example. Imagine that you accidentally triggered a delete action and now you see the following error message.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/462/1*r5O0A-xt1rn_WE3evCC8ww.png">The vague label ‘OK’ doesn’t say too much about the action button does.</p>
<p>It’s not clear what does ‘OK’ and ‘Cancel’ represent in this dialog. Most users will ask themselves “What happens when I click on ‘Cancel’?”</p>
<blockquote><p>Never designed a dialog box or form that consisted solely of the two buttons ‘OK’ and ‘Cancel’.</p></blockquote>
<p>Instead of using ‘OK’ label it’s better to use ‘Remove.’ This will make it clear what this button does for the user. Also, if ‘Delete’ is a potentially dangerous operation, you can use red color to state this fact.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/442/1*gfo-E00mGVPVYc_H80lkmg.png">‘Remove’ makes it clear what button does for users.<img alt="" src="https://cdn-images-1.medium.com/max/799/1*J6W62w8Pv2lzuUF7Dk9Y_A.png">A potentially dangerous action ‘Disable card’ is colored in red in this interface. Image: <a href="http://ramotion.com/">Ramotion</a></p>
<h3>4. Properly size your buttons</h3>
<p>Button size should reflect the priority of this element on the screen. Large button means more important action.</p>
<h4>Prioritize buttons</h4>
<p>Make the most important button look like it’s the most important one. Always try to make the primary action button more prominent. Increase its size (by making a button bigger you make it look more important for users) and use a contrasting color to capture user attention.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VZEHys1AKuFEuMNc67KGGQ.png">Dropbox uses size and color contrast to focus user attention on ‘Try Dropbox Business free’ CTA button.</p>
<h4>Make buttons finger-friendly for mobile users</h4>
<p>In many mobile apps, buttons are too small. This often leads to the situation when users mistype.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/721/0*Wk2xGGQgUB3fIerb.png">Left: properly-sized button. Right: buttons are too small. Image: Apple</p>
<p><a href="http://touchlab.mit.edu/publications/2003_009.pdf">MIT Touch Lab </a>study found that averages for finger pads are between 10–14mm and fingertips are 8–10mm. This makes 10mm x 10mm a good minimum touch target size.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/proxy/0*E5IKQ8_HH4rweDAu.jpg">Image Source: uxmag</p>
<h3>5. Mind the order</h3>
<p>The order for buttons should reflect the nature of a conversation between the user and the system. Ask yourself, what order users expect to have on this screen and design accordingly.</p>
<blockquote><p>User interface is a conversation with your users</p></blockquote>
<p>For example, how to order ‘Previous/Next’ buttons in pagination? It’s logical that a button that moves you forward should be on the right, and a button which moves you backward should be on the left.</p>
<h3>6. Avoid using too many buttons</h3>
<p>This is a common problem for many apps and websites. When you provide too many options, your <a href="https://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice">users end up doing nothing</a>. When design pages in your app or website, think about the most important actions you want your users to take.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*TWNAmIkpR7SkXtIt.jpg">Too many buttons.</p>
<h3>7. Provide visual or audio feedback on interaction</h3>
<p>When users click or tap on the button, they expect that the user interface will respond with appropriate feedback. Based on the type of operation, this might be either visual or audio feedback. When users don’t have any feedback, they might consider that the system didn’t receive their command and will repeat the action. Such behavior often causes multiple unnecessary operations.</p>
<p>Why is this happening? As humans, we expect some feedback after we interact with an object. It might be visual, audio or tactile feedback — anything that acknowledges the fact that interaction was registered.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*ZIZSTlUWe5Vog-jXBiH5og.gif">User interface provides visual feedback that a press has registered. Image: <a href="https://dribbble.com/vadim_gromov">Vadim Gromov</a></p>
<p>For some operations, such as downloading, it worth not only acknowledge user input but also show a current state of the process.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*6YGP-5TxLJSuDwBYsKzREg.gif">This button translates into the progress indicator to demonstrate the current state of the operation. Image: <a href="https://dribbble.com/ColinGarven">Colin Garven</a></p>
<h3>Conclusion</h3>
<p>Despite the fact that buttons are an ordinary element of interaction design, it worth putting a lot of attention to make this element as good as possible. Button UX design should always be about recognition and clarity.</p>
<p>Thank you!</p>
<p><em>Follow UX Planet: </em><a href="https://twitter.com/uxplanetorg"><em>Twitter </em></a><em>| </em><a href="https://www.facebook.com/uxplanet/"><em>Facebook</em></a></p>
<p><em>Originally published at </em><a href="http://babich.biz/7-rules-of-buttons/"><em>babich.biz</em></a></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fb3e808%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Fb3e808%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Fb3e808%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href">https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=63dcdf5676b4" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4">7 Basic Rules for Button Design</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


7 Basic Rules for Button Design

7 Basic Rules for Button Design

by Nick Babich

Top Stories