Tech Webinar: User interface design patterns per mobile web apps - Mauro Del Gaudio

Benvenuti!

Mauro Del GaudioUX/UI Designer

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 4

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Il web sta cambiando

Mauro Del Gaudio 5

E gli utenti?

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio

Sono loro a dettare il cambiamento!

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

6

Mauro Del Gaudio 7

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

http://digitics.in/mobile-marketing-vs-online-media/

Mauro Del Gaudio 8

Quindi sta cambiando anche il modo di progettare?

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 9

Nuovi approcci, nuovi strumenti, nuovi design pattern!

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

SI!

Mauro Del Gaudio 10

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Cosa sono i design pattern?

Mauro Del Gaudio 11

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

“Soluzioni progettuali generali a problemi ricorrenti”

Mauro Del Gaudio 12

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Esempi di menu design pattern

Mauro Del Gaudio 13

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

List Menu

Mauro Del Gaudio 14

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 15

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 16

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 17

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Springboard

Mauro Del Gaudio 18

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 19

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 20

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 21

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Tab Menu

Mauro Del Gaudio 22

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 23

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 24

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Esempi di interazione con elementi nativi

Mauro Del Gaudio 25

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Name:

E-mail:

Message:

Send

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

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|

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

Mauro Del Gaudio 29

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Attenzione agli ingombri!

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

Mauro Del Gaudio 31

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Gesture

Mauro Del Gaudio 32

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Profile

Alerts

Bill Pay

Location

Settings

Help

Contact

Support

News

Mauro Del Gaudio 33

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Profile

Alerts

Bill Pay

Location

Settings

Help

Contact

Support

News

Mauro Del Gaudio 34

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Mauro Del Gaudio 35

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Complete

EditDelete

Mauro Del Gaudio 36

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Come si sceglie il giusto design pattern?

Mauro Del Gaudio 37

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Alcune domande da porsi

Mauro Del Gaudio 38

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Chi userà questa applicazione?

Mauro Del Gaudio 39

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Su quali dispositivi sarà usata?

Mauro Del Gaudio 40

USER INTERFACE DESIGN PATTERNS PER MOBILE WEB APPS

Fixed? Fluid? Adaptive? Responsive?

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).

Grazie!