HBO GO — UX Failures
HBO GO is video streaming, video on demand service similar to Netflix and Amazon Prime Video. After using HGO GO for a week I felt annoyed and frustrated with some UI features and the overall user experience of the product. In this article I decided to share my thoughts on the product, explore some quick ways to improve the UX of HBO GO and help my readers create proper high-quality web/mobile/desktop applications in the future. (or something like that)
I am using 15 inch MacBook Pro 2018 with a resolution of 2,880 x 1,800 witch Chrome browser. Since all 15 ihnch Macbooks Pro released up to few years back have this resolution we can consider it very popular setup.
Let’s go straight to the point and take a closer look at various elements one by one to see where HBO GO fail to deliver proper user experience.
Recap sequence
Many television series brings the viewer up to date with the current events of the stories’ plot by using the recap sequence (the part at the beginning that you know by the name “In previous episode” or “Previously on…”). This gives us a context and allows us to easily dive into an episode that we want to watch.
This works great on traditional TV where each episode is usually released every week or two — we need to wait, so we can lose a bit of series plot context. However, HBO GO seems to totally miss this point here. Usually, when we watch the TV series on the internet in a bit different way — there is a big chance that we will be watching a few episodes one after another (or one each day of the week). HBO GO always displays recap (assuming the series has it). Let’s give this issue it a bit of thinking. Assuming we watch a few episodes in the row is there really a point to display recap sequence? Totally no — I just finished watching the previous episode, so I have the full context of series plot. This serves no purpose other than delivering unwanted content to a user.
HBO GO has all the user data, so they could make a very simple decision here to improve UX. If the user finished watching the previous episode few minutes/hours ago we can assume that user remembers the context of the series plot, he knows what happened. On the other hand, if the user watched an episode a week ago probably showing recap sequence makes perfect sense.
We could make this experience even better by showing “skip recap” button that would rewind the video to the start of the episode after the click.
This would not only allow users to easily skip unwanted content but also make UX experience more pleasurable and eallow to make data-driven decisions — we could skip recap sequence automatically when certain conditions are met eg. user is watching one episode per day and for last 7 days, he has clicked “skip recap” button (guess what do we want to do on day 8th?).
Title sequence
Most of the TV series has a title sequence sometimes called intro. Nowadays some of them are very short while others like Game Of Thrones are quite long (over 1:40s). Don’t get me wrong here — it’s great intro an I really like it, however, after watching it 50 episodes I can say with full confidence that I don't won't watch this intro anymore! And guess what? Netflix has it as well!
There is really no point of breaking UB by harassing users with unwanted content. We could also make here similar data-driven decisions as for the recap sequence.
Warning sequence
Another example of a pre-video sequence available at HBO Go is copyright warning screen.
This annoying message is displayed for 5 seconds before a video. In fact, it’s even worse, because we can’t skip it or rewind video until this sequence is finished! 5 seconds seems to be the perfect balance that allows HBO GO to annoy users by displaying the same message over and over again, yet it does not give enough time to read it all at once (believe me I tried many times and we can’t “pause” it to appear longer on the screen).
Notice that a user of the service has already accepted terms and condition (ToC) on the website while creating an account. Also, website ToC that had similar (or even more extended) rules related to copyrights. There seems to be absolutely no point of displaying this message again and again, before each episode without a way to rewind or skip it (unless we really want to annoy our users).
To make it even worse this warning sequence will be followed by intro and recap sequences needlessly increasing the time between hitting the play button and delivering desired video content to a user.
The user just wants to watch videos, he mostly doesn’t care about intro/recaps/warnings. The goal here should be to give the user the desired video content at all time.
Video progress bar
HBO GO does not officially support 4K content, but it still should support higher-resolution screens (let’s say everything over Full HD, 1920x1080px). UI scaling (or rather lack of it) is another problem in HBO GO service. Let’s compare progress bar height across a few most popular video services on the internet (full-screen playback mode) to illustrate this point. Below we can see HBO GO video progress bar as the reference (6px).
Now let’s look at different video providers. It looks like Vimeo has made it right by having a much higher progress bar (12px).
Youtube also has a quite small progress bar height (5px)…
…however, it’s height is extended when the cursor goes over it. Also, it is important to mention that interactive area is always equal to this extended height (8px) event if it is invisible making progress bar much easier to start interacting with. I would say that this is minimal heigh for this screen that still feels right.
And finally, Netflix bar is huge and very easy to use even on high-res screens (18px).
Let’s briefly look at progress bar height comparison.
As we can see HBO GO has the smallest progress bar. Pixels do always allow to imagine real-life size, so let’s look at the real size on the MacBook Pro screen — 1 millimeter. Seriously?
As a test just ask your mom/dad to rewind go to different part of the video using these controls — no way they would be able to easily hit progress bar perfectly at the first trial.
We should remember about users equipped with the modern computer having the high-resolution display.
Resume series playback
Imagine a simple case. You watched a few seasons of the series and you want to continue where you left off (next unwatched episode or a certain point of the previously watched episode). To achieve this goal we have to perform 4 steps (in worse case scenario) — click on TV Series thumbnail -> select season -> scroll right to the episode -> click episode thumbnail to play video(and of course wait for recap/intro/warning sequence to finish). This is a lot of redundant effort required from the user who just wants to continue watching content. The quickest way would be to click on the series thumbnail a resume playback where the user left off. There is really no reason to overcomplicate this part of the user journey.
Play the next episode button
Let’s review another issue related to UI scaling and misunderstanding call to action concept (CTA). We can start by comparing “next episode” call to action of HBO GO and Netflix.
Does not look that bad at first glance, but there is very important detail here that is a game changer. HBO Go button for watching next episode has 91x27px (only small blue button is active, clickable area for CTA) while Netflix 585x320px (the whole picture with play icon inside is a button). Just take a look at below real size comparison.
I estimated that Netflix call to action takes about 9% of the whole available page space, while HBO GO call to action button only about 0,5% of available page space (more or less).
We have a lot of place on the screen, but HBO GO seems not to care about utilizing all this space properly. 0,5% seems like very little considering that this is one of two CTAs on the screen at this time (Play and Cancel).
Also sometimes “watch next episode” button is not displayed at all at all breaking UX consistency across various content.
HBO Logo
This is a bit gray are but I describe it because I don’t understand the logic behind it. So in every video, we watch HBO logo is displayed in the top right corner.
I guess when TV is playing at home and multiple people are watching TV there is a chance that one housemate will turn on a channel and another housemate will spot something interesting in TV and hew will want to know channel name and then logo makes perfect sense.
On the other hand with video on demand service we usually an open video on a computer alone or with someone and we both know what we are watching HBO GO. What’s the point of having HBO logo here? Seems pointless for me. Maybe some transcoded video content with logo at some point.
I guess it may make more sense to add this logo to native TV apps, but definitely not for the web application. Youtube, Vimeo, Netflix don’t do it after all.
Summary
By looking at above cases we can clearly see that some solutions known from traditional TV make no sense in the context internet. Also, HBO seems not to follow moderns (proper) web trends and does not care about proper UI scaling for higher-resolutions. Funny (and said at the same time) part is that all these problems are quite easy to solve from a technical perspective.
All those “small” elements make the difference between pleasurable or miserable user experience. HBO case is a great example where we clearly see the lack of experienced UI/UX team. This is something that what HBO GO project definitely needs, otherwise, it will continue failing to deliver proper user experience and stay behind other services.
Just give me a few claps if you learned something here or feel a bit inspired by the article.
