Viddler

Hello! I’m Andrew Smith (catch me on Viddler or Twitter), Viddler’s designer and front-end coder. I’ve been asked to write this post, so you’re stuck with me for today (unfortunate, yes, but it cannot be helped).

Recently, the team launched a new version of Viddler, complete with redesigned navigation. I’m going to give you a glimpse of how the revised navigation was designed and built, and what little details make it really special from a usability standpoint.

First steps

From the start, the navigation project had a very specific goal: the final product had to enable users to access every major section of the site in only one click. To pull this off, we needed to use drop-down menus. Later on, we decided the entire header should be very slim, to free up vertical space on each page.

I began the project by drawing mockups of the navigation in Adobe Illustrator. This let me experiment with design and layout ideas without actually having to build the navigation in HTML. Once I had a few concepts I liked, I showed them to the big three in Pennsylvania—Rob, Donna, and Colin.

After the gang gave me feedback, I created some revised mockups, and the cycle repeated once or twice until we decided on the final design.

Front-end coding

However, the process didn’t end there. Once everyone was happy with the design, it was up to me to actually code the thing.

It was a formidable challenge, but after several weeks of writing HTML, CSS, and JavaScript (with lots of help from the wonderful JavaScript Library jQuery) I emerged unscathed from my desk, not unlike Indiana Jones crawling out of the refrigerator.

And the result is what you see on the Viddler now. It even works in Internet Explorer 6—despite its numerous attempts to thwart my quest of cross-browser compatibility!

Well, that’s how it all went down. Now I’m going to point out a few details that make a big difference, usability-wise.

The details

I wanted to make sure the drop-down menus were as easy to use as possible. What better way to do that then by taking advantage of Fitts’ Law? Fitts’ Law basically states that the bigger the button, the easier it is for the user to click said button.

Of course, this is so obvious you might wonder why I even brought it up. What may not be obvious is how to apply this knowledge. So what did I end up doing? I maximized the clickable area around all of the links in the drop-down menus so that even the white space around the text is clickable. This is subtle, but it makes a pretty big difference.

Another sneaky detail is the login process. I was determined to keep the login form on every page of the site, like it always has been. Fortunately, I managed to hide the form behind the search feature, and it waits there until a user clicks the login button, at which point it will fade into view.

Once the login form appears, the Username field is already in focus, allowing you to start typing immediately. You can then tab to the password field and hit return to log in—you only have to use the mouse once to login!

Oh, and for those of you who use Linux, I made sure that the drop-down menus appeared over Flash content in Firefox for Linux! (If you want to know the details, check out this fix).

Well, now you know more than you probably wanted to know about the new header. Before I sign off, though, here’s a blast from the past:

That was Viddler’s header back in the day! Crazy times. That wraps it all up, folks. Thanks for reading!