ResponsivenessSlides

Designing Responsive Interactive Systems DespitePerformance Limits: 

Jeff Johnson www.uiwizards.com Designing Responsive Interactive Systems Despite Performance Limits

Most Software is Not Responsive Enough: 

Most Software is Not Responsive Enough Doesn’t provide prompt feedback Doesn’t inform users of progress Doesn’t allow users to cancel long operations Forces users to wait

Examples of Poor Responsiveness: 

Examples of Poor Responsiveness Depicted as dysfunctional human-human interaction

Parties Locked inSingle, Foreground Process: 

Parties Locked in Single, Foreground Process “Hello. I’d like to fly from San Francisco to New York next Thursday, returning Sunday evening, as cheaply as possible.” “OK, I’ll check flights & fares. I don’t know how long it will take, but you must stay on the line, not doing anything else, until I find the answer. If you hang up, I’ll forget about your request.” Poor Responsiveness

Time-ConstraintsNot Communicated: 

Time-Constraints Not Communicated “I’d like to have this camera repaired.” [Doesn’t say that he needs it in 2 weeks for a wedding.] “Sure. Once I get your information and a $25 deposit, I’ll put the job on our repair technician’s queue.” [Doesn’t say that the technician is on vacation in Botswana & won’t be back for 6 weeks.] Poor Responsiveness

Not RespondingWhile Busy: 

Not Responding While Busy “Fred, what are our plans this weekend?” [busy writing; no reply] “Hey! Do we have any plans for this weekend?” [still no reply] “Earth to Fred! Do you read me?” [finishes writing] “OK, done.” [looks up] “Did you say something?” Poor Responsiveness

Not RespondingWhile Busy: 

Not Responding While Busy Poor Responsiveness

More Examples: 

More Examples Screen pointer doesn’t keep up Delayed response to button-clicks Sliders, scrollbars that lag Apps that go “dead” during disk ops Multiple (unneeded) screen-repaints Poor Responsiveness

Definition of Responsiveness: 

Definition of Responsiveness A highly responsive system provides feedback that allows users to see what they are doing, & does not hamper their work-rate Feedback is a user-detectable system response to a user-action User action is any action by the user that causes a computation

Very Important forUser Satisfaction: 

Very Important for User Satisfaction Supported by many studies (see bib.) Can improve productivity (Brady, 1986) Productivity System Response Time (seconds) expert users average users .1 .2 .3 .4 .5 .6 .7 .8 .9 1.0 1.1 1.2 1.3

Reasons for Poor Responsiveness: 

Reasons for Poor Responsiveness Importance not widely known UI designers rarely specify Programmers equate with performance Programmers treat human input like machine input Simple, naïve implementations Limitations of the Web

Ignoring Its Impacton Design: 

Ignoring Its Impact on Design Alternative scrollbar operation UI Designers Rarely Specify

Input Events HandledIn Order & Weighted Equally: 

Input Events Handled In Order & Weighted Equally “OK, back ‘er up juuust a tad. A little more... more... more... more... more... a little more... OK, stop. Stop! STOP!” [CRRRUNNNNCH!!!!] “Aww, man! Why didn’t you stop when I said ‘stop’?” “Because I got behind on the ‘mores’ and still had a couple more to deal with before I got to your command to stop.” Human Treated Like Machine

Synchronous Dialog, Independent Requests: 

Synchronous Dialog, Independent Requests “Hello. I need shock absorbers for my ‘83 Toyota. Do you carry Acme shocks? “I’ll check the warehouse. Please wait.” [caller waits; salesman returns] “Yes.” “How much are they?” “Hang on, I’ll check.” [caller waits; salesman returns] “$50 each.” “What about Monroe shocks?” “I’ll check the warehouse. Please wait.” Naïve Implementation

“Heavyweight” Operation Impedes Req’d Iteration: 

“Heavyweight” Operation Impedes Req’d Iteration “Let’s try putting the piano here.” [mover slowly moves piano to indicated location] “No, that doesn’t work. How about over by the window?” [mover slowly moves piano again] “That’s even worse. Let’s try here.” Naïve Impl.

Event Queue isStraight FIFO: 

Event Queue is Straight FIFO [A building custodian starts his day] “Let’s see. What’s on my list for today? Sweep hallways floors. OK, let’s do it!” [sweep floors] “OK, that’s done. What’s next? Sand baseboards in hallway. OK, let’s do it!” Naïve Implementation

AssumingQueued Goals Remain Valid: 

Assuming Queued Goals Remain Valid “Here it is! I postponed my family’s vacation & worked overtime all week to make sure I got the Smith proposal done on time.” “Oh? Didn’t someone tell you? We decided not to go after the Smith contract.” Naïve Implementation

More Reasons forPoor Responsiveness: 

More Reasons for Poor Responsiveness GUI software tools, components, & platforms are inadequate Managers hire GUI programmers who lack the required skill

Phony Progress Bars: 

Phony Progress Bars Netscape Installer GUI Tools Are Inadequate

Phony Progress Bars: 

Phony Progress Bars MacOSX: CD burner utility GUI Tools Are Inadequate

ResponsivenessDesign Principles: 

Responsiveness Design Principles Responsiveness != performance Processing resources are limited UI is real-time, with deadlines Based on human time-requirements S/W needn’t do everything instantly Or in given order, or even at all Users are not computer programs

UI Deadline:0.1 Second: 

UI Deadline: 0.1 Second Upper Limit for: Perception of cause-effect Perceptual fusion Relevance to UI design: Feedback for hand-eye coordination Feedback for button click Displaying “busy” indicators Min. frame rate for smooth animation Responsiveness Principles

UI Deadline:1 Second: 

