Post on 13-Apr-2017
transcript
UI/UX Foundations:Intro to Design
Meg Kurdziolek & Karen Tang (TA: Trevor Daunt)
Your Goals
What would you like to learn today?
Our Goals
We want you to…
feel confident when talking to designers
describe why an interface may not “feel right”
understand common themes & UX terms
understand basic design principles
Introductions
Which of these domains interests you?
Health Education
Kids/Families Travel
Agenda09:00 - 09:20 Breakfast and Introductions
09:20 - 10:20 Storyboards & Personas
10:20 - 11:30 Sketching, Prototyping, Studios & Critiques
11:30 - 11:40 BREAK
11:40 - 12:15 Journey Maps & “The Golden Path”
12:15 - 12:45 LUNCH
12:45 - 01:00 Grids & Colors
01:00 - 01:50 Special Topics (up to you!)
01:50 - 02:00 Group reflections & wrap-up Q&A
Design Process
Refine
BuildLearn
Design Process
BuildLearn
Refine
Storyboarding
StoryboardingA storyboard is a powerful design tool because it…
conveys the “big picture” idea in just a few pictures
combines many design elements (personas, requirements, solutions, etc.) into one coherent story
has assets that can be shared, tested, and collaborated on
makes you think through & articulate the problem and solution requirements
Storyboarding: Freytag’s Pyramid
http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/
Personas
Personas
A persona is a powerful design tool because it…
turns data into motivating, easily remembered assets
helps clarify design goals
helps evaluate success
has assets that can be shared, tested, & collaborated on
makes you think about & investigate who your users are
Factsmajority of users are male, 35 to 45 years old, and make between $60 to $80k annually
return users check website 1 to 3 times a day
homepage bounce rate of 30%
Facts Persona
Persona
Freddy the First Time User
40 year old male, has a small budget of disposable income.
Moderately tech-savvy. Uses a PC laptop and owns an Android.
Enjoys to golf, and frequently checks the weather.
He found the website by searching for “Weather in Pittsburgh” on Google.
Scenario: Design an interface where new users can quickly find current weather conditions and forecasts.
Basic PersonaName Pick a memorable yet distinct name.
Picture Headshot photo that you will be able to recognize.
Quote The most salient detail summarized into one quote. (If they could ask for one thing…)
Skills Domain skills your persona brings to the table. (Novice or expert? Tech-savvy or not?)
Goals Goals your persona fulfills by using your product. (end goals, experience goals, life goals)
Habits A typical day for your persona. (hobbies, sports, activities, habits)
Must Do/Never What product absolutely MUST DO and MUST NEVER do.
https://boagworld.com/usability/adapting-empathy-maps-for-ux-design/
Activity - Part 1Total Time: 32 minutes
Start (8 mins): Brainstorm existing problems in your chosen domain. Discuss your ideas and pick the one you would like to design an application for today.
Storyboard
(8 minutes) Individually: Describe how your application will solve this problem for a target user in the form of two storyboards. (Just need to be 3 tiles: Initial Problem, Struggle, Happy conclusion)
(8 minutes) Everyone present their storyboards to the group, discuss common themes. As a group, create one 3 to 6-tile storyboard.
Persona
(8 minutes) Develop a persona for the main character in your storyboard.
A Parting Thought
Storyboards & Personas are good for capturing ideas…
but, best when coupled with research
Storyboard Example
Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)
Storyboard Example
Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)
Storyboard Example
Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)
Storyboards showing with parents involved with their children received more favorable reviews in A/B tests.
Sketching & Prototyping
Sketching & Prototyping
You should always start with a sketch, because…
• your first idea is never the final solution
• you can focus on concepts before details
• you can start testing and refining faster
Sketching & Prototyping
Low-Fidelity prototypes are rough representations of a design concept. Allows you to validate and improve upon the design early in the process.
High-Fidelity prototypes closely resemble the final solution. Allows you to “last-minute” test a design before it is finalized.
Low-Fidelity High-Fidelity
Sketching & Prototyping
http://www.olesiagraphic.com/chefgenie.html
Design Studios & Critiques
Design Studios & CritiquesDesign Studios & Critiques are useful because…
it encourages you to take chances and explore radical ideas
it’s intensive. You generate and explore lots of design solutions in a short amount of time.
it allows everyone to participate in design
it facilitates team alignment (and makes good UX *everyone’s* responsibility)
it enables everyone to learn through (constructive) criticism
How to Run a Design StudioStep 1: Decide who you are designing for and what problem you want to solve
Step 2: Sketch as many ideas as possible within a set time limit.
Step 3: Review sketches with the group, identify the best ideas, and repeat Step 2.
(Tools: Paper, pencils, and a timer)
How to CritiqueThere is something good about every idea, even if it is not the solution for the current problem
You critique the idea, not the person
Method to try: Dot voting Everyone is given three “dots” Place your dots on the designs you like best
Activity Warm-up
Total time: 10 minutes
Goal: To get in the mindset of sketching.
• We’ll show you a UI, and you’ll get 1-2 minutes to sketch it out. Remember, go for the essence of the UI and focus on conveying the product’s main features.
Activity - Part 2Total time: 30 minutes
Round 1: Sketch 5 minutes, Critique 10 minutes
Goal: Sketch as many concepts as possible. Don’t draw an entire interface - just the bare minimum to convey the idea.
• Each person has 1 minute to present their best ideas
• Group has 1 minute to comment. Say 1 thing you like and 1 thing you worry about. Use your dots!
Round 2: Sketch 5 minutes, Critique 10 minutes
Goal: Pick the ideas you liked the best from Round 1 and sketch 1 or 2 new prototypes. The sketches should still be rough, but more complete. Then regroup and discuss.
Journey Maps
Journey MapsA journey map is a diagram of a complete customer experience: from initial contact to completed task. A journey map should answer the following questions:
What is the customer’s goal?
What is their initial approach to solving the problem?
What questions do they need answered?
What is each step they need to take?
How do they know they are on the right path?
Basic Journey Map
Customer A persona or type of customer.
Process The process the customer is trying to complete.
Touch Points & Interactions
Where & how the customer interacts with the product or service.
Customer Thoughts What the customer is thinking and feeling along the way
A simple example
Rebecca searches for “toddler snow
pants” on Google and clicks first result
She selects “Boys”->”Winter” from the
side navigation
She scrolls through the options and sees
one pair she likes. She selects the size
and color and adds it to the shopping cart
She clicks on the shopping cart and clicks “Check-out”
Discovery Research Choose Purchase
The Golden PathThe Golden Path (n.)- the customer journey that ~90% of users will take through your product.
Synonym: the most common user scenario.
In a sentence:
“We have to make sure the golden path for our new photo upload tool is rock-solid. Lets run a few more usability studies and make sure we’ve made it as intuitive as possible.”
Activity - Part 3 Total Time: 15 minutes
With your group, create a simple journey map outlining how a first time user would discover and successfully use your design.
Example Journey Map
http://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/
Example Journey Map
http://uxmastery.com/5-alternatives-to-slide-decks-for-communicating-findings/
Example Journey Map
http://www.servicedesigntools.org/tools/8
Agenda09:00 - 09:20 Breakfast and Introductions
09:20 - 10:20 Storyboards & Personas
10:20 - 11:30 Sketching, Prototyping, Studios & Critiques
11:30 - 11:40 BREAK
11:40 - 12:15 Journey Maps & “The Golden Path”
12:15 - 12:45 LUNCH
12:45 - 01:00 Grids & Colors
01:00 - 01:50 Special Topics (up to you!)
01:50 - 02:00 Group reflections & wrap-up Q&A
Lunch Time!
Vote on Special Topics• Style Guides
• Voice & Tone
• Mobile Design
• Motion Design
• Voice UI (e.g. Alexa, Echo)
• Micro-interactions
• Typography
Agenda09:00 - 09:20 Breakfast and Introductions
09:20 - 10:20 Storyboards & Personas
10:20 - 11:30 Sketching, Prototyping, Studios & Critiques
11:30 - 11:40 BREAK
11:40 - 12:15 Journey Maps & “The Golden Path”
12:15 - 12:45 LUNCH
12:45 - 01:00 Grids & Colors
01:00 - 01:50 Special Topics (up to you!)
01:50 - 02:00 Group reflections & wrap-up Q&A
Design Process
BuildLearn
Refine
Grids
GridsTypes of grids
Web/Responsive grids
Golden Ratio
Gridsorder out of chaos
http://thinkingwithtype.com/contents/grid
Web Grids: Bootstrap12 columns
responsive
Web Grids: Foundation12 columns, responsive
Web Grids: 96016 columns 24 columns
Golden Ratiobased on the ‘golden rectangle’ concept
https://www.flickr.com/photos/oddsmedsrud/4566766452/
Golden Ratiobased on the ‘golden rectangle’ concept
https://www.flickr.com/photos/oddsmedsrud/4566766452/
Golden Ratioa b
= 1.618
Golden Ratioa b
= 1.618
Grids: Golden Ratio
Grid: Column Widths
Grids: Whitespace
http://www.indextwo.com/
aim for 45-75 characters/line
shorter lengths for mobile
line lengths
Breaking the Grid
http://www.writingfordesigners.com/?p=14270
Grid Guidelines
Which grid system should I use? it’s important that you use one, any will do
Where do I place my content? consider whitespace, golden ratio, grid breaks
Can there be too much white space? not a common complaint
Design Process
Learn
Refine
Build
Typography Grids Colors Style Guides Voice & Tone
Colors
Colors
Basic color theory (color wheel, shades/tints)
Color combinations (complementary, analogous, etc)
Color and typography
Color Wheel
Simple Color Wheel
Primary Colors
Secondary Colors
Tertiary Colors
Analogous Colors
Hue, Tints, Shades, Tones
Tints: add to a pure hue
Shades: add to a pure hue
Tones: add to a pure hue
hue
Color Wheel
Color CombinationsMonochromatic shading/tinting of same hue
Analogous choose one hue to accent, others hues to support
Complementary high contrast, use to accent
Split Complementary less tension than complementary, good starting point
Triadic tends to be vibrant, two uses for accent
Double Complementary watch for warm & cool colors, lots of potential variations
Clashing Colors
Vibrating Text?
Color Contrasts
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Color Illusions
Color ToolsCompose your own palette and explore community palettes
https://color.adobe.com http://paletton.com/
Palette generator https://coolors.co/app/
Extract colors from images http://www.colr.org
Color blindness simulator http://colorfilter.wickline.org
Design Process
Learn
Refine
Build
Grids Colors Style Guides
Style Guides
Style guide (n): a set of standards for the design of documents (apps, sites, etc.) that establishes and enforces style to improve communication.
Style Guides
Designer Developers
Style Guide: Bootstrap
Style Guide: Foundation
Bootstrap, Foundation: consider it a starting point
http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/
Bootstrap, Foundation: consider it a starting point
Style Guides Exampleshttp://www.yelp.com/styleguide
http://primercss.io/
http://www.starbucks.com/styleguide/
https://www.lightningdesignsystem.com
http://ux.mailchimp.com/patterns
https://playbook.cio.gov/designstandards
US Digital Services
https://playbook.cio.gov/designstandards/
Many Kinds of Style Guides
Front End Developers: http://ux.mailchimp.com/patterns/
Content Developers: http://styleguide.mailchimp.com/voice-and-tone/
Vote on Special Topics• Style Guides
• Voice & Tone
• Mobile Design
• Motion Design
• Voice UI (e.g. Alexa, Echo)
• Micro-interactions
• Typography
Voice & ToneVoice
the identity and personality of your brand. Should be consistent across all aspects of your product.
Remember: People come to your site for the content, so don’t leave it for last.
Tone
choice of language for a particular situation or audience. Should vary depending on the context.
MailChimp: Voice & Tone Style Guide
“MailChimp’s voice is human. It’s familiar, friendly, and straightforward…”
MailChimp is… Fun but not silly Confident but not cocky Smart but not stodgy Informal but not sloppy Helpful but not overbearing Expert but not bossy Weird but not inappropriate
http://mailchimp.com/about/brand-assets/
Style Guides Exampleshttp://www.yelp.com/styleguide
http://primercss.io/
http://www.starbucks.com/styleguide/
https://www.lightningdesignsystem.com
http://ux.mailchimp.com/patterns
https://playbook.cio.gov/designstandards
Special Topics
Mobile Design: Android’s Material Design
Evolving Design Patterns: Motion Design
Material Design
Adding depth to flat design
A layered approach to building a UI
https://www.google.com/design/spec/material-design/introduction.html
https://dribbble.com/shots/1717947-Keynote-Animation-Material-Design
Benefits of Animations
Naturally draws users’ attention
Can unobtrusively point users to the next step
A Little Bit of Motion Goes a Long Way
A Little Bit of Motion Goes a Long Way
A Little Bit of Motion Goes a Long Way
A Little Bit of Motion Goes a Long Way
A Few Animation PrinciplesEasing vs. Linear Motion
Squash and Stretch
Exaggeration
A Few Animation Principles
Easing vs. Linear Motion
Squash and Stretch
Exaggeration
A Few Animation Principles
Special TopicsMobile Design: Android’s Material Design
Evolving Design Patterns: Motion Design
What other areas are evolving? Wearable, IoT, robotics, … any others?
Wearables: Design Challenges
Glanceable and meaningful
Micro-interactions
Privacy
Design for different contexts
http://www.wired.com/2015/08/5-principles-designing-wearables/
http://www.wired.com/2015/08/5-principles-designing-wearables/
Design Process
Learn
Refine
Build
Typography Grids Colors Style Guides Voice & Tone
Storyboards Personas Critiques Journey Maps
Feedback & QA
Questions? Comments?
Are there topics you wished we spent more time on?
How do you see some of these topics applying to your current work?
Thank you!
Meg Kurdziolek meg.kurdziolek@gmail.com
www.megkurdziolek.com
Karen Tang karen@kptang.com
www.kptang.com
ResourcesStoryboarding
http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/
http://johnnyholland.org/2011/10/storyboarding-ux-part-2-creating-your-own/
Personas
http://www.ux-lady.com/diy-user-personas/
Sketching & Prototyping
http://www.usability.gov/how-to-and-tools/methods/prototyping.html
Design Studios
https://zapier.com/blog/run-a-design-studio/
Journey Maps
http://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/
http://conversionxl.com/customer-journey-maps-better-website-retention/
ResourcesTypography http://designinstruct.com/tools-basics/the-basics-of-typography/ http://www.thinkingwithtype.com http://practicaltypography.com/ http://webtypography.net/
Grids https://getbootstrap.com http://foundation.zurb.com http://960.gs
Great UX Design Books
Don't Make Me Think by Steven Krug
Design of Everyday Things by Don Norman
About Face by Alan Cooper
Design Process
BuildLearn
Refine
Storyboards Personas Critiques Journey Maps
Design Process
Learn
Refine
Build
Typography Grids Colors Style Guides Voice & Tone
Typography
Letterform (anatomy of a letter)
Classifications (serif vs. sans serif)
Readability (line-height, tracking, kerning)
Typefaces
Typography: Letterform
Bxhyascender heightcap height
x height
baseline
descender height
more anatomy: http://typedia.com/learn/only/anatomy-of-a-typeface/
SerifSans Serif
Typography: Classifications
Sans Serif
Typography: Classifications
Serif
Readability Tips (for web)
Font size: start around 16px, larger than print
Line height: use 1.3-1.6 times the font size, use taller heights for longer lines, smaller heights for shorter lines
Tracking: Use default in lowercase, more space in uppercase
Kerning: Larger text makes kerning errors more obvious
Readability: LeadingLeading: the distance from baseline to baseline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus mauris tortor, ac tristique ante viverra a. Mauris non magna quis
neque tristique lacinia nec at odio.
leading
1
guideline: use 1.2-1.6 times the font size
leading = line-height
The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinc-tive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture.
The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinc-tive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture.
The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinc-tive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture.
The distance from the baseline of one
line of type to another is called line
spacing. It is also called leading, in
reference to the strips of lead used to
separate lines of metal type. The
default setting in most layout and
imaging software is 120 percent of the
type size. Thus 10-pt type is set with 12
pts of line spacing. Designers play with
line spacing in order to create distinc-
tive typographic arrangements.
Reducing the standard distance
creates a denser typographic color,
while risking collisions between
ascenders and descenders. Expanding
the line spacing creates a lighter, more
open text block. As leading increases,
lines of type become independent
graphic elements rather than parts of
an overall visual shape and texture.
Size: 12pt leading: 12pt
(100%)
Size: 12pt leading: 14.4pt
(120%)
Size: 12pt leading: 18pt
(150%)
Size: 12pt leading: 24pt
(200%)
2 3 4
guideline: use taller heights for longer lines
leading = line-height
Size: 12pt leading: 14.4pt
(120%)
Size: 12pt leading: 14.4pt
(120%)
The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size.
The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinctive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture.
Readability: TrackingTracking: the distance between character sequences
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
tracking
tracking = letter spacing
Letters do love one another. However, due to their anatomical differences, some letters have a hard time achieving intimacy...[for example] capital letters, being square and conservative, prefer to keep a little distance from their neighbors.
Letters do love one another. However, due to their anatomical differences, some letters have a hard time achieving intimacy...[for example] capital letters, being square and conservative, prefer to keep a little distance from their neighbors.
Letters do love one another. However, due to their anatomical differences, some letters have a hard time achieving intimacy...[for example] capital letters, being square and conservative, prefer to keep a little distance from their neighbors.
tracking: -20 tracking: 0 tracking: +20
added tracking can make text appear more roomy
tracking = letter spacing
tracking: -15
tracking: 0
guideline: use less spacing for larger font sizes
Letters do love one another
Letters do love one another
tracking = letter spacingguideline: use more spacing for headlines
Readability: KerningKerning: the amount of space between two characters
Wonderkerning
kerninghard to manipulate (on web), choose typeface wisely!
http://type.method.ac/
Typefacesmay consists of bold, italics, condensed, etc.
guideline: pick a typeface that matches your content
http://julianhansen.com/index.php?/alternative-type-finder/
Typefaces: faux fontstip: faux fonts can adversely affect readability
faux
real
Typefaces: faux fontstip: faux fonts can adversely affect readability
faux
real
Mixing Typefaces
no hard & fast rules: trial & error
it’s OK to mix typography, even serif with sans serif within the same line: use similar x-heights across lines: also vary size, weight, or style
Mixing Typefaces
http://thinkingwithtype.com/contents/letter/#Mixing_Typefaces
Typeface Hierarchy
https://designschool.canva.com/blog/design-rules/
Typography in Action: iOS 9 San Francisco
Typography in Action: iOS 9 San Francisco
Typography in Action: iOS 9 San Francisco
taller x-height
https://developer.apple.com/videos/play/wwdc2015-804/
Typography ToolsFont discovery, comparison
https://www.google.com/fonts https://typekit.com/fonts http://www.fontsquirrel.com https://www.typetester.org/
Testing out font pairs: http://fontpair.co/ http://webfont-test.com/
Try out a font on a live site http://typewonder.com/ http://ffffallback.com/
Explore type hierarchy http://type-scale.com/
Design Process
Learn
Refine
Build
Typography Grids Colors Style Guides Voice & Tone