MSIT401 System Development Methodologies

Week 7
User Interface Design
Learning Objectives (1 of 2)

•After this chapter,you will be able to:

• Explain user interfaces
• Explain the concept of human-computer
interaction, including user-friendly interface design
• Summarize the seven habits of successful interface
designers
• Summarize the 10 guidelines for user interface
design
• Design effective source documents and forms
Learning Objectives (2 of 2)

• Explain printed output report design guidelines

and principles
• Describe three types of printed output reports
• Discuss output and input technology issues
• Describe output and input security and control
issues
• Explain emerging user interface trends,including
modular design, responsive web design, and
prototypes
User Interfaces (1 of 2)

•Describes how users interact with a computer

system
• Features that affect two-way communications
between the user and the computer
• Central to usability; user satisfaction, support for
business functions, and system effectiveness
User Interfaces (2 of 2)

•Apple introduced the graphical user

interface (GUI)
• Complete with mouse and screen icons
•In a user-centered system, the distinction blurs
between input,output,and the interface itself

• Most users work with a varied mix of input, screen

output,and data queries as they perform day-to-
day job functions
Human-Computer Interaction

•Relationship between computers and people

who use them to perform their jobs
• Everything from smartphones to global networks
• Includes all communications and instructions to
enter input and obtain output in the form of
screen displays or printed reports
• Transparent user interface: does not distract the
user
Seven Habits of Successful Interface
Designers (1 of 4)
•Understand the business
• Interface designer must understand:
• Underlying business functions
• How the system supports goals
•Maximize graphical effectiveness
• Well-designed interface enables rapid learning
•Think like a user
• Designer must see system from use’s perspective
Seven Habits of Successful Interface
Designers (2 of 4)
•Use models and prototypes
• Designers can present initial screen designs to
users in the form of a storyboard
• Users test design and provide feedback
•Focus on usability
• Include main options in the opening screen
• Offer a reasonable number of choices that a
user easily can comprehend
 Seven Habits of Successful Interface
Designers (3 of 4)

FIGURE 8-4 The opening screen displays the main options for a student registration system.
A user can click an option to see lower-level actions and menu choices.
Seven Habits of Successful Interface
Designers (4 of 4)
•Invite feedback
• Monitor system usage and solicit user suggestions
• Determine if system features are being used as
intended by observing and surveying users
•Document everything
• Document all screen designs for later use by
programmers
• User-approved sketches and storyboards can be
used to document the user interface
Guidelines for User Interface Design
(1 of 21)

•Create an interface that is easy to learn and

use
• Focus on system design objectives
• Create a design that is easy to understand and
remember
• Provide commands, actions, and system responses
that are consistent and predictable
• Allow users to correct errors easily
• Clearly label all controls, buttons,and icons
Guidelines for User Interface Design
(2 of 21)

• Select familiar images that users understand

• Provide on-screen instructions that are logical, concise,
and clear
• Show all commands in a list of menu items
• Dim any commands that are not available
• Make it easy to navigate or return to any level in
the menu structure
Guidelines for User Interface Design
(3 of 21)
•Enhance user productivity
• Organize tasks, commands, and functions in groups
that resemble actual business operations
• Create alphabetical menu lists or place the
selections used frequently at the top of the menu
• Provide shortcuts for experienced users
• Use default values if the majority of values in a field
are the same
• Use a duplicate value function, but allow users to
turn this feature on or off as they prefer
Guidelines for User Interface Design
(4 of 21)

FIGURE 8-6 This menu hierarchy shows tasks, commands, and functions organized
into logical groups and sequences.The structure resembles a functional
decomposition diagram (FDD), which is a model of business functions and
processes.
Guidelines for User Interface Design
(5 of 21)

• Provide a fast-find feature

• If available,consider a natural language feature that
allows users to type commands or requests in
normal text phrases
Guidelines for User Interface Design
(6 of 21)
•Provide flexibility
• Offer several alternatives
•Provide users with help and feedback
• Ensure help is always available on demand
• Provide user-selected help and context-
sensitive help
• Provide a direct route for users to return
to the point from where help was requested
• Include contact information
Guidelines for User Interface Design
(7 of 21)

• Require user confirmation before data deletion

• Provide an “Undo” key
• When a user-entered command contains an error,
highlight the erroneous part
• Use hypertext links to assist users
• Display messages at a logical place
• Alert users to lengthy processing
Guidelines for User Interface Design
(8 of 21)

FIGURE 8-7 The main Help screen for a student registration system.
Guidelines for User Interface Design
(9 of 21)