UI Deadline: 1 Second Average Time for: Turn-taking in conversation Min. reaction time for unexpected events Relevance to UI Design: Displaying progress indicators Opening window Finishing unrequested operations Responsiveness Principles

UI Deadline:10 Seconds: 

UI Deadline: 10 Seconds Average Time for: Unbroken attention to a task “Unit task” Relevance to UI Design: Completing one “step” of task Finishing input to operation Finishing one step in a wizard Responsiveness Principles

Achieving Responsiveness: 

Achieving Responsiveness Used with permission: Randy Glasbergen

ResponsivenessDesign Principles: 

Responsiveness Design Principles Responsiveness != performance Processing resources are limited UI is real-time, with deadlines Based on human time-requirements S/W needn’t do everything instantly Or in given order, or even at all Users are not computer programs

Some Requests areCost-Sensitive: 

Some Requests are Cost-Sensitive “Can you reformat this document in two columns?” “Yes, but it will take an hour.” (or cost $300) “Ack! Forget it! I don’t want it that much.” Software Needn’t Do Everything

Achieving Responsiveness: 

Achieving Responsiveness Timely feedback Parallel work Queue optimization Dynamic time-management Test under realistic conditions

Timely Feedback: 

Timely Feedback Meet human time-deadlines Acknowledge user input immediately Display “busy” & progress indicators Display important information first Fake “heavyweight” computations Achieving Responsiveness

AcknowledgeUser-Input Immediately: 

Acknowledge User-Input Immediately “Fred, what are our plans this weekend?” “Just a minute. I’m trying to get this idea down on paper.” “OK” [finishes writing] “OK, done. Our plans for this weekend? Let’s see…” Timely Feedback

Real Progress Bars: 

Real Progress Bars MacOSX: File copy utility

DisplayImportant Information First: 

Display Important Information First Clock display on a computer screen Timely Feedback

DisplayImportant Information First: 

Display Important Information First Timely Feedback

DisplayImportant Information First: 

Display Important Information First Timely Feedback

Fake“Heavyweight” Operations: 

Fake “Heavyweight” Operations “Let’s try putting the piano here.” “OK, but to save strain on my back, I brought a cardboard piano that we can move around until you know where you want it, then I’ll bring in the real piano and put it there.” Timely Feedback

Work in Parallel: 

Work in Parallel Delegate non-time-critical work to background processes But don’t overdo it Work ahead Smart: Prepare likely requests Dumb: Start before order complete Achieving Responsiveness

Delegate Workto Background Processes: 

Delegate Work to Background Processes “Hello. I’d like to fly from San Francisco to New York next Thursday, returning Sunday evening, as cheaply as possible.” “OK, I’ll check flights & fares and call you back.” Work in Parallel

Smart Work-Ahead:Prepare Likely Requests: 

Smart Work-Ahead: Prepare Likely Requests “Here are the overheads for your talk. Also, I figured you’d want paper copies to hand out to the audience, so I made 20.” “Thanks, Fred, you’re a godsend!” Work in Parallel

Dumb Work-Ahead:Start Before Order Complete: 

Dumb Work-Ahead: Start Before Order Complete “And what would you like for the main course?” “Hmmm. We haven’t decided yet. It all looks good!” “Well, while you decide, I’ll get your appetizer started and fetch your wine. When I return, you can tell me your choice for the entree.” Work in Parallel

Queue Optimization: 

Queue Optimization Re-order queued events Flush tasks that have become moot Merge compatible tasks Achieving Responsiveness

OptimizeOrder of Queued Events : 

Optimize Order of Queued Events [A building custodian starts his day] “Let’s see. What’s on my list for today? Sweep hallways floors. Sand baseboards in hallway. Repaint stairway banisters.” “Well, let’s see… I won’t sweep until after I sand because sanding will leave dust and grit everywhere. If I paint the banisters first, I’ll have to wait a day or two before I can sand the baseboards. So I’d better sand, then sweep, then paint.” Queue Optimization

Flush Queued Tasksthat Have Become Moot: 

Flush Queued Tasks that Have Become Moot “Before I postpone my family’s vacation & work overtime all week to get the Smith proposal done on time, are we still hoping to land that contract?” “Nope. We decided not to go after the Smith contract.” “Whew! Glad I checked.” Queue Optimization

Dynamic Time Management: 

Dynamic Time Management Adjust strategy if not keeping up Decrease quality or quantity to keep up Predict time; decide how to do task Predict time-compliance; negotiate quality or whether to do task at all Achieving Responsiveness

Adjust StrategyBased on Queue Length: 

Adjust Strategy Based on Queue Length WordStar (CP/M, 1 mhz computer) If lagging, last typed character visible Stops updating other areas of screen Most Word Processors Display reflects input-queue position Last typed character lags Even today! Dynamic Time Management

Adjust Strategy Basedon Deadline-Compliance: 

Adjust Strategy Based on Deadline-Compliance InXight Cone Tree Dynamic Time Management

Adjust StrategyBased on Time-Estimates: 

Adjust Strategy Based on Time-Estimates “Are you ready to order?” “Almost. Maybe N more minutes. It all looks good!” “OK, I’ll…” SWITCH N: { N < 1 min: “… wait here.” 1 <= N < 3 min: “… take these other folks’ order & come right back.” N >= 3 min: “… go away, & come back when I see you’re ready.” } Dynamic Time Management

Test UnderRealistic Conditions: 

Test Under Realistic Conditions Test under heavy loads Test on slower systems Slower computers Slower net connections Have programmers use slower systems? Achieving Responsiveness

The End: 

The End For details, see GUI Bloopers Responsiveness Bloopers chapter Website: www.GUI-Bloopers.com More recent book: Web Bloopers Website: www.Web-Bloopers.com