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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Interface Design

Interface Design

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

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

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

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