Case Study: MovieLens Cards
Guest Contribution
About the Project
MovieLens was created by Grouplens Research at the University of Minnesota. It is a recommender system that generates personalized movie recommendations based on user’s input, treatment such as rating movies and adding them to a wishlist.
Since its first release of 1998, advice the classic MovieLens site used a movie list to put together the basic information of each movie. It also featured a drop-down rating widget for each movie, recipe so that users could rate movies on-the-go without heading into movie details.
During the interface re-design in 2011, an idea of movie cards was brought up to replace the original list design, which formed the current layout of MovieLens website.
Previous Solution
MovieLens uses a certain amount of user input to generate accurate recommendations. Therefore, one starting point of the card design was to encourage users to rate more movies. Besides migrating all information in the previous movie list, the team also added a star-style rating widget to the movie card. Initial blue stars stand for ratings predicted by the recommender system. User rates a movie by clicking on the rating widget, and the stars turn orange upon hovering then stay orange after a click.
User Research
Since September 2016, I conducted series of user research, including arranging lab visits for first-time users and interviewing experienced users. Five major problems emerged along the process:
1. Stars scattered all over the page. The rating widget was left out of the card, which leads to a relatively unpleasant redundancy.
2. Many titles were unable to be fully displayed. The cards could only hold movie titles in one line, and there is no quick way of revealing the full title.
3. All posters were cut in the bottom. Card height may need to be adjusted.
4. Mismatch between icons and corresponding actions. For example, users thought clicking the pin icon may pin this movie on current page, but it adds the movie to a wishlist.
5. Duplicate actions were found in the lower-left action menu.
October 2016: First Draft Design
Three major re-designs were released in succession aiming to address these problems. The first major re-design was released in October 2016. While retaining the hover layer on the card, its white background was replaced by a dark blurred layer with drop shadows surrounding the text. The rating widget and modified action buttons were moved into this layer as well. Movie titles were located below posters, enabling longer titles to be displayed within multiple lines.
This layout introduced simplicity to the interface. However, user did not see much improvement in its functionalities. When testing out this new design, participants had some difficulties performing the rating task due to the stacked rating widget and info layer, creating a complicated interaction of “double hovering”. Other members in the MovieLens team were also worried about hiding the rating information, since less visibility may result in less ratings gathered. Omitting the button for resetting the ratings was another point of complaint.
December 2016: Second Draft Design
After numerous changes and usability tests, the second version was rolled out two months later. In this revised version, I placed movie title in the info layer with the detailed information. A single blue star with a number were put at the bottom of the card, indicating a predicted rating for this movie. Hovering over it revealed the rating widget and action buttons. A mutable text label was added next to the icons to guarantee instant recognition.
This layout received generally sound feedback, but also brought new problems. A few users participated in tests felt uncomfortable while clicking the action buttons due to a small clickable area. Besides, rating statistics were removed from the design for a cleaner look, but this apparently worked the other way for some experienced users.
For each movie seen by User A, MovieLens had 3 different values in rating statistics: predicted rating for User A, rating made by User A, and average rating for this movie. Some research projects in Grouplens are highly dependent on data collected from the movie cards, and it would be preferred if all three values were kept on the cards. Implementing this seems to be a much harder task than simply explaining it.
February 2016: Final Design
An obi from a Japanese book inspired me. It is a paper band looped around a book cover or its dust jacket and often used to print introduction or endorsements. It loosely moves between the top and bottom of the book.
Obi became a finishing touch for the third version of my design. The layout was finalized in February 2017 featuring a bottom panel that floats up upon hovering. Initially movie title and predicted rating are displayed on a retracted panel (just like an obi), and an expanded panel simply adds extra information based on what it had. This design unified the once separate parts of the card by utilizing an intuitive structure.
In addition to the structural change, trivial information (movie duration and MPAA-rating) was removed from the card as a result of usability testing. Rating statistics finally found itself a place on the card in a much more comprehensible way.
Actions were migrated into a new action menu. An ellipsis button appears upon hovering over anywhere on the card, with a click on the button revealing the new actions menu. Apart from providing a larger clicking area and instant text instructions, the menu also reserves adequate amount of space for possible new actions coming in the future.
Case Study: MovieLens Cards was originally published in Bob Liu on Medium, where people are continuing the conversation by highlighting and responding to this story.
