Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progettare una Mobile Web App

1,961 views

Published on

cosa significa progettare una Mobile web app, quali sono le differenze, i vantaggi e gli svantaggi rispetto ad un'applicazione nativa. Come decidere quale opzione scegliere.

Published in: Business
  • Be the first to comment

Progettare una Mobile Web App

  1. 1. PROGETTARE UNA MOBILE WEB APP | 1
  2. 2. 6 key Issue da considerare 1.  Identifica se il browser sta usando un PC o un mobile device Ci sono dei redirect ad una versione mobile del sito? Esempio: http://www.autoglass.co.uk/ -> http://m.autoglass.co.uk | 2 1.Rileva traffico via mobile e ridirigi il traffico verso un mobile URL
  3. 3. Autoglass Mobile Site | 3 Versione mobile del sito, sviluppata con Jquery Mobile
  4. 4. Script detection | 4 www.detectmobilebrowsers.mobi
  5. 5. ESERCITAZIONE •  Andate sul vostro sito aziendale navigando dal vostro handset. •  Che tipo di sito visualizzate? •  C’è un redirect automatico ad un nuovo URL? •  Il sito è ottimizzato per il vostro handset? •  Ripetete l’esperiemento, se possibile, per: •  Tablet (iPad, Android..) •  Altro Smartphone | 5
  6. 6. Sviluppare un sito ottimizzato 2. definisci per quali device e piattaforme desideri che il tuo sito sia ottimizzato. Quali sono i dispositivi che supporti? | 6 Devi gestire il trade-off tra massima reach e ottimizzazione della mobile experience solo per un subset di device
  7. 7. Selezionare il subset giusto •  Iphone ha una penetrazione del 12% •  Significa che l’88% degli utenti mobile utilizza altri device, browser, schermi e risoluzioni differenti.. •  I 10 dispositivi più diffusi coprono il 25% del totale dei device | 7
  8. 8. Ottimizzare la mobile experience •  È possibile rilevare il tipo di device dalla prima sessione sul Server •  Si fa il matching istantaneo con un DB contenente le caratteristiche di tutti i device •  Device Atlas è uno dei database open source che fornisce questo servizio | 8
  9. 9. Device Atlas | 9
  10. 10. Device Anywhere | 10 http://www.keynotedeviceanywhere.com/
  11. 11. Kit di device per testing | 11 Tutti i device utilizzati per testare il sito della BBC
  12. 12. Ottimizzare il sito web per il mobile 3. Definire in che modo il contenuto sarà adattato per il Mobile Puoi pensare di mostrare lo stesso identico contenuto oppure una versione ridotta di contenuti, specifica per la fruizione via Mobile Esempio: se il tuo sito presenta un’animazione Flash fornisci un contenuto alternativo per iPhone.. | 12
  13. 13. Ottimizzare il sito web per il Mobile 4. Progetta e costruisci Ogni contenuto Mobile dovrebbe essere raggiungibile con al massimo 3 click Considera le best practice per la mobile usability: Test di usabilità: -  Tempo per completare un task specifico -  Soddisfazione dell’utente al completamento del task | 13
  14. 14. Verifica 4 top user tasks 1.  Browse: decidi le categorie chiave da mostrare 2.  Search: stabilisci se è + importante la navigazione o la ricerca per il tuo sito; per un sito di ticketing la search è + importante 3.  Branding messages: evidenza sul brand e sul servizio 4.  Support: solitamente il customer service è importante | 14
  15. 15. ESERCITAZIONE •  ANALIZZA QUESTI 4 ELEMENTI (Browse, Search, Branding, Support) PER I SEGUENTI SITI: •  www.martini.com •  www.campari.com •  www.aperol.com | 15
  16. 16. 4 opzioni per il Mobile design 1.  Semplice sito Mobile (contenuti differenti) 2.  Screen Scrape (stessi contenuti) 3.  Responsive design (stessi contenuti, differente mobile styling) 4.  Sito web HTML5 (stessi contenuti, differente mobile styling) | 16
  17. 17. 1. Mobile site distinto •  E’ il metodo più semplice, si costruisce un sito mobile distinto (es. http://m.company.com) •  Contenuti, layout, stili, hosting differenti •  Approccio valido per small business, dove non si richiede un aggiornamento frequente | 17
  18. 18. 1. Mobile site distinto Non è l’approccio consigliato nel medio-lungo termine perché: •  richiede la duplicazione di contenuti •  richiede investimenti di strumenti differenti e risorse •  non fornisce una brand experience consistente | 18
  19. 19. 2. Mobile site modello “Screen Scrape” Alcuni brand di alto profilo hanno optato per una soluzione temporanea: •  creazione di una versione semplice con pochi contenuti •  Nessuna integrazione con il back-end •  È una soluzione rapida che non comporta conflitti tra i 2 team di sviluppo (web e mobile) | 19
  20. 20. 3. Responsive design Si basa sul principio di sviluppare un solo sito, fruibile e ottimizzato per differenti fruizioni (web, tablet, handset) •  Elimina le distinzioni tra sito web e mobile site •  Permette di contestualizzare l’esperienza online •  Permette di creare e mantenere una sola versione del sito | 20 È un approccio sempre più popolare, anche se ancora non così utilizzato dai grandi brand
  21. 21. | 21 | Mobile: strategy, marketing, apps– © Leonardo Bellini - Volontari per lo Sviluppo http://www.html.it/guide/img/responsivedesign/ilviaggio/index.html Obiettivo: costruire siti che si adattino a qualsiasi dispositivo
  22. 22. Responsive design: una definizione | 22 http://www.html.it/pag/32821/cose-il-responsive-design/
  23. 23. Cosa non è il responsive design •  non è una metodologia per creare versioni dei siti ‘ottimizzate’ e specifiche per il mobile: un principio cardine del responsive design è che il web è uno e unico, non c’è pertanto necessità di versioni diverse per un singolo sito •  quello che progetto e realizzo deve essere auto-adattante rispetto all’enorme e crescente varietà di dispositivi con cui viene (e verrà) fruito; | 23
  24. 24. Requisiti tecnici Implica la conoscenza di un mix di tecnologie: •  Markup language: HTML •  Presentation & Layout: CSS, CSS3 •  Scripting (javascript, Ajax, PHP.. Concetto base sono le CSS Media Query che permettono di specificare nell’attributo “media” il tipo di device a cui deve essere applicato | 24
  25. 25. Tipi di media supportati •  all: il CSS si applica a tutti i dispositivi di visualizzazione; •  screen: schermo di computer; •  print: pagina stampata; •  projection: presentazioni e proiezioni; •  speech: dispositivi a sintesi vocale; •  braille: supporti basati sull’uso del braille; •  embossed: stampanti braille; •  handheld: dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche; •  tty: dispositivi a carattere fisso come i terminali; •  tv: visualizzazione su schermi televisivi. | 25
  26. 26. Temi Wordpress “Responsive” | 26
  27. 27. Responsive design style | 27 Nella versione Desktop il sito presenta 2 colonne, 1 sola Per la versione iPad e iPhone
  28. 28. Responsive Design Test | 28 http://www.benjaminkeen.com/ Permette di testare il tuo sito per Differenti schermi
  29. 29. ESERCITAZIONE •  VISITATE http://www.benjaminkeen.com •  Seguite le istruzioni per generare Javascript e aggiungetelo alla vostra barra dei preferiti •  Testate i seguenti siti web: •  www.bmw.com •  www.mercedes.com •  www.fiat.it •  www.audi.com Quali sono i siti che risultano ottimizzati per più schermi e risoluzioni? | 29
  30. 30. SocialMinds.it: test multi device | 30
  31. 31. http://mediaqueri.es/ | 31 Esempi di come siano responsive alcuni siti famosi
  32. 32. About responsive Design •  Sebbene di non difficile tecnologia una degli ostacoli all’adozione è che richiede una certa complessità nella progettazione di layout differenti •  Richiede inoltre un’architettura informativa più complessa | 32 Ogni sito Web dovrebbe essere il più possibile “responsive” Senza compromettere la user experience per il desktop, tablet e mobile
  33. 33. Mobile Experience: Context & Intent 2 elementi chiave per la mobile user experience: Contesto d’uso e Intenzione: •  una persona che sta facendo shopping ha bisogno di trovare subito info su prezzi e prodotti. •  Viceversa una persona che naviga a casa da laptop ha bisogno di maggiori info, recensioni etc. | 33
  34. 34. 4. HTML5 Web App Molti designer si stanno orientando a costruire mobile Web app basate su HTML5 (nativo in molti browser di smartphone) Vantaggi: •  Web app multi-piattaforma e multi-device •  Meno costosa e impegnativa rispetto alle applicazioni native •  Permette di evitare la commissione del 30% per l’Apple Store •  Permette di sfumare il confine tra sito web e mobile app •  Abilita rich-media e nuove funzionalità (es. dati dell’utente inseriti in precedenti sessione utente)| 34
  35. 35. HTML5: Il futuro delle Mobile Apps? •  Alcuni Analisti di Forrester Research prevedono un erosione di margini di Apple del 30% a causa della diffusione delle Web Apps •  Si prevede una riduzione dei costi di migrazione delle Mobile Apps da Apple verso Android e Windows Mobile | 35
  36. 36. Mobile Web Apps vs Native Apps Mobile Web Apps: 1.  Più lente rispetto alle applicazioni native 2.  Richiedono la connessione 3.  Più veloci e meno costose da implementare 4.  Evitano i costi di commissione degli App Store (30% di AppStore) Native Mobile Apps: 1.  Mobile customer experience ottimizzata ma per un 1 singolo device 2.  Migliori performance 3.  Richiedono tempi e costi di sviluppo superiori 4.  Richiedono submissions sugli App Store per aggiornamenti 5.  I ricavi devono essere condivisi con lo Store | 36
  37. 37. Financial Time Web App Case Study | 37 +31 % di abbonamenti durante l’ultimo anno +29% numero di utenti registrati (4,8 milioni) 25% del traffico di FT.com via mobile 2.7 milioni di utenti della Web App Web app lanciata nel giugno 2011 in risposta alle nuove Regole di Apple sulle App legate agli abbonamenti
  38. 38. Mobile Web App Frameworks •  Esistono alcune framework e piattaforme che semplificano e accelerano lo sviluppo di Mobile Web Apps. 1.  Sencha Touch Framework (HTML5) 2.  jQuery Mobile Framework 3.  JQTouch Plugin per mobile development 4.  The M Project (jQuery Mobile + HTML5) 5.  DHTMLX Touch 6.  WebApp.net 7.  Wijmo – jQuery Ui Widgets | 38
  39. 39. Sencha Touch Framework | 39 http://www.sencha.com/products/touch/
  40. 40. Jquery Mobile | 40 http://jquerymobile.com/
  41. 41. JQTouch Framework | 41 http://jqtouch.com/
  42. 42. DHTMLX Framework | 42 http://www.dhtmlx.com/touch/
  43. 43. Personalizzazione | 43 I Mobile Phone sono oggetti molto personali, intimi: Difficilmente li prestiamo a qualcuno. Si prestano ad una personalizzazione spinta dell’esperienza Raramente però vediamo siti mobile o apps ottimizzati su Comportamenti, acquisti del singolo utente
  44. 44. Amazon Mobile App •  La Home page di Amazon mobile riporta consigli e raccomandazioni come il sito web •  È possibile applicare: 1.  Behavioural targeting 2.  Time location sensitive messaging | 44 Usa la personalizzazione per migliorare la rilevanza del tuo sito mobile
  45. 45. Personalizzare il sito mobile | 45 Esempio di mobile web design ottimizzato con la Personalizzazione dell’esperienza utente
  46. 46. Ottimizzare il sito web mobile 6. Stai misurando e ottimizzando il tasso di conversione? La Mobile Web Analytics ci permette di tracciare: •  origine dei browser •  I profili dei device •  Utenti unici, nuovi utenti, utenti ricorrenti •  Tempo unico sulla pagina e sul sito | 46 Il Bounce rate medio di un mobile site è attorno all’80%
  47. 47. CONVERSION FUNNEL STEPS | 47 STAI MISURANDO LE METRICHE PER CIASCUNA FASE DEL FUNNEL? Assicurati di poter misurare metriche e Kpi per il tuo sito Mobile
  48. 48. Le 5 sfide per creare un sito mobile ottimizzato 1.  1 sito o 2? Creare un mobile site distinto oppure ottimizzare il sito esistente? 2.  Right Content. Offri contenuti funzionali all’utente in mobilità (mappe, info, Shopping, social networking e coupon) 3.  UX. Usa una navigazione semplice, verticale, non orizzontale. Usa le icone più dei link testuali 4.  Personalizatio. Tieni conto dei comportamenti e della storial del cliente. Aggiungi la geolocalization 5.  Promotion. Usa tutti i canal media per acquisire traffico. Traccia i link per valutare l’efficcia dei canali di ingresso | 48

×