Principles of User Interface Design

PARC principles – four basic principles do UI design:

• Proximity
• Alignment
• Repetition
• Contrast

Proximity
Group related items together – one cohesive, visual unit.
Non-related items should not be grouped together – causes confusion.
If more than 3 to 5 items on page, try to group elements. Don’t spread separate elements around corners or middle of page.
Check page visually, where does eye track when moving down the page?
Once elements are grouped, ensure sufficient white space between groups helping to define visual units.
 
Alignment
Every item should have a connection to something else on the page.
Align along “hard vertical edges”. E.g. using left or right alignment for text created a “hard vertical edge” as opposed to centring.
Centred alignment = more formal, sedated, ordinary and often boring look.
Don’t combine flush left and flush right on same page.
Combine flush left with good use of proximity.
Don’t combine centred headlines over flush left/right text. Set all headings etc. to the same vertical alignment.
Align image captions with strong line of photograph.
Alignment helps connect & unify elements on page, also creates sense of calm and security for the reader.
Contrast
If two items not exactly the same, make them different.
Strong contrast adds to interest and attractiveness.
Use in titles, headings & subheadings, and page segments. Helps user to identify what is going on.
Easiest way to contrast is with typeface. Can also use colours, spacing and textures etc.
Creates focal point(s). Use also alignment and proximity.
Don’t be afraid to make some items small to contrast with large items, or use blank space.
Don’t use typefaces, colours, graphics etc that are too similar. Make them different to contrast and add interest.
Repetition
Some design aspect repeats through entire piece of work. May be bold font, certain bullet, colour, format, shape etc.
Unifies all parts of design. Provides consistency & visual unity.
Helps control user’s eye and movement through page.
Organises page into visual units.
Adds visual interest – more interesting it is, the more likely it is to be read.