Perception of Speed The Illusionists +Carlos Mota @cafonsomota [email protected]

*sigh* this application takes forever to load… - everyone 2

3

WAITING FOR AN APP TO LOAD? AIN’T NOBODY GOT TIME FOR THAT

1 - Hardware 2 - Software 3 - Perception Usain  Bolt:  100m  in  just  9.58s 5

First Act The Pledge

Usain  Bolt:  150m  in  just  14.35s 1983 Motorola DynaTAC 8000X dark ages First cellphone ever 1993 BellSouth/IBM Simon First phone/PDA combo Apps: alarm, calculator… Stores up to 30 contacts Nokia 9000 First smartphone 8MB Storage 1996 2000 Nokia 3310 Snake iPhone 6S iOS 9 Dual-core 1.84GHz PowerVR GT7600 2015 12 MP (2160p) Apple Pay, Fingerprint… LG Nexus 5x 2GB RAM (Apple A9) Android M Quad-core 1.44GHz Adreno 418 12 MP (2160p) NFC, Fingerprint… 2GB RAM (Snapdragon) 1999 Sam sung SPH-M 100 M P3 2002 Sanyo SCP-5300 Cam era 2008 iPhone 3G T-Mobile G1/ HTC Dream Android 1.5 iOS 2.0 528 MHz ARM 11 192 MB RAM 412 MHz ARM 11 128 MB RAM 7

Second Act The Turn

There are mobile experiences out there that are so good, that … we need to have the highest quality, and the only way is doing native. - Mark Zuckerberg, CEO of Facebook, about changing the app from HTML5 to native 9

No content

Premature optimization is the root of all evil. - Donald Kruth 11

Premature optimization is the root of all evil. - Donald Kruth

Performance  Tips In JAVA using the for-each loop is 3x faster to iterate over a list than the for loop? Did you know: On effective Java by Joshua Bloch 13

Performance  Tips Using floating-point is 2x slower than integer on Android- powered devices? Did you know: On Android Developers blog 14

JSON vs XML vs SOAP

Performance  Study:  REST  vs  SOAP  for  Mobile  Applications Oracle A-Team Samsung Galaxy S4 iPhone 4S iPad 2 Time in (ms) 0 2500 5000 7500 10000 SOAP REST-XML REST-JSON 16

Data  format JSON { "pages": [ { "id": "lets_get_started", "title_string_key": "wizard_title_1page", "text_string_key": "wizard_details_1page", "image_name": bg_oobe_lets_get_started”, "can_show_again": true, "mandatory": false, "active": true }, { "id": "time_to_chat", "title_string_key": "wizard_title_2page", "text_string_key": "wizard_details_2page", "image_name": "bg_oobe_time_to_chat", "can_show_again": true, "mandatory": false, "active": true }, { "id": "share_life", "title_string_key": "wizard_title_3page", "text_string_key": "wizard_details_3page", "image_name": "bg_oobe_share_life", "can_show_again": true, "mandatory": false, "active": true }, { "id": "call_friends", "title_string_key": "wizard_title_4page", "text_string_key": "wizard_details_4page", "image_name": "bg_oobe_call_friends", "can_show_again": true, "mandatory": false, "active": true }, { "id": "fun_for_all", "title_string_key": "wizard_title_5page", "text_string_key": "wizard_details_5page", "image_name": "bg_oobe_fun_for_all", "can_show_again": true, "mandatory": false, "active": true }, { "id": "smart_calling", "title_string_key": "wizard_title_7page", "text_string_key" : "wizard_details_7page", "image_name": "bg_oobe_smart_calling", "can_show_again" : true, "mandatory" : false, "active" : true }, { "id": “start_messaging", "title_string_key": "wizard_title_8page", "text_string_key": "wizard_details_8page", "image_name": “bg_oobe_start_messaging", "can_show_again": true, "mandatory": false, "active": true }, { "id": “start_calling", "title_string_key": "wizard_title_9page", "text_string_key" : "wizard_details_9page", "image_name": "bg_oobe_start_calling", "can_show_again" : true, "mandatory" : false, "active" : true }, { "id": "add_shortcut", "fragment": “com.app.oobe.OobePageFragment", "can_show_again": false, "mandatory": true, "active": true } ] } 17

Advanced version of ListView Higher performance Higher flexibility View Holder pattern Built-in (beautifully) animation library Backward supported until Android 2.1 RecyclerView 18

Usain  Bolt:  200m  in  just  19.19s 19

Performance  Tips Activity loads in ~400ms Avoid using the UI-thread for long running operations Don’t try to reinvent the wheel Open-source libraries (used by millions) Support package for backwards compatibility 20

Performance  Tips 21 UPDATE UPDATE UPDATE draw 16ms draw 16ms 16ms Goal: 60fps

