[2015/2016] Mobile thinking

Gran Sasso Science Institute

Ivano Malavolta

Mobile applications development

Course web site

http://www.schoology.com

XDTG2-6NMBR

blind programming

without strategy or strong design

a specific language, like:

Objective-C

What this course is NOT about?

User-centred design

& development

UX design

Apps cross-platform development

What this course is about

…and what about app stores?

Hybrid development framework

The course does not impose any specific prerequisites on programming or design

The only requirement is a basic knowledge of JavaScript and W3C web standards like HTML and CSS

Reference material:

• https://developer.mozilla.org/it/docs/Web/Guide

• http://eloquentjavascript.net

Prerequisites

This is a 6 CFU graduate course

à the course has been designed to demand approximately 12 hours per week of your time

It is expected that each student • will prepare for and attend all the class sessions• will contribute regularly and substantially to the team project

Lectures will be in Italian

Slides, books, and other resources are in English

Expectations

Project

Project deliverables:

The project will be followed by an oral discussion

All deliverables will be submitted via GitHub

Exam and project

App design

App development

A detailed description of your app in terms of its information architecture, experience design, UI design

(up to 20 pages)

App design

Implementation of your app

+ brief technical description

(up to 10 pages)

App development

BONUS

When discussing the project, the app must be

deployed on a realmobile device

BONUSIf the app is comprabale with

production-ready apps (basedon instructors’ judgement)

27 Feb

March

3 Jun

~15 Jul

Start lectures

Intermediate assignment:App design

End lectures

Mobile thinkingand design

Course timeline

April

May10 MAY

Final assignment:App implementation

Technical aspects+ design patterns

LABS + 1 lecture on app modularity

Teams formed4 MARCH

First action

1. Form a team2. Create a GitHub repository for your app3. Communicate those info to the instructor:

https://goo.gl/Afm9Xk

Before the 4 MARCH

Books

Reading the slides is not enough for passing the exam

Hybrid mobile apps

FRAGMENTATIONà a native mobile app is written from scratch for each platform

Mobile platforms today

Objective-C

code

Swiftcode

XCode

Javacode

C++code

Eclipse

C#code

C++code

Visual Studio

JScode

A possible solution to mobile platforms fragmentation

Recurrent architecture:

– apps are developed using standard web technologies

– on top of a hybrid development framework• providing a native wrapper and a generic JavaScript API that bridges all the

service requests to the corresponding platform API

Web-based hybrid mobile apps

Single code base

Pros

• cross-platform portability

• reuse of existing knowledge of web developers

• simpler and less expensive development processes

Pros and cons

Cons

• restricted access to hardwarefeatures

• decrease in performance

• variations on user experience

Strong debate about benefits and drawbacks

Our study

What is the difference between hybrid and native mobile apps as perceived by end users?

Perceived value

Perceived performance

Perceived bugginess

Initial download overhead

DeveloperEnd users

createsdownload

& use

App

Previouswork[1]

FOCUSOF OUR

STUDY

RQ1

RQ2

RQ3

RQ4

We analysed hybrid mobile apps

• in their actual context of use

• with a reproducible empirical strategy

– well-defined empirical protocol– dataset comprising 11,917 real apps

and 3,041,315 user reviews*– dedicated analysis process and tool**

Design of the study

* complete replication package: http://cs.gssi.infn.it/ms_2015

** analysis tool from [1]: http://github.com/GabMar/ApkCategoryChecker

Data extraction

Classified apps(hybrid vs native)

Hybrid appsclassifier*

Reviewsanalyzer

top-500 most popular free apps for each category of the Google Play Store

~11k app binaries

50 pages (~255) of reviews for each app

~3M userreviews

apps scores

Apps and reviewsmining

perceived value: 0.5users sentiment: 0.6#reviews: 243performance: 0.6bugginess: 0.1size: 3,456 kb

* analysis tool from [1]: http://github.com/GabMar/ApkCategoryChecker

Reviews analysis

Stopwordsremoval

manually performed by 2 domain experts

Single review

Single reviewscore

polaritypos: 0.8 performancepos: 0.6polarityneg: 0.1 performanceneg: 0.05bugginess: 0.2

300 random reviews

Keywordsextraction

Relevant keywords

Lemmatization

Tf-idf basedvectors similarity

computation

Results

Data-intensive mobile apps[2]

Apps with closer interactionwith the Android platform WINNERS

Results – value (RQ1)Average of the ratings as provided by end users

3.35 3.75

Rating = real number in [1, 5] Certain balance, with neglectable differences

