Jeff Johnson www.uiwizards.com

1
Designing Responsive Interactive Systems
DespitePerformance Limits

• Jeff Johnsonwww.uiwizards.com

2
Most Software is Not Responsive Enough

• Doesnt provide prompt feedback
• Doesnt inform users of progress
• Doesnt allow users to cancel long operations
• Forces users to wait

3
Examples of Poor Responsiveness

• Depicted as dysfunctional human-human interaction

4
Parties Locked inSingle, Foreground Process
Poor Responsiveness

• Hello. Id like to fly from San Francisco to
  New York next Thursday, returning Sunday evening,
  as cheaply as possible.
• OK, Ill check flights fares. I dont 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, Ill forget about your
  request.

5
Time-ConstraintsNot Communicated
Poor Responsiveness

• Id like to have this camera repaired.
  Doesnt say that he needs it in 2 weeks for a
  wedding.
• Sure. Once I get your information and a 25
  deposit, Ill put the job on our repair
  technicians queue. Doesnt say that the
  technician is on vacation in Botswana wont be
  back for 6 weeks.

6
Not RespondingWhile Busy
Poor Responsiveness

• 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?

7
Not RespondingWhile Busy
Poor Responsiveness
8
More Examples
Poor Responsiveness

• Screen pointer doesnt keep up
• Delayed response to button-clicks
• Sliders, scrollbars that lag
• Apps that go dead during disk ops
• Multiple (unneeded) screen-repaints

9
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

10
Very Important forUser Satisfaction

• Supported by many studies (see bib.)
• Can improve productivity (Brady, 1986)

Productivity
expert users
average users
.1
.2
.3
.4
.5
.6
.7
.8
.9
1.0
1.1
1.2
1.3
System Response Time (seconds)
11
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

12
Ignoring Its Impacton Design
UI Designers Rarely Specify

• Alternative scrollbar operation

13
Input Events HandledIn Order Weighted Equally
Human TreatedLike Machine

• 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 didnt 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.

14
Synchronous Dialog, Independent Requests
NaïveImplementation

• Hello. I need shock absorbers for my 83
  Toyota. Do you carry Acme shocks?
• Ill check the warehouse. Please wait.
• caller waits salesman returns Yes.
• How much are they?
• Hang on, Ill check.
• caller waits salesman returns 50 each.
• What about Monroe shocks?
• Ill check the warehouse. Please wait.

15
Heavyweight Operation Impedes Reqd Iteration
NaïveImpl.

• Lets try putting the piano here.
• mover slowly moves piano to indicated location
• No, that doesnt work. How about over by the
  window?
• mover slowly moves piano again
• Thats even worse. Lets try here.

16
Event Queue isStraight FIFO
NaïveImplementation

• A building custodian starts his day Lets
  see. Whats on my list for today? Sweep
  hallways floors. OK, lets do it!
• sweep floors
• OK, thats done. Whats next? Sand baseboards
  in hallway. OK, lets do it!

17
AssumingQueued Goals Remain Valid
NaïveImplementation

• Here it is! I postponed my familys vacation
  worked overtime all week to make sure I got the
  Smith proposal done on time.
• Oh? Didnt someone tell you? We decided not to
  go after the Smith contract.

18
More Reasons forPoor Responsiveness

• GUI software tools, components, platforms are
  inadequate
• Managers hire GUI programmers who lack the
  required skill

19
Phony Progress Bars
GUI Tools Are Inadequate

• Netscape Installer

20
Phony Progress Bars
GUI Tools Are Inadequate

• MacOSX CD burner utility

21
ResponsivenessDesign Principles

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

22
UI Deadline0.1 Second
Responsiveness Principles

• 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

23
UI Deadline1 Second
Responsiveness Principles

• 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

24
UI Deadline10 Seconds
Responsiveness Principles

• 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

25
Achieving Responsiveness
Used with permission Randy Glasbergen
26
ResponsivenessDesign Principles

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

27
Some Requests areCost-Sensitive
Software NeedntDo Everything

• Can you reformat this document in two columns?
• Yes, but it will take an hour. (or cost 300)
• Ack! Forget it! I dont want it that much.

28
Achieving Responsiveness

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

29
Timely Feedback
AchievingResponsiveness

• Meet human time-deadlines
• Acknowledge user input immediately
• Display busy progress indicators
• Display important information first
• Fake heavyweight computations

30
AcknowledgeUser-Input Immediately
TimelyFeedback

• Fred, what are our plans this weekend?
• Just a minute. Im trying to get this idea down
  on paper.
• OK
• finishes writing OK, done. Our plans for
  this weekend? Lets see

31
Real Progress Bars

• MacOSX File copy utility

32
DisplayImportant Information First
TimelyFeedback

• Clock display on a computer screen

33
DisplayImportant Information First
TimelyFeedback
34
DisplayImportant Information First
TimelyFeedback
35
FakeHeavyweight Operations
TimelyFeedback

• Lets 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 Ill bring in the
  real piano and put it there.

36
Work in Parallel
AchievingResponsiveness

• Delegate non-time-critical work to background
  processes
• But dont overdo it
• Work ahead
• Smart Prepare likely requests
• Dumb Start before order complete

37
Delegate Workto Background Processes
Work inParallel

• Hello. Id like to fly from San Francisco to
  New York next Thursday, returning Sunday evening,
  as cheaply as possible.
• OK, Ill check flights fares and call you
  back.

38
Smart Work-AheadPrepare Likely Requests
Work inParallel

• Here are the overheads for your talk. Also, I
  figured youd want paper copies to hand out to
  the audience, so I made 20.
• Thanks, Fred, youre a godsend!

39
Dumb Work-AheadStart Before Order Complete
Work inParallel

• And what would you like for the main course?
• Hmmm. We havent decided yet. It all looks
  good!
• Well, while you decide, Ill get your appetizer
  started and fetch your wine. When I return, you
  can tell me your choice for the entree.

40
Queue Optimization
AchievingResponsiveness

• Re-order queued events
• Flush tasks that have become moot
• Merge compatible tasks

41
OptimizeOrder of Queued Events
QueueOptimization

• A building custodian starts his day Lets
  see. Whats on my list for today? Sweep
  hallways floors. Sand baseboards in hallway.
  Repaint stairway banisters.
• Well, lets see I wont sweep until after I
  sand because sanding will leave dust and grit
  everywhere. If I paint the banisters first, Ill
  have to wait a day or two before I can sand the
  baseboards. So Id better sand, then sweep, then
  paint.

42
Flush Queued Tasksthat Have Become Moot
QueueOptimization

• Before I postpone my familys 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.

43
Dynamic Time Management
AchievingResponsiveness

• 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

44
Adjust StrategyBased on Queue Length
Dynamic TimeManagement

• 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!

45
Adjust Strategy Basedon Deadline-Compliance
Dynamic TimeManagement

• InXight Cone Tree

46
Adjust StrategyBased on Time-Estimates
Dynamic TimeManagement

• Are you ready to order?
• Almost. Maybe N more minutes. It all looks
  good!
• OK, Ill SWITCH N
• N lt 1 min wait here.
• 1 lt N lt 3 min take these other folks
  order come right
  back.
• N gt 3 min go away, come back
  when I see youre
  ready.

47
Test UnderRealistic Conditions
AchievingResponsiveness

• Test under heavy loads
• Test on slower systems
• Slower computers
• Slower net connections
• Have programmers use slower systems?

48
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