1

I am facing a strange "catch-22" like problem, while developing an application for a mobile browser. My problem is that, some inner-app screens are fetching data from a back-end server, and the speed to fetch this data is very-very unreliable.

By this, I mean, that most of the time, the data is received almost in an instance, in which case my app would not require a loading animation, yet sometimes, the receiving of the data could take up to a second, or even 2 seconds, in which case I need to give a feedback to the client, that his click was registered.

At first, I was thinking about creating an animation, where after a user interaction, the screen gets blurred (with a very short animation, 0.2s), and when data is received, and the layout is rendered and replaced, I unblur the screen. This works great, when the blur-unblur animation has enough time to finish. But when my data is received near instantly (which is most of the time), this looks like a flash, which is very disturbing and it looks very unprofessional.

What is the correct approach to a simmilar problem? Should I look for a different kind of loading animation/indication? If yes, what would be an appropiate one for this situation?

6
  • 2
    Do something less obtrusive, such as using the loading cursor. Could even use a timeout to trigger it only if data is not received after .4 seconds or whenever testing shows users think nothing is happening. Feb 11, 2022 at 4:01
  • @LukeSawczak there is no cursor, this will be an app that will be consumed on mobile devices. Feb 11, 2022 at 6:34
  • Ah, fair. That explains the whole screen choice as well :) Feb 11, 2022 at 11:27
  • Probably not an exact duplicate but highly related ux.stackexchange.com/questions/92092/… Feb 11, 2022 at 11:44
  • @locationunknown yes, it is indeed highly related, yet there is no real answer on that question either regarding the question, on what is the best practice to approach a catch-22 situation like this - if I would know up front how much time would the loading take, I could make an informed decision about showing the loader or not, but because the loading occurs because of a communication with the back-end server, there is no way I will know up-front how soon the server will reply:( Feb 11, 2022 at 21:16

2 Answers 2

1

It would help if you shared some of the UI. but from what i gather from your question, I think you can use skeleton loaders instead of the blurring approach. this way it maintains the structure of the UI elements while showing the user that there is some loading taking place across multiple UI elements.

https://betterprogramming.pub/the-what-why-and-how-of-using-a-skeleton-loading-screen-e68809d7f702

1
  • 1
    Skeleton loaders was one thing that was considered, but for one, I don't like those personally, and also they would be rather hard to implement with our current layout. I will try to update my question, with some screenshots directly from the app. Feb 11, 2022 at 21:15
0
  1. I need to give a feedback to the client, that his click was registered.

    You can focus on that problem instead (e.g. animate the button tap).

  2. I agree with some of the comments that you should just use something less obtrusive (e.g. a small throbber on the previous screen while the new one is loading). At least that way it will be less jarring if it needs to appear and disappear quickly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.