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

Secrets to Lightning Fast Mobile Design

Avatar for Mike Krieger Mike Krieger
December 06, 2011
Technology
170k
251

Secrets to Lightning Fast Mobile Design

Presentation given at Warm Gun 2011.

Avatar for Mike Krieger

Mike Krieger

December 06, 2011

More Decks by Mike Krieger

See All by Mike Krieger
Scaling Instagram at AirBnB OpenAir 2015
Avatar for Mike Krieger mikeyk
15
4.4k
Scaling Instagram
Avatar for Mike Krieger mikeyk
154
49k

Other Decks in Technology

See All in Technology
オンコールの負荷軽減のためのBits Assistant 活用方法 / How to Use Bits Assistant to Reduce the Workload on On-Call Staff
Avatar for SMS tech sms_tech
1
350
権限管理設計を完全に理解した
Avatar for r-sugi rsugi
2
240
脅威をエンジニアリングの糧にして：恐怖を乗り越えた先にあったもの / Turn threats into fuel for engineering: what lay beyond overcoming fear
Avatar for nrs nrslib
1
360
大規模災害時でも高い信頼性を維持するアプリケーション基盤の実現/nikkei-tech-talk46
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
120
Dynamic Workersについて
Avatar for Yusuke Wada yusukebe
2
510
はじめてのDatadog
Avatar for KairiM kairim0
0
240
Oracle Cloud Infrastructure：2026年5月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
1
270
AI フレンドリーなエラー監視を TypeScript で実現する
Avatar for Shinobu Hayashi shinyaigeek
2
190
「使われるデータ基盤」を目指してデータアナリストとワークショップをやった話
Avatar for jackojacko_ jackojacko_
2
940
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
Spring Boot における​ AOT Cache 活用テクニックと​ 起動時間改善事例​
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
180
AI時代の私の技術インプットとアウトプット術
Avatar for tonkotsuboy_com tonkotsuboy_com
15
8k

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
210
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
130
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.8k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
200
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.9k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.3k

Transcript

  1. Secrets to Lightning- Fast Mobile Design Warm Gun 2011 Mike

    Krieger Instagram 1

  2. me - Co-founder, Instagram - Previously: UX & Front-end @

    Meebo - Stanford HCI BS/MS - @mikeyk on everything 2

  3. 3

  4. 12 million users in 12 months 4

  5. 5

  6. 6

  7. 7

  8. 8

  9. “Fast, beautiful photo sharing” 9

  10. “Fast, beautiful photo sharing” 10

  11. making your mobile experiences feel lightning-fast 11

  12. not the code, but the experience 12

  13. mobile design requires the ultimate in design & development collaboration

    13

  14. 14

  15. speed matters 15

  16. mobile experiences fill gaps while we wait 16

  17. no one wants to wait while they wait 17

  18. JSON parsing UITableViewCell HTTP pipelining 18

  19. creative design decisions 19

  20. how speed can be a design feature 20

  21. how design can be a speed feature 21

  22. implementation details 22

  23. details that need to be designed 23

  24. 3 secrets to apps that feel lightning-fast, even on 3G

    24

  25. 1. perform actions optimistically 2. adaptively pre-load content 3. move

    bits when no-one’s watching 25

  26. perform actions optimistically 26

  27. latency is what’ll get ya 27

  28. make the user feel productive 28

  29. 29

  30. 30

  31. request is going, but we register the like 31

  32. 32

  33. 33

  34. request is going, but we register the comment 34

  35. 35

  36. 36

  37. if it fails? 37

  38. 38

  39. 39

  40. why it works 40

  41. @thesarahnator 41

  42. @stayintheshade 42

  43. adaptive pre-loading 43

  44. basic version: load content before it’s needed 44

  45. “let’s load all the images in the feed once the

    user loads the page” 45

  46. fresh feed 30 photos to load 46

  47. pitfall 47

  48. 48

  49. 49

  50. 50

  51. 51

  52. 52

  53. 53

  54. 54

  55. 55

  56. 56

  57. instead... 57

  58. re-prioritize based on interest 58

  59. 59

  60. 60

  61. 61

  62. 62

  63. 63

  64. 64

  65. listen to what their flicks & taps are telling you

    65

  66. why it works 66

  67. @miriamjasmine 67

  68. move bits when no-one’s watching 68

  69. sign-up 69

  70. 70

  71. ? 71

  72. 72

  73. 73

  74. upload 74

  75. 75

  76. 76

  77. 77

  78. 78

  79. 79

  80. 80

  81. 81

  82. most apps upload here we start uploading here 82

  83. non-optimal engineering solution 83

  84. 2 requests, 2 round-trips + latency need to match up

    84

  85. but makes uploads feel really, really quick 85

  86. send data/info as soon as part of it’s ready to

    go; match up later 86

  87. worth it even if you throw out the data on

    cancel 87

  88. why it works 88

  89. where to go from here 89

  90. “it works” isn’t enough 90

  91. design & development collaboration 91

  92. 92

  93. 1. perform actions optimistically 2. adaptively pre-load content 3. move

    bits when no-one’s watching 93

  94. Qs? we’re hiring: [email protected] get in touch: @mikeyk 94