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.

2. Why even
discuss forms?
Because your customers are laughing at you!
Michael McIntyre, London, May 2014

3. Why even
discuss forms?

4. Why even
discuss forms?
Smarter forms = happier users =

5. We have come a
long way

6. Or have we?

9. 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

10. Single Column
vs. Multi
column Preferable

11. Top aligned vs
left aligned
Faster completion Easier to scan

12. Top aligned vs
left aligned
5 visual fixations
1 visual direction
10 visual fixations
2 visual direction
Reduces form length

13. … vs
inside the field
Screen Readers cannot
read these fields

14. List vs
side-by-side
Easier to scan

15. Drop-downs
Requires two clicks
Use when items > 6
Add search when items >
25

16. Asterisk *
Mark optional instead

17. Call to action
labels
Should be indicative

18. Call to action
primary and
secondary
But do we even need
secondary call to action?

19. Group related
information
Create logical groups

20. Cleartax (Web)
Grouping and Progress
Visibility

21. Validations -
Inline
Show where error
occurred
Add ‘error’ for color blind
users
Or use error icon

22. Baroda m Invest (iOS App)
Waited for user to make
error

23. Others
Prompt using placeholder text
and hint text
Show maximum input length
Chunk data
Use icons

24. Multilingual -
Arabic

25. Too artsy? Ensure enough contrast when using background images
Adjust opacity

26. InVision (iOS App)
Login
Wired (Mobile Web)
Login

27. 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

28. Cleartrip (iOS App)
Auto-fill
March Tee (Mobile Web)
Auto-fill
Medium (Web)
Auto-complete
American Express (iOS
App)
Auto-complete

29. 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

30. Cleartrip (iOS App)
Filters
Elevate (iOS App)
Interactive control
Cleartrip (iOS App)
Stepper
Inshorts (iOS App)
Filters

31. Citibank (iOS App)
Contextual Keyboard
Simpl (Mobile Web)
Auto-detect OTP
Baroda m Invest (iOS
App)
Ambiguous label

32. Desktop
Datepicker
Windows Phone
Datepicker

33. 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

36. Let’s design a form!
First, Middle, and Last Name
Mobile, Email Addr.
Address Line 1, 2, 3, City, State, and Pincode

37. Any original ideas?

38. “The best form is no
form.”
Luke Wroblewski, Google Inc.

39. Conversational
UI
www.typeform.com

40. Conversational
UI
www.hioscar.com

41. Conversational
UI
www.withjack.co.uk

42. Traditional yet
contemporary
Standard Chartered
(Web)
UI elements

43. Google Calendar (iOS
App)
Navigation
Naukri (iOS App)
Navigation