24ms UPDATE Performance  Tips 22 UPDATE draw 16ms draw 34ms dropped frame

Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript Performance  Tips 23 PerceptionOfSpeed Lorem ipsum dolor sit amet

Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript Performance  Tips 24 Lorem ipsum dolor sit amet PerceptionOfSpeed

Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript Performance  Tips 25 Lorem ipsum dolor sit amet PerceptionOfSpeed

Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript Performance  Tips 26 Lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit PerceptionOfSpeed

Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript john doe jane doe john doe john doe jane doe john doe 5 mins ago 5 mins ago 15 mins ago 35 mins ago 1 hour ago 1 hour ago Performance  Tips 27 Lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit PerceptionOfSpeed

Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript john doe jane doe john doe john doe jane doe john doe 5 mins ago 5 mins ago 15 mins ago 35 mins ago 1 hour ago 1 hour ago Performance  Tips 28 Lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit PerceptionOfSpeed

Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript john doe jane doe john doe john doe jane doe john doe 5 mins ago 5 mins ago 15 mins ago 35 mins ago 1 hour ago 1 hour ago Performance  Tips 29 Lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit PerceptionOfSpeed

Performance  Tips do work that you don’t need to allocate memory if you can avoid it fetch everything Don’t 30

Profilling 31

Third Act The Prestige

Performance Relative

34

35

Bull Riders - The longest 8 seconds 36

Human mission to Mars - Approximately two years 37

The  Oddball  Effect 38

The  Oddball  Effect 39

No content

41 How long?

Perception of Speed

43 Baggage claim case study

Perception of Speed Going too fast

Creating new blog 45

Abracadabra

400 Millions Monthly active users Instagram 47

80 Millions Photos per day Instagram 48

1 - Perform actions optimistically 2 - Adaptively pre-load content 3 - Move bits when no-one’s watching Instagram’s  Manifesto according to Mike Krieger, Instagram’s co-founder 49

Perform  actions  optimistically 50 Make your experiences feel lightning-fast

Perform  actions  optimistically 51 Make your experiences feel lightning-fast

give feedback Perform  actions  optimistically 52 What if it fails?

Adaptively  pre-­‐load  content 53 it’s needed load content before

Adaptively  pre-­‐load  content 54 it’s needed load interesting content before

Move  bits  when  no-­‐one’s  watching 55 Instagram’s upload starts here Most apps upload here

Move  bits  when  no-­‐one’s  watching 56 Feedback

Performance Relative Experimental

<100ms <1s 10s Usain  Bolt:  300m  in  just  30.97s - - - Feels instantaneous Keep flow of thought Keep attention 58 by Jakob Nielsen, Usability Engineering

<16ms <100ms <1s >1s Usain  Bolt:  400m  in  just  45.28s - - - - Like butter Lower is better Give them a break All hell breaks lose by Allen Pike, steam clock software 59

Performance  Tips 60 UPDATE UPDATE UPDATE draw 16ms draw 16ms 16ms Goal: 60fps

<16ms <100ms <1s >1s Usain  Bolt:  400m  in  just  45.28s - - - - Like butter Lower is better Give them a break All hell breaks lose by Allen Pike, steam clock software 61

Find  the  still  image

Busy  Indicators 63

Indicate  Status 64

Make  waiting  more  interesting 65 animations Beautifully crafted that the user distract

Visual

Avoid  the  Spinner 67 There seems to be an excessive amount of waiting around for pages to refresh and load - it doesn't seem as quick as the previous version. - users After adding a spinner to an empty view:

Avoid  the  Spinner 68

“The”  Splash  Screen 69 No need to be launching the Splash Screen over and over again

Remove  network  from  user  flow 70 Liking photo… Cancel A few more seconds… We’re really trying to make this request work. How are you today? Çup? Done! We’re going to dismiss the dialog now A few seconds… View Controller Network

Remove  network  from  user  flow 71 View Controller Network Model

Adaptative  behaviour 72 Is my network fast? Yes Auto play Tap to play No

Skeleton 73

Paper 74

Paper 75 An astonishing brilliant app capable to entertain the user for hours. - me

Paper 76 The perception of the response time is minimised by the app animation. Paper starts to load things before you’ve fully expanded the card. fluid Keeps browsing and fast

Paper 77 bouncing animations, paired with text resizing/relocating Subtle

Fill  content 78 Skeleton app Text automatically rendered Staggered loading Color filling Smooth transitions

Google  Plus  App 79 New posts! Touch to see them Detect new posts Notify user Fetch content Refresh UI

Average time: 3.00s Google  Plus  App 80 New posts! Touch to see them Detect new posts Notify user Fetch content Refresh UI Detect new posts Fetch content Notify user Refresh UI Average time: 0.35s Perceived speed increased 9x

A/B Testing

Performance Relative Experimental Ongoing

Learn to care Convince others to care Be creative Always keep the user in mind Eat your own dog food 83 Ongoing  performance

For my next trick…

Give instant feedback Perform tasks in background Dummy content 85 Keep  in  mind

+Carlos Mota @cafonsomota [email protected]