Lecture 4

Interface Design – Part 2

IMS2805 - Systems Design and Implementation

IMS2805 4.2.2

References

HOFFER, J.A., GEORGE, J.F. and VALACICH (2002) 3rd ed., Modern Systems Analysis and Design, Prentice-Hall, New Jersey, Chapter 14

HOFFER, J.A., GEORGE, J.F. and VALACICH (2005) 4th ed., Modern Systems Analysis and Design, Prentice-Hall, New Jersey, Chap 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. Chapters 14, 15

IMS2805 4.2.3

References

Don Norman’s The Design of Everyday Things (Doubleday Currency 1986) Very useful and general discussions of the

problems of designing interfaces applied to doors, windows, watertaps and computer systems.

Alan Cooper’s About Face: The Essentials of User Interface Design (Programmer’s Press, 1995) Practical advice combined with criticism of a

number of standard aspects of interface design.

IMS2805 4.2.4

Human–Computer Interface Design

INTERFACE

ProgramsDatabase

end userdirect user

The interface is the link between the users and the computer

To many users the interface is the system

IMS2805 4.2.5

Leverage Metaphor: a good interface gives the desired output with least effort

Economic argument: the effort applied (by users) will be proportional to the

(perceived) benefit of the outcome (to those users)

What makes a ‘good’ interface?

IMS2805 4.2.6

"The way a user interacts with a computer is as important as the computation itself; in other words, the human interface, as it has come to be called, is as fundamental to computing as any processor configuration, operating system, or programming environment.

(John Anderson, 1989)

Human–Computer Interface Design

IMS2805 4.2.7

vocabulary nouns can be seen as the data structure (entity and attribute labels) in the data tables.

grammar the gizmos used to present the data restrict the way the vocabulary is used.

sentences a structure making a single statement with a minor closure point at the end.

paragraphs one or more “sentences” with a coherent thought and a more significant closure point at the end.

dialogue conversations require two-way communication. The flow of conversation needs to carry a logical thread, it may also be navigated in a number of different directions.

roles conversation reflects the roles of the parties involved

Human conversation as a metaphor for the human-computer interface

IMS2805 4.2.8

1. data - “vocabulary” for GUI communication 2. metaphors and mental models3. application posture 4. “grammar” - gizmos5. closure and flow in GUI communication6. navigation7. task structure/dialogue

Human-Computer Communication

IMS2805 4.2.9

The human-machine interface will: add new instances to the database modify existing instances in the database delete instances in the database

The underlying structure of the data influences the human-machine conversation BUT

the screen layouts the screen navigation process do NOT have to reflect the data table structures

Internal data structures reflect the best way to store data External data structures reflect the best way to obtain and use the

data in a conversation. The human-machine interface must ensure that, as far as possible,

the data meets the rules for the data domain, is correct and complete.

1. Vocabulary - the data

IMS2805 4.2.10

Student results sheet

Student no: 12345678Name: Fred NurkCourse: 0961 B. Comp.Year: 1998Semester: 1

Subject Result GradeSYS2001 65 CSFT2001 88 HDCOT2001 75 DPHY2120 68 C

student no., name, address, phone

course code, course title

student no., subject code, yr, sem, result

subject code, subject description

COURSE

SUBJECT

STUDENT

RESULTS

External and Internal data views

IMS2805 4.2.11

implementation models reflect

technology

manifest models are chosen by the developer.

The best ones reflect the user’s mental model

not the implementation model

mental models reflects user’s

vision

Cooper’s Manifest Model

IMS2805 4.2.12

humans anthropomorphise

(inanimate objects gain personality)

humans simplify(the music doesn’t

come straight from the tape)

2. Mental Models

IMS2805 4.2.13

The Value of the Manifest Model “Understanding how software actually works will always help someone to use it, but this understanding usually comes at significant cost. The manifest model allows software creators to solve the problem by simplifying the apparent way the software works. The cost is entirely internal, and the user never has to know.”

User interfaces that abandon implementation models to follow mental models are better.”

(Cooper 1995, p31)

IMS2805 4.2.14

person

loan

item

main screen

record person find item record loan

add modify delete

add modify delete

add modify delete

Interface Follows the Implementation Model

IMS2805 4.2.15

main screen

everyone loans staff admin

find items check loans new items remove items

make loans accept returns

person

loan

item

Interface Follows the User’s Mental Model

IMS2805 4.2.16

three examples of colour change dialogs from PhotoShop.

which dialog best suits the mental model of a graphic artist (the target user)?

Compare These ...

IMS2805 4.2.17

metaphors are used to draw an analogy between the way the dialog works and some object the user is familiar with. Some common metaphors:

implies the ability to take work home

a common storage & classification devicefolder

