cross media design scenarios: smartphones and tablets, a workshop at isia design florence

100
SCENARI DI DESIGN CROSS-MEDIALE: SMARTPHONE & TABLET APPLICATIONS Salvatore Iaconesi [email protected]

Upload: salvatore-iaconesi

Post on 08-May-2015

1.890 views

Category:

Education


0 download

DESCRIPTION

On March 21st 2011, Art is Open Source held a lesson on the theme:"Cross Media design scenarios: smartphones and tablets"The workshop engaged the problems, approaches, methodologies and processes that designers can use in imagining, designing and implementing cross media design products.Some energies were used to describe really interesting scenarios that allow using cross media design to implement solutions that are useful not only for business, but also for society, the environment and the cultural ecosystem, promoting a more tolerant, multicultural, sustainable take on the world.These are the slides that have been used in the workshop, complete with a full end-to-end example of the creation of a location based application for iPhone/iPad.You can find all the info here at Art is Open Source:http://wp.me/pnaKK-kIThere is also a ZIP archive of the full XCODE project used in class:http://www.artisopensource.net/isia.zipPlatforms used:XCODE with iPhone SDK 4.3 http://developer.apple.comPhonegap http://www.phonegap.com/jQuery http://www.jquery.comGoogle Maps API v3 http://code.google.com/apis/maps/documentation/javascript/

TRANSCRIPT

Page 1: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

SCENARI DI DESIGN CROSS-MEDIALE:SMARTPHONE & TABLET APPLICATIONS

Salvatore [email protected]

Page 2: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

CHI SONO?

Page 3: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Salvatore Iaconesi

Art is Open Source

FakePress

La Sapienza

LPM

Altro

Page 4: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

COSA FAREMOOGGI

Page 5: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

scenario tecnologie

casi di studio

esempio

Page 6: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

I RISULTATI

Page 7: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

visione di mercato

conoscenza delle tecnologie di riferimento

ruolo del designer

esempio completo

Page 8: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

COMINCIAMO!

Page 9: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 10: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 11: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

In Taiwan, there are more cellphones than people. About 7% of all mobile data goes to movie information. And Google owns nearly 100% of the mobile search market

Page 12: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 13: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

PIU' di 5 MILIARDI

Page 14: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

SMARTPHONES&

TABLETS

TECNOLOGIE DI RIFERIMENTO

Page 15: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

SMARTPHONES

Page 16: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

TABLETS

Page 17: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

SMARTPHONES

Page 18: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 19: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 20: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 21: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 22: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 23: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

TABLETSand ebook readers

Page 24: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 25: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 26: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 27: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 28: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 29: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 30: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

PUNTI CHIAVE:

Smartphone e tablets are the near future

Mobile phones crush specialists (video cameras, mp3 players...)

Page 31: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Extensibility and Opennes

Page 32: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Consumption vs Creation

Page 33: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Utility & Entertainment

Page 34: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

AND TABLETS?

Page 35: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Tablets vs Readers

Page 36: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 37: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 38: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 39: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

IL MERCATODELLE

APPLICAZIONI

COSA C'E' SUL MERCATO, COSA FUNZIONA,

COSA CI SARA' TRA BREVE

Page 40: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

App Store Stats Summary

Count of Active Applications in the App Store

Total Active Apps (currently available for download): 365,421

Total Inactive Apps (no longer available for download): 78,195

Total Apps Seen in US App Store: 443,616

Number of Active Publishers in the US App Store: 76,331

Count of Application Submissions

This Month (Games): 2,108 ( 117 / day )

This Month (Non-Games): 10,395 ( 578 / day )

This Month (Total): 12,503 ( 695 / day )

Page 41: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Application Approval Delay

February, 2011: Maximum delay 39 days, average delay 6.19 days.

Application Price Distribution

Current Average App Price: $4.16

Current Average Game Price: $1.67

Current Average Overall Price: $2.46

Application Category Distribution

Most Popular Categories

1 - Books (57264 active)

2 - Games (53249 active)

3 - Entertainment (39990 active)

4 - Education (30270 active)

5 - Lifestyle (26522 active)

