User Interface Design for Touch Screens

2

Content

1. It’sallabout‘touch’............................................................................................................................................. 3

2. Understandthetechnology............................................................................................................................4

3. Can’ttouchthis.................................................................................................................................................... 7

4. Makeagoodproduct.......................................................................................................................................10

4.1.Determiningthepurposeofyourtouchscreensoftware.........................................................10

4.2.Basicdesignprinciples............................................................................................................................. 14

5. Keepitsimple...................................................................................................................................................... 16

3

It’s all about ‘touch’

Manypeoplethinkthattouchscreendevicesarearecentphenomenon,butinfacttheyhavebeenaroundforquitesome time.Atfirst, touchscreensweremainlyusedforcorporateandbusinessapplications,suchaspaymentterminalsatgasstations,cashregistersystemsatsupermarketsorcontrolpanelsinmeetingrooms.

Therewasarelativelysmallpenetrationoftheconsumer market.Thefirsttouchscreendevicesthatweremadeavailabletoconsumerswere–amongstothers-bulkyPDAsintheninetiesandportableGPSdevicesintheearly2000’s.WecanallrememberthosefirstPalmPDAswithamonochromescreenthatwereconsideredtobehigh-techatthetime.Seemslikeagesago.

In2007,Apple’s introductionof the iPhonecausedamajor boom in touchscreendevicesfor theconsumermarket.Thisnotonlymanifested itself throughanabundanceof touchscreenmobilephones,butalsoencouragedothersectorstodeveloptouchscreenproducts.

Companies started embracing the touch screen market potential by building mobile websites, specificapplicationsforiPhoneandAndroidandevenreleasingtheirowntouchscreenproducts.For example, some car manufacturers switched from hardware controls to full touch screen forbuilt-inradioandnavigationsystemsandtabletPCshaveresurfacedafterfailingmiserablyafewyearspreviously.

There’snodoubtthat‘touch’hasbecomethelatesthottrendintechnologyandeveryoneisjumpingonthewagon.Ofcourse,thetrendfactorisnottheonlyreasonwhytouchscreensarebooming.

The technology offers some significant advantages. For many users it’s the most user friendlyandintuitivewayofgivinginputtoadevice.Touchscreensallowalotofflexibilitytowardsfutureevolutions of the product, whereas with typical hardware user interfaces, the functions have tobedefinedmorepreciselyfromthestart.Theuserinterfacecanalsobeconstructedinlayers,onlyrevealingfunctionswhentheyareneeded.

However, you can’t forget that developing software for a touch screen device has significantimplicationstowardsuserinterfacedesign.

4

Whenyoustartoffdevelopingatouchscreenproduct,thereareafewthingstoconsider.Firstofall,atouchscreenisnotjustatouchscreen.Thereisawiderangeoftouchscreentechnologyavailableand each one has an impact on the user interface. More than that, the choice of touch screentechnologyisakeyfactorfortheuserinterfacedesign.

Outofthemanytechnologiesavailable,twotypesoftouchscreensemergeasmostsuitableforuseinbothbusinessandconsumerproducts,capacitiveandresistive.Thenamesofbothtechnologiesrefertothewaytouchinputiscapturedandsenttothedevice’scontroller.

Capacitive touch screen technologyAs its name says, capacitive touch screens use capacitance to register input (capacitance is theabilityofabodytoholdanelectriccharge).Thehumanbody–morespecifically,theuser’sskin-actsasaconductor.A‘touch’disturbsanelectrostaticfield,whichisusedtodeterminethelocationofthetouch.Thatlocationisthensenttothecontrollerforprocessing.

Schematic representation of capacitive touch screen technology 1

Understand the technology

“Before you start designing the user experience of your touch screen software,

you need to ask yourself: What is the software meant for?”

5

A capacitive touch screen has some significant advantages.This screen type offers an excellentquality of interaction. Finger touches are registered very fluently. The software reactsinstantaneouslytotouchandmovementsareexecutedsmoothlyandaccurately,whichheightenstheuserexperience.