originally a “trash can” on Macintosh.

Note the difference in the metaphor!

The window metaphor implies both viewing and restrictions on the view.

Metaphors

IMS2805 4.2.18

Paper calendars are limited in the size of paper available and show one month at a time.

May 1997 » «

4111825

5121926

6132027

7142128

8152229

9162330

1 2 310172431

Sun Mon Tues Wed Thurs Fri Sat

Transferring mechanical models to computers can restrict an application where these restrictions are not necessary.

Computerised calendars are often presented one month at a time.Is this restriction necessary? What opportunities are lost?

Some Metaphors Don’t Work

IMS2805 4.2.19

A metaphor should make it easier for the user to understand the function

and purpose of the software NOT limit the range of useful features offered enable the user to predict ALL the functions available NOT behave differently on computer from real life

Choose Your Metaphors Carefully

IMS2805 4.2.20

The posture of an application is the way it presents itself to the user

Sovereign

Transient

Daemonic

Parasitic

3. Application Posture

IMS2805 4.2.21

Sovereign (royal) posture only application on screen monopolises user’s attention for long

periods usually running continuously usually large with lots of related features,

functions e.g. word processor, spreadsheet

Application Posture

IMS2805 4.2.22

Transient posture single function application called when needed - appears,

performs job and leaves, temporary e.g. scanner software

Application Posture

IMS2805 4.2.23

Daemonic posture works quietly and invisibly in the background possibly doing vital tasks often no need for human intervention talks with the user when they must be manually

adjusted for changing circumstances e.g. printer driver

Application Posture

IMS2805 4.2.24

Parasitic posture continually present like a sovereign performs a supporting role small and superimposed on another application often report progress

e.g. Windows clock, eyeballs to track mouse cursor, paper clip

Application Posture

IMS2805 4.2.25

Sovereign users are experienced users. while each user spends some time as a novice, this is only a

short time relative to the total amount of time spent using the software.

design for optimum use by experienced users! sovereign users are in flow - don’t interrupt!

OK to take up video real estate (multiple toolbars etc) Use muted colours and textures (users will be looking at

this for a long time!)

Design for Sovereign Posture

IMS2805 4.2.26

Buttons etc can be smaller, more tightly packed because users will be familiar with them

Window should be maximised, avoid resizing to move from one document to another

Use the full screen and all its possibilties Tune the application to avoid delays

Design for Sovereign Posture

IMS2805 4.2.27

Avoid taking more space than necessary - support rather than replace the sovereign application

Use bright colours to differentiate this application from background sovereign

‘Gizmos’ can be larger and bolder than in a sovereign application

Build instructions into the interface - user doesn’t use this often enough to remember

All information and facilities should be available on the surface - single window

Design for Transient Posture

IMS2805 4.2.28

Avoid alternative views and dialog boxes Use simple controls - push buttons Avoid controls on window edges Provide a simple keyboard as well as mouse

interface Window should be less than full size, must

be moveable, may be reshapable

Design for Transient Posture

IMS2805 4.2.29

Avoid taking more space than necessary - avoid full-screen control panels

Mostly should be invisible this includes status reports since user often not

aware of the existence of this application

Must be able to be reached use a Windows control panel or create a transient program that runs a launchable

application to configure the daemon See design tips for transient applications

Design for Daemonic Posture

IMS2805 4.2.30

Should be simple and often bold in reporting information

Avoid taking more space than necessary - get out of the way of the sovereign application when necessary

Are not the focus of the user’s attention Use small features because on screen for long

periods and user will learn where it is Design to support sovereign but not interfere

Design for Parasitic Posture

IMS2805 4.2.31

free text no auto checks

select one item from a list limited choice

select an item or enter text selects nearest

match

choose one option only limited choice

choose one or more options limited choice

toggle choice on or off limited choice

perform a preset function limited choice

Gizmo Data Entry Mode Validation

4. Grammar - Gizmos

IMS2805 4.2.32

A text box is used to display data. The form and text box are BOUND to a column in the data table.

Normally you set the box so that it is obvious this is OUTPUT. You can do this by making the box the same colour as the background and removing the box outline.

This field will be skipped in the Tab order. If the user selects the field they can copy the data but not change it (locked).

Control Source Item_nameBack Color (=

background)Border Style clearTab Stop NoLocked Yes

Properties

Text Boxes for Display

IMS2805 4.2.33

A text box can be used to input many types of data. The text box will be UNBOUND for input only, or BOUND to a column if you want to display and alter values.

Normally you set the box so that it is obvious this is INPUT. You can do this by making the box a different colour from the background and having a clear box outline (these are the default settings).

N.B it is ILLEGAL to use tax file numbers for other purposes!

Control Source (unbound) ORtax_file_no

Format fixedDecimal places 0Input Mask

000\000\000;;_

Status Bar Text tax file number

Properties

This field has formatting prompts as well as automatic checks for numeric data.

Text Boxes for Input

IMS2805 4.2.34

A text box can be used to input many types of data. The text box will be UNBOUND for input only, or BOUND to a column if you want to display and alter values.

Normally you set the box so that it is obvious this is INPUT.

You can do this by making the box a different colour from the background and having a clear box outline (these are the default settings).

Control Source (unbound) ORaccount_no

Format fixedDecimal places 0Input Mask 000\000\000;;_Status Bar Text account

number

Properties

This field has formatting prompts as well as automatic checks for numeric data.

Text boxes for Input

IMS2805 4.2.35

A list box can be used to restrict input of data to values currently saved. The list box is BOUND to the relevant column in the data table in which the values are stored.

You can arrange the size of the box to display as many values at once as you like. If more values are available a scroll bar will appear.

Control Source NameRow Source Type Table/QueryRow Source Select [Name]

From [gizmos];

Properties

List Boxes for Input

List boxes like these prevent the user entering invalid data but do require the use of a mouse.

IMS2805 4.2.36

A combo box displays the list of current values but also allows the user input new values or to select current values from the keyboard

The combo box may be BOUND to a column in the data table from which the values will be displayed OR the possible values may be specified in the property sheet

Control Source NameRow Source Type Table/QueryRow Source gizmos

(table)

Properties

Control Source (unbound)Row Source Type Value ListRow Source gizmos;

widgets; doodads

Properties

Combo Boxes for Input

IMS2805 4.2.37

Option buttons, check boxes and toggle buttons can be used to provide a choice from a range of alternatives.

Usually option buttons are used to select only one choice while check boxes are used to select as many as apply.

Toggle buttons may be labelled with icons.

Typically these controls will be placed in a group so that the range of choices will be clear.

Other Choices for Input

IMS2805 4.2.38

Command buttons are used to carry out program steps such as saving a record, accessing another file, etc. As a result, there is often scope for using icons in place of, or in addition to, text.

Note the CD player metaphor in this example. Is it a good one?

On click [Event Procedure]

Properties

Command Buttons

IMS2805 4.2.39

In human speech, closure points enable the speaker to take a breath and the listener to respond. In writing, closure points are given by ends of paragraphs and chapters.

In human-computer dialog, closure points allow the user to take a short mental break. Where delays in processing occur, these cause least interruption at closure points.

5. Sentences and Paragraphs - Closure Points

IMS2805 4.2.40

In human-computer dialog the following situations are examples of possible closure points end of entering data into a gizmo end of a composite data item, such as

customer address end of a sub-transaction, such as one

item being ordered end of all transactions for this customer end of the day (or conversation period)

Sentences and Paragraphs - Closure Points

IMS2805 4.2.41

Closure points are obvious stages at which to check for errors in the data presented so far.

So ... use closure points as logical places to allow the user

to check and correct the data entered so far adjust the level of data validation to the level of

closure point remember - error messages interrupt the flow of the

dialog - attempt to minimise this interruption

Closure Points and Data Validation

IMS2805 4.2.42

Error messages may place the user in a different mode. In this example, the user is required to change from one

mode (the mode of the main process) to respond to the error (error handling mode).

Modeless feedback is preferable.

Error Messages

IMS2805 4.2.43

There are several ways of handling errors: Restrict the user’s opportunities for making

errors: get users to select values rather than type them

in (can use typing to select values though) don’t accept invalid formats (go back to start of

field and insist on correct format) - take care with this!

Approaches to Errors

IMS2805 4.2.44

Tell the user what is acceptable and validate the input give patterns for data entry fields show rules, examples next to the field

Accept everything the user enters and deal with it somehow (Cooper’s preference) save whatever the user enters offer alternatives

Approaches to Errors

IMS2805 4.2.45

Flow - a state of concentration; Techniques for inducing and maintaining

flow follow mental models direct, don’t discuss keep tools close at hand give modeless feedback don’t interrupt

Flow

IMS2805 4.2.46

menus drop-down menus are a common feature of GUI interfaces. Note the conventions for menu structures.

switchboards are easy to produce but simple switchboards force a hierarchical structure on the system.

command buttons allow jumps to other functions without returning to a “top level”.

button bars a collection of command buttons producing a version of the switchboard. Common on Web sites. Include content as well as navigation on the one page.

toolbars used for a range of purposes, they can include navigation command buttons as well.

tabbed folders pop up like a transient application.

6. Navigation Techniques

IMS2805 4.2.47

menus are used by novice and intermediate users, and by expert users for infrequently used functions;

