Presentation given at Warm Gun 2011.
Secrets to Lightning-Fast Mobile DesignWarm Gun 2011Mike KriegerInstagram1
View Slide
me- Co-founder, Instagram- Previously: UX & Front-end@ Meebo- Stanford HCI BS/MS- @mikeyk on everything2
3
12 million users in 12months4
5
6
7
8
“Fast, beautiful photosharing”9
“Fast, beautiful photosharing”10
making your mobileexperiences feellightning-fast11
not the code, but theexperience12
mobile design requiresthe ultimate in design &developmentcollaboration13
14
speed matters15
mobile experiences fillgaps while we wait16
no one wants to waitwhile they wait17
JSON parsingUITableViewCellHTTP pipelining18
creative design decisions19
how speed can be adesign feature20
how design can be aspeed feature21
implementation details22
details that need to bedesigned23
3 secrets to apps thatfeel lightning-fast, evenon 3G24
1. perform actions optimistically2. adaptively pre-load content3. move bits when no-one’s watching25
perform actionsoptimistically26
latency is what’ll get ya27
make the user feelproductive28
29
30
requestis going, butwe register thelike31
32
33
requestis going, butwe register thecomment34
35
36
if it fails?37
38
39
why it works40
@thesarahnator41
@stayintheshade42
adaptive pre-loading43
basic version: loadcontent before it’sneeded44
“let’s load all the imagesin the feed once the userloads the page”45
fresh feed30 photos to load46
pitfall47
48
49
50
51
52
53
54
55
56
instead...57
re-prioritize based oninterest58
59
60
61
62
63
64
listen to what their flicks& taps are telling you65
why it works66
@miriamjasmine67
move bits whenno-one’s watching68
sign-up69
70
?71
72
73
upload74
75
76
77
78
79
80
81
most apps upload herewe start uploading here82
non-optimal engineeringsolution83
2 requests, 2 round-trips+ latencyneed to match up84
but makes uploads feelreally, really quick85
send data/info as soonas part of it’s ready to go;match up later86
worth it even if you throwout the data on cancel87
why it works88
where to go from here89
“it works” isn’t enough90
design & developmentcollaboration91
92
1. perform actions optimistically2. adaptively pre-load content3. move bits when no-one’s watching93
Qs?we’re hiring: [email protected]get in touch: @mikeyk94