chapter14 designing interfaces and dialogues

26
Copyright 2002 Prentice-Hall, Inc. Modern Systems Analysis and Design Third Edition Jeffrey A. Hoffer Joey F. George Joseph S. Valacich Chapter 14 Designing Interfaces and Dialogues 14.1

Upload: dhani-ahmad

Post on 18-Jul-2015

174 views

Category:

Software


6 download

TRANSCRIPT

Copyright 2002 Prentice-Hall, Inc.

Modern Systems Analysisand Design

Third Edition

Jeffrey A. Hoffer Joey F. George

Joseph S. Valacich

Chapter 14Designing Interfaces and

Dialogues

14.1

Learning Objectives

Explain the process of designing interfaces and dialogues and the deliverables for their creation

Contrast and apply several methods for interacting with a system

List and describe various input devices and discuss usability issues for each in relation to performing different tasks

14.2

Learning Objectives

Discuss the general guidelines for interface design including: Layout and design Structuring data entry fields Providing feedback System help

14.3

Learning Objectives

Discuss the design of human-computer dialogues and the use of dialogue diagramming

Design graphical user interfacesExplain interface design guidelines

unique to the design of Internet based electronic commerce systems

14.4

Introduction

Focus on how information is provided to and captured from usersDialogues are analogous to a conversation between two peopleA good human-computer interface provides a unifying structure for finding, viewing and invoking the different components of a system

14.5

The Process of Designing Interfaces and Dialogues

User-focused activity

Parallels form and report design process

Employs prototyping methodology Collect information Construct prototype Assess usability Make refinements

14.6

The Process of Designing Interfaces and Dialogues

Deliverables Design Specifications

Narrative Sample Design Testing and usability assessment

14.7

Interaction Methods and Devices

Methods of Interacting Command Language Interaction

Users enter explicit statements into a system to invoke operations

Menu Interaction A list of system options is provided A specific command is invoked by user selection of a

menu option Menu complexity varies according to needs of system

and capabilities of development environment Hierarchies can be employed Two common placement methods

Pop-up Drop-down

14.8

Interaction Methods and Devices

Methods of Interacting Menu Interaction (continued)

Table 14-1 presents general guidelines for designing menus

Form Interaction Allows users to fill in the blanks when working with a

system Measures of an effective design

Self-explanatory title and field headings Fields organized into logical groupings Distinctive boundaries Default values Displays appropriate field lengths Minimizes the need to scroll windows14.9

Interaction Methods and Devices

Methods of Interacting Object-Based Interaction

Symbols are used to represent commands or functions

Icons Graphic symbols that look like the processing option

they are meant to represent Use little screen space Can be easily understood by users

14.10

Interaction Methods and Devices

Methods of Interacting Natural Language Interaction

Inputs to and outputs from system are in a conventional speaking language like English

Hardware Options for System Interaction Table 14-2 presents a list of devices Table 14-3 summaries usability

assessment research for various devices

14.11

Designing Interfaces

Designing Layouts Standard formats similar to paper-based

forms and reports should be used Screen navigation on data entry screens

should be left-to-right, top-to-bottom as on paper forms

14.12

Designing Layouts

Flexibility and consistency are primary design goals Users should be able to move freely

between fields Data should not be permanently saved

until the user explicitly requests this Each key and command should be

assigned to one function

14.13

Structuring Data Entry

Entry Never require data that are already on-line or that can be computed

Defaults Always provide default values when appropriate

Units Make clear the type of data units requested for entry

Replacement Use character replacement when appropriate

Captioning Always place a caption adjacent to fields

Format Provide formatting examples

Justify Automatically justify data entries

Help Provide context-sensitive help when appropriate

14.14

Controlling Data Input

One objective of interface design is to reduce data entry errorsRole of systems analyst is to anticipate user errors and design features into the system’s interfaces to avoid, detect and correct data entry mistakesTable 14-8 describes types of data entry errorsTable 14-9 lists techniques used by system designers to detect errors

14.15

Providing Feedback1. Status Information

Keeps users informed of what is going on in system Displaying status information is especially important if the

operation takes longer than a second or two

2. Prompting Cues Best to keep as specific as possible

3. Error and Warning Messages Messages should be specific and free of error codes and

jargon User should be guided toward a result rather than scolded Use terms familiar to user Be consistent in format and placement of messages

14.16

Providing Help

Place yourself in user’s place when designing helpGuidelines Simplicity

Help messages should be short and to the point Organization

Information in help messages should be easily absorbed by users

Demonstrate It is useful to explicitly show users how to perform an

operation

14.17

Providing Help

Context-Sensitive Help Enables user to get field-specific help

Users should always be returned to where they were when requesting help

14.18

Designing DialoguesDialogue

Sequence in which information is displayed to and obtained from a user

Primary design guideline is consistency in sequence of actions, keystrokes and terminologyThree step process

1. Design dialogue sequence2. Build a prototype3. Assess usability

14.19

Designing the Dialogue Sequence

Define the sequenceHave a clear understanding of the user, task, technological and environmental characteristicsDialogue Diagram

A formal method for designing and representing human-computer dialogues using box and line diagrams

Consists of a box with three sections1. Top: Unique display reference number used by other

displays for referencing dialogue2. Middle: Contains the name or description of the display3. Bottom: Contains display reference numbers that can

be accessed from the current display14.20

Designing Dialogues:Building Prototypes and Assessing

Usability

Often optional activities

Task is simplified by using graphical design environment

14.21

Designing Interfaces and Dialogues in Graphical Environments

Interface Design Issues Become an expert user of the GUI environment

Understand how other applications have been designed Understand standards

Gain an understanding of the available resources and how they can be used Become familiar with standards for menus and forms Figure 14-20 presents standards for menus Table 14-14 presents some common properties of

windows and forms in a GUI environment

14.22

Designing Interfaces and Dialogues in Graphical Environments

Dialogue Design Issues Goal is to establish the sequence of displays that

users will encounter when working with system Ability of some GUI environments to jump from

application to application or screen to screen makes sequencing a challenge

One approach is to make users always resolve requests for information before proceeding

Dialogue diagramming helps analysts better manage the complexity of designing graphical interfaces

14.23

Electronic Commerce Application:Designing Interfaces and Dialogues for

Pine Valley Furniture’s Webstore

General Guidelines Several factors have contributed to poor design

of Web interfaces Web’s single “click-to-act” method of loading static

hypertext documents Limited capabilities of most Web-browsers to support

finely grained user interactivity Limited agreed-upon standards for encoding Web

content and control mechanisms Lack of maturity in Web scripting and programming

languages Design errors are summarized in Table 14-15

14.24

Electronic Commerce Application:Designing Interfaces and Dialogues for

Pine Valley Furniture’s Webstore

Design Guidelines Navigation with cookie crumbs

A technique which uses a series of tabs on a Web page to show users where they are and where they have been in the site

Tabs are hyperlinks to allow users to move backward easily within the site

Two important purposes Allows users to navigate to a point previously visited Shows users where they have been and how far

they have gone from point of entry into site

8.25

SummaryInteraction Methods and Devices

Design guidelines for interfaces Layout design Structuring data entry fields Providing feedback Designing help

Designing dialogues

Designing interfaces and dialogues in graphical environments

Electronic Commerce Application: Designing Interfaces and Dialogues for a Web Application

14.26