Design Overview
In this post I will discuss the aestetic improvements and minor functional shortcomings the recently redesigned hulu.com.
First of all, the new site is sexy. Hulu has gotten caught up in the flowing, tiled, style popularized by the likes of Windows 8 and Pinterest, and honestly implements it better than either. I always felt Hulu was a bit pushy on their signature green, black and white color scheme, but it seems they've toned it down this time allowing for the tites that line each screen to provide the page's color instead. This looks especially cool and modern in the “featured movie trailers” links, which exist in a neatly lined up row of vibrant film posters. All of these large tiles replace the old picture/title caption combinations that were used on the previous website. The episode name and length still appear in tiny letters in the corner of the tile, and details appear in a rollover popup.
On the topic of rollovers, some serious scripting magic has been applied to this site and the popup tabs seem to always appear in just the right part of the screen regardless of user scrolling, zoom level, and tile orientation on the page. It might seem trivial, but this was a major annoyance in the old Hulu when popups would open in unreadable places or refuse to close. The tradeoff of this popup zen is that they take slightly longer to load (Although this might be a purposeful constraint to prevent screen clutter, its kind of annoying that I have to wait 3-5 seconds to read an episode description).
The main scrolling pane on the homepage has been stretched across the entire page making it feel like a high resolution facebook cover photo rather than a generic lightbox-style link (see images for comparison). Unfortunately, this box takes up anywhere between half and three quarters of the whole screen depending on window size. Additionally, right below the pane is a chunky ad for some other Hulu service (Hulu+ Hulu/Roku, Hulu/Xbox, etc.) that takes up enough room to prevent you from accessing any real content without having to scroll.
The main scrolling pane on the homepage has been stretched across the entire page making it feel like a high resolution facebook cover photo rather than a generic lightbox-style link (see images for comparison). Unfortunately, this box takes up anywhere between half and three quarters of the whole screen depending on window size. Additionally, right below the pane is a chunky ad for some other Hulu service (Hulu+ Hulu/Roku, Hulu/Xbox, etc.) that takes up enough room to prevent you from accessing any real content without having to scroll.
The old Hulu. A bit texty and grey but it got the job done.
The new homepage. This is all that I could screen-capture without scrolling because of the cover picture and ad took up so much screen real estate.
A bit more of the homepage. It looks really nice, but the fact that I couldn't fit both this and the above image on screen seems a bit silly from a design/mapping perspective.
Organization/Navigation
Speaking of scrolling, Hulu seems to be taking inspiration from it’s main competetor, Netflix, in its content surfing design. On the home page users are able to scroll down through horizontal lists arranged by theme and collections of various obscure content. It's a noble attempt to curate television for the web, it just makes it more difficult for me to dig out my favorite shows underneath all the “viral clips” and “online exclusive” links.
As a college student, I hear the phrase “Let’s see what’s playing on Netflix” far more often than “Let’s see what’s playing on Hulu”. However, exclamations of “Let’s check out last weeks episode”, or “…catch up on last season” are much more often linked to Hulu. The site should be pushing their organized management of prime time television on its homepage rather than showing off their large diversity of content.
The new menu bar is quite nifty in that it consolidates every tab (TV, movies,Genres, Criterion etc.) into one single drop down. In the middle of the bar is a search menu that provides real time results and helpful links to shows and episodes. This menu bar is smart. It knows when to hide so it doesn’t block important things like your video player and displays a transparent background images in other situations. My one complaint is that the single drop down menu from this bar is mapped to appear when the mouse hovers the tiny letters "BROWSE", “TV” or “MOVIES” that appear one at a time in the top left corner. I can easily see someone like my Mom, (who can barely handle with high visibility menus) getting confused or overwhelmed by such a dynamic menu bar.
As a college student, I hear the phrase “Let’s see what’s playing on Netflix” far more often than “Let’s see what’s playing on Hulu”. However, exclamations of “Let’s check out last weeks episode”, or “…catch up on last season” are much more often linked to Hulu. The site should be pushing their organized management of prime time television on its homepage rather than showing off their large diversity of content.
The new menu bar is quite nifty in that it consolidates every tab (TV, movies,Genres, Criterion etc.) into one single drop down. In the middle of the bar is a search menu that provides real time results and helpful links to shows and episodes. This menu bar is smart. It knows when to hide so it doesn’t block important things like your video player and displays a transparent background images in other situations. My one complaint is that the single drop down menu from this bar is mapped to appear when the mouse hovers the tiny letters "BROWSE", “TV” or “MOVIES” that appear one at a time in the top left corner. I can easily see someone like my Mom, (who can barely handle with high visibility menus) getting confused or overwhelmed by such a dynamic menu bar.
The menu is simple but could be deceptive for some...
Player Updates
The new video player has a few great new features including togglable face recognition that pauses the video when the you hover over an actor and reveals a quick bio and wikipedia link. When I want to learn about an actor while watching something online, I often end up tabbing out of the video in order to look them up, and sometimes get so distracted that I never return to the video at all. This new feature not only conveniences me, but also helps Hulu to keep users engaged on their site. I can see this being especially helpful for watching movie trailers as I wont have to tab to IMDB every 2 seconds. Unfortunately the features seems to only be available for select tv shows now. I also like using the the seamless pop-out window mode that doesn’t sacrifice quality and is easy to resize at my convenience.
The face-match feature in action. It's works surprisingly well.
My Redesign
My site redesign below fixes a few of the minor errors brought up above. The menu drop-down is more clearly mapped due to the cut off lines and "click to expand" text. Perhaps after a few uses the click to expand text disappears, so that once the user has gained a learned usability the site can return to its original simplicity. The main top image and link are also significantly shorter and the advertisement has been removed. I understand that the trade-off between using screen space for content rather than ads can be detrimental, especially to a company that provides such a large scale free service such as video streaming, but this is a necessary sacrifice in the interest of creating a homepage that doesn't require scrolling and digging for content. I used the extra space to bump up the Popular This Week list and to add a Recommendations link. The recommendations list would serve as a valuable tool to remind users of the breadth of content on the site while also gathering valuable user feedback by tracking which shows they like and dislike. Again, Hulu looks pretty damn good already, but these few minor changes could help round out a site that may be pushing a bit to far beyond modern web design practices, moving it closer towards video streaming perfection.
My redesign. Clearer Menus and snugger content provide a cleaner UI with less confusion and page scrolling.
