Experience Design for Behavior Change
05.13.2018
Andrew Baker
Creative Technology Director - Cactus
experience design
web & software development
digital strategy & creative direction
visual and interaction design
new business & client advocacy
What is a creative technology director?
Experience design is a catalyst for organizational and business growth
Org + Technical Requirements
Business Goals
User Needs
Org + Technical Requirements
Business Goals
User Needs
Behaviors
Motivations
Needs
Challenges
Org + Technical Requirements
Business Goals
User Needs
Behaviors
Motivations
Needs
Challenges
Operations
Offerings
Outcomes
Mission
Org + Technical Requirements
Business Goals
User Needs
Data
Technology
Measurement
Administration
Behaviors
Motivations
Needs
Challenges
Operations
Offerings
Outcomes
Mission
Org + Technical Requirements
Business Goals
User Needs
Data
Technology
Measurement
Administration
Behaviors
Motivations
Needs
Challenges
Operations
Offerings
Outcomes
Mission
3. Typography in code
Font-properties overview
Building a font scale
Webfont hosting and access
Codepen prototype
Fogg Behavior Model
Pursuasive Technology
Motivation
Ability
Trigger
Motivation
Is the user motivated enough to take action and engage with your product, service, or brand?
A typeface is the design of a type family.
Like every family, type families have names. An example of a type family name is Georgia. Georgia is a type family — a typeface — not a font.
Typeface
Fonts are every variant of a typeface.
Using the Georgia typeface example, the “Georgia Regular”, “Georgia Italic”, “Georgia Bold”, and “Georgia Bold Italic” in my library are all fonts of the Georgia typeface
Font
Primary letterform classifications
A brief history of web typography
The browser determined the font style
A screenshot from Tim-Berner-Lee's WorldWideWeb browser
1990 - worldwide web
Netscape introduces the <font> tag
sample <font> tag from HTML4
<font size='3' color='red'>This is some text!</font>1995 - <font>
Microsoft's project to design a standard pack of fonts for use on the internet
1996 - "Core fonts for the web"
1998 - Font downloading
CSS2 introduces remote font downloading
2008 - Subscription Hosting
CSS3 allows for subscription hosted web fonts
Overview
Typography in UX
- Oliver Reichenstein
Web design is 95% typography
Visual Hierarchy
“Typography exists to honor content.”
- Robert Bringhurst: The Elements of Typographic Style
- size
- weight
- color
- position
- contrasting typeface
Establishing typographic hierarchy
Upcoming SCD Event
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build an installation of a kinetic and interactive sculpture
Size
Upcoming SCD Event
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build an installation of a kinetic and interactive sculpture
Weight
Upcoming SCD Event
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build an installation of a kinetic and interactive sculpture
Color
Upcoming SCD Event
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build an installation of a kinetic and interactive sculpture
Position
Upcoming SCD Event
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build an installation of a kinetic and interactive sculpture
Contrasting Typeface
Upcoming SCD Event
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build an installation of a kinetic and interactive sculpture
Trimpin: Kinetic
and Sound Sculpture
Combination
The intercept makes good use of weight, size, color, and typeface to establish clear content heirarchy
In the wild
Measure • Punctuation • Contrast
Three principles for more readable type
Measure
Optimal line lengths are 45 - 75 characters (spaces included)
Punctuation
type without hanging bullets destroys the flow of text
text flow is uninterrupted and scanable
Hanging Punctuation: Lists
type without hanging quotation marks
text flow is uninterrupted and scanable
Hanging Punctuation: Quotes
Sparingly use light type on dark backgrounds
dark gray type on white background
Upcoming SCD Events:
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build.
Upcoming SCD Events:
The multimedia artist and musician, Trimpin will have a residency with ATLAS from Nov 10-14. He will work with ATLAS students on an electronic music composition, explore his creative process and build.
Contrast
Common Mistakes
small type becomes increasingly hard to read on mobile devices and displays with low resolution.
Small text on mobile
A rag creates a random shape down the right-hand column that helps the eye relocate its last position, with minimal re-reading
Extensive centered or justified text
On mobile, substantially less text is visible so contrast becomes overly exaggerated
Exaggerated font-size contrast on mobile
HTTP request timeline demonstrating the need to keep font calls to minimum
Typeface loading overload
Pairing Typefaces
Concordant fonts have similar traits (kerning, proportions, cap height, etc.)
fonts from the droid family share tall x-heights (seen in red)
Pairing for concordance
Contrasting fonts can pair well and create hierarchy to draw the user's eye through your page. Contrast can be established through style, size, weight, form and color.
The bold geometric nature of Oswald contrast well with the classic roman features of Vollkorn
Pairing for contrast
Font-pairing inspiration
Google webfonts pairing inspiration website
Font-pairing inspiration
Aesops fables via google webfonts and Unsplash images
Font-pairing inspiration
100 days of google webfonts
Font-pairing inspiration
daily webfont inspiration from typewolf
- number of fonts to use
- system fonts vs. @font-face
- purchased vs. free
- CDN vs. self-hosted
Considerations when pairing for web
Typography in CSS
Part 1:
CSS font properties
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}declares which font—as well as which fallback or substitute fonts—should be used to display text
Font-family
body {
font-size: 0.85em;
}provides the ability to set the size of text using common length values, including pixels, em units, percentages, points, or font-size keywords
Font-size
aside {
font-style: italic;
}Allows us to change text to italics, or to prevent text from being italicized. Main values are 'normal' and 'italic' but also accepts 'oblique' and 'inherit'
Font-style
.subhead {
font-variant: small-caps;
}Rarely used, but allows us to set text in sub capitals
Font-variant
h4 {
font-weight: bold;
}Font-weight allows us to make text bold or thinner than normal. It accepts either a set of keywords or a number if the font being used allows for number designated weights
Keywords: 'normal' 'bold' 'bolder' 'lighter' and 'inherit'
Numeric Values: 100, 200, 300, 400, 500, 600, 700, 800, 900
Font-weight
The distance between the baselines of successive lines or types. Line height is referred to as leading outside of CSS
Line-height
body {
font-size: 1.0em;
line-height: 1.3em;
}The distance between two lines of text (often referred to as leading) is declared using the line-height property.
Best-practice states that our line-heights should typically equal 1.3 - 1.5 the value of our font-size
Line-height
This is the consistent increase or decrease of space between letters uniformly. Known as tracking outside of CSS
Letter-spacing
html {
font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}All of the font properties can be combined into one shorthand CSS rule. The order of these property values should be as follows, from left to right: font-style, font-variant, font-weight, font-size, line-height, and font-family.
The only required values when using shorthand are font-family and font-size
Shorthand properties
Part 2:
Sizing
- ems (em)
- rems (rems)
- Pixels (px)
- Points (pt)
- Percent (%)
1em = 12pt = 16px = 100%
Meet the units
ems are measurement units that inherit and scale relative to their parent font size, similar to the way vector paths scale proportionally
The all important EM
A sequence of relative numbers that help us to choose font sizes, line heights, margins, and more
Type scale
html { font-size: 1em; }
h1 { font-size: 2.074em; }
h2 { font-size: 1.728em; }
h3 { font-size: 1.44em; }
h4 { font-size: 1.2em; }
small { font-size: 0.833em; }
.box { padding: 1.25em; }
@media screen and (min-width: 1400px) {
html { font-size: 1.25em; }
}html { font-size: 16px; }
h1 { font-size: 33px; }
h2 { font-size: 28px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
small { font-size: 13px; }
.box { padding: 20px; }
@media screen and (min-width: 1400px) {
html { font-size: 20px; }
h1 { font-size: 41px; }
h2 { font-size: 35px; }
h3 { font-size: 29px; }
h4 { font-size: 24px; }
small { font-size: 17px; }
.box { padding: 25px; }
}EM scales by updating one value
px require recalculation for each element
An example
Part 3:
Webfonts
CSS3 feature allowing custom fonts to be loaded on a webpage.
@font-face
@import url(//fonts.googleapis.com/css?family=Oswald);
h1, h2, h3, h4 {
font-family: 'Oswald', sans-serif;
}@import
<link href='//fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>
body {
font-family: 'Open Sans', sans-serif;
}HTML inside <head>
CSS
Linking to font stylesheet
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>limit weights and styles - https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
Only download what you will use
Web font options
Google’s free web font hosting service. Some excellent options available such asOpen Sans and Source Sans Pro.
The largest collection of fonts on the web. Buy web fonts and host them yourself with their self-hosted kit – own your fonts instead of renting.
Another huge selection of fonts. Has fonts that MyFonts doesn’t have like Arnhem.
Web and desktop fonts in a single subscription. Plans start at $5/month.
Doesn’t have the largest selection but has very friendly licensing terms for both desktop and web.
Adobe’s web font hosting service. Free with Creative Cloud, otherwise plans start at $24.99/year. Nice selection of fonts but sadly lacks fonts from the Monotype Imaging library like Avenir and Akzidenz Grotesk.
Hoefler & Co.’s (formerly H&FJ) web font hosting service. Starts at $99/year so it’s a bit more expensive than other services. Their ScreenSmart fonts render beautifully on screen, so the higher price may be worth it.
Another web font hosting service with plans starting from $20/year. Has selections from Font Bureau that you can’t get on other hosting services such as Miller andBenton Sans.
Experience Design for Behavior Change
By Andrew Baker
