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

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2qON7eX">UX Planet &mdash; Medium</a> | Nick Babich <img alt="" src="http://ift.tt/2p9Eb6C"></p>
<h4>by <a href="http://babich.biz">Nick Babich</a></h4>
<p>Floating Action Button (FAB) is a very commonly used control in Android apps. Shaped like a circled icon floating above the UI, it’s a tool for designers to call out the key parts of the app’s product story. FAB is quite simple and easy to implement UI element, but designers often incorrectly incorporate it into designs.</p>
<p>In this article you’ll find answers on following questions:</p>
<ul>
<li>When to use FAB?</li>
<li>What are best practices for FAB?</li>
<li>How FAB and animation can work together to improve UX?</li>
</ul>
<h3>When to Use FAB?</h3>
<h4>For hallmark actions</h4>
<p>FAB highlights the most relevant or frequently used actions. It should be used for the actions that are strongly characteristics of your app. Ideally, the FAB should represent the core function of your entire app just like in the example below.</p>
<p><img alt="" src="http://ift.tt/2qPHsEA">A floating action button represents the primary action in an application. Pausing or resuming playback on this screen tells users that it’s a music app.</p>
<h4>As way-finding tool</h4>
<p>FAB is a natural cue for telling users what to do next. Research by Google shows that, when faced with unfamiliar screen many user rely on FAB to navigate. Thus, FAB is very useful as a signpost of what’s important.</p>
<p><img alt="" src="http://ift.tt/2p9AeP8">Twitter uses FAB for write a tweet action.</p>
<h4>Not every screen needs a FAB</h4>
<p>FABs are colorful, raised, and grid-breaking. It’s very difficult not to spot these buttons, and that’s because they are designed to stand out. But not every screen should use the FAB simply because not every screen has an action of this importance.</p>
<blockquote><p>Do not use a FAB at all costs. It’s only for promoted actions!</p></blockquote>
<p>One good example is <a href="http://ift.tt/1AwGhxt">Google Photos app</a> for Android. The app opens in a gallery view, which has a floating action button for search. There are two problem with a FAB here:</p>
<ul>
<li>Search is an extra action for the majority of users. The primary task is photo browsing. Thus, there’s no need to have this FAB.</li>
<li>The presence of a FAB can distract and take up a user’s attention away from the main content (photos).</li>
</ul>
<p><img alt="" src="http://ift.tt/2qPYpP3">Search is extra action for Google Photos and doesn’t require FAB</p>
<p><strong>Tip:</strong> Finding the primary action of a screen can be much harder than it first seems. In order to simplify the task and understand whether you need FAB in your UI use a simple <em>five minutes rule: i</em>f you struggle for more than 5 minutes searching for what your screen primary action should be, it’s clear that the FAB isn’t required for this view.</p>
<h3>Best Practices for FAB</h3>
<h4>Avoid mystery meat navigation</h4>
<p>The term “Mystery meat navigation” was introduced by Vincent Flanders, a creator of the famous website <a href="http://ift.tt/1EYhMI5">Web Pages That Suck.</a> It refers to buttons or links that don’t explain to you what they do. Instead, users have to tap on them to find out.</p>
<p>FAB is an icon-only button and the problem is that <a href="http://ift.tt/1hMbKOg">icons are really hard to understand</a> because they’re so open to interpretation. As NNG <a href="http://ift.tt/1ZvVmrj">points out</a>, universally recognised icons are rare. For example, can you guess what a button in example below does?</p>
<p><img alt="" src="http://ift.tt/2qQ4hYP">What does FAB means here?</p>
<p>You don’t know for certain until you tap it. And if a user needs to guess, your button is mystery meat. Some may say that the the time it takes to discover what these icons means is quite short and the percieved possible risk very low. Yes, the time it takes to find out what an icon means, by tapping on it, may be quite small. But there is a cognitive load:</p>
<blockquote><p>User will have to remember what it means.</p></blockquote>
<p>Multiply that by all the mystery meat icons in all your apps and that is not small effort.</p>
<p>It’s acceptable to use icons-only buttons but only if<strong> </strong>you make sure they are <em>context-relevant and </em>clear for your users. Context is what helps users interpret icon-only buttons and explain the actions. For example, if you have a note taking application it’s quite clear that the main purpose of the app is to take — and view — notes. And a ‘Pen’ icon would be great in this context.</p>
<h4>Use only one FAB per screen</h4>
<p>Because FABs are so prominent/intrusive, FAB’s should be used <em>once on a page or not at all.</em></p>
<p><img alt="" src="http://ift.tt/2p9PH1J"><strong>Don’t </strong>have more than one floating action button per screen.</p>
<h4>Use FAB only for positive actions</h4>
<p>Because the FAB is characteful, it’s generally a positive action, like create, share, explore, and so on. FAB should be destructive action, like delete or archive. They shouldn’t be unspecific or alerts, limited actions like cut-and-paste the text, or actions that should be in a toolbar (e.g. changing a volume).</p>
<p><img alt="" src="http://ift.tt/2qQbUOY">The function should be an action that makes user feel positive about using FAB and never worried it’s going to do something wrong. Image credit: Material Design</p>
<h3>FAB and Animation</h3>
<p>Floating action buttons are designed to be flexible. FAB can expand, morph, and react.</p>
<h4>Expand into a set of actions</h4>
<p>In some cases, it is appropriate for the button to spin out and expose a few other options (as seen in the Evernote example below). The FAB can replace itself with a sequence of more specific actions and you can design them to be contextual to your users. But keep in mind that:</p>
<ul>
<li>These actions must be related to the primary action the FAB itself expresses and be related to each other: do not treat these revealed actions as independent as they could be if positioned on a toolbar.</li>
<li>As a general rule, have at least three options upon press but not more than six, including the original floating action button target.</li>
</ul>
<p><img alt="" src="http://ift.tt/2p9xJN7">A floating action button flinging out related actions.</p>
<h4>FAB can morph into the new surface</h4>
<p>FAB is not just a round button, it has some transformative properties that you can use to help ease your users from screen to screen. The floating action button can transform into views that are part of the app structure.</p>
<blockquote><p>FAB can improve transitions between screens</p></blockquote>
<p>When morphing the floating action button, transition between starting and ending positions in a logical way. For examle, the animation in example below maintains the user’s sense of orientation and helps the user comprehend the change that has just happened in the view’s layout, what has triggered the change and how to initiate the change again later on if needed.</p>
<p><img alt="" src="http://ift.tt/2qQ3XJh">Image credit: <a href="http://ift.tt/1pcZuNO">Ehsan Rahimi</a></p>
<h4>FAB can be hidden during scrolling</h4>
<p>FAB can be hidden when scrolling down if it gets in the way (prevents user from reading the content). In example below, the FAB <em>needs</em> to be able to move out of the way, so that all parts of all list items are actually reachable.</p>
<p><img alt="" src="http://ift.tt/2qQ5M9j">Hide FAB to maximise the viewport area dedicated to the list. Image credit: <a href="http://ift.tt/1Xo4S1T">Juliane Lehmann</a></p>
<p>Medium app for Android is a good example of using this technique. The Heart button disappears on scroll and reappears when the end of the article is reached — just when readers who liked the article would have wanted to use the button.</p>
<h3>Conclusion</h3>
<p>If you’re going to use FAB in your app, the design of the app must be carefully considered and the user’s possible actions must be boiled down to a single most prominent feature. Used correctly, FAB can be an astoundingly helpful pattern for the end-user.</p>
<p>Thank you!</p>
<p><em>Follow UX Planet: </em><a href="https://twitter.com/101babich"><em>Twitter</em></a><em> | </em><a href="http://ift.tt/1rBot0L"><em>Facebook</em></a></p>
<p><em>Originally published at </em><a href="http://babich.biz/fab/"><em>babich.biz</em></a></p>
<p><img src="http://ift.tt/2p9FUc1" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2pUDfQL">Floating Action Button in UX 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>


Floating Action Button in UX Design

Floating Action Button in UX Design

by Nick Babich

Top Stories