A topic that I find particularly interesting with developing low code software on the Power Platform, is the thought we put into our end users experience of interacting with our solutions. A very key element to the scale at which users confidently and willingly adopt our application with high usage, is the user experience (UX) we provide them with, which further comes down to a number of elements I’m going to discuss in this blog post! I’ll also give you a few generalised tips for each element which can affect the User Experience our solutions provide.
#1 – User Interface (UI)
The very first thing our users are faced with, whether it be visual based or not, is the User Interface of our application. On a more visual approach, for those without visual impairments, our GUI is something that will instantly give users an opinion on our application. In my experience, if it doesn’t look good… generally, users won’t want to adopt it as much as if it does look good! When it comes to other methods of interacting with our application such as using a screen reader for those with visual impairments, if the app does not support this completely, this doesn’t provide users with a visual impairment with a good enough interface to use the app with.
Tips to improving UI…
One of the main things I like to do when thinking about UI in my apps is to take inspiration from any other app you see online. This doesn’t mean searching for other designed Power Apps apps, but in fact just searching for UI designs in general. Whilst Power Apps is a low code platform, we can still achieve pretty awesome things with it similar to if we were doing pro-code development.
One of the major key tips I’ve taken my friend Kristine Kolodziejski, is to take advantage of the HTML Control! Using this control lets you get loads more browser supported fonts into your apps, as well as taking advantage of things such as box shadows and more! Just by using the following snippet of code, I was able to add this section into a blank canvas app to start to divide up my screen.
"<div stylebackground-color:#27334A; color:#27334A;height:300px; width:auto; border-bottom-right-radius:120px;""></div>"
Another thing I keep in mind when developing my apps is the way I communicate things to users through the app interface. This may include things like displaying an in-app notification when a process is complete. Of for example, when working with apps with offline capabilities, notifying users when the app has found a connection and when it has become disconnected from the network.
Finally, one of my key tips when it comes to UI is to think about making your apps responsive using containers! Containers are super easy to get to grips with and allow you to develop low code responsive apps that users can use across multiple devices with different screen sizes and aspect ratios!
#2 – Performance
Another major factor that can affect User Experience in our apps is how they perform. And it really is as simple as, if they’re slow, users are going to have a damaged experience when using our app. And depending on how well we’ve implemented our User Interface with things like communication to users when things are loading, users might not even know an app is performing badly, and might just give up with using it because they think it’s broken!
By providing users with a slow app that doesn’t perform well, they’re going to be less likely to want to adopt it due to having a bad UX here.
Tips to improving performance…
A first tip I have in improving performance in Power Apps, or perhaps more of a tip to not severly damaging performance in your apps is to greatly limit the amount of LookUps you do in an app. For example, if you’re have a control in a gallery which has a property using the LookUp function, you might find that as the dataset and amount of records that appear in that gallery grows, the app severly starts to slow down! Say for example we wanted to get the preview of a related document via a record in a gallery, and our gallery can show up to 1000 records. This means we’ll be doing 1000 lookups to show all of those previews! We’re highly likely to start to see some API call timeouts there, and our app’s performance will suffer dramatically. So… tip #1 is to reduce the amount of LookUps you do!
Reducing the number of controls in your app is a second key thing to improving performance. Apps with high numbers of controls will run slowly as our app will demand more memory when each screen with high numbers of controls loads. By keeping our number of controls minimal, we won’t see performance issues because of this.
A final tip I recently learnt from Matthew Devaney in one of his posts part of his wider series of Power Apps Canvas Coding Standards is to collect and patch data concurrently as opposed to doing this sequentially. Learn more about this in his post here.
#3 – Accessibility
A key part of improving but more importantly, not damaging, user experience in our applications is to take an inclusive approach to design and development and embed accessible design into our day-to-day development practices. By not doing this, we run the risk of excluding a group of people who might end up with access to our app, who suddenly aren’t able to use it, because it can’t be understood by a screen reader properly for example, or doesn’t comply with WCAG colour contrasting guidelines.
Tips to making our apps more accessible…
Naming screens using plain english descriptions and spacing so screen readers can understand and read the name of the screen. E.g. “Home Screen” is how we should name a screen rather than something like “srn_Home”.
A second tip to making our apps more accessible is to limit the amount of moving elements and pop ups we use. By including moving elements such as fly out navigations, and pop ups, this damages user experience for people that rely on screen readers, because screen readers won’t pick up these elements straight away, they will need to re-read the entire screen for these to be picked up.
Finally, a key tip to improving accessiblity in our apps is to comply with WCAG for colour contrasting. For people that have issues with low vision, colour blindness, or for people who are of older age, they can struggle to distiguish objects and text that don’t have sufficient colour contrast. By not complying with these guidelines, we damage user experience for these groups. You can check your contrasts by using colour contrast checkers such as this one – Web Accessibility Color Contrast Checker – Meet WCAG Conformance (accessibleweb.com).