paper
Chapter 8
User Interface Design
IST 603 - Chapter 8
1
Learning Objectives
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
IST 603 - Chapter 8
2
Learning Objectives
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
IST 603 - Chapter 8
3
User Interfaces
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
Most users work with a varied mix of input, screen output, and data queries as they perform day-to-day job functions
IST 603 - Chapter 8
4
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
IST 603 - Chapter 8
5
Seven Habits of Successful Interface Designers
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
IST 603 - Chapter 8
6
Seven Habits of Successful Interface Designers
IST 603 - Chapter 8
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.
7
Seven Habits of Successful Interface Designers
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
IST 603 - Chapter 8
8
Guidelines for User Interface Design
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
IST 603 - Chapter 8
9
Guidelines for User Interface Design
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
IST 603 - Chapter 8
10
Guidelines for User Interface Design
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
IST 603 - Chapter 8
11
Guidelines for User Interface Design
IST 603 - Chapter 8
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.
12
Guidelines for User Interface Design
Provide a fast-find feature
If available, consider a natural language feature that allows users to type commands or requests in normal text phrases
IST 603 - Chapter 8
13
Guidelines for User Interface Design
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
IST 603 - Chapter 8
14
Guidelines for User Interface Design
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
IST 603 - Chapter 8
15
Guidelines for User Interface Design
IST 603 - Chapter 8
The main Help screen for a student registration system.
16
Guidelines for User Interface Design
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
IST 603 - Chapter 8
17
Guidelines for User Interface Design
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
IST 603 - Chapter 8
18
Guidelines for User Interface Design
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
IST 603 - Chapter 8
19
Guidelines for User Interface Design
Provide a keystroke alternative for each menu command
Use familiar commands if possible
Provide a Windows look and feel interface
Avoid complex terms and technical jargon
IST 603 - Chapter 8
20
Guidelines for User Interface Design
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
IST 603 - Chapter 8
21
Guidelines for User Interface Design
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
IST 603 - Chapter 8
22
Guidelines for User Interface Design
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
IST 603 - Chapter 8
23
Guidelines for User Interface Design
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
IST 603 - Chapter 8
24
Guidelines for User Interface Design
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
IST 603 - Chapter 8
25
Guidelines for User Interface Design
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
IST 603 - Chapter 8
26
Guidelines for User Interface Design
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
IST 603 - Chapter 8
27
Guidelines for User Interface Design
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
IST 603 - Chapter 8
28
Guidelines for User Interface Design
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
IST 603 - Chapter 8
29
Source Document and Form Design
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
IST 603 - Chapter 8
30
Source Document and Form Design
Order and placement should be logical
Source document zones.
IST 603 - Chapter 8
31
Printed Output
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?
IST 603 - Chapter 8
32
Printed Output
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
IST 603 - Chapter 8
33
Printed Output
Report design principles
Report headers and footers
Page headers and footers
Repeating fields
Consistent design
IST 603 - Chapter 8
34
Printed Output
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.
IST 603 - Chapter 8
35
Printed Output
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
IST 603 - Chapter 8
36
Technology Issues
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 a universe of files and documents to support their information needs
Companies use a live or prerecorded webcast to reach prospective customers and investors
IST 603 - Chapter 8
37
Technology Issues
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
IST 603 - Chapter 8
38
Technology Issues
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
IST 603 - Chapter 8
39
Technology Issues
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
IST 603 - Chapter 8
40
Technology Issues
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
IST 603 - Chapter 8
41
Technology Issues
Trade-offs
Manual data entry is slower and more expensive than batch input
Decision to use batch or online input depends on business requirements
IST 603 - Chapter 8
42
Security and Control Issues
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
IST 603 - Chapter 8
43
Security and Control Issues
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
IST 603 - Chapter 8
44
Emerging Trends
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
IST 603 - Chapter 8
45
Emerging Trends
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
IST 603 - Chapter 8
46
Emerging Trends
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
IST 603 - Chapter 8
47
Emerging Trends
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
IST 603 - Chapter 8
48
Summary
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
IST 603 - Chapter 8
49
Summary
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
IST 603 - Chapter 8
50