SlideShare ist ein Scribd-Unternehmen logo
1 von 28
Downloaden Sie, um offline zu lesen
Scontro tra UI
               -aka-
                 mm   o imparare
      cosa dovre
                   , iOS e WP7
        da Android




Salvatore Laisa - @moebiusmania
Mohole Lab
About me




2006   2007     2008     2010   2011/
                                2012
Di cosa parleremo oggi
1. User interface

2. Cross Platform

3. Case histories

4. Risorse


3
Parte 1:
    User interface




4
Principi di User Interface
• Le UI esistono per permettere interazioni
• Mantenere l’attenzione, sempre

• Consistenza e pertinenza sono importanti!

• Un’azione primaria per schermata

• Le azioni secondarie... sono secondarie!


5
Le UI che si sfideranno oggi




     iOS       Android    Metro


6
iOS - User Interface Pro
          • Luccicante e sfavillante!
          • Ha dettato molti standard
          • No pulsanti fisici
          • Stile molto curato




7
iOS - User Interface Cons
           • Lo stile inizia a essere datato
           • Barre invadenti
           • Troppe app uguali
           • Distinguersi è rischioso




8
Android - User Interface Pro
            • UI rinnovata e pulita
            • Style Guide pubblica
            • Molte icone
            • Look alla “Tron”
            • Molte azioni con swipe


9
Android - User Interface Cons
          • Scarsa diffusione ICS-design
          • Migliorata, ma non del tutto
          • Differenze “forzate”
          • Sense, TouchWiz, ecc...




10
Metro - User Interface Pro
            • Ritorno all’essenziale
            • Cura dettagli
            • Content-centric design
            • Transizioni fluide




11
Metro - User Interface Cons
             • Forse troppo essenziale?
             • UX ancora acerba
             • Sarà meglio compresa con
              Windows 8




12
Parte 2:
           Cross platform



     Illustrazione:
     Will Phillips Jr

13
Qual’è il punto?
     Realizzare User Interface consistenti
      attraverso tutte e 3 le piattaforme.




14
Perché dovrei?
     Perché la realtà del mercato (e quindi di
     chi ci commissiona app) è che esistono 3
                   piattaforme.




15
Casi di una UI cross-platform
• il cliente punta a un’utenza vasta
• si lavora con feature comuni

• sviluppo con soluzioni “bridge” (HTML5)

• c’è una controparte Web




16
Quando invece NO
• vogliamo il massimo dalla piattaforma
• per correre meno rischi

• è “solo” un’app

• voglio conferire esclusività




17
Esiste la UI universale?
     Può darsi, ma intanto possiamo prendere
     il meglio da queste 3 e amalgamarlo nelle
                   nostre app!




18
Parte 3:
         Case histories


     Foto:
     “Ocean view branch” - Orange
     County Archives

19
Case history 1: Fineco




20
Case history 2: WordPress




21
Case history 3: Facebook




22
Case history 4: jQuery Mobile




23
Parte 4:
          Risorse


     Foto:
     “Presents” - Msmorningtom

24
Dove documentarsi
• iOS - https://developer.apple.com/devcenter/ios/

• Android Design - http://developer.android.com/

• WP7/Metro - http://msdn.microsoft.com

• (Design Shack) Trends in UI Design - http://
     designshack.net/articles/graphics/interesting-trends-in-
     ui-design/




25
Letture interessanti




     Designing Mobile Interfaces   Simple and usable

      (S. Hoober / E. Berkman)      (Giles Colborne)


26
a questo punto...




27
GRAZIE!
          Salvatore Laisa - Mohole Lab
            salvatore.laisa@mohole.it
     www.salvatorelaisa.net / scuola.mohole.it


28

Weitere ähnliche Inhalte

Andere mochten auch

Dal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCA
Dal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCADal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCA
Dal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCAWhymca
 
BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...
BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...
BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...Whymca
 
Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012
Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012
Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012Whymca
 
whymca Andrea Piovani Layar: la nuova frontiera della realtà aumentata
whymca Andrea Piovani Layar: la nuova frontiera della realtà aumentatawhymca Andrea Piovani Layar: la nuova frontiera della realtà aumentata
whymca Andrea Piovani Layar: la nuova frontiera della realtà aumentataWhymca
 
Internet of Things con .Net Micro Framework: un mondo di device interconnessi
Internet of Things con .Net Micro Framework: un mondo di device interconnessiInternet of Things con .Net Micro Framework: un mondo di device interconnessi
Internet of Things con .Net Micro Framework: un mondo di device interconnessiWhymca
 
