Queued: New Interaction Tricks for the Old Netflix Dog

By on March 25, 2009 9:48 am

Sometimes building an application from scratch is easier than building on an already existing interaction model. For Queued, our goal was to take the Netflix user experience and port it to a lightweight desktop application, while adding some modest enhancements.

Creating an alternate interface for an already well-known web site carries some unique responsibilities. First, unless there is something seriously wrong with the original site, straying too far from the established model can be counterproductive. Second, innovating on existing features becomes more important than replacing them. And third, adding new interface functionality without obstructing existing interactions remains a crucial consideration.

For the Queued project, SitePen faced the additional challenge of showing off features of Adobe AIR that might not necessarily lead to the most fluid interaction, but which were powerful enough to merit inclusion as a demonstration of AIR’s powerful capabilities. We’ll discuss a few of our interaction changes here, though these aren’t the only modifications that we decided to implement.

Our first challenge with Queued was maintaining a sense of familiarity with Netflix’s already established and widely understood interface. Since all Netflix customers must manage their accounts via the Netflix web site, we were able to make the fair assumption that most potential users of Queued would already be trained in Netflix’s interaction model. The upside of adopting many of Netflix’s interaction conventions is that we get to piggyback on a model that has already been researched and refined by Netflix. The downside is that we had to constrain our ideas based on the limitations of the publicly available data provided by the Netflix servers, a reality that limited the possibilities we could consider.

Luckily, we saw early opportunities to build on the existing model instead of having to create a new model from scratch.

Let’s start with Netflix’s actual queues, the heart and soul of the Netflix site. Netflix’s simple list model for presenting the contents of user queues and for managing those queues was already quite strong, presenting a few opportunities for slight interaction improvements, but overall quite well thought out. Here, we leveraged Dojo and AIR to copy Netflix’s drag & drop reordering feature, manual reordering feature, and the ability for users to quickly rate movies.

However, we immediately saw an opportunity to improve upon Netflix’s deletion interface. Currently, Netflix users click “X” to delete a film, at which point the film is deleted but remains listed in the queue, accompanied by an undo button. Although the model works, the idea of keeping a movie listed simply so that a user can un-delete the entry seemed like a waste of space. The only advantage of this model is that it allows for the rapid deletion of multiple entries, an undertaking that seemed to be a rarer use-case than an accidental deletion. Our alternative model called for a two step process by which the user would click a remove icon, which would then be replaced by a remove/keep choice toggle, serving as an immediate safeguard against accidental deletion.

Remove or Keep

Another interaction improvement was based on the use-case of a user wanting to retrieve more information about a specific film. Netflix’s current model allows users to hover over a movie’s title, activating a tooltip which contains detailed information about the film. If users want even more information, they must click on the film title and be re-directed to that film’s detail page. We recognized that redirecting users to a film’s page simply for the sake of displaying more film information might divert a user from their current goal. For example, users might be browsing a list of newly available films, wishing to get detailed information about a film before returning to browse the other listings. In the Netflix model, a user would click on a film’s title, be redirected to the film’s page, and would then have to navigate backwards in order to resume browsing from the previous location. Our alternate model resulted in the creation of a two-layered tooltip to solve this navigation problem. First, a user hovering over a movie title would activate a tooltip offering quick access to movie information, just like Netflix’s model. However, upon clicking the movie’s title, our model opens a modal lightbox with more detailed information about the movie, from which the user may add the film directly to their queue. When the modal lightbox closes, users are immediately returned to their previous browsing location.

Modal Movie Detail

Our third alternate implementation was based on Netflix’s Top 100 list. Although Netflix provides excellent visual cataloging for most of its movie lists, displaying title images in a large grid pattern, the Top 100 list is displayed as a simple text list. We were unsure why Netflix chose to depart from its otherwise successful model solely for this particular movie list. In any case, this particular list lacked the title images available in most other Netflix lists, requiring users to scroll vertically and to read the titles of films that they could have otherwise scanned very quickly if the title images were available. Our alternate implementation placed the Top 100 list into the more visual grid format, pulling the title images from Netflix’s database, and presenting the Top 100 films in a more easily scannable context. We decided to extend this basic “show all” model for all of Netflix’s available RSS movie feeds.

Top 100

Although there were many other small interaction design tweaks that we implemented, let’s skip ahead to a feature which is a complete break with Netflix’s standard interaction model: the Mini Queue.

The Mini Queue was designed to show off some interesting capabilities of Adobe AIR and Dojo, so some small interaction design sacrifices were made in order to demonstrate the rich features available in both technologies. However, the Mini Queue adds some interesting functionality to the Queued app. Addressing the use-case of a user who wants to maintain quick access to Netflix information without keeping the full blown application open at all times, the Mini Viewer simply shows the user which DVDs are currently “At Home” and offers a quick launch point from which the user can execute searches. Executing a search relaunches the full app, showing a complete list of results in the standard search-results view.

In addition to the Mini Queue, we also decided to give users similarly quick access to other parts of the app via the dock / toolbar icon. In addition to providing access to application preference settings, the icon offers a quick launch to various parts of the app, including the ability to activate the Mini Queue, go directly to the full queue listing, or to jump to the Top 100 list.

Quick Access from Dock / Toolbar

As Netflix opens more of its data to third party use, the possibilities for Queued to expand and radically change are wide open. Hopefully, as more data becomes available and Netflix’s API expands, the door will be open for more radical innovation by exploiting the combined possibilities of Adobe AIR and the Dojo Toolkit, perhaps leading to entirely new interaction models for managing Netflix queues. Until that time, Queued remains a nice step in the right direction, and a useful tool for anyone seeking a better way to manage their Netflix account.