Designing Interface Components

Components

Navigation components - the user uses these components to give instructions.

Input – Components that are used to obtain input from a user.

Output - Are used to convey information to the user.

Navigation Components Command language instruction -requires

the user to type in a particular command such as cd in MSDOS.

There also exist a few natural language interfaces, e.g. help in MsWord.

Menus generally provide the user with a list of options.

Direct manipulation involves using a pointing device such as a mouse to enter commands by clicking on them, dropping and dragging objects, or resizing an object.

Menus Commands on menus should be clearly

labelled. Limit choices. If there are many similar choices on a

menu it may be a better idea to create a second level of menu.

Commands that cannot be used at a particular point should not be displayed or “grayed” out.

Menus The should be an undo option available

in case the user makes a mistake. If the user is about to perform an action

that cannot be undone, the user should be informed of this.

Ensure that the grammar order of instructions are consistent. Most systems specify this in an object-action order.

Choose titles that are unambiguous and reflect the action.

Menus Menus should be made “broad and

shallow” rather than “narrow and deep”. A menu should include a maximum of

eight items. It should take a minimum of two

keystrokes or mouse clicks from a menu to perform an action.

If a menu has to have more than eight items these should be broken into subgroups with each subgroup being separated by a horizontal line.

Menus A menu can have hotkeys, Crtl-F for find,

to enable users to quickly issue commands.

Like items should be placed together in menus. For example, MsWord groups actions according to File, Table, Window, etc.

Different types of menus: menu bar, drop-down menu, pop-up menu, tab menu, toolbar, image map.

Menu Bar Commands are listed at the top of

the screen. This is usually the main menu for

the system. Menu items are one word. Menu items are linked to other

menus that provide a list of actions to perform, i.e. menu items do not perform actions.

Drop-down Menu This forms the second level of menus when

an option is chosen from a menu bar. Menu items can be more than one word. Avoid abbreviations. Menu items represent actions or can

invoke another menu. This menu drops down below the previous

menu and disappears after one use.

Pop-up Menu

This is a floating menu that pops up and disappears after one use.

Used as a shortcut to commands for experienced users.

These are usually invoked by a right click.

Tab Menu This is a multipage menu with a tab for

each page. This is also a floating menu which

remains on the screen until closed. Is used to allow the user to change

several settings or perform a set of related commands.

Menu item names must be short so as to fit on the tab.

Try to have only one row of tabs.

Toolbar This is basically a menu of buttons

with each button containing an icon. This is generally used to provide

shortcut commands to existing menu options.

All buttons must be of the same size. All buttons with icons must have a

tool tip.

Image Map

This is a graphic image in which certain areas are linked to actions or other menus.

This is only used if the graphic adds meaning to the menu.

Icons Icons are context dependant. The icon must be appropriate for the chosen

task or concept. The icon must also be aesthetically pleasing.

Icons must be distinguishable from each other. Icons must be of the appropriate resolution. The icon must still look good in black and

white. When performing user evaluation icons must

be tested to determine whether they do convey the expected action.

Input Components Real time processing vs. batch. Data must be captured at its original source or

as close to this source as possible. They system should minimise the number of

keystrokes required by the user to enter information.

A system should not require the user to enter input that can be obtained via another means .

The user should not need to type information that can be chosen from a list of options.

If fields have values that can reoccur, the frequent value should be used as a default.

Different Inputs Text – is usually entered into fields in a

text box. Numbers - A number box allows for

numbers to be entered. The software may automatically format the numbers.

Selection box - Selection boxes provide a list of options from which the user can choose one.

Do not use a text box or a number box if a selection box can be used instead.

Types of Selection Boxes Check box - Presents a list of items, each with a

square box in front of them. The user can choose more than one option.

Radio button - Presents a list of mutually exclusive options, i.e. only one option can be chosen. There should be a maximum of six radio buttons in a list.

Combo box - Is a drop-down list box. The user can type or choose options from a list. This type of box is used for more experienced users.

Slider - Is a graphic scale with a sliding pointer to select a particular number on a continuous scale. The slider may also include a number box to allow the user to enter a particular number.

Checks to Validate Input

Completeness check Format check Range check Check digit check Consistency checks Database checks

Output Components

Output from a system provides the user with information.

Reports are often used to provide information.

Messages are used to provide feedback during use of the system.

Reports The developers must obtain an

understanding of how the reports generated will be used.

The amount of information provided must be managed, i.e. there must not be too much neither too little information.

In a tutoring system the developers must think carefully about the granularity of feedback.

Reports must not be bias in any way.

Types of Reports Detail report - A detailed report

providing the full information for the particular context.

Summary report - Provides a summary of the details.

Turnaround document - Outputs are reverted to inputs.

Graphs - Different charts, e.g. line, pie, bar, are used for analysis purposes.

Messages Message are used to inform users of

something, report errors or generally provide limited feedback.

Messages should be polite, concise and clear, i.e. unambiguous.

Do not use negatives in messages. The user should be required to

acknowledge the message in some way, e.g. click an OK button.

Use simple English and avoid jargon.

Types of Messages

Error messages Confirmation messages Acknowledgement messages Status/Delay messages Help messages