Presentazione tenuta il 27-03-2014 a B com - bcomexpo.com da Francesco Ronchi di Synesthesia srl http://www.synesthesia.it/

1. MOBILE SITE O MOBILE APP?
Francesco Ronchi - Synesthesia srl
!
!
!
!
!
!
B com 2014
twitter: @qba75 @synesthesiait
#bcomexpo

2. MOBILE ?
• non ci sono più dubbi
sul se esserci
• un canale estremamente efficace
(v. presentazione Bcom 2013 http://goo.gl/pS7a5o)
• se non ora, quando?

3. MOBILE !
• mi basta fare un sito (o rendere il mio) fruibile
da Mobile?
• mi conviene fare anche una App?
• quali approcci? quali tecnologie? best practices?

4. DISTRICHIAMOCI NELLA JUNGLA…

5. http://www.fvm.withgoogle.com/
IL MIO SITO È FRUIBILE DA MOBILE?
http://goo.gl/Fsr5tt

6. IL MIO SITO È MOBILE-FRIENDLY?
NO

7. MOBILE SITE?
• DOMANDA: il mio sito oggi è ottimizzato per Mobile?
• sì, il mio sito è ottimizzato per Mobile e dispongo di una APP
• sì, il mio sito è ottimizzato per Mobile e NON dispongo di una APP
• no, non è ottimizzato Mobile ma comunque visibile
• no, non è ottimizzato Mobile e NON visibile (es. sito in Flash)
• no, non è ottimizzato Mobile, ma pianifichiamo di renderlo tale entro l’anno
• no, non è ottimizzato Mobile, e NON pianifichiamo di renderlo tale nel breve
periodo

8. LA STRADA
DEL MOBILE WEB
• Preistoria: il WAP (1997)
• I primi siti mobile: m-site e .mobi
(2004/2005)
• La rivoluzione dell’iPhone (2007-2008)

9. OGGI:
M-SITE, RESPONSIVE,ADAPTIVE

10. • un sito separato da quello “desktop”
(può condividere alcuni elementi)
• ottimizzato solo per il mobile
• redirezione automatica in base al dispositivo
M-SITE, RESPONSIVE,ADAPTIVE

11. • quando è consigliato:
• esiste già il sito “desktop” e non si vuole/può
modificare
• gli obiettivi (e le funzionalità) tra “standard” e
“mobile” differiscono sensibilmente
M-SITE, RESPONSIVE,ADAPTIVE

12. Case: M-Site
FrancorossoVirtualTours
M-SITE, RESPONSIVE,ADAPTIVE
http://goo.gl/5NEjHz

13. • una unica base per sito “desktop” e “mobile”
• si adatta automaticamente e fluidamente alla
dimensione di schermo (smartphone, tablet,
desktop)
• è il frontend ad adattarsi, grazie ad HTML5/JS
M-SITE, RESPONSIVE,ADAPTIVE

14. • quando è consigliato
• quando si crea un sito ex-novo
• se non ci sono sostanziali differenze nella
tipologia di contenuti, struttura e funzionalità
tra “desktop” e “mobile”
M-SITE, RESPONSIVE,ADAPTIVE

15. !
!
!
!
• esempio www.officinesuperbike.com/
M-SITE, RESPONSIVE,ADAPTIVE

16. • similmente a Responsive, si adatta
automaticamente al tipo di schermo
• l’adattamento viene fatto (anche) lato server
• più complesso (costoso) rispetto a Responsive
M-SITE, RESPONSIVE, ADAPTIVE

17. • quando si usa
• quando ci sono molte differenze tra le versioni e/
o tra i contenuti che voglio trasmettere
• se si vuole un estremo controllo e
ottimizzazione dei dati trasferiti
• se si vogliono gestire devices speciali o molto datati
M-SITE, RESPONSIVE, ADAPTIVE

18. • voglio (ri)fare un nuovo sito:
lo faccio Responsive!
(eventualmente/in parte Adaptive se è necessario)
• esiste già un sito “tradizionale” che non posso o
non voglio rifare:
creo un M-Site
(ma potrebbe essere l’occasione per un redesign!…)
RIASSUMENDO, IN GENERE:

19. • oggi è indispensabile progettare un sito anche per
il Mobile
• una buona strategia è quella di progettare prima
per il Mobile (e poi estendere)
• (oggi alcuni business nascono Mobile only…)
IN OGNI CASO…

20. MOBILE FIRST

21. MOBILE FIRST
• mi concentro prima sulla versione mobile
• mi permette di semplificare la progettazione
• estendere la versione “mobile” è più facile che
ridurre quella “desktop”

22. • accessibile da “qualunque” device con un
browser (sufficientemente recente)
• sono raggiungibile dai motori di ricerca, posso
fare SEO, deep linking
• l’utente non deve installare nulla (a volte è uno
svantaggio), facile uso “estemporaneo”
VANTAGGI DI UN SITO
MOBILE SU UNA APP (1/2)

23. • non devo sottostare ad approvazioni o linee
guida (es.Apple Store)
• più rapido da creare e in genere più economico
di una App
VANTAGGI DI UN SITO
MOBILE SU UNA APP (2/2)

24. • in assenza di connettività, non è accessibile (può
essere un deal breaker in alcuni casi)
• non si può accedere a molte delle funzionalità
“smart” degli smartphones (e tablet), come le
notifiche push e l’accesso all’hardware
• anche se HTML5 sta migliorando…
…E GLI SVANTAGGI (1/2)

25. • …non potrà mai competere con una App nativa in
termini di rapidità, funzioni, user interface
• fornisce una user experience “omologata” per
tutte le piattaforme
…E GLI SVANTAGGI (2/2)

26. MI SERVE UNA APP?
http://www.fvm.withgoogle.com/http://goo.gl/hoF8gL

27. MI SERVE UNA APP!
http://www.fvm.withgoogle.com/http://goo.gl/hoF8gL

28. MOBILE APP?
• DOMANDA: il mio business oggi:
• ha realizzato una o più mobile Apps per smartphone o tablet
• non ha realizzato mobile Apps ma intende farlo nel 2014
• non ha realizzato mobile Apps e non intende realizzarne nel
breve periodo

29. • Applicazioni vere e proprie, installate sul device
• Scaricate attraverso gli Application Store
• Vari modelli di business: gratuite, a pagamento,
freemium, ad-supported
• Soddisfano generalmente uno o più scopi ben precisi
(intrattenimento, informazione, utilità …)
TUTTI SAPPIAMO COSA SONO,
NO? :-)

