User Interface Design - cp.eng.chula.ac.thchate/2110646/2553/03-Task.pdf · structure them within task subtask hierarchy describe order of subtasks ... UA7 Press the up arrow until

UserInterfaceDesign

Lecture 3Lecture3Findingoutabouttasksandwork

Describing Users WorkDescribingUsers Work

Goals,Tasks,andActions

T k Ch i i Th N f h W k TaskCharacteristics:TheNatureoftheWork

Task Sequences: There May Be More Than One TaskSequences:ThereMayBeMoreThanOneWaytoDoaTask

C.Patanothai 2110646:03Findingoutabouttasksandwork 2

Goals Tasks ActionsGoals,Tasks,Actions

l h d l b hi d Goal:theendresulttobeachieved

Task:structuredsetofrelatedactivitiesthatare undertaken in some sequenceareundertakeninsomesequence

l h Action:anindividualoperationorstepthatneedstobeundertakenaspartofthetask.


Goals Tasks ActionsGoals,Tasks,Actions


Communicating With a FriendCommunicatingWithaFriend

G l i i i h f i d Goal:communicatingwithafriend Task:

handwrittenletterorcard typewriterorwordprocessorsendingatextmessage email

Actions:writingaletterg obtainingsomewritingpaperandapenorpencil finding a flat surface upon which to write and a placefindingaflatsurfaceuponwhichtowriteandaplacetosit

usingpenorpenciltowritewordsg p p


TaskSequences:morethanonewaytodoatask

UImustbeflexibleenoughtoaccommodatethesedifferentwaysofworking.How Nicha sends a letter How Napat sends a lettery gHowNicha sends aletter HowNapat sendsaletter

Writetheletters. Getanenvelope.

Getanenvelope. Addresstheenvelope.

Addressthe envelope. Writetheletter.p

Putastampontheenvelope

Putthefinishedletterinthe envelopeenvelope. theenvelope.

Putthefinishedletterinthe envelope

Putastampontheenvelope


theenvelope. envelope.

Task CharacteristicsTaskCharacteristicsVariety of tasksVarietyoftasks

Frequencyoftasks

Knowledgeandskillrequired

E i t l f tEnvironmentalfactors

Timecritical

Safetyhazards

Willuserworkaloneorwithothers

Usernormallyswitchesbetweenseveraltasks


y

ExerciseExercise

Usingthelistinprevioustable,describethecharacteristicsofthetasksundertakenwhenusinganATMtowithdrawmoney.


Task AnalysisTaskAnalysis

Granularity levelsofdetail WorkflowWork flow


Describing Users WorkDescribingUsers Work

T k A l i TaskAnalysis

Clues for Improving Design: Problems andCluesforImprovingDesign:ProblemsandDifficultieswiththeCurrentUI

T h i f T k A l i TechniquesforTaskAnalysis

DescribingHowtoDoIt:ScenariosandUseCasesg

CognitiveTaskAnalysis:MovingfromScenariosand Use Cases to Cognitive WalkthroughandUseCasestoCognitiveWalkthrough


Task AnalysisTaskAnalysis

CluesforImprovingDesign:ProblemsandDifficultieswiththeCurrentUI

Analyzeerrors

Findworkarounds

Observejobaids,referencemanuals,etc.

Artifacts objectoraid


Techniques for Task AnalysisTechniquesforTaskAnalysis

Describewhatistobedone

Describehowauserdoesthetask


eCase

Use

eteU

ncre

Co


eCase

Use

ntial

Essen

E


A Task Analysis ExampleATaskAnalysisExample

inordertocleanthehouse getthevacuumcleanerout fixtheappropriateattachments cleantherooms whenthedustbaggetsfull,emptyit putthevacuumcleanerandtoolsawayp y

must know about: mustknowabout: vacuumcleaners,theirattachments, dustbags,cupboards rooms etccupboards,roomsetc.


Approaches to task analysisApproachestotaskanalysis

