Utility | Meaning | Engagement

UI Design Basics

My model:Design can be evaluated from three broad categories.When these three categories combine appropriately to meet the needs of the user, the design can be said to be ‘good’.

Engagement

MeaningUtility

My model:Design can be evaluated from three broad categories.When these three categories combine appropriately to meet the needs of the user, the design can be said to be ‘good’.

Engagement

UI Design Basics

Engagement: Engaging the emotionswhen we design for emotion we intentionally trigger emotional responses in our users, with a goal of keeping them motivated and helping them perceive a personality.

Go over some examples and then we will explore some ways to design for engagement.

comfortablefriendlycuriousempoweredfun

“Emotion is one of the strongest differentiators in user experience namely because it triggers unconscious responses to a product, website, environment or interface. Our feelings strongly influence our perceptions and often frame how we think about or refer to our experiences at a later date.”

-Frank Spillers

http://experiencedynamics.blogs.com/site_search_usability/2004/08/design_and_emot.html

Frank Spillers is usability expert, founder of Experience Dynamics.

It is through emotion that we screen the world around us while making decisions.

Appealing to emotion can help:establish trustinfluence motivationestablish a personality that users can identify with

5

What is the most frequently cited factor in evaluating the credibility of a website?

6

What is the most frequently cited factor in evaluating the credibility of a website?

Trust is extremely important: It’s often the limiting factor that determines whether a user will engage with your product or service. Purchasing from an e-commerce website, hiring someone based on their portfolio or even accepting the advice or opinion of a blog post all require trust beforehand.

##### Color Palette by Color Scheme Designer ##### Palette URL: http://colorschemedesigner.com/#3w31TnfsHuDDt ##### Color Space: RGB;

*** Primary Color:

var. 1 = #2F6993 = rgb(47,105,147) var. 2 = #365870 = rgb(54,88,112) var. 3 = #104062 = rgb(16,64,98) var. 4 = #73AED7 = rgb(115,174,215) var. 5 = #98BDD7 = rgb(152,189,215)

*** Secondary Color A:

var. 1 = #E5BA3F = rgb(229,186,63) var. 2 = #AE954E = rgb(174,149,78) var. 3 = #987716 = rgb(152,119,22) var. 4 = #F5D67B = rgb(245,214,123) var. 5 = #F5E2A9 = rgb(245,226,169)

*** Secondary Color B:

var. 1 = #E56C3F = rgb(229,108,63) var. 2 = #AE684E = rgb(174,104,78) var. 3 = #983916 = rgb(152,57,22) var. 4 = #F59C7B = rgb(245,156,123) var. 5 = #F5BDA9 = rgb(245,189,169) Trust?

##### Color Palette by Color Scheme Designer ##### Palette URL: http://colorschemedesigner.com/#3w31TnfsHuDDt ##### Color Space: RGB;

*** Primary Color:

var. 1 = #2F6993 = rgb(47,105,147) var. 2 = #365870 = rgb(54,88,112) var. 3 = #104062 = rgb(16,64,98) var. 4 = #73AED7 = rgb(115,174,215) var. 5 = #98BDD7 = rgb(152,189,215)

*** Secondary Color A:

var. 1 = #E5BA3F = rgb(229,186,63) var. 2 = #AE954E = rgb(174,149,78) var. 3 = #987716 = rgb(152,119,22) var. 4 = #F5D67B = rgb(245,214,123) var. 5 = #F5E2A9 = rgb(245,226,169)

*** Secondary Color B:

var. 1 = #E56C3F = rgb(229,108,63) var. 2 = #AE684E = rgb(174,104,78) var. 3 = #983916 = rgb(152,57,22) var. 4 = #F59C7B = rgb(245,156,123) var. 5 = #F5BDA9 = rgb(245,189,169) How about now?

Users can make judgements in as few as 50ms about websites and

their trustworthiness based on aesthetics.

Aesthetics are not just a nice to have; they are critical to establishing trust.

Motivation

