Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop

http://www.flickr.com/photos/anotogroup/4829620481/
Designing Web and Mobile Forms
chuichui.tan@cxpartners.co.uk
@ChuiSquared (SinaWeibo,Twitter)
Chui ChuiTan 陈璀璀
Monday, 22 November 2010

http://www.ﬂickr.com/photos/aok/2317942287/
Why forms
Forms are
everywhere for
different purposes

http://www.flickr.com/photos/mikeblogs/2849934090/
People hate ﬁlling in forms...
http://www.ﬂickr.com/photos/evilerin/3078856253/

How users complained
about filling in forms
on Twitter

How users complained
about filling in forms
on Sina Weibo

It’s about the experience
http://www.ﬂickr.com/photos/furious-angel/297586977/
It’s the experience that
counts. Not just the
speed of completion.

Being in control
http://www.ﬂickr.com/photos/mcbeth/261263730/
Users want to feel
in control

Why do I need to ﬁll in this form?
为什么我需填写这表格？

Remind them....
Remind them about the
benefits of filling in the
form

... why they are ﬁlling in this form

... how long it takes
Being up front about the
time required to
complete the form

Form layout 表格布局

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.

Longer gaze ﬁxation
Shorter gaze ﬁxation
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.

Labelling 标签
Each label alignment has
pros and cons.

Left aligned
Complete the form below:
Your email address
Your password
Conﬁrm password
First name *
Surname *

Left aligned
Complete the form below:
Your email address
Your password
Conﬁrm password
First name *
Surname *
Good points:
✓Tidier, clear layout
✓Easy to scan (labels)
✓High readability
Weak points:
‣ Longer completion time (higher
number of eye ﬁxations, 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

Right aligned

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

Top aligned

1
2
3
4
3
4
3
Top aligned
Good points:
✓ Shorter completion time (less eye
ﬁxation, 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 ﬁelds (distance and spaces)

Below the ﬁelds
Good points:
✓ Neat and tidy
✓ Easy to scan (labels)
Weak points:
‣ Requires good design of labels and
input ﬁelds (distance and spaces)

Inline labelling

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

How to do it
Each label alignment has
pros and cons. Choose
one which suits to your
form layout, design
constraint, form
objective, etc.

Mandatory or optional
必填或选填

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

Asterisk *

No fixation at all
Users often don’t pay
attention to the
indication.

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 ﬁnd 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....

Sometimes an asterisk is
used to call out a
footnote

‘Required’
the term ‘Required’ is often
used to indicate mandatory
fields -> increase visual
clutter

(Optional)

All required
When all fields are
required..

All ﬁelds are required

When all fields are required
for a long form...

Ask yourself...
“Is this piece of information so valuable that
it’s worth risking the possibility that users
might leave your site?”

Case Study: Imaginary Landscape Contact Us form
Simplified their contact form
from:
12 fields (4 required) to 4 fields

Results
Number of forms submitted
Conversion rate
140%
120%

Imaginary Landscape Case Study
Making forms more efficient
Number of fields available
NOT number of required fields

Grouping & chunking
表格分割和分组

Without grouping and
chunking

With grouping and chunking:
Break the form into
manageable chunks, putting
relevant fields together to
make it ‘feel’ shorter

Chunking Separate them with simple
horizontal lines...

Chunking
... or via shaded headings...

Chunking
... or coloured boxes

Grouping & chunking
Users don’t normally pay
attention to the headers...

Grouping & chunking
.... unless they’re shaded or
coloured.
Emphasise the headers if
you want your users to
read them

Input format 输入格式

Input Formatting
E.g. Click to find out about
the input formatting
Various ways to explain
about the input formatting

Input Formatting
E.g. Long description about
the input formatting

Input Formatting
E.g. Short description
beside the label

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

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

Input Formatting
Show input boxes which
match with the
acceptable format

Input Formatting
Or show an example of
the acceptable input
format

Input Formatting

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

Ultimate rule
The system should handle the formatting
NOT the users

Tips & descriptions
备注和提示

Why (do we use tips and descriptions)
To explain why you need this
information
Transparency
encourages users to
provide their details

Why (do we use tips and descriptions)
To describe the acceptable
input format

Where (do tips and descriptions appear)

Where : Proximity
Space
Inappropriate use of space

Where : Proximity
At the end
At the bottom
Inconsistent position

Where : Position
Password: *
Conﬁrm Password: *
*Your password must be between 7 and 20 characters in length
*Your password must contain both letters and numbers
Inappropriate position

“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)

What (should the descriptions show)
Password: *
7 to 20 letters and numbers
Short, succinct,
straight to the point
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

How (descriptions are being presented)
Placed around the
labels or input fields
(most common)

Placed around the
labels or input fields
(most common)

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)

Real time and inline
descriptions

Another example of
real time descriptions

Consistent position
Close to relevant ﬁelds
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

Validations 效验

Realtime validation
Be wary when using real time
feedback:
Useful when needs to be
conveyed urgently and
requires instant attention

Realtime validationValidation upon submit
Luke’s validation test

