Perception Of Speed

What's our main complaint when we use an application?

- Speed!

We all expect speed. We want to access everything from the point of our fingers and we want that as fast as possible. When an application is taking to long to open or process some data I bet you also feel the urge to search for another solution - or just to throw your smartphone against the nearest wall in despair. And while you think about this, you’re looking at that never ending spinner… that... it just doesn't seem to go away.

- Google Play and the App Store are full of similar solutions... Why should I bother to keep using this one?

We can make all sort of optimisations on our code - and yet, sometimes, we can't really make that process as fast as we wanted. There are always some constraints that we can't really avoid - device limitations, network, server, etc. but we can create the illusion of speed - a visual aid that keeps the user busy while, on the background, we are processing his action.

Yes. Time is relative and we want the users to feel that every action is as responsible as possible.

Transcript

1. Perception of Speed The Illusionists +Carlos Mota @cafonsomota cafonsomota@gmail.com
2. *sigh* this application takes forever to load… - everyone 2
4. WAITING FOR AN APP TO LOAD? AIN’T NOBODY GOT TIME FOR THAT
5. 1 - Hardware 2 - Software 3 - Perception Usain  Bolt:  100m  in  just  9.58s 5
6. First Act The Pledge
7. 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
8. Second Act The Turn
9. 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
11. Premature optimization is the root of all evil. - Donald Kruth 11
12. Premature optimization is the root of all evil. - Donald Kruth
13. 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
14. Performance  Tips Using floating-point is 2x slower than integer on Android- powered devices? Did you know: On Android Developers blog 14
15. JSON vs XML vs SOAP
16. 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
17. 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
18. Advanced version of ListView Higher performance Higher flexibility View Holder pattern Built-in (beautifully) animation library Backward supported until Android 2.1 RecyclerView 18
19. Usain  Bolt:  200m  in  just  19.19s 19
20. 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
21. Performance  Tips 21 UPDATE UPDATE UPDATE draw 16ms draw 16ms 16ms Goal: 60fps
22. 24ms UPDATE Performance  Tips 22 UPDATE draw 16ms draw 34ms dropped frame
23. Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript Performance  Tips 23 PerceptionOfSpeed Lorem ipsum dolor sit amet
24. Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript Performance  Tips 24 Lorem ipsum dolor sit amet PerceptionOfSpeed
25. Reduce view hierarchy Avoid overdraw Use hardware acceleration RenderScript Performance  Tips 25 Lorem ipsum dolor sit amet PerceptionOfSpeed
26. 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
27. 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
28. 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
29. 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
30. Performance  Tips do work that you don’t need to allocate memory if you can avoid it fetch everything Don’t 30
31. Profilling 31
32. Third Act The Prestige
33. Performance Relative
36. Bull Riders - The longest 8 seconds 36
37. Human mission to Mars - Approximately two years 37
38. The  Oddball  Effect 38
39. The  Oddball  Effect 39
41. 41 How long?
42. Perception of Speed
43. 43 Baggage claim case study
44. Perception of Speed Going too fast
45. Creating new blog 45
46. Abracadabra
47. 400 Millions Monthly active users Instagram 47
48. 80 Millions Photos per day Instagram 48
49. 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
50. Perform  actions  optimistically 50 Make your experiences feel lightning-fast
51. Perform  actions  optimistically 51 Make your experiences feel lightning-fast
52. give feedback Perform  actions  optimistically 52 What if it fails?
53. Adaptively  pre-­‐load  content 53 it’s needed load content before
54. Adaptively  pre-­‐load  content 54 it’s needed load interesting content before
55. Move  bits  when  no-­‐one’s  watching 55 Instagram’s upload starts here Most apps upload here
56. Move  bits  when  no-­‐one’s  watching 56 Feedback
57. Performance Relative Experimental
58. <100ms <1s 10s Usain  Bolt:  300m  in  just  30.97s - - - Feels instantaneous Keep flow of thought Keep attention 58 by Jakob Nielsen, Usability Engineering
59. <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
60. Performance  Tips 60 UPDATE UPDATE UPDATE draw 16ms draw 16ms 16ms Goal: 60fps
61. <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
62. Find  the  still  image
63. Busy  Indicators 63
64. Indicate  Status 64
65. Make  waiting  more  interesting 65 animations Beautifully crafted that the user distract
66. Visual
67. 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:
68. Avoid  the  Spinner 68
69. “The”  Splash  Screen 69 No need to be launching the Splash Screen over and over again
70. 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
71. Remove  network  from  user  flow 71 View Controller Network Model
72. Adaptative  behaviour 72 Is my network fast? Yes Auto play Tap to play No
73. Skeleton 73
74. Paper 74
75. Paper 75 An astonishing brilliant app capable to entertain the user for hours. - me
76. 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
77. Paper 77 bouncing animations, paired with text resizing/relocating Subtle
78. Fill  content 78 Skeleton app Text automatically rendered Staggered loading Color filling Smooth transitions
79. Google  Plus  App 79 New posts! Touch to see them Detect new posts Notify user Fetch content Refresh UI
80. 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
81. A/B Testing
82. Performance Relative Experimental Ongoing
83. Learn to care Convince others to care Be creative Always keep the user in mind Eat your own dog food 83 Ongoing  performance
84. For my next trick…
85. Give instant feedback Perform tasks in background Dummy content 85 Keep  in  mind
86. +Carlos Mota @cafonsomota cafonsomota@gmail.com