软件工程英文教学课件：Ch11 User Interface Design

1、1Chapter 11User Interface DesignSoftware Engineering: A Practitioners Approach, 7/e by Roger S. Pressman2Interface Designlack of consistencytoo much memorizationno online guidance/helpno context sensitivitypoor responseunfriendlyTypical Design ErrorsEasy to use?Easy to understand?Easy to learn?Inter

2、face Design3什么是人机交互窗口、报告的设计格式为什么需要人机交互的设计人如何命令系统系统如何向人/用户提交信息如何设计人机交互对人进行分类描述人和他们的任务设计命令层次菜单：下拉、弹出、加亮等设计详细的交互根据GUI进行设计字型、坐标位置、事件、触发4Three Golden RulesPlace the user in controlReduce the users memory loadMake the interface consistent5Place the User in ControlDefine interaction modes in a way that doe

3、s not force a user into unnecessary or undesired actions(双重否定！可译为：采用限制用户误操作的交互方式)Provide for flexible interaction. Allow user interaction to be interruptible and undoable(中断或撤销). Streamline(流线化) interaction and allow the interaction to be customized. Hide technical internals from the user. Design fo

4、r direct interaction with objects that appear on the screen. 6Reduce the Users Memory LoadReduce demand on short-term memory. Establish meaningful defaults. Define shortcuts that are intuitive(直观的). The visual layout of the interface should be based on a real world metaphor(表征). Disclose information

5、 in a progressive fashion(不断揭示信息).7Make the Interface ConsistentAllow the user to put the current task into a meaningful context. Maintain consistency across a family of applications. If past interactive models have created user expectations, do not make changes unless there is a compelling reason t

6、o do so. 8User Interface Design ModelsUser model a profile(轮廓) of all end users of the systemDesign model a design realization of the user modelMental(心理的) model the users mental image of what the interface isImplementation model the interface “look and feel” coupled with supporting information that

7、 describe interface syntax and semantics9User Interface Design Process用户界面设计的分析与设计过程的迭代的（螺旋模型）。人机界面设计思想计算机按照机器的特性去行为，人按照自己的方式去思维和行为。要把人的思维和行为转换成机器可接受的方式，把机器的行为转换成人可接受的方式，这个转换就是人机界面。一个友好美观的界面会给人带来舒适的视觉享受。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并为最终用户而设计，是科学性的艺术设计。检验界面的唯一标准是最终用户的感受。1011Interface AnalysisInter

8、face analysis means understanding (1) the people (end-users) who will interact with the system through the interface;(2) the tasks that end-users must perform to do their work, (3) the content that is presented as part of the interface(4) the environment in which these tasks will be conducted.12User

9、 Analysis(需考虑的问题)Are users trained professionals, technician, or manufacturing workers?Are the users capable of learning from written materials?What is the age range of the user community?Do users work normal office hours or do they work until the job is done?Is the software to be an integral part o

10、f the work users do or will it be used only occasionally?What is the primary spoken language among users?What are the consequences(结果) if a user makes a mistake using the system?Do users want to know about the technology the sits behind the interface?13Task Analysis and ModelingAnswers the following

11、 questions What work will the user perform in specific circumstances?What tasks and subtasks will be performed as the user does the work?What specific problem domain objects will the user manipulate as work is performed?What is the sequence of work tasksthe workflow?What is the hierarchy of tasks?Us

12、e-cases define basic interactionTask elaboration refines interactive tasksObject elaboration identifies interface objects (classes)Workflow analysis defines how a work process is completed when several people (and roles) are involved 14Analysis of Display ContentThe format and aesthetics(美感) of the

13、content are considered.Are different types of data assigned to consistent geographic locations on the screen (e.g., photos always appear in the upper right hand corner)?Can the user customize the screen location for content?If a large report is to be presented, how should it be partitioned for ease

14、of understanding?Will mechanisms be available for moving directly to summary information for large collections of data.Will graphical output be scaled to fit within the bounds of the display device that is used?How will color to be used to enhance understanding?How will error messages and warning be

15、 presented to the user?15Interface Design StepsDefine interface objects and operations.Define events (user actions) that will cause the state of the user interface to change. Model this behavior.Depict each interface state as it will actually look to the end-user.Indicate how the user interprets the

16、 state of the system from information provided through the interface.16Mapping User Objectives17Interface Design-Example2022/7/1818USERPASSEXITPDMPDMBOMEXITADD“离开字段”事件及脚本：完成合法性检查“鼠标点“时执行脚本：添加数据“鼠标点“时执行脚本：退出该窗口；返回上级窗口对象的属性Interface Design-Example19Interface Design-Example20Interface Design-Example21Aesthetic DesignDont be afraid of white space.Emphasize content.Organize layout elements from top-left to bottom right. Group navigation, conte