webmobileformsdesignchuichuitan-101122103439-phpapp01

7/29/2019 webmobileformsdesignchuichuitan-101122103439-phpapp01

http://slidepdf.com/reader/full/webmobileformsdesignchuichuitan-101122103439-phpapp01 1/160

http://www.flickr.com/photos/anotogroup/4829620481/

Designing Web and Mobile Forms

[email protected]

@ChuiSquared (Sina Weibo, Twitter)

Chui Chui Tan 陈璀璀

Monday, 22 November 2010

mailto:[email protected]






http://www.flickr.com/photos/aok/2317942287/

Why forms

Forms are everywhere for

different purposes






http://www.flickr.com/photos/mikeblogs/2849934090/

People hate filling in forms...

http://www.flickr.com/photos/evilerin/3078856253/







How users complained about filling in forms

on Twitter






http://www.flickr.com/photos/mikeblogs/2849934090/http://www.flickr.com/photos/evilerin/3078856253/

How users complained about filling in forms

on Sina Weibo









It’s about the experience

http://www.flickr.com/photos/furious-angel/297586977/

It’s the experience that counts. Not just the speed of completion.










Being in control

http://www.flickr.com/photos/mcbeth/261263730/

Users want to feel in control







Why do I need to fill in this form?

为什么我需填写这表格？









Remind them....

Remind them about the benefits of filling in the form







... why they are filling in this form







... how long it takes

Being up front about the time required tocomplete 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 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.





Labelling标签

Each label alignment has pros and cons.








Left aligned

Complete the form below:

Your email address

Your password

Confirm password

First name *

Surname *




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 visualdir ections)

‣ Doesn’t wor k when you have longlabels

‣ Might not work for all languages (important if you are designing for international websites)




Right aligned




Right aligned

Good points:

✓ Label widths off er mor e 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 f or all languages (important if you ar e designing f or inter national websites)




Top aligned




Top aligned

Good points:

✓ Shor ter completion time (less eyefixation, 1 visual direction)

✓ Works for long labels (usef ul for

for ms which require localisation)

Weak points:

‣ Requires more ver tical screen space

‣ For m might look longer

‣ Requires good design of labels and input fields (distance and spaces)




Below the fields

Good points:

✓ Neat and tidy

✓ Easy to scan (labels)

Weak points:

‣ Requir es good design of labels andinput fields (distance and spaces)




Inline labelling




Be wary when using inline labelling

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




Sometimes an asterisk is used to call out a

footnote




‘Required’

the term ‘Required’ is often used to indicate mandatory

fields -> increase visualclutter




(Optional)




All required

When all fields are required..




All fields are required




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




Ask yourself...




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




Imaginary Landscape Case StudyMaking forms more efficient




Grouping & chunking表格分割和分组




Without grouping andchunking




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


h h dl ll h f f bl



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




Tips & descriptions备注和提示




Why (do we use tips and descriptions)

Transparency encourages users to provide their details




Why (do we use tips and descriptions)




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: *

Confirm Password: *

*Your password must be between 7 and 20 characters in length*Your password must contain both letters and numbers

Inappropriate position




Descriptions underneath fields can easily clutter

the page (especially if they are not

differentiated visually from the labels)




What (should the descriptions show)

Password: *

Confirm Password: *

7 to 20 letters and numbers

Password: *

Confirm Password: *

*Your password must be between 7 and 20 characters in length*Your password must contain both letters and numbers




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




Validations效验




Realtime validation

Be wary when using real time feedback:

Useful when needs to be conveyed urgently and

requires instant attention




Luke’s validation test




Results: Validation upon submit Vs Realtime validation

Success rates

Errors made

22%

22%

Satisfaction rating 31%

Completion times 42%

Number of eye fixations 47%




Be wary when using realtime validations




Be wary when using realtime validations

Only when answers are not obvious/not

straightforwardWhen

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)




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


O f f



