CS427: Software Engineering IHomework assignmentsFinal examTopics on UI designEvaluating UIUI metricsUI evaluationEarly UI evaluationVery early UI evaluationSlide 10Size of evaluationJohnson’s LawMore from Joel SpolskyImplementation concernsSimplicityMake controls obvious and intuitiveSafetyUse standard librariesSlide 19When to build your ownSeparate UI from applicationUI in ASPSlide 23BenefitsDownsideUI in JavaResultsSummary of separationLast words from JoelUI PatternsNext: Open-source1CS427:Software Engineering IDarko Marinov(slides from Ralph Johnson)CS427 23-2Homework assignmentsHW4 due todayReviewsHW5 out, due on Tue, Dec 5Document architectureFinal project report due on Dec 7 or per agreement with graderOn-campus group can choose to meet with me or the TAs (Jeff for RUP projects, Valas for XP)CS427 23-3Final examDec 14: 7pm-10pmLet me know ASAP if you have conflictsExam will include all material from the course with emphasis on after-midtermDec 7 (last lecture): course summary, review sessionCS427 23-4Topics on UI designPreviousPrinciples and rulesModels: design vs. userObject-oriented UI designTodayEvaluating a UI designUI implementation and testingCS427 23-5Evaluating UIMust evaluate UITo see how to improve itTo see whether it is good enough to be releasedCS427 23-6UI metricsSize of written specificationNumber of user tasksNumber of actions per taskNumber of system statesNumber of help messagesCS427 23-7UI evaluationOnce system has users …SurveysFocus groupsMailing list for supportAnalyze help desk logsCS427 23-8Early UI evaluationHave people use the systemGive them tasksFind out what is wrong with itSurveysDirect observationQualitative - did they seem to be having trouble?Quantitative - measure time for tasksCS427 23-9Very early UI evaluationEvaluate paper prototypesEvaluation teamPerson to talk to userPerson to record observationsPerson to play computerUI made from paper, plastic (pop up menus), and colored inkCS427 23-10UI evaluationBe purposefulDecide on purpose of evaluation“Is this menu confusing?”“Can someone start using the system without reading a manual?”Choose tasksMake goals and measure to see if goals are metCS427 23-11Size of evaluationStatistically valid sample: 20-100Most common size: 5Purpose is to invent good UI, not to write a convincing paperPerform evaluations after every iterationCS427 23-12Johnson’s Law“If it hasn’t been tested, it doesn’t work.”Applied to UI:“If it hasn’t been tested on real users, it is not easy to use.”Feedback is essentialIteration is inevitableCS427 23-13More from Joel SpolskyDesign for people who have better things to do with their livesText? Mice?Memory?CS427 23-14Implementation concernsSimplicitySafetyUse standard libraries/toolkitsSeparate UI from applicationCS427 23-15SimplicityDon't compromise usability for functionA well-designed interface fades into the backgroundBasic functions should be obviousAdvanced functions can be hiddenCS427 23-16Make controls obvious and intuitiveIs the trash-can obvious and intuitive?Are tabbed dialog boxes obvious and intuitive?Is a mouse obvious and intuitive?CS427 23-17SafetyMake actions predictable and reversibleEach action does one thingEffects are visibleUser should be able to tell whether operation has been performedUndoCS427 23-18Use standard librariesDon’t build your own!If necessary, add to it, but try to use standard parts instead of building your ownCS427 23-19Use standard librariesProvide familiar controlsProvide consistencyReduce cost of implementationLibrary designers probably better UI designers than you areCS427 23-20When to build your ownYou are a platform provider orYou have special needs and a lot of money andYou are not in a hurry andYou know what you are doingCS427 23-21Separate UI from applicationUI and application change independentlyUI and application built by different peopleG U I l i b r a r y G U I A p p l i c a t i o nt e s t sCS427 23-22UI in ASPASP – embed Visual Basic code in your HTMLVB can call other codeCOM objectsMTSQuestion – how much VB goes in the web page, and how much goes outside?CS427 23-23Separate UI from applicationHTML is UIPut as little VB on web page as possibleASP has just enough VB to call a COM objectCS427 23-24BenefitsWrite automatic tests for COM object, not for UIPeople who write ASP don’t need to know how to program wellProgrammers don’t need to be good UI designersCS427 23-25DownsideCOM objects generate HTMLBut you can make standard set of “adapters” and so don’t have to duplicate codeLists, radio buttons, etc.Code tends to creep into ASPRefactorReviewCS427 23-26UI in JavaLearn to use your library (Swing)Separate application objects from UI objectsUI objects should just display or respond to eventsPut as much logic as possible in application objectsClose-box clicked: UIHas-changed: application objectCS427 23-27ResultsEasier to testAutomatic tests for application objectsTest GUI manually, and write automatic “smoke tests”Easier to changeCan change “business rule” independently of GUICan add web interface, speech interface, etc.CS427 23-28Summary of separationSeparate code into modulesTo enable people to work independentlyTo make system easier to changeTo make work easier to reuseSpecial case: Separate UI code from application codeCS427 23-29Last words from JoelInvent some users Figure out the important activities Figure out the user model -- how the user will expect to accomplish those activities Sketch out the first draft of the design Iterate over your design again and again, making it easier and easier until it's well within the capabilities of your imaginary users Watch real humans trying to use your software. Note the areas where people have trouble, which probably demonstrate areas where the program model isn't matching the user model.CS427 23-30UI PatternsA catalog of techniquesOrganizing contentGetting aroundOrganizing the pageGetting input from usersShowing complex dataCommands and actionsDirect manipulationNeither rules nor processOptional
View Full Document