Results:Validation upon submitVs Realtime validation
Realtime validation
Success rates
Errors made
22%
22%
Satisfaction rating 31%
Completion times 42%
Number of eye ﬁxations 47%

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.”

Be wary when using realtime validations
Only when answers are not obvious/not
straightforward
When
At the end of the input ﬁeldsWhere
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)

Error handling
当表单出现错误，该如何处理

Where: On top of the form
Error messages often
appear on top of the
form

Where: Highlight the error
Indicate where the
errors are: highlight
the relevant fields

Where: Highlight the error

Where: Highlight and anchor to the section
If it’s a long form,
anchor to the first
field with error

Where: Close to the relevant ﬁelds
Show errors close to
the relevant fields

What: Meaningful error message
Provide meaningful
error message

What: Direct to the point
First version: too many
unnecessary wordings.
New version: straight
to the point

Meaningful error messages
Meaningful & contextual messageWhat’s wrong
Where: which ﬁeld(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 ﬁelds
“.... please try again in 5 minutes or call us at
xxxxxxxxxx.”
(with quick call to action, what’s next, what should I do
now)

Design: size, colours
设计：输入框尺寸，颜色

Colours
Be wary when using
red colour in a form
as it often used to
indicate errors

Colours

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

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)

Flow 表格流程

Flow
Get the flow of the
form right in terms of
what and where each
field or description
should be placed.

House number 22
Street Queen Square
Town or City Bristol
Postcode BS1 4ND
Country UK
Western address: from
house number to
country

国家
省
市
区
街道地址
China address: from
country to house
number

What else.... 其它

What else
Avoid requiring users to reenter their details (e.g. after errors
occur)
No complex or legalistic statement

What we can learn
No tricks or confusions
Being in control
Clear and simple
Appropriate feedback

http://www.ﬂickr.com/photos/bigd2112/3649132473/
Designing Mobile Forms

http://www.ﬂickr.com/photos/ari/4727219010/
Small screen
Sun/light reﬂection
Multitasking
Busy & crowded
Under pressure
(time restriction)
Slow connection

Quick . Easy . Error prone .
Infallible

Mobile versionWeb version
Mobile version:
Can be a simplified version of
your Web version (without
distractions, ads,
promotions, images).

Mobile versionWeb version
Mobile version:
Can be completely different
(simpler and cleaner)

Mobile version
Mobile version:
Can be the same with slight
changes of the layout, such
as label alignment

General guidelines for mobile forms
(apply across all operating systems and platforms)
Use iOS as examples
http://www.ﬂickr.com/photos/27048731@N03/3506681531/
The guidelines
presented in this
workshop can be
applied across various
operating systems and

Labelling 标签

Left aligned label is not
suitable for mobile
form. When users zoom
in, they are not able to
see the entire label.

Top aligned label is more
suitable for mobile
forms.

Left- and right-aligned
labelling are also not
suitable for long labels

Simpliﬁed :: Remove
简单化 :: 删除

Remove tips & help
Simplified - by
removing tips and help

Remove ‘not so important’ ﬁelds
Simplified - by
removing ‘not so
important’ fields

Simpliﬁed :: Combining
简单化 :: 结合

Combine three search
features into one input ﬁeld
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)

Simpliﬁed :: Improvise
简单化 :: 即更改

139 countries

Australia
Austria
Belgium
Bulgaria
Canada
Croatia
Cyprus
Czech Republic
Denmark
Dubai
Finland
France
Germany
Great Britain
Greece
Guadeloupe
Hungary
Ireland
Italy
Luxembourg
Malta
Martinique
Mexico
Morocco
Netherlands
New Zealand
Norway
Poland
Portugal
Reunion Island
Romania
Slovak Republic
South Africa
Spain
Sweden
Switzerland
Syria
Tunisia
Turkey
USA
40 countries
Make good use of the
functionalities which come
with mobile phones , such
as ‘locate’.

Multiple stages
多步骤表格

Long drop downs for
both ‘From ‘ and ‘To’

Step 1 Step 2 Step 3
Simplified - Divide into
a few little steps

Changing input elements & menu controls
更改输入方法

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)

Web version Web version requires
more click for date
input

Mobile version
Mobile version: Simplified from
drop down menu to calendar
input (only a single click is
required)

Using tabs on the
mobile version
instead of radio
buttons

151 countries
Changing from a long
drop down menu to
free text predictive
search

Using links (similar
function as tabs) on
the mobile version
instead of drop downs

List selection 列表选择

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

The list shouldn’t
be too long and
users have to have
a rough idea of
what they are
looking for
Can’t ﬁnd what they want

Drop downs

Drop downs: Length
Drop downs: not suitable
when it has lengthy
options

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

Target size & spacing
尺寸和空间／距离

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 ﬁnger 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)

~ Dan Saffer ~
Designing Gestural Interfaces
Target size (in inches):
Target = (target size in inches) x (screen width in pixels) /
(screen width in inches)

Simple and easy to use
Minimise required input
Minimise options
Simple and usable interaction
Remove distraction and clutter

What else....
http://www.cxpartners.co.uk/thoughts/
web_forms_design_guidelines_an_eyetracking_study.htm

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.

Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von cxpartners

Mehr von cxpartners (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop