1. Systems Analysis and Design in a Changing World, 6th Edition
INTRODUCTION TO
SYSTEMS ANALYSIS AND DESIGN:
AN AGILE, ITERATIVE APPROACH
SATZINGER | JACKSON | BURD
CHAPTER 7
Chapter 7
Systems Analysis and Design in a Changing World, 6th Edition

2. Designing the User and System Interfaces
Chapter 7
Introduction to Systems
Analysis and Design:
An Agile, Iteractive Approach
6th Ed
Satzinger, Jackson & Burd

3. Introduction to Systems Analysis and Design, 6th Edition
Chapter 7 Outline
User and System Interfaces
Understanding the User Interface
User-Interface Design Concepts
The Transition from Analysis to User-Interface Design
User-Interface Design
Identifying System Interfaces
Designing System Inputs
Designing System Outputs
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

4. Introduction to Systems Analysis and Design, 6th Edition
Learning Objectives
Describe the difference between user interfaces and system interfaces
Describe the historical development of the field of human-computer interaction (HCI)
Discuss how visibility and affordance affect usability
Describe user-interface guidelines that apply to all types of user-interface types and additional guidelines specific to Web pages and mobile applications
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

5. Learning Objectives (continued)
Create storyboards to show the sequence of forms used in a dialog
Discuss examples of system interfaces found in information systems
Define system inputs and outputs based on the requirements of the application program
Design printed and on-screen reports appropriate for recipients
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

6. Overview Information systems interact with people and other systems
Poorly designed user interface can make the information system unusable
Poorly designed system interfaces are a source of errors and inefficiency
User and system interfaces involve both inputs and outputs and involve a large number of stakeholders
Inputs and outputs of the system are an early concern of any system development project

7. User Interfaces and System Interfaces
User Interface – inputs and outputs that directly involve a human user/actor
A dialog goes on between actor and system
System Interface – the inputs and outputs that require minimal human intervention
Inputs captured automatically
Outputs direct to other systems
Printed and distributed to external actors (statements, reports)
In most development projects ,analysts separate the design of user interfaces from the design of system interfaces

8. User Centered Design
Design techniques that embody the view that the user interface is the system to the user
Principles of User Centered Design:
Focus early on users and their work
User-oriented analysis and design tasks are performed as early as possible and are often given higher priority than other tasks
User interfaces are designed in early iterations
Evaluate designs to ensure usability
Usability refers to the degree to which a system is easy to learn and use
Ensuring usability is not easy: there are many different types of users with different preferences and skills

9. Systems Analysis and Design in a Changing World, 6th Edition
User Centered Design
Ease of learning and ease of use are often in conflict
Developers employ many techniques to evaluate interface design to ensure usability like formal surveys ,focus group meeting, and informal observation
Use iterative development
Doing some analysis ,then some design ,then some implementation, and then repeating the process
Iterative development keeps the focus on the user by continually returning to the user requirements during each iteration and by evaluating the system after each iteration
Systems Analysis and Design in a Changing World, 6th Edition

10. Three Components of the User Interface
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

11. Metaphors of Human Computer Interaction
To make computers easier to use and learn, designers adopted metaphors which are analogies between features of the user interface and aspects of physical reality that users are familiar with
Direct manipulation metaphor
metaphor in which objects on a display are manipulated to look like physical objects (pictures) or graphic symbols that represent them (icons)
Desktop metaphor
metaphor in which the visual display is organized into distinct regions, with a large empty workspace in the middle and a collection of tool icons around the perimeter
Document metaphor
metaphor in which data is visually represented as paper pages or forms
Dialog metaphor
metaphor in which user and computer accomplish a task by engaging in a conversation or dialog via text, voice, or tools such as labeled buttons
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

12. Introduction to Systems Analysis and Design, 6th Edition
Metaphor Details
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

13. Direct Manipulation, Desktop, and Document Metaphors On One Screen
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

