We are about to push a new feature for Movida: the ability to create new series. Before this, our users created series via an excel import; but we hate Excel, and we think we can do better (see “Laziness, Impatience & Hubris” for some hardcore discussion on whether this arrogance is a good thing or not :)

It is a very simple thing, really. Just a form with a button. Here’s how it looked like in our prototype:

Of course it’s ugly, that’s what prototypes are for.

Our workflow when creating a new feature is pretty straightforward. We first agree on the functionality, and then create a working (and usually very crude) prototype. While this prototype is being coded, we take out our crayons and start playing with the look and feel of the feature.

Let’s make it nice

There’s only so much stuff you can do with a form.

On the other hand, we are fans of time-boxing and usually allocate a fixed amount of time for developing a new feature. This “we have a lot of time for this small thing” approach allowed us to spend some quality time with input fields, thinking how we’d like them to look like if they didn’t look like they look like by default.

Here’s our first approach:

And this is how they looked like in place (I like to start coding HTML pretty early in the design process, so I can see whether my ideas actually work in a browser):

Once our text fields were looking nice, it was time to think about the behaviour of the form.

Make mine fast, please

A beautiful application is useless if it does not help the user work better, faster and smarter. So we spend an inordinate amount of time worrying about the small details that make or break the functionality.

For this form, our main focus was “speed”. When you are assigned the daunting task of adding two hundred series to the application, the last thing you want to deal with is a pretty form that gets in your way.

So, we concentrated on these points:

Keyboard friendlyness

You should be able to complete the task of adding series without reaching for your mouse.

Progressive disclosure & flow

When creating a series, you may want to add the episodes for that series. But not always. That’s why we hide the fields for the episodes unless you select a checkbox:

The checkbox is selected when you tab out of the previous field, so the flow is not interrupted (bonus point: hitting ‘space’ to check the checkbox will take you to the first Episode field)

Another little tidbit: you can save a new series and inmediately create another.

Be as smart as possible, but not smarter

Adding some intelligence to your form can save you a lot of time, but not if you end up building another Clippy.

One of the features in this form is the pseudo intelligent prefill we added to External ID fields (an External ID is some unique identification for an item in our system).

These IDs are usually sequential, so when you fill one, the next External ID field is automagically prefilled with the most probable next ID:

(Bonus points: it works with letters too!)

By the way, External IDs are completely optional. If you don’t add an External ID to the series, the episodes won’t even display that field.

The finished form

And where is this love you talk about in the title?

The amount of work required to turn a prototype-level thingie into a completely functional and helpful feature grows exponentially with the amount of polish you want in it.

There is only one way (that I know of) to accomplish this while not jumping out the window: love.

This is what I posted on Campfire (the chat we use at BeBanjo for work-related stuff) this morning:

I really wish every web developer out there poured so much love into every form as we did with this one.