Tips and tricks for web form usability


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tips and tricks for web form usability

  1. 1. Tips and tricks for Web FormUsability
  2. 2. Relationship between forms andusability• Forms can make a website usable or unusablebecause they stand in the way of the userachieving their goal.• Forms need to be usable in order to help theuser achieve that goal.
  3. 3. The 6 components of web forms• Labels• Input fields• Actions• Help• Messages• Validation
  4. 4. Individual words vs. sentencesIf the purpose of alabel is simple tounderstand, such as toask for a name ortelephone number,then a word or twoshould suffice. But aphrase or sentencemight be necessary toeliminate ambiguity.
  5. 5. Sentence case vs. title caseSentence case is slightlyeasier — and thus faster — to follow grammaticallythan title case. One thing isfor sure: never use all caps,or else the form would lookunprofessional and bedifficult to scan.Should it be “Name and Surname” or “Name and surname”?
  6. 6. Alignment of labels: top vs. left vs. right
  7. 7. Alignment of labels: top vs. left vs. rightForms should neverconsist of more thanone column. Noticehow easy it is toignore the columnon the right
  8. 8. Type of input fieldProvide the appropriate type of input fieldbased on what is being requested. Each type ofinput field has its own characteristics, whichusers are accustomed to. For instance, use radiobuttons if only one option of several ispermitted, and check boxes if multiple choicesare allowed.
  9. 9. Customizing input fieldsDo not invent newtypes of inputfields. Simple is oftenthe most useful. Keepinput fields as close totheir unaltered HTMLrendering as possible.
  10. 10. Restricting the format of input fieldsIf you need to restrict the format of datainputted by users, then at least do so in a waythat won’t irritate users.For example, instead ofdisplaying MM/DD/YYYY next to a text field fora date, consider using three drop-down fieldsor, better yet, a calendar control.
  11. 11. Mandatory vs. optional fieldsClearly distinguish which input fields cannot beleft blank by the user. The convention is to usean asterisk (*). Any symbol will do, as long as alegend is visible to indicate what it means (evenif it’s an asterisk).
  12. 12. Primary vs. secondary actionsPrimary actions are links andbuttons in a form that performessential “final” functionality, suchas “Save” and “Submit.”Secondary actions, such as “Back”and “Cancel,” enable users toretract data that they haveentered. If clicked by mistake,secondary actions typically haveundesired consequences, so useonly primary actions wherepossible.If you must include secondaryactions, give them less visualweight than primary actions.
  13. 13. User-triggered and dynamic helpRather than include helptext next to each inputfield, show it only whererequired. You could showan icon next to an inputfield that the user canclick on when they needhelp for that field. Evenbetter, show helpdynamically when theuser clicks into an inputfield to enter data.
  14. 14. Error messageThis notifies the user that an error has occurred,and it usually prevents them from proceedingfurther in the form. Emphasize error messagesthrough color (typically red), familiariconography (such as a warning sign),prominence (typically at the top of the form orbeside where the error occurred), large font, ora combination of these.
  15. 15. Success messageUse this to notify users that they have reached ameaningful milestone in the form. If the form islengthy, a success message encourages the userto continue filling it out. Like error messages,success messages should be prominent. Butthey should not hinder the user fromcontinuing.
  16. 16. Only where neededExcessive validation is as bad as its completeabsence, because it will frustrate users. Restrictvalidation to confirming key points (such as theavailability of a user name), ensuring realisticanswers (such as not allowing ages above 130)and suggesting responses where the range ofpossible data is finite but too long to include in adrop-down menu (such as a country-codeprefix).
  17. 17. Smart defaultsUse smart defaults tomake the user’scompletion of the formfaster and more accurate.For example, pre-selectthe user’s country basedon their IP address. Butuse these with caution,because users tend toleave pre-selected fieldsas they are.Twitter’s registration form uses both dynamicvalidation (for the name, email address,password and user name) and smart defaults(“Keep me logged in”).
  18. 18. Conclusion The BeginningLet this be our starting point to take this andapply it to our own forms.