Secrets to Lightning Fast Mobile Design

401b07f62a1f23221cfe55e73bf8a813?s=47 Mike Krieger
December 06, 2011
Technology
253
160k

Secrets to Lightning Fast Mobile Design

Presentation given at Warm Gun 2011.

401b07f62a1f23221cfe55e73bf8a813?s=128

Mike Krieger

December 06, 2011
Tweet

More Decks by Mike Krieger

See All by Mike Krieger
401b07f62a1f23221cfe55e73bf8a813?s=48 mikeyk
15
3.5k
401b07f62a1f23221cfe55e73bf8a813?s=48 mikeyk
159
47k

Other Decks in Technology

See All in Technology
2564c99f616f1ecfc0f617a6fe87e2a9?s=48 penguin045
0
160
253ab1300a7e9526141c2f15d3cb4ae7?s=48 shinpy
0
110
61a68b2172503ecdf7a7f7757df56071?s=48 toyship
0
330
Cb4d62dd7c1d325863696c45e9b6484d?s=48 yaminoma
1
130
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
380
88964b936e864ca7d326272eaa70fa9a?s=48 hgsgtk
0
500
3bf6da1f63cd8b7a2f802f95c269ed80?s=48 fromatom
5
700
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
150
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
140
847a328633b1df6b11cc2f72430025e6?s=48 ks91
0
170
Ac85568dfa460d48c36095d142632b1a?s=48 wps
0
130
C786d7772602b488a7972c38c143f61c?s=48 con_mame
3
1.8k

Featured

See All Featured
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
8
590
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
204
6.7k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
51
3.9k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
250
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
110k
245cee81a9c424266e5e401d844ea881?s=48 lara
589
60k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
266
16k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
499
36k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
315
18k

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: jobs@instagram.com get in touch: @mikeyk 94