Introduction to Interface Design

(Established Design Principles)

Features of Modern Interface Design

 Modern interface designers now have a great deal of experience in the design and
implementation of effective Human Computer Interfaces.

 As a result there are a number of “good” or “accepted” design principles that have
become an integral part of most well designed interfaces.

 A brief examination of some of these is included below: -

Metaphors

 The users existing knowledge of the world around them can be exploited within
interface design by the use of metaphors.

 Using metaphors that involve concrete, familiar ideas that make the metaphor
understandable, allows the user to apply previous life expectations to the computer
environment. For example:-

a) People often use file folders to store paper documents in offices. Therefore, it makes
sense to store computer documents in computer-generated folders that look like file
folders.

b) The disposal of unwanted paper documents is often accomplished using a waste

paper bin. The use of a graphical waste paper bin to represent a means of deleting
unwanted files again acts as a meaningful metaphor.

See-and-Point

 By allowing the user to interact directly with the interface, selecting objects and
performing activities by using a pointing device, typically a mouse, a number of design
principles are realised:-

a) Minimising Memorisation

b) Giving Control to the User

c) A Natural and Easy to Learn Technique

d) Minimisation of possible Input Errors

Consistency

 Consistency within an interface, or set of program interfaces, allows the user to transfer
their knowledge and skills from one application to another.

 The application of consistency with a suitably designed interface results in:-

a) A reduction in the time taken for the user to feel at ease with the package.

b) Improvements in the users interface operating skills.

c) A dramatic reduction on the users short term memory load.

 Many standards have already been accepted and should be followed when designing an
interface. E.g. menus, icons, scroll bars etc.

What you see is what you get (WYSIWYG).

 Features of the application should not be hidden by the use of abstract commands. E.g.
Old DOS Syntax.

 The user should be able to see what they need, when they need it.

 Menus present a good example of WYSIWYG, they present a list of commands so that
the user can see the available choices instead of having to remember and type
command names.

 The user should be able to find all the available features of the application easily.

 When the user requires printed output from the system, there should be no significant
difference between what the user sees displayed on screen and the printed output
produced.

User Control. (User Centred Design)

 The user and not the system should initiate and control system actions.

 It should however be remembered that a balance should be established between

providing users with the capabilities they need to accomplish their required task and
preventing them from destroying any necessary data.

 For situations where a user may destroy data accidentally, an appropriate warning
message should be included. This protects the user but allows the user to remain in
control.
 Feedback and Dialog

 Clear and immediate feedback should always be provided for any action instigated by
the user.

 This goes hand in hand with increased user control, as the more control the user has, the
more feedback and dialogue the user needs in order retain control.

 Failure to provide feedback may cause the user discomfort and reduce the user control.

Forgiveness

 Users can be encouraged to explore their environment if forgiveness has been

engineered into the interface.

 Forgiveness means that the actions of the computer are generally reversible.
(Reversibility being yet another key interface design principle)

 The creation of safety nets on system interfaces is thus essential. E.g. ”Undo” functions.
(It also allows the user to feel more comfortable using the system)

 Users should always be warned before they initiate a task that will cause irretrievable
data loss.

Interface Text.

 The effective use of “typography” will ensure the textual content of any interface is
legible.

 Typography includes the characteristics of individual elements (fonts and styles) and
their groupings (typesetting techniques).

 The following guidelines are appropriate to most interface styles:-

a) Use a maximum of two fonts.

b) Generally, sans serif typefaces are recommended.
c) Include no more than 40 - 60 characters per line.
d) Text should flush right.
e) Numbers should flush left.
f) Avoid centred text in lists.
g) Avoid short justified lines of text.
h) Never centre numbers.

Buttons & Icons

 Buttons and Icons are often used on graphical user interfaces, there are however
guidelines that should normally be applied:-
 Button Design Guidelines: -

a) Maintain Consistency of Style and Order

b) Button labels should always use meaningful text and symbols.
c) Button size should fit the longest label.
d) Keep the number of buttons to six or fewer.
e) Buttons should be organised in-groups of related buttons.

Icon Design Guidelines: -

a) Use familiar objects and actions.

b) Simplify reflect object represented.
c) Create consistent shapes.
d) Attach a caption to assure intended meaning
e) Make sure the icon stands out from the background.

Use of Colour.

 Colour can easily be misused within an interface; this is because humans naturally attach
meaning to the colours used.

 If colours are selected purely for decorative purposes, it is likely that incorrect signals
will be sent to the user.

 Careful research should thus be undertaken into the correct use of colour for any
interface.

 Some useful guidelines include:-

a) Use a maximum of five, plus or minus two colours

b) Use the same colour for grouping related objects.
c) Use colour coding as appropriate. (E.g. Red: Stop, Error. Yellow: Warning, Caution.
Green: Go, Ready)
d) Avoid blue for text, thin lines and small shapes.
e) Avoid adjacent colours differing only in the amount of blue.
f) Avoid red and green in the periphery of large-scale displays.
g) Opposite colours go well together.
h) Consider the use of grey backgrounds, as colours look best on these.
i) Use warm colours to bring objects closer to the viewer.

Perceived Stability.

 As computers can introduce a new level of complexity to the user, a good interface will
attempt to create an environment that is understandable, familiar and predictable.
 A feeling of perceived stability is thus achieved by using consistent graphical elements
(menu bars, window boarders etc) which maintain the illusion of stability with the user,
throughout the execution of the application.

Modelessness

 Good Interface design will avoid the use of modes (e.g. where a particular application’s
mode restricts the users options to only one or two specific tasks, while the application
is in that mode)

 In contrast Modelessness allows the user to perform more than one operation at a time,
increasing control.

 This preserves the user’s ability to be in control of both system tasks and order of
operation.

Recommended Reading: -

 Dix, et al. (1993)”Human-Computer Interaction” Prentice Hall - Pages 117-145