1

Modern Systems Analysisand Design

Hoffer, George & Valacich

Chapter 12Designing Interfaces and

Dialogues

2

Learning Objectives

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

2. Contrast and apply several methods for interacting with a system.

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

4. Discuss the general guidelines for interface design.5. Discuss the design of human-computer dialogues

and the use of dialogue diagramming.6. Design graphical user interfaces.7. Explain interface design guidelines unique to the

design of Internet based e-commerce systems.

3

System Development Life Cycle SDLC

4

Introduction

Interface Design focuses on how information is provided to and captured from users

Dialogue design focuses on the sequencing of interface displays

Dialogues = conversation between two people Interface = rules followed by each person

during conversation.

5

The Process of Designing Interfaces and Dialogues

User-focused activity Employs prototyping methodology:

Collect info. Construct prototype Assess usability Make refinements

Follows the same questions that are answered in the forms and reports design process Who, What, When, Where, How.??????

6

Deliverables and Outcomes

Same as the Forms and Reports Deliverables.

Narrative overview: Title (Name), User, Task, System and Environment characteristics.

Sample Design: Form/Report Design and Dialogue Sequence (Storyboard)

Testing and usability assessment: Measuring Usability (Time To learn, rate of error).

With one exception:Dialogue sequence: the ways a user can move from one

display to another.

Des

ign

Sp

ecif

icat

ion

s

7

Design specification for interfaces and dialogues

8

Interaction Methods & Devices

Interface:Interface: a method by which users interface with an information system.

Methods of Interaction for designing usable interfaces include:

1. Command Language Interaction

2. Menu Interaction: (Pop-Up & Drop-Down)

3. Form Interaction

4. Object Based Interaction

5. Natural Language Interaction

9

Interaction Methods1) Command Language Interaction

Command Language Interaction: Users enter explicit statements into a system to invoke operations within a system.

Difficult to interact with – requires remembering commands, names, syntax.

Good for expert users.

10

Interaction Methods2) Menu Interaction

Menu Interaction: a method in which a list of options is provided and specific command is invoked by user selection of a menu option.

Menu complexity varies according to the needs of a system and capabilities of development environment.

Single menuHierarchies (levels)

Two common placement methods: Pop-up Drop-down

11

12

13

Interaction Methods2.1) Pop-Up Menu

A menu positioning method that places a menu near the current cursor position

Used to: Group commands

for a certain job Provide a list of

possible use Fill a table with valid

values

14

Interaction Methods2.2) Drop-Down Menu A menu positioning method that places

the access point of the menu near the top-line of display; when accessed, menus open by dropping-down onto display.

Provide consistency and efficient display space

Toolbars? Input Device Menus? Most advanced operating environments,

such as Microsoft windows or the Apple Macintosh, provide a combination of both pop-up and drop-down menu.

15

Interaction MethodsGuidelines for Menu Design

Quit

16

Poor Menu Design

17

Good Menu Design

18

Interaction Methods3) Form Interaction

A highly intuitive human-computer interaction whereby data fields are formatted in a manner similar to paper-based forms.

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 windows

19

20

Interaction Methods 4) Object-Based Interaction A human-computer interaction method in which symbols

are used to represent commands or functions. 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

Used to display desktops in modern operating systems and starting interfaces.

21

22

Interaction Methods 5) Natural Language Interaction

A human –computer interaction method whereby inputs to and outputs from a computer based application are in a conventional spoken language such as English.

Not as viable (practical) as other interface methods. Can be tedious, frustrating and time-consuming (might

require learning). Used in a narrow domains (database quires,

accessibility) Might be applied using voice entry systems

23

Hardware Options for System Interaction

Keyboard Mouse Trackball Joystick Touch Screen Light Pen Graphic Tablet Voice

24

Usability Problems with Hardware Devices

Visual Blocking (extent to which device blocks display when using)

touch screen, light pen User Fatigue( potential for fatigue over

long use)

touch screen, light pen Movement Scaling (extent to which

device movement translates to equivalent screen movement)

keyboard, mouse, joystick, trackball, graphics tablet, voice

