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


Il web sta cambiando

Mauro Del Gaudio 5

E gli utenti?


Mauro Del Gaudio

Sono loro a dettare il cambiamento!


6

Mauro Del Gaudio 7


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

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

Mauro Del Gaudio 8

Quindi sta cambiando anche il modo di progettare?


Mauro Del Gaudio 9

Nuovi approcci, nuovi strumenti, nuovi design pattern!


SI!

Mauro Del Gaudio 10


Cosa sono i design pattern?

Mauro Del Gaudio 11


“Soluzioni progettuali generali a problemi ricorrenti”

Mauro Del Gaudio 12


Esempi di menu design pattern

Mauro Del Gaudio 13


List Menu

Mauro Del Gaudio 14


Mauro Del Gaudio 15


Mauro Del Gaudio 16


Mauro Del Gaudio 17


Springboard

Mauro Del Gaudio 18


Mauro Del Gaudio 19


Mauro Del Gaudio 20


Mauro Del Gaudio 21


Tab Menu

Mauro Del Gaudio 22


Mauro Del Gaudio 23


Mauro Del Gaudio 24


Esempi di interazione con elementi nativi

Mauro Del Gaudio 25


Name:

E-mail:

Message:

Send

Mauro Del Gaudio 26


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


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


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


Attenzione agli ingombri!

Mauro Del Gaudio 30


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


Gesture

Mauro Del Gaudio 32


Profile

Alerts

Bill Pay

Location

Settings

Help

Contact

Support

News

Mauro Del Gaudio 33


Profile

Alerts

Bill Pay

Location

Settings

Help

Contact

Support

News

Mauro Del Gaudio 34


Mauro Del Gaudio 35


Complete

EditDelete

Mauro Del Gaudio 36


Come si sceglie il giusto design pattern?

Mauro Del Gaudio 37


Alcune domande da porsi

Mauro Del Gaudio 38


Chi userà questa applicazione?

Mauro Del Gaudio 39


Su quali dispositivi sarà usata?

Mauro Del Gaudio 40


Fixed? Fluid? Adaptive? Responsive?

Mauro Del Gaudio 41


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!

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

Technology

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