10 form design

www.dadda.it roberto@dadda.it Excellence in usability 1nd semester 2020-2021 1
ERGONOMICS APPLIED TO THE DESIGN OF USABLE WEB PAGES AND
APPS
Roberto DADDA and Paolo NEGRI

1st semester 2021-2022
www.dadda.it roberto@dadda.it
Form design
2

Let’s begin with a question
3
The most
accessed
Internet
page is…

www.dadda.it roberto@dadda.it 4

1995
1996

Google search
6
4.5 billion search a day
53.000 a second

Definition of a 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.
YES they are in order of importance!
A form is a web page that has boxes
you can type into.
7

On line you do get a form, not a smile!
9

Al Gore
George W. Bush
2000
13

Florida
2000
elections
poor form
design
14

Several forms in a page…
17

Forms that Work: Designing Web Forms for Usability (Interactive Technologies)
by Caroline Jarrett, Gerry Gaffney
Dīvĭdĕ
et
īmpĕrā
Philip II of Macedon
382 – 336 BC
18

diviser pour régner
Louis XI le Prudent 1423 - 1483

Goods form design...
… increases
completion
success from 10
to 40% and
completion
success is
business!
20

How design a good form?
21

Design outside-in
… not, as done usually, inside out!
22

Our mantra
23
The official ISO 9241-11
definition of usability is: “the
extent to which a product can
be used by specified users to
achieve specified goals with
effectiveness, efficiency and
satisfaction in a specified
context of use.”
A mantra is usually any repeated word or phrase, but it can also refer more specifically to a word
repeated in meditation. Mantra comes from a Sanskrit word meaning a “sacred message or text, charm,
spell, counsel.”

Form design goals
q Explain why
q Minimize the pain
q Illuminate a path to
competition, status bar
q Consider the context
q Ensure consistent
communication
q Short & visible
24

Have a conversation rather then an
interrogation!
25

Personas e user’s cases
26

Grouping
27

Dispose of garbage content!
28

Why ask credit card type?
29

Input elements should be organized in
logical groups so that brain can process
the form layout in chunks of related fields.
Not needed variations
are harmful
Use variations if there
are defined and easily
understandable reasons
Use meaningful
groups
http://www.lukew.com/ff/entry.asp?1502
Grouping basic...
31

A fundamental question:
What user needs to see for
better usage of a form?
If needed repeat data
Eg Balance of bank account in the
page of payments
32

Content grouping
Content relationships
provide a structured way to
organize forms
Grouping provides:
A way to scan required information at hight level
A sense of how informations in the form are related
33

Logical grouping
Lines
Background
Colors
...
34

Clearly label section header
User never must loose orientation
Give information about what has been done and
how far we are form the completion of the form
37

In each group no more than 9 elements,
better 7, wanderfull 5
38

Do not exaggerate withgraphical
elements, 15 are too many!
Information consists only of difference that makes difference
39

Grouping golden rules
Use relevant content to
organize forms
Use MINIMUM amount
of visual elements
necessary to
communicate useful
relationship
40

Avoid excessive visual noise
41

Neoclassical vs rationalism
42

Fields
43

Type of fields
Use the type that
better fits: the
simplest, the one that
shows more
informations in the
specific situation
44

Field length
Make fields long enough
to get the information
needed.
Avoid horizontal
scrolling
Minimize vertical
scrolling in multiline
fields
45

aesthetic
affordance
46

Labels
47

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?”
May be is too much!
But do not exagerate!
48

Use user familiar terms,
make a dictionary!
“USCIS Form I-140 (Petition for
Alien Worker).” This form has
nothing to do with
extraterrestrial life-forms: To
Homeland Security, the word
“alien” means anyone who is
not a U.S. citizen.
49

Learn from users!
• Use familiar words in familiar
way
• Use short, affirmative, active
sentences.
• Demolish walls of words
• Put choices before actions
• Use helpful headings
50

How to justify labels?
51

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.
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
Left
52

An alternative layout, right aligns the input field
labels so the association between input field
and label is clear.
However, the resulting left rag of
the labels may reduce the effectives
of a quick scan to see what
information the form requires.
Right
53

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.
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.
Vertical
54

BOLD labels increase visual
weight and makes easy to
compete with field for user
attention
PATH
55

Small screens… mobile first!
56

Eye tracking
Saccade activities
fast movement of an eye, head or other part of
an animal's body or of a device
20° 900°/s 225 ms
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
57

Saccade and fixation
58

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
59

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
60

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!
61

Do not believe to dreams!
63

Two type of extreme users,
real one are somewhere between and attitude changes with situation
Readers These users
carefully read the form.
Rushers These users rush
in and begin completing
fields, reading only when
they think it is necessary.
64

Pick the right moment
to ask questions
65

3 engagement rules
Rule 1: 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.
Rule 2: Reduce social costs. Social costs are bad feelings, like
being made to feel inferior or being put at a disadvantage.
Rule 3: Increase rewards. People are more likely to respond if
they perceive that they will get some reward by doing so.
66

Use gestalt principles!
Equilibrium
Good continuation, good figure
and common fate.
Closure Similarity
67

Keep “scene direction”
equilibrium
WRONG!
Right
68

Vertical distance between
fields...
…50 to 90%
of field height.
NOT less then 11 pixels
69

90% 5%
70

Lables INTO fields
71

Label is lost!
72

Consider combination with
dynamic tooltip
74

Some CMS offer automatic
tooltip formatter
Drupal
75

Flexible data input
76

Smart & personalized default
77

Actions
78

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”.
Active vs inactive
Active acions may be fired
Inactive actions may NOT be fired in that specific moment
79