Türkiye'nin siber suç haritası 1990-2011
Türkiye'nin siber suç haritası 1990-2011Türkiye'nin siber suç haritası 1990-2011
Türkiye'nin siber suç haritası 1990-2011Melih Bayram Dede
 
NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015
NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015
NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015Melih Bayram Dede
 

Andere mochten auch (10)

Dal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCA
Dal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCADal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCA
Dal web a Windows 8: costruire app Metro immersiv - Daniele Bochiccio - whyMCA
 
BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...
BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...
BEST PRACTICES PER LA SCRITTURA DI APPLICAZIONI TITANIUM APPCELERATOR - Aless...
 
TransactionTree Start Riot Pitch
TransactionTree Start Riot PitchTransactionTree Start Riot Pitch
TransactionTree Start Riot Pitch
 
Portfolio
PortfolioPortfolio
Portfolio
 
Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012
Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012
Windows phone 7 deep dive again and more - roberto freato WhyMCA 2012
 
whymca Andrea Piovani Layar: la nuova frontiera della realtà aumentata
whymca Andrea Piovani Layar: la nuova frontiera della realtà aumentatawhymca Andrea Piovani Layar: la nuova frontiera della realtà aumentata
whymca Andrea Piovani Layar: la nuova frontiera della realtà aumentata
 
Internet of Things con .Net Micro Framework: un mondo di device interconnessi
Internet of Things con .Net Micro Framework: un mondo di device interconnessiInternet of Things con .Net Micro Framework: un mondo di device interconnessi
Internet of Things con .Net Micro Framework: un mondo di device interconnessi
 
Türkiye'nin siber suç haritası 1990-2011
Türkiye'nin siber suç haritası 1990-2011Türkiye'nin siber suç haritası 1990-2011
Türkiye'nin siber suç haritası 1990-2011
 
NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015
NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015
NETAŞ Si̇ber Güvenli̇k Sunumu - C. Müjdat Altay - 15 Haziran 2015
 
Türk Telekom BuluTT
Türk Telekom BuluTTTürk Telekom BuluTT
Türk Telekom BuluTT
 

Ähnlich wie SCONTRO TRA UI -AKA- COSA DOVREMMO IMPARARE DA IOS, ANDROID E WP7

Touch&play framework
Touch&play frameworkTouch&play framework
Touch&play frameworkCSP Scarl
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for successAcrmnet s.r.l.
 
Programmiamo iPhone e iPad (e non solo!) con MonoTouch
Programmiamo iPhone e iPad (e non solo!) con MonoTouchProgrammiamo iPhone e iPad (e non solo!) con MonoTouch
Programmiamo iPhone e iPad (e non solo!) con MonoTouchStefano Ottaviani
 
Corso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI DesignCorso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI DesignAndrea Picchi
 
Smau milano 2012 arena social media davide-senatore
Smau milano 2012   arena social media davide-senatoreSmau milano 2012   arena social media davide-senatore
Smau milano 2012 arena social media davide-senatoreSMAU
 
App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....
App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....
App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....Branding 2.0
 
App vs Mobile website: quale lo scenario vincente?
App vs Mobile website: quale lo scenario vincente?App vs Mobile website: quale lo scenario vincente?
App vs Mobile website: quale lo scenario vincente?Websolute
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...DrupalDay
 
Model view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction designModel view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction designStefano Bussolon
 
Aperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - MobileAperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - Mobileaperinfo
 
User Experience su Mobile con Enrico Maioli.
User Experience su Mobile con Enrico Maioli.User Experience su Mobile con Enrico Maioli.
User Experience su Mobile con Enrico Maioli.semrush_webinars
 
App mobile cross-platform con Xamarin
App mobile cross-platform con XamarinApp mobile cross-platform con Xamarin
App mobile cross-platform con XamarinMichele Aponte
 
Sviluppo di applicazioni mobile cross platform
Sviluppo di applicazioni mobile cross platformSviluppo di applicazioni mobile cross platform
Sviluppo di applicazioni mobile cross platformDan Ardelean
 
Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011SEO Training
 
Android Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insiemeAndroid Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insiemeFrancesco De Simone
 
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - SynesthesiaLo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - SynesthesiaFrancesco Ronchi
 

Ähnlich wie SCONTRO TRA UI -AKA- COSA DOVREMMO IMPARARE DA IOS, ANDROID E WP7 (20)

MonoTouch, un anno dopo
MonoTouch, un anno dopoMonoTouch, un anno dopo
MonoTouch, un anno dopo
 
Touch&play framework
Touch&play frameworkTouch&play framework
Touch&play framework
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for success
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
 
