This talk explains why performance optimisation works and how positive physical neural responses drive this. We take a look at what improves user experience and the perception of speed in an offline state and how this can be translated to the web in order to drive performance and growth.

1. ERUDITE
@NicholaStott
Let’s Get Physical –
Making the Journey Feel
Better, to Drive Growth
N I C H O L A S T O T T

2. This talk is about why performance
optimisation works and how positive
physical neural responses drive this.

3. No matter what, faster is better and
less is more.
Source: Think with Google

4. We know that slow
experiences lead to
negative responses.
Source: Google/SOASTA 2017

5. We know that slow experiences lead to extremely negative
emotional responses.
Source: Ericsson

6. Optimised sites
convert better.

7. Halved
Page Load
Time on
Mobile

8. An additional £2.35 million in revenue to August 2018

9. Understanding why this was
so successful may help
uncover more opportunities
for growth.

10. We’re going to look at what we found out
and the tactics we used…

11. but first,
imagine this.

12. We can spend weeks
considering a purchase,
researching a product,
refining our options;
only to abandon an
attempt-to-purchase
within seconds if a site
is too slow.

13. Humans are
Irrational.

14. Getting something free feels good. Zero
is not just another price… Zero is an
emotional hot button.
Source: Dan Ariely – Predictably Irrational

15. The free corporate merchandise
that ends up in landfill
The free coffee that gets you to
spend £10 on lunch in a place you
never go
Buy two get the third one free

16. The point is that we’re not just irrational, we
are predictably irrational.

17. Behavioural Economics to
Neuroscience.

18. We started by looking into things that
people find extremely pleasurable and
rewarding online…

19. • Mirror Neurons. • Mirror Neurons. • Mirror Neurons. #oddlysatifying

21. 28.6
MILLION

23. 26
MILLION

24. Autonomous Sensory Meridian Response
(ASMR) . Pleasant tingling sensation in the
back of the head or neck. Experienced by
seemingly millions of people.
Source: Pete Etchells – The Guardian

25. Mirror Neurons.

26. In essence, viewers are deriving pleasure
from these videos as if they were actually
conducting the action themselves.
Source: Dr. Anita Deak - Wired

27. 266
MILLION

28. Could explain why an online experience is
pleasurable, but what about satisfying?

29. Dopamine.

30. Dopamine travels through a few neural
pathways but in particular, the mesolimbic,
which controls reward and emotion.
Source: Emily Deans M.D. Psychology Today

31. Gamification Application of game mechanics
into a situation
Leverages desires and motives
Reward is intrinsic. It is the
playing of the game not the object

32. Behavioural design. This isn’t new. This is
the application of video game mechanics to
ecommerce.

33. GluedtoGames
Source: Scott Rigby & Richard Ryan
Competency Autonomy Relatedness

34. Competency As fast as possible so each request
brings immediate reward
Utilise tactics to reward actions
Introduce satisfying devices to
encourage users to next levels

35. Tactics
SITE SPEED HAPTICS SIGNPOSTS

36. Site Speed.

37. Request prioritisation
Minimise protocol
overhead
Reduce latency
significantly
HTTP/2

38. Multiplexing: multiple HTTP requests
are sent and received asynchronously
via a single TCP connection.

39. HTTP1/1SingleConnection
Platform 9

40. HTTP/2Multiplexed
Platform 9
Single TCP
Connection

41. SmartBrowser
Platform 9
Allows for stream
prioritisation
JS CSS
Hero
Image

42. Image Optimisation

43. CREATE COMPRESS CLIENT
New compression
algorithms and IMG
formats
TheThreeCs

44. <picture>
HTML5 element is a
multiple choice container.
The browser determines
the optimal image for the
client.
CREATE

45. Use compression tools
where possible. Consider
formats like webP can
reduce size >70%.
Gracefully degrades.
COMPRESSCOMPRESS

46. Lazy loading of non-
critical resources.
Extremely valuable for
mobile clients, where non-
critical e.g. off-screen
images.
COMPRESSCOMPRESSCLIENT

47. Haptics.

48. Simply put, haptic feedback (commonly
referred to as haptics) is the use of touch
feedback to the end user.
Source: Android Central

49. 01
02
03
01
02
03
The ‘Match 3’ mobile genre is killing the haptics game.

50. 01 Creates dopamine reward.
Action gets immediate
reaction
02 Haptic response satisfies
competency if event is slow
03 Improves accessibility
Breathe App

51. MAGNA&IPGMediaLab
Partnered with Immersion to test
touch-enabled mobile video using
haptics.
Source: CMO - Adobe

52. 62% increase in feelings of
connection to brands.
Source: IPGLab - Infographic

53. Ads with touch-effects elicit more
happiness and excitement
Source: IPGLab - Infographic
26%
Increase in
Excitement
19%
Increase in
Happiness

54. More effective at driving purchase
intent among potential new customers
Source: IPGLab - Infographic
67%
Increase in
Purchase
Intent

55. Not just apps, enable haptics on your
website using Haptics.js – on HTML5
browsers/Android clients

56. Signposts.

57. Extend the definition to more than animated progress bars, which do provide great UX but
don’t fit our brief of a positive physical response.
Source: Think with Google

58. 30% of users will still perceive them to
be slower than they really are. Create
devices that occupy their time.
Source: Mustafa Kurtuldu – Google Design Advocate

61. 30%
increase in
customers
progressing
to the basket

62. So what’s next
for the near
Future?

63. Progressive Web Apps.

64. Progressive Web Apps provide fast, reliable
& engaging, web app experiences,
regardless of the network state.

65. Consumers spend 60% of their total mobile
time in only 3 apps, most of which are
owned by Facebook and Google.
Source: Ted Schadler – Drunk History of Your Mobile Strategy

66. Instantly Loads: Loads all
cached content instantly
Offline Loading: Site is accessible
in areas with low or no connectivity
Add to home screen: Access like a
native APP (Playstore on Android)
PWA Benefits

67. Source Mobify: 2017 Q1 Mobile Commerce Insights Report
Push notifications

68. PWA requirements

69. 01
02
03
HTTPS: is the site served
over HTTPS?
HTTP2: Multiplexing
Service Worker: does the site
register a Service Worker?

70. 04
05
06
Speed: <10,000 TTFI/CI
Add to Home Screen: user
prompt ‘‘Add to Home Screen’’?
Responsive design

71. Halved
Improved
load time
4sec
Load on 3G
network

72. 150%
increase in
add to home
screen
67%
Increase in
offline usage
Source: PWA Stat

73. 50K
core app
when gzipped
3sec
Load on 2G
network
Source: PWA Stat

74. Cut load times
from 11.91
secs to
4.96
90%
Smaller than
its Android
App
Source: PWA Stat

75. Performance optimisation tactics like
speed, haptics and signposts please,
satisfy and reward the customer,
driving significant growth.

76. Get the slides
here
https://www.slideshare.net/NicholaStott