Welcome to 15 Minutes Intro to
Transcript of Welcome to 15 Minutes Intro to
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--·-'~ ':;-::;:.----....
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