Lecture Chapter 14: Designing the user interface

Chia sẻ: Minh Vũ | Ngày: | Loại File: PDF | Số trang:7

Thêm vào BST

Báo xấu

47
lượt xem 3
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Lecture "Chapter 14: Designing the user interface" provides students with the knowledge: Identifying and classifying inputs and outputs, traditional and OO approaches to inputs and outputs, user versus system interface, aspects of the user interface, user centered design, metaphors for human computer interaction,... Invite you to consult.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Lecture Chapter 14: Designing the user interface

14 14 Learning Objectives Chapter 14:  Understand the difference between user Designing the User Interface interfaces and system interfaces  Explain why the user interface is the system to the users Systems Analysis and Design in a Changing  Discuss the importance of the three principles of World, 3rd Edition user-centered design  Describe the historical development of the field of human-computer interaction (HCI) Systems Analysis and Design in a Changing World, 3rd Edition 2 14 14 Learning Objectives (continued) Learning Objectives (continued)  Describe the three metaphors of human-  Write user-computer interaction scenarios as computer interaction dialogs  Discuss how visibility and affordance affect  Create storyboards to show the sequence of usability forms used in a dialog  Apply the eight golden rules of dialog design when designing the user interface  Use UML class diagrams and sequence diagrams to document dialog designs  List the key principles used in Web design  Design windows forms and browser forms that  Define the overall system structure as a menu are used to implement a dialog hierarchy Systems Analysis and Design in a Changing World, 3rd Edition 3 Systems Analysis and Design in a Changing World, 3rd Edition 4 14 14 Identifying and Classifying Overview Inputs and Outputs  User interfaces handle input and output that involve a system user directly  Identified by analyst when defining system scope  Focus on interaction between user and computer,  Requirements model produced during analysis called human-computer interaction (HCI)  Metaphors to describe the user interface  Event table includes trigger to each external event  Usability and Web-based development guidelines  Triggers represent inputs  Approaches to documenting dialog designs, including UML diagrams from OO approach  Outputs are shown as responses to events Systems Analysis and Design in a Changing World, 3rd Edition 5 Systems Analysis and Design in a Changing World, 3rd Edition 6
14 14 Traditional and OO Approaches to Inputs User versus System Interface and Outputs  System interfaces: I/O requiring minimal human  Traditional approach to inputs and outputs interaction  Shown as data flows on context diagram, data flow  User interfaces: diagram (DFD) fragments, and detailed DFDs  I/O requiring human interaction  OO approach to inputs and outputs  User interface is everything end user comes into  Defined by message entering or leaving system contact with while using the system  Included in event table as triggers and responses  To the user, the interface is the system  Actors provide inputs for many use cases  Analyst designs system interfaces separate from  Use cases provide outputs to actors user interfaces  Requires different expertise and technology Systems Analysis and Design in a Changing World, 3rd Edition 7 Systems Analysis and Design in a Changing World, 3rd Edition 8 14 14 Understanding the User Interface Aspects of the User Interface  Physical Aspects of the User Interface  Devices touched by user, manuals, documentation, and forms  Perceptual Aspects of the User Interface  Everything else user sees, hears, or touches such as screen objects, menus, and buttons  Conceptual Aspects of the User Interface  What user knows about system and logical function of system Systems Analysis and Design in a Changing World, 3rd Edition 9 Systems Analysis and Design in a Changing World, 3rd Edition 10 14 14 User-Centered Design Fields Contributing to the Study of HCI  Focus early on the users and their work by focusing on requirements  Usability - system is easy to learn and use  Iterative development keeps focus on user  Continual return to user requirements and evaluate system after each iteration  Human-computer interaction (HCI)  Study of end users and interaction with computers  Human factors engineering (ergonomics) Systems Analysis and Design in a Changing World, 3rd Edition 11 Systems Analysis and Design in a Changing World, 3rd Edition 12
14 14 Metaphors for Desktop Metaphor Based on Direct Human-Computer Interaction Manipulation Shown on Display Screen  Direct manipulation metaphor  User interacts with objects on display screen  Document metaphor  Computer is involved with browsing and entering data on electronic documents  WWW, hypertext, and hypermedia  Dialog metaphor  Much like carrying on a conversation Systems Analysis and Design in a Changing World, 3rd Edition 13 Systems Analysis and Design in a Changing World, 3rd Edition 14 14 14 Desktop Metaphor Shown as Dialog Metaphor Expresses the Hypermedia in a Web Browser Messaging Concept Systems Analysis and Design in a Changing World, 3rd Edition 15 Systems Analysis and Design in a Changing World, 3rd Edition 16 14 14 Guidelines for Designing Eight Golden Rules for User Interfaces Interactive Interface Design  Visibility  All controls should be visible  Provide immediate feedback to indicate control is responding  Affordance  Appearance of control should suggest its functionality – purpose for which it is used  System developers should use published interface design standards and guidelines Systems Analysis and Design in a Changing World, 3rd Edition 17 Systems Analysis and Design in a Changing World, 3rd Edition 18
14 14 Documenting Dialog Designs Overall Menu Hierarchy Design  Done simultaneously with other system activities  Based on inputs and outputs requiring user interaction  Used to define menu hierarchy  Allows user to navigate to each dialog  Provides overall system structure  Storyboards, prototypes, and UML diagrams Systems Analysis and Design in a Changing World, 3rd Edition 19 Systems Analysis and Design in a Changing World, 3rd Edition 20 14 14 Dialogs and Storyboards Storyboard for Downtown Videos  Many methods exist for documenting dialogs  Written descriptions following flow of events  Narratives  Sketches of screens  Storyboarding – showing sequence of sketches of display screen during a dialog Systems Analysis and Design in a Changing World, 3rd Edition 21 Systems Analysis and Design in a Changing World, 3rd Edition 22 14 14 Sequence Diagram for the RMO Dialog Documentation with UML Diagrams Look Up Item Availability dialog  OO approach provides UML diagrams  Use case descriptions  List of steps followed as system and user interact  Activity diagrams  Document dialog between user and computer for a use case  System sequence diagrams (SSD)  Actor (a user) sends messages to system  System returns information in form of messages Systems Analysis and Design in a Changing World, 3rd Edition 23 Systems Analysis and Design in a Changing World, 3rd Edition 24
14 14 Class Diagram Showing Interface Classes Sequence Diagram Showing Specific Making up ProductQueryForm Interface Objects Systems Analysis and Design in a Changing World, 3rd Edition 25 Systems Analysis and Design in a Changing World, 3rd Edition 26 14 14 Guidelines for Designing Forms Design Issues Windows and Browser Forms  Each dialog might require several window forms  Form layout and formatting consistency  Standard forms are widely available  Headings, labels, logos  Windows: Visual Basic, C++, Java  Font sizes, highlighting, colors  Browser: HTML, VB-Script, JavaScript, ASP or  Order of data-entry fields and buttons Java servlets  Data keying and data entry (use standard control)  Implementation  Text boxes, list boxes, combo boxes, etc.  Identify objectives of form and associated data  Navigation and support controls fields  Help support: tutorials, indexed, context-sensitive  Construct form with prototyping tools Systems Analysis and Design in a Changing World, 3rd Edition 27 Systems Analysis and Design in a Changing World, 3rd Edition 28 14 14 Guidelines for Designing Web Sites Dialog Design for RMO Phone-Order  Draw from guidelines and rules for designing  Steps in dialog models Windows forms and browser forms 1. Record customer information  Website uses: 2. Create new order  Corporate communication 3. Record transaction details  Customer information and service 4. Produce order confirmation  Sales, distribution, and marketing  Traditional approach – produce structure chart  Must work seamlessly with customers 24/7  OO approach – expand SSD to include forms Systems Analysis and Design in a Changing World, 3rd Edition 29 Systems Analysis and Design in a Changing World, 3rd Edition 30
14 14 Design Concept for Sequential Required Forms for RMO Approach to Create New Order Dialog  Main menu  Customer  Item search  Product detail  Order summary  Shipping and payment options  Order confirmation Systems Analysis and Design in a Changing World, 3rd Edition 31 Systems Analysis and Design in a Changing World, 3rd Edition 32 14 14 Design Concept for Order-Centered Prototype Forms for an Order-Centered Approach to Create New Order Dialog Approach to the Dialog Systems Analysis and Design in a Changing World, 3rd Edition 33 Systems Analysis and Design in a Changing World, 3rd Edition 34 14 14 Prototype Forms for an Order-Centered Dialog Design for RMO Web Site Approach to the Dialog (continued)  Basic dialog between user and customer similar to phone-order representative  Web site will provide more information for user, be more flexible, and be easier to use  More product pictures are needed  Information needs are different for customer than for phone-order employees  Guidelines for visibility and affordance are used to convey positive company image Systems Analysis and Design in a Changing World, 3rd Edition 35 Systems Analysis and Design in a Changing World, 3rd Edition 36
14 14 RMO’s Home Page Product Detail Page from RMO Web Site Systems Analysis and Design in a Changing World, 3rd Edition 37 Systems Analysis and Design in a Changing World, 3rd Edition 38 14 14 Shopping Cart Page from RMO Web Site Summary  User interface is everything user comes into contact with while using the system  Physically, perceptually, and conceptually  To some users, user interface is the system  User-centered design means:  Focusing early on users and their work  Evaluating designs to ensure usability  Applying iterative development Systems Analysis and Design in a Changing World, 3rd Edition 39 Systems Analysis and Design in a Changing World, 3rd Edition 40 14 Summary (continued)  User interface is described with metaphors (desktop, document, dialog)  Interface design guidelines and standards are available from many sources  Dialog design starts with events, adds dialogs for integrity controls, user preferences, help, menus  OO approach provides UML models to document dialog designs, including sequence diagrams, collaboration diagrams, and class diagrams Systems Analysis and Design in a Changing World, 3rd Edition 41