Recently noticed most of the sites nowadays have moved away from marking the form fields as mandatory or required. Is this the change in design trend or there is a reason behind it? Are we ignoring user experience or the users have become smart enough?
Attribute of a designer
Provide a design to user which is self awakening and user-friendly. A user should be able to complete an activity in minimum clicks and it’s the responsibility and power of a designer to straighten out the complexes. In a project which is not conceptualized by a designer goes nowhere in the long run, we all know this with our own experiences. Fortunately, user experience and designers are now becoming essential for any good web designing firm that targets to reach the heights and survive there for long.
Power of good design
An intelligent design can change the perception of users. When the web world is facing North, only a designer can make web users turn to see towards South, such is the power of designer!
A quick peek into the user experience forms of the most appreciated sites during 2009, which have become a point of reference for most of the design boutiques
Beanstalk – Here I submitted the blank form to test what all fields I actually need to enter data and which ones I can avoid. Surprisingly all fields are mandatory to create an account excluding the Discount section. The instruction below Coupon Code field is very supportive for user ‘If you don’t know the code, just skip this field’. Similarly if a single line instruction was added above the form saying ‘All fields are mandatory’ would have saved the time of user to revisit missing fields .
http://beanstalkapp.com/
Blogfullbliss - This site has a neat Signup form. While I’m filling the data, the checks are happening in parallel – If data is filled correctly in mandatory fields, Checks on availability of Username, Error for invalid or missed field. I don’t have to wait to find what I have filled incorrectly after submission of ‘Register’ button. They have covered all the basic design requirements – marking mandatory fields with an asterisk and adding instruction line just below the form. A trick applied here – Instead of having a long Sign-Up form for user, it has been broken into 3 quick steps – Fill out form, Confirm email and Welcome.
Maybe Yahoo! can consider the same treatment instead of its never ending sign-up form.
No point in asking the user pointless information. If you want to collect a database for spamming, then this is not your place, go and buy it from sites that sell email ids but don’t make the user regret signing on your site. Just few essential questions are good for user to access the site. We are not referring to sites which have data related to national security. In case you want any information which might be required for showcasing data to user then do it in facebook style – Below the birthday column (In Sign-Up form) there is a link ‘Why do I need to provide this?’ Click on it and you know the reason.
On the other hand WAYN missed this and on clicking Sign-up button a warning window appears above the page, which not only adds irrelevant scrolling for a small window but the way it has presented the content looks a job of a non-designer. The colors, alignment and complete presentation of the warning window doesn’t fall anywhere close to the site design. Are we missing carry forward of branding here?
Messaging Styles
Facebook – On submission instead of showing red text next to all fields, if one common line is used for complete form it can also be a good idea.
http://www.facebook.com
Fliggo – uses a typical style for error messages on submission of forms. A mandatory asterisk next to form labels could have avoided this stage but this also seems fine since the information asked are the basic ones.
http://www.fliggo.com/
MailChimp – Sign-Up form does give some supportive message to user.
http://www.mailchimp.com/
Mint – Shows error messages in reverse order
http://www.mint.com/
If I just click my cursor on Email field and move down to ‘Sign Up’ button. I submitted a blank form and in the below snapshot you can see, I first received a red cross next to ‘password’ field.
So I went ahead and filled password details and tried submitting the form again. On second submission I received red cross error for Zip code while other fields were given a green signal.
For “Create a new account form” a user is asked to Confirm Email apart from password, not sure why confirmation for email is required.
Qik – In case form is submitted incorrectly, the complete form shifts down and shows the error messages on top of form. Reminds me of my early days in internet world. Designers please make sure – the sequence of error messages is same as that of the form. It really bugs!
http://qik.com/
Below are some more examples of error messaging and form field instructions
TED – follows the style as per W3C with red asterisk next to form labels and instructions wherever needed.
http://www.ted.com
The sequence of error messages at top of form should be preferably in same sequence as the form flow – this part seemed missing here too. Just a bit of caution won’t harm.
I understand Skype and Twitter are built with different concepts but still I like their stylized presentation.
http://www.skype.com
Deepika. This is such a nice article you have wrote and I wonder why no one has commented on it so far! Kudos to your challenging spirit against such high reputation web brands. But in reality someone might laugh at these big-shots after reading your post.
I wish we were still be working together. Still I feel lucky to work closely with people like you.
Great post and truly inspirational,enough to make one understand the power of good design.