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.
Witch is the type of WEB page that almost any web site has?
In witch type of WEB page usability is more important?

form d...
Mater of Arts in Communication Design

WEB DESIGN
Form design

form design

WEB DESIGN NABA 2014 Roberto DADDA

2
Witch code should I
use for this special
offer?
Do you accept AMEX?
Can u deliver by
tonight?
form design

WEB DESIGN NABA...
On line you do not get a smile, you get a
form!

form design

WEB DESIGN NABA 2014 Roberto DADDA

4
Florida 2000 election problem

Al Gore
Pat Buchanan

form design

WEB DESIGN NABA 2014 Roberto DADDA

5
The most used Internet page is a form!

What is a form?

form design

WEB DESIGN NABA 2014 Roberto DADDA

6
What is a form?

•Is a web page
that has
boxes you can
type into
form design

WEB DESIGN NABA 2014 Roberto DADDA

7
Form design

form design

WEB DESIGN NABA 2014 Roberto DADDA

8
Good form design…

… increases
completion success
from 10 to 40% and
completion success is
business!

form design

WEB DES...
How to design good forms?

form design

WEB DESIGN NABA 2014 Roberto DADDA

10
Outside-in design

form design

WEB DESIGN NABA 2014 Roberto DADDA

11
Personas

form design

WEB DESIGN NABA 2014 Roberto DADDA

12
form design

WEB DESIGN NABA 2014 Roberto DADDA

13
The 3 elements of a good form
• The relationship of a form is the relationship
between the organization that is asking the...
Relationship
The relationship of a form is the
relationship between the organization
that is asking the questions and the
...
Rule:
Establish trust

People are more likely to respond to a question if they trust the
organization that asks it and agr...
The form needs to be long
enough to ask the relevant
questions, to be short
enough to minimize the
user’s effort and to as...
Find out why you need that info… and
explain!

Never ask what
you already
know!

form design

WEB DESIGN NABA 2014 Roberto...
Make the question easy to understand

form design

WEB DESIGN NABA 2014 Roberto DADDA

19
Consider where the data will come from

form design

WEB DESIGN NABA 2014 Roberto DADDA

20
Give a good start...

form design

WEB DESIGN NABA 2014 Roberto DADDA

21
Give a name to the form
•

Tell clearly people
what is the form and
why they are filling it!

•

Easy to identify

•

Easy...
Path to completion
• Primary goal of form!!!
• Consider EVERY input carefully
• Remove all unnecessary
• Enable flexible d...
Path to completion

form design

WEB DESIGN NABA 2014 Roberto DADDA

24
Path to completion

form design

WEB DESIGN NABA 2014 Roberto DADDA

25
Indicate progress

form design

WEB DESIGN NABA 2014 Roberto DADDA

26
Progressive disclosure
• Not all users require all options in
different situations
• Prioritize user's needs
• If possible...
Selection dependent inputs
• Show clear relation between
options
• Clearly associate trigger with
triggered fields
• Manag...
Selection dependent inputs

form design

WEB DESIGN NABA 2014 Roberto DADDA

29
Selection dependent inputs
• Show clear relation between
options
• Clearly associate trigger with
triggered fields
• Manag...
feedback

form design

WEB DESIGN NABA 2014 Roberto DADDA

31
Inline validation
• Provide DIRECT and CONTESTUAL
feedback as data are entered
• Validate input and correlations
between i...
form design

WEB DESIGN NABA 2014 Roberto DADDA

33
form design

WEB DESIGN NABA 2014 Roberto DADDA

34
Celebrate success!
• After successful form
completion confirm success
• Be clear!
• Consistent messages,
consistent graphi...
form design

WEB DESIGN NABA 2014 Roberto DADDA

36
Error handling
• Do whatever possible to avoid
errors, but "Shit happens"
• Provide clear indication and
clear resolutions...
• The red area is NOT the error
one
• The thin red line over the gray
windows is not visible
• Poor connection between
err...
1

2

form design

3

WEB DESIGN NABA 2014 Roberto DADDA

39
Conversation &
appearance
The conversation of a form comes from the
questions that it asks, any other instructions,
and th...
Herbert Marshall McLuhan, (July 21, 1911 – December 31, 1980)

"The medium is the message" is a phrase
coined by Marshall ...
Have a conversation rather then an
interrogation!

form design

WEB DESIGN NABA 2014 Roberto DADDA

42
Choosing form controls
The answer is no good until the user has got it into the form by
typing, clicking, or whatever.

•
...
form design

WEB DESIGN NABA 2014 Roberto DADDA

44
form design

WEB DESIGN NABA 2014 Roberto DADDA

45
Flexible data input

form design

WEB DESIGN NABA 2014 Roberto DADDA

46
Smart default

form design

WEB DESIGN NABA 2014 Roberto DADDA

47
Labels

form design

WEB DESIGN NABA 2014 Roberto DADDA

48
Choose conversational labels
If instead of using:

“Issuing bank”
you use

