Presentazione del Paradigma Page Model dell’iPhone e presentazione del Paradigma Block Model dell’iPad. Approccio per portare un i contenuti da Desktop a Mobile. Passare dallo Sketch al Prototipo a bassa risoluzione dell’Interfaccia iOS.

1. Corso WebApp iOS
“iOS UI Design”
Lezione 04/10
”Less is more..”
Ludwing Mies van der Rohe
Architect.

2. Chapter 04
User Interface Design for iOS Devices
Chapter 05
iPhone UI Design: Think Simple
Chapter 06
iPad UI Design: Think Inverted
http://www.apress.com/9781430232469

3. Diario Lezioni
LEZIONE 03
iOS UI Design
Cognitive User Interface
Paradigma Page-Model dell’iPhone
Paradigma Block-Model dell’iPad
Da Desktop a Mobile
Da Sketch a Prototipo

4. User Interface
Def: Interfaccia
“punto di interazione tra due sistemi”
“parte visuali di un applicazione attraverso il quale l’utente
interagisce con un software”

5. User Interface
Due Tipi di Interfaccia
interfaccia hardware
interfaccia software

6. User Interface

7. User Interface
Tutto é Interfaccia
interfaccia attiva
interfaccia passiva

8. User Interface
Interfaccia Attiva
parte dell’interfaccia con il quale é possibile
avere un interazione “attiva*”.
es: <a>
* via Web Standard

9. User Interface
Interfaccia Passiva
parte dell’interfaccia con il quale non é possibile
avere un interazione “passiva*”
es: <div>
* via Touch-Screen

10. User Interface

11. User Interface
Interazione Touch-Screen
Zoom: Pinch-In/Pinch-Out
ovunque sul layout (se abilitato)
Zoom: Double-Touch
solo su elementi HTML

12. User Interface
cognitive interface design é basato su:
uso cognitivo del colore
gerarchia visuale elementi orientata al touch-screen
reading pattern orientati al touch-screen
uso cognitivo dello spazio attivo e passivo dell’interfaccia

13. User Interface
cognitive interface design é orientato a creare:
unità
armonia
tra elementi dell’interfaccia e del layout

14. User Interface
cognitive interface design é orientato a creare:
Equilibrio
tra elementi dell’interfaccia e del layout

15. User Interface
cognitive interface design é orientato a creare:
Gerarchia
tra elementi dell’interfaccia e del layout

16. User Interface
cognitive interface design é orientato a creare:
Dominanza
creare punti focali su elementi dell’interfaccia
o su elementi del layout

17. User Interface

18. Diario Lezioni
LEZIONE 03
iOS UI Design
Cognitive User Interface
Paradigma Page-Model dell’iPhone
Paradigma Block-Model dell’iPad
Da Desktop a Mobile
Da Sketch a Prototipo

19. iPhone Page-Model
che cosa é?
struttura di base con cui sono progettate
le pagine orientate all’iPhone

20. iPhone Page-Model
struttura
definisce un organizzazione lineare dei contenuti

21. iPhone Page-Model
struttura
anche il multitasking* introdotto con iOS4
lavora con contenuti presentati in modo lineari*
* non é vero multitasking
* sequenziali

22. “Multi Tasking”
iOS Multitasking
logica sequenziale
salvataggio dello stato

23. iPhone Page-Model

24. Diario Lezioni
LEZIONE 03
iOS UI Design
Cognitive User Interface
Paradigma Page-Model dell’iPhone
Paradigma Block-Model dell’iPad
Da Desktop a Mobile
Da Sketch a Prototipo

25. iPad Block-Model
che cosa é?
struttura di base con cui sono progettate
le pagine orientate all’iPad

26. iPad Page-Model
struttura
definisce un organizzazione a blocchi dei contenuti
simile a quella del desktop web
ma ottimizzata per un touch-screen da 9.7inch
con split-view in modalità native-like

27. iPad Page-Model
struttura
il multitasking* introdotto con iOS4
non influenza la presentazione die contenuti
la navigazione a tab introdotta con iOS5
avvicina l’esperienza a quella desktop
creando un esperienza ibrida
*non é vero multitasking

28. iPad Page-Model
struttura ibrida
relazione tra contenuti mutuata dal desktop
esperienza utente evoluta dal touch-screen 3.5inch

