The loading bar dilemma at

I watch videos while walking on a treadmill. The best to watch is The Biggest Loser, because how can anyone stop walking when those people are busting butt during last chance workout? But has a weird little usability issue that bugs me every time.

The loading bar

While the video is loading, 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 for the loading bar:

nbc loading video bar

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 wait.

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, they could have used the logo. It would be fun to watch each feather brighten as they show up on the screen; even the reflection could show this dynamic loading:

nbc showy peacock loading

If they must use a line, it should have a reference point; for instance, a nice grey line that brightens from left to right as the video loads.

It might seem a picky thing to point out but details 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.”