Perception Of Speed

D8a3623b157508fecdae1f8e756f362f?s=47 cmota
August 15, 2016

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.

D8a3623b157508fecdae1f8e756f362f?s=128

cmota

August 15, 2016
Tweet

Transcript

  1. Perception of Speed The Illusionists +Carlos Mota @cafonsomota cafonsomota@gmail.com

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

  3. 3

  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
  10. None
  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

  34. 34

  35. 35

  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

  40. None
  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