Theuseofskinasaconductorisalsooneofthemaindrawbacksofcapacitivetouchscreens,e.g.a user wearing gloves cannot operate it. Furthermore, capacitive touch screens are expensive toproduceandwillinevitablyincreasetheretailpriceoreffectivecostoftheendproduct.Thisiswhycapacitivetouchscreensaremorecommoninhigh-endconsumerproducts,suchassmartphones.

Resistive touch screen technologyA resistive touch screen is composed of multiple layers. Two of those layers are separated by anarrowgap.Whenthescreenispressed,thosetwolayersmakecontact,whichcausesachangeinelectricalcurrent.Thischangeis registeredasatouchandsenttothecontroller.

Schematic representation of resistive touch screen technology 2

Oneofthemainadvantagesofresistivetouchscreentechnologyisthepossibilitytouseanobject,suchasastylusorpen,totouchthescreen.Userscanmoreeasilymanipulatesmallobjectsintheuserinterfacebyusingthenarrowtipofastylus.Sincethescreenusespressuretoregisteratouch,theusercanperceivethisasaformoftactilefeedback,likeyougetwhenpressinganactualbuttononthemouseorakeyboardkey.

6

Compared tocapacitive touchscreens, resistive touchscreensarecheaper toproduceand-thus-theobviouschoiceforbudget-friendlyproducts,suchasportableGPSdevices.However,thetouchinteraction on a resistive touch screen is a lot less fluent. Because the user has to press downon the screen, they perceive the movements to be less smooth or accurate. Also, implementingmulti-touchgesturesrequiresmoreadvancedtechnologies,whicharemoreexpensive.

Note: Surely, you have noticed that the technical description above is a high-level overview of capacitive and resistive touchscreen technology and is by no means exhaustive.

HardwareNotonlythetypeofscreenthatyouareusingisimportantfordeterminingyouruserinterface,buttherestofthehardwareisequallydecisive.Considerthefollowinghardwareoptions:

• Adevicewithafulltouchscreenandanabsoluteminimumofhardwarekeys(e.g.Apple’siPad). Thismeansthatalltheinteractionwiththedeviceandinputhavetobeaccomplishedusingthe touchscreen.Evidently,theuserinterfacemustbeadaptedtothat. • Adevicewithatouchscreen,combinedwithhardwarebuttons(e.g.Saab’sbuilt-inradioand navigationsystem).Theuserinterfacehastobeclearonwhichtaskscanbeperformedusing thedevice’stouchscreenandwhichtaskrequirethehardwarebuttons. • A device with a touch screen, combined with a fully functional keyboard (e.g. most ATM’s). Thiscombination isprobably themost intricateone,asnavigationand interactionhas tobe supportedbyboththetouchscreenandthekeyboard.

Itisclearthat,whateverchoiceyoumakeconcerningtouchscreentechnologyandhardware,the user interface of the device’s software is affected. Youneedtofindtheproperwayofnavigating,providingfeedback,inputtingtext,makingselections,etc

7

Designingatouchscreendevice,whetheritisforconsumerorbusinessuse,isnever ‘a quick job’.Whenatouchscreenproductfails, thefailureisoftenlinkedtosomecommonlymademistakes.Theseareoftenamixtureofshortcomings in thedesignof thehardwareandtheuser interfacedesign.

Whatfollowsaresomekeymistakeswhendevelopingtouchscreenproducts:

Simply porting desktop softwareDesktopsoftware–oranykindofnon-touchscreensoftwareforthatmatter-cannotbeportedtoatouchscreendevicewithout analyzing the impact on the user interface and optimizing the user interface for touch interaction.Forexample,acomplexsoftwarepackagesuchasSAPcannotbetransferredtoatouchscreenwithoutsomeseriousre-workoftheprogram’suserinterface.Youcan-notexpecttorundesktopsoftwareonatouchscreenandhaveitworkflawlessly.

