Style in design Or how to create aesthetically pleasant graphic - - PDF document

1

HCI – MMI 8

Style in design

Stig Kjær Andersen (HST) Spring 2006

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Or how to create aesthetically pleasant graphic design for user interfaces

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

What is style…..

Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher in doubtful or disputed matters to obtain consistency. Aesthetic, Informal: Conforming to accepted notions of good taste.

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

telephone

Life Style ? Enhanced functionality?

Which design criteria have been used?

Aesthetics? Technical constrains?

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

To day’s question

What is art and what is simple handicraft when designing a pleasant and aesthetic user interface? What are the secrets of good visual design and how to apply them to the design of graphical user interface?

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

1996

2

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

2003

Different styles?

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

2006

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

What's usable? What's pleasant? What’s good taste or aesthetic? What's for the eyes? What’s for the brain?

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

To day’s literature

Kevin Mullet and Darrell Sano:

Designing Visual Interfaces Trade Secrets for Elegant Interfaces,

• Conf. comp. HCI ´94 Boston Mass.

Designing Visual Interfaces – Communication Oriented Techniques – Sun microsystems, inc. isbn 0-13-303389-9

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Basic in communicating visually:

• 1. Based on visual language
• 2. Having visual variables
• 3. Given a perceptual organization

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Three Key Issues in Visual Design

Simplicity and elegance

Unity

Scale, contrast and proportion

Visual variables

Organization and visual structure

Perceptual organization

3

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Simplicity and elegance

In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away

• Antoine de Saint Exupery

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Simplicity and elegance

Principles

Unity

To get a coherent whole

Refinement

Focus on essential aspects

Fitness

Balance between capacity and complexity

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Unity – get a coherent whole

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Refinement – focus on essential aspects

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Balance between capacity and complexity

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Clutter and visual noise

4

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Interference between competing elements

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Literal translation

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Simplicity and elegance Step 1: reduction

Reducing a design to its essence:

Determine the essential qualities (a list

• f adjectives) that should be conveyed

by the design along with formal elements (labels, color,control,pattern) Critical examine each element – why is it needed Try to remove it anyway!!

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Can you reduce it further?

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Simplicity and elegance Step 2: regularization

Regularizing the elements of the design

Use regular geometric form, simple contours Limit variation in typography to few size and families Critical elements are not regularized

5

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Regularization and ..

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Uniform spacing.

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Simplicity and elegance Step 3: leverage

Combining elements for leverage

Review the functional role played by each element Look for situations where multiple elements are (partially) filling same role Could an elements role could be filled by an adjacent component, possible after minor modifications? Combine redundant elements into a single simpler unit or replace the lot with a common higher-level idiom

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Combination of elements for leverage

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Leverage

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Simplicity and elegance

Summary of the principles

Reduction

Design to it essence Regularization Focus on essential aspects Leverage Combining elements

6

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Clips

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Visual variable

Scale, Contrast and Proportion

• they are interrelated in visual

effect!

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Proportion

Can be used to express:

Differentiation Emphasis Activity Interest

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale Contrast Proportion

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Proportion

• Theory: Visual variables

Is the fundamental unit of visual communication:

Associative/dissociative Selective perception to communicate Ordered perception Quantitative perception

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Examples of visual vars.

7

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Proportion

Can support

Clarity Harmony Activity Restraint

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Proportion – Examples

Restrained by visual coding Shape coding for clarity by contrast:

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

(Dis)harmony by proportion!

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Proportion – How to get the visual effect: Establish layering Sharpening visually Integration figure and ground

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Proportion – method: Layering

Establish perceptual layers

Group items Rank them Use perceptual variables to establish effect Maximize the perceptual effect Use the squint test

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Layering:

8

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Property – method: Sharpening

Sharpening visual distinctions

Identify the ranking that needs to be established across the groups Determine the range of variation (value, size color) and use as much as possible Use logarithmic rather than linear scaling – double each successive level Use the squint test

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Optical focus

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Grouping..

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Scale, Contrast and Property – method: Integration

Integrating figure and ground

Determine the over all size of the figure/ground combination Equalize the visual weight Provide enough space around the margins

• f the figure to eliminate visual tensions

Position the figure correctly within the ground

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Grouping

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

9

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Layering, sharpening, integration

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Organization and visual structure

Perceptual organization

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Organization and visual structure – principles

Grouping Hierarchy Relationship Balance

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Visual completion/ambiguity

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Visual organization and structures

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Organization and visual structure – errors

Random layout Conflicting symmetries Ambiguous internal relationships Aligning labels but not controls False structure Excessive display density

10

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Organization and visual structure –

Method: Using symmetry to ensure balance

Identify the axis which along which symmetry will be established Symmetry about the vertical axis is more prevalent in human perception Centre the information on the axis of symmetry by carefully balancing it The axis of symmetry is itself centred within the overall display context

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Symmetry and alignment

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Organization and visual structure –

Method: Using Alignment to establish visual relationships

Identify the major boundaries in and look for ways to enhance them by moving additional elements into alignment Look for elements and margins – that nearly aligns – and bring them into alignment by altering size,positions of one Look for free standing elements and make sure they align with something else in the display If an element cannot be related to anything else – try to place the element in a position corresponding to a regular division of the space

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Alignment

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Optical spacing

11

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Organization and visual structure –

Method: Optical adjustment for human vision Determine the true position of alignment. Translate it into a value corresponding to rectangular element Extend elements beyond the margin according to the sharpness of their adjacent angle Verify with a close-up

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Organization and visual structure –

Method: Shaping the display with negative space – spatial segregation

Review the organisation of information into a prioritised set of chunks of manageable size Ensure spatial separation of independent units of information by adding extra white space Determine which elements require additional visual emphasis Increase the with space surrounding critical elements Remember white space is not wasted space

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

White space..

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

To day’s message…

Simplicity and elegance

Unity

Scale, contrast and proportion

Visual variables

Organization and visual structure

Perceptual organization

Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk

Have a nice weekend..