Lecture "Chapter 14: Designing the user interface" provides students with the knowledge: Identifying and classifying inputs and outputs, traditional and OO approaches to inputs and outputs, user versus system interface, aspects of the user interface, user centered design, metaphors for human computer interaction,... Invite you to consult.
14
14
interfaces and system interfaces
Understand the difference between user
the users
Explain why the user interface is the system to
Systems Analysis and Design in a Changing World, 3rd Edition
user-centered design
Discuss the importance of the three principles of
human-computer interaction (HCI)
Systems Analysis and Design in a Changing World, 3rd Edition
2
14
14
Describe the historical development of the field of
computer interaction
dialogs
Describe the three metaphors of human- Write user-computer interaction scenarios as
usability
forms used in a dialog
Apply the eight golden rules of dialog design
when designing the user interface
Discuss how visibility and affordance affect Create storyboards to show the sequence of
are used to implement a dialog
hierarchy
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
3
4
14
14
Use UML class diagrams and sequence diagrams to document dialog designs List the key principles used in Web design Design windows forms and browser forms that Define the overall system structure as a menu
involve a system user directly
called human-computer interaction (HCI)
Event table includes trigger to each external event
Metaphors to describe the user interface
User interfaces handle input and output that Identified by analyst when defining system scope Focus on interaction between user and computer, Requirements model produced during analysis
Triggers represent inputs
Outputs are shown as responses to events
Usability and Web-based development guidelines
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
5
6
Approaches to documenting dialog designs, including UML diagrams from OO approach
14
14
interaction
Shown as data flows on context diagram, data flow
diagram (DFD) fragments, and detailed DFDs
I/O requiring human interaction
System interfaces: I/O requiring minimal human Traditional approach to inputs and outputs User interfaces:
User interface is everything end user comes into
contact with while using the system
Defined by message entering or leaving system
Included in event table as triggers and responses
To the user, the interface is the system
Actors provide inputs for many use cases
OO approach to inputs and outputs
user interfaces
Use cases provide outputs to actors
Analyst designs system interfaces separate from
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
7
8
14
14
Requires different expertise and technology
Devices touched by user, manuals,
documentation, and forms
Physical Aspects of the User Interface
Everything else user sees, hears, or touches such
as screen objects, menus, and buttons
Perceptual Aspects of the User Interface
What user knows about system and logical
function of system
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
9
10
14
14
Conceptual Aspects of the User Interface
focusing on requirements
Focus early on the users and their work by
Continual return to user requirements and
evaluate system after each iteration
Usability - system is easy to learn and use Iterative development keeps focus on user
Study of end users and interaction with computers
Human-computer interaction (HCI)
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
11
12
Human factors engineering (ergonomics)
14
14
User interacts with objects on display screen
Direct manipulation metaphor
Computer is involved with browsing and entering
data on electronic documents
WWW, hypertext, and hypermedia
Document metaphor
Much like carrying on a conversation
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
13
14
14
14
Dialog metaphor
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
15
16
14
14
All controls should be visible
Provide immediate feedback to indicate control is
responding
Affordance
Appearance of control should suggest its functionality – purpose for which it is used
Visibility
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
17
18
System developers should use published interface design standards and guidelines
14
14
Done simultaneously with other system activities
interaction
Based on inputs and outputs requiring user
Allows user to navigate to each dialog
Provides overall system structure
Used to define menu hierarchy
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
19
20
14
14
Storyboards, prototypes, and UML diagrams
Written descriptions following flow of events
Narratives
Sketches of screens
Storyboarding – showing sequence of sketches of
display screen during a dialog
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
21
22
14
14
Many methods exist for documenting dialogs
List of steps followed as system and user interact
OO approach provides UML diagrams Use case descriptions
Document dialog between user and computer for a
use case
Activity diagrams
Actor (a user) sends messages to system
System returns information in form of messages
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
23
24
System sequence diagrams (SSD)
14
14
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
25
26
14
14
Headings, labels, logos
Standard forms are widely available
Font sizes, highlighting, colors
Windows: Visual Basic, C++, Java
Order of data-entry fields and buttons
Browser: HTML, VB-Script, JavaScript, ASP or
Java servlets
Form layout and formatting consistency Each dialog might require several window forms
Text boxes, list boxes, combo boxes, etc.
Identify objectives of form and associated data
fields
Data keying and data entry (use standard control) Implementation Navigation and support controls
Construct form with prototyping tools
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
27
28
14
14
Help support: tutorials, indexed, context-sensitive
Windows forms and browser forms
1. Record customer information
Draw from guidelines and rules for designing Steps in dialog models
2. Create new order
Corporate communication
3. Record transaction details
Customer information and service
4. Produce order confirmation
Sales, distribution, and marketing
Website uses:
Traditional approach – produce structure chart
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
29
30
Must work seamlessly with customers 24/7 OO approach – expand SSD to include forms
14
14
Main menu
Customer
Item search
Product detail
Order summary
Shipping and payment options
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
31
32
14
14
Order confirmation
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
33
34
14
14
to phone-order representative
Basic dialog between user and customer similar
be more flexible, and be easier to use
More product pictures are needed
Web site will provide more information for user,
for phone-order employees
Information needs are different for customer than
to convey positive company image
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
35
36
Guidelines for visibility and affordance are used
14
14
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
37
38
14
14
contact with while using the system
Physically, perceptually, and conceptually
User interface is everything user comes into
To some users, user interface is the system
Focusing early on users and their work
Evaluating designs to ensure usability
Applying iterative development
Systems Analysis and Design in a Changing World, 3rd Edition
Systems Analysis and Design in a Changing World, 3rd Edition
39
40
14
User-centered design means:
(desktop, document, dialog)
User interface is described with metaphors
available from many sources
Dialog design starts with events, adds dialogs for integrity controls, user preferences, help, menus
Interface design guidelines and standards are
Systems Analysis and Design in a Changing World, 3rd Edition
41
OO approach provides UML models to document dialog designs, including sequence diagrams, collaboration diagrams, and class diagrams
