userinterfacedesign-130628195757-phpapp01

8/11/2019 userinterfacedesign-130628195757-phpapp01

1/48


2/48

OBJECTIVESWhen you f inish this chapter, you w i l l be able to:

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 screenelements and controls

Discuss output design and technology issues

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 inputerrors

Describe output and input controls and security


3/48

What is a User Interface?

A user interface (UI) describes how users

interact with a computer system, and

consists of all the hardware, software,

screens, menus, functions, output, andfeatures that affect two-way communications

between the user and the computer.


4/48

Evolution of the User Interface


5/48

User Rights1.Perspective: The user always is right. If there is a problem with the use of the

system, the system is the problem, not the user.

2. Installation: The user has the right to install and uninstall software andhardware systems easily without negative consequences.

3. Compliance: The user has the right to a system that performs exactly aspromised.

4. Instruction: The user has the right to easy-to-use instructions (user guides,online or contextual help, and error messages) for understanding andutilizing a system to achieve desired goals and recover efficiently andgracefully from problem situations.

5. Control: The user has the right to be in control of the system and to be able toget the system to respond to a request for attention.

6. Feedback: The user has the right to a system that provides clear,understandable, and accurate information regarding the task it is performingand the progress toward completion.

7. Dependencies: The user has the right to be informed clearly about all systemsrequirements for successfully using software or hardware.

8. Scope: The user has the right to know the limits of the systems capabilities.9.Assistance: The user has the right to communicate with the technology

provider and receive a thoughtful and helpful response when raisingconcerns.

10. Usability: The user should be the master of software and hardwaretechnology, not vice versa. Products should be natural and intuitive to use.


6/48


7/48

Principles of User-Centered Design

1. Understand the Business

2. Maximize Graphical Effectiveness

3. Think Like a User

4. Use Models and Prototypes

5. Focus on Usability

6. Invite Feedback

7. Document Everything


8/48

Designing the User Interface

1. Design a transparent interface.

a. Facilitate the system design objectives, rather thancalling attention to the interface.

b. Create a design that is easy to learn and remember.

c. Design the interface to improve user efficiency andproductivity.

d. Write commands, actions, and system responsesthat are consistent and predictable.

e. Minimize data entry problems.

f. Allow users to correct errors easily.

g. Create a logical and attractive layout.


9/48

2. Create an interface that is easy to learn

and use.

a. Clearly label all controls, buttons, and icons.

b. Select only those images that users can

understand easily, and provide on-screen

instructions that are logical, concise, andclear.

c. Show all commands in a list of menu items,

but dim any commands that are not currently

available.d. Make it easy to navigate or return to any level

in the menu structure.


10/48

3. Enhance user productivity.

a. Organize tasks, commands, and functions in groups thatresemble actual business operations.

b. Create alphabetical menu lists or place the selectionsused frequently at the top of the menu list.

c. Provide shortcuts so experienced users can avoidmultiple menu levels.

d. Use default values if the majority of values in a field arethe same.

e. Use a duplicate value function that enables users toinsert the value from the same field in the previousrecord.

f. Provide a fast-find feature that displays a list of possiblevalues as soon as users enter the first few letters.

g. Use a natural language feature that allows users totype commands or requests in normal Englishphrases.


11/48

4. Make it easy for users to obtain help or

correct errors.

a. Ensure that help is always available.

b. Provide user-selected help and context-sensitive help.

c. Provide a direct route for users to return to the point fromwhere help was requested.

d. Include contact information.

e. Require user confirmation before data deletion and provide amethod of recovering data that is deleted inadvertently.

f. Provide an Undo key or a menu choice that allows the user toeradicate the results of the most recent command or action.

g. When a user-entered command contains an error, highlight theerroneous part and allow the user to make the correctionwithout retyping the entire command.

h. Use hypertext links to assist users as they navigate throughhelp topics.


12/48

5. Minimize Input Data

a. Create input masks, which are

templates or patterns that make it

easier for users to enter data.

b. Display event-driven messages andreminders.

