Apple TV YouTube App UI Improvements
The active video state on the Apple TV YouTube app could use some improvement. Currently, when a video is selected, it enlarges the thumbnail by about 10%, brightens the text, and shows a shadow beneath the thumbnail. There’s a subtle shine that occurs when you move your thumb on the remote, but that’s it! I find it frustrating to quickly orient to which video I have selected and it’s more effort than I would expect. I decided to evolve the UI and improve on the active video thumbnail state. Here’s a list of items I updated in the interface.
— I always try to infuse the brand in UI elements when I can. I think YouTube could embrace more opportunities to integrate the triangle shape into their components. Keep an eye out for these integrations as you review.
— A red active state has been added to the vertical menu vs. the white band depicted in the current interface. Notice the small triangle pointing out to the right of the circle.
— I replaced the sub menu selected state with a red triangle instead of an underline.
— I removed the 10% enlarging of the thumbnail and emphasized the vertical shift up instead. This will provide a smooth wave/flow animated effect as you scroll over multiple thumbnails quickly. I also added more opacity to the active video thumbnail shadow.
— Static thumbnails are depicted at 80% opacity, the selected active thumbnail transitions to 100% opacity. This gives additional emphasis to the selected video thumbnail.
— The biggest change is the way a previously watched video duration is depicted. The bar at the bottom of the video thumbnail which indicated how much video is left to watch, is replaced with a static bar emphasizing the active video thumbnail selection. The scrub bar metaphor has been replaced with a clock icon appearing to the left of the video time.
— Previously watched videos also show a red background behind the video length time (vs. a black background). I like the splash of red because it feels almost like “remnant” from a previously watched video. It also helps draw attention to the clock icon.
Overall, I think these are fairly easy to implement UI updates which would offer gains to the watching experience. This approach focuses more heavily on the selected video state, and that's the point. It gives proper weight to the element on the screen that the user continually orients with as they browse.
