Posts in Category "Video Compression"

UX Case Study: ESPN3 (Part 1)– “Just” The Next ESPN TV Channel

ESPN, “The Worldwide Leader in Sports,” is rightly recognized as the most ubiquitous TV sports network in existence (although I do wish they’d reach back in time and bring Howard Cosell back).

In my road warrior days, there was a 90% chance that no matter what hotel room I found myself in, on any given day, on any continent in the world, there would be at least 1 ESPN channel on the TV. So, it’s a watershed event of sorts — the recent rebrand/relaunch of the ESPN “web video portal” to ESPN3. The branding implication, to the global audience, is this is the next ESPN channel, just like the ESPN and ESPN2 channels you know and love on your TV set. You can expect it to be just as good.

At this point in history, it’s still a bold move for a franchise as grand as ESPN to stake the brand on the notion that the “web video” experience is going to give you a user experience that measures up to what you get on your TV set.

Let’s take a look at what happens when you point your browser at http://espn3.com.

SITE ACCESS

Well, depending on who your ISP is, something may happen, or you might just get a “sorry, charlie” message. I’m writing this from my home office, where I have a DSL connection via AT&T, so I get the landing page, adorned with a “Powered by AT&T” logo in the upper-right hand corner. You need to be connected via one of the “ESPN Participating Internet Service Providers” or else you can’t access the site.

This is a “kinda-sorta” pay-to-view scenario, and it keeps the “value perception of the brand” high. The idea is that you can never watch ESPN for free, and conceptually making it free for everyone could “devalue” the brand in a certain way (i.e. if you expect to get it for free, why would you ever pay for it)?

So, assuming you can get to it, here’s where you wind up:

LANDING PAGE

espn3_landing_pg.jpg

The UX is really geared towards live broadcasts of live sporting events. Clean and simple, with upcoming events clearly laid out, ordered by date & time, directly below the FMA space. You can also view listings of events currently in progress, or an archive of on-demand versions of past events.

The range of content available mirrors that on ESPN’s traditional channels — a mixed bag of top-tier league events like MLB and NBA games, global tournaments like the French Open tennis, as well as oddball items like Bass Fishing and Australian Rules Football (if you’ve never seen it, you should watch at least once, and see if you can figure out what in the heck is going on because I sure can’t).

Clicking on the listing of an event currently in progress, or the “Watch Now” button, opens the player in a separate window. This is where the actual content viewing happens, and where the rest of the UX ultimately lives (the Landing Page was really just an entry point — once you’ve got the player open you never need to go backwards). So, even though they did a good job of making the “Watch Now” button stand out from a color-palette perspective, without making it obnoxious or pulling it away from nav-bar, I’m wondering if there’s something I’m missing here in that it makes no sense to me why they wouldn’t take you to the player from the get-go. Do we really need the Landing Page at all?

VIDEO PLAYER

espn3.jpg

The pop-up page that contains the player is a very “player-centric” design, in that all of the non-player content wraps around the player, and makes the whole thing feel centered and integrated around the video. It also gives me a sense that there’s lots of video content to choose from and, other familiar ESPN features like up-to-the minute scores & stats lend it a familiar, “TV-like, on-brand” feel, although a chat pod in the lower-right corner rolls in a contemporary feature of Internet TV, the “virtual shared viewing experience.” My first impression is they’ve retained the “goodness” of the broadcast version of ESPN, while nudging gently into some internet-specific functionality.

I’ll get more in-depth into the content around the player in a later post. For now, I want to focus on the Video Player itself. One thing that keeps this “feeling like ESPN” is the way they Pillarbox the 4:3 video appearing in this example with the ESPN3 logo (exactly how they Pillarbox on the ESPN broadcast channels).

espn_player_01.jpg

There is also a complete absence of player Chrome around the top and sides, and a very simple timeline below, which obscures the controls in it’s default state. It also gives us the name of the event being watched, which is useful given the amount of content available at any given time.

When you mouse-over the video, the timeline appears, as well as controls to adjust Video Quality and Volume.

espn_player_02.jpg

Much like many contemporary Internet TV channels, ESPN3 offers Dynamic Bitrate Switching (termed on this site as “Auto Adjust”) which serves up the best-quality bitrate you can handle at any given time. This is the default setting (which is exactly what it should be for the average Internet TV watcher), but you can set the bitrate manually, should you decide to “live dangerously.”

My only “suggestment for improvement” is how the CTI (current-time-indicator, the little thingy on the timeline that you can drag left-or-right to move forward or backward in time) can only be dragged. You can’t click on the timeline where you want it to go, and have it jump there (a feature which is very common these days, and which many users expect).

The three buttons on the lower-right let you toggle between the viewing states: Standard, Fullscreen, and Mosaic.

espn_player_03.jpg

The Mosaic view lets you watch up to 4 events at once, but unless you have a really fast connection the viewing experience can still be dicey.

The Mosaic view, IMO, caters solely to sports junkies, sports gamblers, and fantasy-league participants, who really want/need to be able to track multiple sporting events simultaneously. For the casual viewer, it really serves no useful purpose. That being said, a good portion of ESPN’s base are sports junkies, sports gamblers, and fantasy-league participants. So this is a key feature for this Internet TV channel (as well as most Internet TV channels that cater to sports fans) and definitely starts to get you into the zone of “this is something I probably can’t do on my TV set today.”

The way you get content into this Mosaic view is either by drag/drop or going to the interactive calendar which also drives the PIP (picture-in-picture) feature. Since I believe this one is a bit more useful to the average viewer, let’s take a look at how it works (keeping in mind getting content into the Mosaic view pretty much works the same way).

