It's Too Fast

Boost UX by adding time

The Problem

instant evolution
nothing in our world behaves like this

Quest

Compel a speed addicted community to replace techniques that create anxiety with techniques that relieve anxiety.

(pace over speed)

Quantum's on the horizon

potentially 0 latency
for now...

still slow(ish)

Prepare For:

  1. Earth UX
  2. 2019 Fast Apps
  3. 2019 Snappy CSS
  4. Calm Strategies
  5. Calm Tactics

Earth Life UX

Where you spend most your day

Earth Anxiety

Inducers vs Relievers

Physically Sharp

Physically Soft

Physically Heavy

Physically Light

Audibally Sharp

Audibally Soft

Sharp Gaming

Soft Gaming

We get it.

Tangibally & Audibally


Sharp vs Soft

Heavy vs Light

Physical & Digital

Body & Mind


Connected

Fast Apps

in 2019

Speed standard

Creating or relieving anxiety?

Snappy

Instant

Elastic

We are addicted to

speed

speed

speed

MOAR speed!
I'd like to advocate for

Calm Apps

Subtle

difference of ~500ms

Plush

Fluid

Soft

iOS vs Android

calm vs fast
  • Snappy
  • Instant
  • Elastic
  • Startling
  • Direct
  • Lean
  • Plush
  • Fluid
  • Soft
  • Gentle
  • Orchestrated
  • Optional

Now what?

We project our physical world into our digital world

Lower anxiety with softness, lightness & orchestration

CSS!
Current State

Snappy CSS

 twitter poll showing 0.26s-0.5s as most popular

Duration

  • between 200-300ms

Easing

  • Elastic
  • ease-out
  • cubic-bezier(0.4, 0.0, 1, 1)

Distance

  • 50-200ms for short distances
  • 200-350ms for longer distances

Good Advice 👍

but I want you to think deeper
Strategies for a

Calming UI

 1

designs need white space

UX needs time
  1. Passive vs Active
  2. Time is Value
Passive vs Active

Baggage Claim UX

Story Time

Passive

Active

Time is Money

Spend wisely
  1. Too fast can appear wrong
  2. Too fast can appear cheap
  3. Too fast can appear unreal
Story time...
  • Intel Comic Director
  • Eye Scanner
  • QR Code Scanner

Buy Time

  • Distraction
  • Feedback
  • Validation
 2

designs need to guide

UX needs
to follow
  1. Time Based Feedback
  2. Interruptible Interactions

Tap & Hold

Time is a required input parameter for the action to fire

Deliberation required!

Less than 1s added

Added friction with a tradeoff of user confidence

Microseconds adding value

Interruptible Interactions

Enhance without degradation

Why Interruptible?

Since we slowed down the animation speed, a power user may feel frustration because they're prepared for the next action while the UI is transitioning.

Let the power user power through

CSS Transitions are interruptible by default


              .menu.in { 
                transform: translateX(100%); 
              }

Gestures should always be interruptible

 3

designs need to speak

UX needs
to listen
  1. Copy
  2. Audibally

Traditional Approach

soft persona in your copy

Sharp:

You must register
before you can vote

Soft:

Register to vote

Yoga App

audibally soft

Voice Assistants

I can only assume tons of work went into ensuring those voices are soft and fluid

 4

designs need to report

UX needs to
respond

Respond

Animate

Idle

Load

big feedback

Quick overview of:

  • Respond
  • Animate

idle

we spend a lot of time here

Spinners

Kinds

  1. Determinate
  2. Indeterminate

don't 👎

do 👍

Indeterminate Switch

Optimistic Interactions

orchestrated feedback

UI Promise
to not waste your time

Optimisic controls

Optimisic tabs

 5

designs describe mass

UX needs to
control mass

Why does an app or OS feel so different if mass is present?

Heavy Mass

Mass sharing space

don't put me in a spider web

Recap
  1. White Space :: Time
  2. Guide :: Follow
  3. Speak :: Listen
  4. Report :: Manage
  5. Describe Mass :: Control Mass

Tactics for a

Calming UI

Immediate UI Feedback

Providing an instant visual answer to a user UI inquiry will keep them calm.

The UI is alive


                button {
                  ...
                  &:focus {}
                  &:focus-within {}
                  &:hover {}
                  &:active {}

                  &:disabled:focus {}
                  &:disabled:hover {}
                  ...
                }
              

            :host {
              ...
              &:focus {}
              &:focus-within {}
              &:hover {}
              &:active {}

              &:disabled:focus {}
              &:disabled:hover {}
              ...
            }

Show the system state

Communicate early and often,
as if your UI was a sales person

The UI is doing work


                @keyframes float-forever {
                  0%, 100% { 
                    transform: translateY(0); 
                  }
                  50% { 
                    transform: translateY(.25rem); 
                  }
                }

                :host[sending] {
                  animation: 
                    float-forever .2s 
                    ease-in-out infinite;
                }

Animation Directionality

UIElements should enter slower
than they exit

More time for the new,
less time for the old

Bring focus to actionable UI


                :host[animation="in"] {
                  transition-duration: 500ms;
                }

                :host[animation="out"] {
                  transition-duration: 400ms;
                }
              

            /* Gif Uses */
            :host[animation="in"] {
              transition-duration: 300ms;
            }

            :host[animation="out"] {
              transition-duration: 250ms;
            }

            /* Calmer */
            :host[animation="in"] {
              transition-duration: 500ms;
            }

            :host[animation="out"] {
              transition-duration: 400ms;
            }

Interruptible Motion

UI promises to never block the user. Users will drive & move at their own pace

User calmed by their control


                :host {
                  transition: transform .5s ease;
                }

                :host[animation="in"] {
                  transform: translateX(0);
                  transition-timing-function: 
                    cubic-bezier(0.0, 0.0, 0.2, 1);
                }

                :host[animation="out"] {
                  transform: translateX(100%);
                  transition-timing-function: 
                    cubic-bezier(0.4, 0.0, 1, 1);
                }

Don't 👎

Do 👍

 twitter poll showing 0.26s-0.5s as most popular

Increase Duration

Give the animation more time but with exaggerated easing to soften the tension

Calm down UI enertia


                /* Industry Standard */
                :host[animation="in"] {
                  transition-duration: .3s;
                  transition-timing-function: 
                    ease-out;
                }

                /* Calmer */
                :host[animation="in"] {
                  transition-duration: ~1s;
                  transition-timing-function: 
                    cubic-bezier(.13, .01, 0.1, 1);
                }

200ms vs 350ms

115ms vs 550ms

Don't 👎

Do 👍

Duration *= Distance

Long animations over short distances waste user time

Calm contextual duration


                :host[animation="in"] {
                  --base-duration: .5s;
                  --distance-multiplier: 1;

                  /* use js to set the multiplier */
                  /* > 1 for longer */
                  /* < 1 for shorter */
                  transition-duration: 
                    calc(
                      var(--base-duration)  
                      * var(--distance-multiplier)
                    );
                }

Short

Medium

Long

Orchestration

Longer total durations can feel shorter with meaningful motion choreography

Orchestrated UIs feel safer


                [animation="in"] > * {
                  --delay: 0;
                  --base-duration: .8s;
                  --distance-multiplier: 1;
                  --strong-ease: cubic-bezier(.13,.01,.1,1);

                  transition-property: transform;
                  transition-delay: var(--delay);
                  transition-timing-function: 
                    var(--strong-ease);
                  transition-duration: 
                    calc(
                      var(--base-duration)  
                      * var(--distance-multiplier)
                    );
                }

Don't 👎

Delay with intent

Stagger with intent

Wrap Up

Time to conclude our time about time

Strategies

  1. Designs need white space
    UX needs time
  2. Designs need to guide
    UX needs to follow
  3. Designs need to speak
    UX needs to listen
  4. Designs need to report
    UX needs to manage
  5. Designs describe mass
    UX needs to control mass

Tactics

  1. UI Feedback
  2. Faster in than out
  3. Be interruptible
  4. Be optional
  5. Increase duration & strengthen easing
  6. Duration *= Distance
  7. Orchestrate

Assertions

  1. Well orchestrated "slow" apps can earn trust
  2. Slow paces produce less anxiety
  3. Apps feel tense, release some tension
  4. UIs waste lots of user time
  5. Instant completion feels cheap
  6. Try to model app UI after sustainable Earth UI

Slow down the UI around you, see what the 1-2 seconds slower does to you

Contribute to sustainable UX

optional & interruptible motion, increase duration, stagger more, soften tone, & release tension

argyleink

Thank You

🤘💀🤘