Systems Analysis and Design in a Changing World

Systems Analysis and Design in a Changing World, Fourth Edition Systems Analysis and Design in a Changing World, 4 th Edition 13

13 Learning Objectives u Describe the difference between user interfaces and system interfaces u Explain why the user interface is the system to the users u Discuss the importance of the three principles of user-centered design u Describe the historical development of the field of human-computer interaction (HCI) Systems Analysis and Design in a Changing World, 4 th Edition 2

13 Learning Objectives (continued) u Describe three metaphors of human-computer interaction u Discuss how visibility and affordance affect usability u Apply the eight golden rules of dialog design when designing the user interface u Define the overall system structure as a menu hierarchy Systems Analysis and Design in a Changing World, 4 th Edition 3

13 Learning Objectives (continued) u Write user-computer interaction scenarios as dialogs u Create storyboards to show the sequence of forms used in a dialog u Use UML class diagrams and sequence diagrams to document dialog designs u Design windows forms and browser forms that are used to implement a dialog u List the key principles used in Web design Systems Analysis and Design in a Changing World, 4 th Edition 4

13 Overview u User interfaces handle input and output that involve a user directly u Focus on interaction between user and computer called human-computer interaction (HCI) u Metaphors u Usability to describe the user interface and Web-based development guidelines u Approaches to documenting dialog designs, including UML diagrams from OO approach Systems Analysis and Design in a Changing World, 4 th Edition 5

Identifying and Classifying Inputs and Outputs u Identified 13 by analyst when defining system scope u Requirements model produced during analysis l Event table includes trigger to each external event l Triggers represent inputs l Outputs are shown as responses to events Systems Analysis and Design in a Changing World, 4 th Edition 6

Traditional and OO Approaches to Inputs and Outputs u Traditional l 13 approach to inputs and outputs Shown as data flows on context diagram, data flow diagram (DFD) fragments, and detailed DFDs u OO approach to inputs and outputs l Defined by message entering or leaving system l Documented in system sequence diagram (SSD) l Actors provide inputs for many use cases l Use cases provide outputs to actors Systems Analysis and Design in a Changing World, 4 th Edition 7

13 User versus System Interface u System interfaces – I/O requiring minimal human interaction u User interfaces l I/O requiring human interaction l User interface is everything end user comes into contact with while using the system l To the user, the interface is the system u Analyst designs system interfaces separate from user interfaces u Requires different expertise and technology Systems Analysis and Design in a Changing World, 4 th Edition 8

13 Understanding the User Interface u Physical l aspects of the user interface Devices touched by user, manuals, documentation, and forms u Perceptual l aspects of the user interface Everything else user sees, hears, or touches such as screen objects, menus, and buttons u Conceptual l aspects of the user interface What user knows about system and logical function of system Systems Analysis and Design in a Changing World, 4 th Edition 9

13 Aspects of the User Interface Systems Analysis and Design in a Changing World, 4 th Edition 10

13 User-Centered Design u Focus early on the users and their work by focusing on requirements u Usability - system is easy to learn and use u Iterative development keeps focus on user l Continually return to user requirements and evaluate system after each iteration u Human-computer l interaction (HCI) Study of end users and interaction with computers u Human factors engineering (ergonomics) Systems Analysis and Design in a Changing World, 4 th Edition 11

13 Fields Contributing to the Study of HCI Systems Analysis and Design in a Changing World, 4 th Edition 12

Metaphors for Human-Computer Interaction u Direct l manipulation metaphor User interacts with objects on display screen u Document metaphor l Computer is involved with browsing and entering data in electronic documents l WWW, hypertext, and hypermedia u Dialog l 13 metaphor Much like carrying on a conversation Systems Analysis and Design in a Changing World, 4 th Edition 13

Desktop Metaphor Based on Direct Manipulation Shown on Display Screen Systems Analysis and Design in a Changing World, 4 th Edition 13 14

Document Metaphor Shown as Hypermedia in Web Browsers Systems Analysis and Design in a Changing World, 4 th Edition 13 15

Dialog Metaphor Expresses the Messaging Concept Systems Analysis and Design in a Changing World, 4 th Edition 13 16

Guidelines for Designing User Interfaces 13 u Visibility l All controls should be visible l Provide immediate feedback to indicate control is responding u Affordance l Appearance of control should suggest its functionality – purpose for which it is used u System developers should use published interface design standards and guidelines Systems Analysis and Design in a Changing World, 4 th Edition 17

Eight Golden Rules for Interactive Interface Design Systems Analysis and Design in a Changing World, 4 th Edition 13 18

13 Documenting Dialog Designs u Done simultaneously with other system activities u Based on inputs and outputs requiring user interaction u Used to define menu hierarchy l Allows user to navigate to each dialog l Provides overall system structure u Storyboards, prototypes, and UML diagrams Systems Analysis and Design in a Changing World, 4 th Edition 19

13 Overall Menu Hierarchy Design: Each Use Case Is Listed Under a Menu Utilities, Preferences, and Help Are Added Systems Analysis and Design in a Changing World, 4 th Edition 20

13 Dialogs and Storyboards u Many methods exist for documenting dialogs l Written descriptions following flow of activities like in use case description l Narratives l Sketches of screens l Storyboarding – showing sequence of sketches of display screen during a dialog Systems Analysis and Design in a Changing World, 4 th Edition 21

