Designing Responsive Interactive Systems Despite Performance 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 in Single, 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-Constraints Not 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 Responding While 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 Responding While 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 for User 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 Impact on Design : Ignoring Its Impact on Design Alternative scrollbar operation UI Designers Rarely Specify
Input Events Handled In 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 is Straight 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
Assuming Queued 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 for Poor 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
Responsiveness Design 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
Responsiveness Design 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 are Cost-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
Acknowledge User-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
Display Important Information First : Display Important Information First Clock display on a computer screen Timely Feedback
Display Important Information First : Display Important Information First Timely Feedback
Display Important 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 Work to 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
Optimize Order 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 Tasks that 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 Strategy Based 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 Based on Deadline-Compliance : Adjust Strategy Based on Deadline-Compliance InXight Cone Tree Dynamic Time Management
Adjust Strategy Based 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 Under Realistic 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