Human Computer Interaction Miterm Lesson

The Midterm phase of the HCI course focuses on design principles, interface development, and user experience strategies that enable students to apply HCI concepts in real-world digital environments. These lessons delve deeper into interaction design, emphasizing how to build intuitive, functional, and aesthetically pleasing interfaces.

Students learn to analyze user needs, create meaningful personas, and design interactive systems that prioritize usability. This stage also introduces usability evaluation techniques and heuristic analysis, equipping students with tools to critically assess interface effectiveness.

1. INTERACTIVE SYSTEM
DESIGN

2. Objectives
Learnalltheaspectsof
designanddevelopment
ofinteractivesystems,
whicharenowan
importantpartofourlives.
INTERACTIVE SYSTEM DESIGN
Thedesignandusabilityof
thesesystemsleavesan
effectonthequalityof
people’srelationshipto
technology.
Knowaboutdifferentweb
applications,games,embedded
devices,etc.,areallapartofthis
system,whichhasbecomean
integralpartofourlives.

3. Untilthe1980salmostallcommercialcomputer
systemswerenon-interactive.Computeroperators
wouldset-upthemachinestoreadinlargevolumes
ofdata–saycustomersbankdetailsand
transactions–andthecomputerwouldthen
processeachinputandgenerateappropriate
output.
THE PAST
INTERACTIVE SYSTEM DESIGN

4. Therearestilllotsofthesesystemsinplacebutthe
worldisalsonowfullofinteractivecomputer
systems.Thesearesystemsthatinvolveusersina
directway.Ininteractivesystemstheuserand
computerexchangeinformationfrequentlyand
dynamically.Norman’sevaluation/executionmodel
isausefulwayofunderstandingthenatureof
interaction:
THE PRESENT
INTERACTIVE SYSTEM DESIGN

5. THE PRESENT
1.Userhasagoal(somethingtoachieve)
2.Userlooksatsystemandattemptstoworkouthowhewouldexecutea
seriesoftaskstoachievethegoal
3.Usercarriesoutsomeactions(providinginputtothesystembypressing
buttons,touchingascreen,speakingwordsetc.)
4.Systemrespondstotheactionsandpresentsresultstotheuser.System
canusetext,graphics,sounds,speechetc.
INTERACTIVE SYSTEM DESIGN

6. THE PRESENT
5.Userlooksattheresultsofhisactionandattemptstoevaluatewhetheror
notthegoalshavebeenachieved
Agoodinteractivesystemisonewhere:
•Usercaneasilyworkouthowtooperatethesysteminanattemptto
achievehisgoals
•Usercaneasilyevaluatetheresultsofhisactiononthesystem
INTERACTIVE SYSTEM DESIGN

7. Inhisbook,‘TheInvisibleComputer’DonNormanargues
the case for ‘informationappliances’.
HesuggeststhatthePCistoocumbersomeandunwieldy
atool.Ithastoomanyapplicationsand
featurestobeuseful.Heseesthefutureasbeingone
whereweusespecific‘appliances’forspecific
jobs.Normanenvisionsaworldfullofinformation
appliances,aworldpopulatedbyinteractive
computersystems:
THE FUTURE
INTERACTIVE SYSTEM DESIGN

8. The Invisible Computer by Don Norman
DIGITALPICTUREFRAMES:
givethisframetoafriendorrelative.
Whenyouhavetakenanewpictureyou
wantthemtoshare,simply‘email’the
picturedirecttotheframe.Theframe
willbeconnectedtothenetwirelessly
THEHOMEMEDICALADVISOR:
sensorsinthehomewillenableblood
pressure,temperature,weight,body
fluidsandsoontobeautomatically
monitored.Acomputercouldusethese
readingstoassistwithmedicaladviceor
tocontactahumandoctor.
INTERACTIVE SYSTEM DESIGN

9. The Invisible Computer by Don Norman
EMBEDDEDSYSTEMSWITHINOURCLOTHES:
‘considerthevalueofeyeglassappliances.Many
ofusalreadyweareyeglasses…whynot
supplantthemwithmorepower?Addasmall
electronicdisplaytotheglasses…andwecould
haveallsortsofvaluableinformationwithusat
alltimes’[Norman99,pg271-272]
THEWEATHERANDTRAFFICDISPLAY:
atthemoment,whenwewantthetime
wesimplylookataclock.Soon,perhaps,
whenwewanttoknowtheweatheror
trafficconditionswewilllookatasimilar
device.
INTERACTIVE SYSTEM DESIGN

10. Manypeoplebelievewewillsoonenteranageof
ubiquitouscomputing–wewillbeasused
tointeractingwithcomputingsystemsaswearewith
otherpeople.Thisdreamwillonlybefulfilledif
thebusinessesthatproducethesesystemsandservices
clearlyunderstandtheneedsofuserssothat
thesystemscanbeusefulandusable.
THE FUTURE
INTERACTIVE SYSTEM DESIGN

11. USABILITYENGINEERINGisamethodintheprogressof
softwareandsystems,whichincludesusercontributionfrom
theinceptionoftheprocessandassurestheeffectivenessof
theproductthroughtheuseofausabilityrequirementand
metrics.ItthusreferstotheUsabilityFunctionfeaturesofthe
entireprocessofabstracting,implementing&testing
hardwareandsoftwareproducts.Requirementsgathering
stagetoinstallation,marketingandtestingofproducts,allfall
inthisprocess.
Concept of Usability Engineering

12. Goals of Usability Engineering
1
Efficient to use
2
Error free in use
3
Easy to use
4 5
Effective to use
Enjoyable in use
INTERACTIVE SYSTEM DESIGN
EFFICIENT FRIENDLY
FUNCTIONAL SAFE DELIGHTFUL
EXPERIENCE

13. DotDashBankPLChaslaunchedanewtelephone-based
bankingservice.Customerswillbeabletocheckbalances,
orderchequebooksandstatementsandtransfermoneyallat
thepressofabutton.Usersarepresentedwithlistsof
choicesandtheyselectanoptionbypressingtheappropriate
touchtonekeyontheirhandset.Thesystemdevelopment
teamiscertainthatthesystemistechnicallyverygood–the
speechsynthesisusedtospeakoutinstructions/optionsis
thestate-of-the-artandthedatabaseaccesstimesarevery
fast.
Back Story
INTERACTIVE SYSTEM DESIGN

14. Thenewbankingsystemdescribedisclearlyasuccess
fromasystempointofview:thedesignershave
thoughtaboutthetechnicaldemandsofthesystemto
achieve,forexample,highthrough-putofdatabase
queries.How,though,dousersfeelaboutthesystem?
Back Story
INTERACTIVE SYSTEM DESIGN

15. Thebank’scustomershaverespondedbadlytothenew
system.Firstly,userswanttoknowwhy
thesystemdoesnotletthemallowthemtoheardetails
oftheirmostrecenttransactions,paybillsand
doothercommonfunctions.Worsestill,theyfindthe
largenumberofkey-pressesneededtofindout
apieceofinformationtediousandirritating.Often,users
getlostinthelistofchoices,notsureofwhere
theyareinthesystemandwhattodonext
Back Story
INTERACTIVE SYSTEM DESIGN

16. Fromahumanperspectivethesystemisarealfailure.It
failsbecauseitisnotasusefulasitmight
beandhasveryseriousHCIproblems–itfailsbecausethe
designershavenotfullyconsideredwhat
wouldbeusefulandusablefromthecustomers’pointof
view.
Back Story
INTERACTIVE SYSTEM DESIGN

17. Foraninteractivesystemtobeusefulitshouldbegoal
centered.Whenapersonusesacomputertheywillhaveone
ormoregoalsinmind–e.g.,‘workoutmyexpensesforthis
month’;‘buyabookonmotormechanics’.Auseful
interactivesystemisonethatempowersuserstoachieve
theirgoals.Whenyoubuildaninteractivesystemyoushould
makesureyouusearangeofdesignandevaluation
methodstodiscoverthegoalsandassociatedsystem
functionalitythatwillmakeyoursystemuseful.
Usability

18. EFFECTIVENESS EFFICIENCY SATISFACTION
USABILITY COMPONENTS
Thecompletenesswith
whichusersachieve
theirgoals
Thecompetenceused
inusingtheresources
toeffectivelyachieve
thegoals
Theeaseofthework
systemtoitsusers.
INTERACTIVE SYSTEM DESIGN

