Kĩ thuật lập trình - Chapter 11: human – computer interaction layer design

Chapter 11:Human–Computer InteractionLayer DesignObjectivesUnderstand several fundamental user interface (UI) design principles.Understand the process of UI design.Understand how to design the UI structure.Understand how to design the UI standards.Understand commonly used principles and techniques for navigation design.Objectives (cont’d)Understand commonly used principles and techniques for input design.Understand commonly used principles and techniques for output design.Be able to design a user interface.Understand the affect of nonfunctional requirements on the human-computer interaction layer.OverviewInterface Design formalizes the interaction of the system with external entitiesSystem Interfaces are machine-machine and are dealt with as part of systems integrationUser Interfaces are human-computer and are the focus of this chapterPRINCIPLES OF USER INTERFACE DESIGNPrinciples of User Interface DesignLayoutContent AwarenessAestheticsUser ExperienceConsistencyMinimal User EffortGeneral LayoutNavigation AreaStatus AreaReports & Forms AreaLayoutEach area may be further subdividedEach area is self-contained Areas should have a natural intuitive flowUsers from western nations tend to read from left to right and top to bottomUsers from other regions may have different flowsContent AwarenessIntuitively answers the users’ questions:Where am I?What am I supposed to be doing here?Content awareness applies to sub-areas within a form or windowRelated form fields (e.g. address information) are grouped togetherRelated report information (e.g. records) are grouped togetherForm Content AwarenessPhone Numbers AreaName AreaReport Content AwarenessFirst Record AreaSecond Record AreaAestheticsInterfaces should be functional, inviting to use, and pleasing to the eyeIn most cases, less is more (minimalist design)White space is importantAcceptable information density is proportional to the user’s expertiseNovice users prefer less than 50% densityExpert users prefer more than 50% densityBad AestheticsUser ExperienceEase of learningSignificant issue for inexperienced usersRelevant to systems with a large user populationEase of useSignificant issue for expert usersMost important in specialized systemsSometimes ease of learning and use of use go hand in handMultiple InterfacesMicrosoft Windows has multiple interfaces for the same functionalityMost users prefer to use Windows Explorer for handling filesExpert users sometimes prefer the command line interfaceConsistencyAll parts of the system work in the same wayKey areas of consistency areNavigation controlsTerminologyProbably most important concept in making the system simple because it allows the users to predict what is going to happenMinimal User EffortInterfaces should be designed to minimize the effort needed to accomplish tasksA common rule is the tree-clicks ruleUsers should be able to go from main menu of a system to the information they want in no more than three mouse clicks123USER INTERFACE DESIGN PROCESS5-Step UI Design ProcessUse Scenarios DevelopmentInterface Structure DesignInterface Standards DesignInterface Design PrototypingInterface EvaluationUse Scenario DevelopmentUse scenarios outline the steps performed by users to accomplish some part of their workA use scenario is one path through an essential use casePresented in a simple narrative descriptionDocument the most common cases so interface designs will be easy to use for those situationsInterface Structure DesignThe interface structure defines The basic components of the interfaceHow they work together to provide functionality to usersWindows Navigation Diagrams (WND) show how all the screens, forms, and reports used by the system are related how the user moves from one to anotherWindows Navigation DiagramsLike a state diagram for the user interfaceBoxes represent componentsWindowFormReportButtonArrows represent transitionsSingle arrow indicates no return to the calling stateDouble arrow represents a required returnStereotypes show interface typeSample WNDInterface Standards DesignInterface standards are basic design elements found across the system user interfaceStandards are needed for:Interface metaphorInterface objectsInterface actionsInterface iconsInterface templatesInterface Design PrototypingMock-ups or simulations of computer screens, forms, and reportsFour common approachesStoryboardWindows layout diagramHTML prototypeLanguage prototypeSample StoryboardInterface EvaluationGoal is to understand how to improve the interface design before the system is completeHave as many people as possible evaluate the interfaceIdeally, interface evaluation is done while the system is being designed—before it is built4 Approaches to UI EvaluationHeuristicWalkthroughInteractiveFormal Usability TestingNAVIGATION DESIGNNavigation Design Basic PrinciplesPrevent mistakesSimplify recovery from mistakesUse consistent grammar orderCommon Navigation MenuMenu barGrayed-out commandsDrop-down menuCascading menuINPUT DESIGNInput Design Basic PrinciplesOnline versus Batch processingCapture data at the sourceMinimize keystrokesTypes of InputsFree formText boxNumber boxSelection boxCheck boxRadio buttonList box (on-screen, drop-down, or combo)SlidersInput Validation TypesValidation TypeWhen to UseCompleteness checkWhen several fields must be entered before the form can be processedFormat checkWhen fields are numeric or contain coded dataRange checkWith all numeric data, if possibleCheck digit checkWhen numeric codes are used, such as when checking credit card numbersConsistency checkWhen data are related, such as when the user enters both a birth date and a date of marriage (birth < marriage)Database checkWhen data are available to be checked, such as when a user selects a user ID and we need to ensure it is not already takenOUTPUT DESIGNOutput Design Basic PrinciplesUnderstand report usageManage information loadMinimize biasTypes of OutputsDetail reportsSummary reportsException reportsTurnaround documentsGraphsNONFUNCTIONAL REQUIREMENTSNon-Functional RequirementsOperational RequirementsTechnologies that can be used (e.g. GUI, mouse)Performance RequirementsUser interface took kit speed and capacitySecurity RequirementsRestricted user interface (e.g. an ATM machine)Political & Cultural RequirementsDate formats, colors and iconsSummaryPrinciples of User Interface DesignUser Interface Design ProcessNavigation DesignInput DesignOutput DesignNonfunctional Requirements