Inconsistency between hardware and software interactionWhen combining a touch screen with full keyboard support, the user interface does not alwayssupportafluent interactionbetweenthetwo.Considerthefollowingexampleforatouchscreenproduct: theuserselectsamenuitembytouchingacontrolon-screenandthenhastonavigatethesub-itemsin thatmenubyusing thearrowkeysonthekeyboard.This inconsistentbehaviorweakens the user experience, because the user constantly has to switch focus and movementsbetweenthescreenandthekeyboard.

Flawed user interface designMany touch screen devices on the market do not use an appropriate user interface design that serves the purpose of the device. Some products are equipped with a stylus, yet use very largebuttons,whichmakes thedeviceveryawkward touse.On theotherhand,products that relyonfinger interaction use controls that are too small to be manipulated accurately. For instance,Pharos’sEZRoadportableGPSuseslargebuttonsformostcontrols,whichmakethemeasytotouchandusewithyourfinger.However,whennavigatingviaamap,theon-screencontrolsaretoosmalltotouchandrequireextremeprecisionfromtheuser.Thiscanbequitehard,especiallywhenyouaredriving.

Can’t touch this 3

“Designing a touch screen device, whether it is for consumer or business use,

is never ‘a quick job’.

8

Pharos’s EZ Road uses very small buttons for zooming

Neglecting user interface standardsAppleandGoogleofferasetofuserinterfacestandards and guidelinesforapplicationdevelopers,yettechnologycompaniesdonotalwaysadheretothemverystrictly.Thisisasurewaytofrustrateusers,astheyrelyheavilyonbehaviorandinteractionthattheyalreadyknowwhenusingtheap-plications(theso-called‘Transferofknowledge’).Triplog,aniPhoneapplicationtokeeptrackofyourmileageand tripcosts, isaperfectexampleofdisregardfor the iPhoneuser interfacestandards,whichresultsinaverysloppyandhard-to-useinterface.

The user interface of iPhone application Triplog

9

Unsuitable hardware designThereissomebadtouchscreensoftwareoutthere,buttherearealsoalotofbadhardware designs.For instance,manydeviceshaveaprotrudingbezelaround the touchscreensurface,so that thescreenisslightlysunkintothedevice.Thiscanmakeitquitehardtomanipulatesmallercontrolsthatareontheedgeoftheuserinterface,suchasclosebuttonsforwindows.

HTC smartphone with protruding bezel

Thehardwareshouldalwaysbeergonomicallydesigned. In industrialsettings, touchscreensareoftenverticallymountedpanels,whicharenotsuitedforperformingcomplextasksorworkflows.Theuser’swristsandneckarequicklystrained,whichcanleadtolong-terminjuries.

10

Thereisawayofdesigningagreatuserinterfacefortouchscreendevices,whetherit’sforconsumerproductsorindustrialuse.Itcomesdowntotwothings: • Determiningthepurposeofyourtouchscreensoftware • Applyingsomebasicdesignprinciples

Determining the purpose of your touch screen software

Before you start designing the user experience of your touch screen software, you need to askyourself:What is the software meant for? Choosing the purpose of your software is based on acombinationofthetasksthattheuserwillperformwiththesoftware,thecontextandthechosenhardwarethatwillhousethesoftware.Generally,therearethreepossiblecombinations: • Amixofatouchscreenwithadvancedhardwarekeys • Amixoftouchscreenandbasichardwarekeys • Fulltouchscreen

Eachoptionhasanimpactonuserinterfacedesignandthisimpactneedstobeconsideredbeforedevelopingyoursoftware.

Mix of touch screen and advanced hardware keys (keyboard)Inthiscase,theuserperformssomeprimarytasksonthetouchscreen,butstillreliesheavilyonkeyboardand/ormouseinteractiontoperformothertasks.Inmostcases,thetasksthatcanbeper-formedonthetouchscreenarealsosupportedthroughkeyboard/mouseinteraction.Themostfre-quentlyusedexampleofthiscombinationarelaptopswithatouchscreen,suchastheHPTouchs-mart,ortouchscreenmobilephoneswithafullhardwarekeyboard.

