LECTURE 18 16/11/15

MAKING THE INTERFACE CONSISTENT

Consistency is one way to develop and reinforce the users conceptual model of applications and give the user the feeling of control over the application, since the user can predict the behaviour of the system

User interfaces should be consistent throughout the application

PURPOSE OF A USER INTERFACE

Each window in a user interface should server a clear, specific purpose

Data Entry Windows: Provide access to data that users can retrieve, display, and change in the application

Dialog Boxes: Display status information or ask users to supply information or make a decision before continuing with a task (a typical feature is an OK button)

PURPOSE OF A USER INTERFACE Application Windows (Main Windows): Contain an entire application that users can launch (container of application components)

In developing a model of an application you should be able to document the purpose of a window within the application

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS

Consider the following issues: In general, what kind of information will users work with and why? Do users need access to all data in a DB table or a subset? Order in which to display information (alphabetically, chronologically, or

numerically)? Also, identify the tasks the users need to perform on this?

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS

You can provide menus, command buttons, etc. that users choose to initiate tasks

Controls can be placed anywhere on a window

However, the layout chosen determines how successfully users can enter data using the form

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS

Consider the following:

Use existing paper-based or computerised screens as the starting point for the design (no radical changes, unless requested)

Amount of information to fit on the screen, use a main window and optional smaller windows or a main window with multiple views (users typically are more productive when a screen is not cluttered)

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS

Users scan the screen from top-left to bottom-right. In general, put required or frequently entered information toward the top and left side of the form, entering optional or seldom entered information toward the bottom and right side

When information is positioned vertically, align fields at their left edges (this usually makes it easier for the user to scan the information)

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS

Text labels are usually left aligned and placed above or to the left of the areas to which they apply

Users expect to enter (type) information from left to right and top to bottom and tabbing from one control to another in sequence with data entry

Emphasise groupings of related information displayed on the form, using visual effects

CancelOK

First Name: Last Name:

Address:

City:

State: Zip Code:

Frequentlyenteredinformation Seldom

enteredinformation

Label

Label

Possible locations for text

LabelsPossible location for text labels

GUIDELINES FOR DESIGNING DIALOG BOXES

A dialog box provides an exchange of information or a dialog between the user and the application

If the dialog box is for an error message, use the following guidelines: Error message should be positive For example, instead of displaying “You have typed an illegal date format”

display this message “Enter date format mm/dd/yyyy”

GUIDELINES FOR DESIGNING DIALOG BOXES

Error message should be constructive

For example, avoid messages such as “You should know better! Use the OK button”; instead display “Press the Undo button and try again” (messages that make the users feel in control of the system)

Message should be brief and meaningful (displaying error descriptions as opposed to error numbers)

GUIDELINES FOR THE COMMAND BUTTONS LAYOUT

Arrange the command buttons either along the upper-right border of the form or dialog box or lined up across the bottom of the form or dialog box

Positioning buttons on the left border is very popular in Web interfaces

GUIDELINES FOR THE COMMAND BUTTONS LAYOUT

For easy readability, make buttons a consistent length

Consistent visual and operational styles will allow users to transfer their knowledge and skills more easily

GUIDELINES FOR THE COMMAND BUTTONS LAYOUT

CancelOK

First Name: Last Name:

Address:

City:

State: Zip Code:

Help

Help

OK

Cancel

Or

Default Button

GUIDELINES FOR DESIGNING APPLICATION WINDOWS

A typical application window consists of a frame (or border) which defines its extent: title bar scroll bars menu bars toolbars status bars

GUIDELINES FOR USING COLOURS

For all objects on a window, use colours to add visual appeal to the form Consider the hardware

Figure out a colour scheme

Use identical or similar colours to indicate related information

Use different colours to distinguish groups of information from each other

GUIDELINES FOR USING FONTS

Consistency is the key to an effective use of fonts and colour in your interface

Use commonly installed fonts, not specialized fonts that users might not have on their machines

Most commercial applications use 12-point system font for menus and 10-point system font in dialog boxes

GUIDELINES FOR USING FONTS

These are fairly safe choices for most purposes

The most practical font is Times New Roman

Using too many font styles, sizes and colours can be visually distracting and should be avoided

PROTOTYPING THE USER INTERFACE

Rapid prototyping encourages the incremental development approach, “grow, don’t build”

Prototyping involves iteration

It is highly desirable to prepare a prototype of the user interface during the analysis, to better understand the system requirements

PROTOTYPING THE USER INTERFACE

Visual and rapid prototyping is a valuable asset in many ways: [1] It provides an effective tool for communicating the design [2] It can help you define task flow and better visualise the design [3] It provides a low-cost vehicle for getting user input on a design (this is

particularly useful early in the design process)

PROTOTYPING THE USER INTERFACE: THREE GENERAL STEPS

1.Create the user interface objects visually (such as buttons, data entry fields)

2.Link or assign the appropriate behaviours or actions to these user interface objects and their events

3.Test, debug, then add more by going back to step 1

Create userinterfacecontrols

Associate actionsto the user

interface controlsand their events

Test/ debug

Enter title here

OKCancel

Create the forms and controls

Enter title here

OKCancel

Add actions

Enter title here

OKCancel

Test the UIDone

MAKE USERS FEEL IN CHARGE

Instead of pushing them into a certain direction – try to understand what they need

It is reflected in the language used

Instead of using leading phrases like, “We could do this ..." or "It would be easier if we ..."

Choose phrases that give the user the feeling that he/she is in charge:

“Do you think that if we did ... it would make it easier for the users?”

“Do users ever complain about ...? “We could add ... to make it easier”