c. Establish a list of predefined values that

users can click to select.d. Build in rules that enforce data integrity.


13/48

6. Provide Feedback to Users

a. Display messages at a logical place on thescreen, and be consistent.

b. Alert users to lengthy processing times ordelays.

c. Allow messages to remain on the screen longenough for users to read them.

d. Let the user know whether the task oroperation was successful or not.

e. Provide a text explanation if you use an iconor image on a control button.

f. Use messages that are specific,understandable, and professional.


14/48

7. Create an Attractive Layout and

Design

a. Use appropriate colors to highlight different areas of thescreen; avoid gaudy and bright colors.

b. Use special effects sparingly.

c. Use hyperlinks that allow users to jump to related topics.

d. Group related objects and information.

e. Screen density is important.f. Display titles, messages, and instructions in a consistent

manner and in the same general locations on all screens.

g. Use consistent terminology.

h. Ensure that commands always will have the same effect.

i. Ensure that similar mouse actions will produce the same

results throughout the application.j. When the user enters data that completely fills the field, do not

move automatically to the next field.


15/48

8. Use Familiar Terms and Images

a. Remember that users are accustomed to a pattern of red= stop, yellow = caution, and green = go. Stick to that

pattern and use it when appropriate to reinforceonscreen instructions.

b. Provide a keystroke alternative for each menu

command, with easy-to-remember letters, such as File,Exit, and Help.

c. Use familiar commands if possible, such as Cut, Copy,and Paste.

d. Provide a Windows look and feel in your interface designif users are familiar with Windows-based applications.

e. Avoid complex terms and technical jargon; instead,select terms that come from everyday businessprocesses and the vocabulary of a typical user.


16/48

Good user interface design is based on a

combination of ergonomics, aesthetics, and

interface technology.

ERGONOMICSdescribes how people work,

learn, and interact with computers;AESTHETICSfocuses on how an interface can

be made attractive and easy to use; and

INTERFACE TECHNOLOGY provides the

operational structure required to carry out the

design objectives.


17/48

Add Control Features

The designer can include many

features, such as menu bars, toolbars,

dialog boxes, text boxes, toggle buttons,

list boxes, scroll bars, drop-down list

boxes, option buttons, check boxes,

command buttons, and calendar

controls, among others.


18/48

The menu barat the top of the screen displays themain menu options.

A command buttoninitiates an action such as

printing a form or requesting help.A dialog boxallows a user to enter information

about a task that the system will perform.

A text boxcan display messages or provide a

place for a user to enter data.A toggle buttonis used to represent on or off

status clicking the toggle button switches to theother status.

A list boxdisplays a list of choices that the usercan select. If the list does not fit in the box, a scrollbarallows the user to move through the availablechoices.


19/48

A drop-down list boxdisplays the currentselection; when the user clicks the arrow, alist of the available choices displays.

An option button, or radio button, representsone choice in a set of options. The user canselect only one option at a time, and selectedoptions show a black dot.

A check boxis used to select one or morechoices from a group. Selected options arerepresented by a checkmark or an X.

A calendar controlallows the user to select adate that the system will use as a field value.


20/48


21/48

Screen design requires a sense of aesthetics

as well as technical skills. You should design screens

that are attractive, easy to use, and workable. You

also should obtain user feedback early and often asthe design process continues.

The opening screen is especially important

because it introduces the application and allowsusers to view the main options. When designing an

opening screen, you can use a main form that

functions as a switchboard.

A switchboard uses command buttons

that enable users to navigate the system and select

from groups of related tasks.


22/48


23/48

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 howwill 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? When will the information be provided, and how often

must it be updated?

Do security or confidentiality issues exist?


24/48

Types of Reports

DETAIL REPORTS.A detail report produces one ormore lines of output for each record processed. Each

line of output printed is called a detail line.


25/48

EXCEPTION REPORTS.An exception reportdisplays only those records that meet a specific

condition or conditions.


26/48


27/48

Designing a Report

1. You should prepare a sample report, called a mock-up,

or prototype, for users to review. The sample should

