User Experience Design: YouTube.com video player
Time to exercise my brain and help you understand user experience in context of one of your favorite destinations on the web…YouTube! Let’s look at a screen we’re all too familiar with.
Current design on YouTube…
| Rate this video |  |
(stars) |
| Save to Favorites |  |
(heart) |
| Share video |  |
(envelope) |
| Add to Groups |  |
(people) |
| Post Video |  |
(arrow & document) |
| Flag as Inappropriate |  |
(x or ‘delete’ not actual flag) |
Now, these elements are correctly defined and used appropriately in this container. Let’s look at the design elements used in the primary video container once a video has finished.
) are an action of ‘Groups’ not ‘Share’.
Groups defined by the visual of people ( ) is appropriate here.
Again, as defined in the meta profile container the use of ‘Share’ is represented by an envelope icon ( ) not a people icon ( ).
Share defined by the visual of an envelope ( ) is appropriate here.
Why the inconsistency?
The meta profile container is the legend to help users understand the use of language and iconography in this experience. Any design element, which competes or contradicts the elements defined in the legend will detract from the user experience and clarity of the information architecture.
In the revised design, I have simply replaced the people icon in the primary video container with an envelope to support the previously defined ’share’ action.
I also went ahead and used the full language for this action, so that it reads ’share video’ and not just ’share’.
The second change that I made was to reuse the play action icon from the video player to replace the ‘watch again’ icon. Since both buttons do the exact same thing it is more intuitive for the user to identify with the most appropriate visual for this action. The recycle icon for ‘watch again’ action is not a sufficient visual and can be replaced by an icon already in use. The language for ‘watch again’ was changed to ‘play again’ to reflect the icon used as well as embrace the defined action.
Design element addition for holistic experience support
The most dramatic change that you will notice in my revised design is the addition of the ‘rate this video’ design element. This addition does two things. The first is to increase finding relevancy by placing this action inline with the most active real estate in the viewing experience.
The second is it will increase the rating per video ratio. Since the ratings reflect quality and relevancy this is a valuable addition to the end video experience in this container. The element addition has been justified and we have just improved the user experience as well as improved the business metrics.
A refreshed design of a re-engagement feature
I reconstructed the re-engagement feature of this area. In the current design, the placement of the two videos packaged with sufficient meta information help the user quickly decide whether to engage or page over to more content.
The information architecture for this feature has been improved by defining the feature ‘watch more videos’. We’ve also changed the color scheme to help readability and structured the meta information in a more intuitive nature with labels. The last piece we’ve modified was the pagination actions. I have condensed the ‘next and ‘previous’ buttons into a single action area and given context to the cycle count with a new status (i.e. ‘1 of 6′).
My design one last time…
frog design Appoints Former Microsoft Director of User Experience for Windows to Creative Leadership Team
DCamp: The User Experience Unconference
Steve Jobs at D (video) and a look at Apple today
Wanted: Visual Designer proficient in Vector Interfaces
eBay San Dimas and Adobe Apollo
About
Change the world one loan at a time by
lending like me: kiva.org/lender/abbott
Photography: flickr.com/photos/robabbott
Recent Me: twitter.com/abbott
running, gym, running, gym...film!
Use Firefox browser.
Most Viewed Articles
recent unique viewsCategories
- Code (5)
- Design (6)
- Events (18)
- My Life (23)
- News (29)
- Photography (4)
- Ribbit (8)
- Running (5)
- User Experience (10)
Terrific post. I’m behind your conclusions 100%, although I might tweak a few things. At the point you’re concerned with, the user has finished watching the video, so we need to get them to watch another — so I’d try to find a way to put more options in front of them under “watch more videos”. Or I’d make the next/previous control much more prominent.
I’m also not sure if “play again” is a very common use case, have you ever watched a YouTube video twice in succession? If it doesn’t happen more than, say, 50% of the time I’d figure out a way to make that “play again” button less prominent and hand off the reclaimed space to something else.
@ Jeffrey
More options under ‘watch more videos’ - I totally agree and would do so in a heart beat.
This is why…
Every week I spend about 3 hours on YouTube as a viewer. In relative terms to the YouTube audience I am a little higher than average. The feature I use the most is what I have defined as ‘watch more videos’.
I go as far to not even look at the rest of the page. That means the comments (which are below the fold), the video profile (summary, director name, tags…etc) and all other contextual video on the right side go unnoticed.
The video player draws you in just as your TV does in your living room. It too helps you throw on the blinders during your favorite episode of Dancing with the Stars! Just kidding, I know you watch American Idol.
I solely rely on the ‘watch more videos’ area. If this design exercise was for me then you’d see a more dramatic change, especially in light of your comment about ‘play again’.
Who ever watches a video twice in succession?
Not me, unless it is a really fantastic clip or something so short I barely could comprehend the first play. The need for ‘play again’ for me is extremely rare as I would also similarly hypothesize about the majority of users.
The call to action for ’share video’ speaks to YouTube’s business model for viral distribution, but I’d doubt this particular element drives a significant percentage of viral distribution. I have a design that drops both the ’share video’ and ‘play again’ buttons to allow for a full second video placement under ‘watch more videos’. Of course I do not possess the analysis of the current use cases and habitual patterns of the YouTube community to drop such calls to action (as much as I would like to!).
The reason why I choose not to show it here was because I was incrementally improving the landscape of the current design without disrupting the experience of the YouTube community.
Just like Greasemonkey I’d give anything to write my own video player hack in ActionScript to reflect form and function that best suits my viewing habits.
As always, thanks for the feedback!
p.s. - I may just do a round 2 to cover the points above.
OK. I think this is such an informative post, that I’m wondering why it’s free! Make sure YouTube sees this. And for your next design review, be sure to contact the ’subject’ company ahead of time and let them know you’ll be writing them up. This post transcends a typical blog, but should also go great lengths to further establish you as a UE guru in the market. Well done.
Whoever has you contributing to their project(s) is very fortunate.
Hi,
Well done , is this custom player for sell or just a suggestions.
Please if you are selling this player publish the link that we can buy it.
Thanks again
[…] several months I have had the urge to do another major post on user experience. Fortunately, my time is spent heavily on Ribbit and the rest on eating, sleeping and repeating. […]
[…] Link: YouTube Video Player Redesign […]