Durability (lack of durability or need for maintenance (e.g., cleaning)

trackball, touch screen

Adequate Feedback (extent to which device provides adequate

feedback for each operation)

keyboard, mouse, joystick, trackball, graphics tablet, voice

Speed( cursor movement speed)

keyboard Pointing Accuracy( ability to

precisely direct cursor)

joystick, touch screen, light pen, voice

25

26

Designing Interfaces

Guidelines for:1. Designing Interface Layouts

2. Structuring Data Entry fields

3. Controlling Data Input

4. Providing Feedback

5. Providing Help

27

1. Designing Interface Layouts

Use Standard formats similar to both paper-based forms and

reports.

Forms have several general common areas :

1. Header information

2. Sequence and time-related information.

3. Instruction or formatting information

4. Body or data details

5. Totals or data summary

6. Authorization or signatures

7. Comments.

28

paper-based form for reporting customer sales activity.

29

computer-based activity form reporting customer sales activity.

30

Another concern when designing the layout of computer-based

forms is:-

Screen navigation on data entry: screens should be left-to-right, top-

to-bottom as on paper forms

Flexibility and consistency :

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: Cursor capabilities.

Editing capabilities.

Exit capabilities.

Help capabilities.

31

2. Structuring Data Entry RulesEntry Never require data that are already on-line or that

can be computed (time,date,….)

Defaults Always provide default values when appropriate (loan)

Units Make clear the type of data units requested for entry

(currency)

Replacement Use character replacement when appropriate (lookup value/autocomplete)

Captioning Always place a caption adjacent to fields

Format Provide formatting examples(decimal points,.$,…)

Justify Automatically justify data entries (text to left,numbers to right)

Help Provide context-sensitive help when appropriate

32

Entering Text

33

3. Controlling Data Input

One objective of interface design is to reduce data entry errors

Achieved by anticipating user errors and designing features into the system’s interfaces to avoid, detect and correct data entry mistakes

Sources of data errors: Appending: adding additional characters Truncating: losing characters Tran scripting: entering invalid data into a field Transposing: reversing the sequence of characters

34

35

Controlling Data Input

Although DBMS can ensure data validity, it is faster and easier to correct erroneous data before they are stored. If a DBMS cannot perform these tests, then you must design the tests into program modules. An example of one item that is a bit sophisticated, self-checking digits, is shown in Fig 12-14

36

37

Studies J. Verhoeff (Error Detecting Decimal Codes, Mathematical Centre Tract

29, The Mathematical Centre, Amsterdam, 1969, cited in Wagner and Putter, "Error Detecting Decimal Digits“.

single errors: a becomes b (60% to 95% of all errors) omitting or adding a digit (10% to 20%) adjacent transpositions: ab becomes ba (10% to 20%) twin errors: aa becomes bb (0.5% to 1.5%) jump transpositions: acb becomes bca (0.5% to 1.5%) jump twin errors: aca becomes bcb (below 1%) [lower for

longer jumps] phonetic errors: a0 becomes 1a [since the two have

similar pronunciations in some languages, e.g. thirty and thirteen] (0.5% to 1.5%)

38

Schemes for detecting decimal number errors

ISBN mod 11 check IBM check (used with most credit cards) Electronic Funds Transfer routing number ch

eck

UPC check (used on product bar codes) Verhoeff's dihedral group D5 check

39

4. Providing Feedback

Feedback is very important in any conversation between people!

Similarly, in a human-computer interaction, system feedback is vital for a satisfactory interaction

There are three types of system feedback1. Status Information

2. Prompting Cues

3. Error and Warning Messages

40

1. 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 Using different textual and visual effects

Progress Bars, Status Bars, Mouse Icons

2. Prompting Cues Best to keep as specific as possible

ID ____________ Enter Student ID: _ _ _ _ _ _ _ _

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

41

42

5. Providing Help

Place yourself in user’s place when designing help Guidelines: Simplicity

Help messages should be short and to the point Organization

Information in help messages should be easily absorbed by users

DemonstrationIt is useful to explicitly show users how to perform an operation (Tutorials, Animation)

43

Poor Design of a HELP display

44

Hypertext-based help system for Microsoft’s Internet Explorer 5.

45

Providing Help

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

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

Help and Support technologies Built-in help files. HTML Help (CHM files: Windows Compiled Help) Online Help and Support Knowledge Based (KB) and User Forums Virtual Assistants

46

Many commercially available systems provide extensive system help.

47

Designing Dialogues

Dialogue:Dialogue: The sequences of interaction between a user and a system.

Dialogue design: The process of designing these overall sequences .

48

Guidelines for the Design of Dialogues

1. consistency: same labels, and same information locations on all displays.

2. Shortcut &sequence: allow short cuts for advanced users.

3. Feedback4. Closure: indication of dialogue ending.5. Error handling: reasons and suggestions.6. Reversal: undo and double confirmation.7. Control: acceptable timing for data dealing.8. Ease

49

The dialogue design process has three major steps:

1. Designing the dialogue sequence

2. Building a prototype

3. Assessing Usability Designing the dialogue sequence

Define the dialogue sequence. How?1. By having a clear understanding of the user, task,

technological and environmental characteristics.

2. Transform this activities into Dialogue Diagramming.

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

50

Dialogue Diagram

Consists of a box with three

sections

1. Top: Unique display

reference number

2. Middle: Contains the name

or description of the display

3. Bottom: Contains display

reference numbers that can

be accessed from the

current display

51

52

Dialogue diagram for Customer Info System

Item 2

User can choose different customer

User can choose any item

Reference No of display

Description of displayReference No of return display

53

Step 2: Building PrototypesStep 3: Assessing Usability

Often optional activities Task is simplified by using graphical design

environment Assessing usability was discussed in the

previous chapter: Time to learn Speed of performance Rate of errors Retention over time Subjective satisfaction

54

Designing Interfaces and Dialogues in Graphical Environments (GUIs)

To become an effective GUI designer, you need to:

1. Become an expert user of the GUI environment Understand how other applications have been

designed Understand standards for menus and forms

2. Gain an understanding of the available resources and how they can be used

Become familiar what can be done for each control Improve flexibility (more than one way to archive a

task)

55

Dialogue Design Issues in GUIs

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 – e.g. Installation process.

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

56

57