2022.2

www.interfacesketch.com.Theirtemplatesaredesignedtohelpyousketchyourdesignsfordif-
ferentdevicesonpaper.SketchingtoolsandrelatedtechniquescanbefoundonZurb'swebsite:
Sharpies,ShadersandHighlighters.
4. Creating the form.Createtheforminaccordancewithwebdesignprinciples;see"Formdesign"
below.
5. Testing the form.Evenifyoudidproperresearchandshowedamockup,customersorusers
willlikelycomeupwithnewrequirementsoncethey'veseentheinitialliveversion.Beprepared
andplanforthis,too.
Formdesign
Paperformsandwebformsareverydifferentinnature.Forexample,paperformshaveafixedsize:the
sizeofthepapertheyareprintedon.Webformscanbeviewedonscreenswithdifferentsizes,inpor-
traitorlandscapeformat.Paperformsarefilledoutwithapen,whilewebformsarefilledoutusing
one'sfingersorastylus.Goodformdesignrequiresanunderstandingonhowusersenterinformation
onamobiledeviceandhowtheyexpecttheformtolookandbehave.
Tip: IftheCOTGFormreplacesapaperform,itcanbetemptingtosticktotheoriginallayoutfor
thesakeofrecognizability.Don'tfallintothattrap.Intheend,theusers-customersandemploy-
ees-willbehappierwithauser-friendlyformthatadaptstodifferentscreensizesandlookslikeit
wasdesignedfortheweb.
MostdesignguidelinesforwebformsapplytoCOTGformsaswell.Twokeyconceptsareresponsive
designandusability.
Responsive design
ResponsiveDesignis"anapproachtowebdesignaimedatcraftingsitestoprovideanoptimalviewing
andinteractionexperience-easyreadingandnavigationwithaminimumofresizing,panning,and
scrolling—acrossawiderangeofdevices".(Source:Wikipedia.).
WiththeCOTGappforAndroidoriOS,COTGformscanbeviewedonawidevarietyofmobiledevices,
withdifferentscreensizes.Aresponsivedesignwilladapttothesizeandorientationofthescreen,to
avoidnavigationtaskslikezoominginoroutandscrollinghorizontally.Thelayoutmaychangetooptim-
izetheuserexperienceonthatdevice:informationthatisshownsidebysideonalargertabletmaybe
stackedwhenviewedonasmallerdevice.
Itiscomplicatedandtimeconsumingtocreatearesponsivedesignallbyyourself.Thereforeitisadvis-
abletostartcreatingaCOTGformwithaCOTGTemplateWizard(see"CaptureOnTheGotemplate
wizards"onpage525).AllWebandCOTGTemplateWizardsinConnectDesignermakeuseofthe
ZurbFoundationfront-endframeworktomakethetemplatesresponsive(see"UsingFoundation"on
page528andhttp://foundation.zurb.com/learn/about.html).
Page 523