human-computer interaction (hci)

Mario Čagalj

University of Split

2013/2014.

Human-Computer Interaction (HCI)

Basic Visual Design Principles

Assembled from: Robin Williams “Non-Designers Design Book” Colin Stewart: “Visual Design The good kind of VD”, 2009.

Visual designVisual design = organizing the appearance of something

Applies to anything visual:web page designdisplaying information (charts, graphs, reports)maps, brochures, birthday cardscode formattingsmartphone applicationetc.

3

Which one do you prefer?

Visual design principlesWe already know that excellent visual design and design in

general requires some artistic ability, but a reasonably good design can be achieved by following some basic principles

For visual design, we have the following 4 principles:ContrastRepetitionAlignmentProximilty

You can remember these by the acronym

CRAP5

CRAP

Contrast make different things different brings out dominant elements mutes lesser elements

Repetition repeat design throughout the interface consistency creates unity

Alignment visually connects elements creates a visual flow

Proximity groups related elements separates unrelated ones

6

ProximityDesign principle #1: proximity

things that are related should be grouped close togetherthings that are not related should be separated

When several items are in close proximity to each other, they become one visual unit rather than several separate units

This helps organize information, reduces clutter, and gives the content consumer a clear structure

7

confusing or disorderly state or collection

ProximityAn example of bad proximity

8

Which heading applies to the items in gray – "Services" or "Resource Centre"?not clear from the spacing

ProximityThe same web with better proximity

9

Immediately clear which items the menu headings apply toPhysical closeness implies a relationship

Proximity

bad proximity: the subheading and the article have a huge space between them they don't look like they're related 10

Proximity

11

the same web page, with better proximity

Proximitya page with good proximity:

12

Proximitythe areas in red borders contain related content

they are separated from other areasalso, it is clear what each heading applies to

13

Proximity

14

another example of good proximity

Proximity – whitespacea related concept to proximity is that of whitespacewhitespace refers to any empty space between visual

elementsit is not necessarily white, but it will be if the background

colour is white

15

Proximity – whitespacean example of bad whitespace (not enough):

in the menu on the left, there is almost no space between the menu items

16

Proximity – whitespacethe same page, with better whitespace:

17

Proximity – too many separate items

How many times does your eye stop to look at something?Where do you begin reading?

In the middle, probably, because that phrase is boldestWhat do you read next—left to right?What happens when you get to the bottom-right corner, where does your

eye go? Do you wander around making sure you didn’t miss any corners? 18

Proximity – too many separate items

Now that there are two bold phrases, where do you begin?Do you start in the upper left? Do you start in the center?After you read those two items, where do you go?

Pehaps you bounce back and forth between the words in boldDo you know when you’re finished?

19

Proximity – too many separate itemsBy grouping similar elements into one unit, several things

instantly happen: The page becomes more organized You understand where to begin reading the message, and you know when

you are finished And the “white space” (the space around the letters) automatically

becomes more organized

20

Proximity – before and after

21

Summary of proximityWhen several items are in close proximity to each other, they

become one visual unit rather than several separate units

Items relating to each other should be grouped together

The basic purpose of proximity is to organize contentMore likely to be read

How to get itCount the number of visual elements (units) on the page by counting the

number of times you eye stopsIf more than some reasonable number, see which elements can be grouped

toghether into closer proximity to become one visual unit22

Do you recognize the “proximity”?

AlignmentDesign principle #2: alignment

nothing should be placed on the page arbitrarily every item should have a visual connection with some thing

else on the page

Straight lines give a more organized appearance

Aligned items result is a stronger cohesive uniteven when aligned elements are physically separated from

each other, there is an invisible line that connects them, both in your eye and in your mind

24

Alignmentan example of bad alignment:

25

Alignmentthe same web page, with better alignment:

26

Alignmentmore bad alignment:

27

Alignmentthe same web page, with better alignment:

28

Alignmenta web page with good alignment:

29

Alignmentas a general rule, left and right alignment work best –

particularly for paragraphs of textcenter alignment is terrible for paragraphs, but can work for

things other than textsome examples of good center alignment:

30

Alignment – the bussiness card example

centraly aligned text – the edges are soft

right aligned text – creates hard edge on the right the hard edge gives strength to this

layout

31The invisible line connects the separate pieces of text

Alignment – find a strong alignment and stick to it

32

Alignment – find a strong alignment and stick to it

33

Alignment – find a strong line and stick to it

34

There is a strong line along the left edge of the text and the left edge of the imageWhich one do you use? Why?Between the text and the image, there is “trapped” white space, and the

white space is an awkward shape

Alignment – find a strong line and stick to it

35

Now the strong line on the right side of the text and the strong line on the left side of the image are next to each other, making each other stronger