19. Themethodicalstudyontheinteractionbetweenpeople,products,
andenvironmentbasedonexperimentalassessment.Example:
Psychology,BehavioralScience,etc.Acork-screwisatoolforopening
bottlessealedwithacork.Theyareusefultools.However,ifyouarea
left-handedpersonmostcork-screwsaredifficulttouse.Thisis
becausetheyaredesignedforright-handedpeople.So,foraleft-
handedpersonthecork-screwhaslowusability(despitebeing
useful).Usabilityisaboutbuildingasystemthattakesaccountofthe
users'capabilitiesandlimitations.Asystemthathasgoodusabilityis
likelytohavethefollowingqualities:
Usability Study

20. Usability Study
ROBUST
Asystemisrobustifauserisgiventhe
meanstoachievetheirgoals,toassess
theirprogressandtorecoverfromany
errorsmade.
FLEXIBLE
Usersshouldbeabletointeractwitha
systeminwaysthatbestsuittheirneeds.
Thesystemshouldbeflexibleenoughto
permitarangeofpreferences.
INTERACTIVE SYSTEM DESIGN

21. ‘Interfacesaresomethingwedoattheendofsoftwaredevelopment.
Wewanttomakethesystemlooknicefortheenduser’.
Unfortunately,manyanalystsandprogrammersmightagreewiththe
abovestatement.Theycannotseethepointinspendingtimeand
moneyonseriouslyconsideringandinvolvingtheusersindesign.
Insteadtheyconsidertheyknowwhatisbestfortheuserandcan
buildeffectiveinterfaceswithoutusingextensiveuser-centered
methods.However,experiencehasshownthatbadlydesigned
interfacescanleadtoseriousimplications.Ifyoubuildpoorinterfaces
youmightfind:
Usability Study

22. USABILITY STUDY
Yourcompanyloses
money asits
workforceisless
productivethanit
couldbe
Thequalityoflifeof
theuserswhouse
yoursystemis
reduced
Disastrousand
possiblyfatalerrors
happeninsystems
thataresafety-
critical
INTERACTIVE SYSTEM DESIGN

23. Thescientificevaluationofthestatedusabilityparametersasperthe
user’srequirements,competences,prospects,safetyandsatisfaction
isknownasusabilitytesting.AccordingtoInteractionDesign
Foundation,themainbenefitandpurposeofusabilitytestingis
toidentifyusabilityproblemswithadesignasearlyaspossible,so
theycanbefixedbeforethedesignisimplementedormass
produced.Assuch,usabilitytestingisoftenconductedonprototypes
ratherthanfinishedproducts,withdifferentlevelsoffidelity(i.e.,
detailandfinish)dependingonthedevelopmentphase.
Usability Testing

24. Prototypestendtobemoreprimitive,low-fidelityversions(e.g.,
papersketches)duringearlydevelopment,andthentaketheformof
moredetailed,high-fidelityversions(e.g.,interactivedigitalmock-
ups)closertorelease.Torunaneffectiveusabilitytest,youneedto
developasolidtestplan,recruitparticipants,andthenanalyzeand
reportyourfindings.
Usability Testing

25. AcceptancetestingalsoknownasUserAcceptanceTesting(UAT),isa
testingprocedurethatisperformedbytheusersasafinalcheckpoint
beforesigningofffromavendor.Letustakeanexampleofthe
handheldbarcodescanner.Letusassumethatasupermarkethas
boughtbarcodescannersfromavendor.Thesupermarketgathersa
teamofcounteremployeesandmakethemtestthedeviceinamock
storesetting.Bythisprocedure,theuserswoulddetermineifthe
productisacceptablefortheirneeds.Itisrequiredthattheuser
acceptancetesting"pass"beforetheyreceivethefinalproductfrom
thevendor.
Acceptance Testing

26. SoftwareTools
Asoftwaretoolisaprogrammaticsoftware
usedtocreate,maintain,orotherwise
supportotherprogramsandapplications.
Someofthecommonlyusedsoftwaretools
inHCIareasfollows−
INTERACTIVE SYSTEM DESIGN

27. Specification
Methods
Grammars
Transition
Diagram
SOFTWARE TOOLS
Themethodsusedtospecify
theGUI.Eventhoughtheseare
lengthyand ambiguous
methods,theyareeasyto
understand
WrittenInstructionsor
Expressionsthataprogram
wouldunderstand.They
provideconfirmationsfor
completenessandcorrectness
Setofnodesandlinksthatcan
bedisplayedintext,link
frequency,statediagram,etc.
Theyaredifficultinevaluating
usability,visibility,modularity
andsynchronization
INTERACTIVE SYSTEM DESIGN

28. Statecharts
Interface
Building Tools
Interface
Mockup Tools
SOFTWARE TOOLS
Chartmethodsdevelopedfor
simultaneoususeractivities
andexternalactions.They
providelink-specificationwith
interfacebuildingtools
Designmethodsthathelpin
designingcommandlanguages,
dataentrystructures,and
widgets
Toolstodevelopaquicksketch
ofGUI.E.g.,MicrosoftVisio,
VisualStudio,.Net,etc.
INTERACTIVE SYSTEM DESIGN

29. Software
Engineering Tools
Evaluation
Tools
SOFTWARE TOOLS
Extensiveprogrammingtoolsto
provideuserinterface
managementsystem.
Toolstoevaluatethe
correctnessandcompleteness
ofprograms
INTERACTIVE SYSTEM DESIGN

30. SOFTWAREENGINEERINGisthestudyofdesigning,
developmentandpreservationofsoftware.Itcomesin
contactwithHCItomakethemanandmachine
interactionmore vibrantand interactive.
Letusseethefollowingmodelinsoftwareengineeringfor
interactivedesigning.
HCI and Software Engineering

31. TheWaterfallmodelistheearliestSDLCapproachthatwasusedfor
softwaredevelopment.ThewaterfallModelillustratesthesoftware
developmentprocessinalinearsequentialflow.Thismeansthat
anyphaseinthedevelopmentprocessbeginsonlyiftheprevious
phaseiscomplete.Inthiswaterfallmodel,thephasesdonotoverlap.
WaterfallapproachwasfirstSDLCModeltobeusedwidelyin
SoftwareEngineeringtoensuresuccessoftheproject.In"The
Waterfall"approach,thewholeprocessofsoftwaredevelopmentis
dividedintoseparatephases.InthisWaterfallmodel,typically,the
outcomeofonephaseactsastheinputforthenextphase
sequentially.
The Waterfall Method

32. The Waterfall Method

33. Requirement
Gathering and
analysis
System
Design
Implementation
The Waterfall Method Sequential Phases
Allpossiblerequirementsofthe
systemtobedevelopedare
capturedinthisphaseand
documentedinarequirement
specificationdocument.
Therequirementspecifications
fromfirstphasearestudiedinthis
phaseandthesystemdesignis
prepared.Thissystemdesign
helpsinspecifyinghardwareand
systemrequirementsandhelpsin
definingtheoverallsystem
architecture.
Withinputsfromthesystem
design,thesystemisfirst
developedinsmallprograms
calledunits,whichareintegrated
inthenextphase.Eachunitis
developedandtestedforits
functionality,whichisreferredto
asUnitTesting.
INTERACTIVE SYSTEM DESIGN

34. Integration and
Testing
Deployment
of system
Maintenance
The Waterfall Method Sequential Phases
Alltheunitsdevelopedinthe
implementationphaseare
integratedintoasystemafter
testingofeachunit.Post
integrationtheentiresystemis
testedforanyfaultsand
failures.
Oncethefunctionalandnon-
functionaltestingisdone;the
productisdeployedinthe
customerenvironmentor
releasedintothemarket.
Therearesomeissueswhichcome
upintheclientenvironment.Tofix
thoseissues,patchesarereleased.
Alsotoenhancetheproductsome
betterversionsarereleased.
Maintenanceisdonetodeliver
thesechangesinthecustomer
environment.
INTERACTIVE SYSTEM DESIGN

35. Theuni-directionalmovementofthewaterfallmodelofSoftware
Engineeringshowsthateveryphasedependsontheprecedingphase
andnotvice-versa.However,thismodelisnotsuitablefor
theinteractivesystemdesign.Theinteractivesystemdesignshows
thateveryphasedependsoneachothertoservethe
purposeofdesigningandproductcreation.Itisacontinuousprocess
asthereissomuchtoknowanduserskeepchangingallthetime.An
interactivesystemdesignershouldrecognizethisdiversity.
INTERACTIVE SYSTEM DESIGN

36. INTERACTIVE SYSTEM DESIGN

