Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
THE
Mobile Challenge
Bologna
29 Aprile 2015
https://www.flickr.com/photos/hindrik/8578352814
Irene Capatti
graphic & UX designer
About me
@nekorina
irene.capatti@redturtle.it
La sfida?
https://www.flickr.com/photos/johnnyvulkan/1444830154
Portare il contenuto ovunque!
< 2007
LE PAGINE
… poi…
I Browsers
… oggi
Browsers
+ devices
Per la prima volta nel mondo

ci sono più devices che spazzolini da denti!
E in qualsiasi momento
Siamo online ovunque
http://w3.android-indonesia.com/images/images/News/man-in-toilet.jpg
gli accessi da mobile supereranno

gli accessi da desktop
Entro fine 2015
https://www.flickr.com/photos/aakashgautam/849790...
Responsive web design
Ethan Marcott
Nel 2010
https://www.flickr.com/photos/skyfire/5934928262
Oggi
Device-Agnostic web design
Trent Walton
“I devices di oggi 

non sono quelli di domani :
è necessario creare qualcosa che funzioni su
qualsiasi dispositivo, non s...
Qualsiasi
dispositivo?
Non possiamo sapere
su quale device verrà navigato il nostro sito!
desktop + tablet + mobile nel mondo
Android's Deadly Fragmentation
From responsive to
device agnostic design
Design Philosophy
device-Agnostic design
“Un approccio device-agnostico tiene in
considerazione infinite combinazioni di risoluzione
dello sc...
https://www.flickr.com/photos/pagedooley/2786973126
un’altra complicazione…
Il contesto
Molti di noi possiedono
più di un device
Passiamo da uno all’altro
Mattina Viaggio Lavoro Pranzo Riunione Cena Film
in ogni momento della giornata
Gli utenti si aspettano sempre lo
stesso livello di esperienza
attraverso i device
il 61% degli utenti
che visitano un sito NON mobile-friendly
passano sul sito della concorrenza!
https://www.flickr.com/pho...
Attenzione!
✓ il 66% degli utenti è frustratodalla
lentezza di caricamento delle pagine su
smartphone e tablet
✓ il 16% ab...
Da un sondaggio di Google
il 48% degli utenti afferma che 

se il sito non funziona in modo appropriato
nel proprio telefon...
il 67% degli utenti
che visitano un sito mobile-friendly
sono + propensi ad acquistare un prodotto/servizio
https://www.fli...
UX MOBILE: perché?
Schermi piccoli
Difficoltà a scrivere
“On the go”
Interruzioni
Scarsa attenzione
Batteria limitata
Costo ...
Mmmmh…
Utopia?
less is more
https://www.flickr.com/photos/syder/2611939720
finger friendly
https://www.flickr.com/photos/arjunvkp/7732829512
semplicemente perfetto
https://www.flickr.com/photos/zachinglis/5507648594
Comunica
in modo chiaro e semplice
http://goo.gl/xSL8sW
La parola d’ordine è
Modularità
definisci la strategia
per impilare contenuti
Il punto è il contenuto,
non è sapere quale device viene utilizzato
https://www.flickr.com/photos/davidfloresm/6880800575
Come
Dove
Quando
CONTENT ENHANCEMENT
Aggiungere o rimuovere parti di contenuto 

