$30 off During Our Annual Pro Sale. View Details »

Secrets to Lightning Fast Mobile Design

Mike Krieger
December 06, 2011

Secrets to Lightning Fast Mobile Design

Presentation given at Warm Gun 2011.

Mike Krieger

December 06, 2011
Tweet

More Decks by Mike Krieger

Other Decks in Technology

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. 3

    View Slide

  4. 12 million users in 12
    months
    4

    View Slide

  5. 5

    View Slide

  6. 6

    View Slide

  7. 7

    View Slide

  8. 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. 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. 29

    View Slide

  30. 30

    View Slide

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

    View Slide

  32. 32

    View Slide

  33. 33

    View Slide

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

    View Slide

  35. 35

    View Slide

  36. 36

    View Slide

  37. if it fails?
    37

    View Slide

  38. 38

    View Slide

  39. 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. 48

    View Slide

  49. 49

    View Slide

  50. 50

    View Slide

  51. 51

    View Slide

  52. 52

    View Slide

  53. 53

    View Slide

  54. 54

    View Slide

  55. 55

    View Slide

  56. 56

    View Slide

  57. instead...
    57

    View Slide

  58. re-prioritize based on
    interest
    58

    View Slide

  59. 59

    View Slide

  60. 60

    View Slide

  61. 61

    View Slide

  62. 62

    View Slide

  63. 63

    View Slide

  64. 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. 70

    View Slide

  71. ?
    71

    View Slide

  72. 72

    View Slide

  73. 73

    View Slide

  74. upload
    74

    View Slide

  75. 75

    View Slide

  76. 76

    View Slide

  77. 77

    View Slide

  78. 78

    View Slide

  79. 79

    View Slide

  80. 80

    View Slide

  81. 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. 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: [email protected]
    get in touch: @mikeyk
    94

    View Slide