29. iPad Block-Model

30. Diario Lezioni
LEZIONE 03
iOS UI Design
Cognitive User Interface
Paradigma Page-Model dell’iPhone
Paradigma Block-Model dell’iPad
Da Desktop a Mobile
Da Sketch a Prototipo

31. Mobile Content
da desktop a mobile
re-fattorizzazione forte del contenuto (iPhone)
re-fattorizzazione debole del contenuto (iPad)

32. Mobile Content
da desktop a mobile
entrambi gli approcci hanno punti in comune
nonostante debbano essere contestualizzati al dispositivo

33. Mobile Content
Rimuovere e Prioritizzare
Comprendere il Core del Design
rimuovere un elemento disturba il design?
rimuovere un elemento aumenta il valore del design?

34. Mobile Content

35. Mobile Content
Nascondere e Modellare
Quando non é possibile rimuovere un elemento
indirizzato al profilo utente non-primario?

36. Mobile Content

37. Mobile Content
Comprimere e Raggruppare
Quando non é possibile rimuovere o nascondere un elemento
fa parte del contenuto principale?

38. Mobile Content

39. Semplicità-Complessità
relazione paradossale*
pattern complessi
contengono pattern semplici
che a loro volta sono il riflesso
di pattern ancor piu complessi
* teoria del caos

40. Semplicità-Complessità
punti chiave del paradosso
la semplicità non può eliminare la complessità
la semplicità può portare alla complessità
la semplicità é un concetto soggettivo

41. Diario Lezioni
LEZIONE 03
iOS UI Design
Cognitive User Interface
Paradigma Page-Model dell’iPhone
Paradigma Block-Model dell’iPad
Da Desktop a Mobile
Da Sketch a Prototipo

42. Progettazione
riassunto step precedenti
Analisi Concorrenti
Definizione Personas
Creazione Casi d’Uso
Creazione Scenari di Interazione
Stesura Documento dei Requisiti
Sketch Interfaccia
Prototipo Low-Fi

43. Progettazione

44. Progettazione
Documento Requisiti
{ {
Personas
Casi d’Uso
Scenari di Interazione

45. Progettazione
livello di prototipo low-fi
prototipo di singola view
scenario di interazione tra view*
* se non é stato creato nella fase di sketch

46. Scenario Interazione

47. Progettazione
livello di prototipo hi-fi
prototipo di singola view
presentazione* prototipi singola view
scenario di interazione tra view*
* keynote/power point
* se non é stato creato nella fase di sketch o prototipo low-fi

48. Progettazione
Documento Requisiti
{ {
Personas
Casi d’Uso
Scenari di Interazione

49. Presentazione View
VIEW
Welcome page (index.html)
DESCRIZIONE
Breadcrumb: mostra la profondità di navigazione.
Hero Content (slider): mostra un preview degli ultimi
prodotti rilasciati.
Edge-To-Edge Menu: offre le principali opzioni relative
alla presentazione dello store.

50. Presentazione View
VIEW
Welcome page (index.html)
DESCRIZIONE
Breadcrumb: mostra la profondita di navigazione.
Hero Content (slider): mostra un preview degli ultimi
prodotti.
Edge-To-Edge Menu: offre le principali opzioni relative
alla presentazione dello store.

51. Presentazione View
VIEW
Home page (home.html)
DESCRIZIONE
Breadcrumb: mostra la profondita di navigazione.
Hero Content (slider): mostra un preview di 3 prodotti
in evidenza.
Edge-To-Edge Menu: offre accesso alle diverse sezioni
dello store (shop by device).

52. Esercitazione
Utilizzare Tool o Template* Scaricabili
http://iu.di.unipi.it/webapp/
1. Creare Prototipo Low-Fi
2. Creare Scenari Interazione View
3. Creare Prototipo Hi-Fi
3. Creare Presentazione View
3. Documento* Interazione Interfacce
* oppure usare un proprio template
* se non é stato creato nella fase di sketch

53. PROSSIMA LEZIONE
SCARICARE e VISIONARE
iWebKit Framework*
http://snippetspace.com/
JQuery Mobile Framework
http://jquerymobile.com/
* il framework presentato negli esempi a lezione