in base al device o al contesto può migliorare
incredibilm...
Focus sui blocchi
che compongono le pagine
https://www.flickr.com/photos/dampowls/5156631804
Definire i template
per moduli e viste
http://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25oct...
declinare le viste
a diverse risoluzioni
http://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25o...
contesto +
contenuto
una convivenza
possibile
Qualsiasi
Usato
device
browser
schermo
tipo di input
velocità di connessione
in qualsiasi momento
in qualsiasi situazione
...
Design Tecnologia
“Psicologia”
Brand
User Experience
Information Architecture
Visual design
development
https://www.flickr.com/photos/rooners/7122511473
come
procedere
su un sito esistente
https://www.flickr.com/photos/wooandy/3746059920
ripeti
step 1 step 2 step 3
Analizza il traffico
da analytics
Test: dove la UX
è compromessa?
Fai un piano di
interventi:
• ...
3 punti di ottimizzazione
per migliorare il layout (responsive)
✓ Porzione inizialmente visibile della pagina
(senza scrol...
QUali possibilità?
Su misura
+ url = + siti
http://www.accommodationbrunyisland.com.au/wp-content/uploads/2012/11/zoom-dog...
Mantenere diversi siti
è caotico e costoso
http://i.huffpost.com/gen/1475552/images/o-ADDAMS-FAMILY-JOHN-ASTIN-facebook.jpg
QUali possibilità?
Responsive
1 url = 1 sito
Il tuo sito è responsive?
https://www.google.com/webmasters/tools/mobile-friendly/
Test Your Site For Mobile Friendliness
Google decide
https://www.flickr.com/photos/scobleizer/4249731778
Satisfaction
essere mobile-friendly
premia
thank
you!
@nekorina
irene.capatti@redturtle.it
Sempre a disposizione…
http://www.meh.ro/wp-content/uploads/2013/02/meh.ro...
Upcoming SlideShare
Loading in …5
×

The Mobile Challenge - World Plone Day, Bologna 2015

479 views

Published on

Da responsive design a device-agnostic web design: la nuova sfida è progettare interfacce per il futuro.

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

The Mobile Challenge - World Plone Day, Bologna 2015

  1. 1. THE Mobile Challenge Bologna 29 Aprile 2015 https://www.flickr.com/photos/hindrik/8578352814
  2. 2. Irene Capatti graphic & UX designer About me @nekorina irene.capatti@redturtle.it
  3. 3. La sfida? https://www.flickr.com/photos/johnnyvulkan/1444830154 Portare il contenuto ovunque!
  4. 4. < 2007 LE PAGINE … poi… I Browsers … oggi Browsers + devices
  5. 5. Per la prima volta nel mondo
 ci sono più devices che spazzolini da denti!
  6. 6. E in qualsiasi momento Siamo online ovunque http://w3.android-indonesia.com/images/images/News/man-in-toilet.jpg
  7. 7. gli accessi da mobile supereranno
 gli accessi da desktop Entro fine 2015 https://www.flickr.com/photos/aakashgautam/8497909263
  8. 8. Responsive web design Ethan Marcott Nel 2010
  9. 9. https://www.flickr.com/photos/skyfire/5934928262 Oggi Device-Agnostic web design Trent Walton
  10. 10. “I devices di oggi 
 non sono quelli di domani : è necessario creare qualcosa che funzioni su qualsiasi dispositivo, non solo su quelli attuali ”@oneextrapixel + @trentwalton
  11. 11. Qualsiasi dispositivo?
  12. 12. Non possiamo sapere su quale device verrà navigato il nostro sito!
  13. 13. desktop + tablet + mobile nel mondo
  14. 14. Android's Deadly Fragmentation
  15. 15. From responsive to device agnostic design
  16. 16. Design Philosophy
  17. 17. device-Agnostic design “Un approccio device-agnostico tiene in considerazione infinite combinazioni di risoluzione dello schermo, metodi di input, capacità del browser e velocità di connessione. ” - Trent Walton, Device Agnostic
  18. 18. https://www.flickr.com/photos/pagedooley/2786973126 un’altra complicazione… Il contesto
  19. 19. Molti di noi possiedono più di un device
  20. 20. Passiamo da uno all’altro Mattina Viaggio Lavoro Pranzo Riunione Cena Film in ogni momento della giornata
  21. 21. Gli utenti si aspettano sempre lo stesso livello di esperienza attraverso i device
  22. 22. il 61% degli utenti che visitano un sito NON mobile-friendly passano sul sito della concorrenza! https://www.flickr.com/photos/alel7/14103154488
  23. 23. Attenzione! ✓ il 66% degli utenti è frustratodalla lentezza di caricamento delle pagine su smartphone e tablet ✓ il 16% abbandonail sito senza aspettare la fine del caricamento
  24. 24. Da un sondaggio di Google il 48% degli utenti afferma che 
 se il sito non funziona in modo appropriato nel proprio telefono sembra che l’azienda rappresentata dal sito non si curi affatto del proprio business
  25. 25. il 67% degli utenti che visitano un sito mobile-friendly sono + propensi ad acquistare un prodotto/servizio https://www.flickr.com/photos/dreamylittledancer/4387209538
  26. 26. UX MOBILE: perché? Schermi piccoli Difficoltà a scrivere “On the go” Interruzioni Scarsa attenzione Batteria limitata Costo piano dati Multitasking
  27. 27. Mmmmh… Utopia?
  28. 28. less is more https://www.flickr.com/photos/syder/2611939720
  29. 29. finger friendly https://www.flickr.com/photos/arjunvkp/7732829512
  30. 30. semplicemente perfetto https://www.flickr.com/photos/zachinglis/5507648594
  31. 31. Comunica in modo chiaro e semplice http://goo.gl/xSL8sW
  32. 32. La parola d’ordine è Modularità
  33. 33. definisci la strategia per impilare contenuti
  34. 34. Il punto è il contenuto, non è sapere quale device viene utilizzato https://www.flickr.com/photos/davidfloresm/6880800575
  35. 35. Come Dove Quando
  36. 36. CONTENT ENHANCEMENT Aggiungere o rimuovere parti di contenuto 
 in base al device o al contesto può migliorare incredibilmente l’esperienza utente https://www.flickr.com/photos/kirberich/5068950381
  37. 37. Focus sui blocchi che compongono le pagine https://www.flickr.com/photos/dampowls/5156631804
  38. 38. Definire i template per moduli e viste http://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25oct2014
  39. 39. declinare le viste a diverse risoluzioni http://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25oct2014
  40. 40. contesto + contenuto una convivenza possibile
  41. 41. Qualsiasi Usato device browser schermo tipo di input velocità di connessione in qualsiasi momento in qualsiasi situazione – agnostico – – contesto – https://www.flickr.com/photos/antiguan_life/359394164
  42. 42. Design Tecnologia “Psicologia”
  43. 43. Brand User Experience Information Architecture Visual design development https://www.flickr.com/photos/rooners/7122511473
  44. 44. come procedere su un sito esistente https://www.flickr.com/photos/wooandy/3746059920
  45. 45. ripeti step 1 step 2 step 3 Analizza il traffico da analytics Test: dove la UX è compromessa? Fai un piano di interventi: • hover • controlli, interazioni, modali • immagini e media pesanti http://www.slideshare.net/yiibu/pragmatic-responsive-design
  46. 46. 3 punti di ottimizzazione per migliorare il layout (responsive) ✓ Porzione inizialmente visibile della pagina (senza scroll) ✓ Leggibilità: font, lunghezza, allineamenti ✓ Estetica: proporzioni, disposizione
  47. 47. QUali possibilità? Su misura + url = + siti http://www.accommodationbrunyisland.com.au/wp-content/uploads/2012/11/zoom-dogs.jpg
  48. 48. Mantenere diversi siti è caotico e costoso http://i.huffpost.com/gen/1475552/images/o-ADDAMS-FAMILY-JOHN-ASTIN-facebook.jpg
  49. 49. QUali possibilità? Responsive 1 url = 1 sito
  50. 50. Il tuo sito è responsive?
  51. 51. https://www.google.com/webmasters/tools/mobile-friendly/ Test Your Site For Mobile Friendliness
  52. 52. Google decide https://www.flickr.com/photos/scobleizer/4249731778
  53. 53. Satisfaction
  54. 54. essere mobile-friendly premia
  55. 55. thank you! @nekorina irene.capatti@redturtle.it Sempre a disposizione… http://www.meh.ro/wp-content/uploads/2013/02/meh.ro10924.jpg

×