Where: On top of the form

Error messages often appear on top of the

form


Wh H hl h h



Where: Highlight the error

Indicate where the errors are: highlight

the relevant fields


Wh H hl h h



Where: Highlight the error


Wh Hi hli h d h h i



Where: Highlight and anchor to the section

If it’s a long form, anchor to the first

field with error


Wh Cl h l fi ld



Where: Close to the relevant fields

Show errors close tothe relevant fields


Wh M i f l



What: Meaningful error message

Provide meaningful error message


Wh Di h i



What: Direct to the point

First version: too many unnecessary wordings.

New version: straight to the point


M i f l



Meaningful error messages

Meaningful & contextual message

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




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


C l



Colours

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

indicate errors


C l rs



Colours


Colours



Colours


Fields size



Fields size

Label Give sufficient roo m to enter and read their input

Cardholder name

Card number

Security code

16 digits

3 digits


Size



Size


Primary & secondary buttons Differentiate primary and

secondary call to actions.



Primary & secondary buttons

ContinueCancel

Primary buttonSecondary button

Continue< Back

Address

Town / City

County

Postcode

Optional

Continue Cancel

Address

Town / City

County

PostcodeOptional

The latter should be visually less distinctive,

smaller size)




Flow表格流程


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



What else

Avoid requiring users to reenter their details (e.g. after errorsoccur)

No complex or legalistic statement


What we can learn



What we can learn




http://www.flickr.com/photos/mikeblogs/2849934090/http://www.flickr.com/photos/bigd2112/3649132473/

Designing Mobile Forms


http://www.flickr.com/photos/bigd2112/3649132473/





http://www.flickr.com/photos/ari/4727219010/






Quick . Easy . Error prone .

Infallible




Mobile version:

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




Mobile version:

Can be completely different (simpler and cleaner)




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.flickr.com/photos/27048731@N03/3506681531/

The guidelines presented in this workshop can be applied across variousoperating 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




Simplified :: Remove简单化 ::删除


Remove tips & help



p p

Simplified - by removing tips and help


Remove tips & help



p p

Simplified - by removing tips and help


Remove ‘not so important’ fields



Simplified - by removing ‘not so important’ fields




Simplified :: Combining简单化 ::结合




1

2

3

Simplified - by combiningvarious input options into a single input field (Note: be wary when using this approach. Ensure it is clear or obvious)




Simplified :: Improvise简单化 ::即更改





AustraliaAustriaBelgiumBulgariaCanada



CanadaCroatiaCyprusCzech RepublicDenmark

DubaiFinlandFranceGermanyGreat BritainGreeceGuadeloupeHungaryIrelandItalyLuxembourgMaltaMartiniqueMexicoMoroccoNetherlandsNew ZealandNorwayPolandPortugalReunion Island

RomaniaSlovak RepublicSouth AfricaSpainSwedenSwitzerlandSyriaTunisiaTurkeyUSA

Make good use of the functionalities which come with mobile phones , such as ‘locate’.




Multiple stages多步骤表格




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: Simplified from drop down menu to calendar input (only a single click is required)






Using tabs on the



Using tabs on the mobile version instead of radio buttons


Changing from a longdrop down menu to



drop down menu to free text predictive search


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



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 find 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 forindex 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)




~ Dan Saffer ~Designing Gestural Interfaces

Target size (in inches):

Target = (target size in inches) x (screen width in pixels) /(screen width in inches)




What else....

http://www.cxpartners.co.uk/thoughts/

web_forms_design_guidelines_an_eyetracking_study.htm


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






[email protected]

@ChuiSquared (Sina Weibo, Twitter)

Chui Chui Tan 陈璀璀

I’m writing whitepapers for Web form design and

Mobile form design which will be available for free download.



webmobileformsdesignchuichuitan-101122103439-phpapp01

Documents

Transcript of webmobileformsdesignchuichuitan-101122103439-phpapp01