2022.2

Tip: IntheDesigner,youcantesttheresponsivenessofaformusingtheResponsive
Designbuttonatthetoprightoftheworkspace.
Somebrowsersalsoletyoutesttheresponsivenessofaform.InFirefox,forexample,select
Developer>ResponsiveDesigntoviewaformindifferentsizes.
Usability
Usabilitydefinestheeaseofuseofaform.Isthelayoutintuitive?Aretheformelementseasytotapon
amobiledevice?Avisuallyconsistentdesignallowstheusertofollowtheflowwhilefillingouttheform.
Belowaresomekeyusabilityaspectstokeepinmindwhendesigningforms.
Provide clear labels.Manymodernwebsitesshowlabelsinsidetheactualforminputswhiletheyare
empty.Thissavesspaceontheform,butoncetheuserhasentereddatathelabelisnolongervisible.
Showalabelatalltimestohelptheuserreviewhisinput.
Use font sizes that are big enough.Onpaper,smallerfontsareeasiertoreadthanonawebform.
Ofcourse,onatouchscreenyoucanzoominandout,butauser-friendlyformdoesn'tforcetheuserto
dothat.
Provide touch areas that are large enough.COTGformsareusedonamobiledevice(intheCOTG
app).Makesurethattheusercaneasilytaptheformelements,hyperlinksandbuttons.Theindexfin-
gerofmostadultscoversanareathatisbetween45and55pixelswide.Thereshouldbeenoughwhite
spacebetweentheforminputssotheuserwon'taccidentallyputfocusonthewrongelement.
Visually group related information.Useheaderstomarkasection.Thismakesiteasiertonavigate
theform.Applyingalargefontsizeandbackgroundcolorwillmakethemstandout.YoucanuseFound-
ation'soff-canvasmenuandaccordeon(collapse)functionalitytomakeiteasiertonavigategroupsof
inputfields.
Provide feedback.Showwhatinputdataisexpected,clearlyidentifywhichfieldsarerequiredand
showerrorswhentheentereddatadoesn’tmeettherequiredformat.
Capture OnTheGo form characteristics
Reusable forms
CaptureOnTheGoformscanbesingle-useorreusable.Thisdoesn'tdependonthedesign(although,
ofcourse,thisshouldbereflectedinthedesign).WhatmakesaformreusableisasettingintheOutput
toCaptureOnTheGoplugininWorkflow;seeOutputtoCaptureOnTheGo.IntheCaptureOnTheGo
appareusableformiscalleda'template'.
Page 524