Making Apps (appear) fasterAndreas Schranzhofer, Head of Mobile Engineering @ GetYourGuide
Apps World Germany, April 2015
Overview
Who we are and what we do
App Performances
What is it and why does it matter
How to improve
Expert Knowledge
2 Examples from GetYourGuide
Architecture
Approach
Andreas Schranzhofer, GetYourGuide 2
Who we areMarket, Business Model & Team
GetYourGuide Offers the Largest Travel
Activities Inventory Worldwide
Andreas Schranzhofer, GetYourGuide 4
800+
10,600+5,300+
800+
4,000+
2,000+
GetYourGuide: An Efficient Marketplace for Travel Activities
Andreas Schranzhofer, GetYourGuide 5
Suppliers
Suppliers upload and self-manage the product inventory
GetYourGuide quality controls, optimizes & translates the content. We also add professional video & photo content.
OTAs, Tour Operators etc. drive traffic & cross-sell our products
Partner
Network
Customers
Get
Your
Guide
6Andreas Schranzhofer, GetYourGuide
App Performance
Performance?
Andreas Schranzhofer, GetYourGuide 8
Functional performance metrics:
does it do what it should do
Non-Functional performance metrics:
does it do it
fast enough
beautiful enough
with as little data traffic / memory as possible
etc.
Non-Functional Performance Metrics
Andreas Schranzhofer, GetYourGuide 9
Start-Up Speed, Processing Speed
Reaction to User Input
Loading Times
App Processing vs. Server Processing
Memory/Storage consumption
many more…
App Responsiveness
Andreas Schranzhofer, GetYourGuide 10
High expectations, set by Top Apps
60% expect load times > 2s
~80% will abandon app that freezes or crashes twice
NO
Stalls
NO
long
delays
NO
ambiguit
y
Courtesy Scott Goodson, MCE 2015, Effortless Responsiveness with AsyncDisplayKithttps://www.youtube.com/watch?v=ZPL4Nse76oY&feature=youtu.be
Why does it matter
Andreas Schranzhofer, GetYourGuide 11
Source: https://eager.io/app/ZYBle8qUhKFJ, April 2015
We focus on App Speed in this talk
App Speed Influencers
Andreas Schranzhofer, GetYourGuide 12
Get
Your
Guide
Local
Data
Store
Network Conditions
Backend Performance
on device processing performance
querying local data store
processing data
rendering UI elements
Consider all these parameters optimized – what’s next?
How to improve
Andreas Schranzhofer, GetYourGuide 13
this is a holistic problem
optimize on all levels
Expert Knowledge
How to gain it and how to take advantage of it
Expert Architecture
Data Structures
new Layer of optimization (next to API, Processing, …)
Expert KnowledgeWhat is it? How to get it?
Expert Knowledge - Definition
Andreas Schranzhofer, GetYourGuide 15
expert: a person who has extensive skill or knowledge
in a particular field
expert system: a computer program that can offer
intelligent advice or make intelligent decisions
using rule-based programs
Expert Knowledge - Definition
Andreas Schranzhofer, GetYourGuide 16
first rule when designing expert systems:
gain expertise by gathering usage/user data
identify usage patterns
compare with your hypothesis
be an expert !!
Expert Knowledge – how to get there
Andreas Schranzhofer, GetYourGuide 17
track user behavior
get to know your customer
focus on your goal (funnel)
analyze data to identify patterns
number of action items (Buttons, List)
picked paths
1
2
Andreas Schranzhofer, GetYourGuide 18
Detect CC vendor and show image inside the cell on the
right.
Detecting CC type is easy:
http://webstandardssherpa.com/reviews/auto-detecting-
credit-card-type
http://stackoverflow.com/questions/72768/how-do-you-
detect-credit-card-type-based-on-number
Process
Alternate process
Decision
Data
Direct
data
access
Page
Note:
Label
connecto
r
Terminator (Start/End)
Manual operation
Tip: You can easily copy an element by holding ⌘ (cmd) while dragging. Or just copy/paste
them. You can also rescale all elements if needed
Label Label
Legend
http://www.edrawsoft.com/flowchart-symbols.php
Sources:
http://en.wikipedia.org/wiki/Flowchart
"Book Activity"
WiFi
and/or
cellular
ON?
Label
NO
YES
"Try Again"
Received
valid
data?
YES
NO
Choose date
Booking Flow Error Handling
WiFi
and/or
cellular
ON?
NO
YES Received
valid
data?
YES
NO
Expand option
Received
valid
data?
YES
NO
"Try Again"
"Try Again"
If option belongs to "Options available
on other dates", button says "Check
Availability" instead of "Select
Option". Loading Starting Times is
exactly the same.
"Select Option"
If option belongs to "Options available
on other dates" and user chooses
"Check Availability", modally show
Available Dates for that option and
then update the Booking Options
screen.
"Select Option" (grayed
out)
Alert
"You can't select an option if the starting times haven't loaded.
Please check your Internet connection and try again."
OKThis is a standard Alert
(UIAlertView/Android Alert) explaining
to the user that they can't continue
booking until they've chosen a
starting time.
WiFi
and/or
cellular
ON?
NO
YES Received
valid
data?
YES
NO
Add people
"Select Option" (grayed
out)
Alert
"Please add at least one person to continue"
OK
We can't continue with 0
people, this is just to clarify
if someone taps the inactive
button.
"Continue to
Overview"
(Add to
Cart API
call)
Success?
YES
NO
Alert
We're really sorry, but this activity is no longer available.
OK
Display alert explaining why
things went wrong.
Alert
We're really sorry, but there are only [x] available spots left. Please
correct the number of people to continue.
OK
Alert
There was a connection problem. Please try again.
Retry :::::::::::: Cancel
"Continue to Billing Details"
Option
includes
Language?
YES
NO
"Continue to Billing details" (grayed
out)
More information needed
"Please fill the following fields: [Language], [Address for pick-up],
[Additional questions]."
OK
List the fields that
need to be filled.
Properly fill all fields
"Proceed to
Payment" (grayed
out)
Alert
"Please correct the following fields to continue: Field X, Field Y, Field
Z."
OK
Flip "Same as Billing Details" switch
Enter invalid
data into field
1. User deactivates field (e.g. taps another field or Next on
the keyboard)
2. We validate the field
3. If data is invalid, we change cell background color and
show a temporary (3s) notification at the top.
Any
invalid
(red)
fields?
NO
YES
Alert
"Please fill all fields to continue."
OK
Let the user know they need to fill all
fields to continue.
Let the user know which fields they
should correct before continuing.
Proceed to Payment
Payment
Method
==
PayPal?
YES
NO
PayPal View Controller
Show PayPal's View
Controller and wait for
a response.
Payment
Method
== Direct
Debit?
YES
NO
Prepopulate "Name on card" based on Billing
Details First Name and Last Name
Tap Info icon in
Security code cell
Show Date Picker (format “MM -
Month/YYYY”, YYYY limited to currentYear +
20 years), inline on iOS 7 (see image below)
Local Form Validation
Field Name - Validation Method - Keyboard Type
Name on card - Anything but Numbers - Default
Credit card number - Numbers Only, 16 digits max - Number Pad
Expiration date - Future Dates Only - Date Picker (MM - Month/YYYY)
Security code - Numbers Only (exactly 3 digits, 3 digits max) - Number
Pad
For invalid field validation see Billing screen
Start entering
credit card number
Security code
"The last 3 digits on the back of your card."
OK
Alert explaining the
"Security code" field
"Confirm & Book"
(grayed out)
Alert
"Please correct the following fields to continue: Field X, Field Y, Field
Z."
OK
Any
invalid
(red)
fields?
NO
YES
Alert
"Please fill all fields to continue."
OK
Let the user know they need to fill all
fields to continue.
Let the user know which fields they
should correct before continuing.
Properly fill all fields
"Done"
(Process
Payment
call)
Success?
YES
NO
Alert
We couldn't process your payment. Please double check your information and try again.
Call Support ::::::::: OK
Display alert explaining why things went wrong.
Alert
We were unable to charge your credit card. Please contact your
credit card provider.
Call Support ::::::::: OK
Alert
There was a connection problem. Please try again.
Call Support ::::::::: OK
Dismiss modal booking flow, revealing the Product screen (the screen where the user
started the booking process)
“View Ticket”
Dismiss modal booking flow, revealing the Tickets screen (the list with all the tickets)
Call Support
alternative option to call
support if there are
problems
Call Support
alternative option to call
support if there are
problems
Call Support
alternative option to call
support if there are
problems
"Confirm & Book"
Important
Notification slides down from
underneath the navbar and slides
back up after 3 seconds.
If we have to dismiss the screen
while notification is displayed, it
should stay on that dismissed
screen.
Traveler’s Details (awaiting confirmation)
First Name
Last Name
Phone
Loading...
Retry repeats the call right
away, Cancel brings back
the Payment screen
After displaying this error,
go back to the Pricing
screen
When user dismisses alert,
go back to the activity
screenIs activity Free
Sale
(automatically
confirmed)?
YES
NO
Title label: Choose an option
Total
Total
“Redeem voucher”
MODAL
Activate text field automatically, show Keyboard of
type Name Phone Pad (letters + big numbers) with
Return Key = Done
“Cancel”
“Apply” or Done on keyboard
Voucher
validated
?
NO
YES
Something went wrong
"We couldn’t validate the voucher. Please double-check
your code and try again."
OK
Display system alert instructing the
user to try again.
More
than one
option?
YES
NO
Received
valid
data?
YES
NO
"Try Again"
“Country”
Country
== US?
YES
“State”
NO
Depending on Country / State choice
we might need to display a label here,
but I didn’t want to repeat images with
such small changes.
Still, this should be good enough for
illustration purposes.
Tapped any cell on
the list
Add checkmark
and go back automatically
This is just for illustration purposes so
we don’t need multiple almost
identical images. So the State cell
should be filled if user already chose
the State.
If user has already chosen Country
from the list, show the Secondary
Label in this field.
If user has already chosen State from
the list, show the Secondary Label in
this field.
Local Form Validation
Field Name - Validation Method - Keyboard Type
First Name - Anything but Numbers - Default
Last Name - Anything but Numbers - Default
Street Address - No validation - Default
Postal Code - No validation - Default
City - Anything but Numbers - Default
Email Address - Proper Email Format - E-Mail Adress
(keyboard with @ easily accessible)
Phone - No validation - Phone Pad (keyboard with
numbers and +*# symbols)
“Terms of Service” or “Privacy
Statement”
If user tapped Privacy Statement, title
should be “Privacy Statement”
Title label: Choose an option
Use a regular system map
pin here.
As soon as user taps on any
cell, go back to Options
screen.
More than
one
language?
YES
NO
Only show the cells in
Additional information if we
have a booking parameter for
that (Optional comments we
always show).
Here we have one screen for
clarity.
Fill all required
fieldsFilling the required
fields activates the
Continue button.
Once user taps one of the options,
automatically select it and go back.
Enter editing mode automatically. Going
back simply saves the current message.
If user redeemed
voucher, of course
show the other cell
here. This one’s for
clarity.
Answer cell
expands as
customer enters
more text.
Enter editing mode automatically. Going
back simply saves the current message.
Don’t enter editing mode automatically -
the questions can be really long and the
customer needs to read them first.
Option
includes
location
information?
NO
YES“Meeting
point details”
This usually happens to options with
hotel pick-up only. Hide map and
replace tabs at the top with the label.
Just a static cell for
Language if there’s only one
language.
Same style as
Section Footer, but
tappable links are in
bold.
Show/hide payment image
when minimum number of
digits needed to detect CC
type is croseed.
List of selectable items: no
additional margin above first
list item nor below the last
item
List of selectable items: no
additional margin above first
list item nor below the last
item
List of selectable items: no
additional margin above first
list item nor below the last
item
List of selectable items: no
additional margin above first
list item nor below the last
item
If a Pricing category doesn’t provide an age parameter, use an
“Any age” label instead.
02 - February / 2019 02- February/2019 02 - February/2019
CC Expiration Date Format
MM - Month/YY
ISO7813-compliant, easiest to use
More info: http://baymard.com/blog/how-to-
format-expiration-date-fields
Done button saves user-entered text and goes back to the previous screen.
Local Form Validation
Field Name - Validation Method - Keyboard Type
Account holder - Anything but Numbers - Default
Account number - Numbers Only, 10 digits max - Number Pad
Bank code - Numbers Only, 8 digits max - Number Pad
Properly fill all fields
"Confirm & Book"
(Add to
Cart API
call)
Success?
YES
NO
(Process
Payment
call)
Success?
YES
NO
Capitalization - all
words
Capitalize the following fields:
First Name
Last Name
Street Address
City
Automatically divide CC number into 4-digit blocks as the user
types.
Is it a free
activity?
YES
NO
Same interactions as in paid activities,
but go straight to the confirmation from
here.
“Confirm & book”
(free activity, skip the
Payment screen)
Tap the X button
If user taps the X to remove the voucher, show a UIActionSheet (Dialog on Android) so they
confirm the removal.
Remove Voucher
Remove the voucher?
Patterns - Example
Andreas Schranzhofer, GetYourGuide 19
Users mostly pick the top n% of list items
Users go back and forth on date selection
search queries repeat themselves a lot
many search results are actually empty lists
GetYourGuide Appas a Show Case
Example 1 – Home Screen
Andreas Schranzhofer, GetYourGuide 21
Home Screen - Schedule
Andreas Schranzhofer, GetYourGuide 22
t
Network Request
Local Processing
??
Touch Event
UI rendered
Home Screen - Schedule
Andreas Schranzhofer, GetYourGuide 23
t
Network Request
Local Processing
Prediction 1
Prediction 2
Prediction 3
Touch Event
UI rendered
Home Screen – Pattern
Andreas Schranzhofer, GetYourGuide 24
Home Screen is location aware
most people are actually interested in Activities in or
close to their current location
after App Start, next interaction usually takes some
time
we have time to load data
Prediction Rule for Home Screen:
start fetching tours for the top 3 cities
Home Screen – Impact
Andreas Schranzhofer, GetYourGuide 25
speed up of the app
(up to) the network round-trip time
Response time: time from touch event to UI rendered
t
Network Request
Local Processing
t
Prediction 1
Response Time
Andreas Schranzhofer, GetYourGuide 26
Worst Case Response Time (WCRT)
Best Case Response Time (BCRT)
Average Case Response Time (ACRT)
Touch Event happens before network request has finished
t
Prediction 1
tWCRT
BCRT
t
Prediction 1
ACRT
Home Screen – Summary
Andreas Schranzhofer, GetYourGuide 27
found a user pattern
derived a predictive loading rule from it
on average, reduced the perceived loading time
not actually reduced, just rearranged
in fact: increased network usage
Home Screen – Requirements
Andreas Schranzhofer, GetYourGuide 28
Requirements:
sophisticated tracking to identify patterns
Architecture that allows to take advantage of pre-
fetching
Example 2 – Search Results Screen
Andreas Schranzhofer, GetYourGuide 29
Search Results Screen – Schedule
Andreas Schranzhofer, GetYourGuide 30
t
t
Search Results Screen – Data Structure
Andreas Schranzhofer, GetYourGuide 31
GET /tours?q=Berlin&date=today
RESTfulAPI
List of Tour Objects matching query
GET /tours?q=Berlin&date=Saturday
List of Tour Objects matching query
Search Results Screen – Data Structure
Andreas Schranzhofer, GetYourGuide 32
Searching by date is relevant for the user
different date might result in a different response
Expert Knowledge:
that‘s true, however...
variability by date is limited
Search Results Screen – Data Structure
Andreas Schranzhofer, GetYourGuide 33
Include dates in the Tour Objects
filter by date locally on the device
"data": {
"tours": [{
"tour_id": xxxxx,
"tour_code": "TVTower\/entrance",
"cond_language": ["es", "en", "fr", "de"],
"title": "Skip the Line: Berlin TV Tower Ticket",
"availabilities": [
{
"vacancies": 25,
"date": "2015-04-20T09:00:00",
},
{
"vacancies": 25,
"date": "2015-04-20T09:00:00",
},
...
],...
Search Results Screen – Schedule
Andreas Schranzhofer, GetYourGuide 34
t
t
t
Search Results Screen – Pattern
Andreas Schranzhofer, GetYourGuide 35
Search Results are date aware
holidays usually have a very clear time window
Optimization for Search Results:
data structure was too general
variability by date is not significant enough
overdeliver – overhead is reasonable
Search Results Screen – Summary
Andreas Schranzhofer, GetYourGuide 36
found a user pattern
derived a better data structure
moved filtering by date from server to app
on average, reduced the perceived loading time
not actually reduced, just rearranged
in fact: increased network usage (for first request)
no network usage for subsequent requests
How to improve – closing remarks
Andreas Schranzhofer, GetYourGuide 37
this is a holistic problem
optimize on all levels
reduce perceived loading time by prefetching
high bandwidth, good 3G/LTE coverage
reasonable data roaming prices/plans
other apps, other regions, other problems
Expert ArchitectureHow to take advantage of expert
knowlegde?
Architecture – Requirements
Andreas Schranzhofer, GetYourGuide 39
Pre-fetch data at certain points in time
Pre-process data (e.g., filter results by date) before
rendering
Track user behavior to derive patterns
Architecture
Andreas Schranzhofer, GetYourGuide 40
data request != network request
introduce a dedicated data layer
local data store is required
Activities/Fragments request data, not (RESTful)
resources
Consider data freshness
cached data might get outdated
Data inconsistency
server is master, overwrite
Architecture
Andreas Schranzhofer, GetYourGuide 41
Data Layer
API Interface Pre
dic
tio
n
Trac
kin
g
Architecture – Data Layer
Andreas Schranzhofer, GetYourGuide 42
Cache query results
Tours
Queries
Sorting (order)
Data Freshness
available data fresh enough
or request new data ( results in WCRT)
Architecture – Data Layer
Andreas Schranzhofer, GetYourGuide 43
query tour order timestamp
q location date timestamp
tour_id name price ...
...
timestamp
Resultset
Tour
Query
n
1
n
n
Summary
What we did
Andreas Schranzhofer, GetYourGuide 45
Optimization needs to be
done on all layers
API, Network, App
we introduced a new layer: Expert Knowledge
Apply Expert Knowledge
Impact is very high
Data Structure: reduce number of request significantly
Data Layer
API Interface Pre
dic
tio
n
Trac
kin
g
How to start?
Andreas Schranzhofer, GetYourGuide 46
Collect Expert knowledge (i.e., tracking)
identify usage patterns
start with hypothesis
needs time (and traffic)
Architecture that decouples data requests from network
requests
Iterate on data structures
Thanks for your timeStay Curious!
Top Related