“What bank issued you this credit card?”
You wi...
A fundamental question:
• What user needs to see together
for better usage of form?
• If needed repeat data

Eg Balance of...
Users have to “jump” from column to column
in order to find the right association of input
field and label before inputtin...
An alternative layout, right aligns the input field
labels so the association between input field and
label is clear.

for...
Each label and input field is grouped
by vertical proximity and the
consistent alignment of both input
fields and labels r...
Somebody thinks that…

…BOLD label increases
visual weight and
makes easy to
compete with field for
user attention

form d...
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...
Long saccade between label and field (500 ms): hight cognitive
load
No fixation over white space, but longer time
Good per...
The nearest the label, the better is confirmed!
If the label has a familiar content there is no fixation.
If label is fixe...
Number of fixation: half!

Half completion time.
Reduce cognitive load.
Good lateral view of labels from field with short ...
Consider translation problems

form design

WEB DESIGN NABA 2014 Roberto DADDA

59
Consider localization problems

form design

WEB DESIGN NABA 2014 Roberto DADDA

60
Vertical distance between fields...

…50 to 75 % of field height.

form design

WEB DESIGN NABA 2014 Roberto DADDA

61
Labels: and so what?
• Label position —Placing a label above an input field works better in most cases, because users aren...
http://www.zazzle.com/rickybuchanan

Make easy put answers in the box

form design

digg.com

WEB DESIGN NABA 2014 Roberto...
Requited or optional?

form design

WEB DESIGN NABA 2014 Roberto DADDA

64
• Indication of required is useful when:
• There are a lot of fields, but very few required

• Design to make scanning fop...
Grouping

form design

WEB DESIGN NABA 2014 Roberto DADDA

66
Logical grouping

Lines
Background
Colors
...
form design

WEB DESIGN NABA 2014 Roberto DADDA

67
Avoid excessive visual noise

form design

WEB DESIGN NABA 2014 Roberto DADDA

68
More than 15 graphical elements

Information
consists only of
difference that
makes difference
form design

WEB DESIGN NAB...
Grouping golden rules
• Use relevant content to organize
forms
• Use MINIMUM amount of visual
elements necessary to
commun...
Clearly label section header
• User never must loose orientation

• Identify groups in a meaningful
way
• Give information...
Actions

form design

WEB DESIGN NABA 2014 Roberto DADDA

72
Not all actions are equal
Visual presentation of actions
should match their importance
Stronger design for most
important ...
Primary vs secondary actions
• Primary actions are actions such as “Submit”, “Continue”,
“Finish”, and “Save”. They enable...
Manage actions
• Reduce secondary actions
to a minimum, consider
using side actions only after
an action is chosen
• Ensur...
Help

form design

WEB DESIGN NABA 2014 Roberto DADDA

76
Helps & Tips
• Useful when:
• Asking unfamiliar data
• User may have doubts about data
• There are different possible
inte...
Instruction’s basics needs:
• a good title that says what the form is
for
• a list of anything that users might have
to ga...
Use familiar terms

form design

WEB DESIGN NABA 2014 Roberto DADDA

79
Use short, affirmative, active sentences
• Up to 20 words
• Positive never negative

form design

WEB DESIGN NABA 2014 Rob...
Put choice before actions
Draw a triangle above an upside down T.
This will be the picture of a wine glass.
(Dixon, 1987)
...
Consider dynamic solutions
• Automatic inline
exposure
• User activated inline
exposures
• User activated section
exposure...
Automatic inline

form design

WEB DESIGN NABA 2014 Roberto DADDA

83
User activated inline

form design

WEB DESIGN NABA 2014 Roberto DADDA

84
User activated section exposure

form design

WEB DESIGN NABA 2014 Roberto DADDA

85
Lables INTO fields

form design

WEB DESIGN NABA 2014 Roberto DADDA

86
… OK, but there may be a problem.

form design

WEB DESIGN NABA 2014 Roberto DADDA

87
Tootltip, mouseover or click

form design

WEB DESIGN NABA 2014 Roberto DADDA

88
Back arrow

Consider that some users will use
browser back arrow and manage it!|

form design

WEB DESIGN NABA 2014 Robert...
Tabbing
• Consider that some users
will use tab between
fields
• Use proper tabindex
markup
• Multi-column maybe
dangerous...
Details
• Decide on one way to deal with each detail
and then stick to it. Create a mini-style guide
for your team or orga...
Test

Nielsen and Landauer (1993)

form design

WEB DESIGN NABA 2014 Roberto DADDA

92
Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda

form design

WEB ...
Upcoming SlideShare
Loading in …5
×

Form design

817 views

Published on

Form design elements for web designers

Published in: Design
  • Be the first to comment

