Salvatore Laisa - @moebiusmaniaMohole Lab

Scontro tra UI

-aka-

cosa dovremmo imparare da

Android, iOS e WP7

Scontro tra UI

About me

2007 20102006 2008 2011/2012

1. User interface

2. Cross Platform

3. Case histories

4. Risorse

3

Di cosa parleremo oggi

4

Parte 1: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

Principi di User Interface

6

Le UI che si sfideranno oggi

iOS Android Metro

7

iOS - User Interface Pro• Luccicante e sfavillante!

• Ha dettato molti standard

• No pulsanti fisici

• Stile molto curato

8

iOS - User Interface Cons• Lo stile inizia a essere datato

• Barre invadenti

• Troppe app uguali

• Distinguersi è rischioso

9

Android - User Interface Pro• UI rinnovata e pulita

• Style Guide pubblica

• Molte icone

• Look alla “Tron”

• Molte azioni con swipe

10

Android - User Interface Cons• Scarsa diffusione ICS-design

• Migliorata, ma non del tutto

• Differenze “forzate”

• Sense, TouchWiz, ecc...

11

Metro - User Interface Pro• Ritorno all’essenziale

• Cura dettagli

• Content-centric design

• Transizioni fluide

12

Metro - User Interface Cons• Forse troppo essenziale?

• UX ancora acerba

• Sarà meglio compresa con Windows 8

13

Parte 2:Cross platform

Illustrazione:Will Phillips Jr

14

Qual’è il punto?Realizzare User Interface consistenti

attraverso tutte e 3 le piattaforme.

15

Perché dovrei?Perché la realtà del mercato (e quindi di

chi ci commissiona app) è che esistono 3 piattaforme.

16

• il cliente punta a un’utenza vasta

• si lavora con feature comuni

• sviluppo con soluzioni “bridge” (HTML5)

• c’è una controparte Web

Casi di una UI cross-platform

17

• vogliamo il massimo dalla piattaforma

• per correre meno rischi

• è “solo” un’app

• voglio conferire esclusività

Quando invece NO

18

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

nostre app!

19

Parte 3:Case histories

Foto:“Ocean view branch” - Orange County Archives

20

Case history 1: Fineco

21

Case history 2: WordPress

22

Case history 3: Facebook

23

Case history 4: jQuery Mobile

24

Parte 4:Risorse

Foto:“Presents” - Msmorningtom

25

• 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/

Dove documentarsi

26

Letture interessanti

Designing Mobile Interfaces

(S. Hoober / E. Berkman)

Simple and usable

(Giles Colborne)

27

a questo punto...

28

GRAZIE!Salvatore Laisa - Mohole Lab

salvatore.laisa@mohole.itwww.salvatorelaisa.net / scuola.mohole.it