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

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

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)


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)


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


(Optional)


All required

When all fields are required..


All fields are required


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


Ask yourself...

“Is this piece of information so valuable t

hat

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

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

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

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


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 positionClose to relevant fieldsSpaces and proximity

Where

Meaningful, useful

Short, succinct, straight to the pointWhat

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 submit Vs Realtime validation

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

+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 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当表单出现错误，该如何处理


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 fields

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


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


Size


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.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/bigd2112/3649132473/

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

Small screen

Sun/light reflection

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


Simplified :: Remove简单化 :: 删除


Remove tips & help

Simplified - by removing tips and help


Remove ‘not so important’ fields

Simplified - by removing ‘not so important’ fields


Simplified :: Combining简单化 :: 结合


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)


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


139 countries


AustraliaAustriaBelgiumBulgariaCanadaCroatiaCyprusCzech RepublicDenmarkDubaiFinlandFranceGermanyGreat BritainGreeceGuadeloupeHungaryIrelandItalyLuxembourgMaltaMartiniqueMexicoMoroccoNetherlandsNew ZealandNorwayPolandPortugalReunion IslandRomaniaSlovak RepublicSouth AfricaSpainSwedenSwitzerlandSyriaTunisiaTurkeyUSA

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 versionWeb 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 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 order2. 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 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)


~ 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






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

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

Design

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