• 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
• Provide a text explanation for an icon or image on
a control button
• Use messages that are specific, understandable, and
professional
Guidelines for User Interface Design
(10 of 21)
•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 navigate to
related topics
• Group related objects and information
• Keep screen displays uncluttered
• Display titles, messages, and instructions in a
consistent manner
Guidelines for User Interface Design
(11 of 21)

• Use consistent terminology

• Ensure commands and similar mouse actions will
have the same effect
• Require the user to confirm the entry by pressing
Enter or Tab
• Remember that users are accustomed to a pattern
of red = stop,yellow = caution,and green = go
Guidelines for User Interface Design
(12 of 21)

• Provide a keystroke alternative for each menu

command
• Use familiar commands if possible
• Provide aWindows look and feel interface
• Avoid complex terms and technical jargon
Guidelines for User Interface Design
(13 of 21)
•Enhance the interface
• Opening screen is important as it introduces the
application
• Use a command button to initiate an action
• Create customized menu bars and toolbars
• Add a shortcut feature that lets a user select a
menu command
• If variable input data is needed,provide a dialog
box that explains what is required
Guidelines for User Interface Design
(14 of 21)

• A toggle button makes it easy to show on or off

status
• Use list boxes that display available choices
• Use an option button,or a radio button,to control
user choices
• If check boxes are used to select one or more
choices from a group, show the choices with a
checkmark or an X
• When dates must be entered, use a calendar
control
Guidelines for User Interface Design
(15 of 21)
•Focus on data entry screens
• Use the form filling method whenever possible
• Restrict user access to screen locations where
data is entered
• Provide a way to leave the data entry screen at any
time without entering the current record
• Provide a descriptive caption for every field
• Provide a means for users to move among fields
on the form in a standard order or in any order
they choose
Guidelines for User Interface Design
(16 of 21)

• Allow users to add,change,delete,and view

records
• Design the screen form layout to match the layout
of the source document
• Display a sample format use an input mask
• Require an ending stroke for every field
• Do not require users to type leading zeros for
numeric fields or trailing zeros
Guidelines for User Interface Design
(17 of 21)

• Display default values

• Display a list of acceptable values for fields, and
provide meaningful error messages if the user
enters an unacceptable value
• Provide users with an opportunity to confirm the
accuracy of input data before displaying it
Guidelines for User Interface Design
(18 of 21)
•Use validation rules
• Sequence check:used when the data must be in
some predetermined sequence
• Existence check:applies to mandatory data items
• Data type check:tests to ensure that a data item
fits the required data type
• Range check: used to verify data items fall between
a specified minimum and maximum value
Guidelines for User Interface Design
(19 of 21)

• Reasonableness check:identifies values that are

questionable,but not necessarily wrong
• Validity check: used for data items that must have
certain values
• Combination check:performed on two or more
fields to ensure that they are consistent or
reasonable when considered together
• Batch controls: totals used to verify batch input
Guidelines for User Interface Design
(20 of 21)
•Manage data effectively
• Data management impacts company efficiency,
productivity,and security
• Enter and verify data as soon as possible
• Each data item should have a specific type
• Collect input data as close to its source as possible
• In an efficient design, data is entered only once
Guidelines for User Interface Design
(21 of 21)
•Reduce input volume
• Input necessary data only
• Do not input data that the user can retrieve from
system files or calculate from other data
• Do not input constant data
• Use codes as they are shorter than the data they
represent
Source Document and Form Design
(1 of 2)

•Garbage in,garbage out (GIGO)

• Quality of the output depends on the quality of
the input
•Source document
• Collects input data, triggers an input action,and
provides a record of original transaction
•Good form layout
• makes the form easy to complete and provides
enough space
Source Document and Form Design
(2 of 2)
•Order and placement should be logical

FIG U RE 8-13 Source

document zones.
Printed Output (1 of 5)

•Questions to be considered before designing

printed output
• Why is this being delivered as printed output?
• Who wants the information, why is it needed, and
how will it be used?
• What specific information will be included?
• Will printed output be for a specific device?
• When and how will the information be delivered,
and how often must it be updated?
• Do security or confidentiality issues exist?
Printed Output (2 of 5)

•Report design
• Organizations strive to reduce flow of paper and
printed reports
• Users find it handy to view screen output, then print the
information they need
• Printed output is used in turnaround documents
• Reports must be easy to read and well organized
• Database programs include a variety of report design
tools to create reports quickly and easily
Printed Output (3 of 5)

•Report design principles

• Report headers and footers
• Page headers and footers
• Repeating fields
• Consistent design
 Printed Output (4 of 5)

