13. Avoid multicolumn layout
especially when the flow
of your form is
particularly important.
It’s impossible to guess
which order your users
are going to go for.
Monday, 22 November 2010
14. Longer gaze fixation
Shorter gaze fixation
Design to look like a
single piece of
information (e.g.
sharing a single label,
putting the fields close
to each other.
Exceptional cases
where you can have >1
fields in a row, e.g.
name, dates, time.
Monday, 22 November 2010
16. Left aligned
Complete the form below:
Your email address
Your password
Confirm password
First name *
Surname *
Monday, 22 November 2010
17. Left aligned
Complete the form below:
Your email address
Your password
Confirm password
First name *
Surname *
Good points:
✓Tidier, clear layout
✓Easy to scan (labels)
✓High readability
Weak points:
‣ Longer completion time (higher
number of eye fixations, 2 visual
directions)
‣ Doesn’t work when you have long
labels
‣ Might not work for all languages
(important if you are designing for
international websites)
1 2
3 4
5 6
7
8 9
10 11
Monday, 22 November 2010
19. Right aligned
Good points:
✓ Label widths offer more flexibility
✓ Labels are closer to the input fields
Weak points:
‣ Longer completion time (due to higher
number of eye fixations)
‣ Doesn’t work when you have long
labels
‣ Might not work for all languages
(important if you are designing for
international websites)
1 2
3 4
5 6
7 8
9 10
Monday, 22 November 2010
21. 1
2
3
4
3
4
3
Top aligned
Good points:
✓ Shorter completion time (less eye
fixation, 1 visual direction)
✓ Works for long labels (useful for
forms which require localisation)
Weak points:
‣ Requires more vertical screen space
‣ Form might look longer
‣ Requires good design of labels and
input fields (distance and spaces)
Monday, 22 November 2010
22. Below the fields
Good points:
✓ Neat and tidy
✓ Easy to scan (labels)
Weak points:
‣ Requires good design of labels and
input fields (distance and spaces)
Monday, 22 November 2010
24. Be wary when using inline labelling
Nice and tidy, but...
Make sure labels
always appear in all
situations when input
is not entered.
Differentiate labels
from users’ input
Monday, 22 November 2010
25. How to do it
Each label alignment has
pros and cons. Choose
one which suits to your
form layout, design
constraint, form
objective, etc.
Monday, 22 November 2010
27. Asterisk *
Not all users know what
an asterisk means
Asterisk indication is
often placed at the
inappropriate place, e.g.
not following the right
flow
Monday, 22 November 2010
30. No fixation at all
Users often don’t pay
attention to the
indication.
Monday, 22 November 2010
31. Postcode (mandatory)
Address line 1 *
Address line 2 *
Delivery instructions
Town/city *
Post code *
Country United Kingdom
Telephone number (day)
**
Mobile number **
Click here if you can’t find your postcode or your address is outside of the UK
* required
** We required at least one telephone number
Double asterisks
Sometimes asterisks are
used not only to
indicate mandatory
fields....
Monday, 22 November 2010
37. When all fields are required
for a long form...
Monday, 22 November 2010
38. Ask yourself...
“Is this piece of information so valuable that
it’s worth risking the possibility that users
might leave your site?”
Monday, 22 November 2010
39. Case Study: Imaginary Landscape Contact Us form
Simplified their contact form
from:
12 fields (4 required) to 4 fields
Monday, 22 November 2010
44. With grouping and chunking:
Break the form into
manageable chunks, putting
relevant fields together to
make it ‘feel’ shorter
Monday, 22 November 2010
54. Input Formatting
When there is no
indication of how a
mobile phone number
should be entered,
make sure your system
can accept all kinds of
formatting
Monday, 22 November 2010
55. 07712341234
UK phone number
07712 341234
00 44 7712 341234
(44) 7712 341234
+44 (0) 7712 341234
07712 341 234
077 1234 1234
(10) 69345464
China phone number
86 10-69345464
86-10-69345464
010-69345464
Phone numbers can be
presented in various formats
Monday, 22 November 2010
59. Tell them in advanced (clearly) the acceptable format
电话 示例:010-12345678-0000
Provide fields following the acceptable format
Credit card number
Let the system handle all the formatting, if possible
If it looks flexible, make sure it is flexible
Use a good system validation and provide clear error
message
Best option
Monday, 22 November 2010
62. Why (do we use tips and descriptions)
To explain why you need this
information
Transparency
encourages users to
provide their details
Monday, 22 November 2010
63. Why (do we use tips and descriptions)
To describe the acceptable
input format
Monday, 22 November 2010
64. Where (do tips and descriptions appear)
Monday, 22 November 2010
65. Where (do tips and descriptions appear)
Monday, 22 November 2010
67. Where : Proximity
At the end
At the bottom
Inconsistent position
Monday, 22 November 2010
68. Where : Position
Password: *
Confirm Password: *
*Your password must be between 7 and 20 characters in length
*Your password must contain both letters and numbers
Inappropriate position
Monday, 22 November 2010
69. “Looks like there’s a huge chunk of writing, very messy.
I didn’t read them.”
Descriptions underneath
fields can easily clutter
the page (especially if
they are not
differentiated visually
from the labels)
Monday, 22 November 2010
70. What (should the descriptions show)
Password: *
Confirm Password: *
7 to 20 letters and numbers
Short, succinct,
straight to the point
Password: *
Confirm Password: *
*Your password must be between 7 and 20 characters in length
*Your password must contain both letters and numbers
Avoid long winded,
unnecessary wordings
Monday, 22 November 2010
71. How (descriptions are being presented)
Placed around the
labels or input fields
(most common)
Monday, 22 November 2010
72. Placed around the
labels or input fields
(most common)
How (descriptions are being presented)
Monday, 22 November 2010
73. How (descriptions are being presented)
Appear when hover over
(users could easily
miss the descriptions.
Suitable to be used
when the descriptions
are not too important
or are not for
everyone)
Monday, 22 November 2010
74. How (descriptions are being presented)
Real time and inline
descriptions
Monday, 22 November 2010
75. How (descriptions are being presented)
Another example of
real time descriptions
Monday, 22 November 2010
76. Consistent position
Close to relevant fields
Spaces and proximity
Where
Meaningful, useful
Short, succinct, straight to the point
What
Depending on the type of tips (e.g. importance, urgency,
who are they for)
Depending on the content (e.g. length, purpose, importance)
How
Only when it’s necessaryWhen
Be wary when using realtime description
Monday, 22 November 2010
78. Realtime validation
Be wary when using real time
feedback:
Useful when needs to be
conveyed urgently and
requires instant attention
Monday, 22 November 2010
80. Results:Validation upon submitVs Realtime validation
Realtime validation
Success rates
Errors made
22%
22%
Satisfaction rating 31%
Completion times 42%
Number of eye fixations 47%
Monday, 22 November 2010
81. Be wary when using realtime validations
+ve:
“The tick is useful. It saves the hassle of
having to recheck what I’ve put in.” -ve:
“How could they know if I enter my name
wrongly? The tick is quite distracting.”
Monday, 22 November 2010
82. Be wary when using realtime validations
Only when answers are not obvious/not
straightforward
When
At the end of the input fieldsWhere
Prominently (avoid fading away)How long
What Clear about what the feedback means
(e.g. correct input, correct format, availability)
(for information that needs to be conveyed urgently and requires
users’ instant attention)
Monday, 22 November 2010
87. Where: Highlight and anchor to the section
If it’s a long form,
anchor to the first
field with error
Monday, 22 November 2010
88. Where: Close to the relevant fields
Show errors close to
the relevant fields
Monday, 22 November 2010
89. What: Meaningful error message
Provide meaningful
error message
Monday, 22 November 2010
90. What: Direct to the point
First version: too many
unnecessary wordings.
New version: straight
to the point
Monday, 22 November 2010
91. Meaningful error messages
Meaningful & contextual messageWhat’s wrong
Where: which field(s)
What has/hasn’t happened
How to resolve
“There was an error in our credit card processing system.
Your card has not been charged.....”
Highlight the relevant fields
“.... please try again in 5 minutes or call us at
xxxxxxxxxx.”
(with quick call to action, what’s next, what should I do
now)
Monday, 22 November 2010
96. Fields size
Label Give sufficient roo m to enter and read their input
Cardholder name
Card number
Security code
Sufficient space to type and read
Use appropriate field width
(give context/hints on what input is required)
16 digits
3 digits
Monday, 22 November 2010
98. Primary & secondary buttons
ContinueCancel
Primary buttonSecondary button
Continue< Back
Address
Town / City
County
Postcode
Optional
Continue Cancel
Address
Town / City
County
Postcode
Optional
Differentiate primary and
secondary call to actions.
The latter should be
visually less distinctive,
smaller size)
Monday, 22 November 2010
100. Flow
Get the flow of the
form right in terms of
what and where each
field or description
should be placed.
Monday, 22 November 2010
101. House number 22
Street Queen Square
Town or City Bristol
Postcode BS1 4ND
Country UK
Western address: from
house number to
country
Monday, 22 November 2010
109. Mobile versionWeb version
Mobile version:
Can be a simplified version of
your Web version (without
distractions, ads,
promotions, images).
Monday, 22 November 2010
113. General guidelines for mobile forms
(apply across all operating systems and platforms)
Use iOS as examples
http://www.flickr.com/photos/27048731@N03/3506681531/
The guidelines
presented in this
workshop can be
applied across various
operating systems and
Monday, 22 November 2010
125. Combine three search
features into one input field
1
2
3
Simplified - by combining
various input options into a
single input field (Note: be
wary when using this
approach. Ensure it is clear
or obvious)
Monday, 22 November 2010
133. Enter e-ticket number or booking code
E-ticket number
or
Booking code
Use different menu
and input fields to
simplify the form
(mobile version)
Monday, 22 November 2010
146. Predictive free input
search is useful when:
1. It has a long list
where a long drop
down might not be
appropriate
2. Users roughly know
what they are looking
for
Monday, 22 November 2010
147. The list shouldn’t
be too long and
users have to have
a rough idea of
what they are
looking for
Can’t find what they want
Monday, 22 November 2010
149. Drop downs: Length
Drop downs: not suitable
when it has lengthy
options
Monday, 22 November 2010
150. Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
151. Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
152. Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
153. Drop downs: List order
Not suitable when:
1. It’s in a random order
2. When users are unlikely to
know what they are looking for
Monday, 22 November 2010
154. Target size & spacing
尺寸和空间/距离
Monday, 22 November 2010
155. Touch target :
> 9mm (34 pixels )
Exceptional case:
> 7mm (26 pixels)
Space between controls:
> 2mm (8 pixels)
Target minimum sizes:
• 7 x 7 mm with 1 mm gaps for
index finger usage
• 8 x 8 mm with 2 mm gaps for
thumb usage
• List type of components (e.g.
radio buttons): minimum 5 mm
line space
Tap targets:
44 pixels
(approx. 7mm / over 1/4 inch with
iPhone’s 163 ppi screen resolution)
Windows Phone 7
(UI Design and Interaction Guide)
Nokia
(Touch UI Guide)
Apple
(Human Interface Guidelines)
Monday, 22 November 2010
157. ~ Dan Saffer ~
Designing Gestural Interfaces
Target size (in inches):
Target = (target size in inches) x (screen width in pixels) /
(screen width in inches)
Monday, 22 November 2010
158. Simple and easy to use
Minimise required input
Minimise options
Simple and usable interaction
Remove distraction and clutter
Monday, 22 November 2010
160. chuichui.tan@cxpartners.co.uk
@ChuiSquared (SinaWeibo,Twitter)
Chui Chui Tan 陈璀璀
I’m writing whitepapers for Web form design and
Mobile form design which will be available for free
download.
Follow me @ChuiSquared on Twitter or Sina Weibo
to receive alerts when they are available.
Monday, 22 November 2010