30. • lanciate da Apple con iPhone (2008)
• Successivamente è entrato in gioco Google con
Android, e altri player
• Sono diventate un fenomeno mondiale (milioni di
app create, miliardi di download)
BREVE STORIA DELE APP

31. • Microsoft con Windows Phone
• Blackberry con Blackberry OS
PIATTAFORME
• Apple con iOS
• Google con Android

32. PRINCIPALI PIATTAFORME
95% degli accessi web
da mobile in Italia
• Apple con iOS
• Google con Android

33. • le App sono realizzate per le specifiche
piattaforme
• è importante quindi sapere quali sono le più
utilizzate dal nostro target
• per decidere possiamo affidarci alle analytics
specifiche (es. gli accessi al sito) o trend generali
APP E PIATTAFORME

34. • NATIVO
• HTML5, Ibrido, Crossplatform…
QUALE APPROCCIO ALLO
SVILUPPO DI UNA APP?

35. • Massima qualità: performance, user experience,
libertà di sfruttare hardware e software senza
nessun compromesso.
• Specifiche: vanno (ri)scritte per ogni singola
piattaforma da supportare
APP NATIVE
(COSA SONO?)

36. • sono sempre da preferire, se ho il budget, per le
piattaforme principali
• un must quando la user experience è
importante
• alcune cose si possono fare solo in linguaggio
nativo
APP NATIVE
(QUANDO USARLE?)

37. • in alcuni casi vengono proposte per ridurre tempi e
costi
• sono utili soprattutto in casi specifici (es. app B2B o
games)
• bisogna avere ben chiari pro/contro: hanno
controindicazioni e limiti
• il cross-platform vero, su mobile è una chimera
APP HTML5 / IBRIDE / CROSPLATFORM

38. • App “HTML5 pure web”
• App scritte in HTML5 (linguaggio del web)
• Vengono fruite via web, esattamente come un sito
• Sfruttano HTML5 per funzioni avanzate e spesso
imitano l’interfaccia delle App native
• sono più limitate e più lente delle App native
TIPI DI SVILUPPO

39. • App “HTML5 ibride”
• come le App HTML5 pure web, ma:
• Vengono inserite in “contenitori” nativi che estendono le
funzionalità disponibili e permettono di distribuirle attraverso
gli store
• attraverso il “contenitore” possono accedere anche alle funzioni
native
TIPI DI SVILUPPO