HP Touchsmart laptop with touch screen

Make a good product

11

Whendesigningsoftwareforthistypeofdevice,therearesomeground rulesthatyouhavetotakeintoaccountconcerningtheuserinterface: • Useaminimum resolutionof23x23pixels(or13x13pixelsfordialogunits)forallcontrolsthat aresupportedonthetouchscreen.Whiletouchinputisnotprimaryonthesedevices,controls still have to be big enough to be manipulated via touch or the touch screen itself serves nopurpose.

• Usetotal hardware support throughout thesoftware.Sinceusersarenotobliged touse the touchscreen,all interactionwith thesoftwarehas tobepossibleusingonlyhardware input devicessuchasakeyboardormouse.Microsofthasincluded‘touchpossibilities’inallitssoftware productssincethereleaseofWindowsVista,inordertoaccommodatebothtouchscreenusers andregulardesktopPCusers.Forexample,theribboninMicrosoftWordfeatureslargerbuttons onprimaryfunctions,tomakethemuseableonatouchscreen,despitethefactthatitisprimarily usedondesktopPC’s.

Microsoft uses larger buttons in software for primary functions

• Avoid complex interactionswheretouchinputandhardwareinputhavetobecombinedinorder tocompletea task.For instance, interactionswhereyoufirsthave toselectan inputfieldby touchingthecontrolonscreenandsubsequentlytypeintextusingakeyboard.

12

Mix of touch screen and basic hardware keysInthiscase,allprimarytasksinthesoftwareareperformedusingtouchinteractionandsecondaryfunctions,suchasmeretextinput,areaccessibleviahardware.Thathardwarecanbeakeyboard,butcanalsoconsistofspecifichardbuttons.Forexample,thetouchscreenofabankterminal(ATM)isusedforallprimaryactions,suchaswithdrawingmoney,consultingaccounts,etc.Thehardwarekeyboardisusedforsecondaryfunctions,suchasenteringapincodeoramounts.

Fora fluent touch screen software interaction,considerthefollowing: • Useaminimumresolutionof40x40pixelsforprimarytouchcontrols.Thelargersizeofcontrol requireslessprecisionoftheuserandguaranteesbetterresults.

• Providesupportforallcommonlyusedgesturesontouchscreens,suchaszooming,rotating, swiping,dragging,etc. • Makesurethattheuserinterfaceofthesoftwareprovidesenoughvisualfeedbackfortheuser, whichisadjustedtotouchscreeninteraction.Forinstance,whenauserpressesonacontrol, thatcontrolshouldgetadifferentvisualstate, indicatingthatanactionwill takeplaceupon release. • Avoidusing‘fingernail’controls,suchasspinboxes.Thiskindofcontrol is toosmall to touch withanormalfingerandforcestheusertousetheverytipofthefingerorfingernail.Thiskind ofinteractionisnottouchfriendlyanddemandsahighlevelofaccuracyandprecisionfromthe user,thatisnormallyassociatedwithusingamousepointerondesktopsoftware.

Spin boxes are not touch-friendly.

13

Full touch screenInthiscase, thedevicehasonlyatouchscreenandcanhaveaverylimitednumberofhardwarebuttons,suchasanon/offbuttonorhomekey,toperformalltasks.Thismeansthatallprimaryandsecondaryinputhappensviathetouchscreen.Theuserinterfaceofthesoftwaremustsupportallactionsusingtouchinput,includingtextinput.Apple’siPadisagoodexampleofaproductthatusesthisparadigm,butitcanalsobefoundforexampleincontrolpanelsinmeetingrooms.

Sinceafulltouchscreendeviceisdependentonthequalityoftouchinteraction,theuserinterfacemustbeoptimaltoperformtasksusingtouchinput,whichrequiresspecificattention:

