In the first post to this site, I had a go at Google for rustling my jimmies. I’m not all cursing and bluster though; I also actually enjoy using some sites on the internet, and thought I’d share some of those with you. Let it be known that Vimeo is amongst these sites wot make me giddy and bloated with joy. Here’s some words breaking down precisely why I enjoy using it, specifically addressing the interaction design of the Vimeo player page. More impressive than that – I’m going to do it all without mentioning Youtube once. Except for then. Ok, twice. FUCK.
The main point I want to make about the Vimeo interface is this: purely from their interaction design and information architecture, you can tell that they care intensely for their content and their product. And that makes me want to use Vimeo.
The interface makes me giggle.
Verily! Oft is it postulated that “content is king”, and many of The InterNette’s loyal subjects kowtow to this axiom. And with Vimeo, theres no fucking about: open a Vimeo URL and there’s a laser focus on the video player, which is, after all, what I’m here for. Incidentally, that video is well worth a look. It’s a great Bret Victor presentation about using the computer as a responsive, living art medium. Go on. I’ll still be here.. waiting. Watching.
Touch the scrollwheel of your mouse, and shit starts getting interesting. Underneath the video, we’ve got some nice big description text, stats display and a few other geegaws. Yep, could have guessed that’d be there, and it’s nicely done – nice big text, and some very handy secondary functions like downloads, if they’re enabled.
It’s what happens when you scroll up that really made me raise an eyebrow the first time I noticed it. There’s stuff above the top of the page:
I know, right? Fucking lunacy. Who would go up there above the menu? Well, erm, me, and I’m guessing quite a few other users with more than 3 spare seconds on their hands, or with jiggly mousewheel fingers. And I discovered that they’ve got some discoverable content up there, ripe for.. discovery, which lets you.. discover other related videos. Now, I’m not sure precisely what it is about this interaction that makes it seem so much more attractive than say.. displaying all the related videos in the main content space, or compacting the content display down so that they can cram some adspace in. It’s a beautiful extension of the laser focus that you experience right off the bat; a great 1-2 punch of interaction design.
However, as always, it’s the attention to detail that sets the great a cut above the merely functional. The playback interface itself is fairly minimal, with a limited set of controls, and Vimeo has clearly spent a lot of time on it. I love the volume control that jumps as you mouse over it. Fucking delightful! I want to play with it! And it’s a fucking volume control! I’ve just spent 20 seconds playing with it, for about the billionth time.
I also love the thought given to the time display, which while the player is in its initial video-loaded-but-not-playing-or-played state, only shows the total time of the video, omitting the display of “0:00″, which tells the user precisely nothing. The time display switches once the context of the display changes, i.e. once you start playback. I live for this stuff, it’s great adaptation of a control from one functional context to the next, while cutting down on visual noise.
To me, this shows the level of passion that these guys have for their product – that they care enough about the minutiae of this interaction to optimise it for a more focused and delightful user experience. You can feel their energy once you start looking closely like this.
More deliciousness, in the menu of all places
We’re fast approaching some kind of event horizon for web menu interaction design. We’ve got megamenus so epic you can get product placement in the fucker. Vimeo kick this one straight through the posts; it’s great and somewhat refreshing to see the power of a fancy interaction harnessed in such a smooth way.
For me, there are a couple of things that make this work really well. The picture doesn’t do it justice either – go to a video and see it in action yourself. This link is a shameless plug, go check some hiphop out that I done did a while back.
The first thing that rocks about this is the smoothness of the interaction. The mouseover delay and timing of the pop-out of the menu is very finely tuned, to the point where it’s very quick to switch between the ‘Create’ and the ‘Watch’ sections of the mouseover, but if your cursor leaves the activation zone for the menu, the retraction animation is timed to kinda hang on for a bit longer, in case you moused over too quickly, or moused out by accident. It’s a really nice touch, and just makes it feel like a human designed it.
Secondly, the innate feeling of balance in this piece of menu design is very strong, which I attribute in part to very careful labeling of the parent sections in the IA. The labels are all 1-2 words/4-6 characters long (in English, at least), and the tight visual treatment pulls the functionality together into an unobtrusive yet ‘smelly‘ way.
The kicker is the way the labels for the IA break core site functionality down, and then present this functionality to the user in a structured, efficient manner, without seeming heavy.
Flexi with tha (IA) tech
‘Join’ is a simple CTA, it’s obviously something Vimeo is keen on getting its users to do, so the functionality is simple. Click the button, hit their signup page.
‘Log in’ is softer in both presentation as a pure text label, and in result – instead of redirection to a different page, the user can sign in on the current page and return to the video to share, comment, or whatever, in a very ‘softly softly’ manner. It’s easy to take this interaction for granted, but interaction tweaks like this can be easily overlooked or under-prioritised, especially when working on products with large technical debt or legacy systems. Hands up if you’ve been there… yep, thought it was 98% of us. Solidarity, brothers and sisters.
‘Create’ is a word that implies a heap more functionality than a simple ‘Join’ or ‘Log in’ does. This is obviously going to be a heavier section, only relevant to some users. However these more relevant users are much more likely to be paid-up users, so a deeper richness of content is both expected and delivered behind this label, via the fancy slide-down menu. One possible criticism of this is that the submenu categories are pretty heavily focused on the monetisation aspect of Vimeo – but again as the users here are more likely to be paid-up, it’s a sensible spot to try to get dat monaaaay.
Similarly, ‘Watch’ implies that there is a deeper choice to be made. ‘Watch’ is such a broad term which invites a question – “well, ok, ‘watch’ what?” – which the IA caters for by providing different ways of interacting with the core functionality of Vimeo.
‘Upload’ is an area that could be streamlined slightly in my eyes. I’m expecting something similar to the ‘Log in’ interaction at this point, considering that a) this seems like it would be a simple function, b) visually, it’s treated in the same way as the ‘Log in’ label and c) there’s no supporting slide-down menu categories. However, uploading is a signed-in only action, so logged out users are whisked away to another page. Could we go straight to uploading a video, and then kill the time we’re spending waiting for the upload to finish by signing up for an account and entering the video details? Probably, but that prioritises content uploading over account creation, and I know a few Product Marketing Managers that would spill your claret rather than letting that happen.
To sum up: they love it, so that we can love it
You can tell that Vimeo really fucking love their product. There’s a delightful experience waiting for every user, be it the first timer coming to see a linked video from Twitter who discovers the dancing volume bars, to the seasoned pro coming back to a familiar content creation tool. Hell, it’s fun to jiggle a menu every now and then – don’t tell me you’ve never done it. There are disadvantages to Vimeo, like their seemingly slugish load times here in Australia, but you can’t count interaction design or information architecture amongst them. Both are a fucking triumph and they should be proud of themselves.
So, tell me: how do you showcase the passion that you have for your product through the medium of design?