55

The product I'm currently working on is using a branded preloading icon with the company logo while different views and grids are being loaded. It seems to me that this is an unnecessary risk of associating our brand with waiting and slowness.

Of course, the opposite is also true, so in the case of fast loading, it would associate the company brand with quick responses and agility, but I still feel the risk of the former is not worth it.

What are the rational justifications or criticisms of using a design pattern like this?

  • 4
    Edited to make the question more objective. Questions should seek concrete answers rather than solicit opinion(s). – dennislees Sep 20 '17 at 14:30
  • 1
    great edit @dennislees. – Fontanka16 Sep 21 '17 at 7:24
  • 1
    I originally read this as the splash page when loading the application. Instead, do you mean a throbber while doing a load of data during program execution? – Baldrickk Sep 22 '17 at 11:24
  • 2
    A company logo flashing up for 300ms will look like a glitch. Why not have a bona-fide progress bar which shows progress doing whatever it is that you're doing? Especially important if on mobile, where packet loss is a common thing and you are often left dangling for a minute or longer. – Harper - Reinstate Monica Sep 22 '17 at 18:51
  • 3
    'in the case of fast loading, it would associate the company brand with quick responses and agility' - usual critique of poor writing: "show, don't tell". If a knight is a good fighter, don't have a description telling the reader they are a good fighter, instead show it - have them fight a difficult fight and win, we'll get the message and it won't be boring and preachy. Similarly, don't tell me your product is quick and agile, just be quick. I'll get the message. But then, this is opinion - 'branded preloader' makes me think 'Adobe splash screen' and I'm mentally groaning. Don't be Adobe. – TessellatingHeckler Sep 22 '17 at 23:26
103

Not directly answering your question, but the trend I'm seeing seems to suggest that people are doing away with preloaders in favour of skeleton UI and progressive loading because of perceived performance, so I'm not even sure if using a preloader or a loading screen is even a modern design pattern anymore.

Here's how a skeleton UI pattern looks like:

enter image description here

On the other hand, before implementing the skeleton UI and progressive loading that you can see now, Facebook decided to remove their branded loading indicator, because they found users were more likely to blame Facebook for being slow, but if they used iOS default spinner, people tended to blame their phone, which is definitely a very interesting observation.

  • So to summarize your observations, the pros seem to be your user is informed of progress, but the cons is that they blame you for the slowness. Using a non-branded preloader has the pros of passing the buck to someone else (or leaving it ambiguous) and the cons of having a less informed and potentially impatient user. – corsiKa Sep 20 '17 at 16:53
  • 17
    I recommend adding one or two screenshots from the linked articles as visual examples of what a skeleton UI should look like. – Stevoisiak Sep 20 '17 at 19:35
  • 3
    You don't want to sit there with a blank screen until everything is loaded and you're ready to render. The "stick a blank space there" idea is the right one. #2 on the "maddening" list is when the screen jumps downward because an ad loaded, and for some reason the page couldn't know the size of the ad until it loaded. – Harper - Reinstate Monica Sep 22 '17 at 19:18
  • 1
    Added FB Skeleton UI screenshot for easier reference. – Mariusz Ciesla Sep 25 '17 at 14:05
10

In my experience, users see a pre-loader as an indication of slowness. Simply removing the pre-loaders from one project reduced the number of performance complaints. Branded ones would be even worse, associating your brand with waiting and slowness.

I'd recommend not using a pre-loader at all. Optimize your code so the essential elements load quickly, to buy you some time with the users while the rest of the UI loads. If you're stuck on using a pre-loader, use the common ones for the platforms you're targeting.

3

You are answering you own question. If the loading is fast enough, the user is not even going to see the loader.

What is fast enough?

0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.

1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.

10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

https://www.nngroup.com/articles/response-times-3-important-limits/

Maybe use placeholders like Facebook does

https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

  • 1
    I've seen this before, and as commented before, all three numbers are nearly an order of magnitude too high. They should be something like 0.02, 0.1, and 1 second. – R.. Sep 20 '17 at 17:01
  • 2
    @R.. that's odd, because if users flow of thought is interrupted after 0.1 seconds... that would mean they also are interrupted fully after every blink, since the blink of an eye is 3-4x that long. – Delioth Sep 20 '17 at 20:27
  • 1
    @Delioth: I don't see how that follows; the brain has obviously developed to filter blinking largely from its perception. If I'm scrolling a window and it stutters for several refresh periods, it no longer feels like my scrolling action is "directly moving the viewport according to my finger/mouse/whatever motion" but rather like a disconnected/delayed reaction of the software. – R.. Sep 21 '17 at 3:08
  • 1
    @R - do you have studies and context to back up your numbers? Because you're saying that anything > 0.02 doesn't feel instantaneous, and that doesn't really match my experience. I might believe that the 1 second is too high, for the 'uninterrupted thought' number, but again I'd like some data on that. You may be right, but your numbers imply that if people have to wait 1 second, they completely detach and want to switch tasks. That's an assertion that I'd like to see some data to back up. – Michael Kohne Sep 21 '17 at 11:30
  • 6
    @supercat - video frame rate stuff says little about how response times feel. Response times are 'I did something, where's the answer', not 'is this motion continuous'. They are vastly different things. – Michael Kohne Sep 22 '17 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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