37. Prototypingisanothertypeofsoftwareengineeringmodelsthatcanhave
acompleterangeoffunctionalitiesoftheprojectedsystem.InHCI,
prototypingisatrialandpartialdesignthathelpsusersintestingdesign
ideaswithoutexecutingacompletesystem.Exampleofaprototypecanbe
Sketches.Sketchesofinteractivedesigncanlaterbeproducedinto
graphicalinterface.Seethefollowingdiagram.Thefollowingdiagramcan
beconsideredasaLowFidelityPrototypeasitusesmanualprocedures
likesketchinginapaper.AMediumFidelityPrototypeinvolvessomebut
notallproceduresofthesystem.E.g.,firstscreenofaGUI.Finally,aHi
FidelityPrototypesimulatesallthefunctionalitiesofthesystemina
design.Thisprototyperequires,time,moneyandworkforce.
Prototyping

38. Prototyping

39. User Centered Design (UCD)
Theprocessofcollectingfeedbackfromusersto
improvethedesignisknownasusercentereddesign
orUCD.
UCDDrawbacks:
•Passiveuserinvolvement
•User’sperceptionaboutthenewinterfacemaybe
inappropriate
•Designersmayaskincorrectquestionstousers
INTERACTIVE SYSTEM DESIGN

40. The stages in the following diagram are repeated until the solution is reached
Interactive System Design Life Cycle (ISLC)

41. GraphicUserInterface(GUI)istheinterfacefromwhereausercan
operateprograms,applicationsordevicesinacomputersystem.This
iswheretheicons,menus,widgets,labelsexistfortheusersto
access.ItissignificantthateverythingintheGUIisarrangedinaway
thatisrecognizableandpleasingtotheeye,whichshowsthe
aestheticsenseoftheGUIdesigner.GUIaestheticsprovidesa
characterandidentitytoanyproduct.
GUI Design & Aesthetics

42. INTERACTIVE
DEVICES

43. Objectives
Understandwhatare
theseknowntoolsand
howsomearerecently
developedorarea
concept to be
developedinthefuture
Learn about several
interactive devices
are used for the
human computer
interaction
Discuss on some
new and old
interactive devices.

44. Overview of Interactive Devices
Therearemanydifferenttypesofinteractiondevicesbeingusedand
conceivedtoday.Somearefamiliartoolsfromthepastandmanyare
justdistantconceptdreamsofthefuture.Someofinteractivedevices
arerecentlydevelopedandsomeofthemareinnovatedearlier.This
sectiondescribesaboutsomenewandoldinterfacedevices.

45. Asshowninthefigure,thoughusersactuallyinteractphysicallywithadevice,theyactuallyrequireittoexecutea
usecasetoaccomplishtheirneed.Hence,usersareinteractinglogicallywiththeservice.Softwareengineers
definetheserviceasausecasethatisrealizedbyacertainsubsystem/componentinthesoftware,whilethe
interfaceisconsideredasboundaryclassduringanalysisandastheuserinterfaceduringthedesignand
implementationstage.

46. Keyboard
Akeyboardcanbeconsideredasa
primitivedeviceknowntoallofustoday.
Keyboardusesanorganizationof
keys/buttonsthatservesasamechanical
deviceforacomputer.Eachkeyina
keyboardcorrespondstoasinglewritten
symbolorcharacter.

47. Keyboard
Thisisthemosteffectiveandancient
interactivedevicebetweenmanand
machinethathasgivenideastodevelop
manymoreinteractivedevicesaswellas
hasmadeadvancementsinitselfsuchas
softscreenkeyboardsforcomputersand
mobilephones.

48. Touch Screen
Thetouchscreenconceptwasprophesized
decadesago,howevertheplatformwas
acquiredrecently.Todaytherearemany
devicesthatusetouchscreen.Gadgetslike
mobilephone,tablet,ipad,etcusestouch
screentechnologywhichallowstheusersto
navigatewiththeinstalledsoftwareontheir
deviceswiththeuseoftheirfingertips.

49. Touch Screen
Unlikeearlierdesignofpersonalcomputers,
touchscreentechnologydoesn’tneedaninput
devicesuchasmouseandkeyboardasthese
arealreadybuilt-intothedevice.Aftervigilant
selectionofthesedevices,developers
customizetheirtouchscreenexperiences.The
cheapestandrelativelyeasywayof
manufacturingtouchscreensaretheonesusing
electrodesandavoltageassociation.

50. Touch Screen
Otherthanthehardwaredifferences,software
alonecanbringmajordifferencesfromone
touchdevicetoanother,evenwhenthesame
hardwareisused.Alongwiththeinnovative
designsandnewhardwareandsoftware,touch
screensarelikelytogrowinabigwayinthe
future.Afurtherdevelopmentcanbemadeby
makingasyncbetweenthetouchandother
devices.InHCI,touchscreencanbeconsidered
asanewinteractivedevice.

51. Gesture Recognition
Gesturerecognitionisasubjectin
languagetechnologythathastheobjective
ofunderstandinghumanmovementvia
mathematicalprocedures.Handgesture
recognitioniscurrentlythefieldoffocus.
Thistechnologyisfuturebased.Thisnew
technology,magnitudesanadvanced
associationbetweenhumanandcomputer
wherenomechanicaldevicesareused.

52. Gesture Recognition
Thisnewinteractivedevicemightterminatethe
olddeviceslikekeyboardsandisalsoheavyon
newdevicesliketouchscreens.Thegeneral
definitionofgesturerecognitionistheabilityofa
computertounderstandgesturesandexecute
commandsbasedonthosegestures.Most
consumersarefamiliarwiththeconceptthrough
WiiFit,X-boxandPlayStationgamessuchas
“JustDance”and“KinectSports.”

53. How gesture recognition works
Gesturerecognitionisanalternativeuserinterfaceforprovidingreal-timedatatoacomputer.
Insteadoftypingwithkeysortappingonatouchscreen,amotionsensorperceivesandinterprets
movementsastheprimarysourceofdatainput.Thisiswhathappensbetweenthetimeagesture
ismadeandthecomputerreacts.Forinstance,Kinectlooksatarangeofhumancharacteristics
toprovidethebestcommandrecognitionbasedonnaturalhumaninputs.Itprovidesbothskeletal
andfacialtrackinginadditiontogesturerecognition,voicerecognitionandinsomecasesthe
depthandcolorofthebackgroundscene.Kinectreconstructsallofthisdataintoprintablethree-
dimensional(3D)models.ThelatestKinectdevelopmentsincludeanadaptiveuserinterfacethat
candetectauser’sheight

54. How gesture recognition works
Speciallydesignedsoftware
identifiesmeaningfulgestures
fromapredeterminedgesture
librarywhereeachgestureis
matchedtoacomputercommand.
Acamerafeedsimagedataintoa
sensingdevicethatisconnected
toacomputer.Thesensingdevice
typicallyusesaninfraredsensor
orprojectorforthepurposeof
calculatingdepth.

55. How gesture recognition works
Oncethegesturehasbeen
interpreted,the computer
executesthecommandcorrelated
tothatspecificgesture.
Thesoftwarethencorrelateseach
registeredreal-timegesture,
interpretsthegestureanduses
thelibrarytoidentifymeaningful
gesturesthatmatchthelibrary.

56. Who makes gesture recognition software?
MicrosoftisleadingthechargewithKinect,agesturerecognitionplatformthat
allowshumanstocommunicatewithcomputersentirelythroughspeakingand
gesturing.Kinectgivescomputers,“eyes,ears,andabrain.”Thereareafewother
playersinthespacesuchasSoftKinect,GestureTek,PointGrab,eyesightand
PrimeSense,anIsraelicompanyrecentlyacquiredbyApple.Emerging
technologiesfromcompaniessuchaseyeSightgofarbeyondgamingtoallowfora
newlevelofsmallmotorprecisionanddepthperception.

57. Gesture recognition examples beyond
gaming
Gesturerecognitionhashugepotentialincreatinginteractive,engaging
liveexperiences.Herearefivegesturerecognitionexamplesthat
illustratethepotentialofgesturerecognitiontotoeducate,simplifyuser
experiencesanddelightconsumers.

58. Gesture recognition examples beyond gaming
Changinghowweinteractwithtraditional
computers-AcompanynamedLeapMotion
lastyearintroducedtheLeapMotion
Controller,agesture-basedcomputer
interactionsystemforPCandMac.AUSB
deviceandroughlythesizeofaSwissarmy
knife,thecontrollerallowsuserstointeract
withtraditionalcomputerswithgesturecontrol.
It’sveryeasytoseetheliveexperience
applicationsofthistechnology.
In-storeretailengagement-Gesture
recognitionhasthepowertodeliveran
exciting,seamlessin-storeexperience.
ThisexampleusesKinecttocreatean
engagingretailexperiencebyimmersing
theshopperinrelevantcontent,helping
hertotryonproductsandofferinga
gamethatallowstheshoppertoearna
discountincentive.

