Your SlideShare is downloading. ×
Form design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Form design

416

Published on

Form design elements for web designers

Form design elements for web designers

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
416
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Witch is the type of WEB page that almost any web site has? In witch type of WEB page usability is more important? form design WEB DESIGN NABA 2014 Roberto DADDA 1
  • 2. Mater of Arts in Communication Design WEB DESIGN Form design form design WEB DESIGN NABA 2014 Roberto DADDA 2
  • 3. Witch code should I use for this special offer? Do you accept AMEX? Can u deliver by tonight? form design WEB DESIGN NABA 2014 Roberto DADDA 3
  • 4. On line you do not get a smile, you get a form! form design WEB DESIGN NABA 2014 Roberto DADDA 4
  • 5. Florida 2000 election problem Al Gore Pat Buchanan form design WEB DESIGN NABA 2014 Roberto DADDA 5
  • 6. The most used Internet page is a form! What is a form? form design WEB DESIGN NABA 2014 Roberto DADDA 6
  • 7. What is a form? •Is a web page that has boxes you can type into form design WEB DESIGN NABA 2014 Roberto DADDA 7
  • 8. Form design form design WEB DESIGN NABA 2014 Roberto DADDA 8
  • 9. Good form design… … increases completion success from 10 to 40% and completion success is business! form design WEB DESIGN NABA 2014 Roberto DADDA 9
  • 10. How to design good forms? form design WEB DESIGN NABA 2014 Roberto DADDA 10
  • 11. Outside-in design form design WEB DESIGN NABA 2014 Roberto DADDA 11
  • 12. Personas form design WEB DESIGN NABA 2014 Roberto DADDA 12
  • 13. form design WEB DESIGN NABA 2014 Roberto DADDA 13
  • 14. The 3 elements of a good form • The relationship of a form is the relationship between the organization that is asking the questions and the person who is answering • The conversation of a form comes from the questions that it asks, any other instructions, and the way the form is arranged into topics • The appearance of a form is the way that it looks: the arrangement of text, input areas such as fields and graphics, and the use of color. form design WEB DESIGN NABA 2014 Roberto DADDA 14
  • 15. Relationship The relationship of a form is the relationship between the organization that is asking the questions and the person who is answering. form design WEB DESIGN NABA 2014 Roberto DADDA 15
  • 16. Rule: Establish trust People are more likely to respond to a question if they trust the organization that asks it and agree with the purpose for which the information will be used. If they don’t trust you, they’ll either drop out of the form or lie to you Reduce social costs Social costs are bad feelings, like being made to feel inferior or being put at a disadvantage Increase rewards (*) small reward can be more effective than a delayed, bigger reward People are more likely to respond if they perceive that they will get some reward by doing so (*) 1. 2. 3. 4. Show that the form is published by a real organization. Make it easy to contact the organization that publishes the form Ensure that the form has a clear purpose. Make sure that the form looks as if it has been designed by a professional. 5. Keep advertising away from the form. 6. Check that the form works correctly: no defects, no typographical errors form design WEB DESIGN NABA 2014 Roberto DADDA 16
  • 17. The form needs to be long enough to ask the relevant questions, to be short enough to minimize the user’s effort and to ask questions that are appropriate within the context of the overall relationship. form design WEB DESIGN NABA 2014 Roberto DADDA 17
  • 18. Find out why you need that info… and explain! Never ask what you already know! form design WEB DESIGN NABA 2014 Roberto DADDA 18
  • 19. Make the question easy to understand form design WEB DESIGN NABA 2014 Roberto DADDA 19
  • 20. Consider where the data will come from form design WEB DESIGN NABA 2014 Roberto DADDA 20
  • 21. Give a good start... form design WEB DESIGN NABA 2014 Roberto DADDA 21
  • 22. Give a name to the form • Tell clearly people what is the form and why they are filling it! • Easy to identify • Easy to remember • Avoid uncertainties form design Now the LORD God had formed out of the ground all the beasts of the field and all the birds of the air. He brought them to the man to see what he would name them; and whatever the man called each living creature, that was its name. Genesis 2 18-20 WEB DESIGN NABA 2014 Roberto DADDA 22
  • 23. Path to completion • Primary goal of form!!! • Consider EVERY input carefully • Remove all unnecessary • Enable flexible data input when needed • Provide a CLEAR path • Enable smart default • Show progress and save • Enable partial save whenever possible form design WEB DESIGN NABA 2014 Roberto DADDA 23
  • 24. Path to completion form design WEB DESIGN NABA 2014 Roberto DADDA 24
  • 25. Path to completion form design WEB DESIGN NABA 2014 Roberto DADDA 25
  • 26. Indicate progress form design WEB DESIGN NABA 2014 Roberto DADDA 26
  • 27. Progressive disclosure • Not all users require all options in different situations • Prioritize user's needs • If possible user initiated • Progressive disclosure provides an option • Advanced options • Gradual engagement • Strongly depending on user/situation/action • BE consistent form design WEB DESIGN NABA 2014 Roberto DADDA 27
  • 28. Selection dependent inputs • Show clear relation between options • Clearly associate trigger with triggered fields • Manage data loss if trigger is changed after some data input • Avoid big (out of visible page) uncontrolled jumps form design WEB DESIGN NABA 2014 Roberto DADDA 28
  • 29. Selection dependent inputs form design WEB DESIGN NABA 2014 Roberto DADDA 29
  • 30. Selection dependent inputs • Show clear relation between options • Clearly associate trigger with triggered fields • Manage data loss if trigger is changed after some data input • Avoid big (out of visible page) uncontrolled jumps form design WEB DESIGN NABA 2014 Roberto DADDA 30
  • 31. feedback form design WEB DESIGN NABA 2014 Roberto DADDA 31
  • 32. Inline validation • Provide DIRECT and CONTESTUAL feedback as data are entered • Validate input and correlations between inputs • Suggest valid input • Suggest corrections • Help users stay in limits and possible data sets • Use where errors are more probable • Disambiguate! • Communicate limits if any form design WEB DESIGN NABA 2014 Roberto DADDA 32
  • 33. form design WEB DESIGN NABA 2014 Roberto DADDA 33
  • 34. form design WEB DESIGN NABA 2014 Roberto DADDA 34
  • 35. Celebrate success! • After successful form completion confirm success • Be clear! • Consistent messages, consistent graphics, consistent colors form design WEB DESIGN NABA 2014 Roberto DADDA 35
  • 36. form design WEB DESIGN NABA 2014 Roberto DADDA 36
  • 37. Error handling • Do whatever possible to avoid errors, but "Shit happens" • Provide clear indication and clear resolutions in fewer possible steps • Top placement - Visual contrast • Provide remedies • Associate field/fields with message form design WEB DESIGN NABA 2014 Roberto DADDA 37
  • 38. • The red area is NOT the error one • The thin red line over the gray windows is not visible • Poor connection between error modal windows and error • NO SOLUTION proposed form design WEB DESIGN NABA 2014 Roberto DADDA 38
  • 39. 1 2 form design 3 WEB DESIGN NABA 2014 Roberto DADDA 39
  • 40. Conversation & appearance The conversation of a form comes from the questions that it asks, any other instructions, and the way the form is arranged into topics form design WEB DESIGN NABA 2014 Roberto DADDA The appearance of a form is the way that it looks: the arrangement of text, input areas such as fields and graphics, and the use of color. 40
  • 41. Herbert Marshall McLuhan, (July 21, 1911 – December 31, 1980) "The medium is the message" is a phrase coined by Marshall McLuhan meaning that the form of a medium embeds itself in the message, creating a symbiotic relationship by which the medium influences how the message is perceived. form design WEB DESIGN NABA 2014 Roberto DADDA 41
  • 42. Have a conversation rather then an interrogation! form design WEB DESIGN NABA 2014 Roberto DADDA 42
  • 43. Choosing form controls The answer is no good until the user has got it into the form by typing, clicking, or whatever. • • • • • • form design Is it more natural to type rather than select? Are the answers easily mistyped? How many options are there? Is the user allowed to select more than one option? Are the options visually distinctive? Does the user need to see the options to understand the question? WEB DESIGN NABA 2014 Roberto DADDA 43
  • 44. form design WEB DESIGN NABA 2014 Roberto DADDA 44
  • 45. form design WEB DESIGN NABA 2014 Roberto DADDA 45
  • 46. Flexible data input form design WEB DESIGN NABA 2014 Roberto DADDA 46
  • 47. Smart default form design WEB DESIGN NABA 2014 Roberto DADDA 47
  • 48. Labels form design WEB DESIGN NABA 2014 Roberto DADDA 48
  • 49. Choose conversational labels If instead of using: “Issuing bank” you use “What bank issued you this credit card?” You will have a quicker answer, always! “Who gave you this credit card?” Could be even better! form design WEB DESIGN NABA 2014 Roberto DADDA 49
  • 50. A fundamental question: • What user needs to see together for better usage of form? • If needed repeat data Eg Balance of bank account in the page of payments form design WEB DESIGN NABA 2014 Roberto DADDA 50
  • 51. Users have to “jump” from column to column in order to find the right association of input field and label before inputting data. Westerns are used to left line reference When the data being collected by a form is unfamiliar or does not fall into easy to process groups (such as the various parts of an address), left-justifying input field labels makes scanning the information required by the form easier form design WEB DESIGN NABA 2014 Roberto DADDA 51
  • 52. An alternative layout, right aligns the input field labels so the association between input field and label is clear. form design However, the resulting left rag of the labels reduces the effectives of a quick scan to see what information the form requires. WEB DESIGN NABA 2014 Roberto DADDA 52
  • 53. Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time When the time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for instance, entering a name, address, and payment information in a check-out flow), a vertical alignment of labels and input fields is likely to work best. form design WEB DESIGN NABA 2014 Roberto DADDA 53
  • 54. Somebody thinks that… …BOLD label increases visual weight and makes easy to compete with field for user attention form design WEB DESIGN NABA 2014 Roberto DADDA 54
  • 55. Saccade activities fast movement of an eye, head or other part of an animal's body or of a device 20° form design 500°/s 225 ms WEB DESIGN NABA 2014 Roberto DADDA 55
  • 56. Long saccade between label and field (500 ms): hight cognitive load No fixation over white space, but longer time Good perception of field/field pair Drop down field is the first eye catcher for ALL users form design WEB DESIGN NABA 2014 Roberto DADDA 56
  • 57. The nearest the label, the better is confirmed! If the label has a familiar content there is no fixation. If label is fixed fixation is very fast: 50 ms. Quick form completing and reduced cognitive load. Bold labels, doubtful effect! form design WEB DESIGN NABA 2014 Roberto DADDA 57
  • 58. Number of fixation: half! Half completion time. Reduce cognitive load. Good lateral view of labels from field with short saccadic movements (170 ms for expert, 240 ms for expert) The non-predictable starting position of labels is NOT a problem! Some recheck, but shorter form design WEB DESIGN NABA 2014 Roberto DADDA 58
  • 59. Consider translation problems form design WEB DESIGN NABA 2014 Roberto DADDA 59
  • 60. Consider localization problems form design WEB DESIGN NABA 2014 Roberto DADDA 60
  • 61. Vertical distance between fields... …50 to 75 % of field height. form design WEB DESIGN NABA 2014 Roberto DADDA 61
  • 62. Labels: and so what? • Label position —Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field. • Alignment of labels —In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned. • Bold labels —Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders. • Drop-down list boxes —Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields. • Label placement for drop-down list boxes —To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappear form design WEB DESIGN NABA 2014 Roberto DADDA 62
  • 63. http://www.zazzle.com/rickybuchanan Make easy put answers in the box form design digg.com WEB DESIGN NABA 2014 Roberto DADDA 63
  • 64. Requited or optional? form design WEB DESIGN NABA 2014 Roberto DADDA 64
  • 65. • Indication of required is useful when: • There are a lot of fields, but very few required • Design to make scanning fopr required fields easier • Indication of optional is useful when: • Very few fields are optional • Neither indication is really useful when: • All fields are required form design WEB DESIGN NABA 2014 Roberto DADDA 65
  • 66. Grouping form design WEB DESIGN NABA 2014 Roberto DADDA 66
  • 67. Logical grouping Lines Background Colors ... form design WEB DESIGN NABA 2014 Roberto DADDA 67
  • 68. Avoid excessive visual noise form design WEB DESIGN NABA 2014 Roberto DADDA 68
  • 69. More than 15 graphical elements Information consists only of difference that makes difference form design WEB DESIGN NABA 2014 Roberto DADDA 69
  • 70. Grouping golden rules • Use relevant content to organize forms • Use MINIMUM amount of visual elements necessary to communicate useful relationship form design WEB DESIGN NABA 2014 Roberto DADDA 70
  • 71. Clearly label section header • User never must loose orientation • Identify groups in a meaningful way • Give information about what has been done and how far we are form the completion of the form form design WEB DESIGN NABA 2014 Roberto DADDA 71
  • 72. Actions form design WEB DESIGN NABA 2014 Roberto DADDA 72
  • 73. Not all actions are equal Visual presentation of actions should match their importance Stronger design for most important actions! Reduce the visual weight of the secondary actions (go back, cancel) form design WEB DESIGN NABA 2014 Roberto DADDA 73
  • 74. Primary vs secondary actions • Primary actions are actions such as “Submit”, “Continue”, “Finish”, and “Save”. They enable form completion, the most important action on the form. • Secondary actions are actions such as “Cancel”, “Go back”, or “Reset”. They are less important, alternative actions, which often have negative consequences when used accidentally. For example, hitting “Reset” erases all the data a user has entered. form design WEB DESIGN NABA 2014 Roberto DADDA 74
  • 75. Manage actions • Reduce secondary actions to a minimum, consider using side actions only after an action is chosen • Ensure clear visual distinction between primary and secondary form design WEB DESIGN NABA 2014 Roberto DADDA 75
  • 76. Help form design WEB DESIGN NABA 2014 Roberto DADDA 76
  • 77. Helps & Tips • Useful when: • Asking unfamiliar data • User may have doubts about data • There are different possible interpretations • Too few makes user feel abandoned • Too many may easily destroy form usability form design WEB DESIGN NABA 2014 Roberto DADDA 77
  • 78. Instruction’s basics needs: • a good title that says what the form is for • a list of anything that users might have to gather to answer the questions • something that tells users how to get help • a thank-you message at the end that says what will happen next. form design • Rewrite them in plain language. • Cut the ones that aren’t needed • Move them to where they are needed WEB DESIGN NABA 2014 Roberto DADDA 78
  • 79. Use familiar terms form design WEB DESIGN NABA 2014 Roberto DADDA 79
  • 80. Use short, affirmative, active sentences • Up to 20 words • Positive never negative form design WEB DESIGN NABA 2014 Roberto DADDA 80
  • 81. Put choice before actions Draw a triangle above an upside down T. This will be the picture of a wine glass. (Dixon, 1987) This will be a picture of a wine glass. Draw a triangle above an upside down T. form design WEB DESIGN NABA 2014 Roberto DADDA 81
  • 82. Consider dynamic solutions • Automatic inline exposure • User activated inline exposures • User activated section exposure form design WEB DESIGN NABA 2014 Roberto DADDA 82
  • 83. Automatic inline form design WEB DESIGN NABA 2014 Roberto DADDA 83
  • 84. User activated inline form design WEB DESIGN NABA 2014 Roberto DADDA 84
  • 85. User activated section exposure form design WEB DESIGN NABA 2014 Roberto DADDA 85
  • 86. Lables INTO fields form design WEB DESIGN NABA 2014 Roberto DADDA 86
  • 87. … OK, but there may be a problem. form design WEB DESIGN NABA 2014 Roberto DADDA 87
  • 88. Tootltip, mouseover or click form design WEB DESIGN NABA 2014 Roberto DADDA 88
  • 89. Back arrow Consider that some users will use browser back arrow and manage it!| form design WEB DESIGN NABA 2014 Roberto DADDA 89
  • 90. Tabbing • Consider that some users will use tab between fields • Use proper tabindex markup • Multi-column maybe dangerous and conflict with tabbing behavior form design WEB DESIGN NABA 2014 Roberto DADDA 90
  • 91. Details • Decide on one way to deal with each detail and then stick to it. Create a mini-style guide for your team or organization. • Be flexible: allow changes to the style guide if there is real evidence that the changes will improve things for your users… … but not too flexible; otherwise, you’ll end up with inconsistency between forms and even within forms. • Users do notice consistency and value it. • Avoid spending valuable design time arguing about the details. form design WEB DESIGN NABA 2014 Roberto DADDA 91
  • 92. Test Nielsen and Landauer (1993) form design WEB DESIGN NABA 2014 Roberto DADDA 92
  • 93. Roberto Dadda www.dadda.it roberto@dadda.it +39 338 775 22 03 Twitter, facebook, linkedin: robertodadda form design WEB DESIGN NABA 2014 Roberto DADDA 93

×