Interesting UI pattern – www.surveymonkey.com

When I tried to register for the first time in the site www.surveymonkey.com I come across a few interesting UI pattern.

www.surveymonkey.com registration form

http://www.surveymonkey.com registration form

Few interesting things about this form design,

  • Labels are bold, prominent and right aligned.
  • Input box blue border and light yellow background attracts the user’s eyes towards the where they to act on.
  • Clear inline help messages (Up to 50 characters, no white space).  It’s for better than allowing people enter data with white space and then while submitting the form giving an error message.
  • Font size clearly show the importance of the text.
  • The horizontal gray line is guiding the user that the to portion is the area where the user has to enter data and the bottom area is to act (Click).
  • Links are prominent, clear, bold and blue in color.
  • “Create a new account” button is definitely have more importance than the cancel button. The yellow color is playing its role to convey the importance to the users.

One more interesting helping mechanism is, if you try to click anywhere on the page (without entering data in any of the form fields) it immediately changes the text box border color to red.

One more interesting helping mechanism is, if you try to click anywhere on the page (without entering data in any of the form fields) it immediately changes the text box border color to red.

One more interesting helping mechanism is, if you try to click anywhere on the page (without entering data in any of the form fields) it immediately changes the text box border color to red.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: