8.1

INTERFACE DESIGN

IMS9001 - Systems Analysis and Design

8.2

Human–Computer Interface Design

The interface is the link between the users and the computer

end user

direct user

INTERFACE

INTERFACE

ProgramsProgramsDatabase

To many users, the interface is the system

8.3

The process of defining the manner in which humans and computers exchange information

Analogous to a conversation between 2 people Interface and dialogue design is critical for

successful information systems “...to the user the interface is the system” Should provide a uniform structure for finding,

viewing, and invoking different components of an information system

Designing Interfaces and Dialogues

8.4

Form and report design are key ingredients for successful information systems - especially for users

Each input data flow to a process will be associated with a form

Each output data flow from a process will be associated with either a form or a report

Forms and reports can be paper-based or screen-based

Inputs and Outputs: Forms and Reports

8.5

FORM is a business document containing some predefined data and also some areas for other data to be filled in typically based on one database record turnaround document is produced by a system

and then returned with input data REPORT is a business document that

contains only predefined data - a passive document for reading typically contains data from many different

database records

Forms and Reports

8.6

1. Collect initial requirements who will use the form or report what is its purpose when is it needed or used where does it need to be delivered how many people need to use it

2. Construct initial prototype 3. Users review and evaluate

prototype Iterate

Designing Forms and Reports

8.7

Narrative overview Form name, users, task, system, environment

Sample design Testing and usability assessment

user ratings on perceptions of usability dimensions - consistency, sufficiency, accuracy, etc

testing objectives, procedures and results- time to learn, speed of performance, rate of errors,

retention over time, user satisfaction and other perceptions

See Fig 13.4 p 438 and Fig 14.2 p 462 in Hoffer et al (2002)

Design Specifications

8.8

General guidelines: Meaningful titles

clear and specific, revision-no, date

Meaningful information needed and useable information

Balanced layout spacing, margins, balanced and clearly labelled

Easy navigation easy forward/backward moves, current position clear

Formatting Forms and Reports

8.9

TEACHING RESOURCE INFORMATION

BORROWER NUMBER 7712255BORROWER NAME DR. JIM SMITHLOAN NUMBER 12753DUE DATE 30-5-98ITEM CODE KS H1ITEM AVAILABILITY YESREQUIRED ITEM YESITEM CODE -ITEM AVAILABILITY -REQUIRED ITEM -ITEM CODE -ITEM AVAILABILITY -REQUIRED ITEM -CONFIRMED? NO

VagueTitle

Difficult to read,

InformationPacked tightly

No navigationinformation

No use of different intensity, fonts etc.

Poor Form Design

8.10

ClearTitle

Easy to read,Clear

balanced layout

Intensity differences,boxing, font

sizes

Clear navigationinformation

Good Form Design

8.11

Blinking and audible tones Colour, intensity, size and font differences Reverse video Boxing Underlining Capital letters Offsetting

Highlighting Information

8.12

Benefits of colour strikes the eye, draws attention to warnings accents an uninteresting display facilitates discrimination

Problems with colour colour blindness/eye strain resolution may degrade printing or conversion to other media may

not easily translate

Colour vs No Colour

8.13

Case display text in mixed upper and lower case

Spacing double spacing if possible, leave line between

paragraphs Justification

left justify with ragged right margin Hyphenation

do not hyphenate words between lines Abbreviations

use only when widely understood

Displaying Text

8.14

HELP SCREEN H2356ADD A FORM WITHIN A REPORTIN THE DATABASE WINDOW, CLICK THE FORM THAT IS BOUNDTO THE TABLE ON THE MANY SIDE OF THE ONT TO MANY RELATIONSHIP AND HOLD DOWN THE MOUSE BUTTON.DRAG THE FORM INSIDE THE MAIN FORM, AND THEN RELEASE THE MOUSE BUTTON.MICROSOFT ACCESS INSERTS THE SECOND FORM AS ASUBFORM WITHIN THE MAIN FORM.IF YOU NEED TO YOU CAN PRESS F1 T ORETURN TO THE MAINMENU, F2 TO GO TO THE PREVIOIS CARD AND F3 TO GO TO THENEXT CARD.

Vaguetitle

Fixed, upper

case textSingle

spacing

Poor Text Design

8.15

Cleartitle

Mixedcase

Spacing between sections

Clear navigationinformation

Good Text Design

8.16

Use meaningful labels for all rows and columns; relabel after change of

page Formatting columns, rows and text

sort in meaningful order place blank row after every 5 lines in long columns be consistent with typefaces and fonts

Formatting numeric, textual and alphanumeric data right justify numeric data, left justify textual data

Designing Tables and Lists

8.17

Clear separate column labels

Numeric dataRight justified

Good Table Design

8.18

3 major steps: 1 Designing the dialogue sequence

based on how the user wishes to use the system 2 Build a prototype

use tools such as CASE tools, Visual Basic, Access 3 Assess Usability

use same approach as with forms and reports - time to learn,speed of performance, rate of errors, retention over time, subjective satisfaction

Design specification can be completed as for forms and reports

Designing Dialogues

8.19

Common interface methods are:

Command language interaction

Menu interaction

Form interaction

Icon/object-based interaction

Interaction Methods and Devices

8.20

Users enter explicit commands to invoke operations users must therefore remember syntax and

semantics MSDOS, UNIX commands

copy A:myfile.doc to B:myfile.doc Complex applications such as word processors

and spreadsheets may have many commands <CTRL-P> print <CTRL-S> save <CTRL-C> copy

Command Language Interaction

8.21

Users select from a list of system options and a specific operation is executed

Menu interaction is still the most widely used interaction method

Menus can differ greatly in their design and capability

simple single menu hierarchy of menus pop-up menus drop-down menus graphic menus

Menu Interaction

8.22

TEXT-BASED SYSTEM MENU OF CHOICES ----------------------------

1 BOOKINGS2 CUSTOMERS3 TOURS4 MAINTENANCE5 LOGOUT

What’s wrong with this one?

Simple Single Menu

8.23

MainMenu

Menu Hierarchy

8.24

Wording meaningful title, clear, unambiguous command verbs

Organisation consistent, eg. related options should be grouped

together Length

use sub-menus to break up very long menus Selection

methods should be clear and consistent Highlighting

should be minimised and used to convey selected options (marked) or unavailable options (dimmed)

Guidelines for Menu Design

8.25

Users fill in ‘blanks’ on a form when they interact with the system

Screen format is similar to paper-based forms Effective for both input and presentation of

data Form interaction is common on many

applications, the World Wide Web Form-based programming languages

VB, Delphi, CGI(?)

Form Interaction

8.26

Often based on metaphor Icons are graphic symbols that look like

the processing option they represent Operations are selected by pointing at

and clicking on the desired option Easily understood and take up little

screen space Many icons appear in the form of

buttons or controls

Icon/Object-Based Interaction

8.27

Keyboard Mouse Joystick Trackball Touch screen Light pen Graphics tablet Voice

Common Interaction Devices

8.28

Entry never require data to be inserted that is already known

Defaults always provide defaults where appropriate

Format provide format details (decimal points, dollar signs, dates ...)

Provide help for help, concepts, procedures, messages, menus, function keys,

commands, etc. Validation tests are usually handled by DBMS or by programs:

Type proper type of data (eg. numeric, alpha …)

Combinations do values in several fields combine in a sensible way

Missing data eg. must have quantity for each customer order

Structuring and Validation of Data Entry

8.29

Interface Design Principles

Five principles: Support “Transportability of

Knowledge” Be Consistent Provide Feedback Use Drab Colours Make the User Boss

8.30

Transportability of Knowledge

Make use of what the user already knows eg File>Exit quits Windows applications

Answers lots of design questions for you What are menus? - things that drop down

from the top What’s the first menu option? - File What’s the last menu option? - Help What does the word exit mean? - quit the

application.

8.31

Be Consistent

Always do the same thing in the same way it’s always Exit Exit only means “Leave this application” Exit never means “Go back to the previous

screen.” or “Go back to the splash screen.”

The (Drop-Down) Menus are always the same. If menu options are inappropriate in particular

locations, dim them.

The words you use to refer to objects are the same across screens.

8.32

Transportability and Consistency Work Together

Any exception means: The user always has to stop and think:

“Is this the exception?” “Do I have to think twice about this one?”

So any breakdown in consistency or transportability means: The user is slowed down The user is frustrated The user makes more mistakes

8.33

Consistency in Appearance and Performance

These aren’t the same. You can see inconsistency in appearance but not

in performance How (and when) does your system respond to an

input error? When do you prompt the users? How does the user access the Help system?

(i.e., does [F1] always work?) How must the user enter dates, percentages,

etc. ? Where do forms appear on the screen?

8.34

Provide Feedback

Feedback Lets the User Know What’s Going on

Examples A button goes down when you click it The mouse pointer turns into an hourglass while

short tasks run There’s a progress bar for long tasks

Objects always respond to actions on them. Something always shows you that it’s worked

Negative Example Fill in a form, click on the Save button Nothing happens……The user is left in doubt.

8.35

Use Drab Colours

Some colours cause problems eg red red seems dim, as very few cones in retina

sensitive to red 3D effect of red on green or green on red for

everyone red seems fuzzy around edges

Colour perception is personal What looks good to you won’t necessarily

look good to many others Drab colours are best

8.36

Make the User Boss

In traditional computer programs The program walks the user through a series of

steps The user has to perform these steps correctly and

in the required order The program (and programmer) knows in

advance what the user is doing at any time. The program and programmer are always in

control (and there’s always a known point, called the control point, moving through the program)

So traditional programmers speak of the “flow of control” through the program.

8.37

There’s No Point of Control

Control is passed to the user Within reason they can:

Do what they want in the order they want Enter partial and incomplete data Stop in the middle of a task Leave blank and incorrect data on the screen

for awhile

The computer program is passive The user is active The user becomes the boss

8.38

Mechanisms to control user access include views

particular users see subset of DB in the interface

authorisation rules restrictions to access and actions on data

encryption procedures encryption and decoding procedures are necessary

for highly sensitive data

authentication schemes access restrictions controlled by passwords,

biometric devices and smart cards

Controlling User Access

8.39

Usability typically refers to speed - efficient completion of task accuracy - output provides what is expected satisfaction - output is liked

Design guidelines for usability Consistency - of operation Efficiency - related to user task Ease - output self explanatory Format - consistent format between entry and display Flexibility - must be convenient to user

Assessing Usability

8.40

User experience, skills, motivation, education, personality

Task time pressures, costs of errors, work duration (fatigue)

Systems platform will influence interaction styles and devices

Environment social issues and role should be considered

Contextual Issues

8.41

Measures of usability Time to learn Speed of performance Rate of errors Retention over time Subjective satisfaction

Usability data can be collected by observation interviews keystroke capturing questionnaires

Measuring Usability and Collecting Usability Data

8.42

References

HOFFER, J.A., GEORGE, J.F. and VALACICH (2005) Modern Systems Analysis and Design, (4th edition), Pearson Education Inc., Upper Saddle River, New Jersey, USA. Chapters 11, 12

WHITTEN, J.L., BENTLEY, L.D. and DITTMAN, K.C. (2001) 5th ed., Systems Analysis and Design Methods, Irwin/McGraw-HilI, New York, NY. Chapter 15