FIGURE 8-14 The Employee Hours report is a detailed report with control breaks,
subtotals, and grand totals. Note that a report header identifies the report, a page header
contains column headings, a group footer contains subtotals for each store, a report footer
contains grand totals,and a page footer identifies the page number.
Printed Output (5 of 5)

•Types of reports
• Detail reports: produce one or more lines of
output for each record processed
• Can be quite lengthy
• Exception reports: display only those records that
meet specific conditions
• Useful when the user wants specific information
• Summary reports:reports that provide
comprehensive data
Technology Issues (1 of 6)

•Output technology
• In addition to screen output and printed matter,
output can be delivered in many ways
• Actual forms,reports,and documents have to be created
to be accessible from workstations, notebooks, tablets,
smartphones, and other devices
• Internet-based information delivery
• Allows users to download auniverse of files and
documents to support their information needs
• Companies use a live or prerecorded webcast to reach
prospective customers and investors
Technology Issues (2 of 6)

• Email: essential means of internal and external

business communication
• Blogs: web-based blogs are useful for posting news,
reviewing current events, and promoting products
• Instant messaging: useful for team members in a
collaborative situation
• Wireless devices: data can be transmitted using the
Internet across a wide array of devices
Technology Issues (3 of 6)

• Digital audio, images and video

• Can be captured and stored in digital format, attached to
an email message, or inserted as a clip in a Microsoft
Word document
• Automated fax or faxback systems
• Allow a customer to request a fax using e-mail, via the
company website,or by telephone
• Podcasts
• Used as sales and marketing tools, and to communicate
with the employees
Technology Issues (4 of 6)

• Computer output to digital media

• Used when many paper documents must be scanned and
stored in digital format for quick retrieval
• Specialized forms of output
• Portable,web-connected devices
• Retail point-of-sale terminals
• Automatic teller machines (ATMs)
• Special-purpose printers
• Plotters
• Electronic detection of embedded data
Technology Issues (5 of 6)

•Input technology
• Batch input: data entry performed on a specified
time schedule,such as daily,weekly,monthly,or
longer
• Online input: online data entry enables immediate
validation and availability of data
• Source data automation combines online data entry and
automated data capture using input devices such as RFID
tags,magnetic data strips, or smartphones
Technology Issues (6 of 6)

• Trade-offs
• Manual data entry is slower and more expensive than
batch input
• Decision to use batch or online input depends on
business requirements
Security and Control Issues (1 of 2)

•Output security and control

• Companies use output control methods to
maintain output integrity and security
• Output security protects privacy rights
• Shields organization’s proprietary data from theft or
unauthorized access
• Diskless workstation: network terminal that
supports a full-featured user interface but limits
the printing or copying of data
Security and Control Issues (2 of 2)

•Input security and control

• Ensures data is correct,complete,and secure
• Information should be traceable
• Procedures must be put in place for handling source
documents
• Data security policies and procedures protect data
from loss or damage
• Companies should have a records retention policy that
meets legal requirements and business needs
• Audit trail files and reports should be stored and saved
Emerging Trends (1 of 4)

•Modular design
• Individual components, called modules, connect to
a higher-level program or process
• Designed to perform a single function
•Responsive web design
• Focus on how GUI artifacts are presented on the
device is handled automatically by the underling
framework
•Prototyping
• Involves a repetitive sequence of analysis, design,
modeling,and testing
Emerging Trends (2 of 4)

•System prototyping
• Produces a full-featured, working model of the
information system
•Design or throwaway prototyping
• Used to verify user requirements,is discarded,and
implementation continues
Emerging Trends (3 of 4)

•Trade-offs:benefits
• Users and systems developers can avoid
misunderstandings
• System developers create accurate specifications
based on prototype
• Managers evaluate working models more
effectively than paper specifications
• Helps develop testing and training procedures
• Reduces risks that occur when a finished system
fails to support business needs
Emerging Trends (4 of 4)

•Potential problems
• Rapid pace of development can create quality
problems
• System requirements cannot be tested adequately
using a prototype
• In complex systems, the prototype can become
unwieldy and difficult to manage
• Clients may want to adopt the prototype with few
to no changes, leading to increased maintenance
costs later in the SDLC
Summary (1 of 2)

•When designing the user interface it should

be transparent
• Create an interface that is easy to learn and use;
enhance user productivity
• Make it easy to obtain help or correct errors
• Minimize input data problems
• Provide feedback
• Create an attractive layout and design
• Use familiar terms and image
Summary (2 of 2)

•Types of printed reports: detail, exception, and

summary reports
•Input methods: data capture and data entry
•Security and control plays an important role in
designing
•Emerging trends of modular design: responsive
web design, and prototyping