Page 42: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 43: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

AN INTERESTING SLIDESHOWBy PinchMedia

http://www.slideshare.net/pinchmedia/iphone-appstore-secrets-pinch-media?type=presentation

Page 44: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

SOME SALE STATS EXPOSEDBy TechCrunch

http://techcrunch.com/2010/05/16/iphone-app-sales-exposed/

Page 45: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

A CASE STUDY IN SALESBy MarkJ

http://www.markj.net/iphone-hit-tennis-sales-stats-marketing/

Page 46: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

STATISTICS

In App Store, paid applications in the Top Overall, Games, Business and Entertainment

categories stay in these categories for 27, 39, 59 and 38 days on average, respectively.

Free apps stay in the Top 100 for a significantly shorter time in the Top Overall, Games

and Business categories, with 19, 21 and 39 days on average, respectively.

The majority of paid apps that have been in the Top 100 between November 2009 and

April 2010 fall into the Games and Entertainment categories.

The paid apps that have been in the top five for the longest period of time are

Doodle Jump (140 days), RedLaser (73 days) and Skee-Ball (68 days).

Page 47: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

STATISTICS

The biggest driver of paid app sales on the iPhone & Android is try-before-you-buy – 54% of Android users, 52% of iPhone users and 70% of iPod Touch users all cited liking the free version and upgrading to the paid version‖ as a reason for buying paid apps.

AdMob estimates the size of the monthly iPhone paid app market as $125m, with the iPod Touch market adding another $73m. The Android market in comparison is just $5m per month.

Page 48: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

STATISTICS

62% find apps by searching for a specific type of app, 60% browse through the App Store charts, 40% receive word of mouth recommendations, 20% see ads in other apps, while 19% read about apps in the press or on blogs.

93% of iPhone users download iPhone Applications directly on their phone. Only 7% of users download via iTunes and upload to the phone.

Page 49: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence
Page 50: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://www.doxtop.com/browse/e5ab3c6b/apple-ipad-trends-and-statistics.aspx

EXAMPLE OF STATS REPOST

Page 51: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://adwhirl.files.wordpress.com/2009/06/adwhirl_discovery.pdf

INFO ON HOW TO GET APP FEATURED

Page 52: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Doodle Jump3 million sales

Page 53: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Angry Bird4 million salesIn 5 months

Page 54: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Camera Plus$ 275.000 in the first month

Page 55: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Rolando700.000 download (at $ 9.99)

Page 56: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Pages300.000 download (at $ 9.99)

Page 57: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

GoodReader250.000 download (at $ 2.99)

Page 58: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Numbers200.000 download (at $ 9.99)

Page 59: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Angry Birds HD180.000 download (at $ 4.99)

Page 60: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Keynote150.000 download (at $ 9.99)

Page 61: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Glee130.000 download (at $ 0.99)

Page 62: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

WolframAlpha120.000 download (at $ 1.99)

Page 63: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Pinball HD120.000 download (at $ 0.99)

Page 64: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Friendly110.000 download (at $ 0.99)

Page 65: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

iMockups for iPad$ 6.000.000 ($ 9.99 at a time)

Page 66: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

INNOVAZIONE

I PRINCIPALI SCENARI INNOVATIVI ELE SUGGESTIONI PIU'

INTERESSANTI

Page 67: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Physical interfacesdo better what you did without the pad

Page 68: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Publishingnew life for publishing

Page 69: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Augmented RealityInfo over the things of your daily life

Page 70: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

BusinessNew views and interactions on business processes

Page 71: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

HealthYour doctor, your body, your medicines...

Page 72: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

LuxuryA $ 20.000 iPad? yes!

Page 73: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

NEW FORMS OF CITIZENSHIP

MORE AWARENESS

NEW FORMS OF EXPRESSION

NEW FORMS OF COMMUNICATION

Page 74: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

IL DESIGNER

COME E' FATTO E COME CAMBIAIL LAVORO DEL DESIGNER CON LE

APP

Page 75: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

EXPERIENCES

MULTI-DISCIPLINARIETY

SOCIAL

