i213-9

8/10/2019 i213-9

1/43

Graphic Design

Professor: Tapan Parikh ([email protected])

TA: Eun Kyoung Choe ([email protected])

Lecture #9 - February 21st, 2008

213: User Interface Design and Development
mailto:[email protected]:[email protected]:[email protected]:[email protected]

8/10/2019 i213-9

2/43

Graphic Design

Modern design implies a rational,functional, information-orientedperspective

Design implies a balance betweenfunctional and aesthetic goals

A clear visual organization is essentialfor effective communication

Source: Mullet and Sano, Designing Visual Interfaces

8/10/2019 i213-9

3/43

8/10/2019 i213-9

4/43

8/10/2019 i213-9

5/43

Principles of Graphic Design

Simplicity

Contrast

White Space

Balance

Alignment

Adapted from Rob Miller

8/10/2019 i213-9

6/43

Simplicity

Perfection is achieved not when there is

nothing more to add, but when there is

nothing left to take away.

-- Antoine de St-Exupery

8/10/2019 i213-9

7/43

Simple Designs Are

Approachable - Do not intimidate theuser

Recognizable - Can be more easily

recognized and remembered

Immediate - Provide immediate cuesabout what to do

Usable - Reduce the likelihood ofconfusion or error

8/10/2019 i213-9

8/43

8/10/2019 i213-9

9/43

8/10/2019 i213-9

10/43

8/10/2019 i213-9

11/43

Enemies of Simplicity

Clutter

Overly literal translation

Gratuitous use of 3D

Excessive detail

Source: General Magic

8/10/2019 i213-9

12/43

Ways to Achieve Simplicity

Reduction

Regularization

Combination


8/10/2019 i213-9

13/43

Reduce a Design to its Essence

8/10/2019 i213-9

14/43

Reducing a Design

Determine the essential elementsExamine each element, and ask yourself

whether its needed

If it isnt, then remove it

Even if it is, try to remove it, and see ifthe design remains coherent


8/10/2019 i213-9

15/43

Regularize the Components

Repeat elements according to adiscernible rule principle or rhythm

Limit inessential variation

Source: Mullet and Sano, Designing Visual Interfaces Adapted from Rob Miller

8/10/2019 i213-9

16/43

Regularizing a Design

Use regular geometric forms and mutedcolors wherever possible

If similar forms are required, make them

as close to indentical as possibleLimit variation in font size, type

Make sure elements intendedto standout are not regularized


8/10/2019 i213-9

17/43

Combine Components

Find ways for screen components to playmultiple roles clearly and succinctly


title bar

scrollbar thumb

help prompt

8/10/2019 i213-9

18/43

Combining Components

Review the role played by each elementin the design

Look for places where multiple

components are doing the same thingSee whether an elements role could be

performed by an adjacent component,

possibly with some minor changes

Combine redundant elements into asingle, simpler unit


8/10/2019 i213-9

19/43

Contrast

Information consists of differences that

make a difference -Edward Tufte

There are many ways to encodeinformation along visual dimensions


sizevalue hue orientationtexture shape position

8/10/2019 i213-9

20/43

Using Contrast

Differentiation - Distinguish relevantform from background

Emphasis - Emphasize certain aspects of

the presentationActivity - Guide the users eye in a

predictable way

Interest - Add excitement byjuxtaposing very different elements


8/10/2019 i213-9

21/43

Scale

Comparisons that a visual dimension affords

Nominal - Decide if two values are equal

All dimensions

Ordered - Decide relative ordering

Position, size, value, texture granularity

Not orientation, hue, shape

Quantitative - Decide relative difference Position, size

Not value, texture, orientation, shape, hue


8/10/2019 i213-9

22/43

Scale

Nominal - Decide if two values are equalOrdered - Decide relative ordering

Quantitative - Decide relative difference


sizevalue hue orientationtexture shape position


8/10/2019 i213-9

23/43

Length

Length implies how much variation adimension can support

Shape is very long - infinite variety

Position is long and fine-grained (butmay be limited by screen size)

Orientation is very short (4 alternatives)

Others are in between (7-10alternatives)


8/10/2019 i213-9

24/43

Selective Perception

Can observer quickly focus on one value,excluding all the others?

Example: Find all the bluemarbles

Selective: position, size, orientation,hue, value, texture

Not selective: shape


8/10/2019 i213-9

25/43

N

N

N N

N

N

N

NN

N

NZ

Z

Z

Z

Z

Z

ZZ

Z

K

KK

K

KK

K

K

KK

K

MM

M

M M

M

M

M

M

M

M

Can you find all the green letters?


8/10/2019 i213-9

26/43

N

N

N N

N

N

N

NN

N

NZ

Z

Z

Z

Z

Z

ZZ

Z

K

KK

K

KK

K

K

KK

K

MM

M

M M

M

M

M

M

M

M

Can you find all the Ms?


K

8/10/2019 i213-9

27/43

Associative Perception

Can variable be ignored when more concernedwith other variables?

Associative: position, shape, orientation, hue,texture

Not associative: size, value

Small size and value interferes with our ability toperceive position, shape, orientation, hue,

texture

Can you find the green K on this page?


8/10/2019 i213-9

28/43

Using Contrast Effectively


VS.

8/10/2019 i213-9

29/43

The Squint Test

Close one eye, and squint with the otherWhat do you see? That is the structure that matters


8/10/2019 i213-9

30/43

Using Contrast Effectively

Can you distinguish the labels fromeditable fields?

Use of color, text position does not

provide sufficient contrast

Source: Interface Hall of Shame Adapted from Rob Miller

8/10/2019 i213-9

31/43

White Space

Use white space to group elements,instead of explicit lines

Make sure to leave a margin

Scale composition to make sure neitherpositive or negative space dominate

Usually should be centered

Do not crowd controls together - createstension and inhibits scanning


8/10/2019 i213-9

32/43

Example of a Crowded Dialog

Adapted from Rob MillerSource: Mullet and Sano, Designing Visual Interfaces

8/10/2019 i213-9

33/43

Use White Space to Group Elements


8/10/2019 i213-9

34/43

Gestalt Principles

How visual perception constructs a gestalt(whole) out of individual elements


proximity similarity continuity

closure area symmetry

8/10/2019 i213-9

35/43

Balance

Choose an axis (usually vertical)Make sure the visual weight of elements

on each side are approximately equal

Symmetric layouts are implicitlybalanced and aesthetically pleasing

Asymmetric layouts are harder to

balance, but can increase tension andactivity


8/10/2019 i213-9

36/43

8/10/2019 i213-9

37/43

Alignment

Either left- or right-justify your labelsTry to align your controls on the left and

the right

Align controls and labels on the samebaseline


8/10/2019 i213-9

38/43

Breaking all the Rules


8/10/2019 i213-9

39/43

Grids

Regular grids are helpful for achieving

both balance and alignment


8/10/2019 i213-9

40/43

Using Color

Be aware of human limitations

Color-blindness, visual perception

Use a consistent palette

Avoid loud, saturated colors


h

8/10/2019 i213-9

41/43

Choosing Icons

If you are trying to represent a concrete,

tangible thing, use an icon

If it is used repeatedly, establish aconvention, especially if one can be

borrowed from the real world

Otherwise, especially if its an action orabstract process, use text

Dont mix text, icons, symbols


8/10/2019 i213-9

42/43

Closing Thought

Problem-solving and communication, notpersonal expression, is the key to effective

visual design for graphical user interfaces.


8/10/2019 i213-9

43/43

For Next Time

Lo-Fi Project Presentations!

Any questions?

i213-9

Documents

Transcript of i213-9