9. Mobile design
-
Upload
roberto-polillo -
Category
Education
-
view
485 -
download
2
description
Transcript of 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
R.Polillo - Marzo 20144
Esempio: Realtà aumentata
R.Polillo - Marzo 20145
Esempio: Realtà aumentata
R.Polillo - Marzo 20146
Esempio: Realtà aumentata
R.Polillo - Marzo 20147
Device mobili: funzioni tipiche
R.Polillo - Marzo 2014
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
R.Polillo - Marzo 2014
9
La crescita del mobile
Il numero dei device mobili ha superato quello dei desktop/laptop
R.Polillo - Marzo 2014
Contesti d’uso molto vari: smartphone
Thks Lara CiccarelliR.Polillo - Marzo 2014
Contesti d’uso molto vari: tablet
Thks Lara CiccarelliR.Polillo - Marzo 2014
Contesti d’uso molto vari: desktop
Thks Lara CiccarelliR.Polillo - Marzo 2014
Contesti d’uso molto vari: TV
Thks Lara CiccarelliR.Polillo - Marzo 2014
Thks Lara CiccarelliR.Polillo - Marzo 2014
Thks B.Fling http://www.slideshare.net/fling/designing-mobile-experiences
Orizzontale vs verticale
R.Polillo - Marzo 2014
16
Multi-touch gestures
R.Polillo - Marzo 2014
17
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/InteractivityInput.html
La dimensione dei pulsanti
R.Polillo - Marzo 2014
18
La dimensione dei pulsanti!
Es.: Waze (iPad)
Layout preferenziali: smartphone
R.Polillo - Marzo 2014
19
La keyboard
R.Polillo - Marzo 2014
20
Layout preferenziali: tablet
R.Polillo - Marzo 2014
21
Esempio: Waze (iPad)
R.Polillo - Marzo 2014
22
Esempio: Waze (iPad)
R.Polillo - Marzo 2014
23
Layout preferenziali: touch laptop
R.Polillo - Marzo 2014
24
La posizione migliore per i menu
R.Polillo - Marzo 2014
25
Phone Tablet Touch Keyboard
Esempio: Pinterest
R.Polillo - Marzo 2014
26
Esempio: trovacinema
R.Polillo - Marzo 2014
27
App nativa o Responsive web app?
R.Polillo - Marzo 201428
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
R.Polillo - Marzo 201429
Responsive design
R.Polillo - Marzo 2014
30
L'immagine si modifica in funzione delle dimensioni del video
Esempio
R.Polillo - Marzo 2014
31
Esempio
R.Polillo - Marzo 2014
32
Esempio
R.Polillo - Marzo 201433
Esempio: menu
R.Polillo - Marzo 2014
34
Esempio: form
R.Polillo - Marzo 2014
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
R.Polillo - Marzo 201436
La soluzione più corretta: Considerare i diversi dispositivi parte di un’unica esperienza.
Voi che ne pensate?
R.Polillo - Marzo 201438
(Agosto 2010)
… O NO?
Esempi possibili
Pop TouchPro Trovacinema Giallo Zafferano Waze Flickr (varie app)
R.Polillo - Marzo 2014
39