• Optimizetheuserinterfacefortouchinteraction.Iftheuserhastoperformeverytaskviatouch input,theuserinterfacemustaccommodatethisinaveryeasyway.Forexample,allowusersto performasmanycommandsaspossibledirectlyontheuserinterface,i.e.donot‘hide’primary actionsbehindmenus. • Makesurethattheuserinterfaceisforgiving.Fulltouchinteractionwillresultinlessaccurate inputfromtheuser.Youhavetodesigntheuserinterfacetoanticipatepossibleerrors.Youcan dothisby: • Allowingtheusertomakeandcorrectmistakes; Youcandothisbyprovidingundo-optionswherepossible,allowinguserstoslideawayfrom touchtocanceltheaction,etc. • Providingsimpleandstraightforwardactions; Complexworkflowsandheavilyinput-basedtasksarenotsuitedfortouchscreendevices.The interactionshouldbeaseasyandfluentaspossible. • Usingstandard controls. Whenyouusecontrolsthatuser isfamiliarwith(buttons,options,sliders,…),heis likelyto makelessmistakes. • Avoid or reduce input that is not touch-friendly. A full touch device is not made to handle heavy text input (e.g. writing long papers) or precise actions (working with photo-editing software).Youcanavoidheavytextinputbyofferingpredeterminedchoicestotheuser,such asalistofoptionsinsteadoffreetextfields.

14

Basic design principles

While much of the user interface of your touch screen device is determined by the purposeand hardware of the device, there are also some basic design principles that apply to all touchscreeninterfaces.

InteractionInteraction is the most important aspect of the user interface of a touch screen device. A touchscreenuserinterfaceworksbestwhenit’skeptsimpleandclean.Thisimplicatesthatthenumberoffunctionsthatthedeviceoffersshouldbelimited.Ifyouarehavingdifficultiesincorporatingallfunctionsinyouruserinterface,maybeyoushouldreconsider whether touch screen is the right way to go for your software.

Touchscreensoftwaredotesondirectnessandeasyaccess.Userswanttointeractdirectlywiththesoftwareandareinvitedtodosobecauseofthetouchscreen.Theuserinterfaceshouldsupportthisbyimmediatelyrespondingtoactions,givingfeedback,allowinguserstomanipulatetheuserinterfacebyusinggestures,etc.Tointensifythe‘touchexperience’,theamountofactualuserinput-i.e.typingtext-shouldbeminimized.Userswillaccomplishtheirtaskalotquickerwhentheyhaveapredefinedsetofoptionsavailabletochoosefrominsteadoffreeinput.Forexample,supermar-ketapplicationAppieoffersusersalistofproductstochoosefrom,insteadoflettinguserstypeinproductnames.

NavigationA good user interface design for a touch screenproduct has to be clean and simple and thishas to be reflected in the way users navigate inthe software. Complex navigation with multiplesublevels and lots of menus does not work wellwhen you only have your fingers to manipulatethesoftware.Thenumberofsublevelsshouldbeminimal. If your navigation does contain manysublevels, maybe the information architectureshouldberevised.

Theuserinterfacebenefitsmostfromasequentialtype of navigation, where each sublevel ispresented on a separate screen. This is becausemosttouchscreenproductshaveasmallerscreenthan normal desktop PCs. When users only seethe relevant information on screen, they cancompletetheirtasksmorequicklyandefficiently.

iPhone application Appie

15

Inanycase,thenavigationofyoursoftwarehastobeconsistent.Donotmixasequentialnavigationwithmultidimensionalnavigation.Besuretoalwaysprovideawaybackwhentheuserisnavigationbyuseofback-buttons,abreadcrumbtrailoradedicatedhomebutton.Thisway,userscanalwayscanceltheirnavigationaction.

Sequential navigation on Apple’s iPhone

ControlsForcontrolsintheuserinterfaceoftouchscreensoftware,therearesomeguidelinestofacilitatetheuserexperience: • Design your buttons large enough Mostofthetime,youcannotpredictwhoisgoingtouseyoursoftware.Somepeoplehavelarge handsorareunabletopointaccuratelyatsmallobjects.Theprimaryactioncontrolsintheuser interfacehavetobebigenough,sothattheydonotrequireprecisionoraccuracyfromtheuser. Donotforgetthatspeediscrucialfortouchscreensoftware.Usershavetobeabletoperform ataskveryquickly.Forexample,makethetouchareaaroundabuttonorcontrolslightlybigger, sothatusersdonothavetoaimtooprecisely.

