Tips to entertain your users while PowerApps gets their data, i.e. loading screens

Depending on where your data lives, it may take a few seconds for that data to display in the PowerApp. There is nothing that drives users more nuts than just staring at a screen as it does nothing, wondering if it’s frozen or broken. PowerApps does have that useless little loading dots thing at the top, which most people don’t see:

Pay attention at the wee top of your app, you’ll see some dots flying around

 

It’s about user perception

Your user’s perception is what defines your success, it’s what drives designers and app developers a like to make sleek, intuitive, and just plain cool apps. Waiting isn’t one of those qualifiers. NO ONE likes to wait.

User Perception Of Performance Delays
0 to 16ms	Users are exceptionally good at tracking motion, and they dislike it when animations aren’t smooth. They perceive animations as smooth so long as 60 new frames are rendered every second. That’s 16ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10ms to produce a frame.
0 to 100ms	Respond to user actions within this time window and users feel like the result is immediate. Any longer, and the connection between action and reaction is broken.
100 to 300ms	Users experience a slight perceptible delay.
300 to 1000ms	Within this window, things feel part of a natural and continuous progression of tasks. For most users on the web, loading pages or changing views represents a task.
1000ms or more	Beyond 1000 milliseconds (1 second), users lose focus on the task they are performing.
10000ms or more	Beyond 10000 milliseconds (10 seconds), users are frustrated and are likely to abandon tasks. They may or may not come back later.

The above is from Google’s RAIL model

The above is Google’s point of view of user’s perception of waiting in an app. I find it really fascinating and accurate, think about your own interactions with apps, if you can think “what is taking this so lo…” then it loads, you’ve waited too long.

I’ve come to find that waiting on data to load in PowerApps can sometimes live in the 1000ms to 10000ms window, 1 second to 10 seconds! During this time, your users are losing focus, and want to leave.

Your users can’t leave the app since it’s required for their job, but why frustrate them? We have to do what we can to improve their experience, to not add to their stress.

We want to tell the user that something is happening, as fast as we can, so they can wait, and maybe even be okay with waiting as long as they know. Don’t you like to know what an app is doing, even if it takes 2 seconds to do it?

Create a loading message in PowerApps

In my app (in this example, my app is for users to pledge to be more environmentally aware of their day to day), on the initial home screen load, I query Azure SQL to get the user’s information, their questions and pledge information. This can take several seconds to run. Instead of just letting PowerApps take it sweet time, I present the user with a basic screen asking them to wait:

At least the user knows something is going on.

How to get it done

In this app I’m using the OnVisible property of the Home Screen, in which my first lines of code are:

Set(AppLoaded,false)

then at the bottom of the same OnVisible property, I set it to true:

Set(AppLoaded,true)

This is located at the end, after all of the database calls and business logic that needed to run completes. From here, we want to set the visibility of our controls based on this variable AppLoaded. So in my example:

• The label stating “Give us just a moment…” Visible property is set to !AppLoaded. When AppLoaded is false, it will display this object.
• Then the two buttons that appear, “Log Today” and “View My Activity”, Visible properties are set to AppLoaded. Those will only appear when AppLoaded is true.

Easy enough right? Very simple. You could replace my text label with an animated gif and have something a little more visually stunning.

Create a dynamic status message

Let’s take it a step further. In this same app, the user can optionally reload the app’s data, which is basically like reopening the app. On the Reload screen, there’s a button, and they press that to refresh all of the data connections. Here I give the user a status as it makes it connections and refreshes each data source.

In this example, as you can see, the user sees more going on, feels better that nothing might be stuck.

How to get it done

First, using OnVisible of the screen, I set the message variable as follows, so they have some heads up as to what’s going to happen.

Set(RefreshActivity,"You will be sent back to the home screen when complete.")

There is a label right below the button and the Text property is set to RefreshActivity.

Then, on the button’s OnSelect property, I have this block of code:

Set(RefreshActivity, "Refreshing User.")
;Refresh('[dbo].[Users]')
;Set(CurrentUser,First(Filter('[dbo].[Users]',Email = User().Email)))

;Set(RefreshActivity, "Refreshing Questions.")
;Refresh('[dbo].[Questions]')
;ClearCollect(QuestionGroups,GroupBy('[dbo].[Questions]',"Group","ID"))

;Set(RefreshActivity, "Refreshing Pledge.")
;Refresh('[dbo].[Pledge]')
;Refresh('[dbo].[UserPledges]')
;ClearCollect(Pledge,Filter('[dbo].[UserPledges]',UserID = CurrentUser.ID))
;Set(TotalPledgeQs, CountRows(Pledge))

;Set(RefreshActivity, "Refreshing Activity.")
;Refresh('[dbo].[DailyActivity]')

;Set(RefreshActivity, "Done!")
;Navigate(HomeScreen,ScreenTransition.UnCover)

Don’t worry about every line, look for the Set(RefreshAcitivty lines, that’s the good stuff. Each line sets a new value for the RefreshActivity variable, which the label object displays, and as we step through each grouping of data, the message gets changed and the user is happy(ier).

After all that waiting, I then send them home, no need to keep them on the screen, no need to have the user press something else to leave the screen.

Not just status messages

I’ve done this before in other web apps I’ve written. Instead of just showing “loading” messages, give your user something to make them think, it’ll help time fly:

• Provide an inspiration quote
• List your company’s values or mission statement
• Grab a list of funny quotes about waiting and having patience and loop through those, people tend to anticipate seeing what the next one is
• Grab a curated list of GIFs from giphy and wow them
• Etc…

Whatever you do, keep it natively in the app, don’t rely on getting this data from another data source, as you’ll have to load it and then make them wait, again…

That’s it for now!

Until next time, happy PowerApp’in!