T k d iti Taskdecomposition splittingtaskinto(ordered)subtasks

Knowledgebasedtechniques whattheuserknowsaboutthetask

d h it i i dandhowitisorganized

Entity/objectbasedanalysis relationshipsbetweenobjects,actionsandthepeople

whoperformthem

lotsofdifferentnotations/techniques


Task DecompositionTaskDecomposition

Aims:describetheactionspeopledostructurethemwithintasksubtask hierarchydescribeorderofsubtasks

HierarchicalTaskAnalysis(HTA)


Textual HTA DescriptionTextualHTADescription

0 i d t l th h0.inordertocleanthehouse1.getthevacuumcleanerout2.gettheappropriateattachment3.cleantherooms

3.1.cleanthehall3 2 clean the living rooms3.2.cleanthelivingrooms3.3.cleanthebedrooms

4.emptythedustbag5.putvacuumcleanerandattachmentsaway

...andplansPlan0:do1 2 3 5inthatorder.whenthedustbaggetsfulldo4Plan3:doanyof3.1,3.2or3.3inanyorderdepending

onwhichroomsneedcleaningg


Generating the hierarchyGeneratingthehierarchy

1 getlistoftasks

2 grouptasksintohigherleveltasks

3 decomposelowestleveltasksfurther

StoppingrulesHow do we know when to stop?Howdoweknowwhentostop?Isemptythedustbagsimpleenough?Purpose:expandonlyrelevanttasksp p yMotoractions:lowestsensiblelevel


Tasks as explanationTasksasexplanation

imagineaskingtheuserthequestion:whatareyoudoingnow?y g

forthesameactiontheanswermaybe:typing ctrl BtypingctrlBmakingawordboldemphasising a ordemphasisingawordeditingadocumentwriting a letterwritingaletterpreparingalegalcase


Diagrammatic HTADiagrammaticHTA


Refining the descriptionRefiningthedescription

GiveninitialHTA(textualordiagram)

How to check / improve it?Howtocheck/improveit?

Someheuristics:paired actions e.g., where is `turn on gas'pairedactions e.g.,whereis turnongas

restructure e.g.,generatetask`makepot'

