1. Interface Design
Interface Design
“Design is the successive application of constraints until only a unique product is left.”
Richard Pew
Human Factor & Industrial Design

2. Interface Design
Interface interaction requires you to be an active participant.
You are constantly asking for information and supplying information.
Good or bad design can determine whether or not the interaction is successful.

3. Interface Design
Points to keep in mind when designing an interactive interface.
Target Audience
Simplicity
Hierarchy
Consistency
Clarity

4. Interface Design
Know your audience
Different audiences, expect different presentations or information
User Profiling
Think like a user, not a developer

5. Understanding what the user is looking for:
Interface Design
Understanding what the user is looking for:
User
Content
Content is the goal.

6. Grids are an essential tool for graphical design
Interface Design
Grids are an essential tool for graphical design
Other visual design concepts
Consistency
Relationships
Organization
Legibility and readability
Navigational cues
Appropriate imagery
Familiar idioms

7. Interface Design
Simplicity
Users should find what they are looking for without distraction

8. Interface Design
Hierarchy
Knowing your target audience will allow you to determine what is important to the end user.
Primary information is always placed first
Placement, color, font size can be used to determine priority

9. Interface Design
Consistency
Layout can help users navigate efficiently
Users like familiarity
Order of navigational cues follow a user’s predetermination of sequences

10. Interface Design
Clarity
Use metaphors that match the knowledge of the target audience
Label sections properly

11. Interface Design
Apply Design Principals
Rule of Thirds
Proximity
Alignment
Repetition
Contrast

12. Interface Design
Rule of Thirds
Use of a grid
Grid lines to locate window components
Align related components
Layout

13. Interface Design Format of variable contents Widget to widget spacing
Message text in Arial 14, left adjusted
Logo
Window to widget spacing
footer
info
Fixed components
Adapted from Saul Greenberg

14. Interface Design
Proximity
group related items together
basic purpose of proximity is to organize
creates a relationship among elements
separates unrelated ones

15. Interface Design Bad Good Good Mmmm: Mmmm: Mmmm:
Adapted from Saul Greenberg

16. Interface Design
Alignment
Nothing should be placed on the page arbitrarily
Every item should have a visual connection with something else on the page
Creates a stronger cohesive unit
Unifies and organizes the page
Creates a visual flow

17. Interface Design

18. Interface Design

19. Interface Design
Repetition
Repeat some aspect of the design throughout the entire interface
It can be anything that a reader will visually recognize.
Unifies and adds visual interest

20. Interface Design
Contrast
Contrast is created when two elements are different
If they are not different, you create conflict
Creates an interest on the page
Organizes information
Brings out dominant elements

21. Interface Design
Things to note:
Be thoughtful of the real estate:
avoid filling screen with content
use “white space” around text & images
Less is more
Know when to stop – don’t over design

22. Interface Design
Review - Apply Design Principals
Rule of Thirds
Proximity
Alignment
Repetition
Contrast