Secrets to Lightning Fast Mobile Design

Transcript

1. 1.

   Secrets to Lightning- Fast Mobile Design Warm Gun 2011 Mike

   Krieger Instagram 1
2. 2.

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

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

   3

4. 4.

   12 million users in 12 months 4

5. 5.

   5

6. 6.

   6

7. 7.

   7

8. 8.

   8

9. 9.

   “Fast, beautiful photo sharing” 9

10. 10.

    “Fast, beautiful photo sharing” 10

11. 11.

    making your mobile experiences feel lightning-fast 11

12. 12.

    not the code, but the experience 12

13. 13.

    mobile design requires the ultimate in design & development collaboration

    13
14. 14.

    14

15. 15.

    speed matters 15

16. 16.

    mobile experiences fill gaps while we wait 16

17. 17.

    no one wants to wait while they wait 17

18. 18.

    JSON parsing UITableViewCell HTTP pipelining 18

19. 19.

    creative design decisions 19

20. 20.

    how speed can be a design feature 20

21. 21.

    how design can be a speed feature 21

22. 22.

    implementation details 22

23. 23.

    details that need to be designed 23

24. 24.

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

    24
25. 25.

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

    bits when no-one’s watching 25
26. 26.

    perform actions optimistically 26

27. 27.

    latency is what’ll get ya 27

28. 28.

    make the user feel productive 28

29. 29.

    29

30. 30.

    30

31. 31.

    request is going, but we register the like 31

32. 32.

    32

33. 33.

    33

34. 34.

    request is going, but we register the comment 34

35. 35.

    35

36. 36.

    36

37. 37.

    if it fails? 37

38. 38.

    38

39. 39.

    39

40. 40.

    why it works 40

41. 41.

    @thesarahnator 41

42. 42.

    @stayintheshade 42

43. 43.

    adaptive pre-loading 43

44. 44.

    basic version: load content before it’s needed 44

45. 45.

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

    user loads the page” 45
46. 46.

    fresh feed 30 photos to load 46

47. 47.

    pitfall 47

48. 48.

    48

49. 49.

    49

50. 50.

    50

51. 51.

    51

52. 52.

    52

53. 53.

    53

54. 54.

    54

55. 55.

    55

56. 56.

    56

57. 57.

    instead... 57

58. 58.

    re-prioritize based on interest 58

59. 59.

    59

60. 60.

    60

61. 61.

    61

62. 62.

    62

63. 63.

    63

64. 64.

    64

65. 65.

    listen to what their flicks & taps are telling you

    65
66. 66.

    why it works 66

67. 67.

    @miriamjasmine 67

68. 68.

    move bits when no-one’s watching 68

69. 69.

    sign-up 69

70. 70.

    70

71. 71.

    ? 71

72. 72.

    72

73. 73.

    73

74. 74.

    upload 74

75. 75.

    75

76. 76.

    76

77. 77.

    77

78. 78.

    78

79. 79.

    79

80. 80.

    80

81. 81.

    81

82. 82.

    most apps upload here we start uploading here 82

83. 83.

    non-optimal engineering solution 83

84. 84.

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

    84
85. 85.

    but makes uploads feel really, really quick 85

86. 86.

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

    go; match up later 86
87. 87.

    worth it even if you throw out the data on

    cancel 87
88. 88.

    why it works 88

89. 89.

    where to go from here 89

90. 90.

    “it works” isn’t enough 90

91. 91.

    design & development collaboration 91

92. 92.

    92

93. 93.

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

    bits when no-one’s watching 93
94. 94.

    Qs? we’re hiring: jobs@instagram.com get in touch: @mikeyk 94