Systems Analysis and Design in a Changing World

Systems Analysis and Design in a Changing World, Fourth 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 usercentered design u Describe the historical development of the field of humancomputer interaction (HCI) u Describe three metaphors of human-computer interaction. u Discuss how visibility and affordance affect usability Systems Analysis and Design in a Changing World, 4 th Edition 2

13 Learning Objectives (continued) u Apply the eight golden rules of dialog design when designing the user interface u Define the overall system structure as a menu hierarchy 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 3

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 to describe the user interface u Usability 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 4

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

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

Traditional and OO Approaches to Inputs and Outputs u Traditional approach to inputs and outputs l u 13 Shown as data flows on context diagram, data flow diagram (DFD) fragments, and detailed DFDs 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 u System interfaces : Involve I/O requiring minimal human intervention. v They might be inputs captured automatically ( scanner, electronic messages from another system). v Batch processing transaction compiled by another system. v Many outputs are considered system interface ( report, information ) to an external agent without much human intervention. User interfaces l I/O requiring human intervention. v Query about the status of an order. v In Web-based system ( create an order) Systems Analysis and Design in a Changing World, 4 th Edition 8

13 User versus System Interface (Cont. ) u User interface is everything end user comes into contact with while using the system u To the user, the interface is the system u Analyst designs system interfaces separate from user interfaces ? ? Because u Requires different expertise and technology. Systems Analysis and Design in a Changing World, 4 th Edition 9

13 Understanding the User Interface u u Physical aspects of the user interface l Devices touched by user, manuals, documentation, and forms l Example: Mail-order data entry Perceptual aspects of the user interface l u Everything else user sees, hears, or touches such as screen objects, menus, buttons, lines and sound made by the system. Conceptual aspects of the user interface l What user knows about system and logical function of system (adding, deleting, updating, orders, etc. ) Systems Analysis and Design in a Changing World, 4 th Edition 10

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

13 User-Centered Design u A collection of techniques that place the user at the center of the development process. u User-centered design techniques emphasize three important principles: u Focus early on the users and their work by focusing on requirements u Evaluate designs to ensure usability : the degree to which a 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 (Analysis, design and implementation). Systems Analysis and Design in a Changing World, 4 th Edition 12

13 User-Centered Design (Cont. ) u Human-computer interaction (HCI) l u Study of end users and interaction with computers Human factors engineering (ergonomics): v the study of human interaction with machines in general. v The formal study of human factors beans during World War II when an aerospace engineering studied the effects on airplane pilots of rearranging control of the cockpit v Pilots are responsible for controlling many devices on the fly. Systems Analysis and Design in a Changing World, 4 th Edition 13

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

Metaphors for Human-Computer Interaction u There are many ways to think about HCI, including metaphors or analogies. u Direct manipulation metaphor 13 l User interacts with objects on display screen instead of typing command on a command line. (examples: buttons, check boxes, scroll bar). l Desktop metaphor: direct manipulation coupled with OO programming in which the display screen includes an arrangement of common desktop object ( notepad, calendar, calculator and folder). 15

Metaphors for Human-Computer Interaction (Cont. ) u u 13 Document metaphor l Computer is involved with browsing and entering data in electronic documents l Hypertext: documents that allow the user to click on a link and jump to a different part of the document or another document. l Hypermedia: extend the hypertext context to include multimedia content such as graphic, video and audio. Dialog metaphor l Expresses the concept that the user and computer interact by sending messages. Much like carrying on a conversation. 16

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

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

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

Guidelines for Designing User Interfaces u u Visibility l All controls should be visible l Provide immediate feedback to indicate control is responding( button after click changes color or sound) Affordance l u 13 Appearance of control should suggest its functionality – purpose for which it is used ( button afford clicking, a scroll bar affords scrolling). System developers should use published interface design standards and guidelines Systems Analysis and Design in a Changing World, 4 th Edition 20

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

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 u l Allows user to navigate to each dialog l Provides overall system structure Storyboards, prototypes, and UML diagrams can be used to complete the design. Systems Analysis and Design in a Changing World, 4 th Edition 22

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 23

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 – technique used to document dialog designs by showing sequence of sketches of display screen during a dialog Systems Analysis and Design in a Changing World, 4 th Edition 24

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

13 Dialog Documentation with UML Diagrams u OO approach provides UML diagrams u Use case descriptions l u Activity diagrams l u List of steps followed as system and user interact Document dialog between user and computer for a use case 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 26

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 27

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

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

Guidelines for Designing Windows and Browser Forms u Each dialog might require several windows forms u Standard forms are widely available u l Windows form: Visual Basic, C++, C#, Java l Browser form: HTML, VBScript, Java. Script, ASP, Java servlets ( can be the same for internal and external) 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 30

13 Form Design Issues u u Form layout and formatting consistency ( all forms within the system need to have the same look and feel. l Headings, labels, logos l Font sizes, highlighting, colors l Order of data-entry fields and buttons Data keying and data entry (use standard control) l Text boxes: an input control that accept keyboard entry. l list boxes: an input control that contains a list of acceptable entries the user can select. l Combo boxes: user can enter new value or select from the entry. Systems Analysis and Design in a Changing World, 4 th Edition 31

13 Form Design Issues (Cont. ) u u Two types of input controls are used: v Radio buttons ( option buttons ): are associated with a group and the user select and only one of the group. Then the system turn off all other buttons in the group. v Check boxes : also work together as a group but allows the user to select as many value as desired within the group. Navigation and support controls. v u Minimize, Maximize, close button on the right corner, vertical scroll bar, etc. Help support – tutorials, indexes, context-sensitive Systems Analysis and Design in a Changing World, 4 th Edition 32

13 Guidelines for Designing Web Sites u Draw from guidelines and rules for designing windows forms and browser forms u Web sites are used for: u l Corporate communication l Customer information and service l Online Sales, distribution, and marketing They must interact seamlessly with customers 24/7 Systems Analysis and Design in a Changing World, 4 th Edition 33

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 ( if more than 100 pages ) 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 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. Systems Analysis and Design in a Changing World, 4 th Edition 34

13 Ten Good Deeds in Web Design (Continued) u Use link titles to provide users with a preview of where link will take them before they have clicked on it. u Ensure that pages are accessible by users with disabilities especially visually impaired users. 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 35

13 Design for RMO Phone-Order Dialog u u Referring to the models produced during analysis: v Data flow diagram fragment and corresponding detailed DFD for activities. OR v The UML sequence diagram for this scenario. Steps in dialog models 1. Record customer information 2. Create new order 3. Record transaction details 4. Produce order confirmation 36

Design for RMO Phone-Order Dialog (Cont. ) u Traditional approach – use structure charts u OO approach – expand SSD to include forms the user will need for the interaction. Systems Analysis and Design in a Changing World, 4 th Edition 13 37

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

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

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

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 41

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 42

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 43

13 Dialog Design for RMO Web Site u Basic dialog between user and customer similar to phoneorder representative u Web site will provide more information for user, be more flexible, and be easier to use u More product pictures are needed including colours. 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 44

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

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

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

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 48

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 49