CINXE.COM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Tuesday, November 11, 2003: Monthly Program (BayCHI)</title> <META NAME="DESCRIPTION" CONTENT="BayCHI, the San Francisco Bay Area chapter of the ACM Special Interest Group on Computer-Human Interaction (SIGCHI), brings together scholars, practitioners, and users to exchange ideas about computer-human interaction and about the design and evaluation of human interfaces."> <META NAME="KEYWORDS" CONTENT="Baychi,ACM,SIGCHI,Special Interest Group,Computer-Human Interaction,Human-Computer Interaction,interfaces,HCI,usability,cognitive psychology,BOF,birds of a feather,San Francisco Bay Area"> <script language="JavaScript">  </script> <noscript> <LINK REL='stylesheet' TYPE='text/css' HREF='/navigator.css'> </noscript> <link rel="shorturl" href="http://baychi.org/_zj" /> <script async defer data-domain="baychi.org" src="/p.js"></script> </head> <body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 background="/images/background.gif"> <table cellpadding=0 cellspacing=0 border=0 width=782 > <tr> <td width=772 valign=absmiddle class="header" background="/images/tile_masthead.gif"> <table border=0 cellspacing=5 cellpadding=0 background=""> <tr> <td><a href="/"><img src="/images/spacer.gif" width="100" height="54" alt="" border="0" align=left></a></td> <td class="preface" valign=top>The San Francisco Bay Area Chapter of <a href="http://www.acm.org/sigchi/">ACM SIGCHI</a></td> <td width=340 align=right> <form method="GET" action="/search/"> <table> <tr> <td><INPUT class=searchfield size=15 name="q" value=""></td> <td><INPUT class=searchbutton type=submit value=Search></td> </tr> </table> </form> </td> </tr> </table> </td> </tr> <tr> <td background="/images/tile_tab1-off.gif"> <table border=0 cellspacing=0 cellpadding=0 background=""> <tr> <td class="Nav1"><img src="/images/spacer.gif" width="23" height="2" alt="" border="0"></td> <td class="Nav1"><a href="/">Home</a></td> <td class="Nav1"><img src="/images/spacer.gif" width="10" height="23" alt="" border="0"></td> <td><img src="/images/tab1_on-left.gif" width="4" height="23" alt="" border="0"></td> <td height="23" class="Nav1-on" background="/images/tile_tab1-on.gif"><img src="/images/spacer.gif" width="10" height="2" alt="" border="0"></td> <td height="23" class="Nav1-on" background="/images/tile_tab1-on.gif"><a href="/calendar/">Calendar</a></td> <td height="23" class="Nav1-on" background="/images/tile_tab1-on.gif"><img src="/images/spacer.gif" width="10" height="2" alt="" border="0"></td> <td><img src="/images/tab1_on-right.gif" width="4" height="23" alt="" border="0"></td> <td class="Nav1"><img src="/images/spacer.gif" width="10" height="23" alt="" border="0"></td> <td class="Nav1"><a href="/services/">Services</a></td> <td class="Nav1"><img src="/images/spacer.gif" width="10" height="23" alt="" border="0"></td> <td class="Nav1"><a href="/activities/">Activities</a></td> <td class="Nav1"><img src="/images/spacer.gif" width="10" height="23" alt="" border="0"></td> <td class="Nav1"><a href="/participate/">Participate</a></td> <td class="Nav1"><img src="/images/spacer.gif" width="10" height="23" alt="" border="0"></td> <td class="Nav1"><a href="/about/">About BayCHI</a></td> <td class="Nav1"><img src="/images/spacer.gif" width="20" height="2" alt="" border="0"></td> </tr> </table> </td> </tr> <tr> <td background="/images/tile_tab2-none.gif"> <table cellspacing=0 cellpadding=0 background="/images/tile_tab2-none.gif" border=0> <tbody> <tr> <td class="Nav2"><IMG height=8 alt="" src="/images/spacer.gif" width=20 border=0></TD> </tr> </tbody> </table> </td> </tr> <tr> <td Class="subheader"> <table border=0 cellspacing=0 cellpadding=0> <tr><td><img src="/images/spacer.gif" width="2" height="13" alt="" border="0"></td></tr> <tr> <td rowspan=2><img src="/images/spacer.gif" width="19" height="4" alt="" border="0"></td> <td rowspan=2><img src="/images/subhead_Calendar.gif" width="60" height="45" alt="" border="0"></td> <td rowspan=2><img src="/images/spacer.gif" width="16" height="4" alt="" border="0"></td> <td class="BreadCrumb"> </td> </tr> <tr><td class="PageTitle">Monthly Program: November 11, 2003</td></tr> <tr><td><img src="/images/spacer.gif" width="2" height="13" alt="" border="0"></td></tr> </table> </td> </tr> <tr><td background="/images/tile_subheader.gif"><img src="/images/spacer.gif" width="1" height="5" alt="" border="0"></td></tr> <tr><td width=772 valign=absmiddle bgcolor="#FFFFFF"><img src="/images/spacer.gif" width="2" height="1" alt="" border="0" align=left></td></tr> <tr> <td class="Second-Context"> <table border=0 cellspacing=0 cellpadding=0> <tr> <td width=20 class="Summary-Pane"><img src="/images/spacer.gif" width="10" height="2" alt="" border="0"></td> <td width=210 class="Summary-Pane" valign="top"><img src="/images/spacer.gif" width="210" height="2" alt="" border="0">   More Event Details <a href="/calendar/20031111/dinner/">Dinner information</a> <a href="/calendar/20031111/directions/">Directions</a>Schedule 7:30-9:30 pmPrinter-Friendly Flyer <a href="/calendar/files/flyer200311/flyer200311.pdf">One-Page Flyer</a> (PDF) for your bulletin board. (Requires the free <a href="http://www.adobe.com/prodindex/acrobat/readstep.html">Adobe Acrobat Reader</a>.)Location PARC's George E. Pake Auditorium 3333 Coyote Hill Road Palo Alto, CA <a href="/calendar/20031111/directions/">Directions</a>Ride Sharing We encourage you to use the <a href="/subscribe/">Discussions email list</a> to arrange shared rides with others planning to attend.BayCHI Contact Paul Whitmore <a href="/email/?m=pwhitmore%20baychi.org">pwhitmore@baychi.org</a>Also available: Short URL: baychi.org/_zj BayCHI program meetings are free and open to the public. BayCHI may publish audio or video recordings or photographs of BayCHI program meetings. BayCHI does not permit recording or photography by attendees.   </td> <td width=20 class="Summary-Pane"><img src="/images/spacer.gif" width="10" height="2" alt="" border="0"></td> <td width=1 bgcolor="#FFFFFF"><img src="/images/spacer.gif" width="1" height="400" alt="" border="0"></td> <td width=20 class="Content-Pane"><img src="/images/spacer.gif" width="10" height="2" alt="" border="0"></td> <td width=491 class="Content-Pane" valign="top"><img src="/images/spacer.gif" width="491" height="2" alt="" border="0">   <a name="1"></a> Designing Responsive Software Despite Performance Limitations Jeff Johnson, UI Wizards, Inc. Meeting report by Matt Klee <a href="/email/?m=mklee%20baychi.org"> mklee@baychi.org</a> Jeff Johnson is in the business of making mastodon palatable. (The mastodon is an ancestor of the elephant that became extinct thousands of years ago.) He knows he really can't make tough, old meat taste much better, so instead he focuses on other things to improve the meal. Today's mastodon is the limited performance of interactive systems. Jeff has spent the past 20 years picking away at the iceberg of glacial speed, and he's made some remarkable progress in making such limited systems responsive. First Attempts at Improving Responsiveness Jeff first started thinking about this issue while working at Xerox PARC, where he learned a lot about the prior work done by Stuart Card. At first, he tried a straightforward approach: Improve responsiveness by improving performance. When that didn't work, he began looking for ways to improve responsiveness without even trying to improve performance. Example of Unresponsiveness "If a human treated us this way, we'd cringe. But with software, we accept it." Jeff used examples of human interaction to depict poor responsiveness. Customer: "I'd like to have this camera repaired." Clerk: "Sure. Once I get your info and a $25 deposit, I'll put your job on a conveyer belt, and then it'll eventually get to the inspection station, where we'll let it sit for three days—holidays, you know…" In software, examples of poor responsiveness include: <ul> <li>A screen pointer that doesn't keep up.</li> <li>Delayed response to button-clicks.</li> <li>Sliders and scrollbars that lag.</li> <li>Applications that go "dead" during disk operations.</li> <li>Multiple screen repaints.</li> </ul> Reasons for Poor Responsiveness If poor responsiveness is so prevalent, why isn't more being done about it? <ul> <li>Importance not widely known.</li> <li>UI designers think of other things first.</li> <li>UI designers rarely specify responsiveness in their designs.</li> <li>Programmers tend to equate responsiveness with performance.</li> <li>This kind of tuning is always difficult.</li> <li>"We'll get it in the next release," and so on.</li> <li>Developers treat human input like machine input.</li> <li>Simple, naive implementations.</li> <li>Limitations of the web (which everybody knows about).</li> <li>GUI tools and platforms are inadequate. </ul> For example, if a UI designer fails to specify design of a scrollbar, what's a developer to do? Does the text move as the user scrolls, or does the text move after the user lets go of the scroll bar? The answer depends on the system's responsiveness, but if that decision isn't specified by the UI designer, the burden falls on the developer. And that's not a practical way to handle responsive design. Developers aren't focused on users. For example, a user hits down multiple times to scroll to a certain point. When he stops, he expects the text to stop, too. Unfortunately, he's built up a pocketful of extra mouse actions that are all queued up and continue to move the text. Responsiveness Design Principles <ul> <li>Responsiveness does not equal performance.</li> <li>Processing resources are limited. This problem doesn't go away. We still look at the hourglass as much as we did fifteen years ago.</li> <li>UI is real-time, with deadlines based on human time requirements.</li> <li>Software does not need to do everything instantly, or in a given order, or even at all.</li> </ul> Let's look at UI in real-time. Humans have three deadlines when interacting with machines. <ol type="a"> <li>Deadline at 0.1 seconds.</li> <li>Deadline at 1 second.</li> <li>Deadline at 10 seconds.</li> </ol> Each deadline is a combination of psychomotor and psycho-perceptual time constraints. And they're sloppy—as a designer, you don't need to hit it exactly. The deadline at .1 second usually governs human perception of cause and effect and perceptual fusion. For example, if you move the mouse and it doesn't respond in .1 second, the effect doesn't match the cause. The deadline at 1 second governs turn-taking in conversation and the minimum reaction time for unexpected events. Some examples of the value of 1 second in UI design: <ul> <li>One second to get a progress indicator.</li> <li>One second to open a window.</li> <li>One second to finish system-initiated operations.</li> </ul> Ten seconds governs the human span of focused attention to a task. (This is an admittedly sloppy number.) Some examples in UI design: <ul> <li>Ten seconds to complete one step of a task. Try entering a check into Intuit's Quicken or one step of a wizard.</li> <li>Ten seconds to finish input to an operation. Hit print, send on its way.</li> </ul> Achieving Responsiveness: Some Design Techniques <ol> <li>Meet human-time deadlines. Rely on the three deadlines and recognize the differences. Acknowledge user input immediately, and display busy and progress indicators. "Use them as frequently as you can," encourages Johnson. "You never know when it will take longer." For example, create a "real" progress bar. Apple's progress bars include the total items remaining, the overall progress, and the estimated time remaining. Tip: The estimated time should always go down, never up. And what does "47 seconds" mean to a user? Apple says "less than a minute." </li> <li>Display important information first. For example, when drawing a clock, draw the two hands on first, then the main numbers, then the rest of the hours, and so on. Tip: Don't break up photos into squares. </li> <li>Work in Parallel. Delegate work that isn't time-critical to background processes, and work ahead by preparing likely requests. <li>Queue Optimization. Create a logical order by looking at all pieces first and then prioritize. </li> <li>Dynamic time management. Adjust the strategy if not keeping up. Decrease quality or quantity to keep up. For example, the WordStar ran on a 1 MHz computer. It was killed when IBM personal computer came out. WordStar ran on a really slow machine and was written by an amateur programmer. The thing is, he knew he wasn't the world authority on programming, so he accommodated by making the system responsive. WordStar never dropped characters when people typed, and it made sure the characters were on screen instantly. (Other manufacturers dropped keys or didn't get characters on screen right away.) To keep up, the programmer of WordStar stopped updating other areas of screen—the cursor, the rippling effect, and so on. He kept the essential stuff on the display. He made good use of dynamic time management. </li> <li>Test under different conditions. Test under heavy loads. Test on slower systems, like your customers have, slower computers, and slower net connections. Amazon.com runs their web site on outdated browsers using a 56K modem. </li> </ol> Wrap Up Jeff based his talk loosely on one of his books, GUI Bloopers. He spent time answering questions and wrapped up by giving away a copy of his newest book, Web Bloopers. Original Announcement Many of today's interactive software products and services are not responsive enough. Responsiveness is one of the most important factors in determining customer satisfaction of software and on-line services, but it is often slighted by developers. Jeff will distinguish responsiveness from performance and explain why that performance need not limit responsiveness. He'll explain that the user/computer interface is a real-time interface which must satisfy time constraints to be perceived as responsive. Jeff will present techniques for improving responsiveness despite limited or fluctuating processing resources, and examples of responsive and unresponsive systems. Jeff Johnson is president and principal consultant of <a href="http://www.uiwizards.com">UI Wizards, Inc.</a>, a product usability consulting firm. He has worked in the field of Human-Computer Interaction since 1978. After earning B.A. and Ph.D. degrees from Yale and Stanford, he worked as a user-interface designer and implementer, engineer manager, usability tester, and researcher at Cromemco, Xerox, US West, Hewlett-Packard Labs, and Sun Microsystems. Jeff has published numerous articles and book chapters on a variety of topics in Human-Computer Interaction and the impact of technology on society. He speaks frequently at conferences and company sites on usability and user-interface design. He is the author of <a href="http://www.gui-bloopers.com/">GUI Bloopers: Don'ts and Do's for Software Developers and Web Designers</a>. Jeff will make a separate presentation to the <a href="/calendar/20031118/">BayCHI North Bay BOF on November 18</a>, an overview of his new book, <a href="http://www.web-bloopers.com/">Web Bloopers: 60 Common Design Mistakes and How to Avoid Them</a>.   </td> <td width=20 class="Content-Pane"><img src="/images/spacer.gif" width="10" height="2" alt="" border="0"></td> </tr> </table> </td> </tr> <tr> <td class="footer"> <table border=0 cellspacing=0 cellpadding=0 background=""> <tr> <td width=575 class="footer"> <a href="http://www.acm.org"><img src="/images/logo_acm.gif" width="46" height="49" alt="Association for Computing Machinery" border="0" align=absmiddle></a> <a href="http://www.acm.org/sigchi/"><img src="/images/logo_sigchi.gif" width="85" height="25" alt="Special Interest Group for Computer Human Interaction" border="0" align=absmiddle></a> <a href="/"><img src="/images/logo_baychi-footer.gif" width="66" height="49" alt="The San Francisco Bay Area Chapter of ACM SIGCHI" border="0" align=absmiddle></a> </td> <td class="footer" width=190>Updated: Apr 17, 2014 Copyright © ACM 2002-2024  <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.5/"><img src="https://baychi.org/by-nc-sa.png" width="80" height="15" alt="This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License." border="0" /></a>   </td> </tr> </table> </td> </tr> </table> </body> </html>