Secrets to Lightning Fast Mobile Design

Presentation given at Warm Gun 2011.

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