The Shady Web

@cssconfbudapest

Frustrating web

Intentional web

Functional web

Animated web

1

2

3

4

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

Coalition for Better Ads

Frustrating Web

Frustrating Web

Most developers don't intend to make their experiences terrible for the user.

¯\_(ツ)_/¯

Frustrating Web

1

We abuse new technologies until a more sophisticated way of doing things emerges.

Frustrating Web

Frustrating Web

METRICS

UX

2

We prioritize skewed metrics over user experience.

UX

Frustrating 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

Good design,
when done well,
becomes invisible.

— Jared Spool —

Frustrating Web

INTENTIONAL

web

Why use animation

at all?

Stripe Checkout

Cognitive load refers to the total amount of information your working memory can handle.

Working Memory

Long-Term Memory

John Sweller

Australian Educational Psychologist

THREE STRATEGIES

Show + Tell

Connecting Contexts

Call + Response

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.

SHOW + TELL

Long Live the Group Chat, The Outline

SHOW + TELL

CONNECTING
CONTEXTS

CONNECTING
CONTEXTS

material.io/guidelines/motion

CONNECTING
CONTEXTS

material.io/guidelines/motion

CONNECTING
CONTEXTS

CALL + RESPONSE

dribbble.com/doppel

Response Parameters:
• Current Status: What’s happening?

• Outcomes: What just happened?

• Future Status: What will happen next?

 

CALL + RESPONSE

FUNCTIONAL

web

Identify the problems

you need to solve

1

I need to demonstrate the functionality of a new product

Block access to content

or navigation.

chase.com

mailchimp.com

Remove non-essential content

Keep the animation short

•

•

Show + Tell

zoomcare.com/about

Break content into smaller pieces

Places words close to the corresponding animation

Show + Tell

•

•

2

I have a shopping cart on my website

Take the user from the product page directly to the shopping cart

amazon.com

cottonbureau.com

Use for global elements

Keep it consistent

•

•

Connecting Contexts

SHOPPING CART

INACTIVE

HOVER

ACTIVE

NAVIGATION

INACTIVE

HOVER

ACTIVE

cottonbureau.com

Provide cues for interaction

•

Connecting Contexts

3

I need to let the user know that an action is taking place behind the scenes.

Create a standard

loading GIF

dribbble.com/shots/773791-Progress-Bar-Icons

*Progress bars with accelerating bands feel 12% faster.

Visually confirm behind-the-scenes tasks

 

Animate meaningful loaders

•

•

Call + Response

Slack App

Providing an early hint of content to make wait times feel shorter

•

Call + Response

ANIMATED

web

COMMON CHALLENGES

Time

Establishing Process

Skill

1

Start the discussion about animation early in the process

1

Start the discussion about animation early in the process

Information

Architecture

Visual Design

Development

Ship

Interaction Design

2

Use storyboards to
brainstorm ideas quickly

2

Use storyboards to
brainstorm ideas quickly

3

Create prototypes and motion mock-ups as a base of discussion

3

Create prototypes and motion mock-ups as a base of discussion

• Framer.js

• Principle

• Greensock JS Animation Library

• Codepen

4

Test, test, and test some more

4

Test, test, and test some more

• Ask questions:

 

• A/B test to validate decisions

      Is it legible?

      How does it make you feel?

5

Document design decisions in your digital style guide.

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

 

• 

• 

• 

6

Keep learning + have fun!

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

köszönöm

köszönöm

Heidi Olsen @swisswebmiss

@cssconfbudapest