Emotion makes information memorable, resonant and possibly, actionable. If we trigger the right emotion, we can increase the chance that our users will perform the desired action or complete a task.

Let’s look at some examples of engaging emotions to motivate

11

Example of Mozilla motivating users to take a survey“Share your vision”Self efficacy

Appeal to strong emotions - outrage (pic not shown)

Group identification - ~2.5 million likes (probably not all of them donated)

14

Stack overflow’s reputation encourages engagement by appealing to social approval.

Create Personality

Choice of design elements - line, shape, color, texture, typography, can communicate a personality or character that users can identify with.

Vintage

MasculineGrunge in logoBurlap backgroundBlack

Tight grid like an excel spreadsheetCorporate

FunLight

“Emotion is one of the strongest differentiators in user experience namely because it triggers unconscious responses to a product, website, environment or interface. Our feelings strongly influence our perceptions and often frame how we think about or refer to our experiences at a later date.”

-Frank Spillers

http://experiencedynamics.blogs.com/site_search_usability/2004/08/design_and_emot.html

Recap - UI design can appeal to emotions through largely unconscious responses.

Several ways we can tap into these unconscious responses.The three I will address are:CompositionColorTypography

Composition

When an interface is designed with an intentional structure, then that feeling of structure comes through to the user in their first impression.

It implies that thought has been given to how the website is to deliver its information to the user and therefore gives the user confidence, trust, in the website.

Tools for confidence:Visual HierarchyGridsVertical Rhythm

Visual Hierarchy

A Visual hierarchy determines how we visually separate and prioritize what users will see.

Think back to class 2 - the gestalt principles - similarity and it’s inverse anomalyproximity will come in to play when determining a visual hierarchy

Some Random Kant: The noumena are just as necessary as our a posteriori concepts. In natural theology, the Categories should only be used as a canon for metaphysics, as any dedicated reader can clearly see. By means of analytic unity, it must not be supposed that the paralogisms of pure reason are a representation of the Transcendental Deduction; in view of these considerations, the manifold teaches us nothing whatsoever regarding the content of the phenomena.

I assert, in the study of the transcendental aesthetic, that the things in themselves should only be used as a canon for the discipline of practical reason. Because of our necessary ignorance of the conditions, the Categories have nothing to do with natural causes. The Ideal (and there can be no doubt that this is true) is a representation of space, because of the relation between the discipline of practical reason and our sense perceptions.

Consider this typographic example.

Some Random KantThe noumena are just as necessary as our a posteriori concepts. In natural theology, the Categories should only be used as a canon for metaphysics, as any dedicated reader can clearly see. By means of analytic unity, it must not be supposed that the paralogisms of pure reason are a representation of the Transcendental Deduction; in view of these considerations, the manifold teaches us nothing whatsoever regarding the content of the phenomena.

I assert in the study of the transcendental aesthetic, that the things in themselves should only be used as a canon for the discipline of practical reason. Because of our necessary ignorance of the conditions, the Categories have nothing to do with natural causes. The Ideal (and there can be no doubt that this is true) is a representation of space, because of the relation between the discipline of practical reason and our sense perceptions.

The information is the same but adding the headings prioritizesorganizesthe content.

25

Size - objects that are bigger demand more attentionLizard brain sees them as being “closer”

26

Size - objects that are bigger demand more attentionforecast.io focuses on the short term, specific forecast rather than broad general % of viewing area.

“predict when it will rain or snow — down to the minute — at your exact location, and presents it to you alongside the most beautiful weather visualizations you’ve ever seen.”

27

1 2

34

Size - objects that are bigger demand more attention

1: Radar map2: Big bold text3: Short term forecast4: Long term forecast

28

Contrast

Contrast shows relative importance. Dramatic shifts in text-size, color,information densitywill indicate that something is different and requires attention.

29

Contrast

Region of highest contrast

Subtitle Text

30

Interesting Example from survey monkey.

Subtitle Text

31

1 2

3

Area 2 has the highest contrast between the dark navy blue on white.

Area 1 has the highest information density.

