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
   

   View Slide

2. me
   - Co-founder, Instagram
   - Previously: UX & Front-end
   @ Meebo
   - Stanford HCI BS/MS
   - @mikeyk on everything
   2
   

   View Slide

3. View Slide

4. 12 million users in 12
   months
   4
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. “Fast, beautiful photo
   sharing”
   9
   

   View Slide

10. “Fast, beautiful photo
    sharing”
    10
    

    View Slide

11. making your mobile
    experiences feel
    lightning-fast
    11
    

    View Slide

12. not the code, but the
    experience
    12
    

    View Slide

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

    View Slide

14. View Slide

15. speed matters
    15
    

    View Slide

16. mobile experiences fill
    gaps while we wait
    16
    

    View Slide

17. no one wants to wait
    while they wait
    17
    

    View Slide

18. JSON parsing
    UITableViewCell
    HTTP pipelining
    18
    

    View Slide

19. creative design decisions
    19
    

    View Slide

20. how speed can be a
    design feature
    20
    

    View Slide

21. how design can be a
    speed feature
    21
    

    View Slide

22. implementation details
    22
    

    View Slide

23. details that need to be
    designed
    23
    

    View Slide

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

    View Slide

25. 1. perform actions optimistically
    2. adaptively pre-load content
    3. move bits when no-one’s watching
    25
    

    View Slide

26. perform actions
    optimistically
    26
    

    View Slide

27. latency is what’ll get ya
    27
    

    View Slide

28. make the user feel
    productive
    28
    

    View Slide

29. View Slide

30. View Slide

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

    View Slide

32. View Slide

33. View Slide

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

    View Slide

35. View Slide

36. View Slide

37. if it fails?
    37
    

    View Slide

38. View Slide

39. View Slide

40. why it works
    40
    

    View Slide

41. @thesarahnator
    41
    

    View Slide

42. @stayintheshade
    42
    

    View Slide

43. adaptive pre-loading
    43
    

    View Slide

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

    View Slide

45. “let’s load all the images
    in the feed once the user
    loads the page”
    45
    

    View Slide

46. fresh feed
    30 photos to load
    46
    

    View Slide

47. pitfall
    47
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. instead...
    57
    

    View Slide

58. re-prioritize based on
    interest
    58
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

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

    View Slide

66. why it works
    66
    

    View Slide

67. @miriamjasmine
    67
    

    View Slide

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

    View Slide

69. sign-up
    69
    

    View Slide

70. View Slide

71. ?
    71
    

    View Slide

72. View Slide

73. View Slide

74. upload
    74
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. most apps upload here
    we start uploading here
    82
    

    View Slide

83. non-optimal engineering
    solution
    83
    

    View Slide

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

    View Slide

85. but makes uploads feel
    really, really quick
    85
    

    View Slide

86. send data/info as soon
    as part of it’s ready to go;
    match up later
    86
    

    View Slide

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

    View Slide

88. why it works
    88
    

    View Slide

89. where to go from here
    89
    

    View Slide

90. “it works” isn’t enough
    90
    

    View Slide

91. design & development
    collaboration
    91
    

    View Slide

92. View Slide

93. 1. perform actions optimistically
    2. adaptively pre-load content
    3. move bits when no-one’s watching
    93
    

    View Slide

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

    View Slide