Chapter 12 Designing the Inputs and User Interface.

Chapter 12

Designing the Inputs and User Interface

SAD/CHAPTER 12 2

Learning Objectives To become familiar with the various

common methods by which end users interact with IS

To review the common computer input devices and to explore the newer, more sophisticated input technologies

To understand the three basic metaphors for designing human–computer interaction mechanisms

SAD/CHAPTER 12 3

Learning Objectives To understand and be able to

apply the basic design guidelines for high quality and usable data entry screens

To understand the two categories of input controls, as well as their strengths and limitations

SAD/CHAPTER 12 4

User Interface Methods Command Dialogue Menus Icons and Buttons Input Screens and Forms Natural Language Recognition

SAD/CHAPTER 12 5

Command Dialogue End users initiate all dialogue by

issuing instructions to the computer via a structured syntax of command

Requires a significant learning curve on the part of the end user

SAD/CHAPTER 12 6

Menus Present the end user with a list of

available alternatives Types of menus

Single menu approach Hierarchical menu approach Menu bar approach Pop-up menu

SAD/CHAPTER 12 7

Icons and Buttons End user selects and executes

commands by pointing and clicking at graphical buttons or icons

Easy recognition by end users

SAD/CHAPTER 12 8

Figure 12-2. Iconic Menu Toolbar

SAD/CHAPTER 12 9

Input Screens and Forms Use a screen-based form to get

input from users The navigation method should

allow the user to move from field to field in a logical, intuitive sequence

SAD/CHAPTER 12 10

Figure 12-3. Examples of Logical and Counterintuitive Navigation Sequences

Proper navigation Poor navigation

SAD/CHAPTER 12 11

Voice Recognition Uses voice synthesis technology Allows the user to interface with

the computer device by using natural language and voice commands

Error rate is decreasing in recent years

SAD/CHAPTER 12 12

Voice Recognition Future development

Computer scientists looking for pauses in our voice

Speaker independence Understanding of gesture

SAD/CHAPTER 12 13

Voice Recognition Natural Computing

Adapt to natural human interaction skills

To interpret vocal command To track movement and gestures

SAD/CHAPTER 12 14

Common Input Device Punch Card Biometric Input Devices

Automatic identification of a person based on his or her physiological or behavioral characteristics

Pattern recognition system

SAD/CHAPTER 12 15

Figure 12-4. Examples of Biometric Input Devices

SAD/CHAPTER 12 16

Common Input Device Optical Input Devices

Barcode Provide a simple and easy method of

encoding text and numerical information to be read by inexpensive devices

A series of parallel, adjacent bars and spaces

SAD/CHAPTER 12 17

Figure 12-5. Barcode Scanner and Barcode Structure

SAD/CHAPTER 12 18

Common Input Device Optical Input Devices

OMR Optical Mark Reading Uses an array of light-emitting diodes

(LEDs) to scan for marks in certain position

Used for questionnaires, tests, voter registration, market research

SAD/CHAPTER 12 19

Figure 12-6. Optical Mark Reader Scan Sheet and Auto-Scanner

Skunk Marks

Data Scanning

SAD/CHAPTER 12 20

Common Input Device Optical Input Devices

OCR Optical Character Recognition Scan virtually any form or document

containing numbers, letters, or marks

SAD/CHAPTER 12 21

Figure 12-7. Smart Card Technology

SAD/CHAPTER 12 22

Common Input Device Smart Card

A plastic card embedded with an integrated circuit chip

Used for payment processing, identification, network computing, health care management

SAD/CHAPTER 12 23

Guidelines for Input and Interface Design

HCI Metaphors Desktop or direct manipulation Document Dialogue

SAD/CHAPTER 12 24

The Desktop Metaphor Build on the common set of

activities and organizational schemes associated with a common desktop

Create an electronic desktop that provides all of the flexibility and advantages of a physical desktop

SAD/CHAPTER 12 25

Figure 12-8. Example of Electronic Desktop Metaphor

SAD/CHAPTER 12 26

The Document Metaphor The end user interacts with the

computer by browsing through, or entering data in electronic documents and forms

SAD/CHAPTER 12 27

The Document Metaphor Hypermedia

Links graphics, video, and audio together in a manner that allows the users to easily navigate between the documents

Hyperlinks bear a strong resemblance to reference in paper documents

Filling in forms on web pages is reminiscent of filling in paper forms

SAD/CHAPTER 12 28

The Document Metaphor Disadvantages of desktops

Do not provide mobility Are not spatial Vary in software

Reading machines Encapsulate the physical aspects we

are accustomed to when reading from a hard copy

SAD/CHAPTER 12 29

The Dialogue Metaphor Attempt to create an electronic

version of a conversation using natural language

Electronic Personal Assistant

SAD/CHAPTER 12 30

Data Entry Issue Consistency

The methods and functions available on one data entry screen should be consistently applied to all entry screens

SAD/CHAPTER 12 31

Data Entry Issue Standardized Interface

Learning curve for an end user is significantly reduced

The probability of data entry error across screens is reduced

SAD/CHAPTER 12 32

Capability Category Examples Cursor Control

Moving the cursor forward or backward

to allowable data fields. Directly moving the cursor to the first or

last field on the screen. Move the cursor forward or backward by

one character within a data field.

Editing

Delete the previous character. Delete the current character. Delete the entire field entry. Clear the entire form of data.

Exiting

Commit the data on the screen to the

database or application program. Navigate to a new screen or form. Confirm recent data entry before moving

to another screen or form.

End User Help

Obtain help with a particular data field

definition or entry. Obtain help on the purpose and

limitation associated with a particular data entry screen.

Table 12-1. Common Data Entry Screen Functions

