Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Human Perception of Speed

Ben MacGowan
November 03, 2014

The Human Perception of Speed

As designers and developers we love to introduce animations and interactions into our interfaces. Bringing them to life and enriching our user's experience, but are we actually doing that? In this talk, Ben explores the fact that different people see and perceive speed differently and how we can use this information to influence the work we create.

Ben MacGowan

November 03, 2014

More Decks by Ben MacGowan

Other Decks in Programming


  1. @benmacgowan “ ” I believe we can do more with

    motion than purely entertain. We can use motion graphics to teach, to engage, and illustrate our conclusions. - Sarah Allen
  2. “ ” @benmacgowan female brains are highly connected across the

    left & right hemispheres. male brains are typically stronger between the front and back.
  3. @benmacgowan “ ” compared with women, the male volunteers were

    better able to identify the more rapidly changing images
  4. @benmacgowan Getting scientific • these elements of vision are linked

 sets of thalamic neurons in the brain’s 
 primary visual cortex • development of which are controlled by
 male sex organs - androgens • testosterone plays a major part
  5. @benmacgowan getting scientific • P300 wave is an event related

 (ERP) component linked to the process
 of decision making • This is thought to reflect processes 
 involved in stimulus evaluation and 
  6. @benmacgowan “ ” given the ubiquity of age-related slowing in

    cognitive and motor processes, slow movements seem like a natural real for older adults
  7. @benmacgowan “ ” In musicians, youth is frequently associated with

    breathtaking tempo and dramatic efforts, whereas deep expression and musicality remain privileges of matured artists and composers
  8. @benmacgowan .element { animation-duration: 2.6s; } .element { animation: keyframes

    2.5s; } .element { transition: width 2.5s; } $('.element').animate({ 'width': '200px' }, 2500);
  9. @benmacgowan .element { animation-duration: 2.6s; animation-timing-function: ease-in; } .element {

    animation: keyframes 2.5s ease-in-out; } .element { transition: width 2.5s cubic-bezier(0.220, 0.505, 0.875, 0.625); } $('.element').animate({ 'width': '200px' }, 2500, 'easein'); $.easing.bw = function(x, t, b, c, d) { ts=(t/=d)*t; tc=ts*t; return b+c*(25.8*tc*ts + -78.5*ts*ts + 89.6*tc + -47.4*ts + 11.50*t); } $('.element').animate({ 'width': '200px' }, 2500, 'bw');