13

Systems Analysis and Design in a

Changing World, Fourth Edition
 13
Learning Objectives
 Describe the difference between user interfaces and system
interfaces
 Explain why the user interface is the system to the users
 Discuss the importance of the three principles of user-
centered design
 Describe the historical development of the field of human-
computer interaction (HCI)
 Describe the three metaphors of human-computer interaction.
 Discuss how visibility and affordance affect usability

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

 13
Learning Objectives (continued)
 Apply the eight golden rules of dialog design when designing
the user interface
 Define the overall system structure as a menu hierarchy
 Write user-computer interaction scenarios as dialogs
 Create storyboards to show the sequence of forms used in a
dialog
 Use UML class diagrams and sequence diagrams to
document dialog designs
 Design windows forms and browser forms that are used to
implement a dialog.
 List the key principles used in Web design
Systems Analysis and Design in a Changing World, 4th Edition 3
 13
Overview
 User interfaces handle input and output that involve a
user directly
 Focus on interaction between user and computer called
human-computer interaction (HCI)
 Metaphors to describe the user interface
 Usability and Web-based development guidelines
 Approaches to documenting dialog designs, including
UML diagrams from OO approach

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

 13
Identifying and Classifying
Inputs and Outputs

 Identified by analyst when defining system scope

 Requirements model produced during analysis

 Event table includes trigger to each external event

 Triggers represent inputs

 Outputs are shown as responses to events

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

 13

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

 13
Traditional and OO Approaches to Inputs
and Outputs
 Traditional approach to inputs and outputs
 Shown as data flows on context diagram, data flow
diagram (DFD) fragments, and detailed DFDs
 OO approach to inputs and outputs
 Defined by message entering or leaving system
 Documented in system sequence diagram (SSD)
 Actors provide inputs for many use cases
 Use cases provide outputs to actors

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

 13
User versus System Interface
 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.
 User interfaces
 I/O requiring human intervention.
 Query about the status of an order.
 In Web-based system ( create an order)

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

 13
User versus System Interface (Cont.)
 User interface is everything end user comes into contact with
while using the system
 To the user, the interface is the system
 Analyst designs system interfaces separate from user
interfaces ????
Because
 Requires different expertise and technology.

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

 13
Understanding the User Interface
 Physical aspects of the user interface
 Devices touched by user, manuals, documentation, and
forms
 Example: Mail-order data entry
 Perceptual aspects of the user interface
 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
 What user knows about system and logical function of
system (adding, deleting, updating, orders, etc.)
Systems Analysis and Design in a Changing World, 4th Edition 10
 13
Aspects of the User Interface

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

 13
User-Centered Design
 A collection of techniques that place the user at the center
of the development process.
 User-centered design techniques emphasize three
important principles:
 Focus early on the users and their work by focusing on
requirements
 Evaluate designs to ensure usability : the degree to which
a system is easy to learn and use.
 Iterative development keeps focus on user
 Continually return to user requirements and evaluate
system after each iteration (Analysis, design and
implementation).
Systems Analysis and Design in a Changing World, 4th Edition 12
 13
User-Centered Design (Cont.)
 Human-computer interaction (HCI)
 Study of end users and interaction with computers
 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 13

 13
Fields Contributing to the Study of HCI

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

 13
Metaphors for
Human-Computer Interaction
 There are many ways to think about HCI, including
metaphors or analogies.
 Direct manipulation metaphor
 User interacts with objects on display screen instead of
typing command on a command line. (examples:
buttons, check boxes, scroll bar).
 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
 13
Metaphors for
Human-Computer Interaction (Cont.)
 Document metaphor
 Computer is involved with browsing and entering data in
electronic documents
 Hypertext: documents that allow the user to click on a link
and jump to a different part of the document or another
document.
 Hypermedia: extend the hypertext context to include
multimedia content such as graphic, video and audio.
 Dialog metaphor
 Expresses the concept that the user and computer interact
by sending messages. Much like carrying on a conversation.

16
 13
Desktop Metaphor Based on Direct
Manipulation Shown on Display Screen

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

 13