Area 3 contains the largest single element.

32

Grids

Grids are another part of composition that we can use to convey an intentional structure.The de-facto standard web grid is arranged in 12 vertical columnsModular - can be combined and composed for different layouts

32

Grids

Grids are another part of composition that we can use to convey an intentional structure.The de-facto standard web grid is arranged in 12 vertical columnsModular - can be combined and composed for different layouts

33

34

Wired: 10 column grid

35

6 4

4 3 3

Primary content is obviousF like pattern

36

37

10 column grid

38

42 4

10 column grid

Fluid, percentage based, grids allow us to adapt our layouts.

This grid is very clearly 33.333%

41

Adapted to be 50%

42

Adapted to be 100%Grids from bootstrap and foundation

43

Grids don’t necessarily mean everything is aligned uniformly - sometimes you want to “break the grid”to add visual interest.

44

Grids don’t necessarily mean everything is aligned uniformly - sometimes you want to “break the grid”to add visual interest.

Vertical Rhythm

Closely related to the column based grid is vertical rhythm

guides readers’ eyes between elements, creating appropriate and predictable white space for visual rest stops, and conferring a sense of order and elegance to the layout.

creates a pattern

A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.

http://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414

46

Vertical RhythmVertical rhythm offers a consistent, predictable measures as the user scrolls down the content.You can establish a vertical rhythm with what is called a baseline grid.

lobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.

Vertical rhythm relies on 3 things:

1. Font size 2. Line height 3. Any margin or padding

Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id.

Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est

Closely related to the grid is vertical rhythm

guides readers’ eyes between elements, creating appropriate and predictable white space for visual rest stops, and conferring a sense of order and elegance to the layout.

47

Vertical RhythmVertical rhythm offers a consistent, predictable measures as the user scrolls down the content.You can establish a vertical rhythm with what is called a baseline grid.

lobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.

Vertical rhythm relies on 3 things:

1. Font size 2. Line height 3. Any margin or padding

Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id.

Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est

The whitespace between elements creates a predictable pattern.

48

Vertical Rhythm

Without baseline gridA book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.

http://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414The whitespace between elements creates a predictable pattern.

49

Vertical Rhythm

Without baseline grid.A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.

50

With baseline grid

51

With baseline grid

52

Base font size = 16pxBase line height = 1.5 * Base font size = 24pxMargin bottom = 48px

H1 font size = 50pxH1 line height = 1.2 * H1 font size = 60pxMargin bottom = 96px- 60px = 36px

Baseline Gridoffering a consistent, predictable measures as the user scrolls down the content.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget mauris vitae lorem hendreritlobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.

Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id. Vestibulum erat dui, suscipit vel congue sed, scelerisque at eros. Proin non urna id neque tempus cursus. Ut ut neque sagittis, dictum erat id, ultrices sapien. Quisque rhoncus, dolor sit amet mattis elementum, lorem velit ultricies diam, in faucibus tortor lacus eu orci.

Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu.

16px font size

24px line height

48px bottom margin

Baseline Gridoffering a consistent, predictable measures as the user scrolls down the content.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget mauris vitae lorem hendreritlobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.

Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id. Vestibulum erat dui, suscipit vel congue sed, scelerisque at eros. Proin non urna id neque tempus cursus. Ut ut neque sagittis, dictum erat id, ultrices sapien. Quisque rhoncus, dolor sit amet mattis elementum, lorem velit ultricies diam, in faucibus tortor lacus eu orci.

Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu.

50px font size

60px line height

36px bottom margin

96px}

H1 font size = 50pxH1 line height = 1.2 * H1 font size = 60pxMargin bottom = 96 - 60px = 36px

55

Baseline Gridoffering a consistent, predictable measures as the user scrolls down the content.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget mauris vitae lorem hendreritlobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.

Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id. Vestibulum erat dui, suscipit vel congue sed, scelerisque at eros. Proin non urna id neque tempus cursus. Ut ut neque sagittis, dictum erat id, ultrices sapien. Quisque rhoncus, dolor sit amet mattis elementum, lorem velit ultricies diam, in faucibus tortor lacus eu orci.

Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu.