59. Gesture recognition examples beyond gaming
Windshieldwipers-GoogleandFord
arealsoreportedlyworkingonasystem
thatallowsdriverstocontrolfeatures
suchasairconditioning,windowsand
windshieldwiperswithgesturecontrols.
TheCadillacCUEsystemrecognizes
somegesturessuchastap,flick,swipe
andspreadtoscrolllistsandzoominon
maps.
Theoperatingroom-Companiessuchas
MicrosoftandSiemensareworking
togethertoredefinethewaythateveryone
frommotoriststosurgeonsaccomplish
highlysensitivetasks.Thesecompanies
havebeenfocusedonrefininggesture
recognitiontechnologytofocusonfine
motormanipulationofimagesandenablea
surgeontovirtuallygraspandmovean
objectonamonitor.

60. Gesture recognition examples beyond gaming
Signlanguageinterpreter-Thereare
severalexamplesofusinggesture
recognitiontobridgethegapbetweenthe
deafandnon-deafwhomaynotknow
signlanguage.Thisexampleshowing
howKinectcanunderstandandtranslate
signlanguagefromDaniMartinezCapilla
exploresthenotionofbreakingdown
communicationbarriersusinggesture
recognition.
Mobilepayments-Seeper,aLondon-
basedstartup,hascreatedatechnology
calledSeemovethathasgonebeyond
imageandgesturerecognitiontoobject
recognition.Ultimately,Seeperbelieves
thattheirsystemcouldallowpeopleto
managepersonalmedia,suchasphotos
orfiles,andeveninitiateonlinepayments
usinggestures.

61. Speech Recognition
ThetechnologyoftranscribingspokenphrasesintowrittentextisSpeech
Recognition.Suchtechnologiescanbeusedinadvancedcontrolofmany
devicessuchasswitchingonandofftheelectricalappliances.Onlycertain
commandsarerequiredtoberecognizedforacompletetranscription.
However,thiscannotbebeneficialforbigvocabularies.ThisHCIdevicehelp
theuserinhandsfreemovementandkeeptheinstructionbasedtechnologyup
todatewiththeusers.

62. Application of Gesture Recognition
Kinect:ItisamotionsensingconsolelaunchedbyMicrosoftasanextensionofthe
MicrosoftXbox360gameconsole.Themainfunctionistoenableyoutocontrolthe
Xboxthroughvoiceorgesturesratherthanphysicallyusingthecontroller.Kinectis
basedontechnologieswhicharedevelopedbyMicrosoftandPrimeSense.It
basicallymakesuseofaninfraredprojectorwhichisabletoreadyourgestures
henceenablingyouhaveacompletehands-freecontrolofthegadgetorgameyou
areplaying.

63. Microsoft has already sold more than 18 million copies of Kinect and they plans to implement the
same system and technology for its PC and release it in February this year.

64. Application of Gesture Recognition
EonInteractiveMirror:EONInteractiveMirrorenablescustomersto
virtuallytry-onclothes,dresses,handbagsandaccessoriesusinggesture-
basedinteraction.Changingfromonedresstoanotherisjusta‘swipe’
awayandoffersendlesspossibilitiesformixingdesignsandaccessoriesin
afun,quickandintuitiveway.Customerscansnapapictureofhis/hers
currentselectionsandshareitonFacebookorotherSocialMediatoget
instantfeedbackfromfriends.

65. The EON Interactive Mirror is growing in popularity in the amusement and retail industry. It will be
showcased on its ability to engage crowds through various interactive applications.

66. Response Time
Responsetimeisthetimetakenbyadevicetorespondtoarequest.Therequestcanbe
anythingfromadatabasequerytoloadingawebpage.Theresponsetimeisthesumofthe
servicetimeandwaittime.Transmissiontimebecomesapartoftheresponsetimewhenthe
responsehastotraveloveranetwork.InmodernHCIdevices,thereareseveralapplications
installedandmostofthemfunctionsimultaneouslyoraspertheuser’susage.Thismakesa
busierresponsetime.Allofthatincreaseintheresponsetimeiscausedbyincreaseinthe
waittime.Thewaittimeisduetotherunningoftherequestsandthequeueofrequests
followingit.

67. Response Time
So,itissignificantthattheresponsetimeofadeviceisfasterforwhich
advancedprocessorsareusedinmoderndevices.AccordingtoJakob
Nielsen,thebasicadviceregardingresponsetimeshasbeenaboutthe
sameforthirtyyears[Miller1968;Cardetal.1991]:

68. Response Time
isaboutthelimitfortheuser'sflowof
thoughttostayuninterrupted,even
thoughtheuserwillnoticethedelay.
Normally,nospecialfeedbackis
necessaryduringdelaysofmorethan
0.1butlessthan1.0second,butthe
userdoeslosethefeelingofoperating
directlyonthedata.
isaboutthelimitforhavingthe
userfeelthatthesystemis
reacting instantaneously,
meaningthatnospecial
feedbackisnecessaryexcept
todisplaytheresult.
isaboutthelimitforkeepingtheuser's
attentionfocusedonthedialogue.For
longerdelays,userswillwanttoperform
othertaskswhilewaitingforthe
computertofinish,sotheyshouldbe
givenfeedbackindicatingwhenthe
computerexpectstobedone.Feedback
duringthedelayisespeciallyimportant
iftheresponsetimeislikelytobehighly
variable,sinceuserswillthennotknow
whattoexpect
0.1Second
1.0Second
10Seconds

69. DESIGN PROCESS
AND TASK ANALYSIS

70. LESSON OBJECTIVES
01
Understandthedifferentcharacteristicsof
engineeringtaskmodelsandmethodologies
03
Learnaboutthebasicactivitiesofinteraction
designandprinciplesforuser-centered
approach
02
Understandthedesignprocessandtask
analysisthatplaysanimportantpartinuser
requirementanalysis
04
Knowthedifferentmethodologiesbeingusedin
HCIdesign

71. HCIdesignisconsideredasaproblem
solvingprocessthathascomponents
likeplannedusage,targetarea,
resources,cost,andviability.Itdecides
ontherequirementofproduct
similaritiestobalancetrade-offs.
HCI Design

72. HCI Design
01
Evaluatingdesigns
03
Identifyingrequirements
02
Developinginteractiveversions
ofthedesigns
04
Buildingalternativedesigns

73. Three principles for user-centered approach
Empirical
Measurement
Early focus on
users and tasks
Iterative Design

74. Variousmethodologieshavematerializedsince
theinceptionthatoutlinethetechniquesfor
human–computerinteraction.Followingarefew
designmethodologies
Design Methodologies

75. Activity Theory
ThisisanHCImethodthatdescribes
theframeworkwherethehuman
computerinteractionstakeplace.
Activitytheoryprovidesreasoning,
analyticaltoolsandinteraction
designs.

76. User-Centered Design
Itprovidesusersthecenter-stagein
designingwheretheygetthe
opportunitytoworkwithdesigners
andtechnicalpractitioners.

77. Principles of User Interface
Design
Tolerance,simplicity,visibility,
affordance,consistency,structure
andfeedbackarethesevenprinciples
usedininterfacedesigning.

78. Value Sensitive Design
Thismethodisusedfordeveloping
technologyandincludesthreetypes
ofstudies−conceptual,empirical
andtechnical.

79. Value Sensitive Design
Conceptual Empirical Technical
Conceptual
investigationswork
towards
understandingthe
values of the
investorswhouse
technology.
Empirical
investigationsare
qualitative or
quantitativedesign
researchstudiesthat
showsthedesigner’s
understandingofthe
users’values.
Technical
investigations
containtheuseof
technologiesand
designsinthe
conceptual and
empirical
investigations.

80. Participatory Design
Participatorydesignprocessinvolvesallstakeholdersinthe
designprocess,sothattheendresultmeetstheneedstheyare
desiring.Thisdesignisusedinvariousareassuchassoftware
design,architecture,landscapearchitecture,productdesign,
sustainability,graphicdesign,planning,urbandesign,andeven
medicine.Participatorydesignisnotastyle,butfocuson
processesandproceduresofdesigning.Itisseenasawayof
removingdesignaccountabilityandoriginationbydesigners.

81. TaskAnalysisplaysanimportantpartinUser
RequirementsAnalysis.Taskanalysisisthe
proceduretolearntheusersandabstract
frameworks,thepatternsusedinworkflows,and
thechronologicalimplementationofinteraction
withtheGUI.Itanalyzesthewaysinwhichthe
userpartitionsthetasksandsequencethem.
Task Analysis

