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 (Sina Weibo, Twitter)

Chui Chui Tan 陈璀璀

Monday, 22 November 2010

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

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

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)

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

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

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

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

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

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)

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

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

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

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

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 表格流程

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

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

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

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)

Mobile version

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

chuichui.tan@cxpartners.co.uk

@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

Ho Chui Chui ELC093 Academic Writing for Foundation Studies Briefing Credit unit: 3 Contact hours: 6 Pre-requisite: ELC080, ELC091.

CHUI CHI YUEN ALTERNATIVE SCENARIOS FOR ASSEMBLY ...

Tan-Tan sits

Allen chui wineries properties

Allen chui hospitality properties

A.Y.K. Chui and H.K. Moffatt- A Thermally Driven Disc Dynamo

AMELIA LEE SZE CHUI - Universiti Malaysia Sarawak

DR. CHUI L. TSANG | SMC PRESIDENT 2006-2015

Mining Frequent Itemsets from Uncertain Data Presenter : Chun-Kit Chui Chun-Kit Chui [1], Ben Kao [1] and Edward Hung [2] [1] Department of Computer Science.

Jerry Jerry Chui Chui Ka Yin Fok Yuen Yuen Ting · Preparing teaching materials. y. Sharing experience . y. Informing student learning. y. Revising and refining teaching strategies.

R OW NT REE Site layout QUARTER - … · Step into the future derwenthorpe The QUARTER R OW NT REE TAN TAN TAN TAN TAN TAN TAN TAN TAN PRI PRI CRO DAI DAI TAN PRI PRI PRI TAN TAN

Allen chui entertainment properties

Presenter : Tan Shao Yong Group Members : Ang Chui Noy Michelle Lai Hiu fong Sarah

Ernest Chui PhD, EdD(Bristol) Associate Professor

Tan Cerca Tan Lejos

WONG Chui Yim - VU Research Repository

Getting Serious About Userfriendly

APA 7th Edition (2020) - library.kedah.uitm.edu.mylibrary.kedah.uitm.edu.my/v1/images/notaAPA/APA_7... · APA 7th Edition (2020): What must you know? (Part 2) Ms. Ho Chui Chui Senior

Tips to develop userfriendly mobile applications

BENTHIC HARMFUL DINOFLAGELLATE ASSEMBLAGES IN A … MRI 38 11-21.pdf · Toh-Hii Tan 1, Po-Teen Lim 2, Aazani Mujahid 2, Gires Usup 3 and Chui-Pin Leaw 1 1 ,QVWLWXWH RI %LRGLYHUVLW\