Form design

  1. 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. 2. Mater of Arts in Communication Design WEB DESIGN Form design form design WEB DESIGN NABA 2014 Roberto DADDA 2
  3. 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. 4. On line you do not get a smile, you get a form! form design WEB DESIGN NABA 2014 Roberto DADDA 4
  5. 5. Florida 2000 election problem Al Gore Pat Buchanan form design WEB DESIGN NABA 2014 Roberto DADDA 5
  6. 6. The most used Internet page is a form! What is a form? form design WEB DESIGN NABA 2014 Roberto DADDA 6
  7. 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. 8. Form design form design WEB DESIGN NABA 2014 Roberto DADDA 8
  9. 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. 10. How to design good forms? form design WEB DESIGN NABA 2014 Roberto DADDA 10
  11. 11. Outside-in design form design WEB DESIGN NABA 2014 Roberto DADDA 11
  12. 12. Personas form design WEB DESIGN NABA 2014 Roberto DADDA 12
  13. 13. form design WEB DESIGN NABA 2014 Roberto DADDA 13
  14. 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. 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. 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. 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. 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. 19. Make the question easy to understand form design WEB DESIGN NABA 2014 Roberto DADDA 19
  20. 20. Consider where the data will come from form design WEB DESIGN NABA 2014 Roberto DADDA 20
  21. 21. Give a good start... form design WEB DESIGN NABA 2014 Roberto DADDA 21
  22. 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. 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. 24. Path to completion form design WEB DESIGN NABA 2014 Roberto DADDA 24
  25. 25. Path to completion form design WEB DESIGN NABA 2014 Roberto DADDA 25
  26. 26. Indicate progress form design WEB DESIGN NABA 2014 Roberto DADDA 26
  27. 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. 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. 29. Selection dependent inputs form design WEB DESIGN NABA 2014 Roberto DADDA 29
  30. 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. 31. feedback form design WEB DESIGN NABA 2014 Roberto DADDA 31
  32. 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. 33. form design WEB DESIGN NABA 2014 Roberto DADDA 33
  34. 34. form design WEB DESIGN NABA 2014 Roberto DADDA 34
  35. 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. 36. form design WEB DESIGN NABA 2014 Roberto DADDA 36
  37. 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. 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. 39. 1 2 form design 3 WEB DESIGN NABA 2014 Roberto DADDA 39
  40. 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. 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. 42. Have a conversation rather then an interrogation! form design WEB DESIGN NABA 2014 Roberto DADDA 42
  43. 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. 44. form design WEB DESIGN NABA 2014 Roberto DADDA 44
  45. 45. form design WEB DESIGN NABA 2014 Roberto DADDA 45
  46. 46. Flexible data input form design WEB DESIGN NABA 2014 Roberto DADDA 46
  47. 47. Smart default form design WEB DESIGN NABA 2014 Roberto DADDA 47
  48. 48. Labels form design WEB DESIGN NABA 2014 Roberto DADDA 48
  49. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 59. Consider translation problems form design WEB DESIGN NABA 2014 Roberto DADDA 59
  60. 60. Consider localization problems form design WEB DESIGN NABA 2014 Roberto DADDA 60
  61. 61. Vertical distance between fields... …50 to 75 % of field height. form design WEB DESIGN NABA 2014 Roberto DADDA 61
  62. 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. 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. 64. Requited or optional? form design WEB DESIGN NABA 2014 Roberto DADDA 64
  65. 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. 66. Grouping form design WEB DESIGN NABA 2014 Roberto DADDA 66
  67. 67. Logical grouping Lines Background Colors ... form design WEB DESIGN NABA 2014 Roberto DADDA 67
  68. 68. Avoid excessive visual noise form design WEB DESIGN NABA 2014 Roberto DADDA 68
  69. 69. More than 15 graphical elements Information consists only of difference that makes difference form design WEB DESIGN NABA 2014 Roberto DADDA 69
  70. 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. 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. 72. Actions form design WEB DESIGN NABA 2014 Roberto DADDA 72
  73. 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. 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. 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. 76. Help form design WEB DESIGN NABA 2014 Roberto DADDA 76
  77. 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. 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. 79. Use familiar terms form design WEB DESIGN NABA 2014 Roberto DADDA 79
  80. 80. Use short, affirmative, active sentences • Up to 20 words • Positive never negative form design WEB DESIGN NABA 2014 Roberto DADDA 80
  81. 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. 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. 83. Automatic inline form design WEB DESIGN NABA 2014 Roberto DADDA 83
  84. 84. User activated inline form design WEB DESIGN NABA 2014 Roberto DADDA 84
  85. 85. User activated section exposure form design WEB DESIGN NABA 2014 Roberto DADDA 85
  86. 86. Lables INTO fields form design WEB DESIGN NABA 2014 Roberto DADDA 86
  87. 87. … OK, but there may be a problem. form design WEB DESIGN NABA 2014 Roberto DADDA 87
  88. 88. Tootltip, mouseover or click form design WEB DESIGN NABA 2014 Roberto DADDA 88
  89. 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. 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. 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. 92. Test Nielsen and Landauer (1993) form design WEB DESIGN NABA 2014 Roberto DADDA 92
  93. 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

×