tech webinar: user interface design patterns per mobile web apps - mauro del gaudio
TRANSCRIPT
![Page 1: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/1.jpg)
Benvenuti!
![Page 2: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/2.jpg)
Mauro Del GaudioUX/UI Designer
![Page 3: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/3.jpg)
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 4: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/4.jpg)
Mauro Del Gaudio 4
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Il web sta cambiando
![Page 5: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/5.jpg)
Mauro Del Gaudio 5
E gli utenti?
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 6: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/6.jpg)
Mauro Del Gaudio
Sono loro a dettare il cambiamento!
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
6
![Page 7: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/7.jpg)
Mauro Del Gaudio 7
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
http://digitics.in/mobile-marketing-vs-online-media/
![Page 8: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/8.jpg)
Mauro Del Gaudio 8
Quindi sta cambiando anche il modo di progettare?
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 9: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/9.jpg)
Mauro Del Gaudio 9
Nuovi approcci, nuovi strumenti, nuovi design pattern!
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
SI!
![Page 10: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/10.jpg)
Mauro Del Gaudio 10
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Cosa sono i design pattern?
![Page 11: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/11.jpg)
Mauro Del Gaudio 11
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
“Soluzioni progettuali generali a problemi ricorrenti”
![Page 12: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/12.jpg)
Mauro Del Gaudio 12
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Esempi di menu design pattern
![Page 13: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/13.jpg)
Mauro Del Gaudio 13
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
List Menu
![Page 14: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/14.jpg)
Mauro Del Gaudio 14
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 15: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/15.jpg)
Mauro Del Gaudio 15
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 16: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/16.jpg)
Mauro Del Gaudio 16
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 17: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/17.jpg)
Mauro Del Gaudio 17
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Springboard
![Page 18: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/18.jpg)
Mauro Del Gaudio 18
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 19: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/19.jpg)
Mauro Del Gaudio 19
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 20: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/20.jpg)
Mauro Del Gaudio 20
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 21: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/21.jpg)
Mauro Del Gaudio 21
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Tab Menu
![Page 22: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/22.jpg)
Mauro Del Gaudio 22
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 23: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/23.jpg)
Mauro Del Gaudio 23
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 24: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/24.jpg)
Mauro Del Gaudio 24
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Esempi di interazione con elementi nativi
![Page 25: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/25.jpg)
Mauro Del Gaudio 25
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Name:
E-mail:
Message:
Send
![Page 26: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/26.jpg)
Mauro Del Gaudio 26
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Name:
Mario Ros|
E-mail:
Message:
Send
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
123 space return
![Page 27: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/27.jpg)
Mauro Del Gaudio 27
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
E-mail:
Message:
Send
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
123 space return
Lorem ipsum|
![Page 28: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/28.jpg)
Mauro Del Gaudio 28
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
E-mail:
Message:
Send
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
123 space return
Lorem ipsum|
Fixed Block
![Page 29: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/29.jpg)
Mauro Del Gaudio 29
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Attenzione agli ingombri!
![Page 30: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/30.jpg)
Mauro Del Gaudio 30
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
123 space return
q
a
z
space
x
,
c v b n m
s d f g h j k l
w e r t y u i o p
&123,?123 .
a s d f g h j k l
z x c v b n m
q w e r t y u i o p1 2 3 4 5 6 7 8 9 0
Android iOS Windows Phone
![Page 31: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/31.jpg)
Mauro Del Gaudio 31
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Gesture
![Page 32: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/32.jpg)
Mauro Del Gaudio 32
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Profile
Alerts
Bill Pay
Location
Settings
Help
Contact
Support
News
![Page 33: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/33.jpg)
Mauro Del Gaudio 33
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Profile
Alerts
Bill Pay
Location
Settings
Help
Contact
Support
News
![Page 34: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/34.jpg)
Mauro Del Gaudio 34
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
![Page 35: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/35.jpg)
Mauro Del Gaudio 35
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Complete
EditDelete
![Page 36: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/36.jpg)
Mauro Del Gaudio 36
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Come si sceglie il giusto design pattern?
![Page 37: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/37.jpg)
Mauro Del Gaudio 37
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Alcune domande da porsi
![Page 38: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/38.jpg)
Mauro Del Gaudio 38
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Chi userà questa applicazione?
![Page 39: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/39.jpg)
Mauro Del Gaudio 39
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Su quali dispositivi sarà usata?
![Page 40: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/40.jpg)
Mauro Del Gaudio 40
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
Fixed? Fluid? Adaptive? Responsive?
![Page 41: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/41.jpg)
Mauro Del Gaudio 41
USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS
La scelta del giusto design pattern deve servire a migliorare
l’esperienza utente (UX), non ad aggiungere vezzi estetici alla
vostra interfaccia utente (UI).
![Page 42: Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio](https://reader036.vdocuments.net/reader036/viewer/2022062710/55a05def1a28ab3c2e8b45ba/html5/thumbnails/42.jpg)
Grazie!