Chapter 12 Designing Interfaces and Dialogues

© 2005 by Prentice Hall© 2005 by Prentice Hall

Chapter 12 Designing Interfaces and

Dialogues

Modern Systems Analysisand Design

Fourth Edition

Jeffrey A. Hoffer Joey F. George

Joseph S. Valacich

© 2005 by Prentice Hall© 2005 by Prentice Hall12-2

Learning ObjectivesExplain the process of interface and dialogue

design.Contrast and apply methods for interacting

with a system.List and describe various input devices and

factors affecting their usability.Describe guidelines for designing interface

layout, data entry field structure, feedback, and system help.

Design graphical user interfaces.


Interface/Dialogue Design

Layout (of widgets, text, and table data) Structuring data entry (tab order) Controlling data input (validation and

format controls) Feedback (prompting, status, warning,

and error messages) Dialogue sequencing


A typical interface/dialogue design specification:

Similar to form design, but includes multiple forms and dialogue sequence specifications

Deliverables and Outcomes


Interface Methods

Interface: the method by which a user interacts with the information systemCommon interaction methods Command line Menu Form Object-based Natural language


Command Line Interaction

Users enter explicit statements into a system to invoke operationsExample from MS DOS: COPY C:PAPER.DOC A:PAPER.DOC This copies a file from the C: drive to the A:

driveIncludes keyboard shortcuts and function keys


Menu Interaction

A list of system options is provided and specific command is invoked by user selection of a menu optionTwo common menu types: Pop-up: menu placed near current cursor

position Drop-down: access point to menu placed

at top line of display, menu drops down when access point clicked


Guidelines for Menu Design

Wording: meaningful titles, clear command verbs, mixed upper/lower caseOrganization: consistent organizing principleLength: all choices fit within screen lengthSelection: consistent, clear and easy selection methodsHighlighting: only for selected options or unavailable options


Good Menu Design


Visual editing tools help designers construct menus.


Form Interaction

Allows users to fill in the blanks when working with a systemMeasures 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


Object 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


Natural Language Interaction

Inputs to and outputs from system are in a conventional speaking language like EnglishBased on research in artificial intelligenceCurrent implementations are tedious and difficult to work with, not as viable as other interaction methods


Hardware Options for System Interaction

KeyboardMouseJoystickTrackball

Touch ScreenLight PenGraphics TabletVoice


Usability Problems with Hardware Devices

Visual Blocking touch screen, light pen

User Fatigue touch screen, light pen

Movement Scaling keyboard, mouse, joystick,

trackball, graphics tablet, voice

Durability trackball, touch screen

Adequate Feedback keyboard, mouse,

joystick, trackball, graphics tablet, voice

Speed keyboard

Pointing Accuracy joystick, touch screen,

light pen, voice


Designing Interfaces

Use standard formats similar to paper-based forms and reportsLeft-to-right, top-to-bottom navigationFlexibility and consistency: Free movement between fields No permanent data storage until the user requests Each key and command assigned to one function


Structuring Data EntryEntry Never require data that are already online 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


Entering Text


Controlling Data Input

Objective: reduce data entry errorsCommon sources data entry errors in a field: Appending: adding additional characters Truncating: losing characters Transcripting: entering invalid data Transposing: reversing sequence of

characters


Types of Validation Tests

Class or CompositionCombinationsExpected ValuesMissing DataPictures/Templates

RangeReasonablenessSelf-checking DigitsSizeValues


Feedback Messages

Status information: keep user informed of what’s going on, helpful when user has to wait for response

Prompting cues: tell user when input is needed, and how to provide the input

Warning or Error: inform user that something is wrong, either with data entry or system operation


Providing Help

Place yourself in user’s place when designing helpGuidelines: Simplicity

Help messages should be short and to the point Organize

Information in help messages should be easily absorbed by users

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

operation


What is a Dialogue?

A sequence of interactions between the system and a user

Dialogue design involves: Designing a dialogue sequence Building a prototype Assessing usability


Guidelines for Dialogue Design

ConsistencyShortcuts and SequenceFeedbackClosure

Error HandlingReversalControlEase


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


Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues.


Designing Interfaces and Dialogues in Graphical Environments

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.


GUI Window Properties That Can Be Turned On or Off

Modality: require user to finish action before proceedingResizable: allow user to change size of windowMovable: allow user to reposition windowMaximize: allow user to make window take entire screenMinimize: allow user to completely hide windowSystem menu: allow window to have access to system level functions


GUI 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.


SummaryIn this chapter you learned how to: Explain the process of interface and dialogue

design. Contrast and apply methods for interacting

with a system. List and describe various input devices and

factors affecting their usability. Describe guidelines for designing interface

layout, data entry field structure, feedback, and system help.

Design graphical user interfaces.

Chapter 12 Designing Interfaces and Dialogues

Documents

Transcript of Chapter 12 Designing Interfaces and Dialogues