12.1

CSC 123Systems Analysis & Design

Part IV: The Essentials of Design

Chapter 12

Designing Effective Input

12.2

Systems Development Life Cycle

4. Design4. Design

1. Initiation2. Requirements Capture

3. Analysis

5. Development6. Testing

7. Implementation

12.3

Major Topics

• Input design

• Form design

• Display design

• GUI screen design

• GUI controls

• Web design guidelines

12.4

Input Design Objectives

• The quality of system input determines the quality of system output

• Well-designed input objectives:– Effectiveness: serve a specific purpose– Accuracy: ensures proper completion– Ease of use: straightforward– Consistency: same use and feel– Simplicity: uncluttered– Attractiveness: user enjoys using them

12.5

Input

• Forms of input:– Forms– Computer Displays– Interactive web fill-in forms

12.6

Form Design

Guidelines for good form design:– Make forms easy to fill in (next slide)

– Ensure that forms meet the purpose for which they are designed

– Design forms to assure accurate completion– Keep forms attractive

12.7

Form Design (cont)

Easy to fill out, techniques:1. Use proper flow

• Left Right, Top Bottom

2. Group information logically using the seven sections of a form (next slide)

3. Provide people with clear captions• Captions tell the person completing the form

what to put on a blank line, space, or box

12.8

Form Design (cont)

The seven sections of a form are:1. Heading

2. Identification and access

3. Instructions

4. Body

5. Signature and verification

6. Totals

7. Comments

12.9

Seven Sections of a Form

12.10

Caption Types

• Captions tell the person filling out the form what to put in a blank line, space, or box.

• Captions may be one of the following:– Line caption

• put the caption on the same line or below the line

– Boxed caption• provide a box for data instead of a line

– Vertical check off• line up choices or alternatives vertically

– Horizontal check off• line up choices or alternatives horizontally

12.11

Caption Types

12.12

Meeting the Intended Purpose

• Must serve their purpose which can be a combination of information:– Recording– Processing– Storing– Retrieving

12.13

Ensuring Accurate Completion

• To reduce error rates associated with data collection, forms should be designed to assure accurate completion.

• Design forms to make people do the right thing with the form.

• In order to encourage people to complete forms, keep them attractive.

12.14

Attractive Forms

• Uncluttered

• Get information in the expected order

• Aesthetic forms or user of different fonts and line weights

12.15

Computer Form Design Software

• Many form design software is available

• Features of electronic form design software:– Can design paper, electronic, or Web-based forms– Use templates– Can cut and paste familiar shapes and objects– Field validations & messages– Facilitate the completion using software

12.16

Computer Form Design Software (cont)

• Features (cont):– Permit customized menus, toolbars, keyboards, and

macros– Support popular databases– Enable broadcasting of electronic forms– Permit sequential routing of forms– Assist form tracking– Encourage automatic delivery and processing– Establish security for electronic forms

12.17

Omniform from ScanSoft allows the user to take an existing form, scan it into the computer, and define fields so the form can be easily filled out on a PC

12.18

Display Design

Guidelines:1. Keep the display simple

2. Keep the display presentation consistent

3. Facilitate user movement among display screens

4. Create an attractive display

12.19

1. Keep the Design Simple

3 screen sections - divide the screen into:– Heading: title, menu, icons– Body: data entry, captions, specific

instructions– Comments and instructions: for

inexperienced users

12.20

2. Keep the Display Consistent

• Same information in same area

• Group together related information

• No overlapping of data

12.21

3. Facilitating Movement

• Guidelines for facilitating movement from one page to another:– Clicking: the three clicks rule says that users

should be able to get to the screens they need within three mouse or keyboard clicks

– Scrolling: using arrows or PgDn keys– Using context-sensitive pop-up windows– Using onscreen dialogue

12.22

4. Design an Attractive Screen

• To make the screen attractive use:– Different thickness of separation lines

between subcategories– Inverse video and blinking cursors– Different combinations of colors– Different type fonts

• fontface.com

12.23

Using Icons in Screen Design

• Used in graphical screens to run programs and execute commands

• Guidelines:– Use universally recognizable icons– Icons for a particular application should be

limited to 20 recognizable shapes– Use icons consistently throughout

12.24

GUI Screen Example

12.25

Types of GUI Controls

• Text box

• List box

• Combo box

• Check box

• Radio button

• Command button

CheckBox1

CommandButton1

OptionButton1 OptionButton2

12.26

Types of GUI Controls (cont)

Slider and spin button

example

12.27

Types of GUI Controls (cont)

• Message boxes– used to warn users and provide feedback

messages in a dialog box

• Command buttons– perform an action when the user selects it

12.28

Types of GUI Controls (cont)

• Hidden Fields:– Not visible to the viewer– Do not take up any space on the Web page– Can only contain a name and value– Used to store values sent from one Web

form to the server

12.29

Types of GUI Controls (cont)

• Tab control dialog boxes – help organize GUI controls for users– each tab should have

3 basic buttons:• OK• Cancel• Help

12.30

Color

• Do not overdo it with color

• The most legible foreground/background color combinations for display monitors are:– Green on white– Blue on white

– Black on yellow

– White on blue

– Yellow on black

12.31

Internet & Intranet Design Guidelines

1. Provide clear instructions2. Use a logical entry sequence for fill-in forms3. Use a variety of text boxes, push buttons, radio

buttons, drop-down lists, and other GUI features4. Provide a scrolling text box if you are uncertain how

much text will be entered5. Include two basic buttons: Submit and Clear6. If the form is lengthy, divide it into several simpler

forms on separate pages7. Create a feedback screen that lists error messages if

a form has not correctly been filled out

12.32

e-Commerce Applications

• Involve more than just good Web site design

• Customers need to be confident of the site, including privacy and security

• Example: Nordstrom shopping