82. Task Analysis

83. Humanactionsthatcontributestoauseful
objective,aimingatthesystem,isatask.Task
analysisdefinesperformanceofusers,not
computers.
What is a TASK?

84. Purpose of Task Analysis
What your users’ goals are; what they are trying to achieve
What users actually do to achieve those goals
What experiences (personal, social, and cultural) users bring to the tasks
In their book User and Task Analysis for Interface Design, JoAnn Hackosand Janice
Redishnote that performing a task analysis helps you understand:
How users are influenced by their physical environment
How users’ previous knowledge and experience influence:
How they think about their work
The workflow they follow to perform their task

85. When to Perform a Task Analysis
Website requirements gathering
Developing your content strategy and site structure
It’simportanttoperformataskanalysisearlyinyourprocess,inparticular
priortodesignwork.Taskanalysishelpssupportseveralotheraspectsof
theuser-centereddesignprocess,including:
Wireframing and Prototyping
Performing usability testing

86. Types of Task Analysis
Hierarchical Task Analysis
-is focused on decomposing a high-
level task subtasks..
Cognitive Task Analysis
-is focused on understanding tasks
that require decision-making,
problem-solving, memory, attention
and judgement.
There are several types of task analysis but among the most
common techniques used are:

87. How to Conduct a Task Analysis
Yourtaskanalysismayhaveseverallevelsofinquiry,
fromgeneraltoveryspecific.Inadditiontomarket
research,competitiveanalysis,andwebmetrics
analysis,youcanidentifytoptasksthroughvarious
userresearchtechniques.UXPA’sUsabilityBodyof
Knowledgebreaksdowntheprocessfor
decomposingahigh-leveltaskintothefollowing
steps:

88. How to Conduct a Task Analysis
Identify the task to be analyzed
Break this high-level task down into 4 to 8 subtasks. The subtask should be
specified in terms of objectives and, between them, should cover the whole area of
interest
It’simportanttonotethatyouneedtodecidetowhatlevelofdetailyouaregoingto
decomposesubtaskssothatyoucanensurethatyouareconsistentacrossthe
board.
Draw a layered task diagram of each subtasks ensuring that it is complete
Produce a written account as well as the decomposition diagram
Presenttheanalysistosomeoneelsewhohasnotbeeninvolvedinthe
decompositionbutwhoknowsthetaskswellenoughtocheckforconsistency

89. HierarchicalTaskAnalysisistheprocedureof
disintegratingtasksintosubtasksthatcouldbeanalyzed
usingthelogicalsequenceforexecution.Thiswouldhelp
inachievingthegoalinthebestpossibleway."A
hierarchyisanorganizationofelementsthat,according
toprerequisiterelationships,describesthepathof
experiencesalearnermusttaketoachieveanysingle
behaviorthatappearshigherinthehierarchy.(Seels&
Glasgow,1990,p.94)"
Hierarchical Task Analysis

90. Techniques for Analysis
Task decomposition
Observationanddocumentationofactionsof
theuser.Thisisachievedbyauthenticatingthe
user’sthinking.Theuserismadetothinkaloud
sothattheuser’smentallogiccanbe
understood
Ethnography
Splittingtasksintosub-tasksand
insequence
Knowledge-based techniques
Observationofusers’behavior
intheusecontext
Protocol analysis
Anyinstructionsthatusersneedto
know.‘User’isalwaysthe
beginningpointforatask

91. UnlikeHierarchicalTaskAnalysis,
EngineeringTaskModelscanbespecified
formallyandaremoreuseful.
Engineering Task Models

92. Characteristics of Engineering Task
Models
Engineeringtaskmodelshaveflexiblenotations,whichdescribesthe
possibleactivitiesclearly
Theyhaveorganizedapproachestosupporttherequirement,analysis,and
useoftaskmodelsinthedesign
Theysupporttherecycleofin-conditiondesignsolutionstoproblemsthat
happenthroughoutapplications
Finally, they let the automatic tools accessible to support the different
phases of the design cycle

93. CTTisanengineeringmethodologyused
formodelingataskandconsistsoftasks
andoperators.OperatorsinCTTareused
toportraychronologicalassociations
betweentasks.Followingarethekey
featuresofaCTT:
ConcurTaskTree(CTT)

94. ConcurTaskTree(CTT)
Focusonactionsthatuserswishtoaccomplish
Hierarchicalstructure
Graphicalsyntax
Rich set of sequential operators

95. ConcurTaskTree(CTT) Examples
Plug in to main and switch on supply
Locate on/off switch on projector
Apersonpreparinganoverheadprojectorforusewouldbeseentocarryout
thefollowingactions:
Discover which way to press the switch
Press the switch for power
Put on the slide and orientate correctly
Align the projector on the screen
Focus the slide

96. InHumanComputerInteraction,taskanalysisis
therecordingofphysicalandperceptualactions
oftheuserwhilstexecutingthetask.Takealook
onanotherexampleoftaskanalysis.Atabare
minimumtoidentifytasks,youcansimplyask
userswhatoveralltaskstheyaretryingto
accomplishorhowtheycurrentlyaccomplishthe
task.
ConcurTaskTree(CTT)

97. ConcurTaskTree(CTT)
Tryingtofindanursinghomenearyouforanelderly
relative
Tryingtogetinformationaboutoptionsfortreatmentfor
skincancer
Whatoveralltasksareuserstryingtoaccomplishonour
website?
Tryingtosignuptoreceiveanemailnoticewhena
paymentisdue

98. ConcurTaskTree(CTT)
Using a search engine
Navigating through your site
Howareuserscurrentlycompletingthetask?Peopleare
completingthattaskusing:
Using another site
(Through some other means)

99. THANK
YOU!
DO YOU HAVE ANY QUESTIONS?

100. Dialogue design
introduction
human computer
interaction

101. Lesson objectives
Learnalltheaspectsofdialog
levelsandrepresentation
Introduceformalismtechniques
thatwecanusetosignifydialogs
Learnaboutvisualmaterialsbeing
usedincommunicationprocess
Understanddirectmanipulationas
agoodformofinterfacedesign
Knowthesequenceinitem
presentation
Understandtheuseofproperuseof
menulayoutandformfill-indialogboxes

102. Dialog
Representation
To represent dialogs, we need formal techniques
that serves two purposes:
It helps in understanding the proposed design
in a better way.
Ithelpsinanalyzingdialogstoidentifyusabilityissues.E.g.,
Questionssuchas“doesthedesignactuallysupportundo?”
canbeanswered

103. Introduction to
Formalism
Therearemanyformalismtechniquesthatwecanuse
tosignifydialogs.Inthischapter,wewilldiscusson
threeoftheseformalismtechniques,whichare−
The state transition networks (STN)
The state charts
The classical Petri nets

104. State Transition
Network (STN)
STNsarethemostspontaneous,whichknowsthatadialog
fundamentallydenotestoaprogressionfromonestateofthe
systemtothenext.ThesyntaxofanSTNconsistsofthefollowing
twoentities:
Circles−Acirclereferstoastateofthesystem,which
isbrandedbygivinganametothestate.
Arcs−Thecirclesareconnectedwitharcsthatrefersto
theaction/eventresultinginthetransitionfromthestate
wherethearcinitiates,tothestatewhereitends.

105. State Transition
Network (STN)

106. StateCharts
StateChartsrepresentcomplexreactivesystemsthatextendsFinite
StateMachines(FSM),handleconcurrency,andaddsmemoryto
FSM.Italsosimplifiescomplexsystemrepresentations.StateCharts
hasthefollowingstates:
Activestate−ThepresentstateoftheunderlyingFSM
Basicstates−Theseareindividualstatesandarenot
composedofotherstates.
Superstates−Thesestatesarecomposedofotherstates.

107. Foreachbasicstateb,thesuperstatecontainingbis
calledtheancestorstate.AsuperstateiscalledOR
superstateifexactlyoneofitssubstatesisactive,
wheneveritisactive.
LetusseetheStateChartConstructionofamachine
thatdispensebottlesoninsertingcoins.
illustrationIllustration

108. StateCharts

109. Thediagramexplainstheentireprocedureofabottle
dispensingmachine.Onpressingthebuttonafter
insertingcoin,themachinewilltogglebetweenbottle
fillinganddispensingmodes.Whenarequiredrequest
bottleisavailable,itdispensethebottle.Inthe
background,anotherprocedurerunswhereanystuck
bottlewillbecleared.The‘H’symbolinStep4,indicates
thataprocedureisaddedtoHistoryforfutureaccess.
illustrationIllustration

