The Power of LowCode is its gentle learning curve but powerful scope (Easy to learn, difficult to master). But a lot of the support documentation rightly focuses on technical knowledge, empower the developer to deliver ever more complex and powerful apps. So we often miss guidance on our design decisions, as Power Apps should not only be technically strong, but designed in a way that the user can easily use it to its full potential.
There are a few key design decisions every developer should make, each with benefits
- Device Type
- User Experience
- User Interface Navigation
- User Interface Layout
- Inform the USer
- Performance
- Feedack
1. Device Type
This is quite an obvious one, but a key decision to make before development, as changing from Mobile to Tablet or vice versa is not simple in Power Apps.
A mobile app will have very different design decisions then a tablet/web app, some of the poorest user interactions are when they are using the app on the device it was not planned for.
There is responsive designs now available in Power Apps, and they should be one of your options but be aware:
- It's not as fully functional as it should be
- Can cause compromises in your design
- It adds layers of complexity and development time
2. User Experience
Often missed, user experience is a focus on how the app is used. A good example would be comparing a warehouse stock app and a absence tracker:
Warehouse App
Used at pace, in often cold/industrial settings. Scalable workforce
Requirements:
- Simple to use
- Minimal screens/ navigation
- Minimum Text
- Large buttons
- Clear contrasting colours
Absence Tracker
Used in office, checks and validation required, consistent teams
Requirements
- Feature rich covering all fringe cases
- Detailed guides/description
- Validations and warnings
- Strong colour theme
As you can see, the user experience has a massive impact, an app that can look basic and old fashioned may be the exact solution someone needs.
3. User Interface Navigation
What is the 3-click rule? In a nutshell, it says that if users can’t find what they’re looking for after three clicks, they’re likely to become frustrated and leave the site.
The 3 click rule has been shown to be a misconception, as in it is more directed to the need rather then clicks (ie if the user really wants something they will click more).
But there are still some key rules with interface navigation:
- Less clicks is still best
- More clicks only if result is worth it
With that in mind I recommend one of two design templates (as always these templates cover the majority, there will always be exceptions)
- Single Screen App
- Multi Screen (Max 2 Clicks)
Single Screen App
Single screen apps have the benefit of not just simplicity, but having everything needed visible to the user. The developer can layer on multiple pages of data, not visible until needed, allowing multiple combinations of data specific to the users need.
The development can be both easier and more complex, but the general rule is:
Easier to maintain/update, harder to debug.
Multi screen apps have benefit of compartmentalizing areas of the app, so they are best suited for apps which have multiple functions/modules/actions (e.g An app with a user role 1 screen, user role 2 screen, admin screen, etc). Second clicks should be reserved for fringe / important cases, like guides, escalation and/or settings.
Development is simpler at the granular level, but more difficult at the app level. Due to the modularity debugging is easier, but updating requires duplication.
4. User Interface Layout
Before starting you should you decide on your interface layout (this is why I recommend a basic wireframe design before development starts, I love whimsical.com for its speed).
A good user interface will have consistent layout across screens, this is includes:
- Icon/position
- Component flow (left to right, up down)
- Component type (e.g consistency with using dropdown or combobox)
- Colours (active, inactive, deactivated)
- Fonts & sizing
The tab index is a key parameter you should be using, as keyboard users will want the ui to flow correctly with tab presses.
Interface Layout is very much a:
The Whole is Greater than the Sum of its Parts
As on there own they are all very small and marginal, but together they make a big impact (often without the user identifying or understanding why)
5. Inform the User
This is another obvious one, but is often missed. Keep your user up to date with what's going on. Most people are willing to wait if they know why.
- Show progress messages if an api call is happening
- Spinners/ loaders to show things are happening (https://loading.io/ is a great source)
- Show progress in app (e.g Section 1 of 4)
- Clear human friendly error messages
- If an action is required explain why (hint text or expanding label)
6. Performance
All LowCode platforms, including Power Platform, out of the box often sacrifice performance for simplicity. So we need to ensure we design our apps in the most efficient way.
The checker is our friend here, as it will highlight if we are loading to many components and/or not using variables.
Few things to help performance are:
- Re-usability - e.g one popup with changing label.
- Right component - 1 multi pick combo box instead of multiple drop downs
- Load data in background
- Load only required data (delegated filtering and showColumns for only needed fields)
- Load data once and cache in collection
- Use of different screens to split functions
7. Feedback
Feedback is gold, your users should have a process to send feedback. A simple SharePoint form is ideal for this and can be added with minimum effort.
A couple of other features that when are applicable often drive user satisfaction are
- Undo option
- Validation before submit
- Bulk edits
- Interactive guides (that can be skipped & turned off)
Having a user friendly UI is key to successful engagement in an app, additionally it decrease bugs and saves time on creating/maintaining guides.
But creating good UI isn't as easy as it often looks, it's a difficult skill and requires planning and continued focus during development.
Top comments (0)