Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "13 Systems Analysis and Design in a Changing World, Fourth Edition."— Presentation transcript:

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

2 13 Systems Analysis and Design in a Changing World, 4th Edition 2 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)

3 13 Systems Analysis and Design in a Changing World, 4th Edition 3 Learning Objectives ( continued ) u Describe the 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

4 13 Systems Analysis and Design in a Changing World, 4th Edition 4 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

5 13 Systems Analysis and Design in a Changing World, 4th Edition 5 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 to describe the user interface u Usability and Web-based development guidelines u Approaches to documenting dialog designs, including UML diagrams from OO approach

6 13 Systems Analysis and Design in a Changing World, 4th Edition 6 Identifying and Classifying Inputs and Outputs u Identified 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

7 13 Systems Analysis and Design in a Changing World, 4th Edition 7 Traditional and OO Approaches to Inputs and Outputs u Traditional approach to inputs and outputs l 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

8 13 Systems Analysis and Design in a Changing World, 4th Edition 8 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

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

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

11 13 Systems Analysis and Design in a Changing World, 4th Edition 11 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 interaction (HCI) l Study of end users and interaction with computers u Human factors engineering (ergonomics)

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

13 13 Systems Analysis and Design in a Changing World, 4th Edition 13 Metaphors for Human-Computer Interaction u Direct manipulation metaphor l 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 metaphor l Much like carrying on a conversation

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

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

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

17 13 Systems Analysis and Design in a Changing World, 4th Edition 17 Guidelines for Designing User Interfaces 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

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

19 13 Systems Analysis and Design in a Changing World, 4th Edition 19 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

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

21 13 Systems Analysis and Design in a Changing World, 4th Edition 21 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

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

23 13 Systems Analysis and Design in a Changing World, 4th Edition 23 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 diagrams l 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

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

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

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

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

28 13 Systems Analysis and Design in a Changing World, 4th Edition 28 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 keying and data entry (use standard control) l Text boxes, list boxes, combo boxes, and so on u Navigation and support controls u Help support – tutorials, indexes, context- sensitive

29 13 Systems Analysis and Design in a Changing World, 4th Edition 29 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

30 13 Systems Analysis and Design in a Changing World, 4th Edition 30 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

31 13 Systems Analysis and Design in a Changing World, 4th Edition 31 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

32 13 Systems Analysis and Design in a Changing World, 4th Edition 32 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

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

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

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

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

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

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

39 13 Systems Analysis and Design in a Changing World, 4th Edition 39 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

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

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

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

43 13 Systems Analysis and Design in a Changing World, 4th Edition 43 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

44 13 Systems Analysis and Design in a Changing World, 4th Edition 44 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


Download ppt "13 Systems Analysis and Design in a Changing World, Fourth Edition."

Similar presentations


Ads by Google