Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 full-size slide

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

    View full-size slide

  3. 12 million users in 12
    months
    4

    View full-size slide

  4. “Fast, beautiful photo
    sharing”
    9

    View full-size slide

  5. “Fast, beautiful photo
    sharing”
    10

    View full-size slide

  6. making your mobile
    experiences feel
    lightning-fast
    11

    View full-size slide

  7. not the code, but the
    experience
    12

    View full-size slide

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

    View full-size slide

  9. speed matters
    15

    View full-size slide

  10. mobile experiences fill
    gaps while we wait
    16

    View full-size slide

  11. no one wants to wait
    while they wait
    17

    View full-size slide

  12. JSON parsing
    UITableViewCell
    HTTP pipelining
    18

    View full-size slide

  13. creative design decisions
    19

    View full-size slide

  14. how speed can be a
    design feature
    20

    View full-size slide

  15. how design can be a
    speed feature
    21

    View full-size slide

  16. implementation details
    22

    View full-size slide

  17. details that need to be
    designed
    23

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. perform actions
    optimistically
    26

    View full-size slide

  21. latency is what’ll get ya
    27

    View full-size slide

  22. make the user feel
    productive
    28

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. if it fails?
    37

    View full-size slide

  26. why it works
    40

    View full-size slide

  27. @thesarahnator
    41

    View full-size slide

  28. @stayintheshade
    42

    View full-size slide

  29. adaptive pre-loading
    43

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. fresh feed
    30 photos to load
    46

    View full-size slide

  33. instead...
    57

    View full-size slide

  34. re-prioritize based on
    interest
    58

    View full-size slide

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

    View full-size slide

  36. why it works
    66

    View full-size slide

  37. @miriamjasmine
    67

    View full-size slide

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

    View full-size slide

  39. most apps upload here
    we start uploading here
    82

    View full-size slide

  40. non-optimal engineering
    solution
    83

    View full-size slide

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

    View full-size slide

  42. but makes uploads feel
    really, really quick
    85

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. why it works
    88

    View full-size slide

  46. where to go from here
    89

    View full-size slide

  47. “it works” isn’t enough
    90

    View full-size slide

  48. design & development
    collaboration
    91

    View full-size slide

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

    View full-size slide

  50. Qs?
    we’re hiring: [email protected]
    get in touch: @mikeyk
    94

    View full-size slide