Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Web forms for Higher Conversions

17 views

Published on

Web Forms are ubiquitous. Whether you are opening a bank account or applying for a job, any meaningful experience on the web has a form.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing Web forms for Higher Conversions

  1. 1. Why even discuss forms? Because your customers are laughing at you! Michael McIntyre, London, May 2014
  2. 2. Why even discuss forms?
  3. 3. Why even discuss forms? Smarter forms = happier users =
  4. 4. We have come a long way
  5. 5. Or have we?
  6. 6. Goals Increase readability Better comprehension Increase completion rates Reduce completion time Reduce no. of input fields Reduce no. of interactions (depends) Reduce errors Localisation Accessibility
  7. 7. Single Column vs. Multi column Preferable
  8. 8. Top aligned vs left aligned Faster completion Easier to scan
  9. 9. Top aligned vs left aligned 5 visual fixations 1 visual direction 10 visual fixations 2 visual direction Reduces form length
  10. 10. … vs inside the field Screen Readers cannot read these fields
  11. 11. List vs side-by-side Easier to scan
  12. 12. Drop-downs Requires two clicks Use when items > 6 Add search when items > 25
  13. 13. Asterisk * Mark optional instead
  14. 14. Call to action labels Should be indicative
  15. 15. Call to action primary and secondary But do we even need secondary call to action?
  16. 16. Group related information Create logical groups
  17. 17. Cleartax (Web) Grouping and Progress Visibility
  18. 18. Validations - Inline Show where error occurred Add ‘error’ for color blind users Or use error icon
  19. 19. Baroda m Invest (iOS App) Waited for user to make error
  20. 20. Others Prompt using placeholder text and hint text Show maximum input length Chunk data Use icons
  21. 21. Multilingual - Arabic
  22. 22. Too artsy? Ensure enough contrast when using background images Adjust opacity
  23. 23. InVision (iOS App) Login Wired (Mobile Web) Login
  24. 24. Auto-fill and Auto-complete Enable auto-fill in your forms Use social media sign ups, fingerprint Fetch data from other systems Understand co relation between fields
  25. 25. Cleartrip (iOS App) Auto-fill March Tee (Mobile Web) Auto-fill Medium (Web) Auto-complete American Express (iOS App) Auto-complete
  26. 26. Mobile is NOT a smaller version of the desktop design Use touch optimsed elements And make sure they are large enough Choose right elements for mobile
  27. 27. Cleartrip (iOS App) Filters Elevate (iOS App) Interactive control Cleartrip (iOS App) Stepper Inshorts (iOS App) Filters
  28. 28. Citibank (iOS App) Contextual Keyboard Simpl (Mobile Web) Auto-detect OTP Baroda m Invest (iOS App) Ambiguous label
  29. 29. Desktop Datepicker Windows Phone Datepicker
  30. 30. Re-cap Form should be single column (preferable) Labels are top aligned Avoid asterisk (instead mark optional) Checkboxes are a single column list Drop-down only if items > 5 Use icons where needed Call to action have indicative labels Call to action (primary) is highlighted Inline field validation Fields are grouped and use progress indicator Fields are optimsed for mobile
  31. 31. Let’s design a form! First, Middle, and Last Name Mobile, Email Addr. Address Line 1, 2, 3, City, State, and Pincode
  32. 32. Any original ideas?
  33. 33. “The best form is no form.” Luke Wroblewski, Google Inc.
  34. 34. Conversational UI www.typeform.com
  35. 35. Conversational UI www.hioscar.com
  36. 36. Conversational UI www.withjack.co.uk
  37. 37. Traditional yet contemporary Standard Chartered (Web) UI elements
  38. 38. Google Calendar (iOS App) Navigation Naukri (iOS App) Navigation

×