Several of the examples we’re going to look at today come from beta sign up forms like this one. Typically these pages just provide a teaser graphic and little to no information about what the site will actually be.
Another cool thing about this page is that it makes great use of image sprites. Check out the source to see the original image.
The smooth and simple style on this one is just beautiful. I like the extra padding on each row and how much the selected form field stands out from the others.
This is actually an important usability aspect. Forms can be a pain for users and adding little touches like an obvious current field highlight can really help walk them through the process.
I love the way this one sort of just floats in the ocean. There’s also a lot of really nice and subtle styling here. Check out the inner shadow on the fields and how the field borders are darker on the top left than they are on the bottom right. There are also some really great feedback features built into this form, the importance of which we’ll discuss in a later example.
Modal windows are always cool. They overlay current content instead of taking you to a different page. Somehow that’s just less unsettling than being whisked away to somewhere new, which feels like an interruption.
By dimming the homepage graphics and bringing up a modal sign registration form, you get the sense that the process will be quick and painless and that you’ll be back to browsing in no time.
This one is much lengthier than the previous forms and has several fields to fill out. However, the content is separated into three manageable chunks, which helps it not feel like one big form.
Also, I really like how the design seems to feel like a printed form, you can easily see yourself writing in the answers!
I don’t have too much to say about this one other than that I like the way the page looks. The little inset box in the address filed is a nice touch. That field also automatically checks your username choice to see if it’s already taken.
The use of pattern and texture on this site is fantastic. Counting the rectangles on the email form is fun, there’s the field itself and a border on the field, which is surrounded by a dot pattern, which is surrounded by some white padding, then there’s another darker gray border on that and finally one large box to hold it all.
Describing it, you would think the result would be busy and ugly but it came our gorgeous.
Here I liked the friendly messaging on the form text: “Let’s keep in touch.” Too often we shoot straight for something plain and boring when a few minutes of consideration can lead us to a much more interesting alternative.
The Avanti form is all about that big button. The enlarged size and bold color choice draws your attention right to it where you see a nice simple statement that’s not quite a call to action but instead states what the button will from the user’s perspective, “Sign me up.” This leaves no doubt as to what happens when the button is pressed.
Audio Logic chose to have a goofy illustrated character hold up their sign up form. It brings a lot of character to the page and makes you smile when you see it; a technique worth exploring with your own character illustrations!
I love the visual reinforcement that this site used for the form fields. These type of simple icons can be found in any of a hundred free icon sets online and really add a lot to the form, you could almost fill it out without even reading the text!
We see this type of icon-use quite often in navigation and it’s quite refreshing to see someone pull it over to a form.
The Gowalla form has an interesting message to teach: simple is good. Here’s a site with fantastic, out of the box design, advertising an app that’s the same way, yet they didn’t choose to do anything fancy or confusing on their sign up form.
Instead, it’s just a plain white box with nice big fields. Notice how they stuck the first two fields on the same line, but kept the tight justified alignment. This is a nice space-saving technique that doesn’t break your layout.
Sometimes a huge form can be incredibly discouraging. You see all those fields to fill and your first instinct is just to close the browser window and make them go away.
As the site below shows, sometimes it can help to break these fields up into several steps. You see only a small chunk at a time so you don’t get discouraged and can keep an eye on your progress via the breadcrumbs at the top.
Here’s what I hate: filling out twenty forms and hitting submit only to find that I made an error somewhere. Then I have to search the page for tiny asterisks indicating where I went wrong. It’s not just me either, everyone in the world hates this! Whether you have three fields or fifty, you’ll make the user experience infinitely better by providing live, intelligent feedback on a per-field basis.
We see this in action on the Kontain form below. I entered a password that was only three letters long and a huge sign popped up to tell me that I did something wrong, the same happens if you enter a non-valid email. The key here is not simply to provide feedback, but clearly visible and easily understandable feedback that the user can fix before hitting the submit button.
Gowalla has a fun site and a boring sign up form, which has its merits. However, there’s no unbreakable rule that you can’t have a little fun with your forms too.
Check out the form below, not only are the graphics crazy but the form fields themselves are rotated slightly to increase the off-kilter look. This definitely wouldn’t be appropriate in many professional situations, but on a site filled with flying sheep advertising a drink that makes you sleepy, it works perfect.
The folks at Vimeo decided to devote a big page to a little form. They stuck it in the top right and filled the rest of the page with an illustrated island and some animated floating clouds.
Like the previous example, this definitely isn’t appropriate for all situations but it works well here and is a pretty fun implementation of an otherwise boring form.
This one represents an interesting bit of out of the box thinking. The “Sign Me Up” button on the right has been stretched vertically to match the height of the two fields.
We’re not used to pressing square buttons on the web so you have to be careful with implementing something like this, but I like what they’ve done here.
When you have a highly styled site that follows a clear visual theme, throwing in a form with default styling can screw up the integrity of your entire theme.
Instead, you have to find a balance between making your form area stand out and making it match with the overall theme of the site. I think the 13 Creative form below is a perfect example of this technique in action.
Obama’s form uses the same technique as the Avanti example above. Notice how much that red button stands out on the otherwise very blue page. This time the button text is a clear call to action, “Learn More.” Whether you love or hate his politics, it’s definitely the case that Obama has had the best visual brand of any American President thus far, a trend that I suspect has set a standard that will continue for future holders of the position.
This final example has both pros and cons. Overall, the page is super attractive. However, it does feel like a lot of content for a center alignment, which is fairly weak for anything more than a few lines.
The lesson here is that sometimes the simplest projects are the hardest to design. When there’s a ton of content, you have a lot to work with and can build strong, clear alignments. With a little bit of content however that won’t come close to filling the page, you often have to struggle for a while before landing on the ideal solution.
Show Us Yours!
Each of the twenty sign up form examples above can teach you something about how to effectively construct your own. Leave a comment below with a link to some forms that you have built. What techniques did you use to strengthen the form both visually and functionally?