Sign Up Forms Must Die. I’ll just come out and say this: sign-up forms must die. In the introduction to this book I described the process of stumbling upon or being recommended to a web service. You arrive eager to dive in and start engaging and what’s the first thing that greets you? A form. We can do better.
But before we get into the potential of gradual engagement (your path out of sign-in “dullery”), let’s look at how the process of engaging with an online service typically works. Figure 13.1 A sign-up form greets new customers at Google Video. You are required to give us your email address, select a password, tell us your name, your location, verify this strange word, agree to our terms of service, and finally, you will get what’s behind the form. Now contrast this approach with that of another online video service: Jumpcut.
Selecting Make a Movie brings up a single input field for the title of your movie and a few options you can use to upload media files for your movie. So far, no form. Label Placement in Forms. By Matteo Penzo Published: July 12, 2006 “We were able to subject Luke’s theories to usability testing and enrich them through the power of numeric data.” In using eyetracking to evaluate the usability of search forms for my previous article for UXmatters, “Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach,” we discovered much interesting data. I’ll provide an in-depth analysis of that data here. Please note that our ad-hoc test setup didn’t resemble real-world conditions.
Since I had to properly measure saccadic activity and saccades times, I had to eliminate all elements that would force users to visually browse through the pages we used during testing. We based our test setup on Luke Wroblewski’s article “Web Application Form Design.” Luke provided valuable insights and feedback during both our test preparation and results analysis. Test 1: Left-Aligned Labels to the Left of Input Fields Figure 1—Testing left-aligned labels to the left of input fields.
A Collection of CSS Stylesheets For Web Forms - The Form Assembl. Uni-Form. 47+ Excellent Ajax CSS Forms | Noupe. Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms. Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.
Let’s take a look, hopefully you’ll find new ideas you can develop further on your own. You might be interested to check some of the designs that was mentioned in the posts below: Styling Forms 1) Uni Form – an attempt to standardize form markup (xhtml) and css, "modularize" it, to get nice looking, well structured, highly customizable, semantic, accessible and usable forms. 2) CSS-Only, Table-less Forms – A great example of a well designed form using modern css techniques.
Demo Styling Form Elements Demo : Form Usability and Accessibility Demo: