in the Age of

Storytelling

JavaScript

Sarah Drasner

  • Why is storytelling important?
  • Specific code examples (to get you going)
  • Options for types of storytelling

As told by your biology

  • We're rewarded for curiosity
  • Story enables us to plan for the future
  • We crave story

Source: Wired for Story

Journey on a

Website

  • Product: Get them to click on this x1000
  • Design: Make it look 💯 *dribbble 4 eva
  • Engineering: I'm learning *insert JS framework here*

Alignment & Communication

The "so what" factor

User attention span is short.

2 seconds

until dropoff

Amazon has discovered that for every one second delay, conversions dropped by 7%. If you sell $100k per day, that’s an annual loss of $2.5m.

Walmart has found that it gains 1% revenue increase for every 100ms of improvement.

Performance

Sustained

Curiosity

User

? Is this useful ?

? Is this capitivating ?

? Is it easy enough ?

Best case scenario!

Start with the end

Also helps track what validation looks like:

Google projects are encouraged to find ONE goal.

Fill in the space between

Aligns the entire team to the same goal

Reduces friction

source: Aaron Gustafson

Clarity

Clarity

Features

Personality

The good, the bad, the ugly

the bad

Personality

the good

Personality

the good

Attaches to limbic system

Source

Personality

Learned behaviors

The good AND the bad

Personality

Relatable story creates empathy

Loaders

  • Reducing impact of perceived wait times through curiosity
  • Humans over-estimate passive waits by 36% - Eli Fitch and Richard Larson, MIT
  • Perceived wait times- people are willing to wait twice as long for a custom experience - Viget

WaveApp Loading experience

p5.js - Coding Train w/ Daniel Shiffman

Loaders

  • Uncertain waits are longer than known, finite waits
  • Disney world/Airports- entertainment while waiting
  • Anxiety makes waits seem longer
  • People want to get started- doctor exam rooms

Loaders

great case for SVG

Entire filesize: 6KB!

Foreshadowing

or hints

the element of

Surprise!

Timing

Timing

Consider how things look to your user

Storytelling with Code

some options

Sets up a world beforehand,

so that it can be changed.

Surprise

This pen.

tl.call(addAttr);
tl.fromTo(feTurb, 1, {
  attr: {
    baseFrequency: '0 0'
  }
}, {
  attr: {
    baseFrequency: '0.8 1.2'
  },
  ease: Sine.easeOut
});
tl.to(feTurb, 1, {
  attr: {
    baseFrequency: '0 0'
  },
  ease: Sine.easeIn
});
tl.call(removeAttr);

Surprise with technique

SVG Filters

// filter attribute helpers
function addAttr() {
  feTurb.setAttribute('baseFrequency', '0 0');
}

function removeAttr() {
  var applyFilter = document.getElementById("applyFilter");
  applyFilter.removeAttribute("filter");
}

Surprise with technique

SVG Filters

End to end

Leo Leung

Without Transitions

Transitions

Encapsulate what is changing declaratively

Example with Vue

Vue's <transition> component

Sugar! Like in-out modes

Without in-out modes

<transition name="flip" mode="out-in">
  <slot v-if="!isShowing"></slot>
  <img v-else src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cartoonvideo14.jpeg" />
</transition>

HTML

.flip-enter-active {
  transition: all .2s cubic-bezier(0.55, 0.085, 0.68, 0.53); 
}

CSS

End to end

Encapsulate what is changing - Vue

State-driven animation

Encapsulate what is changing- Vuex/Redux

export const store = new Vuex.Store({
  state: {
    showWeather: false,
    template: 0
  },
    mutations: {
      toggle: state => state.showWeather = !state.showWeather,
      updateTemplate: (state) => {
        state.showWeather = !state.showWeather;
        state.template = (state.template + 1) % 4;
      }
  }
});

State change can create the animation

Watchers/Observables/RxJS

David Khourshid:

An Animated Intro to RxJS

<div id="app" @mousemove="coordinates">
coordinates(e) {
  ...
  this.startArms.progress(1 - (e.clientX / walleCoords)).pause();
}

HTML (Vue Component)

JavaScript

Fixed Window

WebGL/Three.js

Fictional worlds engage emotion systems while disengaging action systems (just as dreams do)

User Interaction-Driven

so many options

Gain understanding

Spatial or otherwise

Consistency

User Interaction-Driven

Make the user the character in the story

Stories and empathy

User Interaction-Driven

Real-time data

Scrollytelling

An Interactive Visualization of
Every Line in Hamilton

d3.js and React

Performance

Sustained

Curiosity

SVG Animations

Conclusion

But wait...

is there more?

The best way to make your site compelling is by actually making it compelling.

Thank you!

@sarah_edo on twitter

storytelling-js

By sdrasner

storytelling-js

Many of us are telling stories on the web- whether it be expressing concepts with data visualization, the story of how our product works, or simply writing good documentation. JavaScript is insanely powerful for gradually revealing information through animation, manipulating graphics with SVG, Canvas, and WebGL, or allowing users to guide themselves through interaction. In this talk, we’ll explore how our minds work on the web and how JavaScript can reach to new heights of composing experiences that attach to our limbic system and captivate us. We’ll dive deep into some of the how’s about these type of implementations and create live demos that bring these concepts to life.

  • 16,299