include typical field values and contain enough records to

show all the design features. Depending on the type of

printed output, you can create a Word document or use areport generator to create mock-up reports.

2. After a report design is approved, you should document

the design by creating a report analysis form, which

contains information about the layout, fields,

frequency, distribution, data security considerations, and

other issues.


28/48

Design Features

1. REPORT HEADERS AND FOOTERS

2. PAGE HEADERS AND FOOTERS

3. COLUMN HEADING ALIGNMENT

4. COLUMN SPACING

5. FIELD ORDER

6. GROUPING DETAIL LINES

7. REPEATING FIELDS

8. CONSISTENT DESIGN


29/48


30/48

Output Technology

1. InternetBased Information Delivery2. E-mail

3. Blogs

4. Instant Messaging

5. Wireless Devices

6. Digital Audio, Images, and Video

7. Podcasts

8. Automated Facsimile Systems9. Computer Output to Microfilm (COM)

10. Computer Output to Digital Media


31/48

11. Specialized Forms of Output

An incredibly diverse marketplace requires many forms ofspecialized output and devices such as these:

Portable, Web-connected devices that can run applications,handle multimedia output, and provide powerful, multipurposecommunication for users

Retail point-of-sale terminals that handle computer-based creditcard transactions, print receipts, and update inventory records

Automatic teller machines (ATMs) that can process banktransactions and print deposit and withdrawal slips

Special-purpose printers that can produce labels, employee IDcards, drivers licenses, gasoline pump receipts, and, in somestates, lottery tickets

Plotters that can produce high-quality images such as blueprints,maps, and electronic circuit diagrams

Electronic detection of data embedded in credit cards, bankcards, and employee identification cards


32/48

Input Design

The objective of input design is to ensure thequality, accuracy, and timeliness of input data.

The term garbage in, garbage out (GIGO), isfamiliar to IT professionals, who know that thebest time to avoid problems is when the data isentered.

Good input design requires attention to humanfactors as well as technology issues.


33/48

Source Documents and Forms

A source document collects input data, triggers orauthorizes an input action, and provides a record of theoriginal transaction.

Source documents generally are paper-based, but also

can be provided online. Either way, the designconsiderations are the same.

Good form layout makes the form easy to complete andprovides enough space, both vertically and horizontally, for

users to enter the data.

A form should indicate data entry positions clearly usingblank lines or boxes and descriptive captions.


34/48

Source Document Zones The heading zoneusually contains the company name or

logo and the title and number of the form. The contro l zone contains codes, identification

information, numbers, and dates that are used for storingcompleted forms.

The instruc t ion zone contains instructions for completing

the form. The main part of the form, called the body zone, usually

takes up at least half of the space on the form and containscaptions and areas for entering variable data.

If totals are included on the form, they appear in the totals

zone. Finally, the authorizat ion zone contains any required

signatures.


35/48

Data Entry Screens Data capture uses an automated or manually operated

device to identify source data and convert it intocomputer-readable form.

Examples of data capture devices include credit cardscanners and bar code readers.

Data entry is the process of manually entering data intothe information system, usually in the form of keystrokes,mouse clicks, touch screens, or spoken words.

The most effective method of online data entry is formfilling, in which a blank form that duplicates orresembles the source document is completed on thescreen. The user enters the data and then moves to thenext field.


36/48

The following guidelines will help you design

data entry screens that are easy to learn and use.

1. Restrict user access to screen locations wheredata is entered.

2. Provide a descriptive caption for every field, andshow the user where to enter the data and therequired or maximum field size.

3. Display a sample format if a user must entervalues in a field in a specific format.

4. Require an ending keystroke for every field.5. Do not require users to type leading zeroes for

numeric fields.


37/48

6. Do not require users to type trailing zeroes for

numbers that include decimals.

7. Display default values so operators can pressthe 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 if the

user enters an unacceptable value.10. Provide a way to leave the data entry screen at

any time without entering the current record.


38/48

11. Provide users with an opportunity to confirmthe accuracy of input data before entering it by