Technique of aligning all type to a baseline grid is called “typesetting”.

56

Most of our apps will not involve typesetting, but the same principles apply.

Closely related to grid is baseline grid

It creates a vertical rhythm that guides readers’ eyes between elements, creating appropriate and predictable white space for visual rest stops, and conferring a sense of order and elegance to the layout.

creates a pattern

A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.

http://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414

57

Vertical rhythm in the form areas

Color

1 Emotions of different colors2 Color relationships

Color wheel

Primary Colors

Secondary colorscreated by mixing primary colors

Tertiary colorscreated by mixing one primary and one secondary color

Warm colorsenergizing

Cool colorscalming

65

Physically: acts as an appetite stimulant, used in restaurants

Emotional associations:enthusiasmhappinessspontaneityautumn (fall) and harvestcreativitycitrushealthy food

66

Physically: acts as an appetite stimulant, used in restaurantscontradictions: creativity vs decayEmotional associations:enthusiasmhappinessspontaneityautumn (fall) and harvestcreativitycitrushealthy food

67

A conservative color, it is often used well in designs that represent cleanliness and an air of responsibility. corporate

contradiction: trust vs detachment

Some associations of the color blue include:trusthonestyloyaltysinceritypeacetranquilityintelligencecold or uncaring

Popular corporate color

A conservative color, it is often used well in designs that represent cleanliness and an air of responsibility. corporate

contradiction: trust vs detachment

Some associations of the color blue include:trusthonestyloyaltysinceritypeacetranquilityintelligencecold or uncaring

Popular corporate color

Emotionally charged

Physically: enhance the metabolic rate, increase respiration rates and blood pressure

contradictions: love and war

Emotional associations:urgencyenergyactionwardangerstrengthlovepassion

China: good luckIndia: purity

Best used as an accent color most of the time

70

Emotionally charged

Physically: enhance the metabolic rate, increase respiration rates and blood pressure

contradictions: love and war

Emotional associations:urgencyenergyactionwardangerstrengthlovepassion

China: good luckIndia: purity

Best used as an accent color most of the time

71

Emotionally charged

Physically: enhance the metabolic rate, increase respiration rates and blood pressure

contradictions: love and war

Emotional associations:urgencyenergyactionwardangerstrengthlovepassion

China: good luckIndia: purity

Best used as an accent color most of the time

72

Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.

contradiction: happiness vs warning/caution

Emotional associations:creativitysunshinehappinessenergyclarity

cowardicewarningsinstability

yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.

73

Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.

contradiction: happiness vs warning/caution

Emotional associations:creativitysunshinehappinessenergyclarity

cowardicewarningsinstability

yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.

74

Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.

contradiction: happiness vs warning/caution

Emotional associations:creativitysunshinehappinessenergyclarity

cowardicewarningsinstability

yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.

75

Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.

contradiction: happiness vs warning/caution

Emotional associations:creativitysunshinehappinessenergyclarity

cowardicewarningsinstability

yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.

76

google image search for nature

77

contradiction: growth vs mold/infection

Some associations of the color green include:springgrowthnaturebalancejealousysafetymoneyeco/organic/recycling

Typography

http://untilsundaypost.wordpress.com/classification/1. Classification2. Personality

79

Classification

Sans Serif

Serif

Slab Serif

Didone

Script

Blackletter

based on early manuscript lettering

Monospace

a font whose letters and characters each occupy the same amount of horizontal space

87

Personality

http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography

Nine out of ten doctors agree.

88

Credibility

http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography

Limited colorsFamiliar typefaceClear hierarchy

http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography

Limited colorsFamiliar typefaceClear hierarchy

Informal: Internet Spaceships

Pew Pew Pew

http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography

Irregular sans-serif

Section Title Text

I am human and I need to be loved, just like everybody else does -Comic Sans

Irregular sans-serif

You are

formally invited

to something

fancy.

http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography

Script

97

?