The Mobile Challenge - World Plone Day, Bologna 2015
0 likes593 views
Il documento discute l'importanza di un design web device-agnostic, evidenziando la crescente tendenza degli accessi da mobile rispetto a quelli da desktop. Viene sottolineata la necessità di fornire un'esperienza utente coerente su diversi dispositivi e le sfide legate al contesto di utilizzo. Inoltre, si evidenziano i benefici di un design reattivo e mobile-friendly, che influiscono positivamente sulle decisioni di acquisto degli utenti.
The Mobile Challenge - World Plone Day, Bologna 2015
- 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
- 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
- 12. Non possiamo sapere su quale device verrà navigato il nostro sito!
- 13. desktop + tablet + mobile nel mondo
- 15. From responsive to device agnostic design
- 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
- 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?
- 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
- 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
- 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
- 53. Satisfaction