To keep me on the treadmill, I watch videos. The best to watch is The Biggest Loser, because how can anyone stop walking when those people are busting butt during last chance workout? Normally I use hulu.com, but recently went to nbc.com to watch instead. And boy does that site have usability issues. This is one of them.
The loading bar
While the video is loading up, the screen has a dramatic black background, the proud peacock logo, a trendy reflection, and a loading bar. NBC chose an understated thin white line:
Loading bars are great. They let you know something is happening even though you can’t see it yet. They keep you from clicking away. But the most important thing a loading bar can and should do is give an idea of how long you’ll have to wait for the video.
A good loading bar gives context, so you can see when it’s halfway done! three quarters! any millisecond now! And context is what’s missing from the NBC loading bar: it’s centered, so it expands both left and right. Does it go to the edges of the feathers in the logo? To the edge of the page? Who knows?
The funny thing is, NBC missed a great way to show progress: use the logo. Each feather brightens as they show up on the screen; even the reflection shows this dynamic loading:
So, I suggest NBC use the animation of the peacock logo as a replacement for the loading bar. If they must keep the line, it should at least have a reference point; for instance, a nice grey line that brightens from left to right as the video loads.
Why should this matter?
It might seem a picky thing to point out and write a post on, and it is. But these details are important, they are the heart of usability. In Steve Krug’s book “Don’t Make Me Think,” he points out that the designer’s job is to remove question marks from a visitors experience. “Using a site that doesn’t make us think about unimportant things feels effortless, whereas puzzling over things that don’t matter to us tends to sap our energy and enthusiasm—and time.”
For this loading bar and other usability issues, I avoid nbc.com if I have other choices. And I’m probably not the only one. But I can keep these little details from my own experience in mind when designing new sites.