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

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?

Why do microsoft use grey and blue?

• Alternative colour schemes can be visually distracting.

• Alternative colour 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.

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.

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.

• Each colour 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

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?

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

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.

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…

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"

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.

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.

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.

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 missing.

• For example, which of these windows is ‘on top’?

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.

GEONS

• Geons are simple two-dimensional shapes that are easily recognisable when rendered on screen.

That’s easy! It’s a

cube!

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

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