Results – value (RQ1)Polarity of sentiment of end users

where posa = #reviews with positive sentiment nega = #reviews with negative sentiment

Balance between hybrid and native apps, with some exceptions

Non data-intensive or requiring multimedia capabilities

Results – performance (RQ2)

where posa = #reviews with positive sentiment w.r.t. performance of the app nega = #reviews with negative sentiment w.r.t. performance of the app

Balance between hybrid and native apps, with some exceptions

Results –bugginess (RQ3)

where buga = #reviews signalling the presence of bugs or failuresreviewsa= total number of reviews of the app

The highest unbalance between the two development strategies in our study

bugginessa = buga / reviewsa

Possible interpretation: absence of full-fledged testing frameworks for hybrid apps, such as those provided by native apps IDEs like Eclipse and Android Studio

Results – initial download size (RQ4)

6,586 kb4,625 kb

In line with the average size of Android apps [7]

sizea = file size in kilobytes of the app APK file

A possible solution to mobile platforms fragmentation

Recurrent architecture:

–  apps are developed using standard web technologies

–  on top of a hybrid development framework

•  providing a native wrapper and a generic JavaScript API that bridges all the

service requests to the corresponding platform API

Hybrid mobile apps

Single code base

Summary

Data extraction Classified apps

(hybrid vs native)

Hybrid apps

classifiers

Reviews analyzer

top-500 most popular free apps for

each category of the Google Play Store

~11k app binaries

50 pages (~255) of

reviews for each app

~3M app

reviews

apps scores

Apps and reviews mining

perceived value: 0.5

users sentiment: 0.6

#reviews: 243

performance: 0.6

bugginess: 0.1

size: 3,456 kb

End users value hybrid and native apps similarly

Hybrid may be good for data-intensive apps, whereas it performs poorly when dealing with low-level, platform-specific features

In some categories, native apps are perceived as better with respect to performance and bugginess

Reviews analysis

Stopwords

removal

manually performed

by 2 domain experts

Single review

Single reviewscore

polaritypos: 0.8

performancepos: 0

.6

polarityneg: 0.1

performanceneg: 0

.05

bugginess: 0.2

300 random

reviews

Keywords

extraction

Relevant keywords

Lemmatization

Tf-idf based

vectors similarity

computation

References

[1] Ivano Malavolta, Stefano Ruberto, Valerio Terragni, Tommaso Soru, Hybrid Mobile Apps inthe Google Play Store: an Exploratory Investigation. International Conference on MobileSoftware Engineering and Systems (MOBILESoft), ACM, 2015.

[2] Ivano Malavolta, Stefano Ruberto, Valerio Terragni, Tommaso Soru (2015). End Users’Perception of Hybrid Mobile Apps in the Google Play Store. InMobile Services (MS), 2015IEEE International Conference on, pp. 25-32.

[3] Mirco Franzago, Henry Muccini, and Ivano Malavolta. Towards a collaborative frameworkfor the design and development of data-intensive mobile applications. InternationalConference on Mobile Software Engineering and Systems (MOBILESoft), pages, 58-61,ACM, 2014.

[4] Emiliano Masi, Giovanni Cantone, Manuel Mastrofini, Giuseppe Calavaro, and PaoloSubiaco. Mobile apps development: A framework for technology decision making. In MobileComputing, Applications, and Services, pages 64–79. Springer, 2013.

[5] Luis Corral, Alberto Sillitti, and Giancarlo Succi. Mobile multiplatform development: Anexperiment for performance analysis. Procedia Computer Science, 10:736–743, 2012.

[6] Nan Hu, Jie Zhang, and Paul A Pavlou. Overcoming the j-shaped distribution of productreviews. Communications of the ACM, 52(10):144–147, 2009.

[7] Aapo Markkanen. Findings from Mobile Application File-size Research, 2012. ABIResearch market report. Code: IN- 1014787.

Mobile thinking

Unique traits of Mobile

First truly personal mass media

First always-on mass media

First always-carried mass media

Built-in payment channel

At the point of creative impulse

We don’t share our phones with our friends

Information is always available 24/7, even when idle

7 out of 10 people sleep with their phones within reach

Universal click-to-buy + credit cards

Ability to create or consume content whenever the mood strikes

Context

CONTEXT CONTEXT CONTEXT CONTEXT CONTEXT CONTEXT CONTEXT









Mobile apps have the amazing capability to add

CONTEXT

to information, adding immediate relevance to what we are doing right here, right now

Contextwith a big “C”

