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

1. THE
Mobile Challenge
Bologna
29 Aprile 2015
https://www.flickr.com/photos/hindrik/8578352814

2. Irene Capatti
graphic & UX designer
About me
@nekorina
irene.capatti@redturtle.it

3. La sfida?
https://www.flickr.com/photos/johnnyvulkan/1444830154
Portare il contenuto ovunque!

4. < 2007
LE PAGINE
… poi…
I Browsers
… oggi
Browsers
+ devices

5. Per la prima volta nel mondo
ci sono più devices che spazzolini da denti!

6. E in qualsiasi momento
Siamo online ovunque
http://w3.android-indonesia.com/images/images/News/man-in-toilet.jpg

7. gli accessi da mobile supereranno
gli accessi da desktop
Entro fine 2015
https://www.flickr.com/photos/aakashgautam/8497909263

8. Responsive web design
Ethan Marcott
Nel 2010

9. https://www.flickr.com/photos/skyfire/5934928262
Oggi
Device-Agnostic web design
Trent Walton

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. Qualsiasi
dispositivo?

12. Non possiamo sapere
su quale device verrà navigato il nostro sito!

13. desktop + tablet + mobile nel mondo

14. Android's Deadly Fragmentation

15. From responsive to
device agnostic design

16. Design Philosophy

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. https://www.flickr.com/photos/pagedooley/2786973126
un’altra complicazione…
Il contesto

19. Molti di noi possiedono
più di un device

20. Passiamo da uno all’altro
Mattina Viaggio Lavoro Pranzo Riunione Cena Film
in ogni momento della giornata

21. Gli utenti si aspettano sempre lo
stesso livello di esperienza
attraverso i device

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. 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. 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. 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. UX MOBILE: perché?
Schermi piccoli
Difficoltà a scrivere
“On the go”
Interruzioni
Scarsa attenzione
Batteria limitata
Costo piano dati
Multitasking

27. Mmmmh…
Utopia?

28. less is more
https://www.flickr.com/photos/syder/2611939720

29. finger friendly
https://www.flickr.com/photos/arjunvkp/7732829512

30. semplicemente perfetto
https://www.flickr.com/photos/zachinglis/5507648594

31. Comunica
in modo chiaro e semplice
http://goo.gl/xSL8sW

32. La parola d’ordine è
Modularità

33. definisci la strategia
per impilare contenuti

34. Il punto è il contenuto,
non è sapere quale device viene utilizzato
https://www.flickr.com/photos/davidfloresm/6880800575

35. Come
Dove
Quando

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. Focus sui blocchi
che compongono le pagine
https://www.flickr.com/photos/dampowls/5156631804

38. Definire i template
per moduli e viste
http://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25oct2014

39. declinare le viste
a diverse risoluzioni
http://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25oct2014

40. contesto +
contenuto
una convivenza
possibile

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. Design Tecnologia
“Psicologia”

43. Brand
User Experience
Information Architecture
Visual design
development
https://www.flickr.com/photos/rooners/7122511473

44. come
procedere
su un sito esistente
https://www.flickr.com/photos/wooandy/3746059920

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. 3 punti di ottimizzazione
per migliorare il layout (responsive)
✓ Porzione inizialmente visibile della pagina
(senza scroll)
✓ Leggibilità: font, lunghezza, allineamenti
✓ Estetica: proporzioni, disposizione

47. QUali possibilità?
Su misura
+ url = + siti
http://www.accommodationbrunyisland.com.au/wp-content/uploads/2012/11/zoom-dogs.jpg

48. Mantenere diversi siti
è caotico e costoso
http://i.huffpost.com/gen/1475552/images/o-ADDAMS-FAMILY-JOHN-ASTIN-facebook.jpg

49. QUali possibilità?
Responsive
1 url = 1 sito

50. Il tuo sito è responsive?

51. https://www.google.com/webmasters/tools/mobile-friendly/
Test Your Site For Mobile Friendliness

52. Google decide
https://www.flickr.com/photos/scobleizer/4249731778

53. Satisfaction

54. essere mobile-friendly
premia

55. thank
you!
@nekorina
irene.capatti@redturtle.it
Sempre a disposizione…
http://www.meh.ro/wp-content/uploads/2013/02/meh.ro10924.jpg