110. Petri Nets
PetriNetisasimplemodelofactivebehavior,whichhasfour
behaviorelementssuchas−places,transitions,arcsand
tokens.PetriNetsprovideagraphicalexplanationforeasy
understanding.
Place−Thiselementisusedtosymbolizepassive
elementsofthereactivesystem.Aplaceis
representedbyacircle
Transition−Thiselementisusedtosymbolizeactive
elementsofthereactivesystem.Transitionsare
representedbysquares/rectangles

111. Petri Nets
Arc−Thiselementisusedtorepresentcausal
relations.Arcisrepresentedbyarrows
Token−Thiselementissubjecttochange.Tokensare
representedbysmallfilledcircles

112. PetriNetsweredevelopedoriginallybyCarlAdamPetri[Pet62],and
werethesubjectofhisdissertationin1962.Sincethen,PetriNets
andtheirconceptshavebeenextendedanddeveloped,andapplied
inavarietyofareas:Officeautomation,work-flows,flexible
manufacturing,programminglanguages,protocolsandnetworks,
hardwarestructures,real-timesystems,performanceevaluation,
operationsresearch,embeddedsystems,defensesystems,
telecommunications,Internet,ecommerceandtrading,railway
networks,biologicalsystems.HereisanexampleofaPetriNet
model,oneforthecontrolofametabolicpathway.Toolused:Visual
ObjectNet++
Petri netsPetri Nets

113. Petri nets

114. Visualmaterialshaveassistedinthecommunicationprocesssinceages
informofpaintings,sketches,maps,diagrams,photographs,etc.In
today’sworld,withtheinventionoftechnologyanditsfurthergrowth,new
potentialsareofferedforvisualinformationsuchasthinkingand
reasoning.Asperstudies,thecommandofvisualthinkinginhuman-
computerinteraction(HCI)designisstillnotdiscoveredcompletely.So,let
uslearnthetheoriesthatsupportvisualthinkinginsense-makingactivities
inHCIdesign.Aninitialterminologyfortalkingaboutvisualthinkingwas
discoveredthatincludedconceptssuchasvisualimmediacy,visual
impetus,visualimpedance,andvisualmetaphors,analogiesand
associations,inthecontextofinformationdesignfortheweb.
Visual
thinking
Visual
thinking

115. Visualthinkingistheuseofimageryandothervisualformsto
makesenseoftheworldandtocreatemeaningfulcontent.
Digitalimageryisaspecialformofvisualthinking,onethatis
particularlysalientforHCIandinteractiondesign.Digital
photographsqualifyasdigitalimageryonlywhentheyarealso
visualthinkingthatis,whentheyareinstrumentalinmaking
senseorcreatingmeaning.Assuch,thisdesignprocess
becamewellsuitedasalogicalandcollaborativemethod
duringthedesignprocess.Letusdiscussinbriefthe
conceptsindividually.
Visual
thinking
Visual
thinking

116. Visual
immediacy
Itisareasoningprocessthathelpsin
understandingofinformationinthe
visualrepresentation.Thetermischosen
tohighlightitstimerelatedquality,which
alsoservesasanindicatorofhowwell
thereasoninghasbeenfacilitatedbythe
design.

117. Visual Impetus
Visualimpetusisdefinedasa
stimulusthataimsatthe
increaseinengagementinthe
contextualaspectsofthe
representation.

118. Visual
Impedance
Itisperceivedastheoppositeofvisual
immediacyasitisahindranceinthe
designoftherepresentation.Inrelation
toreasoning,impedancecanbe
expressedasaslowercognition.

119. Visual Metaphors,
Association, Analogy,
Abduction and Blending
-Whenavisualdemonstrationisusedto
understandanideaintermsofanother
familiarideaitiscalledavisualmetaphor.
-Visualanalogyandconceptualblending
aresimilartometaphors.Analogycanbe
definedasanimplicationfromone
particulartoanother.Conceptualblending
canbedefinedascombinationof
elementsandvitalrelationsfromvaried
situations.

120. Visual Metaphors,
Association, Analogy,
Abduction and Blending
TheHCIdesigncanbehighly
benefitedwiththeuseofabove
mentionedconcepts.Theconcepts
arepragmaticinsupportingtheuse
ofvisualproceduresinHCI,aswell
asinthedesignprocesses.

121. Direct Manipulation
Programming
Theactionofusingyourfingertipsto
zoominandoutoftheimageisan
exampleofadirectmanipulation
interaction.Anotherclassicexample
isdraggingafilefromafolderto
anotheroneinordertomoveit

122. Direct Manipulation
Programming
Definition:Directmanipulation(DM)
isaninteractionstyleinwhichusers
actondisplayedobjectsofinterest
using physical,incremental,
reversibleactionswhoseeffectsare
immediatelyvisibleonthescreen.

123. Direct Manipulation
Programming
BenShneidermanfirstcoinedthe
term“directmanipulation”inthe
early1980s,atatimewhenthe
dominantinteractionstylewasthe
commandline.Incommand-line
interfaces,theusermustremember
thesystemlabelforadesiredaction,
andtypeitintogetherwiththe
namesfortheobjectsoftheaction.

124. Direct Manipulation
Programming
Directmanipulationisoneofthe
centralconceptsofgraphicaluser
interfaces(GUIs)andissometimes
equatedwith“whatyouseeiswhatyou
get”(WYSIWYG).Theseinterfaces
combinemenubasedinteractionwith
physicalactionssuchasdraggingand
droppinginordertohelptheuseruse
theinterfacewithminimallearning.

125. Continuous
representation of
the object of
interest
Physical actions
instead of complex
syntax
Continuous
feedback and
reversible,
incremental actions
Rapid learning
Characteristics
of Direct
Manipulation

126. Continuous
representation of the
object of interest
Userscanseevisualrepresentationsoftheobjectsthat
theycaninteractwith.Assoonastheyperformanaction,
theycanseeitseffectsonthestateofthesystem.For
example,whenmovingafileusingdrag-and-drop,users
canseetheinitialfiledisplayedinthesourcefolder,select
it,and,assoonastheactionwascompleted,theycansee
itdisappearfromthesourceandappearinthedestination
—animmediateconfirmationthattheiractionhadthe
intendedresult.Thus,direct-manipulationUIssatisfy,by
definition,thefirstusabilityheuristic:thevisibilityofthe
systemstatus.Incontrast,inacommandlineinterface,
usersusuallymustexplicitlycheckthattheiractionshad
indeedtheintendedresult(forexample,bylistingthe
contentofthedestinationdirectory).

127. Physical actions instead
of complex syntax
Actionsareinvokedphysicallyviaclicks,button
presses,menuselections,andtouchgestures.Inthe
move-fileexample,drag-and-drophasadirectanalog
intherealworld,sothisimplementationforthemove
actionhastherightsignifiersandcanbeeasilylearned
andremembered.Incontrast,thecommand-line
interfacerequiresuserstorecallnotonlythenameof
thecommand(“mv”),butalsothenamesoftheobjects
involved(filesandpathstothesourceanddestination
folders).Thus,unlikeDMinterfaces,command-line
interfacesarebasedonrecallinsteadofrecognition
andviolateanimportantusabilityheuristic.

128. Continuous feedback and
reversible, incremental
actions
Becauseofthevisibilityofthesystemstate,it’seasyto
validatethateachactioncausedtherightresult.Thus,when
usersmakemistakes,theycanseerightawaythecauseof
themistakeandtheyshouldbeabletoeasilyundoit.In
contrast,withcommand-lineinterfaces,onesingleuser
commandmayhavemultiplecomponentsthatcancausethe
error.Forinstance,intheexamplebelow,thenameofthe
destinationfoldercontainsatypo“MeasuringUsablty”
insteadof“MeasuringUsability”.Thesystemsimply
assumedthatthefilenameshouldbechangedto“Measuring
Usablty”.Ifuserscheckthedestinationfolder,theywill
discoverthattherewasaproblem,butwillhavenowayof
knowingwhatcausedit:didtheyusethewrongcommand,
thewrongsourcefilename,orthewrongdestination?

129. Rapid learning
Becausetheobjectsofinterestandthe
potentialactionsinthesystemarevisually
represented,userscanuserecognition
insteadofrecalltoseewhattheycoulddo
andselectanoperationmostlikelytofulfill
theirgoal.Theydon’thavetolearnand
remembercomplexsyntax.Thus,although
direct-manipulationinterfacesmayrequire
someinitialadjustment,thelearning
requiredislikelytobelesssubstantial.