VS

contextwith a little “c”

Two kinds of context

The app works in a specific context depending on the current location of the user

The app gives Context by providing additional infohttp://bit.ly/wXGpNA

Context VS context by example

who is here?

where I am

Context

context

VS

Context answers users’ questions

context is a factVS

https://foursquare.com

Context VS context by example

How users will derive value from something they are currently doing

For example:

• info on restaurants

• rate places

• GPS navigator

http://www.oink.com

Context with a big “C”

The information provided by the app gives Context

A better understanding of what this moment in timemeans to the user

Recurrent targets:

people, places, things, situations, ideas

Context with a big “C”

The mode, medium and environment in which weperform our tasks

There are 3 different types of context:

1. Physical context

2. Media context

3. Modal context

context with a little “c”

Physical context

where and in which environment I am

http://bit.ly/wXGpNAhttp://bit.ly/yoBk7d


carVS

train

Media context

the device I am using

• Connectivity

• Screen size

• Camera

• etc …

http://www.facebook.com


Modal context

my present state of mind

what I am doing right now

How I feel right now

http://www.runens.comhttp://photostatsapp.com/http://babypad.mezmedia.com


users Developer(you)

I only care about…

Context

…again on “big C” VS “little c”

I only care about…

context

http://www.soundhound.com

Examples

http://www.endomondo.com

Examples 2

http://www.instagr.am

Examples 3

Types of mobile apps

Mobile apps can provide different experiences to the user

Utility

Locale

Informative

Productivity

Immersive

Types of mobile apps

• short, task-based scenarios

• minimal information from the user

• minimal design

ex.

calculator

alarm clock

weather forecast

Utility

• it provides info about “what’s around”

• recurrent feature: a map on which data is displayed

• goal of the user: to find additional

info about his present location

ex.

find friends around

find pubs around

get route directions

https://foursquare.com

Locale

• Goal: to provide information to the user

• Task of the user: to read and understand

• not necessarily to interact

• user’s tasks are

short and can be interrupted

ex.

news

online directory

mobile commerce https://www.pinterest.com

Informative

• Meant to increase user’s sense of efficiency

• Users have a clear goal in mind

• Very structured (with folders)

– it gives a sense of order

• Clear workflow

ex. mail, scanning, todo lists…

TIP: focus on the main task only, and

only after start adding other featureshttp://www.thegrizzlylabs.com/genius-scan

Productivity

• immersive, full-screen app

• meant to consume the user’s focus

ex.

games

media players

entertainment

TIP: you can use it as alternative to other app contextshttp://www.rockstargames.com/grandtheftauto3

Immersive

Summary

How to create a high-quality mobile app

Rule #1

• Defining the users’ context is the first thing to do- without it, you don’t have a strategy, you have only a plan of action

• Uncover the users’ goals- and then understand how the users’ context alters their goals

• With goals understood, figure out the tasks the users want to perform

• Look for ways to filter content by context- for example: location, media, and mode

Focus on context, goals and needs

Rule #2

• Avoid talking about constraints at an early-stage brainstorming session

• There will always be constraints in mobile, accept it!

• Focus on strategy first, what the user needs, and lay down the features

- Then, if the constraints are an issue, fall back to the user goals

Constraints never come first

Rule #3

People want to use mobile devices in a simple way

• Simplicity à fewer technical problems

• Easier to iterate and evolve your app

• Don’t try to create a desktop software on a mobile

• Adding feature after feature is an easy trap to fall in

Keep it simple

There is no “perfect app”, you have to find the sweet spot

User Goals

yourAPP

development or configuration,

maintainability, and reliability

costs, revenue, market share, and

time to market

usability

The sweet spot

1. Find a REAL NEED first

2. Find your GOAL to fill the need

3. Reverse engineer the goal into a potential app

4. Remember the unique benefits of mobile

5. CONTEXT CONTEXT CONTEXT

• Location, camera, always-carried, accelerometer

• WHO is your typical user???? Define usage scenarios

App strategy workflow

Chapters1-2-3-4-5-6

http://goo.gl/MY4keU

References

Homework

1. Imagine the app for the Loveitaly marketplace

2. Define the main strategic aspects of the app:

– goal

– prioritized tasks

– context

Next week 1-2 students will be called at the blackboard to discuss their homework

ContactIvano Malavolta |

Gran Sasso Science Institute

iivanoo

[email protected]

www.ivanomalavolta.com

[2015/2016] Mobile thinking

Technology

Transcript of [2015/2016] Mobile thinking