Welcome to 15 Minutes

Intro to eForms Design Best Practices ~

The Elements • Labels • Input fields • Radio buttons • Check boxes (choice) • Pull/Drop-down

• Date picker • Incremental Selector • Help Button

A vehicle serving two parties engaged

in a dialogue

¢Q'!\' , - .,..,

How does a form get to exist (the conception)

:::: : ~-D

El

-- I¢",'o, -" ' 0 , - .,.., ...... ,_ ....

_ _ I , ... -1 , _.-: _ ........ ' , ~-D

El

""_ ... -"

...... ,-, ... - -I , --D ---_o_0_ ... 1=-!I!511

--:= ...... H ,

~-D g,_ ... _--

El

, Best practice 1'1 • Keep t 5 mple

(Evaluate question a ked Be uee net)

• U eanOutsde-n perspective rather than In Ide-O

and how it can turn into a monster

-O\r Fee<llock Form

QQ xO I htte:"OIScomeon~.com7form.htm I (§: )

User Feedback Form

Yw: Nanel I Yw: e·Moi I I

Yw: Message 1

I &bmit I

. ......

-O\r Fee<llock Form

QQ xO I htte:"OIScomeon~.com7form.htm I (§: )

User Feedback Form

Frst Nome I I Lost Nome I I Yw: e-Moi I I

I Choose 0 s>.i>ject H Your Message

I

I &bmit I

. ......

-O\r Fee<llock Form

QQ xO I htte:"OIScomeon~.com7form.htm I (§: )

User Feedback Form

Frst Nome I I Lost Nome I I

Adaess

Phone I I Gender 0 Mole 0 Femole

Age I Select You- Age Group H You- e-Moi I I

I Choose 0 aooject H You- Message

I

Ii11' I would like to receive regular normation

I 800mit I

. ......

-O\r Fee<llock Form

QQ xO I htte:"OIScomeon~.com7form.htm I (§: )

User Feedback Form

Frst Nome I I Lost Nome I I

Address I I CitY! I