Programmiamo iPhone e iPad (e non solo!) con MonoTouch
Programmiamo iPhone e iPad (e non solo!) con MonoTouchProgrammiamo iPhone e iPad (e non solo!) con MonoTouch
Programmiamo iPhone e iPad (e non solo!) con MonoTouch
 
Corso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI DesignCorso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI Design
 
Smau milano 2012 arena social media davide-senatore
Smau milano 2012   arena social media davide-senatoreSmau milano 2012   arena social media davide-senatore
Smau milano 2012 arena social media davide-senatore
 
App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....
App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....
App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....
 
App vs Mobile website: quale lo scenario vincente?
App vs Mobile website: quale lo scenario vincente?App vs Mobile website: quale lo scenario vincente?
App vs Mobile website: quale lo scenario vincente?
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
 
Model view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction designModel view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction design
 
Aperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - MobileAperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - Mobile
 
User Experience su Mobile con Enrico Maioli.
User Experience su Mobile con Enrico Maioli.User Experience su Mobile con Enrico Maioli.
User Experience su Mobile con Enrico Maioli.
 
App mobile cross-platform con Xamarin
App mobile cross-platform con XamarinApp mobile cross-platform con Xamarin
App mobile cross-platform con Xamarin
 
12 - Mobile web
12 - Mobile web12 - Mobile web
12 - Mobile web
 
Sviluppo di applicazioni mobile cross platform
Sviluppo di applicazioni mobile cross platformSviluppo di applicazioni mobile cross platform
Sviluppo di applicazioni mobile cross platform
 
Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011
 
Mobile development .net
Mobile development .netMobile development .net
Mobile development .net
 
Android Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insiemeAndroid Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insieme
 
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - SynesthesiaLo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - Synesthesia
 

Mehr von Whymca

Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!
Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!
Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!Whymca
 
Physical computing: tutto intorno a te - Andrea Maietta, Paolo Aliverti
Physical computing: tutto intorno a te - Andrea Maietta, Paolo AlivertiPhysical computing: tutto intorno a te - Andrea Maietta, Paolo Aliverti
Physical computing: tutto intorno a te - Andrea Maietta, Paolo AlivertiWhymca
 
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCAGestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCAWhymca
 
Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Whymca
 
Crossdev sdk/tools: devil's deception - Luciano Colosio
Crossdev sdk/tools: devil's deception - Luciano ColosioCrossdev sdk/tools: devil's deception - Luciano Colosio
Crossdev sdk/tools: devil's deception - Luciano ColosioWhymca
 
Android - ishan fernando - android nfc presentation
Android - ishan fernando - android nfc presentationAndroid - ishan fernando - android nfc presentation
Android - ishan fernando - android nfc presentationWhymca
 
Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto
Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto
Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto Whymca
 
Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?
Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?
Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?Whymca
 
Whymca Vodafone Apps
Whymca Vodafone AppsWhymca Vodafone Apps
Whymca Vodafone AppsWhymca
 
Whymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile Messaging
Whymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile MessagingWhymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile Messaging
Whymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile MessagingWhymca
 
Whymca Italo Vignoli Demografia Dei Social Media
Whymca Italo Vignoli Demografia Dei Social MediaWhymca Italo Vignoli Demografia Dei Social Media
Whymca Italo Vignoli Demografia Dei Social MediaWhymca
 
Whymca Dpixel
Whymca DpixelWhymca Dpixel
Whymca DpixelWhymca
 
Whymca Intro
Whymca IntroWhymca Intro
Whymca IntroWhymca
 

Mehr von Whymca (13)

Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!
Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!
Tutto quello che volete sapere sullo sviluppo per Windows 8 e Windows Phone!
 
Physical computing: tutto intorno a te - Andrea Maietta, Paolo Aliverti
Physical computing: tutto intorno a te - Andrea Maietta, Paolo AlivertiPhysical computing: tutto intorno a te - Andrea Maietta, Paolo Aliverti
Physical computing: tutto intorno a te - Andrea Maietta, Paolo Aliverti
 
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCAGestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCA
 
Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini
 
Crossdev sdk/tools: devil's deception - Luciano Colosio
Crossdev sdk/tools: devil's deception - Luciano ColosioCrossdev sdk/tools: devil's deception - Luciano Colosio
Crossdev sdk/tools: devil's deception - Luciano Colosio
 
Android - ishan fernando - android nfc presentation
Android - ishan fernando - android nfc presentationAndroid - ishan fernando - android nfc presentation
Android - ishan fernando - android nfc presentation
 
Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto
Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto
Whymca Riccardo Bosio Servizi Mobile e Applicazioni: la rivoluzione in atto
 
Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?
Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?
Whymca Filippo Renga Mobile Revolution Quali opportunità dalle applicazioni?
 
