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