40. • App HTML5 (ibride o pure web)
• se la qualità estetica e la responsività non sono prioritarie
• se voglio evitare la validazione degli store (app pure web)
e lavorare solo online non è un limite
• app B2B o app che interagiscono poco con le funzioni
del telefono
COME SCELGO ILTIPO DI SVILUPPO?

41. • App “multipiattaforma”
• La “chimera” dell’industria del mobile
• Tante soluzioni disponibili, ma nessuna definitiva
• caso per caso si possono valutare, in genere sono
più adatte a ambiti specifici come il B2B o i giochi
TIPI DI SVILUPPO

42. • Quando voglio interattività, multimedia, grafica
avanzata (non solo per i giochi!).
• Quando voglio user interface e user experience
raffinata.
• Quando voglio sfruttare le caratteristiche (vantaggi)
proprie del mezzo mobile, in particolare delle App,
ovvero…
IN GENERALE, QUANDO PREFERIRE
UNA APP A UN MOBILE SITE?

43. • Immediatezza e Comodità: sono sempre con noi,
una App è attivabile in pochi secondi, più
comodamente che aprire il browser, cercare
aspettare…
• Personalizzazione: una App è più personalizzabile
con le preferenze legate all’utente (senza bisogno di
fare log-in…)
CARATTERISTICHE (VANTAGGI)
DI UNA APP (1/3)

44. • Interazione: con le notifiche push l'interazione è
bidirezionale, da e verso l'utente
• Localizzazione: geolocation (GPS) e proximity
(iBeacons/BLE, NFC)
• Utilizzo dei sensori, della fotocamera e in generale
dell’hardware del dispositivo
CARATTERISTICHE (VANTAGGI)
DI UNA APP (2/3)

45. • Si possono utilizzare soluzioni più avanzate di
Mobile Payment rispetto al mobile web
• Utilizzo di gateway di mobile payment in app
• Acquisto della app o di contenuti in-app dallo
Store* (in-app=76% degli introiti totali **)
CARATTERISTICHE (VANTAGGI)
DI UNA APP (3/3)
* 30% fee su app & in-app purchase
** fonte Distmo http://goo.gl/OthnV

46. QUINDI:
PRIMA DITUTTO GLI OBIETTIVI
crescita visibilità, brand awareness
creazione di database di utenti
relazione e comunicazione diretta con gli utenti
loyalty, engagement, intrattenimento
fornitura di servizi e contenuti free e premium
incremento di traffico verso store e sito web
mobile ecommerce

47. POI: I CONTENUTI
Content is
(always :-)
the King

48. INFINE: GLI STRUMENTI
• Vantaggi e Punti di forza
• Svantaggi e Limitazioni
• Analisi concorrenza: cosa fanno i miei
competitor?

49. UN CASO SPECIFICO:
RETAIL
• Obiettivi:
1. vendita diretta (e indiretta)
2. presenza e diffusione del brand
3. loyalty, fidelizzazione, promozione

50. UN CASO SPECIFICO:
RETAIL
• Sito eCommerce Responsive
(o sito desktop + m-site):
• E’ una vetrina, e permette la vendita diretta da mobile o
indiretta cross-device
• per l’ecommerce mobile “puro”, un sito ottimizzato è spesso
preferibile a una App.
• Ma una App può dare molto valore aggiunto…

51. UN CASO SPECIFICO:
RETAIL
• Valore aggiunto di una Mobile App (1/2)
• presenza e diffusione del brand con info
istituzionali, store locator (negozio più vicino),
interazione con i social network
• link al sito responsive/m-site per l’acquisto
online

52. UN CASO SPECIFICO:
RETAIL
• Valore aggiunto di una Mobile App (2/2)
• loyalty: offerte speciali
push personalizzate,
coupon, fidelity card
online e in-store
(proximity)
• anche indoor location,
pagamenti diretti, marketing, gamification

53. ESTIMOTE (IBEACONS/BLE PROXIMITY)
http://goo.gl/QExDUU

54. GRAZIE!
Francesco Ronchi - Synesthesia srl
!
!
!
!
!
!
B com 2014
twitter: @qba75 @synesthesiait
#bcomexpo
Distribuito in licenza Creative Commons BY-NC - http://creativecommons.org/licenses/by-nc/3.0/it/