Project Notebook: That Actor In That Movie
I’m good at recognizing actors’ faces and mannerisms, but terrible at remembering their names. Who was the lady in The Best Exotic Marigold Hotel who also played Shaun’s mum in Shaun of the Dead? ( Penelope Winton.) Manually cross-referencing cast lists on IMDB is tedious.
* Use jQuery to solve a real problem
* Put a Minimum Viable Product (MVP) in front of beta testers as quickly as possible. MVP is a popular strategy with startups to ensure the thing you build has the features people want.
* Work with a third party web service and AJAX.
How it works:
Screenshot from http://thatactorinthatmovie.com.
Users search for and select a movie title, with autocomplete help from TheMovieDB. On submit, it retrieves the movie info with AJAX. The cast members who were in all your selected movies are listed on the right. The cast list shrinks as more movies are added, until your mystery actor is revealed.
Under the hood
- The jQuery library
- Movie data from TheMovieDB.org, a free movie database. IMDB is proprietary, and IMDBapi.org wasn’t available at the time of writing.
- One PHP script to serve the page.
- A few PHP scripts to answer AJAX queries, and to keep my TMDB API key private.
As soon as the site was usable, the focus shifted from answering a question to exploring movies. Penelope Winton and Bill Nighy were both in Shaun of the Dead and The Best Exotic Marigold Hotel. What about Hot Fuzz? Only Bill Nighy was in all three. Take out Marigold. No surprise, Simon Pegg and Nick Frost appear. Remove everything but Hot Fuzz and look at the cast list. Cate Blanchett? As in Lord of the Rings? Yes way! Speaking of which, who appeared in all of the Lord of the Rings movies?
This reinforced the MVP strategy. I hadn’t anticipated exploration until I saw it, and then it seemed like the most natural use in the world. The expandable movie details and the weighted list of movie suggestions were added to support exploration.
My beta testers suggested other features I hadn’t thought of. A friend who’s an author wanted to see the writers and fight choreographers as well as the actors. Another wanted to browse the full movie info, so I added a link to the TMDB page. My sister-in-law has the opposite problem of mine: she remembers names, but not movies. That would be easy to add in another iteration.
On the technical side, I was surprised how minimal the server-side scripts are. It’s not worth the overhead of a microframework or RESTful API. The scripts repeat TMDB’s replies, minus any fields that my app doesn’t need. These hollow wrapper scripts must be increasingly common in mashups, and I bet there’s a design pattern for it somewhere - “SockPuppet - mouth the server’s reply as if it were your own”.
It’s hard to explain the site purpose succinctly and direct people to do the right thing. In the first pass I had utilitarian labels like “enter movie title”. I changed the search labels to a more prompt-like style.
Expectation management is a major challenge. The Movie DB, which provides the data, isn’t as comprehensive as IMDB. Users don’t care about APIs or web services or data quality. Why should they? They see that the web page is “broken” because TV shows don’t appear in the search, or a cast list is empty. This is best solved by using an IMDB-based web service. IMDB is our mental model for looking up actors and shows. Go with it.
It was very difficult to stick to MVP and do short iterations. There were always just a few things, really, quite fast to fix, and then it would be ready to show. It’s hard to fight the drive for done-ness even knowing that I learned so much from watching my testers.
Finally, there’s an interesting shift in how screen segments grow and shrink On page load, there’s a sea of empty background image. With one movie, there’s a big cast list on the right, a small list of selections, and a big list of suggestions. This see-saws over to a short cast list, big selection list, and moderate suggestion list. Is it wrong? No, but it snags my attention like a hangnail. On the other hand, static-sized boxes with scrollbars are irritating too. I’d be curious to hear how a designer would tackle this.
There are a lot of other projects queued up in front of this one, so no updates are planned. If I were to keep developing, I would:
- Switch to an IMDB-powered API to serve more complete data.
- Cache the TMDB replies, which rarely change. Cache user queries, since people are likely to repeat movies as they explore.
- Add search by actors, and by both actors and titles, and rethink the UI to make it make sense.
- Use a responsive layout that allows use on cellphones. The small screen would make the layout challenge really interesting.