It’s all about Feedback

Feedback is important. Whether in the context of personal relationships, professional careers, or user interface design, it’s important for people to know how they’re doing and what’s going on in some one else’s head (or on some server). In fact, I can think of very few situations where more feedback would be a bad thing. But two pop immediately to mind:

1. Complex surgical techniques – I’d rather be knocked out and spared the detail of every artery being clipped or slice being made
2. Piloting an aircraft – It should be placating, but it always just annoys me more when the pilot tells me what the “folks in the tower” tell him.

But in the world of streaming video, feedback is definitely a good thing. There’s nothing worse than catching only every other choppy word of your favorite Fall Out Boy music video, or having your screen freeze up on you as some ancient truth is to be revealed on the season finale of Lost. Streaming video services have adopted differing mechanisms to inform the user about status information which affects the video watching experience. I’ll look at three of them (Hulu, Netflix and YouTube) here, and discuss which features are helpful, which are frustrating, and which make me wish that i’d stop being such a cheapskate and just get cable and hook up my damned television already so I don’t have to watch all my tv through the web

Hulu

The Hulu video streaming user interface is nice and simple. It’s got a play/pause button. The time elapsed and total time of the video are shown, and the current location in the video is handled visually by a lightly shaded bar filling up the timeline. Mousing over the timeline will show you what the timecode of that location is, and a click will then skip to that timecode (this is how seeking is handled, no fast forward or rewind buttons). Note the three white dots – they represent commercials – which are mandatory to watch. So, if I try to be sneaky and skip past one of the dots, then before starting playback at my requested location, it will stream any commercials I’ve skipped over.

This screenshot shows what the interface looks like while the video is playing:

Note that the timeline doesn’t actually give any indication of how much video has been stored up in memory; the only information you see is where the video is currently playing. When your network connection slows or you otherwise run out of buffered video, the video just starts choking, pausing and playing as more bandwidth becomes available, without giving any visual indicator to the user as to what’s going on and how to solve it. You could always pause the video:

This screenshot shows what the video looks like in the paused state. Notice the icon that shows up on screenwhich indicates how much video has been buffered. In theory, this is a great feature, but in practice it ends up being very useful as the qualititative display gives no actual information as to the worth of each of those bars. Is each bar worth a a couple of seconds of video? A minute? When will it be ’safe’ to play? What does it mean when the buffer is full? The user interface does not provide the answer to any of these questions. Also, I kind of cringe at the use of the term Buffer, as it’s kind of a techy term.  Users aren’t idiots and I’m sure everyone knows what a buffer actually is, but it just seems like the kind of word that should appear in the code, not in the UI.

YouTube

Most people are probably pretty familiar with the YouTube interface (whether they’re conscious of it or not) so I won’t go into much detail about the user interface, other than to say that it’s actually quite similar to Hulu’s:

Play/pause button, click to seek.  The one feature in which the YouTube interface excels is that, unlike Hulu, it seems to buffer video by default, and not only when you have it paused. Also, this information is displayed clearly and unambiguously to the user in the form of a ghosted bar filling up the timeline as video is downloaded and buffered.

Note that this buffering-ahead happens both while the video is playing (above), and also while it is paused:

This affords a really nice use case of just putting the player on pause when your internet connection slows and waiting until the red bar has filled in substantially before resuming playback.

The one thing that’s really nifty about this visualization is that it it overlays three important pieces of information -how long the video is, where I currently am in the video, and how much future video has been downloaded – into one place and references them all in the same terms. Contrast this with Hulu’s representation of a buffer occupying a completel seperate and logically dislocated part of the screen from the timeline of the video progress.

Now – Hulu may actually be buffering video ahead while it is playing, but because it doesn’t give me any indicator of this (and seems to freeze up a lot more often than YouTube ), I have no reason to believe that it is looking out for me like YouTube does.

Similar to Hulu, but without the commercial interruptions, you can click anywhere in the timeline to seek and start playing from that point. If the video for that part has not yet been downloaded, it will start buffering from there:

Finally, one last feature that is small but nice, and missing from Hulu, is the little icon that appears on the video to represent “I’ve run out of buffered video to play for you, but I’m working on it!” As a user, this shows me that the system realizes what has happened here, and is working hard to remedy the situation. In Hulu, when you run out of [invisible] buffered video, the playback just chokes. No courtesy indicator, nothing. Just Jack Donaghy frozen in midsentence, about to say something incredibly funny which will undoubtedly end up humiliating Liz Lemon in some subtle yet effective way.

Netflix

Of the three services I’ve covered in this post, Netflix is the only one that is paid, and I think that the robustness and intelligence of their video player reflects this premium.

First of, it does a series of checks  before even starting playback to determine, among other things, at what quality to play your video:

I have no idea what it’s doing or how it’s working, but it’s using language I can understand (i.e. no talk of buffers and whatnot) and I get the overwhelming sense that this Netflix player knows what its doing and is going through a lot of trouble to ensure a good playback experience for me.

But it gets even better! Because it’s checked my internet connection, it can predict how much it must pre-buffer so that my video playback doesn’t run out and get choked up. And it communicates this to me in clear terms, and even tells me how long I’ll have to wait until everything is sorted out:

I really like the fact that Netflix quanitifies this wait time for me. I can decide now whether I want to go make some popcorn, check the news, or use the bathroom!

The only complaint that I really have with the Netflix client is around this initial check. If it deems that you have a slow connection then it decides that it will give you a low quality feed, and there is no feedback as to what quality this feed is or a choice to bump up to a higher-quality feed – say, after you close down network-hogging applications or shut off other computers which may be using some bandwidth. While I appreciate the fact that the player makes a lot of complex decisions on my behalf, it’s also rather annoying to be locked into a low-quality (almost un-watchable) feed when I’d much rather be given the choice to wait for a higher-quality feed to start buffering up.

The real forte of the Netflix video playback client is its ability to make bandwidth calculations (on the backend) and the thoughtfulness with which it keeps the user informed (on the front end) of what’s gone wrong and how long he or she will have to wait until it’s righted. There’s lots of examples within the Netflix player of these kinds of super-informative messages which provide multiple modes of representation of it’s current state:

If your bandwidth drops suddenly and throws off Netflix’s initial calculation of how much video needs to be pre-buffered to ensure a seamless watching experience, the above dialog is displayed. This shows the amount buffered both as a visual representation and as a percentage done, and also shows the estimated start time as a numerical value (time) which actually has some worth in human terms!

And like YouTube, Netflix will buffer ahead when the video is paused, though the representation is somewhat subtle:

Theoretically, if they did their calculations properly in the first part , then this extra buffering is somewhat superfluous, but it comes for free and is a good feature to have in case of unexpected bandwidth fluctuations.

Conclusion

Of the three playback interfaces, I think that Netflix is by far the most informative, the most flexible, and handles best in a variety of network conditions. I guess you get what you pay for . 

Here are the features that make a video streaming user interface great:

Buffer ahead - the system should always be trying to buffer more video, whether the video is currently playing or in a paused state. The paused buffer-ahead feature makes it easy for the user to adjust to poor network conditions.

Make state visible - if the system is buffering ahead, make sure that this is visible to the user. The buffering information should use the same visual representation as the timeline.  Also, it is important for the system to indicate when it is working so the user doesn’t feel left in the dust when the video freezes up. This translates to a kind of empathy for the user and tells them ”i know things are f-ed up right now, user, and i’m trying to fix it”.

Show actionable information  - it is important that the information displayed to the user is understandable and actionable. e.g. the system could display the amount of time left in the buffer as a shade of color from blue to green but this is meaningless to the user. When this information is put into minutes and seconds, the user can decide whether there’s enough time to get a snack, leave the room, etc.

Use relevant terms – use words and phrases a user will understand, and state any information in a manner that is relative to video-watching. The benefits of using relevant terms goes beyond just understandability; it can actually create a sense that the system is looking out for and taking care of the user throughout the experience.

Related posts:

1. Netflix Streaming Hack – Force a Bit Rate
2. Weezer Video – “Pork and Beans”

This entry was posted on Monday, January 12th, 2009 at 12:39 am and is filed under Multimedia, usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.