SAD/CHAPTER 12 33

Data Entry Activity

Guideline for Effective Design

Data Entry

Avoid requiring entry of data that can be computed, derived, or retrieved from an existing on-line source.

Field Defaults

Provide relevant field value defaults where appropriate. (i.e. assume current date for invoice date field)

Required Units

Clearly indicate the desired unit values for data entry fields. (i.e. pounds, inches, dollars, tons, etc.)

Data Replacement

Provide “intelligent character replacement functions by suggesting a completed entry after the user has typed the first few characters.

Field Captions

Provide information field captions such that the end user can determine the appropriate data to enter.

Field Formatting

Provide explicit formatting examples where relevant to indicate the proper method for entering data with required embedded symbols or a specific sequence. (i.e. social security number, 999-99-9999 or date, mm/dd/yyyy)

Data Alignment

Provide automatic alignment for data entries using left justification for text and right-justification or decimal justification for numbers.

End User Help

Wherever possible, provide context-sensitive help mechanisms and hot-key access to help facilities.

Table 12-2. Guidelines for Effective Input Screen Design

SAD/CHAPTER 12 34

Data Entry Screen Characteristics

Determine default value when appropriate

Include context-sensitive help Pop-up help, hotspots, tool tips, etc.

SAD/CHAPTER 12 35

Figure 12-10. Examples of Context-Sensitive Help Mechanisms

Tooltip

Hotspot Popup

SAD/CHAPTER 12 36

Providing User Feedback System Status Feedback

Users needs to be reassured that the intended process is successfully executing

Users need some indication of the estimated length of time for the process to execute or complete

System status indicator

SAD/CHAPTER 12 37

Figure 12-11. End User Feedback Using Both Text and Graphics

SAD/CHAPTER 12 38

Providing User Feedback User prompts

The designer needs to communicate information to the user in the form of a statement or a selection that is related to either a process in progress or a possible error condition in effect

SAD/CHAPTER 12 39

Figure 12-12. Dialog Box Examples

SAD/CHAPTER 12 40

Dialogue Design Usability Assessment

Used to determine the effectiveness and efficiency of the various interface structures and components of the application

Surveys, questionnaires, focus groups, field observation

SAD/CHAPTER 12 41

Dialogue Guideline

Explanation

Be consistent

All dialogues should be consistent in action, sequence, required keystrokes, and terminology.

Enable user shortcuts

End users should be allowed to take advantage of shortcut keys or macro commands wherever possible and appropriate.

Provide relevant feedback

Feedback should be provided to the end user for every data entry action.

Allow for closure

All dialogues should have a clear beginning, middle, and end.

Provide error-handling guidance

All possible errors should be captured by the system and reported back to the end user in a manner that allows for correction or provides suggestions as to how to proceed.

Allow reversal of action

Wherever possible, end user actions should be reversible and data deletion should not occur without explicit confirmation from the end user.

Provide user control

The dialogue should allow experienced users to feel in control of the system and should facilitate inexperienced end users by allowing the user to take greater control of the process as experience develops.

Reduce cognitive load

Dialogues must be simple to use and must provide for a minimum cognitive load on the end user.

Table 12-3. Guidelines for the Design of Effective HCI Dialogues

SAD/CHAPTER 12 42

Designing the Input Controls Intended to ensure that the data

input to the system are both accurate and valid to the highest degree possible Access Control Data Control

SAD/CHAPTER 12 43

Designing the Input Controls Data Control

Appending error Truncation error Transcription error Transposition error

Design Control Mechanism Table 12-4

SAD/CHAPTER 12 44

Input Control Mechanism

Explanation

Data Typing Data should be checked for proper type (numeric, alphabetic, or alphanumeric)

Reasonableness Data should be tested for reasonableness of value given the situation (negative interest rates not allowed, appropriate rate of pay for specific employee category)

Expected Value Data should be checked against some expected value where appropriate (model of automobile should match make of automobile)

Missing or Required Data

Fields should be checked and flagged for missing data that is deemed necessary to complete the data entry process ( has a quantity been provided for every item on the purchase order?)

Check-Digit Calculation

Check digit calculation should be conducted upon appropriate field entry to insure proper account number or other numerical data accuracy.

Data Format Data should be checked against any required format or template to insure proper entry (999-99-9999, (999) 999-9999, 99AAXX9AX)

Value Range Data should be checked against any known or established value range (two-letter state codes should come from acceptable list of codes)

Entry Size The number of expected characters should be checked where appropriate (is the social security number exactly nine digits?)

Allowable Entry Data should be limited to a range of allowable entries and this range of choices should be provided to the end user, where appropriate)

Table 12-4. Input Validation Control Mechanisms

SAD/CHAPTER 12 45

Process Example Number each digit of a numeric entry according to place value from either right or left beginning with 2.

Assume account number of 34763:

34763 23456

Multiply each digit in the numeric entry by its assigned place value.

3 4 7 6 3 x 2 3 4 5 6 6 12 28 30 18

Sum the result of the multiplications.

6 + 12 + 28 + 30 + 18 = 94

Divide the sum by the modulus number (usually 10 or 11)

Assume a modulus number of 11:

94 / 11 = 8 remainder 6

Subtract remainder from modulus number and append check digit to numerical entry.

11 – 6 = 5 (check digit)

347635

Table 12-5. Check Digit Calculation Method

SAD/CHAPTER 12 46

Designing the Input Controls Access Control

Authentic Mechanism Authorization Schema Encryption Mechanism

- End -

SAD/CHAPTER 12 47

Chapter Summary This and the previous chapter

provided a detailed overview of the design and control issues on system input and output. With these two tasks complete, the system is well on its way to completion and implementation.

Chapter 12

End of Chapter