9. Mobile design

Corso di Interazione Uomo MacchinaAA 2013-2014

Roberto Polillo

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

MOBILE DESIGN1

R.Polillo - Marzo 2014Edizi

one 2013-1

4

Queste slides…

… si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it

Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione:

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

R.Polillo - Marzo 2014

2

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à

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

Output: Screen size


9

La crescita del mobile

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


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



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

Orizzontale vs verticale


16

Multi-touch gestures


17

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

La dimensione dei pulsanti


18

La dimensione dei pulsanti!

Es.: Waze (iPad)

Layout preferenziali: smartphone


19

La keyboard


20

Layout preferenziali: tablet


21

Esempio: Waze (iPad)


22

Esempio: Waze (iPad)


23

Layout preferenziali: touch laptop


24

La posizione migliore per i menu


25

Phone Tablet Touch Keyboard

Esempio: Pinterest


26

Esempio: trovacinema


27

App nativa o Responsive web app?


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


30

L'immagine si modifica in funzione delle dimensioni del video

Esempio


31

Esempio


32

Esempio


Esempio: menu


34

Esempio: form


35

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


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

Voi che ne pensate?


(Agosto 2010)

… O NO?

Esempi possibili

Pop TouchPro Trovacinema Giallo Zafferano Waze Flickr (varie app)


39

Education

9. Mobile design