Introducing the Nav Bar & “Movie Detail” Page

Ok cinephiles, I’ve got some sweet shots from the SeenTh.at office of Shane Helm (I love alliteration), which will hopefully get your heart beating a bit harder with anticipation!  This post will just show bits and pieces, so if you want to view the page in its entirety, head over to Dribbble.com (or scroll down a bit).

Introducing your NAV BAR:

“Wow, John.  That’s super neat…a NAV BAR!”  Yeah, yeah…I know.  It’s just a navigation bar.  But there’s a reason I’m showing it to you.  Take a look at the options and you’ll get an idea of what SeenTh.at is all about (in case you don’t know already).  People ask me all the time, “So what is SeenTh.at?”  I usually respond with something like “A social site for movies,” which usually elicits a blank look and an “Oh, cool.”  Conversation over.  UNACCEPTABLE!  I want people to get the vision (at least in part) without me going into a 10 minute diatribe.  So I thought really hard with Shane and Thanh, and we came up with this (not to be said like a robot):

“SeenTh.at is a social site for movie lovers that gives users a ‘movies only’ forum to SHARE their passion, FIND new films to love, ORGANIZE their viewing history (both past and future), and CONNECT with other people that have the same passion and interests.”

No, I’m probably not going to recite that word for word if asked on the street what SeenTh.at is all about…but it gives us some pretty sweet focus around what we’re trying to deliver.  Not only does that make it easier to get people excited, but it means a better, more usable site for all of you “Seenies.”

Anyway, I’ll get more into the NAV BAR in a later post, but now I want to talk about one aspect of the “Find” mission: the MOVIE DETAIL page.

Say you want to know more about the new Captain America flick, starring Chris Evans, or maybe you just watched it and need to check it off.  Jump on SeenTh.at, start typing in the search box up top: C-A-P-T-A-I-, “Captain America: The First Avenger (2011)” shows up in the suggested results.  You click.  You’re then taken to the MOVIE DETAIL page for “Captain America: The First Avenger.”

So let’s dissect the page into four additional parts: QUICK DETAILS, STATS, ACTIONS and SHELF.

The QUICK DETAILS look like this:

Notice here you can quickly see/verify that this is the movie page you intended to view.  It also gives you a quick summary of cast and crew, runtime, rating, and a brief synopsis.  Not enough info?  You want more?  Just hold up, we’ll get to the SHELF in a minute.  First, let’s look at the STATS.

Here you can get a quick sense of how popular and well-liked a movie is by seeing how many users have “SeenThat”, recommended the movie to a friend, or written a full-length review.  You can also see the site-wide star rating, and even rate the film yourself.  “What!?  No TomatoMeter!?”  Yeah, I know.  Plenty of you have requested that we add that in, and we probably will.  It just didn’t make this round.  Look for it in v2 or shortly after.  Now on to ACTIONS!

Here’s where you get to log/share your history with the movie.  Initially, when you first visit this page, each of these options will be grey (as well as the un-torn ticket stub to the left) and read as follows:

SeenThat?     Recommend Movie

OwnThat?     Write a Review

MustSee?      Share

Clicking on “SeenThat?” changes the text from grey to blue, changes the text to “I’ve SeenThat!” and tears the ticket to the left (also changing it to blue).  There will also be a pop up window that allows you to add more details (when you viewed the movie, who you were with, whether you watched it digitally, in the theater or on DVD, etc.), but we’ll get into that in another post.

Clicking any of the other options results in a similar change (OwnThat? to I OwnThat!, MustSee? to MustSee!, and Write a Review to I’ve Reviewed That).  Clicking “Recommend Movie” will not change the look of the text (since you’ll likely recommend the best movies multiple times to multiple people), but will also have a pop up window you can use to list everyone you want to recommend the movie to.  You also have the option to post any update to Twitter, Facebook or Google Plus, as desired.  Make sense?  Cool, let’s move on to the last point of discussion. the SHELF.

Now, considering a lot of you come from a Goodreads.com background, do not confuse this with shelves.  In the “Organize” section of the site, we plan to have an area for LISTS, which will act in a similar fashion to Goodreads’ shelves.  Our SHELF, however, is more of a sub-navigation that allows you to see different information as it relates to the page you’re currently viewing (in this case, the Captain America MOVIE DETAIL page).

For MOVIE DETAIL pages, we give you the following SHELF options: ABOUT MOVIE, CHATTER, REVIEWS and RELATED MOVIES.  More visuals for those still to come, but in short, ABOUT MOVIE is more in-depth info about the movie (think IMDB), CHATTER is a filtered list of Chatter that’s only about Captain America (think filtered Facebook feed or Twitter stream), REVIEWS is a list of reviews of Captain America, and RELATED MOVIES is a list of movies we think you’d enjoy if you like this one (think “The Incredible Hulk” or “Iron Man”).

Whew…that was fun, huh?  I hope this gives you a good idea of the direction we’re headed.  Please don’t hesitate to share your opinions below in the comments, even if it’s just to tell us we’re on the right path (we love to hear that).  If you disagree with what we’re doing, we value those comments as well.  Just keep it friendly

JP