9. Mobile design

Corso di Interazione Uomo MacchinaAA 2014-2015

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

MOBILE DESIGN

Edizione 2014-15

Mobile: dispositivi di input/output

sistema utente

• Vista• Udito

• Mani• Voce

INPUT

mondo

INPUT / OUTPUT- connessione internet- connessione telefonica- connessione bluetooth

altri device

- foto & video camera (2)- sound recorder- GPS, bussola- sensori di prossimità

R.Polillo - Marzo 2015

3

Esempio: QRCODE


Esempio: Realtà aumentata


Device mobili: funzioni tipiche


8

Accesso alla rete (via operatore telefonico o Wi-Fi)

Comunicazione con altri device (Bluetooth, NFC)

Funzioni telefoniche Dati conservati sulla nuvola (sincronizzazione

fra i device e backup automatici) Geolocalizzazione Fotocamera/e Sensori

La crescita del mobile

Il numero dei device mobili ha superato quello dei desktop/laptop


9

Contesti d’uso molto vari: smartphone

Thks Lara CiccarelliR.Polillo - Marzo 2014

Contesti d’uso molto vari: tablet


Contesti d’uso molto vari: desktop


Contesti d’uso molto vari: TV



14

La soluzione più corretta: Considerare i diversi dispositivi parte di un’unica esperienza.


Problematiche nel design dell’interfaccia16


Thks B.Fling http://www.slideshare.net/fling/designing-mobile-experiences

Orizzontale vs verticale


17

Multi-touch gestures


18

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/InteractivityInput.html

La dimensione dei pulsanti


19

La dimensione dei pulsanti!

Es.: Waze (iPad)

Layout preferenziali: smartphone


20

La keyboard


21

Layout preferenziali: tablet


22

Esempio: Waze (iPad)


23

Esempio: Waze (iPad)


24

Layout preferenziali: touch laptop


25

La posizione migliore per i menu


26

Phone Tablet Touch Keyboard

(Molti tratti da

Menu: esempi27


www.slideshare.net/Codemotion/tech-webinar-user-interface-design-patterns-per-mobile-web-apps-mauro-del-gaudio

Pattern 1


28

Pattern 2


29

(segue)


30

Pattern 3 e 4


31

(segue)


32

Esempio: Pinterest


33

Esempio: trovacinema


34

Mobile UI design patterns (esempio)http://www.pttrns.com


35

Responsive design36


Output: Screen size


37

App nativa o Responsive web site?


oppure

App nativespecifiche per il device e scaricate da un App store

Responsive web siteGestito da un mobile browserApp

server

Media query (HTML5)

Da HTML si possono identificare alcune caratteristiche del dispositivo che riceve la pagina, e comporre layout diversi a seconda dei casi:

responsive design

una sola pagina web per tutti i device


Responsive design


41

L'immagine si modifica in funzione delle dimensioni del video

Esempio


42

Esempio


43

Esempio


Esempio: menu


45

Esempio: form


46

Esempi

Sito responsive:http://thenextweb.comwww.rpolillo.it

Non confondere i siti responsive con i siti cosiddetti a layout liquido (in uso da molti anni):http://www.governo.it


Esempi possibili

http://www.awwwards.com/websites/responsive-design/


48

9. Mobile design

Education

Transcript of 9. Mobile design