In the mouse-over state of the player, an “Add PIP” button appears in the upper-right corner. Clicking on it brings up a simple dialog.

espn_pip1.jpg

Clicking “Choose An Event” opens the interactive calendar, which appears as an overlay on top of the video player. It also shows you the video you’re currently watching on the right side.

espn_pip2.jpg

This appears to me to be a crack at something similar to an interactive programming guide on a Cable or Satelite subscription. The only problem with it’s current implementation is that is just appears onscreen abruptly, and it took me a moment to understand what I was looking at (in particular, the video itself didn’t feel like a continuous experience). What I’d like to see would be for the interactive calendar to appear via a transition, which would push the video off to the right and have the listings fade up on the left. Would really make the whole thing feel connected — right now it feels a little disjointed.

This one complaint aside, at this point it’s easy to locate a “Replay” on-demand clip, or any live event currently underway (at the time of this writing, early on a Monday morning, there were no live events underway, so I loaded in a replay of one of the French Open matches).

espn_pip3.jpg

The bad news is that the PIP window is simply way too small to see what the heck is happening, and there’s no way to resize it (although you can position it wherever you want). I can’t really see the usefulness, unless you go into fullscreen mode (but the ESPN3 branding on the Pillarbox goes away, which is probably good if you’re the end-user but not-so-good if you’re ESPN).

espn_pip4.jpg

I’m watching this on my laptop which has a 17-inch screen, and at this point I can actually see the tennis ball in the PIP which is pretty darn good.

Part 2 to come shortly . . .

Internet TV Technical Basics: Video Compression

Have you ever heard that Texas expression that goes something like this:

“That”s like trying to stuff 10 pounds of manure into a 5 pound bag”

Let’s consider that expression as an analogy to what one needs to do in order to get a video file delivered from some server in god-knows-where over the public Internet to whatever device you choose to view it on.

So, how exactly DOES one stuff 10lbs of crap into a 5lb bag?

Well, if there are some gaps of air in it, you can compress it somewhat and get more in the bag, right? No, wait, we’re talking about air here, it doesn’t weigh anything. Scratch that.

Well, you physics majors out there realize there’s no way you can get that 10lbs into the 5lb bag. The only thing you can do is leave some of it behind. So what can you leave behind, and still retain the ESSENCE AND INTEGRITY of the dung (OK, this analogy has gone way too far and ends here).

When you watch Internet TV, the pipe that connects the your computer to the server where the video is stored is in a state of constant fluctuation. How much data can get through that pipe changes from moment to moment.

Think of the video as your “10 pounds of manure” and the pipe can only get 5 pounds through at this instant, but maybe in a few seconds it can only take 3, and then a few seconds later it can handle 7. What needs to happen in order for that video to get through that pipe, is for it to get Compressed, which means getting rid of some of the data that makes up the digital video file, while maintaining its ESSENCE AND INTEGRITY.

In video production, we tend to work with very large video files which are either uncompressed (which maintains 100% integrity, meaning the files contain all of the visual information that the camera captured when the video was recorded), or are compressed to an extent that you can’t see any difference from the uncompressed file (this is defined as Lossless Compression).

You simply can’t deliver these huge files we use in production over the public Internet. Nobody in the universe has a connection fast enough. So we need to Compress the video to a Lossy Compression format, which will degrade the integrity of the video to some extent.

Every single video standard that works for Internet TV involves Lossy Compression.

As time goes on, and technical innovation continues, new and better Compression algorithms become available that let you get better quality at a lower Bitrate.

So what’s a Bitrate?

Basically, your internet connection is like that pipe I was talking about earlier — you can only get so much data through at any given time. So let’s say your “average throughput” is 700kbps (kilobits per second). If the video you are watching was Compressed to a Bitrate of 700kbps, you’d have a very good viewing experience, unless your connection started to drop lower. Then maybe the video would pause or stutter.

Every video you watch on Internet TV was Compressed to a specific Bitrate. On Adobe TV, our videos are generally Compressed to about 600kbps.

Many websites offer a choice of several different Bitrates, so if you have a faster Internet connection, you can view higher quality video. Take this one below as an example:

Once you’ve started playing the video, the button that says “360p” contains selections for 3 different Bitrate versions of the video. Each version is encoded to a different Bitrate, but many sites obscure this by defining the versions by their Frame Sizes rather than their Bitrates (as this tends to be a closely-guarded secret for competitive resaons).

If you go to the highest available bitrate, defined as 720p, the video will look much, much, better and the audio will sound better as well (audio is also Compressed, along with the Video, for delivery for Internet TV). If I had to venture a guess, I’d say 360p is a bitrate of 300kbps, 460p is 600kbps, and 720p is 1mbps (megabit, or 1000 kilobits, per second). But that’s only a guess.

Some Internet TV channels, like MLB.TV and HULU, offer Dynamic Bitrate Switching, which means the Video Player will deliver the highest Bitrate that your Internet connetion can handle, at any given moment, and vary the Bitrate that you get depending on how your connection speed expands and contracts.

To see just how much better Compression algorithms have gotten over the years, let’s look at a video that was uploaded to YouTube 3 years ago (I selected the video randomly, I just wanted it to be a few years old to illustrate my point):

Because of the Compression algorithms available at that time, and also because the video had to be Compressed to a much lower Bitrate back then (as the average user’s Internet connection was much slower then than it is today) this looks pretty rough.

Now here’s a random example from Vimeo, who generally uses a higher Bitrate encoding profile, that was posted and encoded today (go fullscreen to see it in all it’s splendor):

Amsterdam Osdorp from The QBF on Vimeo.

This isn’t even close to the best quality Internet TV has to offer today, but man isn’t that a huge difference?

More on this subject to come soon, this is an incredibly deep topic….