Leveraging buttons for navigation & interaction
1. Leveraging buttons for navigation & interaction
2. DEMO video
In this video we’ll experiment with Sigma button elements to understand many different ways they can support positive user experiences in apps. Our loan approvals app now has a nice popover on the main page where users can fill out page controls in one place. Its working well, but users have occasionally complained that there isn’t a way to clear out all the filter selections at once to start over. They have to clear the filters manually, one by one. Let’s use a button element to solve this problem In the UI section on the Add Element bar we find the button element. By default, a button added to a workbook page doesn’t do anything except perhaps display some text. But when we combine actions with buttons, we have many options for improving user experience. I’ll drag a button element into the popover page we configured in the last video. It will eventually be configured to clear out any filter selections the user has made, so I’ll change its Text to ‘Clear Filters’ In the button’s actions panel, we’ll set up an action sequence with an ‘On click’ trigger, and an effect that will clear the control values for everything in the popover. Conveniently, the clear control value action has the option to clear not only single controls at a time, but also an entire page, modal or popover. We can now test the button functionality by configuring several of the controls in the popover, then clicking the button to confirm that their values clear. Another common use case for buttons is as a navigational aid. If you have many pages in your app, or long pages that require scrolling up and down, consider adding buttons with navigation actions to bring users ‘Back to the Top’ or ‘Back to the Main page’. Success alerts on action sequences If you have an action sequence tied to a button that is not immediately obvious to the end user, consider adding what’s called a ‘success alert’ to the action sequence. Success alerts display a small popup at the bottom of the screen when the action sequence finishes successfully, and you can customize what they say. In this example, we might add a success alert to our clear filters button indicating that ‘all data is now unfiltered’. Success alerts operate on entire action sequences, so if one or more steps in the sequence fails, the success alert will show a failed message instead of success. Success alerts can be applied to any type of action sequence, but are especially useful with buttons as they give immediate feedback to end users about what happened when the button was clicked.3. Let's practice!
Now you can try an exercise with buttons and action sequences. In the next exercise you’ll practice adding a similar button to clear selections in your app’s popover.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.