The Shady Web

Using CSS for Good, not Evil

Heidi Olsen @swisswebmiss

The Shady Web

Front-End PDX

Frustrating web

Intentional web

Functional web

Animated web

1

2

3

4

WHAT ARE WE
GONNA CHAT ABOUT?

Hi, I'm Heidi.

Senior Developer @eROI

@swisswebmiss

Inspired by a pen by Diego Ponce @wifi

HTML
CSS
jQuery
JavaScript
PHP

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:

Web Animation Essentials

 

Weekly Newsletters:

Web Animation Weekly

UI Animation Newsletter

 

Community:

Animation at Work Slack Channel

Thanks!

Thanks!

Heidi Olsen @swisswebmiss

Front-End PDX

Made with Slides.com