Summary of alignmentNothing should be placed on the page arbitrarily

Every element should have some visual connection with another element on the page

UnityTo make all the elements on the page appear to be unified, connected, and

interrelated, there needs to be some visual tie between themEven if the separate elements are not physically close, the can appear

connected, related with the other information

How to get itAlways find something elese on the page to aligne with, even if the objects

are far away from each other

36

Do you recognize the “alignment”?

RepetitionDesign principle #3: repetition

visual elements that have the same purpose or level of importance should look the same

Repeat some aspect of the design throughout the entire pieceIf there are too many different-looking things on a web page, it

will not look like everything belongs on the same page - it will not look cohesive

The repetitive element may be font, a thick line, color, design element, ... anything that a reader will visually recognize

38

Repetitionan example of bad repetition:

39

Repetitionthere are two examples of bad repetition on the previous

slide:the menu items on the left all have a light yellow background –

except for the items under the "Service", which have a gray backgroundall these items are in the same menu – they should all have the same

appearance

40

Repetitionthe same page, with better repetition:

41

Repetitionanother example of bad repetition:

42

Repetitionthe same page, with better repetition:

43

Repetitionan example of good repetition:

44

Repetitioneverything with the same purpose/importance looks

the same – fonts, colours, icons

45

Repetitionanother example of good repetition:

• note the weather icons – even though all four icons are different, they are made up of identical parts (clouds, rain drops, lightning)

46

Repetition

47

Repetition – slides

bla bla asdf bla blaasdf asdfasbla balalskfa fačsdkf aasldjfa sldkfjasd fsthe menu items on the leftasdfkja aslkd asdlasd flkas dfalksdsdfaj alsdkjf alsdkfj a slkasRepetition helps organize the information: it helps guide the

reader through the pages; it helps unify the design. 48

bla bla asdf bla blaasdf asdfas

bla balalskfa fačsdkf aasldjfa sldkfjasd fsthe menu items on the

leftasdfkja aslkd asdlasd flkas dfalksd

sdfaj alsdkjf alsdkfj a slkas

Repetition – the bussiness card example When you get to the end of the information, does your eye wander

off the card?

How about now? Do you find it bounces back and forth

between the bold elements? That is the point of repetition – it ties a

card toghether, it provides unity

49

Summary of repetitionRepetition of visual elements throughout the design unifies and

strengthens a piece Repetition ties together otherwise separate parts

The purpose of repetition is to unify and to add visual interest

How to get itThink of repetition as being consistent (recall consistency design principle)

50

How about “repetition”?

ContrastDesign principle #4: contrast

Visual elements with a different purpose or level of importance should appear differentthis is the opposite of repetition

More important elements should be more prominent (larger, with stronger colours) than less important elements

Contrast is one of the most effective ways to create visual interest to your design

52

Contrastan example of bad contrast:

• nothing stands out on this page – there is not enough difference in colours and fonts 53

Contrastthe same page, with better contrast:

54

Contrastanother example of bad contrast:

• the section heading ("What does X-ray light show us") is smaller than the paragraph text, even though it is more important

55

Contrastthe same page, with better contrast:

56

Contrasta page with good contrast:

• note the differences in colours (light/medium/ dark) and font sizes/weights 57

Contrasta page with good contrast:

• note the division into three columns – each column has its own colour 58

Contrastthere is some contrast already happening on this web

page, but we can push it further

59

Contrastthe web page is more dynamic and interesting

60

Summary of contrastContrast on a page draws our eyes to it

our eyes like contrast

Visual elements with a different purpose or level of importance should appear differenttwo elements on the page that are not the same cannot be similarfor contrast to be effective, the two elements must be very different

Contrast has two purposescreate an interestto aid in the organization of the information

a reader should be able to instantly understand the way the information is organized, the logical flow from one item to another

61

Do you recognize the “contrast”?

Exampleswhat does this page do well and badly?

63

Exampleswhat does this page do well and badly?

64

Exampleswhat does this page do well and badly?

Exampleswhat does this page do well and badly?

RecapGood visual design is important when making anything visual

e.g., it makes web sites easier to navigate and readThe four principles of visual design are:

contrastrepetitionalignmentproximity

67

RecapProximity: visual elements that are related should be close

together, and vice versause whitespace to separate elements

Alignment: visual elements should be lined up in straight linesleft- and right-alignment are usually bestcenter-alignment can work sometimes, but not with

paragraphs of text

68

RecapRepetition: visual elements that have the same purpose or

level of importance should look the samethis applies to fonts, colours, icons, etc.repeated elements on a page will give it a sense of cohesion

(unity)Contrast: visual elements with different purposes or levels

of importance should appear differentthe opposite of repetition

69