130. Whendirectmanipulationfirstappeared,itwasbasedontheoffice-desk
metaphor—thecomputerscreenwasanofficedesk,anddifferentdocuments(or
files)wereplacedinfolders,movedaround,orthrowntotrash.Thisunderlying
metaphorindicatestheskeuomorphicoriginoftheconcept.TheDMsystems
describedoriginallybyShneidermanarealsoskeuomorphic—thatis,theyare
basedonresemblancewithaphysicalobjectintherealworld.Thus,hetalks
aboutsoftwareinterfacesthatcopyRolodexesandphysicalcheckbooksto
supporttasksdone(atthetime)withthesetools.Asweallknow,skeuomorphism
sawahugerevivalintheearlyiPhonedays,andhasnowcomeoutoffashion.
Direct Manipulation
vs. Skeuomorphism
Direct Manipulation
vs. Skeuomorphism

131. Direct Manipulation vs.
Skeuomorphism
Whileskeuomorphicinterfacesareindeed
basedondirectmanipulation,notalldirect
manipulationinterfacesneedtobe
skeuomorphic.Infact,today’sflatinterfaces
areareactiontoskeuomorphismanddepart
fromthereal-worldmetaphors,yettheydo
relyondirectmanipulation.

132. AlmosteachDMcharacteristichasadirectlycorrespondingdisadvantage:
-Continuousrepresentationoftheobjects?Itmeansthatyoucanonlyactonthe
smallnumberofobjectsthatcanbeseenatanygiventime.Andobjectsthatare
outofsight,butnotoutofmind,canonlybedealtwithaftertheuserhas
laboriouslynavigatedtotheplacethatholdsthoseobjectssothattheycanbe
madevisible.
-Physicalactions?Oneword:RSI(repetitivestraininjury).It’salotofworkto
moveallthoseiconsandslidersaroundthescreen.Actually,twomorewords:
accidentalactivation,whichisparticularlycommonontouchscreens,butcanalso
happenonmouse-drivensystems.
Disadvantages of
Direct Manipulation
Disadvantages of
Direct Manipulation

133. -Continuousfeedback?Onlyifyouattemptanoperationthatthesystemfeelslike
lettingyoudo.Ifyouwanttodosomethingthat’snotavailable,youcanpushand
dragbuttonsandiconsasmuchasyouwantwithnoeffectwhatsoever.No
feedback,onlyfrustration.(AgoodUIwillshowin-contexthelptoexplainwhythe
desiredactionisn’tavailableandhowtoenableit.Sadly,UIsthisgoodarenot
verycommon.)
-Rapidlearning?Yes,ifthedesignisgood,butinpracticelearnabilitydependson
howwelldesignedtheinterfaceis.We’veallseenmenuswithpoorlychosen
labels,buttonsthatdidnotlookclickable,ordrop-downboxeswithmoreoptions
thanthelengthofthescreen.Andthereareevenmoredisadvantages:
Disadvantages of
Direct Manipulation
Disadvantages of
Direct Manipulation

134. -DMisslow.Iftheuserneedstoperformalargenumberofactions,onmanyobjects,
usingdirectmanipulationtakesalotlongerthanacommand-lineUI.Haveyou
encounteredanysoftwareengineerswhouseDMtowritetheircode?Sure,theymight
useDMelementsintheirsoftwaredevelopmentinterfaces,butthemajorityofthecode
willbetypedin.
-Repetitivetasksarenotwellsupported.DMinterfacesaregreatfornovicesbecause
theyareeasytolearn,butbecausetheyareslow,expertswhohavetoperformthesame
setoftaskswithhighfrequency,usuallyrelyonkeyboardshortcuts,macros,andother
command-languageinteractionstospeeduptheprocess.Forexample,whenyouneedto
sendanemailattachmenttoonerecipient,itiseasytodragthedesiredfileanddropit
intotheattachmentsection.However,ifyouneededtodothisfor50differentrecipients
withcustomizedsubjectlines,amacroorscriptwillbefasterandlesstedious.
Disadvantages of
Direct Manipulation
Disadvantages of
Direct Manipulation

135. -Somegesturescanbemoreerror-pronethantyping.Whereasintheory,because
ofthecontinuousfeedback,DMminimizesthechanceofcertainerrors,in
practice,therearesituationswhenagestureishardertoperformthantyping
equivalentinformation.Forexample,goodlucktryingtomovethe50thcolumnof
aspreadsheetintothe2ndpositionusingdraganddrop.Forthisexactreason,
Netflixoffers3interactiontechniquesforreorderingsubscribers’DVDqueues:
draggingthemovietothedesiredposition(easyforshortmoves),aone-button
shortcutformovingintothe#1position(handywhenyoumustwatchaparticular
movieASAP),andtheindirectoptionoftypingthenumberofthedesirednew
position(usefulinmostothercases)
Disadvantages of
Direct Manipulation
Disadvantages of
Direct Manipulation

136. Direct
Manipulation

137. -Accessibilitymaysuffer.DMUIsmayfailvisuallyimpairedusersoruserswith
motorskillimpairments,especiallyiftheyareheavilybasedonphysicalactions,
asopposedtobuttonpressesandmenuselections.(Workaroundsexist,butit
canbedifficulttoimplementthem.)
-Directmanipulationhasbeenacclaimedasagoodformofinterfacedesign,and
arewellreceivedbyusers.Suchprocessesusemanysourcetogettheinputand
finallyconvertthemintoanoutputasdesiredbytheuserusinginbuilttoolsand
programs.“Directness”hasbeenconsideredasaphenomenonthatcontributes
majorlytothemanipulationprogramming.Ithasthefollowingtwoaspects:
DistanceandDirectEngagement.
Disadvantages of
Direct Manipulation
Disadvantages of
Direct Manipulation

138. Distance
Distanceisaninterfacethatdecides
thegulfsbetweenauser’sgoaland
thelevelofexplanationdeliveredby
thesystems,withwhichtheuser
deals.Thesearereferredtoasthe
GulfofExecutionandtheGulfof
Evaluation.

139. The Gulf of
Execution
TheGulfofExecutiondefinesthe
gap/gulfbetweenauser'sgoalandthe
devicetoimplementthatgoal.Oneofthe
principalobjectiveofUsabilityisto
diminishthisgapbyremovingbarriers
andfollowstepstominimizetheuser’s
distractionfromtheintendedtaskthat
wouldpreventtheflowofthework.

140. The Gulf of
Evaluation
TheGulfofEvaluationisthe
representationofexpectationsthatthe
userhasinterpretedfromthesystemina
design.AsperDonaldNorman,Thegulf
issmallwhenthesystemprovides
informationaboutitsstateinaformthat
iseasytoget,iseasytointerpret,and
matchesthewaythepersonthinks
ofthesystem.

141. Direct
Engagement
Itisdescribedasaprogrammingwhere
thedesigndirectlytakescareofthe
controlsoftheobjectspresentedbythe
userandmakesasystemlessdifficultto
use.Thescrutinyoftheexecutionand
evaluationprocessilluminatesthe
effortsinusingasystem.Italsogives
thewaystominimizethementaleffort
requiredtouseasystem.

142. -Eventhoughtheimmediacyofresponseandtheconversionofobjectivesto
actionshasmadesometaskseasy,alltasksshouldnotbedoneeasily.For
example,arepetitiveoperationisprobablybestdoneviaascriptandnotthrough
immediacy.
-Directmanipulationinterfacesfindithardtomanagevariables,orillustrationof
discreteelementsfromaclassofelements.
-Directmanipulationinterfacesmaynotbeaccurateasthedependencyisonthe
userratherthanonthesystem.
-Animportantproblemwithdirectmanipulationinterfacesisthatitdirectly
supportsthetechniques,theuserthinks.
Problems with Direct
Manipulation
Problems with Direct
Manipulation

143. InHCI,thepresentationsequencecanbeplannedaccordingtothetaskorapplication
requirements.Thenaturalsequenceofitemsinthemenushouldbetakencareof.Main
factorsinpresentationsequenceare:
•Time
•Numericordering
•Physicalproperties
Adesignermustselectoneofthefollowingprospectswhentherearenotask-related
arrangements
•Alphabeticsequenceofterms
•Groupingofrelateditems
•Mostfrequentlyuseditemsfirst
•Mostimportantitemsfirst
Item Presentation
Sequence
Item Presentation
Sequence

