Task-CenteredUser Interface Design
What is TCUID?TCUID processFinding and working with usersDeveloping task examplesEvaluation with task-centered walkthroughExample: the Cheap Shop interface
What is TCUID?
A design processone type of user-centred designstructured around specific tasks that users want to accomplish with the systememphasis on early consideration of tasks in designemphasis on concrete detailTasks are used to:aid in making design decisionsevaluate the design as it is developed
The TCUID process
figure out who's going to use the system to do whatchoose representative tasks for task-centered designborrowrough out a designthink about itcreate a mock-up or prototypetest it with usersiteratebuild ittrack itchange it
The TCUID process
figure out who's going to use the system to do whatchoose representative tasks for task-centered designborrow (lookfor inspiration)rough out a design (paper prototype)think about it (walkthrough)create a mock-up or prototypetest it with usersiteratebuild ittrack itchange it
Finding potential users
Who would use the system to do what?Exactlywho, andexactlywhat?Find potential users of your systemReal people! - not managers or other designersIf you can’t find them, who will actually buy/use your system?Consider typical and atypical usersFind out how the system would fit with their workAre they interested? Why or why not?Learn about the user’s tasksDevelop concrete, detailed examples of tasks they performor want to perform that your system should support
Choose representative tasks
What are the core tasks the system must support?ConsiderimportanceandfrequencyStart with 3-5 core taskscheck your decisions with usersWrite out task descriptions for these tasks
“Change the speed limit on Canyon Boulevard eastbound between Arapahoe and 9th. Calculate projected traffic flows on Arapahoe west of 6th assuming Canyon speeds between 25 and 55 in increments of 5 mph.”Read Chapters 0,1,2, 4.1:Task-Centered User Interface Design:A Practical Introductionhttp://hcibib.org/tcuid/
Says what the user wants to do but not how they would do itno assumptions made about the interfacecan compare different design alternatives in a fair wayAre very specificsays exactly what the user wants to dospecifies actual items the user would eventually want to enter, identify, or manipulatestates constraints or goals in task completione.g. time: as fast as possible; less than 15 secondse.g. quality: how much room for error?
Describe a complete jobnot just a list of simple things the system should dodoes more than present sub-goalsforces designer to consider how features will work togetherconsiders the flow of information over a time periodwhere does information come from?where does it go?what has to happen next?What is a complete job?consider temporal and spatial breakscheck your decisions with users
Say who the users arebe specific – important details are easy to overlookdesign success is strongly influenced by what users knowreflect the real interests of real usersAre evaluatedCirculate descriptions to users, and rewrite if neededask users for:omissionscorrectionsclarificationssuggestionsRemember users aren’t always rightconflict can tell you that you are missing something
Tough to be beat existing interfacesHelps learningSaves time in designing and buildingDon’t actually steal, just look for inspiration
How to actually design the UI?Look for existing interfaces that workBuild ideas from those interfaces into your systemse.g. high-level interaction paradigmse.g. low-level control/display decisionsWork within existing interface frameworkse.g., GUI toolkitsmake use of existing applications
Rough out a design
Low-fidelity prototypingpaper & penciljust draw the interface on paperdon’t worry about consistency or aestheticsFocus on the core tasksdon’t add extra functionalitymake sure theprototypecovers all of thetasks
Think about it (= evaluate)
Evaluate your rough designin terms of the tasks you were trying tosupportwithout a user!can catch errors that testers wouldn’t catchCould use existing evaluation methods:Cognitive WalkthroughHeuristic Evaluation
Cognitive walkthrougha UI evaluation technique where designers step through a task and attempt to complete the task with a prototype“simulated realistic user” based on the detailed user descriptiongoal is to identify obvious problems with the designStages:create ‘runnable’ task scenariosdo a walkthrough for each scenarioReading: “Performing a cognitive walkthrough”: www.cc.gatech.edu/classes/cs3302/documents/cog.walk.html
All the information needed to test the designall task informationdetailed sketchesof all needed screensCreate a scenario for each taskdesign specificwhat the user would have to do to carry out the task with this particular designwhat the user would seestep-by-step and at key moments inperforming the taskForces us to:get specific about our designconsider how the various features work together to accomplish real work
Select one of the task scenariosFor each user step or action in the task:Carry out the action with the interfaceAsk:would the user have done this action in this way?would the user’s expected knowledge be sufficientwould the user know what to do, be able to find control/command, and know that the control would have the desired effect?would the action be possible given the user’s situation?is the feedback understandable and sufficient?ifno:you’ve located a problem in the interfaceonce a problem is identified, assume it has been repairedgo to the next step in the task
Example: Cheap Shop
At Cheap Shop, people browse a catalog and then order goods from a clerk.Task example 1:A man caring for a demanding toddler buys an umbrella stroller (red is preferred, but blue is acceptable), pays for it in cash, and uses it immediately.Task example 2:An elderly arthritic woman is comparing prices for a child’s bedroom set, consisting of a wooden desk, a chair, a single bed, a mattress, a bedspread, and a pillow. She takes the description and total cost away with her, to check against other stores. Two hours later, she returns and decides to buy everything but the chair.
Example: Cheap Shop
Task example 3:A “Cheap Shop” clerk, who is the sole salesperson in the store, is given a list of 10 items by a customer who does not want to use the computer.4 pine chairs, 1 pine table, 6 blue place mats, 6 “duo” forks, 6 “duo” table spoons, 6 “duo” teaspoons, 6 “duo” knives, 1 “tot” tricycle, 1 red ball, 1 “silva” croquet setAfter seeing the total, the customer decides to take all but the silverware, and then adds 1 blue ball to the list.The customer then changes their mind about paying by credit card, and decides to pay cash. The customer wants the items delivered to his home the day after tomorrow.While this is occurring, 6 other customers are waiting for the salesperson.
Basic usage:Shoppers enter item codes from a catalog onto the screen.To create an orderscreen 1: shopper enters personal information and first ordertext is entered via keyboardthe tab key or mouse is used to go between fields.Further ordersshoppers go to screen 2 by pressing the ‘Next Catalog Item’ buttonOrder completionshoppers select ‘Trigger Invoice’.the system sends the order to shipping and billingthe system returns to a blank screen #1
To cancel an orderShoppers do not enter any input for 30 seconds(as if they walk away)The system will then clear all fields and return to the main screenInput checkingall input fields checked when either button is pressed.erroneous fields will blink for 3 seconds, and will then be cleared.the shopper can then re-enter the correct values in those fields.