Whymca Vodafone Apps
Whymca Vodafone AppsWhymca Vodafone Apps
Whymca Vodafone Apps
 
Whymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile Messaging
Whymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile MessagingWhymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile Messaging
Whymca Mobyt Strumenti Open Source Per Infrastrutture Dimobile Messaging
 
Whymca Italo Vignoli Demografia Dei Social Media
Whymca Italo Vignoli Demografia Dei Social MediaWhymca Italo Vignoli Demografia Dei Social Media
Whymca Italo Vignoli Demografia Dei Social Media
 
Whymca Dpixel
Whymca DpixelWhymca Dpixel
Whymca Dpixel
 
Whymca Intro
Whymca IntroWhymca Intro
Whymca Intro
 

SCONTRO TRA UI -AKA- COSA DOVREMMO IMPARARE DA IOS, ANDROID E WP7

  • 1. Scontro tra UI -aka- mm o imparare cosa dovre , iOS e WP7 da Android Salvatore Laisa - @moebiusmania Mohole Lab
  • 2. About me 2006 2007 2008 2010 2011/ 2012
  • 3. Di cosa parleremo oggi 1. User interface 2. Cross Platform 3. Case histories 4. Risorse 3
  • 4. Parte 1: User interface 4
  • 5. Principi di User Interface • Le UI esistono per permettere interazioni • Mantenere l’attenzione, sempre • Consistenza e pertinenza sono importanti! • Un’azione primaria per schermata • Le azioni secondarie... sono secondarie! 5
  • 6. Le UI che si sfideranno oggi iOS Android Metro 6
  • 7. iOS - User Interface Pro • Luccicante e sfavillante! • Ha dettato molti standard • No pulsanti fisici • Stile molto curato 7
  • 8. iOS - User Interface Cons • Lo stile inizia a essere datato • Barre invadenti • Troppe app uguali • Distinguersi è rischioso 8
  • 9. Android - User Interface Pro • UI rinnovata e pulita • Style Guide pubblica • Molte icone • Look alla “Tron” • Molte azioni con swipe 9
  • 10. Android - User Interface Cons • Scarsa diffusione ICS-design • Migliorata, ma non del tutto • Differenze “forzate” • Sense, TouchWiz, ecc... 10
  • 11. Metro - User Interface Pro • Ritorno all’essenziale • Cura dettagli • Content-centric design • Transizioni fluide 11
  • 12. Metro - User Interface Cons • Forse troppo essenziale? • UX ancora acerba • Sarà meglio compresa con Windows 8 12
  • 13. Parte 2: Cross platform Illustrazione: Will Phillips Jr 13
  • 14. Qual’è il punto? Realizzare User Interface consistenti attraverso tutte e 3 le piattaforme. 14
  • 15. Perché dovrei? Perché la realtà del mercato (e quindi di chi ci commissiona app) è che esistono 3 piattaforme. 15
  • 16. Casi di una UI cross-platform • il cliente punta a un’utenza vasta • si lavora con feature comuni • sviluppo con soluzioni “bridge” (HTML5) • c’è una controparte Web 16
  • 17. Quando invece NO • vogliamo il massimo dalla piattaforma • per correre meno rischi • è “solo” un’app • voglio conferire esclusività 17
  • 18. Esiste la UI universale? Può darsi, ma intanto possiamo prendere il meglio da queste 3 e amalgamarlo nelle nostre app! 18
  • 19. Parte 3: Case histories Foto: “Ocean view branch” - Orange County Archives 19
  • 20. Case history 1: Fineco 20
  • 21. Case history 2: WordPress 21
  • 22. Case history 3: Facebook 22
  • 23. Case history 4: jQuery Mobile 23
  • 24. Parte 4: Risorse Foto: “Presents” - Msmorningtom 24
  • 25. Dove documentarsi • iOS - https://developer.apple.com/devcenter/ios/ • Android Design - http://developer.android.com/ • WP7/Metro - http://msdn.microsoft.com • (Design Shack) Trends in UI Design - http:// designshack.net/articles/graphics/interesting-trends-in- ui-design/ 25
  • 26. Letture interessanti Designing Mobile Interfaces Simple and usable (S. Hoober / E. Berkman) (Giles Colborne) 26
  • 28. GRAZIE! Salvatore Laisa - Mohole Lab salvatore.laisa@mohole.it www.salvatorelaisa.net / scuola.mohole.it 28