Principles of Interface Design

1. Fundamental design principles
of interface design
Understanding the fundamental design principles of interface design

2. PERCEPTION
• Users are often unaware of the small details that
form interface design.
• Elements such as colour, positioning and
appearance are often overlooked.
• Differences in perception often extend beyond the
end user; the client may not always be able to fully
encapsulate the requirements of everyone using the
system.

3. Colour
• Colour is a vital element in interface design. For
example, Microsoft Office predominantly uses a mix
of grey and blue in the interface design.
• Many feel the grey fails to show off the
interface, and looks dull and lifeless. So…
• TASK: Why does Microsoft Office use these
colours?

4. Why do microsoft use grey
and blue?
• Alternative colour schemes can be visually
distracting.
• Alternativecolour schemes can be uncomfortable on
the eyes.
• Those with medical conditions may have difficulty
visualising the interface. E.g. colour blindness
• Word blindness and dyslexia may be exacerbated
by excess colour.
• It keeps consistency over the interface; not just
within Office, but the operating system as a whole.

5. EYE SIGHT
• When light enters they eye it
passes through the cornea, the
pupil and the lens, which focuses it
(upside down) onto the retina at
the back of the eye.
• Here, light sensitive rods and
cones connected to the optic nerve
respond to various wavelengths of
light.
• The cones only react to high light
intensities and only to a limited
wavelength range.
• The rods and cones are receptive
to red, green and blue.

6. Trichromatic System
• As red, green and blue are the basis of three
dimensional vision, a system of colour has built up
around them, called the trichromatic system.
• LCD monitors use red, green and blue phosphors to
produce the greatest range of colour sensation
possible.
• Eachcolour signal is processed into different
channels by the brain. These have been found to be
‘red-green’, ‘yellow-blue’ and ‘black-white’.
This is the basis for a concept called Luminance

7. Luminance
• There is a hierarchy of luminance. Essentially, the
red/green pairing is most difficult to display
effectively, followed by yellow/blue, then the high-
contrast black/white.
• This leads to a fundamental design rule: for best
detail we should always use luminance contrasts.
• TASK: Open Microsoft Word and test this theory for
yourself. Adjust the Foreground and Background
colour for your text; what looks best and what’s more
difficult to see?

8. Pop out Effect
• When you have a display with an assortment of
patterns and symbols, it can be difficult to make
specific items stand out.
• Therefore, we can use a variety of tricks to help
identify unique elements including, realigning
objects, colouring them differently and adjusting
shapes. This is called preattentive processing.
• DEMO:
http://www.youtube.com/watch?v=UFNzATczkDU

9. POP OUT Effect
• We can use luminance tricks (thanks to the
trichromatic system) to give the impression of a
wider range and depth of colours.
• However, be warned it can be irritating and cause
adverse effects. Imagine being bombarded with day-
glo yellow all day…
• In order for your GUIs to be considered professional
and stylish, you must avoid the over-use of colour
extremes.

10. Pattern
• This doesn’t relate to a decorative ‘pattern’ on the
screen, but rather a ‘pattern’ of consistency and
evenness.
• It helps the way the user relates to the interface,
making it more friendly and less threatening (and
thus easier to learn).
• TASK: What patterns feature in the Windows
operating system? Think about what happens after
you click ‘Save As’, for example…

11. pattern
A set of rules, originally called the Gestalt laws, has
been created to describe our pattern perception and
approach to design rules.
• Proximity
• Continuity
• Symmetry
• Similarity
Gestalt is a psychology term which means "unified
whole"

12. proximity
• We view things that are close together as relating to
one another.
• For example, look at the two images. Without
proximity, they appear to be nine distinct boxes.
Together they have the appearance of being a
group.

13. Continuity
• Smooth continuous lines are preferred over rapidly
changing ones. For example, we perceive the image
below as two crossed lines instead of 4 lines
meeting at the center.

14. symmetry
• We interpret symmetrical shapes more easily than
asymmetrical ones. The whole of a figure is
perceived rather than the individual parts which
make up the figure.

15. Similarity
• We see similar objects as a group and vice versa.
For example, below we can see alternating groups
of dots.

16. Pattern
There are similar laws that relate to other common
groupings and configurations:
• Fate
• Region
• Connected

17. Fate
• We perceive objects that move together as a group

18. Region
• Elements tend to be grouped together if they are
located within the same closed region.

19. Connected
• We perceive objects connected by continuous lines
as being related to one another.

20. objects
• It’s important for GUI objects to have a hierarchy;
without them, it appears as if elements are
incomplete or missing.
• For example, which of these windows is ‘on top’?

21. Objects
• Similarly, if the GUI appears too far across the
screen, it may obscure or hide other features on the
page that need to remain visible.
• You need to ensure that GUI objects appear in
order; for instance, you don’t want your options
menu appearing underneath the current window, or
it may cause confusion.

22. GEONS
• Geons are simple two-dimensional shapes that are
easily recognisable when rendered on screen.
That’s easy!
It’s a cube!

23. GEONS
• By contrast 3D images may be misinterpreted due to
a lack of perception from the user.
What’s that?
I don’t have a
clue

24. sources
• ‘HCI Models, Theories, and Frameworks: Toward
a Multidisciplinary Science’ By John M. Carroll
• ‘BTEC Level 3 National IT Student Book 2’ By
Karen Anderson et al.
• ‘The Gestalt Principles’ By Spokane Falls
Community College