The Shady Web
Using CSS for Good, not Evil
Heidi Olsen @swisswebmiss
The Shady Web
@cssconfbudapest
Frustrating web
Intentional web
Functional web
Animated web
1
2
3
4
WHAT ARE WE
GONNA CHAT ABOUT?
Hi, I'm Heidi.
American from Portland, OR
Senior Developer @eROI
@swisswebmiss
Inspired by a pen by Diego Ponce @wifi
It me.
I stopped focusing
on HOW.
I started focusing
on WHY.
FRUSTRATING
web
Coalition for Better Ads
Frustrating Web
Intentional Web
Functional Web
Animated Web
Coalition for Better Ads
Frustrating Web
Intentional Web
Functional Web
Animated Web
Frustrating Web
Intentional Web
Functional Web
Animated Web
Most developers don't intend to make their experiences terrible for the user.
¯\_(ツ)_/¯
Frustrating Web
Intentional Web
Functional Web
Animated Web
1
We abuse new technologies until a more sophisticated way of doing things emerges.
Frustrating Web
Intentional Web
Functional Web
Animated Web
ANIMATE ALL THE THINGS
ANIMATE ALL THE THINGS
Frustrating Web
Intentional Web
Functional Web
Animated Web
METRICS
UX
2
We prioritize skewed metrics over user experience.
UX
Frustrating Web
Intentional Web
Functional Web
Animated Web
The Conversion Rate Illusion of Modal Newsletter Forms UX Movement
ILLUSION:
• High email acquisition
REALITY:
• Slows down task completion time
• Fake email addresses
• Low conversions, no trust
Frustrating Web
Intentional Web
Functional Web
Animated Web
Good design,
when done well,
becomes invisible.
— Jared Spool —
Frustrating Web
Intentional Web
Functional Web
Animated Web
INTENTIONAL
web
Why use animation
at all?
Frustrating Web
Intentional Web
Functional Web
Animated Web
Frustrating Web
Intentional Web
Functional Web
Animated Web
Stripe Checkout
Frustrating Web
Intentional Web
Functional Web
Animated Web
Cognitive load refers to the total amount of information your working memory can handle.
Working Memory
Long-Term Memory
Frustrating Web
Intentional Web
Functional Web
Animated Web
Frustrating Web
Intentional Web
Functional Web
Animated Web
Frustrating Web
Intentional Web
Functional Web
Animated Web
Frustrating Web
Intentional Web
Functional Web
Animated Web
John Sweller
Australian Educational Psychologist
Frustrating Web
Intentional Web
Functional Web
Animated Web
THREE STRATEGIES
Show + Tell
Connecting Contexts
Call + Response
Frustrating Web
Intentional Web
Functional Web
Animated Web
Studies have shown that people respond better to image and narration versus text and narration. This is why seasoned speakers encourage you not to have a giant wall of text on a slide because the audience will attempt to read the slide while listening to you and get distracted.
Frustrating Web
Intentional Web
Functional Web
Animated Web
SHOW + TELL
Long Live the Group Chat, The Outline
Frustrating Web
Intentional Web
Functional Web
Animated Web
SHOW + TELL
Frustrating Web
Intentional Web
Functional Web
Animated Web
SHOW + TELL
CONNECTING
CONTEXTS
Frustrating Web
Intentional Web
Functional Web
Animated Web
SHOW + TELL
CONNECTING
CONTEXTS
material.io/guidelines/motion
Frustrating Web
Intentional Web
Functional Web
Animated Web
SHOW + TELL
CONNECTING
CONTEXTS
Frustrating Web
Intentional Web
Functional Web
Animated Web
material.io/guidelines/motion
SHOW + TELL
CONNECTING
CONTEXTS
Frustrating Web
Intentional Web
Functional Web
Animated Web
CALL + RESPONSE
SHOW + TELL
CONNECTING
CONTEXTS
dribbble.com/doppel
Response Parameters:
• Current Status: What’s happening?
• Outcomes: What just happened?
• Future Status: What will happen next?
Frustrating Web
Intentional Web
Functional Web
Animated Web
CALL + RESPONSE
SHOW + TELL
CONNECTING
CONTEXTS
FUNCTIONAL
web
Identify the problems
you need to solve
Frustrating Web
Intentional Web
Functional Web
Animated Web
Frustrating Web
Intentional Web
Functional Web
Animated Web
1
I need to demonstrate the functionality of a new product
Frustrating Web
Intentional Web
Functional Web
Animated Web
Block access to content
or navigation.
chase.com
Frustrating Web
Intentional Web
Functional Web
Animated Web
mailchimp.com
Remove non-essential content
Keep the animation short
•
•
Show + Tell
Frustrating Web
Intentional Web
Functional Web
Animated Web
zoomcare.com/about
Break content into smaller pieces
Places words close to the corresponding animation
Show + Tell
•
•
Frustrating Web
Intentional Web
Functional Web
Animated Web
1
I need to demonstrate the functionality of a new product
2
I have a shopping cart on my website
Frustrating Web
Intentional Web
Functional Web
Animated Web
Take the user from the product page directly to the shopping cart
amazon.com
cottonbureau.com
Frustrating Web
Intentional Web
Functional Web
Animated Web
Use for global elements
Keep it consistent
•
•
Connecting Contexts
SHOPPING CART
INACTIVE
HOVER
ACTIVE
NAVIGATION
INACTIVE
HOVER
ACTIVE
Frustrating Web
Intentional Web
Functional Web
Animated Web
cottonbureau.com
Provide cues for interaction
•
Connecting Contexts
Frustrating Web
Intentional Web
Functional Web
Animated Web
1
I need to demonstrate the functionality of a new product
2
I have a shopping cart on my website
3
I need to let the user know that an action is taking place behind the scenes.
Frustrating Web
Intentional Web
Functional Web
Animated Web
Create a standard
loading GIF
dribbble.com/shots/773791-Progress-Bar-Icons
*Progress bars with accelerating bands feel 12% faster.
Frustrating Web
Intentional Web
Functional Web
Animated Web
Visually confirm behind-the-scenes tasks
Animate meaningful loaders
•
•
Call + Response
Frustrating Web
Intentional Web
Functional Web
Animated Web
Slack App
Providing an early hint of content to make wait times feel shorter
•
Call + Response
ANIMATED
web
COMMON CHALLENGES
Time
Establishing Process
Skill
Frustrating Web
Intentional Web
Functional Web
Animated Web
Frustrating Web
Intentional Web
Functional Web
Animated Web
1
Start the discussion about animation early in the process
Frustrating Web
Intentional Web
Functional Web
Animated Web
1
Start the discussion about animation early in the process
Information
Architecture
Visual Design
Development
Ship
Interaction Design
Frustrating Web
Intentional Web
Functional Web
Animated Web
2
Use storyboards to
brainstorm ideas quickly
Frustrating Web
Intentional Web
Functional Web
Animated Web
2
Use storyboards to
brainstorm ideas quickly
Frustrating Web
Intentional Web
Functional Web
Animated Web
3
Create prototypes and motion mock-ups as a base of discussion
Frustrating Web
Intentional Web
Functional Web
Animated Web
3
Create prototypes and motion mock-ups as a base of discussion
• Framer.js
• Principle
• Greensock JS Animation Library
• Codepen
Frustrating Web
Intentional Web
Functional Web
Animated Web
4
Test, test, and test some more
Frustrating Web
Intentional Web
Functional Web
Animated Web
4
Test, test, and test some more
• Ask questions:
• A/B test to validate decisions
Is it legible?
How does it make you feel?
Frustrating Web
Intentional Web
Functional Web
Animated Web
5
Document design decisions in your digital style guide.
Frustrating Web
Intentional Web
Functional Web
Animated Web
5
Document design decisions in your digital style guide.
Show what you do and don't do
Provide code snippets that include duration, easing, and timing
Establish naming conventions
•
•
•
Frustrating Web
Intentional Web
Functional Web
Animated Web
6
Keep learning + have fun!
Frustrating Web
Intentional Web
Functional Web
Animated Web
6
Keep learning + have fun!
Books:
• Designing Interface Animation, Val Head
• Designing for Emotion, Aarron Walter
• SVG Animations, Sarah Drasner
Courses:
Weekly Newsletters:
Community:
köszönöm
köszönöm
Heidi Olsen @swisswebmiss
@cssconfbudapest
CSSConf Budapest - The Shady Web
By Heidi Olsen
CSSConf Budapest - The Shady Web
Presentation for CSSConf Budapest, 25 October 2017
- 1,195