Transcript Slide 1

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, dropdown 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