Fundamental design principles
of interface design
Understanding the fundamental design principles of interface design
PERCEPTION
• Users are often unaware of the small details that
form interface design.
• Elements such as colour, positioni...
Colour
• Colour is a vital element in interface design. For
example, Microsoft Office predominantly uses a mix
of grey and...
Why do microsoft use grey
and blue?
• Alternative colour schemes can be visually
distracting.
• Alternativecolour schemes ...
EYE SIGHT
• When light enters they eye it
passes through the cornea, the
pupil and the lens, which focuses it
(upside down...
Trichromatic System
• As red, green and blue are the basis of three
dimensional vision, a system of colour has built up
ar...
Luminance
• There is a hierarchy of luminance. Essentially, the
red/green pairing is most difficult to display
effectively...
Pop out Effect
• When you have a display with an assortment of
patterns and symbols, it can be difficult to make
specific ...
POP OUT Effect
• We can use luminance tricks (thanks to the
trichromatic system) to give the impression of a
wider range a...
Pattern
• This doesn’t relate to a decorative ‘pattern’ on the
screen, but rather a ‘pattern’ of consistency and
evenness....
pattern
A set of rules, originally called the Gestalt laws, has
been created to describe our pattern perception and
approa...
proximity
• We view things that are close together as relating to
one another.
• For example, look at the two images. With...
Continuity
• Smooth continuous lines are preferred over rapidly
changing ones. For example, we perceive the image
below as...
symmetry
• We interpret symmetrical shapes more easily than
asymmetrical ones. The whole of a figure is
perceived rather t...
Similarity
• We see similar objects as a group and vice versa.
For example, below we can see alternating groups
of dots.
Pattern
There are similar laws that relate to other common
groupings and configurations:
• Fate
• Region
• Connected
Fate
• We perceive objects that move together as a group
Region
• Elements tend to be grouped together if they are
located within the same closed region.
Connected
• We perceive objects connected by continuous lines
as being related to one another.
objects
• It’s important for GUI objects to have a hierarchy;
without them, it appears as if elements are
incomplete or mi...
Objects
• Similarly, if the GUI appears too far across the
screen, it may obscure or hide other features on the
page that ...
GEONS
• Geons are simple two-dimensional shapes that are
easily recognisable when rendered on screen.
That’s easy!
It’s a ...
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...
sources
• ‘HCI Models, Theories, and Frameworks: Toward
a Multidisciplinary Science’ By John M. Carroll
• ‘BTEC Level 3 Na...
Upcoming SlideShare
Loading in...5
×

Principles of Interface Design

633

Published on

Principles of Interface Design

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
633
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Principles of Interface Design

  1. 1. Fundamental design principles of interface design Understanding the fundamental design principles of interface design
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Similarity • We see similar objects as a group and vice versa. For example, below we can see alternating groups of dots.
  16. 16. Pattern There are similar laws that relate to other common groupings and configurations: • Fate • Region • Connected
  17. 17. Fate • We perceive objects that move together as a group
  18. 18. Region • Elements tend to be grouped together if they are located within the same closed region.
  19. 19. Connected • We perceive objects connected by continuous lines as being related to one another.
  20. 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. 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. 22. GEONS • Geons are simple two-dimensional shapes that are easily recognisable when rendered on screen. That’s easy! It’s a cube!
  23. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×