User Interface Design

Overview
• Chapter 6 is the first of three chapters in the systems design
phase of the SDLC.
• This chapter explains how to design an effective user interface,
and how to handle data security and control issues. The chapter
stresses the importance of user feedback and involvement in all
design decisions.

2
Chapter Objectives
• Explain the concept of user interface design and human-computer
interaction, including basic principles of user-centered design
• List user interface design guidelines
• Describe user interface components, including screen elements
and controls
• Discuss output design and technology issues

3
Chapter Objectives
• Design effective source documents
• Explain input design and technology issues
• Discuss guidelines for data entry screen design
• Use input masks and validation rules to reduce input errors
• Describe output and input controls and security

4
Phase Description
• Systems Design is the third of five phases in the systems
development life cycle
• Now you will work on a physical design that will meet the
specifications described in the system requirements document
• Tasks will include user interface design, data design, and system
architecture
• Deliverable is system design specification

5
Contents
• User interface design, human computer interaction, and interface
design rules.
• Output, data security and control issues, prototyping.

6
Introduction
• User interface design is the first task in the systems design phase
of the SDLC
• Designing the interface is extremely important, because everyone
wants a system that is easy to learn and use

7
What Is a User Interface?
• User interface (UI)
• Consists of all the hardware, software, screens, menus, functions,
outputs, and features that affect two-way communications
between the user and the computer

8
User Interface Design
• Evolution of the User Interface
• Process-control
• As information management evolved from centralized data processing to
dynamic, enterprise-wide systems, the primary focus also shifted — from
the IT department to the users themselves
• User-centered system
• Requires an understanding of human-computer interaction and user-
centered design principles

9
User Interface Design
• Human-Computer Interaction
• Human-computer interaction (HCI) describes the relationship between
computers and people who use them to perform their jobs
• Graphical user interface (GUI)
• Main objective is to create a user-friendly design that is easy to learn and
use

10
User Interface Design
• Human-Computer Interaction

11
 Seven Habits of Successful
Interface Designers
• Understand the Business
• Maximize Graphical Effectiveness
• Think Like a User
• Use Models and Prototypes
• Focus on Usability
• Invite Feedback
• Document Everything

12
Designing the User Interface
• Follow eight basic guidelines
1. Design a transparent interface
2. Create an interface that is easy to learn and use
3. Enhance user productivity
4. Make it easy for users to obtain help or correct errors
5. Minimize input data problems
6. Provide feedback to users
7. Create an attractive layout and design
8. Use familiar terms and images

13
Designing the User Interface
• Good user interface design is based on a combination of
ergonomics, aesthetics, and interface technology

14
Designing the User Interface
• Design a Transparent Interface
• Facilitate the system design objectives, rather than calling attention to the
interface
• Create a design that is easy to learn and remember
• Design the interface to improve user efficiency and productivity
• Write commands, actions, and system responses that are consistent and
predictable

15
Designing the User Interface
• Create an Interface that Is Easy to Learn and Use
• Clearly label all controls, buttons, and icons
• Select only those images that users can understand easily, and provide
on-screen instructions that are logical, concise, and clear
• Show all commands in a list of menu items
• Make it easy to navigate

16
Designing the User Interface
• Enhance User Productivity
• Organize tasks, commands, and functions in groups that resemble actual
business operations
• Create alphabetical menu lists
• Provide shortcuts so experienced users can avoid multiple menu levels
• Use default values if the majority of values in a field are the same

17
 Designing the User Interface
• Make It Easy for Users to
Obtain Help or Correct Errors
• Ensure that Help is always
available
• Provide user-selected Help and
context-sensitive Help

18
Designing the User Interface
• Minimize Input Data Problems
• Create input masks
• Display event-driven messages and reminders
• Establish a list of predefined values that users can click to select
• Build in rules that enforce data integrity

19
Designing the User Interface
• Provide Feedback to Users
• Display messages at a logical place on the screen
• Alert users to lengthy processing times or delays
• Allow messages to remain on the screen long enough for users to read
them
• Let the user know whether the task or operation was successful or not

20
Designing the User Interface
• Create an Attractive Layout and Design
• Use appropriate colors to highlight different areas of the screen
• Use special effects sparingly
• Use hyperlinks that allow users to jump to related topics
• Group related objects and information

21
Designing the User Interface
• Use Familiar Terms and Images
• Remember that users are accustomed to a pattern of red=stop,
yellow=caution, and green=go
• Provide a keystroke alternative for each menu command
• Use familiar commands if possible
• Provide a Windows look and feel in your interface design if users are
familiar with Windows-based applications

22
Designing the User Interface
• Add Control Features
• Menu bar
• Toolbar
• Command button
• Dialog box
• Text box
• Toggle button

23
Menu Pull-Down dan Bertumpuk

Menu
bar
Menu
bertumpuk

Titik-titik menandakan
kotak dialog
Menu pull-
down
dengan
Expand
Kotak Dialog
Menu Pop-up
Toolbar
Ribbon
 Designing the User Interface
• Add Control Features
• List box – scroll bar
• Drop-down list box
• Option button, or radio button
• Check box
• Calendar control
• Switchboard

29
 Kontrol GUI Untuk Desain Input

