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

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) u Describe the three metaphors of human-computer interaction. u Discuss how visibility and affordance affect usability

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

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

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

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

13 Systems Analysis and Design in a Changing World, 4th Edition 7 User versus System Interface u System interfaces : Involve I/O requiring minimal human intervention.  They might be inputs captured automatically ( scanner, electronic messages from another system).  Batch processing transaction compiled by another system.  Many outputs are considered system interface ( report, information ) to an external agent without much human intervention. u User interfaces l I/O requiring human intervention.  Query about the status of an order.  In Web-based system ( create an order)

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, 4th Edition 8

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 l Example: Mail-order data entry u Perceptual aspects of the user interface l Everything else user sees, hears, or touches such as screen objects, menus, buttons, lines and sound made by the system. u Conceptual aspects of the user interface l What user knows about system and logical function of system (adding, deleting, updating, orders, etc.)

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

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

13 User-Centered Design (Cont.) u Human-computer interaction (HCI) l Study of end users and interaction with computers u Human factors engineering (ergonomics):  the study of human interaction with machines in general.  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  Pilots are responsible for controlling many devices on the fly. Systems Analysis and Design in a Changing World, 4th Edition 12

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

13 14 Metaphors for Human-Computer Interaction u There are many ways to think about HCI, including metaphors or analogies. u Direct manipulation metaphor 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).

13 Metaphors for Human-Computer Interaction (Cont.) u 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. u Dialog metaphor l Expresses the concept that the user and computer interact by sending messages. Much like carrying on a conversation. 15

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

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

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

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

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

13 Systems Analysis and Design in a Changing World, 4th Edition 21 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 can be used to complete the design.

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

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

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

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

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

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

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

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

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

13 Form Design Issues (Cont.) u Two types of input controls are used:  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.  Check boxes : also work together as a group but allows the user to select as many value as desired within the group. u Navigation and support controls.  Minimize, Maximize, close button on the right corner, vertical scroll bar, etc. u Help support – tutorials, indexes, context-sensitive Systems Analysis and Design in a Changing World, 4th Edition 31

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

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

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

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

13 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, 4th Edition 36

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

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

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

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

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

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

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

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

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

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

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

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