every function must be available on a menu;• users don’t

understand hierarchical menus - avoid them - keep to single level menus;

• don’t put bang (immediate action) menu items on a top-level menu

Menus

IMS2805 4.2.48

menus as a training aid:

put icons on menus so that users learn what they mean by familiarity;

disable menu items that are not available;

Menus

IMS2805 4.2.49

TEXT-BASED SYSTEMMENU OF CHOICES----------------------------

1 BOOKINGS2 CUSTOMERS3 TOURS4 MAINTENANCE5 LOGOUT

• switchboards are used by novice and intermediate users, and when the hardware / software restricts navigation techniques (e.g. the Web)

• switchboards are the GUI equivalent to menu structures on text systems

• usually requires many levels of switchboard to cover all functions;• users will not remember the structure of the set of menus;

Switchboards

IMS2805 4.2.50

GUI design allows icons and explanation for each selection on a switchboard - use them!

switchboards can be useful as an overview of the full system;

however, switchboards often don’t allow other navigation so not very useful as a training aid.

Switchboards

IMS2805 4.2.51

command buttons are appropriate for all levels of users.

command buttons give users direct access to other parts of the system;

these jumps relieve users from having to remember a hierarchical structure for the system;

command buttons allow the flow of control to branch in two or more directions.

the example opposite (which has a number of design flaws) shows a command button to diverge to the customer maintenance function to add a new customer.

once that task is completed, control should return to this point so that the booking task can be continued from where we left off.

Command Buttons

IMS2805 4.2.52

An arrangement of command buttons can be used as a form of switchboard on a content page.

jump to view (and modify if rights permit) the types of teaching items available

jump to view (and modify if rights permit) the body systems covered by the teaching resources

jump to view (and modify if rights permit) the list of teaching items available

Button Bars

IMS2805 4.2.53

toolbars are an alternative to menus and provide more direct access to commonly used functions.

toolbars now contain some conventions for “standard” features such as save, cut, copy, paste - try to keep to these conventions;

toolbars group related items for ease of access and learning; where you need new tools, choose icons that are standard or fit

the metaphor you are using;what’s wrong with these toolbars?

Toolbars

IMS2805 4.2.54

a common technique for selecting from a relatively large number of options.

provides choice for a range of changes before returning to the original point.

acts like an application with transient posture?

not available in Access 2 (but is in Access 97).

Note the keyboard options here alter the behaviour of the Enter key etc.

Tabbed Folders

IMS2805 4.2.55

Experienced users often prefer to use a keyboard for all functions.

moving from keyboard to a mouse (and back) disrupts flow

experienced users will remember the keyboard combinations for the functions they use frequently

experienced users should be permitted to navigate from the keyboard as well.

provide a well-designed sequence of fields which can be accessed using the tab key

include command buttons in the tab sequence provide keyboard shortcuts for functions show keyboard shortcuts on menus etc as an aid to

learning.

Keyboard Navigation

IMS2805 4.2.56

Branching: users don’t remember where they are in the

structure of the system - don’t force them to try!

avoid nesting more than three layers deep; make sure users can return to where they

left offSequence:

direct users to the next in a chain of steps. less frequently used if forms are designed

to fit one screen.

Navigation Structures

IMS2805 4.2.57

Iteration: subforms (of various

styles) allow for repetition of basic operations such as selecting the teaching resources to borrow.

iteration within subforms reduces the need for multiple screens

Compare these dialog structures with the Structured Programming options for program flow: sequence, choice, iteration.

Navigation Structures

IMS2805 4.2.58

DO: give users ways of identifying

where they are in the system

allow users access to other functions from their current location

allow users to return to the same place without losing data

allow users to navigate from the keyboard

DON’T: expect users to remember

menu structures force users to backtrack to

the top menu

make users retype the same data again

force users to switch from keyboard to mouse and back

Navigation DOs and DON’Ts

IMS2805 4.2.59

The various options for data gizmos navigation approaches metaphors application posture

need to be selected and assembled into a coherent whole that permits a “conversation” between the user and the system.

7. Dialogue

IMS2805 4.2.60

1

handshake 2

identify required

items

3check

availability of

required items

4

record loan

registered borrowers

item catalogue

loans

5

close dialog

user ID

required items

itemavailability

due dates

confirmloan

N.B. internal data flows

unlabelled for simplicity

confirm loan requirements

Example - Loan of Teaching Resources

IMS2805 4.2.61

1. user is authorised for loans function.

2. identify items required. may mean looking up:

• item types• body systems• catalogue

3. check availability and reiterate if not available

4.close the dialog, confirming the loan (and save the data)Notes:

1. display items are distinguished from active items.2. sequence of steps continues down the page.

Example - Form for Loan