Course: IKI81404T : Perancangan Sistem Informasi
PERANCANGAN SISTEM INFORMASI
Session
Session 77 User
User Interface
Interface Design
Design
nd
Based
Based on
on System
System Analysis
Analysis && Design
Design 22nd Edition
Edition
Authors
Authors :: Alan
Alan Dennis
Dennis && Barbara
Barbara Haley
Haley Wixom
Wixom
Publisher
Publisher :: John
John Wiley
Wiley && Sons
Sons
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Facult y of Com put er Science – UNI VERSI TY OF I NDONESI A
Objectives
Objectives
Understand several fundamental user interface design
principles.
Understand the process of user interface design.
Understand how to design the user interface
structure.
Understand how to design the user interface
standards.
Be able to design a user interface.
2
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Key
Key Definitions
Definitions
The user interface defines how the system will
interact with external entities
The system interfaces define how systems
exchange information with other systems
3
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Key
Key Definitions
Definitions
The navigation mechanism provides the way for
users to tell the system what to do.
The input mechanism defines the way the
system captures information.
The output mechanism defines the way the
system provides information to users or other
systems.
4
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Key
Key Definitions
Definitions
The graphical user interface (GUI) is the most
common type of interfaces most students are
likely to use personally and for developing
systems.
5
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
PRINCIPLES FOR
USER INTERFACE DESIGN
6
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Principles
Principles for
for User
User Interface
Interface Design
Design
Layout
Content awareness
Aesthetics
User experience
Consistency
Minimal user effort
7
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Concepts
Concepts
The screen is often divided into three boxes
Navigation area (top)
Status area (bottom)
Work area (middle)
Information can be presented in multiple areas
Like areas should be grouped together
8
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
More
More Layout
Layout Concepts
Concepts
Areas and information should minimize user
movement from one to another
Ideally, areas will remain consistent in
Size
Shape
Placement for entering data
Reports presenting retrieved data
9
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Example
Example 11
10
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Example
Example 22
11
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Example
Example 33
12
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Content
Content Awareness
Awareness
All interfaces should have titles
Menus should show
where you are
where you came from to get there
It should be clear what information is within each
area
Fields and field labels should be selected carefully
Use dates and version numbers to aid system
users
13
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Aesthetics
Aesthetics
Interfaces need to be functional and inviting to
use
Avoid squeezing in too much, particularly for
novice users
Design text carefully
Be aware of font and size
Avoid using all capital letters
14
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
More
More Aesthetics
Aesthetics
Colors and patterns should be used carefully
Test quality of colors by trying the interface on a
black/white monitor
Use colors to separate or categorize items
15
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
User
User Experience
Experience
How easy is the program to learn?
How easy is the program to use for the expert?
Consider adding shortcuts for the expert
Where there is low employee turnover, some
training can lessen the impact of less precise
interfaces
16
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Consistency
Consistency
Enables users to predict what will happen.
Reduces learning curve.
Considers items within an application and
across applications.
Pertains to many different levels
Navigation controls
Terminology
Report and form design
17
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Minimize
Minimize Effort
Effort
Three clicks rule
Users should be able to go from the start or
main menu of a system to the information or
action they want in no more than three
mouse clicks or three keystrokes.
18
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
USER INTERFACE DESIGN
PROCESS
19
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Five
Five Step
Step Process
Process
20
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
User
User Scenario
Scenario Development
Development
An outline of steps to perform work.
Presented in a simple narrative tied to the
related DFD.
Document the most common paths through the
use case so interface designs will be easy to use
for those situations.
21
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Your
Your Turn
Turn
Visit the Web site for your university and
navigate through several of its Web pages.
Develop two use scenarios for it.
22
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Structure
Structure Design
Design
A diagram showing how all screens, forms, and
reports are related.
Shows how user moves from one to another.
Similar to DFD in using boxes and lines.
Boxes denote screens.
Lines show movement from one to another.
Different from DFD in having no standard rules
or format.
23
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Structure
Structure Diagram
Diagram Example
Example
24
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Standards
Standards Design
Design
The basic elements that are common across
individual screens, forms, and reports within
the application
Interface metaphor
Desktop, checkbook, shopping cart
Interface objects
Interface actions
Interface icons
Interface templates
25
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Design
Design Prototyping
Prototyping
A mock-up or simulation of screen, form,
or report
Common methods include
Paper
Storyboarding
HTML prototype
Language prototype
26
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Storyboard
Storyboard Example
Example
27
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Evaluation
Evaluation Methods
Methods
Heuristic evaluation
Compare design to checklist
Walkthrough evaluation
Team simulates movement through
components
Interactive evaluation
Users try out the system
Formal usability testing
Expensive
Detailed use of special lab testing
28
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
NAVIGATION DESIGN
29
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles of
of Navigation
Navigation Design
Design
Assume users
Have not read the manual
Have not attended training
Do not have external help readily at hand
All controls should be clear and
understandable and placed in an intuitive
location on the screen.
30
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles of
of Navigation
Navigation Design
Design
Prevent mistakes
Limit choices
Never display commands that can’t be used
(or “gray them out”)
Confirm actions that are difficult or
impossible to undo
Simplify recovery from mistakes
Use consistent grammar order
31
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Navigation
Navigation Control
Control
Languages
Command language
Natural language
Menus
Generally aim at broad shallow menu
Consider using “hot keys”
Direct Manipulation
Used with icons to start programs
Used to shape and size objects
May not be intuitive for all commands
32
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
A
A Traditional
Traditional Menu
Menu in
in aa UNIX
UNIX System
System
33
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Common
Common Types
Types of
of Menus
Menus
34
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Menus
Menus
Typ e s o f Me nus
Me nu b a r
Dro p -d o wn me nu
Po p -up me nu
Ta b me nu
To o lb a r
Ima g e ma p
35
Whe n
Wo uld Yo u
Use Eac h o f
The se Me nu
Ty pe s?
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Message
Message Tips
Tips
Should be clear, concise, and complete
Should be grammatically correct and free of
jargon and abbreviations (unless they are the
users)
Avoid negatives and humor
36
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Messages
Messages
Typ e s o f Me ssa g e s
Erro r me ssa g e
C o nfirma tio n me ssa g e
Ac kno wle d g me nt me ssa g e
De la y me ssa g e
He lp me ssa g e
37
Whe n
Wo uld Yo u
Use Eac h o f
The se
Me ssag e
Ty pe s?
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Your
Your Turn
Turn
Pretend that you are designing the new
interface to a career services system at your
university.
How would you incorporate the basic principles
of input design into your interface design?
38
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
INPUT DESIGN
39
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles of
of Input
Input Design
Design
The goal is to simply and easily capture
accurate information for the system
Reflect the nature of the inputs
Find ways to simplify their collection
40
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Online
Online versus
versus Batch
Batch Processing
Processing
Online processing immediately records the
transaction in the appropriate database
Batch processing collects inputs over time and
enters them into the system at one time in a
batch
Batch processing simplifies data
communications and other processes, master
files are not updated real time
41
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Capture
Capture Data
Data at
at the
the Source
Source
Reduces duplicate work.
Reduces processing time.
Decreases cost.
Decreases probability of error.
42
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Source
Source Data
Data Automation
Automation
Can be obtained by using the following
technologies:
bar code readers
optical character recognition
magnetic stripe readers
smart cards
How can internet be used for source data
automation?
43
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Minimize
Minimize Keystrokes
Keystrokes
Never ask for information that can be obtained
other ways
Lookups
Dropdown lists
Default values
44
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Inputs
Inputs
Data items linked to fields
Text
Numbers
Selection boxes
45
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Input
Input Forms
Forms
46
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Selection
Selection Boxes
Boxes
Typ e s o f Bo xe s
C he c k b o x
Ra d io b utto n
O n-sc re e n list b o x
Dro p -d o wn list b o x
C o mb o b o x
Slid e r
47
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Whe n
Wo uld Yo u
Use Eac h o f
The se
Bo x
Ty pe s?
Types
Types of
of Input
Input Validation
Validation
Typ e s o f Va lid a tio n
C o mp le te ne ss c he c k
Fo rma t c he c k
Ra ng e c he c k
C he c k d ig it c he c k
C o nsiste nc y c he c k
Da ta b a se c he c ks
48
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Whe n
Wo uld Yo u
Use Eac h o f
The se
Validatio n
Me tho ds?
OUTPUT DESIGN
49
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles
Understand report usage
Reference or cover-to-cover?
Frequency?
Real-time or batch reports?
Manage information load
All needed information, no more
Minimize bias
50
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Bias
Bias in
in Graphs
Graphs
51
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Reports
Reports
Typ e s o f Re p o rts
De ta il re p o rts
Summa ry re p o rt
Turna ro und d o c ume nt
G ra p hs
52
Whe n
Wo uld Yo u
Use Eac h o f
The se
Re po rt
Ty pe s?
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Report
Report Media
Media
Elect ronic
Versus Paper
53
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Summary
Summary
The fundamental goal of navigation design is to
make the system as simple to use as possible
The goal of input mechanism is to simply and
easily capture accurate information
The goal of the output mechanism is to provide
accurate information to users that minimize
information overload and bias
54
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Session
Session 77 User
User Interface
Interface Design
Design
nd
Based
Based on
on System
System Analysis
Analysis && Design
Design 22nd Edition
Edition
Authors
Authors :: Alan
Alan Dennis
Dennis && Barbara
Barbara Haley
Haley Wixom
Wixom
Publisher
Publisher :: John
John Wiley
Wiley && Sons
Sons
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Facult y of Com put er Science – UNI VERSI TY OF I NDONESI A
Objectives
Objectives
Understand several fundamental user interface design
principles.
Understand the process of user interface design.
Understand how to design the user interface
structure.
Understand how to design the user interface
standards.
Be able to design a user interface.
2
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Key
Key Definitions
Definitions
The user interface defines how the system will
interact with external entities
The system interfaces define how systems
exchange information with other systems
3
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Key
Key Definitions
Definitions
The navigation mechanism provides the way for
users to tell the system what to do.
The input mechanism defines the way the
system captures information.
The output mechanism defines the way the
system provides information to users or other
systems.
4
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Key
Key Definitions
Definitions
The graphical user interface (GUI) is the most
common type of interfaces most students are
likely to use personally and for developing
systems.
5
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
PRINCIPLES FOR
USER INTERFACE DESIGN
6
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Principles
Principles for
for User
User Interface
Interface Design
Design
Layout
Content awareness
Aesthetics
User experience
Consistency
Minimal user effort
7
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Concepts
Concepts
The screen is often divided into three boxes
Navigation area (top)
Status area (bottom)
Work area (middle)
Information can be presented in multiple areas
Like areas should be grouped together
8
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
More
More Layout
Layout Concepts
Concepts
Areas and information should minimize user
movement from one to another
Ideally, areas will remain consistent in
Size
Shape
Placement for entering data
Reports presenting retrieved data
9
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Example
Example 11
10
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Example
Example 22
11
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Layout
Layout Example
Example 33
12
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Content
Content Awareness
Awareness
All interfaces should have titles
Menus should show
where you are
where you came from to get there
It should be clear what information is within each
area
Fields and field labels should be selected carefully
Use dates and version numbers to aid system
users
13
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Aesthetics
Aesthetics
Interfaces need to be functional and inviting to
use
Avoid squeezing in too much, particularly for
novice users
Design text carefully
Be aware of font and size
Avoid using all capital letters
14
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
More
More Aesthetics
Aesthetics
Colors and patterns should be used carefully
Test quality of colors by trying the interface on a
black/white monitor
Use colors to separate or categorize items
15
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
User
User Experience
Experience
How easy is the program to learn?
How easy is the program to use for the expert?
Consider adding shortcuts for the expert
Where there is low employee turnover, some
training can lessen the impact of less precise
interfaces
16
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Consistency
Consistency
Enables users to predict what will happen.
Reduces learning curve.
Considers items within an application and
across applications.
Pertains to many different levels
Navigation controls
Terminology
Report and form design
17
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Minimize
Minimize Effort
Effort
Three clicks rule
Users should be able to go from the start or
main menu of a system to the information or
action they want in no more than three
mouse clicks or three keystrokes.
18
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
USER INTERFACE DESIGN
PROCESS
19
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Five
Five Step
Step Process
Process
20
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
User
User Scenario
Scenario Development
Development
An outline of steps to perform work.
Presented in a simple narrative tied to the
related DFD.
Document the most common paths through the
use case so interface designs will be easy to use
for those situations.
21
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Your
Your Turn
Turn
Visit the Web site for your university and
navigate through several of its Web pages.
Develop two use scenarios for it.
22
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Structure
Structure Design
Design
A diagram showing how all screens, forms, and
reports are related.
Shows how user moves from one to another.
Similar to DFD in using boxes and lines.
Boxes denote screens.
Lines show movement from one to another.
Different from DFD in having no standard rules
or format.
23
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Structure
Structure Diagram
Diagram Example
Example
24
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Standards
Standards Design
Design
The basic elements that are common across
individual screens, forms, and reports within
the application
Interface metaphor
Desktop, checkbook, shopping cart
Interface objects
Interface actions
Interface icons
Interface templates
25
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Design
Design Prototyping
Prototyping
A mock-up or simulation of screen, form,
or report
Common methods include
Paper
Storyboarding
HTML prototype
Language prototype
26
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Storyboard
Storyboard Example
Example
27
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Interface
Interface Evaluation
Evaluation Methods
Methods
Heuristic evaluation
Compare design to checklist
Walkthrough evaluation
Team simulates movement through
components
Interactive evaluation
Users try out the system
Formal usability testing
Expensive
Detailed use of special lab testing
28
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
NAVIGATION DESIGN
29
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles of
of Navigation
Navigation Design
Design
Assume users
Have not read the manual
Have not attended training
Do not have external help readily at hand
All controls should be clear and
understandable and placed in an intuitive
location on the screen.
30
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles of
of Navigation
Navigation Design
Design
Prevent mistakes
Limit choices
Never display commands that can’t be used
(or “gray them out”)
Confirm actions that are difficult or
impossible to undo
Simplify recovery from mistakes
Use consistent grammar order
31
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Navigation
Navigation Control
Control
Languages
Command language
Natural language
Menus
Generally aim at broad shallow menu
Consider using “hot keys”
Direct Manipulation
Used with icons to start programs
Used to shape and size objects
May not be intuitive for all commands
32
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
A
A Traditional
Traditional Menu
Menu in
in aa UNIX
UNIX System
System
33
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Common
Common Types
Types of
of Menus
Menus
34
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Menus
Menus
Typ e s o f Me nus
Me nu b a r
Dro p -d o wn me nu
Po p -up me nu
Ta b me nu
To o lb a r
Ima g e ma p
35
Whe n
Wo uld Yo u
Use Eac h o f
The se Me nu
Ty pe s?
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Message
Message Tips
Tips
Should be clear, concise, and complete
Should be grammatically correct and free of
jargon and abbreviations (unless they are the
users)
Avoid negatives and humor
36
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Messages
Messages
Typ e s o f Me ssa g e s
Erro r me ssa g e
C o nfirma tio n me ssa g e
Ac kno wle d g me nt me ssa g e
De la y me ssa g e
He lp me ssa g e
37
Whe n
Wo uld Yo u
Use Eac h o f
The se
Me ssag e
Ty pe s?
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Your
Your Turn
Turn
Pretend that you are designing the new
interface to a career services system at your
university.
How would you incorporate the basic principles
of input design into your interface design?
38
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
INPUT DESIGN
39
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles of
of Input
Input Design
Design
The goal is to simply and easily capture
accurate information for the system
Reflect the nature of the inputs
Find ways to simplify their collection
40
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Online
Online versus
versus Batch
Batch Processing
Processing
Online processing immediately records the
transaction in the appropriate database
Batch processing collects inputs over time and
enters them into the system at one time in a
batch
Batch processing simplifies data
communications and other processes, master
files are not updated real time
41
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Capture
Capture Data
Data at
at the
the Source
Source
Reduces duplicate work.
Reduces processing time.
Decreases cost.
Decreases probability of error.
42
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Source
Source Data
Data Automation
Automation
Can be obtained by using the following
technologies:
bar code readers
optical character recognition
magnetic stripe readers
smart cards
How can internet be used for source data
automation?
43
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Minimize
Minimize Keystrokes
Keystrokes
Never ask for information that can be obtained
other ways
Lookups
Dropdown lists
Default values
44
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Inputs
Inputs
Data items linked to fields
Text
Numbers
Selection boxes
45
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Input
Input Forms
Forms
46
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Selection
Selection Boxes
Boxes
Typ e s o f Bo xe s
C he c k b o x
Ra d io b utto n
O n-sc re e n list b o x
Dro p -d o wn list b o x
C o mb o b o x
Slid e r
47
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Whe n
Wo uld Yo u
Use Eac h o f
The se
Bo x
Ty pe s?
Types
Types of
of Input
Input Validation
Validation
Typ e s o f Va lid a tio n
C o mp le te ne ss c he c k
Fo rma t c he c k
Ra ng e c he c k
C he c k d ig it c he c k
C o nsiste nc y c he c k
Da ta b a se c he c ks
48
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Whe n
Wo uld Yo u
Use Eac h o f
The se
Validatio n
Me tho ds?
OUTPUT DESIGN
49
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Basic
Basic Principles
Principles
Understand report usage
Reference or cover-to-cover?
Frequency?
Real-time or batch reports?
Manage information load
All needed information, no more
Minimize bias
50
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Bias
Bias in
in Graphs
Graphs
51
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Types
Types of
of Reports
Reports
Typ e s o f Re p o rts
De ta il re p o rts
Summa ry re p o rt
Turna ro und d o c ume nt
G ra p hs
52
Whe n
Wo uld Yo u
Use Eac h o f
The se
Re po rt
Ty pe s?
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Report
Report Media
Media
Elect ronic
Versus Paper
53
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia
Summary
Summary
The fundamental goal of navigation design is to
make the system as simple to use as possible
The goal of input mechanism is to simply and
easily capture accurate information
The goal of the output mechanism is to provide
accurate information to users that minimize
information overload and bias
54
PowerPoint Course Mat erial for SCELE Graduat e Program I nform at ion Technology
Fa cu lt y of Com put e r Scie n ce – Unive r sit y of I n don e sia