interfacce nomadi.progettare per la migrazione del digitale. | 7 giugno 2013, cdlmdesign,...
DESCRIPTION
TRANSCRIPT
Interfacce nomadi.Progettare per la migrazione del digitaleLetizia Bollini, PhD | Università di Milano-Bicocca
La Sapienza, Roma 7 giugno 2013
#CVeDI13
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 2 035
Internet is everywhere
Uscire dallo schermo, migrare nelle tasche
» Ubiquitus computing*
» Internet delle cose
» Intelligenza ambientale
*Mark Weiser, 1988.
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 3 035
From Flatland* to 4D
Dalle due dimensioni alla dimensione spazio/temporale
Dalla “manipolazione diretta” (proiettiva) alle NUI/multi-touch interfaces
Dalla messa in pagina alla messa in scena
*Edwin Abbott, 1884 [http://youtu.be/3RQoQd-Bzp0]
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 4 035
No vice versa
Tablets are portable, while smartphones are pocketable
*Thomas Husson, Forrester Research, 2013
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 5 035
Persone e contesti d’uso
Device, orari, persone
*ComScore, 2011 & Nielsen 2011.
Device & scenari d’uso
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 7 035
Smartphone
Uscire dallo schermo, migrare nelle tasche
» Ubiquitus computing*
» Internet delle cose
» Intelligenza ambientale
*Mark Weiser, 1988.
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 8 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 9 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 10 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 11 035
Tablet
Uscire dallo schermo, migrare nelle tasche
» Ubiquitus computing*
» Internet delle cose
» Intelligenza ambientale
*Mark Weiser, 1988.
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 14 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 15 035
Ibridi & -station
Design for fingers
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 17 035
Finger usability
*MIT Touch Lab study of Human Fingertips
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 18 035
Design for thumbs
» Big enough!
Apple: 44 x 44 points
Android: 48 x 48 dp > 9mm
Microsoft: 9 x 9 mm
» Withe space around tappable elements
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 19 035
Core Gesture
*Villamor, Willis & Wroblewsky, 2010.
Responsive (web) design
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 21 035
Responsive design
» Considerare le varianti tra device
» Considerare le varianti tra schermi
» Considerare le varianti tra densità/risoluzioni
» Usare tecniche di riconoscimento dei dispositi-
vi (Media Query
» Modulazione tra contenuti e orientamento
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 22 035
Responsive lay-out
» Utilizzare layout fluidi e adattativi
» Griglie proporzionali e in .em
» Responsive images (dimensioni e DpI/PPI)
» Responsive typography (.em/.rem)
*Ethan Marcotte, 2010.
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 23 035
Design for breakpoints
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 24 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 25 035
Fluido
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 26 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 27 035
Slittamento colonne - in basso
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 28 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 29 035
A slittamento
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 30 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 31 035
Minimo adattamento
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 32 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 33 035
A sovrapposizione/slider
.
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale 34 035
La Sapienza, Roma 7 giugno 2013 | Letizia Bollini, PhD - University of Milano-BicoccaInterfacce nomadi. Progettare per la migrazione del digitale
Internet is everywhere
Uscire dallo schermo, migrare nelle tasche
» Ubiquitus computing*
» Internet delle cose
» Intelligenza ambientale
*Mark Weiser, 1988.
35 035
Web: www.lbollini.it | Twitter: @extrasmallit
Domande?