Document Metaphor Shown as
Hypermedia in Web Browsers

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

 13
Dialog Metaphor Expresses the
Messaging Concept

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

 13
Guidelines for Designing
User Interfaces
 Visibility
 All controls should be visible
 Provide immediate feedback to indicate control is
responding( button after click changes color or sound)
 Affordance
 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, 4th Edition 20

 13
Eight Golden Rules for
Interactive Interface Design

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

 13
Documenting Dialog Designs
 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 can be used

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

 13
Dialogs and Storyboards
 Many methods exist for documenting dialogs

 Written descriptions following flow of activities like in

use case description

 Narratives

 Sketches of screens

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

 13
Storyboard
for the
Downtown
Videos Rent
Videos
Dialog

(Figure 13-9)

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

 13
Dialog Documentation with UML Diagrams
 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, 4th Edition 26

 13
Sequence Diagram for the RMO
Look Up Item Availability dialog (Figure 13-10)

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

 13
Class Diagram Showing Interface Classes
Making up ProductQueryForm

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

 13
Sequence Diagram Showing Specific
Interface Objects (Figure 13-12)

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

 13
Guidelines for Designing
Windows and Browser Forms
 Each dialog might require several windows forms
 Standard forms are widely available
 Windows form: Visual Basic, C++, C#, Java
 Browser form: HTML, VBScript, JavaScript, ASP, Java
servlets ( can be the same for internal and external)

 Implementation
 Identify objectives of form and associated data fields
 Construct form with prototyping tools

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

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

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

 13
Form Design Issues (Cont.)
 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.
 Navigation and support controls.
 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, 4th Edition 32

 13
Guidelines for Designing Web Sites
 Draw from guidelines and rules for designing windows
forms and browser forms

 Web sites are used for:

 Corporate communication

 Customer information and service

 Online Sales, distribution, and marketing

 They must interact seamlessly with customers 24/7

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

 13
Ten Good Deeds in Web Design
 Place organization’s name and logo on every page and link to
the homepage
 Provide a search function ( if more than 100 pages )
 Use straightforward headlines and page titles so it is clear
what page contains
 Structure page to help readers scan it
 Use hypertext to organize information into separate pages
 Use product photos (preferably thumbnails), but avoid
cluttered and bloated pages that load slowly.
 Use relevance-enhanced image reduction; zoom in on
needed detail.
Systems Analysis and Design in a Changing World, 4th Edition 34
 13
Ten Good Deeds in Web Design (Continued)
 Use link titles to provide users with a preview of where link
will take them before they have clicked on it.
 Ensure that pages are accessible by users with disabilities
especially visually impaired users.
 Do the same thing as everybody else because users come
to expect certain features.

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

 13
Design for RMO Phone-Order Dialog
 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.

 Steps in dialog models

1. Record customer information

2. Create new order

3. Record transaction details

4. Produce order confirmation

36
 13
Design for RMO Phone-Order Dialog
(Cont.)
 Traditional approach – use structure charts
 OO approach – expand SSD to include forms the user
will need for the interaction.

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

 13
Required Forms for RMO
 Main menu form
 Customer form
 Item search form
 Product detail form
 Order summary form
 Shipping and payment options form
 Order confirmation form

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

 Design Concept for Sequential 13
Approach to Create New Order Dialog

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

 Design Concept for Order-Centered 13
Approach to Create New Order Dialog

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

 Prototype Main Menu Form for Order- 13
Centered Approach to Dialog (Figure 13-17a)

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

 13
Order Summary and Product
Detail Forms (Figures 13-17b and 13-17c)

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

 Completed Order Summary and Shipping 13
Payment Forms (Figures 13-17d and 13-17e)

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

 13
Dialog Design for RMO Web Site
 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 including colours.
 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, 4th Edition 44

 13
RMO’s Home Page

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

 13
Product Detail Page from RMO Web Site

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

 13
Shopping Cart Page from RMO Web Site

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

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

 13
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 use cases and adds dialogs for
integrity controls, user preferences, help
 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, 4th Edition 49