PrOVflee I Select Yoor PrOVflee I y I Posto! Code [ I

Phone I I Gender 0 Mole 0 Femole

Age I Select Yoor Age Groop H Yoor e-Moi I I

I Choose 0 aooject H Yoor Message

I

Ii11' I would like to receive regular normation

I SOOmit I

. ......

-O\r Fee<llock Form

QQ xO I htte:"OIScomeon~.com7form.htm I (§: )

User Feedback Form

Frst Nome I I •

Lost Nome I I •

Address I I •

CitY! I • PrOVflee I Select Yoor PrOVflee I Y I •

Posto! Code [ I· Phone I 1 •

Gender 0 Mole 0 Femole

Age I Select Yoor Age Groop IYI •

Yoor e-Moi I 1 • I Choose 0 aooject H •

Yoor Message • I

Ii11' I would like to receive regular normation

Ii11' I hove read and accept the pr;yocy and user oqeement terms

I &bm~ I . ......

I

Best ractice #1 • Keep it simple

(Evaluate questions asked, Be succinct)

• Use an Outside-In perspective rather than Inside-Out

Expedia eliminated in October 2010 one label+field: "Company". The result:

12 million of profit a year

Best Buy "Login" and "Register" were replaced by "you do not need an account to buy - check out as guest". The result? 1.5 million increase in sales first month, 300 million the first year!

Best practice #2 Once deployed keep an eye on:

• customer support records • site logs • any other site analytics

Path to completion • Name that Form • Use a start page (if needed) • Clear Scan Lines • Minimal Distractions • Progress Indicators (total pages

vs. percent complete vs. steps, current position, form status)

Path to completion ""_ ..... "''"--Q 0 x 0 j "ph,ffi'T""I""'""*"' '''''' t ~ 00 x (;) ' ''''p'''''''''T'?;;;;:X;m'''''

,-.,--""' ... ------I ....... I

0. .. Feedback Form

".-.~'. , ... - 1 I " - - . ! ,

oo,! I . ........ \ ...... , ... Pr ...... ,~ I ·

_Codo~·

_ 0_0'_ .... I ...... v ... ... ...,'.!·

,,....-1 I ·

'--Cl 13 '_ ... .. , ..... , __ Iil' ,-. , ... ""_ .... ... ..,. _ __ ... _ _

1...- 1

User Feedback Form

,-.,---.. , .... _-- -u ... FHdback Form

--~'. "",_I ' " _ _ I "

e.,. ( " ..... ,.,. 1-, .... .. -'.,· _Codo c:::::Jo "'- ( _ 0_0 _

... 1 ...... , ... ",,',-,. , · .... ...... ( ( .

'--Cl iii' I _ .. .. ' .. _,.~ __ o , .... , ........ _ .......... ... __ _

1...- 1

I c:>

Scanability and time to complete

Form ~mel lt

<;J 0 X {) I httE::' fOU'GOITIE:ont ·comIoIi!m'Ient.htm I <§ )

Commonly Used NOT Used

Y~ Fnt and loet Nome ,,,'''.- I I I I ·""'to""'....,"""" ... . _,....,. .,.", .. _-_ ...

Yo.x Frst aid Lost Nome ''''<-~'''''"''''"'''' Vo.x e-Mail .,,, ..... ,,,_. -""""-""-' I I I I

Vo.x e-Mail

Vo.x Frst aid Lost Nome I ~."''"'.- I I I Vo.x Frst aid Lost Nome _r_ .. """" ... _____ .. Id

--""-""'- Vo.x e-Mail ""'" " ... , ..... " ... 'oOl> I I I I Vo.x e-Mail

Vo.x Frst aid Loat Nome I I Are not used for one main reason:

Vo.x e-Mail ~"- I I answer comes before the qust lon -r .... "*>

-"""""'""-""'-........ ----.-,~,,--

....... ~" .. .......... ~o.x Fnt aid lost Nome I ----" ........ _n-. ... _'"'u'" ....

. "'-_ ............ ._-. ... " .. ..-~o.x e-Mail I ._...--. .. "1_ --,-... ",,"-

,.

Top Aligned + Fast to scan and complete + Accesibil ity + Easy to localize/translate + No coding (floats or tables) + Excellent for mobile - Require more vertical space

Your Fi s and Las Name Right Aligned + fast to complete + clear association label-field

+ requires less vertical space Your e· Ma'J - hard to scan (due to left rag)

\.IUIUIUUI1I1 V~ U

Your Fi s and Las ame

Your e·Ma'!

Your First and Lost Nome

Your e Moil Left Aligned + fast to scan

+ requires less vertical space

- difficult association label-field - takes longer to complete

Lebels in the Input Field + requires least amount of space + excellent for common structures - no browser integrated solution - label looks like the answer - label dissapears at "TAB"ing - sometimes label gets submitted

our First and Lost Nome

Mateo Penzo eye-tracking and usability data

""'---___ ...... Time to complete x 2X 4X

http://www.etre.com

Best practice #3 Address

• scanability • time to complete • "TAB"-ing

Label = Question Input Field = Answer

e lltt~l,:zftT.g

Q-f-OJfI! ttffi (lJa~fJ:c ) l': iI!;MT.g

!t:t. CI'1-) • .---~

1£:& 17') 111") • • -------- ("''''h ~

"" • I!I" -------- <.,u

_jllfIlII jg\~"l''' '

••• jg\~'(l''' '

••• r--.r--r- ,"' .. ) .--- . r- . r- (U)

-~---'-

••• 111 .1~tlI ••• '1:..-lIall (11: " 8) .

7')1j"t-(ft ;/!i )

E"-/l.7~1-;l. .

E"-1\.7~ 1-;"( •• )

IIII. "~";>; IIIII"~L-;:t ( •• )

(."'_, r-------I I"'vl:O!. " f: I I*MI. ,

1"'''"1

• 'Ii""."""""" 'U; • • , "'~.",~"T."· .r~~~~~'''.~ ••• ''.~'A~~n~~·

fill ) 000-0000

•• 11 • •

"'!KllW • ,~ ,

",,, " ... r---------------' (~~ I

l.gl'1

o .,.;u ..... n, e ••• IITfi

••

,----, -, n.~ ... ,~~ .... <,,,,"")

e ... 0 .. :1:" 0 ....

,-,-, 0." " .. ' ".)

o __ "'!lilt; _ ::tlttIIU,'ltl,"_ 1:I!t.lI.l;J

e lI!l!lII':." _gT"lIIR .... "t..T( ~~ .'

,----,-,

--- "~-"" .-_ ........ _---._-_._ .. ---,.. -~.--­'*""----... _ ... -

.,-",--,..-.-,-"" .. --... -~- , .. --... --",--.- ...... -,"­----. .".. ......

Best practice #4 • Visually group related inputs (use light

background, single hairline etc.) • Don't use indicators if all fields are

mandatory or optional (use a statement at the beginning)

• If most fields mandatory, indicate optional ones and vice-versa

• Don't use arbitrary field lengths as they can mislead (suggest the answer)

Best practice #5 On Error

• Retain as much information as possible • Clearly signal where the error occured

Additional • Offer completion feedback • Format information (i.e. telephone #)

• Eliminate unnecessary input (i.e. credit card type since 3=AX 4=VI 5=MC)

Why "think mobile" is the future? Commerce: - Best Buy US - double every year via mobile (6M in 2008,

17M in 2009 and 30M in 2010) Social: - Twitter 16% start on mobile and 40% of new posts - FaceBook 250M mobile 33% of new posts Prod uctivity: - e-Mail accounts for 41 % of US mobile Internet time - 70% smart-phone users accessed email on the device

. Half a billion people accessed mobile Internet worldwide in 2009

. Many mobile Web users are mobile-only - in the US 25 percent of mobile Web users are mobile-only

Think mobile Enforces the 80/20 rule

J' Scotlabank'

• "''''''-"'-''''''''-;''-*''''-''---''--::...- ... __ ... ..... , _ .. _ .... , _~~.,.,....,_ c.o ..... ~ ... "'-'''''' "---"', ..... ,

=---::"00:=. _ ' e __ _

=.:'!""- ~--..-.-.... ----~-- ­Acc:ount 0 --, .. _-_ .. _-'=~=-....

Scoria Ole ---

SCENE' ScolJaCaro •

'=.r---~· '~

'=c--·-'~ ':;-::;:.----....

Google

Mobile Banking Login )

About Mobile Banking )

Other Mobile Services )

Services Outside Canada )

Rates )

Contact Us )

iPod ?

Kel'WonII : [

LClulIon : 1~1o ,.,_a

Country: ear-

.,.,.tOl C_: I I ~

W11t11n: 150 ..... _ 1 g .

Funct ion.: . .... _ F ..........

1:43 PM 95%~

iPod ? 1:44 PM 95%~

g~~ (~------------------------------------------------------~) [ Located in or near: 'iii

- .---Previous Next Done

Q w E R T y u I o p

space

4:34 PM 95 %~

m Canada Trust Apply I Sear<:h I Contact u. I L09ln: --

My Account:!;; Customer Service PrOducts .. Services Markets .. Resellrch Plllnning

Prot ect yo~ ..... 11 !rom .... II...,SQ"'.

Sboy a lert l TO will n~e, s.eoo urgeM alerts requesting perwrwol

InformalOoo sucn as, account numt)ers, passwords, SIN, driv~

l icense number, and date of birth . U anythinlJlool<s su.~dous report it to ~15I11noC:td ,com , Learn Hore.

Fran(:ais EasyWeb 11m.

Login to our secure financial services site

Not R.lIlste .... ?

• Register ClI1l1ne NOw

Access Card:

Web Password :

Ou aiptlon (O ptional )

,-----------,1 -• Personal 8an~lJl9

0 ""'"

forgOI PU i1

iPod ? 4:35 PM 95% ~

Login to our secure financial services site

Description (Optional)

Can't log in? - &: ) -~--~::;-------' Access Card:

Online Security

You .. III tKltIv un,ok.l, .y.nt from UNumIII'

Web Password:

o Remember my Access Card and Descriptjon

Forgot Password?

••

Form content

Where can I learn more? Resources

"Forms that Work - Designing Web Forms for Usability" Caroline Jarrett & Gerry Gaffney

Designing forms for SharePoint and InfoPath using InfoPath Designer 2010 Scott Roberts,Hagen Green, Jessica Meats Microsoft .NET. Development Series

"Web Form Design - Filling in the Blanks", "Mobile First" Luke Wroblewski

http://www.uxmatters.com/mt/ arch ives/2006/07I1a bel-p laceme nt -i n-form s. ph p

http://mobithinking.com/ mobile-ma rketi ng-too I sll atest -mobi I e-stats

http://www.etre.com

ThankYOU!

Your presenter Andrei Cojoaca B.Comm, PMP®, MCPM

Consultant • IT&C Infrastructure • Web development & Database Management • Business Start-up, PR, eMarketing • Technical logistics for events