• Text Box
• Radio Button
• Check Box
• List Box
• Drop Down
List
• Combination
Box
• Spin boxes
• Buttons
Kontrol GUI Untuk Desain Input
• Drop down
calendars
• Slider edit
controls
• Masked edit
controls
• Ellipsis controls
• Alternate
numerical
spinners
• Check list boxes
• Check tree boxes
Output Design
• Before designing output, ask yourself several questions:
• What is the purpose of the output?
• Who wants the information, why is it needed, and how will it be used?
• What specific information will be included?
• Will the output be printed, viewed on-screen, or both? What type of
device will the output go to?

33
Output Design
• Before designing output, ask yourself several questions:
• When will the information be provided, and how often must it be
updated?
• Do security or confidentiality issues exist?
• Your answers will affect your output design strategies

34
Output Design
• Overview of Report Design
• Few firms have been able to eliminate printed output totally
• Turnaround documents
• Reports must be easy to read and well organized
• Database programs include a variety of report design tools
• Character-based reports

35
Output Design
• Types of Reports
• Detail reports
• Exception reports
• Summary reports

36
Exception report

37
Summary report

38
Output Design
• User Involvement in Report Design
• Printed reports are an important way of delivering information, so users
should approve all report designs in advance
• Submit each design for approval as you complete it, rather than waiting
until you finish all report designs
• Mock-up
• Report analysis form

39
 Output Design
• Report Design Principles

40
Output Design
• Output Technology
• Internet-based information delivery
• Webcast
• E-mail
• Blogs
• Instant Messaging
• Wireless Devices

41
 Output Design
• Output Technology
• Digital audio, images, and
video
• Podcasts
• Automated facsimile systems
• Faxback systems
• Computer output microfilm
(COM)
• Computer output to digital
media

42
Output Design
• Output Technology
• Specialized Forms of Output
• An incredibly diverse marketplace requires many forms of specialized output and
devices
• Portable, Web-connected devices
• Retail point-of-sale terminals
• Automatic teller machines (ATMs)
• Special-purpose printers

43
Input Design
• The quality of the output is only as good as the quality of the input
• Garbage in, garbage out (GIGO)
• Objective of input design is to ensure the quality, accuracy, and timeliness
of input data
• Good input design requires attention to human factors as well as
technology issues

44
 Input Design
• Source Documents and Forms
• Form layout
• Heading zone
• Control zone
• Instruction zone
• Body zone
• Totals zone
• Authorization zone

45
Input Design
• Data Entry Screens
• Guidelines
1. Restrict user access to screen locations where data is
entered
2. Provide a descriptive caption for every field, and show
the user where to enter the data and the required or
maximum field size
3. Display a sample format if a user must enter values in a
field in a specific format - separator
4. Require an ending keystroke for every field

46
Input Design
• Data Entry Screens
• Guidelines
5. Do not require users to type leading zeroes for numeric
fields
6. Do not require users to type trailing zeroes for numbers
that include decimals
7. Display default values so operators can press the ENTER
key to accept the suggested value
8. Use a default value when a field value will be constant
for successive records or throughout the data entry
session
9. Display a list of acceptable values for fields, and provide
meaningful error messages

47
Input Design
• Data Entry Screens
• Guidelines
10. Provide a way to leave the data entry screen at any time
without entering the current record
11. Provide users with an opportunity to confirm the
accuracy of input data before entering it
12. Provide a means for users to move among fields on the
form
13. Design the screen form layout to match the layout of the
source document
14. Allow users to add, change, delete, and view records
15. Provide a method to allow users to search for specific
information

48
Input Design
• Input Masks
• Use input masks, which are templates or patterns that restrict data entry
and prevent errors
• A mask can manipulate the input data and apply a specific format

49
Input Design
• Validation Rules
• At least eight types of data validation rules
1. Sequence check
2. Existence check
3. Data type check
4. Range check – limit check
5. Reasonableness check
6. Validity check – referential integrity
7. Combination check
8. Batch controls – hash totals

50
 Input Design
• Input Technology
• Batch input
• Batch
• Online input
• Online data entry
• Source data automation
• RFID tags or Magnetic data strips

51
Input Design
• Input Technology
• Tradeoffs
• Unless source data automation is used, manual data entry is slower and more
expensive than batch input because it is performed at the time the transaction
occurs and often done when computer demand is at its highest
• The decision to use batch or online input depends on business requirements

52
Input Design
• Input Volume Reduction
• Guidelines will help reduce input volume
1. Input necessary data only
2. Do not input data that the user can retrieve from system files or calculate
from other data
3. Do not input constant data
4. Use codes

53
Security and Control Issues
• Output Control and Security
• Output security
• The IT department is responsible for output control and security
measures
• Diskless workstation
• Port protector

54
Security and Control Issues
• Input Security and Control
• Input Control
• Every piece of information should be traceable back to the input data
• Audit trail
• Data security
• Records retention policy
• Encrypted – encryption

55
Chapter Summary
• The purpose of systems design is to create a
physical model of the system that satisfies the
design requirements that were defined during
the systems analysis phase
• The chapter began with a discussion of user
interface design and human-computer
interaction (HCI) concepts
• Various types of printed reports, including detail,
exception, and summary reports
• You also learned about other types of output
56
Chapter Summary
• Discussion of input design began with a
description of source documents and the various
zones in a document
• The discussion of data entry screen design
explained the use of input masks and validation
rules to reduce data errors
• You also learned about batch and online input
methods, input media and procedures, and input
volume
• Finally, you learned about security and control
57
Chapter Summary
• Chapter 6 complete

58
Question & Answers

59