displaying a message such as,Add thisrecord? (Y/N).

12. Provide a means for users to move amongfields on the form in a standard order or in anyorder they choose.

13. Design the screen form layout to match thelayout of the source document.

14.Allow users to add, change, delete, and viewrecords.

15. Provide a method to allow users to search forspecific information, as shown in Figure 8-33.


39/48

Input Masks

Use input masks, which are templates

or patterns that restrict data entry

and prevent errors.

A DATA VALIDATION RULE improves input quality by testing


40/48

A DATA VALIDATION RULE improves input quality by testing

the data and rejecting any entry that fails to meet specified conditions.

You can design at least eight types of data validation rules. For

example:

1. A sequence check is used when the data must be in somepredetermined sequence.

2. An existence checkis used for mandatory data items.

3. A data type check tests to ensure that a data item fits therequired data type.

4.A range checktests data items to verify that they fall betweena specified minimum and maximum value. When the validationcheck involves a minimum or a maximum value, but not both, itis called a l imi t check.

5. A reasonableness check identifies values that arequestionable, but not necessarily wrong.

6. A val id i ty checkis used for data items that must have certainvalues.

7. A combination check is performed on two or more fields toensure that they are consistent or reasonable whenconsidered together.

8. Batch cont ro lsare totals used to verify batch input.


41/48

Input Technology


42/48

Batch Input

Using batch input, data entry usually isperformed on a specified time schedule, suchas daily, weekly, monthly, or longer.

For example, batch input occurs when a payrolldepartment collects time cards at the end of theweek and enters the data as a batch.

Another example is a school that enters allgrades for the academic term in a batch.


43/48

Online Input

Although batch input is used in specificsituations, most business activity requires onlinedata entry.

A popular online input method is source dataautomation, which combines online dataentry and automated data capture using inputdevices such as RFID tags or magnetic datastrips.

Source data automation is fast and accurate,and minimizes human involvement in thetranslation process.


44/48

Many large companies use a combination of source data

automation and a powerful communication network to manage global

operations instantly. Some common examples of source data

automation are:

Businesses that use point-of-sale (POS) terminalsequipped with bar code scanners and magnetic swipescanners to input credit card data.

Automatic teller machines (ATMs) that read data strips onbank cards.

Factory employees who use magnetic ID cards to clock onand off specific jobs so the company can track productioncosts accurately.

Hospitals that imprint bar codes on patient identificationbracelets and use portable scanners when gathering data

on patient treatment and medication. Retail stores that use portable bar code scanners to log

new shipments and update inventory data.

Libraries that use handheld scanners to read optical stripson books.


45/48

Tradeoffs

Although online input offers many advantages, it doeshave some disadvantages.

For example, unless source data automation is used,manual data entry is slower and more expensive thanbatch input because it is performed at the time the

transaction occurs and often done when computerdemand is at its highest.

The decision to use batch or online input depends onbusiness requirements. For example, hotelreservations must be entered and processedimmediately, but hotels can enter their monthlyperformance figures in a batch.

In fact, some input occurs naturally in batches. A cableTV provider, for example, receives customer paymentsin batches when the mail arrives.


46/48

Input Volume Reduction

The following guidelines will help reduceinput 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.


47/48

Output Security and Control

Output must be accurate, complete, current, and secure.

Companies use various output control methods tomaintain output integrity and security.

Output security protects privacy rights and shieldsthe organizations proprietary data from theft orunauthorized access.

A diskless workstation is a network terminal that

supports a full-featured user interface, but limits theprinting or copying of data, except to certain networkresources that can be monitored and controlled.


48/48

Input Security and Control Input control includes the necessary measures to

ensure that input data is correct, complete, and secure.

Every piece of information should be traceable back to theinput data that produced it. That means that you mustprovide an audit trail that records the source of eachdata item and when it entered the system.

Data security policies and procedures protect data fromloss or damage, which is a vital goal in every organization.

Sensitive data can be encrypted, or coded, in a processcalled encryption, so only users with decoding softwarecan read it.