Large buttons on TomTom main menu

16

• Use standard controls Whenyouusestandardcontrolsinyouruserinterfacethatusersarealreadyfamiliarwiththe learnabilityofyoursoftwareisincreased.Donottrytocomeupwithclevercontrolswhencheck boxes,optionbuttonsandactionbuttonswillgetthejobdone. • Allow the use of gestures Commonlyusedgestures,suchasdraggingandswiping,canreduceyourneedforuserinterface controls.Forinstance,whenausercanscrollonascreenbyusingaswipeordragmotion,the needforarrowbuttonsorscrollbarson-screeniseliminated.Multitouchgestures,likepinching and rotating, can also increase the flexibility of the user interface, but also means a steeper learningcurvefortheuser. • Give your user interface controls enough space Controlscannotbetooclosetogether,asthatwillincreasetheerrormargin.Ifasetofoption buttonsisplacedtooclosetogether,thechancethatauserwillaccidentallyselectthewrong optionisfargreater.

Keep it simple

Firstofall,thenumberoneruleofdesigningauser-friendlyproductalsoappliestotouchscreendevices:always involve your users during the development of your product.Userfeedbackiscrucialduring every stage. Focus groups and task/context analysis help to determine the users’ needs,usabilitytestsduringthedevelopmentpointoutpossibleobstaclesandlikeabilityassessmentsareexcellenttechniquestodiscoverhowusersrespondtothetotalpackageofyourproduct.

Theuserinterfaceofatouchscreendeviceisdifferentthanthatofregulardesktopsoftware.Usersaremeanttotouchit,whichisaninteractionthatshouldbebothintuitive and consistent.Sinceeveryoneknowshow touse theirfingers, themanipulationsof touchscreensoftwareshouldbejustasnatural.Ontopofthat,theuserinterfacehastobeconsistentwithhowweinteractwithreal-world objects. We move a page on the table by using a sliding or dragging motion. Thesemotionsshouldhavethesameeffectwhenwewanttomoveapageonthetouchscreen.

17

About Human Interface Group

Human Interface Group is Europe’s leading usability consultancy. Human Interface Group hasbeen coordinating usability projects for almost 20 years for a wide variety of larger and smallercompaniesandpublicauthorities.

We also have access to an extensive network of usability professionals throughout the world.Human Interface Group is a partner in the International Usability Partners network, anestablished network of independent usability companies who have joined up to provideuserexperienceservicesworldwide,fromNorthAmericatotheFarEast.

Curious about how we can help you with your touch screen product?

Visit www.higroup.com

Mail info@higroup.com

Call +32 (0) 15 40 01 38

Author: Nico Raes

Whendesigning theuser interfaceof touchscreensoftware,youhave to take intoaccount thatno human is the same.Theycomeinallsizesandshapes.Someuserscanhaveverybighandsandfingers,whileotherusersmaynotbeabletomanipulatecontrolswithgreatprecision.Forexample,atouchscreenkioskforbuyingbusticketsisusedbyyoungteenagers,aswellasbyelderlypeople.Iftheuserinterfaceofthekioskrequiresextremeaccuracyandprecision,itwillsurefailtoreachitsentiretargetaudience.

Finally,donotforgettoengageyourusers.Theuserinterfaceofyourtouchscreensoftwarehastobeinvitingandusershavetowanttotouchit.Don’tforget:yoursoftwarecanbethemostuser-friendlyintheworld,ifitlooksboring,nooneisgoingtowantto‘touch’it.

1. Source: http://www.electrotest.com.sg/Capacitive_Touch_Screens.htm

2. Source: http://www.touchscreenguide.com/touchscreen/res.html

3. dixit MC Hammer