Your SlideShare is downloading. ×
  • Like
Principles of Interface Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Principles of Interface Design


Principles of Interface Design

Principles of Interface Design

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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:
  • 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