1 user interface design components chapter 12. 2 key definitions the navigation mechanism provides...
TRANSCRIPT
![Page 1: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/1.jpg)
1
User Interface Design Components
Chapter 12
![Page 2: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/2.jpg)
2
Key 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
![Page 3: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/3.jpg)
3
Key Definitions
The graphical user interface (GUI) is the most common type of interfaces most students are likely to use personally and for developing systems.
![Page 4: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/4.jpg)
4
NAVIGATION DESIGN
![Page 5: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/5.jpg)
5
Basic Principles
Assume usersHave 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.
![Page 6: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/6.jpg)
6
Basic Principles
Prevent mistakesLimit choices
Never display commands that can’t be used (or “gray them out”)
Confirm actions that are difficult or impossible to undo
Simplify recover from mistakes
Use consistent grammar order
![Page 7: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/7.jpg)
7
Types of Navigation Control
LanguagesCommand language
Natural language
MenusGenerally aim at broad shallow menu
Consider using “hot keys”
Direct ManipulationUsed with icons to start programs
Used to shape and size objects
May not be intuitive for all commands
![Page 8: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/8.jpg)
8
A Traditional Menu in a UNIX System
![Page 9: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/9.jpg)
9
Common Types of Menus
![Page 10: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/10.jpg)
10
Example of an Image Map
![Page 11: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/11.jpg)
11
Types of Menus
Types of Menus
Menu barDrop-down menuPop-up menuTab menuToolbarImage map
WhenWould YouUse Each ofThese MenuTypes?
![Page 12: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/12.jpg)
12
Message 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
![Page 13: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/13.jpg)
13
Types of Messages
Types of Messages
Error messageConfirmation messageAcknowledgment messageDelay messageHelp message
WhenWould YouUse Each ofThese MessageTypes?
![Page 14: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/14.jpg)
14
An Example of Crafting an Error Message
![Page 15: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/15.jpg)
15
INPUT DESIGN
![Page 16: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/16.jpg)
16
Basic Principles
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
![Page 17: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/17.jpg)
17
Online versus Batch 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, but means that inventory and other reports are not accurate in real time
![Page 18: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/18.jpg)
18
Capture Data at the Source
Reduces duplicate work
Reduces processing time
Decreases cost
Decreases probability of error
![Page 19: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/19.jpg)
19
Source Data 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?
![Page 20: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/20.jpg)
20
Minimize Keystrokes
Never ask for information that can be obtained in another way
List selection is more efficient than entering information
Use default values where possible
![Page 21: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/21.jpg)
21
Types of Inputs
Data items linked to fields
Text
Numbers
Selection boxes
![Page 22: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/22.jpg)
22
Types of Input Boxes
![Page 23: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/23.jpg)
23
Types of Selection Boxes
Types of Boxes
Check boxRadio buttonOn-screen list boxDrop-down list boxCombo boxSlider
WhenWould YouUse Each ofThese BoxTypes?
![Page 24: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/24.jpg)
24
Types of Input Validation
Types of Validation
Completeness checkFormat checkRange checkCheck digit checkConsistency checkDatabase checks
WhenWould YouUse Each ofThese ValidationMethods?
![Page 25: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/25.jpg)
25
Your Turn
Consider a Web form that a student would use to input student and resume information into a career services application.
Sketch out how this form would look and what data fields would be used
What validity checks would you need?
![Page 26: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/26.jpg)
26
OUTPUT DESIGN
![Page 27: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/27.jpg)
27
Basic Principles
Understand report usageReference or cover-to-cover?
Frequency?
Real-time or batch reports?
Manage information loadAll needed information, no more
Minimize bias
![Page 28: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/28.jpg)
28
Bias in Graphs
![Page 29: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/29.jpg)
29
Types of Reports
Types of Reports
Detail reportsSummary reportTurnaround documentGraphs
WhenWould YouUse Each ofThese ReportTypes?
![Page 30: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/30.jpg)
30
Report Media
Electronic
Versus Paper
![Page 31: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/31.jpg)
31
Your Turn
Under what conditions would you be most likely to replace reports on paper with ones delivered electronically? When might you NOT want to make the change?
![Page 32: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/32.jpg)
32
![Page 33: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/33.jpg)
33
![Page 34: 1 User Interface Design Components Chapter 12. 2 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The](https://reader036.vdocuments.us/reader036/viewer/2022070401/56649f205503460f94c38ef2/html5/thumbnails/34.jpg)
34
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