Principles of Interface Principles of Interface DesignDesign

PerceptionPerception►Perceptions vary between the developer Perceptions vary between the developer

and the user. and the user. ►The user may not be aware of the fine The user may not be aware of the fine

details in a GUI, such as the importance details in a GUI, such as the importance of colour or the positioning of icons. of colour or the positioning of icons.

►Likewise the developer may not be fully Likewise the developer may not be fully aware of the users capabilities, wants or aware of the users capabilities, wants or needs. needs.

ColourColour►The use of colour is extremely The use of colour is extremely

important in the design of GUIs. important in the design of GUIs. ►Microsoft Office uses grey as the Microsoft Office uses grey as the

predominant colour, blue for title bars predominant colour, blue for title bars and drop down menus. and drop down menus.

►Many users feel this is boring, however Many users feel this is boring, however if black and red were used it would soon if black and red were used it would soon become uncomfortable on the eye. become uncomfortable on the eye.

►Colours affect different people in Colours affect different people in different ways, some find yellow easier different ways, some find yellow easier to read, others find it fuzzy. to read, others find it fuzzy.

►Users with dyslexia may be affected Users with dyslexia may be affected by colour in different ways, as would by colour in different ways, as would users who are colour blind users who are colour blind

►GUIs with 3D effect are based on the GUIs with 3D effect are based on the Trichromatic system (the combination Trichromatic system (the combination of the 3 colours that are basis of 3D of the 3 colours that are basis of 3D vision: red, blue and green)vision: red, blue and green)

LuminanceLuminance►The three colours of the trichromatic The three colours of the trichromatic

system are detected by three different system are detected by three different types of cells on the retina of the eye types of cells on the retina of the eye (receptors).(receptors).

►These signals are opponent colour These signals are opponent colour channels because they relay information channels because they relay information about opposite colours. about opposite colours.

►The theory states there is a hierarchy of The theory states there is a hierarchy of luminance, red-green, yellow-blue, luminance, red-green, yellow-blue, black-white, early colour parings cannot black-white, early colour parings cannot effectively display detail.effectively display detail.

Why is yellow text on a white background difficult to read

Where as blue on a white background is not.

Pop out effectPop out effectThis is used where there are a lot of This is used where there are a lot of

symbols or imagery and one is required symbols or imagery and one is required to stand out. This can be done by: to stand out. This can be done by:

►Aligning differentlyAligning differently►Colouring differentlyColouring differently►Adjusting to a different shape. Adjusting to a different shape.

Preattentive Processing TheoryPreattentive Processing Theory

PatternPattern►Microsoft uses a template for its dialog boxes. It Microsoft uses a template for its dialog boxes. It

provides consistency and evenness (symmetry)provides consistency and evenness (symmetry)► It aids he way the user relates to the interface, It aids he way the user relates to the interface,

providing user friendliness, consistency and providing user friendliness, consistency and ease of use (ease of use (connectedness)connectedness). .

► Consistency helps the user to feel comfortable Consistency helps the user to feel comfortable with what happens next (save as – dialog box – with what happens next (save as – dialog box – file name – location) – Home button in the same file name – location) – Home button in the same place, links to websites underlined in blue, etc.place, links to websites underlined in blue, etc.

Gestalt LawsGestalt LawsGestalt laws have been formulated to describe Gestalt laws have been formulated to describe

our pattern perception and form rules for our our pattern perception and form rules for our designs:designs:

ProximityProximity: we view things which are close : we view things which are close together as a group.together as a group.

ContinuityContinuity: smooth continuous lines are more : smooth continuous lines are more easily interpreted than rapidly changing lines.easily interpreted than rapidly changing lines.

SymmetrySymmetry: we see symmetrical shapes easier : we see symmetrical shapes easier than unsymmetrical shapes. than unsymmetrical shapes.

SimilaritySimilarity: we see similar objects as a group, : we see similar objects as a group, dissimilar objects tend to be viewed as dissimilar objects tend to be viewed as individuals.individuals.

PositioningPositioningPositioning and layering are vital. If not Positioning and layering are vital. If not

parts of the GUI may appear behind the parts of the GUI may appear behind the main screen and the user may not be main screen and the user may not be able to access a full range of able to access a full range of commands. commands.

Objects need to placed in a hierarchical Objects need to placed in a hierarchical system. If images are sitting behind or system. If images are sitting behind or in front of other images then the entire in front of other images then the entire interface will not be visible. interface will not be visible.