THE

Mobile ChallengeBologna 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 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!

@nekorinairene.capatti@redturtle.it

Sempre a disposizione…

http://www.meh.ro/wp-content/uploads/2013/02/meh.ro10924.jpg