The Mobile Challenge - World Plone Day, Bologna 2015
55
THE Mobile Challenge Bologna 29 Aprile 2015 https://www.flickr.com/photos/hindrik/8578352814
-
Upload
irene-capatti -
Category
Mobile
-
view
32 -
download
0
Transcript of The Mobile Challenge - World Plone Day, Bologna 2015
THE
Mobile ChallengeBologna 29 Aprile 2015
https://www.flickr.com/photos/hindrik/8578352814
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 momentoSiamo online ovunque
http://w3.android-indonesia.com/images/images/News/man-in-toilet.jpg
gli accessi da mobile supererannogli accessi da desktop
Entro fine 2015
https://www.flickr.com/photos/aakashgautam/8497909263
Responsive web designEthan Marcott
Nel 2010
https://w
ww.flick
r.com
/pho
tos/skyfire/593
4928
262
Oggi
Device-Agnostic web designTrent Walton
“ I devices di oggi non sono quelli di domani :
è necessario creare qualcosa che funzioni su qualsiasi dispositivo, non solo su quelli attuali
”@oneextrapixel + @trentwalton
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 schermo, metodi di input, capacità del browser e velocità di connessione. ”
- Trent Walton, Device Agnostic
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/photos/alel7/14103154488
Attenzione!✓ il 66% degli utenti è frustrato dalla
lentezza di caricamento delle pagine su smartphone e tablet
✓ il 16% abbandona il sito senza aspettare la fine del caricamento
Da un sondaggio di Googleil 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
il 67% degli utenti che visitano un sito mobile-friendly
sono + propensi ad acquistare un prodotto/servizio
https://www.flickr.com/photos/dreamylittledancer/4387209538
UX MOBILE: perché?
Schermi piccoli
Difficoltà a scrivere
“On the go”
Interruzioni
Scarsa attenzione
Batteria limitata
Costo piano dati
Multitasking
Mmmmh… Utopia?
less is more
https://www.flickr.com/photos/syder/2611939720
finger friendlyhttps://www.flickr.com/photos/arjunvkp/7732829512
semplicemente perfetto
https://www.flickr.com/photos/zachinglis/5507648594
Comunica
in modo chiaro e semplicehttp://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
ComeDoveQuando
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
Focus sui blocchi
che compongono le pagine
https://www.flickr.com/photos/dampowls/5156631804
Definire i template
per moduli e vistehttp://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25oct2014
declinare le viste
a diverse risoluzionihttp://www.slideshare.net/annadahlstrom/device-agnostic-design-ucd2014-london-25oct2014
contesto + contenuto una convivenza possibile
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
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: • hover • controlli,
interazioni, modali
• immagini e media pesanti
http://www.slideshare.net/yiibu/pragmatic-responsive-design
3 punti di ottimizzazione
per migliorare il layout (responsive)
✓ Porzione inizialmente visibile della pagina (senza scroll)
✓ Leggibilità: font, lunghezza, allineamenti
✓ Estetica: proporzioni, disposizione
QUali possibilità?
Su misura + url = + siti
http://www.accommodationbrunyisland.com.au/wp-content/uploads/2012/11/zoom-dogs.jpg
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!
Sempre a disposizione…
http://www.meh.ro/wp-content/uploads/2013/02/meh.ro10924.jpg
