Apps World 2015 Berlin

47
Making Apps (appear) faster Andreas Schranzhofer, Head of Mobile Engineering @ GetYourGuide Apps World Germany, April 2015

Transcript of Apps World 2015 Berlin

Page 1: Apps World 2015 Berlin

Making Apps (appear) fasterAndreas Schranzhofer, Head of Mobile Engineering @ GetYourGuide

Apps World Germany, April 2015

Page 2: Apps World 2015 Berlin

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

Page 3: Apps World 2015 Berlin

Who we areMarket, Business Model & Team

Page 4: Apps World 2015 Berlin

GetYourGuide Offers the Largest Travel

Activities Inventory Worldwide

Andreas Schranzhofer, GetYourGuide 4

800+

10,600+5,300+

800+

4,000+

2,000+

Page 5: Apps World 2015 Berlin

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

Page 6: Apps World 2015 Berlin

6Andreas Schranzhofer, GetYourGuide

Page 7: Apps World 2015 Berlin

App Performance

Page 8: Apps World 2015 Berlin

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.

Page 9: Apps World 2015 Berlin

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…

Page 10: Apps World 2015 Berlin

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

Page 11: Apps World 2015 Berlin

Why does it matter

Andreas Schranzhofer, GetYourGuide 11

Source: https://eager.io/app/ZYBle8qUhKFJ, April 2015

We focus on App Speed in this talk

Page 12: Apps World 2015 Berlin

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?

Page 13: Apps World 2015 Berlin

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, …)

Page 14: Apps World 2015 Berlin

Expert KnowledgeWhat is it? How to get it?

Page 15: Apps World 2015 Berlin

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

Page 16: Apps World 2015 Berlin

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 !!

Page 17: Apps World 2015 Berlin

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

Page 18: Apps World 2015 Berlin

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

Email

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

Email

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?

Page 19: Apps World 2015 Berlin

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

Page 20: Apps World 2015 Berlin

GetYourGuide Appas a Show Case

Page 21: Apps World 2015 Berlin

Example 1 – Home Screen

Andreas Schranzhofer, GetYourGuide 21

Page 22: Apps World 2015 Berlin

Home Screen - Schedule

Andreas Schranzhofer, GetYourGuide 22

t

Network Request

Local Processing

??

Touch Event

UI rendered

Page 23: Apps World 2015 Berlin

Home Screen - Schedule

Andreas Schranzhofer, GetYourGuide 23

t

Network Request

Local Processing

Prediction 1

Prediction 2

Prediction 3

Touch Event

UI rendered

Page 24: Apps World 2015 Berlin

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

Page 25: Apps World 2015 Berlin

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

Page 26: Apps World 2015 Berlin

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

Page 27: Apps World 2015 Berlin

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

Page 28: Apps World 2015 Berlin

Home Screen – Requirements

Andreas Schranzhofer, GetYourGuide 28

Requirements:

sophisticated tracking to identify patterns

Architecture that allows to take advantage of pre-

fetching

Page 29: Apps World 2015 Berlin

Example 2 – Search Results Screen

Andreas Schranzhofer, GetYourGuide 29

Page 30: Apps World 2015 Berlin

Search Results Screen – Schedule

Andreas Schranzhofer, GetYourGuide 30

t

t

Page 31: Apps World 2015 Berlin

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

Page 32: Apps World 2015 Berlin

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

Page 33: Apps World 2015 Berlin

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",

},

...

],...

Page 34: Apps World 2015 Berlin

Search Results Screen – Schedule

Andreas Schranzhofer, GetYourGuide 34

t

t

t

Page 35: Apps World 2015 Berlin

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

Page 36: Apps World 2015 Berlin

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

Page 37: Apps World 2015 Berlin

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

Page 38: Apps World 2015 Berlin

Expert ArchitectureHow to take advantage of expert

knowlegde?

Page 39: Apps World 2015 Berlin

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

Page 40: Apps World 2015 Berlin

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

Page 41: Apps World 2015 Berlin

Architecture

Andreas Schranzhofer, GetYourGuide 41

Data Layer

API Interface Pre

dic

tio

n

Trac

kin

g

Page 42: Apps World 2015 Berlin

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)

Page 43: Apps World 2015 Berlin

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

Page 44: Apps World 2015 Berlin

Summary

Page 45: Apps World 2015 Berlin

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

Page 46: Apps World 2015 Berlin

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

Page 47: Apps World 2015 Berlin

Thanks for your timeStay Curious!