144. Helpingusersnavigateshouldbeahighpriorityforalmosteverywebsiteand
application.Afterall,eventhecoolestfeatureorthemostcompellingcontentis
uselessifpeoplecan’tfindit.Andevenifyouhaveasearchfunction,youusually
shouldn’trelyonsearchastheonlywaytonavigate.Mostdesignersrecognize
this,andincludesomeformofnavigationmenuintheirdesigns.
Definition:Navigationmenusarelistsofcontentcategoriesorfeatures,typically
presentedasasetoflinksoriconsgroupedtogetherwithvisualstylingdistinct
fromtherestofthedesign.
Menu LayoutMenu Layout

145. Navigationmenusinclude,butarenotlimitedto,navigationbarsandhamburger
menus.
Menusaresoimportantthatyoufindtheminvirtuallyeverywebsiteorpieceof
softwareyouencounter,butnotallmenusarecreatedequally.Toooftenwe
observeusersstrugglingwithmenusthatareconfusing,difficulttomanipulate,or
simplyhardtofind.
Avoidcommonmistakesbyfollowingtheseguidelinesforusablenavigation
menus:
Menu LayoutMenu Layout

146. A.MakeItVisible
1.Don’tusetinymenus(ormenuicons)onlargescreens.Menusshouldn’tbe
hiddenwhenyouhaveplentyofspacetodisplaythem.
2.Putmenusinfamiliarlocations.UsersexpecttofindUIelementswhere
they’veseenthembeforeonothersitesorapps(e.g.,leftrail,topofthe
screen).Maketheseexpectationsworkinyourfavorbyplacingyourmenus
wherepeopleexpecttofindthem.
3.Makemenulinkslookinteractive.Usersmaynotevenrealizethatit’samenu
iftheoptionsdon’tlookclickable(ortappable).Menusmayseemtobejust
decorativepicturesorheadingsifyouincorporatetoomanygraphics,or
adheretoostrictlytoprinciplesofflatdesign.
Menu LayoutMenu Layout

147. A.MakeItVisible
4.Ensurethatyourmenushaveenoughvisualweight.Inmanycasesmenus
thatareplacedinfamiliarlocationsdon’trequiremuchsurroundingwhite
spaceorcolorsaturationinordertobenoticeable.Butifthedesignis
cluttered,menusthatlackvisualemphasiscaneasilybelostinaseaof
graphics,promotions,andheadlinesthatcompetefortheviewer’sattention.
5.Uselinktextcolorsthatcontrastwiththebackgroundcolor.It’samazinghow
manydesignersignorecontrastguidelines;navigatingthroughdigitalspaceis
disorientingenoughwithouthavingtosquintatthescreenjusttoreadthe
menu.
Menu LayoutMenu Layout

148. B.CommunicatetheCurrentLocation
6.Tellusers‘where’thecurrentlyvisiblescreenislocatedwithinthemenu
options.“WhereamI?”isoneofthefundamentalquestionsusersneedto
answertosuccessfullynavigate.Usersrelyonvisualcuesfrommenus(and
othernavigationelementssuchabreadcrumbs)toanswerthiscritical
question.Failingtoindicatethecurrentlocationisprobablythesinglemost
commonmistakeweseeonwebsitemenus.Ironically,thesemenushavethe
greatestneedtoorientusers,sincevisitorsoftendon’tenterfromthe
homepages.
Menu LayoutMenu Layout

149. C.CoordinateMenuswithUserTasks
7.Useunderstandablelinklabels.Figureoutwhatusersarelookingfor,anduse
categorylabelsthatarefamiliarandrelevant.Menusarenottheplacetoget
cutewithmade-upwordsandinternaljargon.Sticktoterminologythatclearly
describesyourcontentandfeatures.
8.Makelinklabelseasytoscan.Youcanreducetheamountoftimeusersneedto
spendreadingmenusbyleft-justifyingverticalmenusandbyfront-loadingkey
terms.
9.Forlargewebsites,usemenustoletuserspreviewlower-levelcontent.Iftypical
userjourneysinvolvedrillingdownthroughseverallevels,mega-menus(or
traditionaldrop-downs)cansaveuserstimebylettingthemskipalevel(ortwo).
Menu LayoutMenu Layout

150. C.CoordinateMenuswithUserTasks
10.Providelocalnavigationmenusforcloselyrelatedcontent.Ifpeoplefrequently
wanttocomparerelatedproductsorcompleteseveraltaskswithinasingle
section,makethosenearbypagesvisiblewithalocalnavigationmenu,rather
thanforcingpeopleto‘pogostick’upanddownyourhierarchy.
11.Leveragevisualcommunication.Images,graphics,orcolorsthathelpusers
understandthemenuoptionscanaidcomprehension.Butmakesurethe
imagessupportusertasks(oratleastdon'tmakethetasksmoredifficult).
Menu LayoutMenu Layout

151. D.MakeItEasytoManipulate
12.Makemenulinksbigenoughtobeeasilytappedorclicked.Linksthataretoosmallor
tooclosetogetherareahugesourceoffrustrationformobileusers,andalsomake
large-screendesignsunnecessarilydifficulttouse.
13.Ensurethatdrop-downsarenottoosmallortoobig.Hover-activateddrop-downsthat
aretooshortquicklybecomeanexerciseinfrustration,becausetheytendtodisappear
whileyou’retryingtomouseoverthemtoclickalink.Ontheotherhand,verticaldrop-
downsthataretoolongmakeitdifficulttoaccesslinksnearthebottomofthelist,
becausetheymaybecutoffbelowtheedgeofthescreenandrequirescrolling.Finally,
hover-activateddrop-downsthataretoowideareeasilymistakenfornewpages,
creatinguserconfusionaboutwhythepagehasseeminglychangedeventhoughthey
haven’tclickedanything).
Menu LayoutMenu Layout

152. D.MakeItEasytoManipulate
14.Consider‘sticky’menusforlongpages.Userswhohavereachedthebottomofa
longpagemayfacealotoftediousscrollingbeforetheycangetbacktothe
menusatthetop.Menusthatremainvisibleatthetopoftheviewportevenafter
scrollingcansolvethatproblemandareespeciallywelcomeonsmallerscreens.
15.Optimizeforeasyphysicalaccesstofrequentlyusedcommands.Fordrop-down
menus,thismeansputtingthemostcommonitemsclosetothelinktargetthat
launchesthedrop-down(sotheuser'smouseorfingerwon'thavetotravelas
far.Recently,somemobileappshaveevenbegunrevivingpiemenus,which
keepallthemenuoptionsnearbybyarrangingtheminacircle(orsemicircle)
Menu LayoutMenu Layout

153. Dialogboxisagraphicaluserinterfaceelement,whichcanbenoticedassmall
windowthatprovidesinformationfortheuserandwaitsfortheresponsetheuserin
ordertoperformactionuponusersinput.Thesedialogboxesarealsousedto
confirmationmessage/noticetotheuserwith“OK”buttononitinordertoconfirm
thatthemessage/noticehasbeenreadbytheuser.
Appropriateformultipleentryofdatafields:
•Completeinformationshouldbevisibletotheuser.
•Thedisplayshouldresemblefamiliarpaperforms.
•Someinstructionsshouldbegivenfordifferenttypesofentries
Form Fill-in
Dialog Boxes
Form Fill-in
Dialog Boxes

154. Usersmustbefamiliarwith:
•Keyboards
•UseofTABkeyormousetomovethecursor
•Errorcorrectionmethods
•Field-labelmeanings
•Permissiblefieldcontents
•UseoftheENTERand/orRETURNkey.
Oneofthereasonswhydialogboxesareveryimportantistoensurethattheusers
willavoidmistakessuchasthedialogboxshownonFigure1.Theusermaybe
tryingtoclosetheapplicationalreadywhileworkingonadocumentbutisnotyet
donesavingit.
Form Fill-in
Dialog Boxes
Form Fill-in
Dialog Boxes

155. Gallery 01

156. FormFill-inDesignGuidelines:
•Titleshouldbemeaningful.
•Instructionsshouldbecomprehensible.
•Fieldsshouldbelogicallygroupedandsequenced.
•Theformshouldbevisuallyappealing.
•Familiarfieldlabelsshouldbeprovided.
•Consistentterminologyandabbreviationsshouldbeused.
•Convenientcursormovementshouldbeavailable.
•Errorcorrectionforindividualcharactersandentirefield’sfacilityshouldbepresent.
•Errorprevention.
•Errormessagesforunacceptablevaluesshouldbepopulated.
•Optionalfieldsshouldbeclearlymarked.
•Explanatorymessagesforfieldsshouldbeavailable.
•Completionsignalshouldpopulate.
Form Fill-in
Dialog Boxes
Form Fill-in
Dialog Boxes