SlideShare a Scribd company logo
Scontro tra UI
                 -aka-
                                 a
                   mo  imparare d
      cosa dovrem             7
           Andr oid, iOS e WP




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

More Related Content

Viewers also liked

nois3 case study
nois3 case studynois3 case study
nois3 case study
nois3
 
Jacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito web
Jacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito webJacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito web
Jacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito web
Open Campus Tiscali
 
UX- Psychology & Human Behaviour.pptx
UX- Psychology & Human Behaviour.pptxUX- Psychology & Human Behaviour.pptx
UX- Psychology & Human Behaviour.pptx
Techved Consulting
 
UX Psychology 2nd Track.
UX Psychology 2nd Track.UX Psychology 2nd Track.
UX Psychology 2nd Track.
Mahmoud Metwally
 
Emergent UX: Seducing the Six Minds - IXDA-NYC
Emergent UX: Seducing the Six Minds - IXDA-NYCEmergent UX: Seducing the Six Minds - IXDA-NYC
Emergent UX: Seducing the Six Minds - IXDA-NYC
John Whalen
 
Agile Ux Design in pratica
Agile Ux Design in praticaAgile Ux Design in pratica
Agile Ux Design in pratica
Luca Mascaro
 
Module 02: The Psychology of UX
Module 02: The Psychology of UXModule 02: The Psychology of UX
Module 02: The Psychology of UX
Daniel Drew Turner
 
UX Psychology 1st Track.
UX Psychology 1st Track.UX Psychology 1st Track.
UX Psychology 1st Track.
Mahmoud Metwally
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
Adrienne Tilley
 
Ux conf 2010
Ux conf 2010Ux conf 2010
Ux conf 2010
Gianandrea Giacoma
 
Psychology in UX
Psychology in UXPsychology in UX
Psychology in UX
UX Camp HH
 
Persuasive technology
Persuasive technologyPersuasive technology
Persuasive technology
Cristina Viganò
 
UX Design for Startup
UX Design for StartupUX Design for Startup
UX Design for Startup
Alberto Mucignat
 
UX Psychology and the 'Dark arts'
UX Psychology and the 'Dark arts'UX Psychology and the 'Dark arts'
UX Psychology and the 'Dark arts'
cxpartners
 
QI Evolutionary Psychology and UX
QI Evolutionary Psychology and UXQI Evolutionary Psychology and UX
QI Evolutionary Psychology and UX
Laura Gordon
 
Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)
Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)
Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)
Centralis
 
Waterfalls are great to watch... Iterative Design Thinking
Waterfalls are great to watch... Iterative Design ThinkingWaterfalls are great to watch... Iterative Design Thinking
Waterfalls are great to watch... Iterative Design Thinking
nois3
 
Psychology for UX and Human Experience
Psychology for UX and Human ExperiencePsychology for UX and Human Experience
Psychology for UX and Human Experience
Dave Hogue
 
Chris riley ux austraila 2015
Chris riley ux austraila 2015Chris riley ux austraila 2015
Chris riley ux austraila 2015
Chris Riley
 
HCI to UX to HCI - Parte A
HCI to UX to HCI - Parte AHCI to UX to HCI - Parte A
HCI to UX to HCI - Parte A
Cristiano Rastelli
 

Viewers also liked (20)

nois3 case study
nois3 case studynois3 case study
nois3 case study
 
Jacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito web
Jacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito webJacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito web
Jacopo Pasquini in Open Campus. Usability & UX: 10 consigli per il tuo sito web
 
UX- Psychology & Human Behaviour.pptx
UX- Psychology & Human Behaviour.pptxUX- Psychology & Human Behaviour.pptx
UX- Psychology & Human Behaviour.pptx
 
UX Psychology 2nd Track.
UX Psychology 2nd Track.UX Psychology 2nd Track.
UX Psychology 2nd Track.
 
Emergent UX: Seducing the Six Minds - IXDA-NYC
Emergent UX: Seducing the Six Minds - IXDA-NYCEmergent UX: Seducing the Six Minds - IXDA-NYC
Emergent UX: Seducing the Six Minds - IXDA-NYC
 
Agile Ux Design in pratica
Agile Ux Design in praticaAgile Ux Design in pratica
Agile Ux Design in pratica
 
Module 02: The Psychology of UX
Module 02: The Psychology of UXModule 02: The Psychology of UX
Module 02: The Psychology of UX
 