14. Introduction to Systems Analysis and Design, 6th Edition
Dialog Metaphor
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

15. User Interface Design Concepts
Human-Computer Interaction (HCI)
A field of study concerned with the efficiency and effectiveness of user interaction with computer systems, human-oriented input and output technology, and psychological aspects of user interfaces
There are two key principles to ensure good interaction between a person and a machine:
Visibility and Affordance
Affordance means that the appearance of a specific control suggests its function
Visibility means that a control is visible so users know it is available, it also means that the control provides immediate feedback to indicate that it is responding

16. Systems Analysis and Design in a Changing World, 6th Edition
Visibility and affordance are relatively easy to achieve for common platform design such as iPad or windows and harder in web interface design
Systems Analysis and Design in a Changing World, 6th Edition

17. User Interface Design Concepts
Consistency
User interfaces should be designed for consistency in function and appearance
Ex: applications that run under windows
Shortcuts
Users who work with an application repeatedly or for long time periods want shortcuts for frequently used functions
Application designers should use standard shortcuts when available or build their own
Feedback
Every action a user takes should result in some type of feedback from the computer so the user knows the action was recognized
Feedback can take many forms like audible feedback(clicking sounds) and visible feedback (the icon changes)
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

18. User Interface Design Concepts
Dialogs that yield Closure
Any well-defined task has beginning ,middle, and end, so user’s tasks on the computer should also feel this way
Users often focus intently on tasks, so when it is confirmed that a task is complete ,the users can get ready to focus on the next task
Error Handling
A good user-interface design anticipates common errors and helps user to avoid them
By limit available options, and adequate feedback
When errors do occur: the user interface need mechanisms to detect them(validation techniques), and help the user to correct them (clear error message)

19. User Interface Design Concepts
Easy Reversal of Actions
Users need to feel that they can explore options and take actions that can be cancelled or reversed without difficulty
By experimenting users learn about the system and also it a way to prevent error
Designers should be sure to include cancel buttons on all dialog boxes ,allow user to go back a step at any time and confirm delete action
Reduce Short Term Memory Load
People have short-term memory so designers should avoid requiring the user to remember anything from one form to another or from on dialog box to another

20. The transition from analysis to user interface design
The foundation for user-interface design is laid when use case are identified and documented during analysis
Use cases that require direct user interaction are the starting point for a dialog
Interactive use cases may require the user to input choices and data into the system or may generate outputs in response to a user request
During design ,dialogs for interactive use cases are further refined by developing menus, forms, and other user-interface elements
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

21. Systems Analysis and Design in a Changing World, 6th Edition
Use Cases and the Menu Hierarchy
Menus are a way of grouping related use cases or dialogs within a user interface
Menus are needed to present the user with number of choices per screen ,and to group related functions together so user can easily locate them
Menus usually contain 5 to 10 choices in order to avoid overloading the user
Systems Analysis and Design in a Changing World, 6th Edition

22. Two Different Menu Styles
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

23. Some RMO Use Cases Grouped by Actor and Subsystem
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

24. RMO Use Cases Grouped into First Cut Menu Hierarchy
Notice that you should group all related use cases for each user in one menu

25. Dialog Design and storyboards
After identifying all required dialogs, the designers must document the dialogs:
List the key steps followed for the dialog with a written description of what the users and computer do at each step(activity diagram format, use case description format, or free form)
Writ out how the user and system might interact if they were two people engaged in conversation(use storyboarding technique)
Storyboarding :showing the sequence of sketches of the display screen during dialog.
The sketches don’t have to be very detailed
Implemented by using a visual programming tool or graphics package
The screen formats are primitive
Review the storyboard with users and designers

26. From Dialog to Storyboard (part 1) Use case Check out shopping cart
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

27. From Dialog to Storyboard (part 1)
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

28. From Dialog to Storyboard (part 2)
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

29. From Dialog to Storyboard (part 2)
Introduction to Systems Analysis and Design, 6th Edition
© 2012 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition.
May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.