According to the Endowed Progress Effect (which is a phenomenon integrated into designing any UX process based on how the human brain makes decisions) we’re more likely to complete an action if there’s an illusion of progress and an effective visual aid of contextual information for landing pages. The best examples I can think of are –
- Multi-step forms that break up a long intimidating form into smaller sections and provides the user a sense of accomplishment as they proceed from step to step.
- Breadcrumb navigation to improve findability for users especially in apps with a lot of screens.
How do we incorporate those fancy, stylish and yet functional multi-step form indicators seen on websites in PowerApps using the OOB controls without custom scripts?
This is a two part series post with the first being multi-step form indicators in PowerApps and the second part of the series will walk through creating breadcrumb navigation from scratch.
In the first part of this series we walked through creating multi-step form indicators in PowerApps. This post will help build a simple secondary navigation scheme using breadcrumbs to indicate the location of a user within the app’s hierarchy. They come in handy when apps have several nested screens and an effective visual aid is needed from a user’s perspective for contextual information around primary app screens.
Brian Dang has a terrific video on a fully functional back button system that breadcrumbs your way back based on your clicks. It’s multi-functional and can also be used for building an undo system. This post is an inspiration from his work. Thanks to Mr. Dang for the useful design pattern!
Below is the sample breadcrumb navigation we’ll be creating. I also uploaded a sample PowerApp to the PowerApps Community Gallery with the below breadcrumb design pattern and multi-step form indicator templates. Feel to free to reuse and/or provide feedback. I’d love to know if it helped enhance your PowerApps user experience.