UX Psychology 1st Track.
UX Psychology 1st Track.UX Psychology 1st Track.
UX Psychology 1st Track.
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Ux conf 2010
Ux conf 2010Ux conf 2010
Ux conf 2010
 
Psychology in UX
Psychology in UXPsychology in UX
Psychology in UX
 
Persuasive technology
Persuasive technologyPersuasive technology
Persuasive technology
 
UX Design for Startup
UX Design for StartupUX Design for Startup
UX Design for Startup
 
UX Psychology and the 'Dark arts'
UX Psychology and the 'Dark arts'UX Psychology and the 'Dark arts'
UX Psychology and the 'Dark arts'
 
QI Evolutionary Psychology and UX
QI Evolutionary Psychology and UXQI Evolutionary Psychology and UX
QI Evolutionary Psychology and UX
 
Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)
Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)
Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014 Elizabeth Allen)
 
Waterfalls are great to watch... Iterative Design Thinking
Waterfalls are great to watch... Iterative Design ThinkingWaterfalls are great to watch... Iterative Design Thinking
Waterfalls are great to watch... Iterative Design Thinking
 
Psychology for UX and Human Experience
Psychology for UX and Human ExperiencePsychology for UX and Human Experience
Psychology for UX and Human Experience
 
Chris riley ux austraila 2015
Chris riley ux austraila 2015Chris riley ux austraila 2015
Chris riley ux austraila 2015
 
HCI to UX to HCI - Parte A
HCI to UX to HCI - Parte AHCI to UX to HCI - Parte A
HCI to UX to HCI - Parte A
 

Similar to Scontro tra UI -aka- cosa dovremmo imparare da Android, iOS e WP7

MonoTouch, un anno dopo
MonoTouch, un anno dopoMonoTouch, un anno dopo
MonoTouch, un anno dopo
Stefano Ottaviani
 
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.
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
Emanuele Palazzetti
 
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
Stefano Ottaviani
 
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
 
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
Andrea Picchi
 
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 design
Stefano Bussolon
 
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
 
Aperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - MobileAperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - Mobile
aperinfo
 
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
Francesco Ronchi
 
Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011
SEO Training
 
Android Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insiemeAndroid Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insieme
Francesco De Simone
 
Smau milano 2012 arena social media massimo-grava
Smau milano 2012   arena social media massimo-gravaSmau milano 2012   arena social media massimo-grava
Smau milano 2012 arena social media massimo-gravaSMAU
 
HCIM08 - Mobile Applications
HCIM08 - Mobile ApplicationsHCIM08 - Mobile Applications
HCIM08 - Mobile Applications
Stefano Sanna
 
Un bit di accessibilità su dispositivi mobili
Un bit di accessibilità su dispositivi mobiliUn bit di accessibilità su dispositivi mobili
Un bit di accessibilità su dispositivi mobili
Mattia Ducci
 
C# Mobile application architecture
C# Mobile application architectureC# Mobile application architecture
C# Mobile application architectureLeonardo Alario
 

Similar to Scontro tra UI -aka- cosa dovremmo imparare da Android, iOS 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
 
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
 
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
 
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
 
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.
 
Aperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - MobileAperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - Mobile
 
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
 
Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011Accessibilità - Adriano Cerocchi - SEO Training 2011
Accessibilità - Adriano Cerocchi - SEO Training 2011
 
Android Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insiemeAndroid Mobile Apps , visione d'insieme
Android Mobile Apps , visione d'insieme
 
Smau milano 2012 arena social media massimo-grava
Smau milano 2012   arena social media massimo-gravaSmau milano 2012   arena social media massimo-grava
Smau milano 2012 arena social media massimo-grava
 
HCIM08 - Mobile Applications
HCIM08 - Mobile ApplicationsHCIM08 - Mobile Applications
HCIM08 - Mobile Applications
 
Un bit di accessibilità su dispositivi mobili
Un bit di accessibilità su dispositivi mobiliUn bit di accessibilità su dispositivi mobili
Un bit di accessibilità su dispositivi mobili
 
C# Mobile application architecture
C# Mobile application architectureC# Mobile application architecture
C# Mobile application architecture
 

Scontro tra UI -aka- cosa dovremmo imparare da Android, iOS e WP7

  • 1. Scontro tra UI -aka- a mo imparare d cosa dovrem 7 Andr oid, iOS e WP 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