WORLD ISSUES

INNOVATE

BUSINESS MODELS

REMIX! RECONTEXTUALIZE! REINVENT!

Page 76: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

TECNOLOGIEPER DESIGNER

COME LAVORARE SU SMARTPHONE ETABLET, DAL PUNTO DI VISTA DEL

DESIGNER

Page 77: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://www.appcelerator.com

Titanium makes cross-platform native application development easy.

A free and open source application development platform, Titanium lets you create native mobile, tablet and desktop application experiences using existing web skills like Javascript, HTML, CSS, Python, Ruby, and PHP. Learn More.

Page 78: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://www.phonegap.com/

Page 79: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://westcoastlogic.com/lawnchair/JSON document store

Page 80: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://www.sencha.com/products/touch/

Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone and Android touch devices.

Page 81: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://jqtouch.com/

Page 82: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://jquerymobile.com/

Page 83: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://www.nsbasic.com/app/

NS Basic/App Studio

is a complete, powerful development environment. Create your app on your desktop, then download to your device and run.

Page 84: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://ripple.tinyhippos.com/

Page 85: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

http://www.appml.org/

appML is an HTML extension specifically designed for web-based apps.

Page 86: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

Native-like applications for smartphones, tablets and desktopsUnify was built to improve the development efficiency of apps for smartphones. Currently it supports smartphones based on the platforms iOS, Android and WebOS. There is support for desktop operating systems like Windows or Mac OS as well. Support for tablet devices is planned for the next year.

http://unify.github.com/unify/

Page 87: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

ED ORA:REALIZZIAMOUN PROTOTIPO

USIAMO PHONEGAP, UNA DELLE TECNOLOGIEANALIZZATE, PER REALIZZARE UN PROTOTIPO

Page 88: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

DA XCODE:

NEW PROJECT--> PHONE-GAP BASED APPLICATION

Page 89: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

<div id="map_canvas" style="width:100%; height:100%">

</div>

Page 90: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

<style type="text/css">html { height: 100% }body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }

</style>

Page 91: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true">

</script>

Page 92: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

<script type="text/javascript">var map;function initialize() {

var latlng = new google.maps.LatLng(0, 0);var myOptions = {

zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP

};map = new google.maps.Map(

document.getElementById("map_canvas"),myOptions

);}

</script>

Page 93: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

function run() {initialize();var win = function(position) {

var coords = position.coords; var latlng2 = new google.maps.LatLng(

coords.latitude, coords.longitude);map.panTo( latlng2 );

};var fail = function(e) {

alert('Can\'t retrieve position.\nError: ' + e);};navigator.geolocation.getCurrentPosition(win, fail);

}

Page 94: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

function onDeviceReady(){

run();}

Page 95: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

var marker = new google.maps.Marker({position: latlng2, map: map, title:"I am here!"

});

Page 96: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

var contenuto = "<h1>Sono Qui!</h1>";var infowindow = new google.maps.InfoWindow({

content: contenuto});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);}

);

Page 97: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"

></script>

Page 98: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

var markers = {};function addMarker(tweet, position) {

position = tweet.geo ? tweet.geo.coordinates: null;if (!position && tweet.location) {

var L = String(tweet.location).split(':')[1] || tweet.location;position = L.split(',');

}if (position) {markers[tweet.from_user_id] =

new google.maps.Marker({map: map,title: tweet.from_user,position:

new google.maps.LatLng(position[0], position[1])});

}};

Page 99: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

function getTweets(coords){$.getJSON(

'http://search.twitter.com/search.json',{ geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',

rpp: 30 },function(data) {

if (data && data.results && !!data.results.length) {data = data.results;for (var i = 0, ln = data.length; i < ln; i++) {

var tweet = data[i];if (tweet.geo && tweet.geo.coordinates) {

var position = new google.maps.LatLng(

tweet.geo.coordinates[0], tweet.geo.coordinates[1]);

addMarker(tweet, position);}

}} else {

alert('No Results Available');}

});

}

Page 100: Cross Media design scenarios: smartphones and tablets, a workshop at ISIA Design Florence

getTweets(coords);