1. 3/11/20021 Rapid Prototyping CS 160, Spring 2002 Professor James Landay March 11, 2002

2. 3/11/20022 Hall of Fame or Shame? z Page setup for printing in IE5

3. 3/11/20023 Hall of Shame z Page setup for printing in IE5 z Problems ycodes for header & footer information yrecognition over recall! yno equivalent GUI yhelp is the way to find out, but not obvious how

4. 3/11/20024 Hall of Fame or Shame? z Password dialog in Eudora Pro for Mac

5. 3/11/20025 Hall of Fame! z Password dialog in Eudora Pro for Mac z Most passwords are mixed case ycaps lock often leads to failure to authenticate z Good idea to inform user that Caps Lock is on z Flashing and “!” unnecessary

6. 3/11/20026 Interesting Survey Results... zLearning/installing new systems yeach employee lost 100 minutes a week in the 1st month a new system was introduced zDealing with PC/software malfunction or misuse http://guir.berkeley.edu/courses/cs160/spring2002/readings_files/harris-research-survey.htm In 1997, Harris Research found that employees who use PCs can lose up to 3 weeks/year tackling technology problems. Why?

7. 3/11/20027 Who Adapts to Who? “It is a far better to adapt the technology to the user than to force the user to adapt to the technology.” Larry Marine, Intuitive Design

8. 3/11/20028 Rapid Prototyping CS 160, Spring 2002 Professor James Landay March 11, 2002

9. 3/11/20029 Outline zReview Web vs. GUI design zWhy build prototypes? zTools for prototyping zWidgets zWhat prototyping tools lack zAdministrivia zVideos of research systems

10. 3/11/200210 Review Web vs. GUI Design yoverly long download times yout of date information ynon-standard link colors ylack of navigation support ylong scrolling pages yorphan pages ycomplex URLs yconstantly running animations ygratuitous use of technology ymisuse of frames zWeb page represents 1) Customer’s view of information on screen 2) Unit of navigation 3) Address to get info. over net (URL) 4) Storage of the information zDifferences between Web & desktop apps ywhen does the application state get modified? (“back”) ydialog boxes on the Web often lack context ydon’t know what type of client customer will have ycustomer controls navigation on Web (don’t know where they come from) zTop 10 Mistakes in Web Design

11. 3/11/200211 Problems with Low-fi Prototypes? zSlow compared to real computer zEnd-users can’t do it themselves zComputer inherently buggy zSometimes hard for participants to recognize widgets zHard to implement interactive functionality, like pulldowns zWon’t look like the final product zNot in context of user’s work environment

12. 3/11/200212 Problems with Low-fi Prototypes? zDoesn’t map well to what will actual fit on the screen zCouldn’t hold in your hand -- different ergonomics from target device zTiming in real-time hard to do (slooooow computer) zSome things could not be simulated (highlighting) zWriting on paper not the same as writing on target device zAppearance unrealistic zDynamic widgets hard to simulate (pop-ups) zSome items had to be static! zDragging hard to simulate

13. 3/11/200213 Problems with Low-fi Prototypes? zCouldn’t measure realistic I/O ymouse (can’t sketch the same way) yslow response zLack of interactive feedback ybutton highlights z“Computer” has to keep track of a lot of paper zHard to draw well (recognition of elmts) zUsers wouldn’t criticize UI zCan’t get accurate time measurement zCouldn’t give proper affordance that something wasn’t selectable

14. 3/11/200214 Why Build Prototypes? zMust test & observe ideas with customers zPaper mock-ups don’t go far enough yhow would you show a drag operation? ynot realistic of how interface will be used zBuilding final app. now is a mistake (?) ychanges in the UI can cause huge code changes xneed to convince programmer & hope they get it right ytakes too much time ywhat did Cooper say it is harder than???? zDrag & drop prototyping tool appropriate ybut only after we have iterated on design ywhy is Cooper against prototyping?

15. 3/11/200215 Why Use Tools (rather than code)? zFaster zEasier to incorporate testing changes zMultiple UIs for same application zConsistent user interfaces zEasier to involve variety of specialists zSeparation of UI code from app. code yeasier to change and maintain zMore reliable ybugs found in the tool are fixed for all applications

16. 3/11/200216 Prototyping Tools (historical) zHyperCard yfor Macintosh – built by Bill Atkinson ymetaphor: card transitions on button clicks ycomes with widget set ydrawing & animation limited zDirector ystill commonly used by designers yintended for multimedia -> until recently lacked interface widgets or controls ygood for non-widget UIs or the “insides” of app zBoth have “scripting” languages

17. 3/11/200217 HyperCard z Tool palettes

18. 3/11/200218 Director Cast z Basic objects used in interface z Mainly multimedia in nature yimages, audio, video, etc. ysynchronize with cue points

19. 3/11/200219 Director Score z Overview of events in time

20. 3/11/200220 Director Behavior Inspector z Connect events to actions z Drag & drop

21. 3/11/200221 UI Builders zVisual Basic ylots of widgets (AKA controls) ysimple language yslower than other UI builders zNeXT UIB, SpecTCL, PowerBuilder... ywidgets sets yeasily connect to code via “callbacks” y“commercial” strength languages

22. 3/11/200222 What’s the Difference? zPerformance yprototyping tools produce slow programs yUI builders depend on underlying language zWidgets yprototyping tools may not have complete set yUI builders have widget set common to platform zInsides of application yUIBs do little, prototypers offer some support zFinal product ygenerally use UI builders, though occasionally see things created in a prototyping tool (multimedia)

23. 3/11/200223 Widgets zButtons (several types) zScroll bars and sliders zPulldown menus

24. 3/11/200224 Widgets (cont.) zPalettes zDialog boxes zWindows and many more...

25. 3/11/200225 What is Missing? zSupport for the “insides” of applications

26. 3/11/200226 Administrivia zTeam meetings with me today & tomorrow ybreak now to agree on time x30 minute slots xMonday, starting from 1-3 PM & 4-4:30 PM xTuesday, starting from 12-12:30 PM & 3:30-4:30 PM xWednesday, starting from 3:00-4:30 PM zWeb sites must be up by next Friday with all of your previous assignments ylook at good examples from Fall 2000 xE-finder, Red Ink, Mobile interior Designer

27. 3/11/200227 Videos of Research Systems zForms VBT ytwo-view approach zLapidary yprecursor to many of today’s UI builders zVisual ObliqVisual Obliq yfor building distributed applications zMorphic ydirectness & liveness

28. 3/11/200228 Summary zUI tools good for testing more developed UI ideas zTwo styles of tools y“Prototyping” vs. UI builders ywhat is the difference? zBoth types generally ignore the “insides” of application -> this is research

29. 3/11/200229 Next Time zInformation Design ySchneiderman paper onlineSchneiderman paper online