Ui design-day3
-
Upload
tim-proffitt -
Category
Technology
-
view
107 -
download
2
Transcript of Ui design-day3
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
?