0

Within our iOS mobile app, we have a list of templates the user can choose from:

enter image description here

Each template has (initially) remote assets that need to be downloaded and cached before the user can go into edit-mode. If the user tapped on a template, two things could happen:

  1. If all the template assets are already cached - just go straight to the edit-mode screen.
  2. If one or more assets aren't cached - we present a modal that showing the "fetch progress". Once it's done download & cache - we go into the edit-mode screen.

The issue is that sometimes fetching the asset of the template could take 0.1/0.2 seconds. Which is far shorter than the modal presentation animation (takes around 0,5).

Here's the UI we designed for the modal:

enter image description here

My questions here:

  • Is it appropriate to dismiss the modal without animation when the fetch completed?
  • Is there a best practice for this kind of scenario, where the modal could be dismissed while it's presenting itself (during the presenting animation)?
  • Will using a modal other than a full-screen one is more appropriate?

UPDATE:

Here is the outcome of your answers. What do you think? (This showcasing a device with a fast internet connection)

enter image description here

Improve this question

2 Answers 2

Reset to default
1

There are a couple of ways of dealing with this issue.

1. Use placeholders

Personally, I find this to be the best solution. On click of the user, move to the next screen with placeholders and lazy loading implemented. As soon as an asset gets downloaded, it would replace the placeholder. That eliminates the problem of loading animation altogether. User testing has also shown that people feel like the load times are lesser when they see such placeholders instead of loading animations

2. The placebo loading animation

Through multiple user testings and reviews, it has been found that users tend to expect some sort of a delay/loading time when there is a major transition or if data on the page is getting updated. You might have heard of the "pull to refresh" action that many apps have nowadays. Most of them actually do nothing. The page has a refresh timer but the "pull to refresh" is present to give user a feeling of control and satisfaction. (Yes, it is actually there to trigger a request of data from the server in case of loss of connection or a timeout, but in many cases it is used as a placebo)

So, if your loading animation is 0.5 secs long, let it complete the animation even if there's no loading time or if the loading time is shorter.

3. Indicate which items are "ready"

It might add the burden of coding in that logic but if a certain template was opened and its assets were cached, add a border or corner notch to indicate that the template is ready to be opened.

That way, you can simply remove the loading animation for those items. And in case the cache gets cleared and the assets need to be downloaded, let the request trigger the animation.

4. Put the loading animation on the next screen

It does two things. First, it gives the user an immediate feedback for the action they performed. Second, it gives you the "page transition time buffer". Ideally, a page transition would be under half-a-second long. If the data gets downloaded in that time, no need to trigger the loading animation. And the default state of the next screen would be to carry the loader so that if the loading time is longer than the transition, the user would see the loading animation

Improve this answer
5
  • How do you know that some "pull to refresh" do nothing?
    – Tvde1
    Aug 2, 2019 at 9:31
  • I read about it in an article where a lot of sports apps add it in because the users get itchy when the game is at a critical juncture and like to refresh often as a nervous tick. I'll add the link to it if I can find it
    – Shreyas Tripathy
    Aug 2, 2019 at 10:20
  • Sorry for the delay, was flying aboard. Basically, you are correct, doing it at the same screen creates too much of a hassle. Number 4# did the tricks. And that's what we decided to too: Basically, when the user taps on a template, we already know if the templates assets need to be downloaded or not. If we find that there are missing assets, we are doing the normal "push animation", but inside the edit-canvas screen, we show the "loading modal" in the bottom, immediately, without animation. We found that that sometimes the download could finish even while the "push animation" occurring.
    – Roi Mulia
    Aug 4, 2019 at 15:58
  • So now as I see we have two options: 1. Fetch the assets and dismiss the modal screen, even if it's a little bit flashy (as sometimes it's super fast) 2. Only show the modal when the "push animation" finished. Number two creates somewhat of a "state" to the app (code-wise) where Number one creates a much more atomic logic. But might be a little flashy. What do you think?
    – Roi Mulia
    Aug 4, 2019 at 15:59
  • Please see the updated question, I've included the result with a GIF :)
    – Roi Mulia
    Aug 4, 2019 at 16:17
1

I agree with Shreyas Tripathy's answer. I would personally pick #4 for your case and then use one of other activity indication on the next screen if needed. If your usual screen transition time is less than loading time of the image the delay won't be perceivable in most cases.

Just want to add that using a modal sheet is not an appropriate mechanism here for two main reasons.

  1. The in and out transitions add to the waiting time, ultimately making it even slower.
  2. Modal presentation by its nature and purpose catches attention. In your case it adds a lot of friction to the interface where friction is not needed, and focuses user attention of the fact of loading. Besides, your particular implementation has a close button, which is confusing. Can you close it? What would it mean?
Improve this answer
3
  • Hey Davyd. Nice observations. First, I'd like you to read the comments I gave on Shreyas answer. About your other points: 1. I agree about the awaiting time. Please note that when users tapped on a template it'll just do the regular "animation push" and will add the modal without animation (in the pushed view controller), so it'll look just part of it. 2. It's not ideal but our entire app "modal-alerts" presentation is the same, and we thought it's important to keep it consistent. Moreover, for low internet speeds, we expect this screen to have a longer lifetime.What modal would you recommend?
    – Roi Mulia
    Aug 4, 2019 at 16:02
  • For the close button, it'll simply "pop" the view controller back, basically, if the user doesn't want to wait for the assets to download, it'll take him back to the templates screen. I think that X seems to be inappropriate as the user might think it'll close the modal?
    – Roi Mulia
    Aug 4, 2019 at 16:06
  • Please see the updated question, I've included the result with a GIF :)
    – Roi Mulia
    Aug 4, 2019 at 16:17

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.