Interaction Design

The process of identifying design solutions and creating prototype user interfaces.

Design Patterns

The designer’s dilemma - users want all the features and options to handle all of their special needs. Users want simplicity; they find it hard to choose between lots of options.

The solution: Progressive disclosure, Initially show users only a few of the most important options. Consequently offer a larger set of specialised options upon request.

Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity. 

Progressive Disclosure

An interaction design technique that helps maintain the focus of a user’s attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum information required for the task at hand.

2 rules of Progressive Disclosure

1. Get the right split between initial and secondary features
2. Make it obvious how to progress from the primary to the secondary disclosure levels

Terminology

Models

A mismatch between the mental model and the conceptual model can lead to usability issues. The benefit of understanding peoples’ mental models is that it helps you organise and structure information and displays.

Mental Model

The internal, mental, representation that a user hasabout how a system works.

Conceptual Model

A conceptual model is the way the designer of a system has planned the system to work.

Affordance

The properties of an object that suggests to people how the object can be interacted with.

Signifier

The aspects of an object that a designer uses to indicate potential and intended affordances of an object.

Rules

Contrast

The purpose of contrast is to organise the page and make it more interesting. If two items are not exactly the same, then make them different… really different. Determine what you want the focus to be and use contrast to create that focus.

Alignment

The purpose of alignment is to unify and organise the screen. Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something on page.

Repetition

The purpose of repetition is to create consistency and to add visual interest. Repeat visual elements throughout the UI, such as fonts, sizes, colours, shapes, textures, spatial relationships, line thicknesses, graphic concepts, etc.

Proximity

The purpose of proximity is to organise and group the various parts of the UI.
All related items should be chunked or grouped together so that the related items are made to appear as cohesive groups