Check out a free preview of the full Design for Developers course

The "Loaders" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Sarah highlights the importance of using loaders on a page and it's percieved affect on loading times.

Preview
Close

Transcript from the "Loaders" Lesson

[00:00:02]
>> Sarah Drasner: Some of the things, when we're starting, we're gonna talk about prototyping. But we're also gonna talk about motion in general and why you might use motion. Because when we're prototyping and when we're adding motion to our site, it's kinda like, why would you do that, why not just deliver a static mock?

[00:00:19]
Loaders and perceived performance, and the reason why we might use motion is that humans overestimate passive wait times by 36%. So if you are judging the amount of time on your site that it takes to load, you actually have to multiply that by 0.36. Because people are actually thinking that it would takes longer, because they don't have anything to do.

[00:00:41]
But notice that, that word or that phrase has the term passive in it. So if they have nothing to do in that time, they'll overestimate that time. But not if they'll occupied. So by adding something like a loader or something that they're engaged with, people feel like the performance of the site that they're visiting is better than it is.

[00:01:04]
So, perceived wait times, Viget did a study where they showed all of these different loaders to people. People are willing to wait twice as long on a site for a custom loader, than they are for one of the ones that it's just a GIF that goes around. And part of the reason that they think that this is true, is that they assume that somebody cares about them.

[00:01:25]
That they assume someone cares about them enough to have something for them at the end. So if you give someone just a standard GIF, they'll bounce after 12 seconds. But if you even stylize that loader a little bit, people will wait twice as long, they will wait until 24 seconds before they will leave your site.

[00:01:43]
Uncertain wait times feel longer than known, finite waits. So these are actually kind of two different ideas. Uncertain wait times are longer than known, finite waits. That's why people tell you how long it'll take for a line, in some lines. Like, sometimes you go to Disney World, and it'll be like an hour long from here, or a half an hour long from here, so that it doesn't feel longer.

[00:02:12]
Other things that they do is show you entertainment while you're waiting. They have all of these cool little gadgets moving around. And so you're like, the Star Wars wait isn't so long, except it's way longer than some of the rides, but people were engaged the entire time. Airports will also make you walk around a really long way before you get to baggage claim, and then when you show up to baggage claim you're like, my bag is here.

[00:02:37]
Really, they made you walk around. You probably could've gotten to baggage claim really quickly but felt like you were waiting for a long time. If you're walking around, you're kind of busy and entertained, not really, but it feels like that. So if you're walking and your bag shows up, you're like, what an efficient airport.

[00:02:56]
[LAUGH] Anxiety makes wait seem longer, doctors know that, that's why bring you in from the waiting room to wait in their room. You know how they bring you in and then you're like, they're not ready to see me, I'm just sitting here. They do that intentionally because they know you're probably pretty anxious to seem them anyway, it's not that great.

[00:03:16]
So they make you feel like you've already started the doctor journey by joining them inside the doctor room.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now