Stronger design for most important actions!
Reduce the visual weight of the secondary actions (go back,
cancel)
Not all actions are equal
Visual presentation of actions should match their
importance
80

Example of guideline
81
Primary Secundary
Active
NON
active

Managing actions...
Reduce secondary
actions to a
minimum.
Ensure clear visual
distinction between
primary and
secondary
82

Buttons position and flow direction
83
ahead
back local

Consider slowing down actions to
make user think about
84

Take user's attention on less
dangerous (reversible) actions
85

Blending in background
Be careful not to make
confusion between
blended and not enabled
86

Mix of link & buttons
The visual strength is VERY different, use carefully!
87

Action buttons order and
positions are important!
88

Tabbing
Consider that some
users will use tab
between fields
Use proper tabindex
markup
Multi-column maybe
dangerous and conflict
with tabbing behavior
89

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

www.dadda.it roberto@dadda.it Excellence in usability 1nd semester 2020-2021 91
“For what the king
fundamentally insisted upon
was that his authority should
be respected. He tolerated
no disobedience. He was an
absolute monarch. But,
because he was a very good
man, he made his orders
reasonable.” (10.15)

Required or optional?
Indication of required is useful when:
There are a lot of fields, but very few
required
Design to make scanning for required
fields easier
Indication of optional is useful when:
Very few fields are optional
Neither indication is really useful when:
All fields are required
TRY to avoid optional fields!
Associate indicator with label, not with field!
92

Good option for INTO field
93

Color only: no way!
94

Help
95

Alert signal...
If we too much help is needed most probably we do
need to go back to form design!
96

confusing
People DO NOT read much instructions!
97

Helps & Tips
Useful when:
• Asking unfamiliar data
• Tell why ask for data
• User may have doubts about data
• There are different possible
interpretations
• When user maybe concerned about
security and privacy
• When there is a specific way of
inputting, eg comma delimited.
• Optional/required
Too many may easily destroy form
usability
98

KISS
99

If really we need a lot of help let us
consider dynamic solutions
• Automatic inline
exposure
• User activated
inline exposures
• User activated
section exposure
100

Automatic inline
Make help
location
predictable!
Use STRONG
visual elements
to connect help
with field
101

User activated inline
Use clear icon and BE CONSISTENT!
102

User activated section exposure
Nice to use
page areas.
Beware popup:
• Blockers
• Responsive
design
Give to customer the possibility of opening, closing and reducing to less verbose
103

Help on application actions!
105

Chat
106

Explain security, always!
With a link to an explanation/certification page!
107

Put a page indication on all pages
For very
complex
forms
consider
numbering
all fields.
Facilitate
connection
with help
desk!
109

Name that form
• Tell clearly people why they are filling that
form!
• Avoid uncertainties
110

People may be scared...
… when they see
a complex form
without help.
If this is the
situation GIVE A
MESSAGE telling
that you will help
them
111

Path to
completion
112

Path to completion
• 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
113

How long will be?
So 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
114

Offer status maps
115

Specially on small screens
116

Celebrate successes!
117

Wooow
• After successful form
completion confirm
success
• Be clear!
• Consistent messages,
consistent graphics,
consistent colors
• Do not celebrate
marketing results
118

Avoid dead end sensation...
120

Give a good start...
121

Path to completion
122

Path to completion
123

Avoid ambigous paths!
124

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
125

Selection dependent inputs
Several possibilities:
• Expose below radio buttons
• Expose within radio buttons
• Expose inactive
• TAB
127

Tabs
129

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
130

Overlay, be carefull!
Kayak
May make
responsive
difficult
131

If you need a book use a book!
132

feedback
133

Inline validation assistance
q Provide DIRECT and CONTESTUAL feedback
as data are entered
q Validate input and correlations between inputs
q Suggest valid input
q Suggest corrections
q Help users stay in limits and possible data sets
q Use where errors are more probable
q Disambiguate!
q Communicate limits if any
134

Errors
139

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
140

• Clearly communicate when an error is blocking someone from completing a form.
• Error messages are arguably the most important element on a form when present.
Make sure they appear that way!
• Display error messages in context so they can be resolved quickly.
• Provide actionable remedies that enable people to resolve errors easily.
• Top-level error messages should indicate an error has occurred and how it can be
resolved. If multiple errors exist, they should be listed in the top-level message.
• If any input fields are responsible for an error, clearly mark them with a double visual
emphasis to ensure they are noticeable.
• Visually associate any responsible form elements with a top-level error message to
clearly communicate they need to be resolved in order to continue.
• Reserve red text and warning icons for error messages.
Some rules
141

But here something is wrong!
142

• 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
Use visuals in a consistent way
143

Sure bypass
Prevent error
where possible!
Secure bypass
144

Optimal error handling:
ALERT
IDENTIFY
DIRECT
Something wrong!
This is wrong.
Do this to recover.
145

ALERT
IDENTIFY
DIRECT
146

Nooooooo
148

Message:
• Visibility
• Consistency
149

Error checking, when?
The
nearest
possible to
the input of
each byte
of data!
151

If fixable FIX!
153

NEVER...
...cancel data submitted by the
customer if the form has to be
resubmitted!
154

Progress indication
• If there is a possibility of long waiting with
“frozen systems” impression give indication of
progress
• Submission
• Calculations
• Upload / Download
• If possible quantitative, otherwise qualitative
• Disable actions to avoid double actions
155

And is only the beginning
157

Adaptive forms
This version of
MS Office was
hiding menus
when not
frequently used Make it
REVERSIBLE!
158

Eye controlled form
161

10 form design

More Related Content

Similar to 10 form design (11)

More from Roberto Dadda (17)

Recently uploaded (20)

10 form design