13 Storyboard for the Downtown Videos Rent Videos Dialog (Figure 13 -9) Systems Analysis and Design in a Changing World, 4 th Edition 22

13 Dialog Documentation with UML Diagrams u OO approach provides UML diagrams u Use case descriptions l List of steps followed as system and user interact u Activity l diagrams Document dialog between user and computer for a use case u System sequence diagrams (SSD) l Actor (a user) sends messages to system l System returns information in form of messages Systems Analysis and Design in a Changing World, 4 th Edition 23

Sequence Diagram for the RMO Look Up Item Availability dialog (Figure 13 -10) Systems Analysis and Design in a Changing World, 4 th Edition 13 24

Class Diagram Showing Interface Classes Making up Product. Query. Form Systems Analysis and Design in a Changing World, 4 th Edition 13 25

Sequence Diagram Showing Specific Interface Objects (Figure 13 -12) Systems Analysis and Design in a Changing World, 4 th Edition 13 26

Guidelines for Designing Windows and Browser Forms u Each dialog might require several windows forms u Standard forms are widely available u l Windows: Visual Basic, C++, C#, Java l Browser: HTML, VBScript, Java. Script, ASP, Java servlets 13 Implementation l Identify objectives of form and associated data fields l Construct form with prototyping tools Systems Analysis and Design in a Changing World, 4 th Edition 27

13 Form Design Issues u Form layout and formatting consistency l Headings, labels, logos l Font sizes, highlighting, colors l Order of data-entry fields and buttons u Data l keying and data entry (use standard control) Text boxes, list boxes, combo boxes, and so on u Navigation and support controls u Help support – tutorials, indexes, contextsensitive Systems Analysis and Design in a Changing World, 4 th Edition 28

13 Guidelines for Designing Web Sites u Draw from guidelines and rules for designing windows forms and browser forms u Web site uses l Corporate communication l Customer information and service l Sales, distribution, and marketing u Must work seamlessly with customers 24/7 Systems Analysis and Design in a Changing World, 4 th Edition 29

13 Ten Good Deeds in Web Design u Place organization’s name and logo on every page and link to the homepage u Provide a search function u Use straightforward headlines and page titles so it is clear what page contains u Structure page to help readers scan it u Use hypertext to organize information into separate pages Systems Analysis and Design in a Changing World, 4 th Edition 30

13 Ten Good Deeds in Web Design (Continued) u Use product photos (preferably thumbnails), but avoid cluttered and bloated pages that load slowly u Use relevance-enhanced image reduction; zoom in on needed detail u Use link titles to provide users with a preview of where link will take them u Ensure that pages are accessible by users with disabilities u Do the same thing as everybody else because users come to expect certain features Systems Analysis and Design in a Changing World, 4 th Edition 31

13 Design for RMO Phone-Order Dialog u Steps in dialog models 1. Record customer information 2. Create new order 3. Record transaction details 4. Produce order confirmation u Traditional approach – use structure charts u OO approach – expand SSD to include forms Systems Analysis and Design in a Changing World, 4 th Edition 32

13 Required Forms for RMO u Main menu u Customer u Item search u Product u Order detail summary u Shipping u Order and payment options confirmation Systems Analysis and Design in a Changing World, 4 th Edition 33

Design Concept for Sequential Approach to Create New Order Dialog Systems Analysis and Design in a Changing World, 4 th Edition 13 34

Design Concept for Order-Centered Approach to Create New Order Dialog Systems Analysis and Design in a Changing World, 4 th Edition 13 35

Prototype Main Menu Form for Order. Centered Approach to Dialog (Figure 13 -17 a) Systems Analysis and Design in a Changing World, 4 th Edition 13 36

Order Summary and Product Detail Forms (Figures 13 -17 b and 13 -17 c) Systems Analysis and Design in a Changing World, 4 th Edition 13 37

Completed Order Summary and Shipping Payment Forms (Figures 13 -17 d and 13 -17 e) Systems Analysis and Design in a Changing World, 4 th Edition 13 38

13 Dialog Design for RMO Web Site u Basic dialog between user and customer similar to phone-order representative u Web site will provide more information for user, be more flexible, and be easier to use u More product pictures are needed u Information needs are different for customer than for phone-order employees u Guidelines for visibility and affordance are used to convey positive company image Systems Analysis and Design in a Changing World, 4 th Edition 39

13 RMO’s Home Page Systems Analysis and Design in a Changing World, 4 th Edition 40

13 Product Detail Page from RMO Web Site Systems Analysis and Design in a Changing World, 4 th Edition 41

13 Shopping Cart Page from RMO Web Site Systems Analysis and Design in a Changing World, 4 th Edition 42

13 Summary u User interface is everything user comes into contact with while using the system l Physically, perceptually, and conceptually u To some users, user interface is the system u User-centered design means l Focusing early on users and their work l Evaluating designs to ensure usability l Applying iterative development Systems Analysis and Design in a Changing World, 4 th Edition 43

13 Summary (continued) u User interface is described with metaphors (desktop, document, dialog) u Interface design guidelines and standards are available from many sources u Dialog design starts with use cases and adds dialogs for integrity controls, user preferences, help u OO approach provides UML models to document dialog designs, including sequence diagrams, activity diagrams, and class diagrams Systems Analysis and Design in a Changing World, 4 th Edition 44