b lbalance e.g.,is`pourtea'simplerthanmakingpot?

generalise e.g.,makeonecup..ormore


Refined HTA for making teaRefinedHTAformakingtea


Types of planTypesofplan

fixedsequence 1.1then1.2then1.3

optional tasks if the pot is full 2optionaltasks ifthepotisfull2

waitforevents whenkettleboils1.4

cycles do5.15.2whiletherearestillemptycups

timesharing do1;atthesametime...

discretionary do any of 3 1 3 2 or 3 3 in any orderdiscretionary doanyof3.1,3.2or3.3inanyorder

mixtures mostplansinvolveseveraloftheabove


HTA for programming a VCRHTAforprogrammingaVCR


Cognitive WalkThroughCognitiveWalk Through

Evaluatesthestepsrequiredtoperformataskandattemptstouncovermismatchespbetweenhowtheusersthinkaboutataksandhow the UI designer thinks about the taskhowtheUIdesignerthinksaboutthetask


Cognitive Walkthrough MethodCognitiveWalkthroughMethod

Step0:

Theuserselectsatasktobeperformedandwritesdownallthesteps(actions)inthetask.

Foreachactioninthetask:

Theuserexplorestheartifact,prototype,or

Howdoestheuseknowwhattodonext?Isthe

Step1:

taskscenario,lookingforthe actionthatmight

correctactionsufficientlyevidenttotheuser(can

1:enablehimorhertoperformtheselected

recognizeit)ordoestheuserhavetorecallwhatto

task. dofrommemory?C.Patanothai 2110646:03Findingoutabouttasksandwork 27

Cognitive Walkthrough MethodCognitiveWalkthroughMethod

StepTheuserselectstheactionthatappearsto

Will theuserconnectthedescriptionofthecorrect

2: matchmostcloselywhatheorsheistryingtodo.

actionwithwhatheorsheistryingtodo?

St

Theuserinterpretsthesystemsresponseand Willtheuserknowifheor

Step3:

y passessesifanyprogresshasmade toward

shehasmadearightorwrong choice?

completingthetask.g


RemoteRemote

ProduceaCognitiveWalkthroughofaTVorothergremotecontrolyoumayhaveathome.

FromTurnON

Actionsinbetween

To Turn OFFToTurnOFF


Step 0: Select a TaskStep0:SelectaTask

settheVCRforatimedrecordingofaprogramstartat21:00andfinishingat22:30onCh4ongAugust18,2005.

when switched ON the VCR displays the whenswitchedON,theVCRdisplaysthenumberofthechannelitlastused.

whenswitchedOFF,itdisplaysadigitalclock. To set the timed recording the VCR must be Tosetthetimedrecording,theVCRmustbeswitchedON.


User actions(UA) Systemresponses(SR)

UA1 Press the PROG button on SR1 VCR display shows a form fillUA1 PressthePROGbuttononthehandset.

SR1 VCRdisplayshowsaformfillinforsettingthestartandstoptimes.Thesetimesaredividedintoseparatedsectionsforthehourandminute separated by aminute,separated byacolon.Thecursorisflashingonthehoursectiononthestarttime.

UA2 Presstheuparrowuntilthe SR2 21isshowinginthehourpnumber21isshowing.

gsectionofthe stattime.

UA3 Presstherightarrowonce SR3 00 isshowingandflashingintomovethecursortotheminutesectionofthestatti

theminutesectionofthestarttime.Thisdefaultedto00 l ti f 21 i th


time. 00onselectionof21inthehoursection.


UA4 00 in the minute section of SR4 The cursor is flashing in theUA4 00intheminutesectionofthestarttimeiswhatiswanted.Presstheright

SR4 Thecursorisflashinginthehoursection ofthefinishtime.

arrowoncetomovethecursortothehoursectionofth fi i h tithefinishtime.

UA5 Presstheup arrowuntilthenumber 22 is showing

SR5 22isshowinginthehoursection of the finish timenumber22isshowing. sectionofthefinishtime.

UA6 Presstherightarrowoncetomovethecursortothei t ti f th fi i h

SR6 00isshowingandflashingintheminuteportionofthefi i h ti Thi d f lt d tminutesectionofthefinish

time.finishtime.Thisdefaultedto00onselection of22inthehour section


hoursection.


UA7 Presstheuparrowuntilthe SR7 30isshowingintheminutenumber30isshown. sectionofthefinish time.

UA8 Presstherightarrowonceto movethecursortothe

SR8 Onthedisplay,thefulldatehasnowdefaulted tothe

daysectionofthedatefield.

currentdate.Thecursorisflashinginthedaysectionof the dateofthedate.

UA9 Presstheuparrowuntilthenumber 18 is showing

SR9 18isshowinginthedaysection of the date fieldnumber18isshowing. sectionofthedatefield.

h h h fl h hUA10 Presstherightarrowoncetomovethecursortothemonth section of the date

SR10 Thecursor isflashinginthemonthsectionofthedatefield


monthsectionofthedatefield

field.


UA11 Press theuparrowuntil SR11 18 isshowinginthedaythenumber8isshowing. sectionofthedatefield,and

8isshowinginthemonthi f h d fi ldsectionofthedatefield.

UA12 Presstherightarrowt th

SR12 Thecursorisflashingintheti f th d t fi ldoncetomovethecursor

totheyearsection.yearsectionofthedatefield.

UA13 Press the up arrow until SR13 18 is showing in the dayUA13 Presstheuparrowuntilthenumber04isshowing.

SR13 18isshowinginthedaysection,8isshowinginthemonthsection,and04isg ,showingintheyearsectionofthedatefield.

UA14 Presstherightarrowoncetomovethecursor

l h h l

SR14 Thecursorisflashinginthechannelfield.


toselectthechanneltorecord.


UA15 Press theuparrowuntilthenumber4isshowing.

SR15 4isshowing asthechanneltorecordform.

UA16 Presstherightarrowoncesothesystemacceptsthesetting

SR16 Theclock returnstothedisplay.Asmall1isdisplayed on the left side ofsetting. displayedontheleftsideoftheclock,whichindicatesonetimedrecordinghasgbeenset.

UA17 PresstheTIMERbuttonto SR17 Videoswitches itselfoffandinitiatetimedrecordingmode.

intotimedrecordingmode.Asmallredclockisdi l d i h i hdisplayedintheupperrighthandcornerofthedisplayto indicate that the video is


toindicatethatthevideoissetfortimerecording.

UA1 Presstheprog buttononthehandset.

Question1 Isthecorrectaction sufficientlyevidenttotheuser?

NeitherthehandsetnortheVCRdisplaygiveanyindicationthattheuserneedstopressthePROGbuttontodoatimedrecording.

Question2 Willtheuserconnectthedescriptionofthecorrectactionwithwhatheorsheistryingtodo?

Experiencedusersmightassociatetimedrecordingwithsettingorprogramming(prog)theVCR.However,thisisprobablynotthecasef ifornoviceusers.

Question3 Willtheuserknowifheorshehasmadearightorwrong choiceonthe basis of the systems response to the chosen action?thebasisofthesystem sresponsetothechosenaction?

OncethePROGbuttonispressed,theVCRdisplaychangestoformfillin that guides the user in entering the information (although theinthatguidestheuserinenteringtheinformation(althoughthedisplayonthehandsetdoesnotchange).AnyuserwhonoticestheVCRdisplay,orrememberswheretheformfillinappears,willknowthat he or she has mad a right choice


thatheorshehasmadarightchoice.

UA2 Presstheuparrowuntilthenumber21isshowinginthehoursection ofthestarttime.

Question 1 Is the correct action sufficiently evident to the user?Question1 Isthecorrectaction sufficientlyevidenttotheuser?

No.Itisnotevidentthattosetthetimeonecanuseonlythefourunlabeledarrow keys In fact the handset is confusing for the user because there is aarrowkeys.Infact,thehandsetisconfusingfortheuserbecausethereisanumberpadabovethefourarrowkeys.Theusermightassumethathe/shecanusethenumberpadtoenterthetimevaluesintotheform.

Question 2 Will the user connect the description of the correct action with what he or sheQuestion2 Willtheuserconnectthedescriptionofthecorrectactionwithwhathe orsheistryingtodo?

No There are no markings on the arrows themselves nor anywhere nearNo.Therearenomarkingsonthearrowsthemselves,noranywherenearthem,thatmightindicatethattheyaretobeusedforenteringinformationintotheprogrammingformfillin.

Q ti 3 Will th k if h h h d i ht h i th b iQuestion3 Willtheuserknowifheorshehasmadearightorwrong choiceonthebasisofthesystemsresponsetothechosenaction?

If the user is lucky enough to discover that the arrow buttons change theIftheuserisluckyenoughtodiscoverthatthearrowbuttonschangethetimesandchannel,thentherewillbefeedbackontheVCRdisplayastheformgetsfilledin.However,thiscouldeasilybemissediftheuserstopslookingatthe VCR display perhaps because he/she is so engrossed (and irritated) in


theVCRdisplay perhapsbecausehe/sheissoengrossed(andirritated)intryingtomakethehandsetwork.

Mental ModelsMentalModels

modeloftheworldinourheadsthatenablesustonegotiateunfamiliarsituationsg

Theare...themodelspeoplehaveofthemselves,others,theenvironmentandthethings with which they interact. People formthingswithwhichtheyinteract.Peopleformmentalmodelthroughexperience,trainingand instructionandinstruction.

(DonaldNorman,1988)( , )



d l Usersmodel

constructed when we are required to make constructedwhenwearerequiredtomakeaninferenceorpredictioninaparticularit tisituation.

Think of any examples of inappropriate metalThinkofanyexamplesofinappropriatemetalmodelsusingcomputersystem?


User model vs system modelUsermodelvs.systemmodel


S t d l U d lSystemmodelvs.Usermodel

sometimesdifferentrefrigerator refrigerator


Mental conceptual and cognitive modelsMental,conceptualandcognitivemodels


Mental Models CharacteristicsMentalModelsCharacteristics

peoplesabilitytoruntheirmodelsislimited. incompleteincomplete unstable nofirmboundaries unscientificunscientific



StructuralModels

h i k howitworks

Functional Models FunctionalModels

howtouseithow to use it

StructuralversusFunctionalModels

TheUtilityofMentalModelsinHCIy


Structure ModelsStructureModels


the structure of how a particular device or system works

Functional ModelsFunctionalModels


procedure knowledge about how to use the device or system

EnvironmentalConsiderations:WhereIsThisWorkDone?

h h i l i hi l ThePhysicalEnvironment:IsThisaPleasantPlacetoBe?

TheSafetyEnvironment:IsThisaSafePlacetoBe?Be?

TheSocialEnvironment:DoPeopleHelpEachp pOther?

h O i i l i TheOrganizationalEnvironment:DoesManagementSupportThisWork?


ThePhysicalEnvironment:IsThisaPleasantPlacetoBe?

lighting temperaturetemperature noiselevel dirtyordusty? physical design and layoutphysicaldesignandlayout

space #ofpeopleinthearea


TheSafetyEnvironment:IsThisaSafePlacetoBe?

needspecialclothing,suchasgloves? is it a safety critical system?isitasafetycriticalsystem? anypollutionorotherenvironmenthazards


TheSocialEnvironment:DoPeopleHelpEachOther?

underpressure? cooperate and share information, or workcooperateandshareinformation,orworkalone

h k d d h h sharetasksordependoneachother helpeachothertolearn,ordistracteachp ,other

i l hi h socialhierarchy


TheOrganizationEnvironment:DoesManagementSupportThisWork?

organizationalmissionandaims structural working factors (working hours,structuralworkingfactors(workinghours,groupworking,jobfunction,workpractices,etc )etc.)

attitudesandculturalfactors(policyoncomputersandIT,organizationalaimsandindustrial relations)industrialrelations)

flexibility


EnvironmentalConsiderations:WhereIsThisWorkDone?

TheUserSupportEnvironment

ConsiderationofEnvironmentalAspectsandHowTheyAffectDesign


Environmental characteristic Howitaffectsthedesign

Theenvironmentisnoisy.Theuseofsoundforalertinguserstoproblemsmaynotbeeffective

The environment is dusty or dirtyEquipmentmightrequiresometypeofprotective covering (e g a keyboard might needTheenvironmentisdustyordirty. protectivecovering(e.g., akeyboardmightneedamembranouscover).

Users wear protective clothing suchI d i ill d d hi

Userswear protectiveclothingsuchasgloves.

Inputdeviceswillneedtoaccommodatethis.

The work is highly pressured andTheapplicationmustallowtheusertostophis

Theworkishighly pressuredandsubjecttofrequentinterruptions.

orherworkandrestartitlater,preferablyfromthepointwheretheuserleftoff.

Th i d f k t hThereisaneedforworkerstoshareinformation,ortheworkisdesignedsothattheyworkingroups rather

Theworkplace willneedtobelaidoutcarefullytotakethisfactorintoconsideration.


thaninisolation.

Documents

User Interface Design - cp.eng.chula.ac.thchate/2110646/2553/03-Task.pdf · structure them within task subtask hierarchy describe order of subtasks ... UA7 Press the up arrow until