Axura Logo
Axura Blog

SPUNTI E CONVERSAZIONI DI UN’AGENZIA
SPECIALIZZATA IN INTERAZIONI DIGITALI

SPUNTI E CONVERSAZIONI

Home » Presenze internet » Sviluppo di siti per smartphone e tablet, ma non solo: possiamo fare meglio?

Sviluppo di siti per smartphone e tablet, ma non solo: possiamo fare meglio?

Alberto Giacobone

Tempo di lettura: 15′

Axura primo fornitore multidispositivo consigliato da Google in Italia
Computer, portatile, smartphone, tablet: per ogni schermo serve la giusta modalità di fruizione

Come agenzia di servizi web, ci occupiamo da ormai molti anni dello sviluppo di siti internet e negli ultimi anni chiaramente la nostra attenzione si è sempre più concentrata sullo sviluppo di siti pensati per essere fruiti correttamente su dispositivi di diverso genere: non solo computer e notebook tradizionali, ma anche smartphone e tablet.

Recentemente abbiamo avuto l’onore di fare da apripista in Italia per i fornitori multidispositivo consigliati da Google. Si tratta di un elenco di fornitori che Google indica come “in grado di aiutarti a ottimizzare i tuoi siti per assicurare una funzionalità uniforme su tutti i dispositivi”.

Axura è il primo fornitore multidispositivo consigliato da Google in Italia
Axura è il primo fornitore multidispositivo consigliato da Google in Italia (fonte: http://goo.gl/sFtCqU)

Che l’attenzione si stia sempre di più spostando sul mobile, è sotto gli occhi di tutti: a metà del 2014 l’accesso ad internet in mobilità ha superato quello da rete fissa ed il trend non accenna ad arrestarsi. Per chi vuole approfondire gli aspetti numerici qualche dato l’abbiamo raccolto e riportato nella pagina dedicata ai servizi multischermo.

Se l’aspetto della “domanda” e delle aspettative da parte delle persone è chiaro, in questo post vogliamo invece concentrarci un po’ di più sul fronte dell’offerta.

Già, perchè a navigare dal proprio smartphone, ci si accorge che molti siti non sono certamente pensati per essere impiegati da un simile dispositivo: alcuni non si aprono proprio o comunque non si vedono, in quanto realizzati con tecnologie non più supportate dai moderni browser disponibili sugli smartphone. Un esempio su tutti? Gli elementi realizzati tramite Adobe Flash, tecnologia molto diffusa diversi anni fa (ne abbiamo fatto ampio uso anche noi come agenzia) sono “invisibili”.

Altri siti invece, sono completamente illeggibili o praticamente impossibili da navigare, per via della struttura della pagina o della presenza di contenuti di dimensioni eccessive rispetto allo schermo del dispositivo.

Mercatone Uno sito per smartphone
Il sito di Mercatone Uno visto da iPhone 5: difficile navigarci

Il problema è così grave che recentemente Google si è sentita in dovere di introdurre un’etichetta nei suoi risultati di ricerca per indicare quali siti, tra quelli presentati nell’elenco dei risultati, sono da considerare “mobile friendly”: in questo modo, chi utilizza Google per le proprie ricerche, può rapidamente discriminare tra una pagina che sarà piacevole da fruire ed una che potrà creare problemi. Immaginiamoci una persona che cerca notizie dell’ultima ora e trova la medesima notizia indicata in corrispondenza di due siti, uno contrassegnato come “mobile friendly”, l’altro no: quale cliccherà? 😉

Etichetta sito Mobile Friendly Google
Funziona da smartphone e tablet? L’etichetta di Google ci aiuta a scegliere (e a salire sui motori)

Piccola nota: al momento in cui si scrive in Italia questa etichetta non è ancora arrivata, ma siamo sicuri che non tarderà a popolare anche le nostre pagine di risultati di ricerca.

Assodata l’importanza di rendersi correttamente visibili su tutti i principali dispositivi – in inglese si usa l’espressione “multiscreen” – proviamo a individuare insieme alcuni aspetti che richiedono attenzioni particolari.

Le dimensioni dello schermo

E’ vero, gli smartphone moderni assomigliano sempre di più a dei tablet (al punto che è nato il termine phablet, per contraddistinguere i dispositivi a metà tra telefono e tablet: non è raro trovare smartphone da 6 pollici e qualche tablet da 11 o 12 pollici si inizia a vedere).

La normalità per il momento è però diversa: smartphone con schermi tra i 4,5 ed i 5,5 pollici e tablet con schermi tra i 7 ed i 10 pollici.

Confronto display iPhone 6 vs iPad Mini
iPhone 6 e iPad Mini a confronto: ormai i display sono paragonabili (fonte: http://goo.gl/D8Gpdu)

A parità di dimensioni, si è assistito negli anni ad un aumento della densità dei pixel, sempre più piccoli e sempre più vicini tra loro; si è così arrivati a schermi da 5 pollici con risoluzioni simili a quelle di un classico schermo da computer, ad esempio 1920×1080 (equivalente del Full HD).

Pubblicare contenuti normali (ad esempio immagini) per la fruizione da questi dispositivi può comportare una visualizzazione non ottimale (ad esempio, immagini che si vedono sgranate): vanno quindi pubblicati contenuti ad hoc (ad esempio, immagini con risoluzione doppia o addirittura tripla rispetto a quella standard).

L’orientamento del dispositivo

Oltre alle dimensioni dello schermo, mentre per i tablet è abbastanza frequente un impiego dello schermo orientato in senso orizzontale (landscape), per gli smartphone è più diffuso l’utilizzo del dispositivo – e quindi dello schermo – con orientamento verticale (portrait).

Visualizzazione landscape vs visualizzazione portrait
Visualizzazione landscape e portrait: ormai per l’utente è una cosa familiare, ma nel progettare un sito bisogna tenerne conto (fonte: http://goo.gl/qu8XHI)

Nel realizzare un sito per smartphone e tablet questo è un importante fattore da tenere in considerazione: il sito che pubblichiamo si vede correttamente in entrambi gli orientamenti? Consente all’utente di scegliere la modalità di fruizione più comoda nel caso specifico oppure ne impone una rispetto ad un’altra?

L’interazione con il dispositivo

Come interagiamo con smartphone e tablet? L’esperienza comune è quella del “tappare” con le dita, anche se sempre più persone si stanno abituando ad utilizzare la propria voce per raggiungere i risultati desiderati (ne abbiamo scritto non molto tempo fa). In alcuni casi si può impiegare un pennino e, andando avanti, per molte interazioni sarà sufficiente uno sguardo: già oggi alcuni smartphone Samsung, dotati della funzione Smart Scroll, riescono a comprendere quando una persona sta guardando la parte bassa di una pagina per farla scorrere di conseguenza.

Tenere conto delle modalità con cui una persona interagisce con il dispositivo è fondamentale per poter impostare un’interfaccia utente capace di offrire un’ottima esperienza d’uso.

In compagnia di tante altre grandi aziende, Google ed Apple offrono molti spunti per aiutare gli sviluppatori a muoversi nella giusta direzione: dalle linee guida per lo sviluppo di applicazioni Android a quelle per il mondo iOS, il materiale per studiare e migliorare non manca di certo.

La velocità di accesso alla rete

Meme connessione lenta
Connessione lenta? Un problema di molti, e in mobilità può andare anche peggio…

Se i tablet si utilizzano prevalentemente in ambito domestico, dove è sempre più frequente avere a disposizione connessioni ad alta velocità, gli smartphone vengono spesso impiegati in mobilità, dove non sempre la connessione è di qualità: tra bassa velocità di navigazione e possibili disconnessioni, un utente potrebbe non gradire un sito particolarmente pesante o dove – a fronte di una disconnessione – deve iniziare un processo dall’inizio.

Sul fronte della velocità di accesso ai contenuti, ci sono numerosi tecnicismi a cui prestare attenzione: ad aiutare gli sviluppatori ci pensa Google, mettendo a disposizione una risorsa molto utile, Pagespeed Insights.

Si tratta di una serie di strumenti correlati a molte informazioni utili, che permettono di valutare e migliorare gli aspetti tecnici che rendono un sito “veloce” da fruire.

Ottenere punteggi alti nel test previsto da Google non è solo una questione di vanità: la velocità di accesso si può tradurre concretamente in un miglior posizionamento sui motori di ricerca, un risultato di sicuro valore.

Se ci spostiamo invece sul fronte dell’esperienza utente, prevedere le possibili disconnessioni fa parte delle attenzioni che aiutano gli utenti a vivere un’esperienza migliore: per loro, semplicemente, “funziona”. Se poi la tecnologia alle spalle si chiama “html5 local storage” o altro, poco conta se il risultato è quello giusto.

Le condizioni ambientali di impiego del dispositivo

Postazione multitasking
Come si usa il computer? Di solito, a una scrivania…

Quando pensiamo all’impiego di un computer, tipicamente ci immaginiamo una persona seduta – più o meno composta – su di una sedia davanti ad una scrivania, con appoggiata una tastiera, a destra o sinistra un mouse e davanti uno, due, o addirittura tre monitor.

Ora pensiamo alle condizioni di impiego di un tablet: stravaccati sul divano davanti alla TV? In bagno? In cucina con il tablet appoggiato sul bancone mentre si cucina? A letto con le braccia alzate?

Sono tutte risposte plausibili, in quanto i tablet si prestano ad essere impiegati nelle situazioni più disparate. Le attenzioni che dobbiamo avere sono tante: l’utente avrà entrambe le mani libere? Se ad esempio stiamo pubblicando delle ricette, magari avrà il tablet in cucina e le mani sporche: abbiamo progettato le nostre pagine per consentirgli di scorrerle anche in queste condizioni?

Andare in bicicletta usando lo smartphone
Camminando, sotto la doccia, a letto: lo smartphone si usa praticamente ovunque, anche quando non si dovrebbe (fonte: http://goo.gl/NfSIVz)

Se poi passiamo agli smartphone, beh, gli scenari di impiego diventano ancora più variegati e interessanti. C’è chi ad esempio ha pensato di rendere un po’ più sicura l’esperienza di chi cammina inviando messaggi, rendendo il fondo della sua applicazione trasparente e riproducendo sul display quanto ripreso dalla telecamera posteriore.

Certo, non è possibile tenere conto di tutte le possibili casistiche, ma qualche accorgimento di fondo si può adottare e fa parte delle tante piccole attenzioni che possono migliorare l’esperienza dell’utente (e nel caso dell’applicazione appena menzionata, evitargli spiacevoli incidenti!).

L’impiego delle risorse del dispositivo

Un dispositivo elettronico, tipicamente, è in grado di ricevere e emettere dei segnali (input e output). Ad esempio, grazie all’antenna ed altri componenti, un telefonino riceve il segnale che porta la voce dell’interlocutore durante una chiamata e trasmette quanto rilevato dal microfono (o dai microfoni) a chi sta dall’altra parte.

Schermo e altoparlante sono i dispositivi di output più tipici, ma non certo gli unici.

Ad esempio, pensare ad un computer, magari un notebook, capace di vibrare per notificarci dell’arrivo di una mail ci risulta strano, vero? Già, non ci siamo abituati, mentre è ormai esperienza comune con il telefonino (o si dovrebbe ormai parlare solo di smartphone?): siamo talmente assuefatti alla vibrazione di questi dispositivi nelle tasche dei pantaloni o delle giacche, che siamo arrivati a percepirla anche quando non c’è (già, si tratta di una vera e propria sindrome).

L’accesso a questa risorsa del dispositivo, da parte di un comune sito web, era fino a poco tempo fa preclusa.

Un sito web ad esempio può chiedere al dispositivo di comunicargli (con l’autorizzazione dell’utente) la posizione geografica (determinata tipicamente per il tramite di GPS e Wi-Fi), ma comandare la vibrazione non rientrava tra le possibilità.

Questo limite si sta progressivamente superando e ci sono già specifiche che consentono ad un sito web – se viene usato il giusto sistema operativo e browser (al momento in cui si scrive Firefox Mobile su Android) di interagire con l’utente tramite la vibrazione.

A giugno 2014, in Italia 28 milioni di utenti unici hanno navigato in rete: di questi quasi 13 milioni da pc e più di 15 milioni da mobile fonte: Rapporto Digital Audience giugno 2014 Audiweb

In molti smartphone e tablet si trovano anche dei LED, utili per ricevere notifiche, ma anche questi sono scarsamente accessibili per gli sviluppatori web.

Sul fronte degli input invece, cosa troviamo nelle ultime generazioni di smartphone che potrebbe essere impiegato? Ecco un elenco (non certo esaustivo):

  • accelerometri
  • giroscopi
  • sensori di battito cardiaco
  • sensori di livello di ossigeno nel sangue
  • magnetometri
  • barometri
  • sensori di distanza (prossimità)
  • sensori di luce
  • pedometri
  • lettori di impronte digitali
  • termometri
  • sensori di risposta galvanica cutanea
  • livello di radiazioni
  • colorimetri
  • microfoni
Sensore rilevamento battito cardiaco Samsung Galaxy S5
I sensori per rilevare i parametri biologici sono presenti ormai su tutti gli smartphone di alta gamma, e sempre più sofisticati (fonte: http://goo.gl/6Ghfdy)

Non tutti questi sensori sono contemporaneamente presenti negli smartphone odierni (a dire il vero, il livello di radiazioni è presente come sensore in un solo smartphone, distribuito in Giappone), ma la tendenza è una sempre maggior integrazione di questi sensori nei dispositivi che portiamo con noi ogni giorno.

Immaginiamo la possibilità per un utente di far accedere un sito web alle informazioni sulla sua risposta galvanica cutanea, insieme all’analisi della sua voce attraverso il microfono, alla lettura dell’iride attraverso la videocamera ad alta risoluzione e dei micromovimenti attraverso accelerometri e giroscopi… Altro che macchina della verità!

L’esempio è volutamente estremo, per riflettere insieme su come se da una parte rendere accessibili tramite browser una serie di informazioni ad un sito web può essere utile per offrire un’esperienza ancora più personalizzata e di sempre maggior valore, dall’altra apre a scenari davvero complessi da comprendere e tantopiù gestire.

Da una parte quindi tantissimi dati che possono venire elaborati, dall’altra alcune occasioni di interazione che possono venire impiegate meglio: ad esempio, sono ancora agli inizi le specifiche per diffondere l’impiego di sintetizzatori vocali che consentano di offrire la fruizione di contenuti di diverso genere facendoli ascoltare invece che guardare.

Film Lei (Her) di Spike Jonze
Una scena del film Lei (Her di Spike Jonze), storia d’amore tra un uomo e un sistema operativo che interagisce con lui attraverso un auricolare (Warner Bros. Pictures)

Gli utenti di Siri, Cortana o altri assistenti simili già si rendono conto di quanto possa essere efficiente interagire attraverso la voce e l’udito: quando questi sistemi funzionano bene (doverosa premessa), si risparmia tempo, ci si distrae di meno e si fa meno fatica per arrivare al risultato desiderato.

Chi si occupa di mettere a disposizione contenuti e servizi accessibili via browser può tenere in considerazione questi sviluppi, sempre al fine di offrire una miglior esperienza di interazione e per rendere più competitivo il sito sviluppato. Ad esempio, un utente alla guida della sua auto potrebbe preferire un sito di news che mette a disposizione un servizio di lettura delle notizie rispetto ad un sito che si limita a renderle fruibili adeguatamente anche sullo schermo di uno smartphone.

I collegamenti con le app

Su smartphone e tablet si sa, regnano le app: quale che sia il sistema operativo o il marketplace di riferimento, gli utenti spendono la maggior parte del proprio tempo proprio utilizzando le applicazioni più svariate, da quelle ludiche a quelle professionali.

I grandi player (Google, Apple, Facebook in primis) si sono quindi mossi per migliorare il passaggio dall’ambiente web, a cui si accede tramite il browser, a quelli delle singole applicazioni.

Un importante passo avanti è stato effettuato offrendo agli sviluppatori la possibilità di creare collegamenti a partire da una pagina web direttamente verso una risorsa specifica messa a disposizione tramite un’applicazione.

Applinks Facebook
Il sito del progetto Applinks di Facebook

Google si è mossa a partire dal mondo Android, mentre Facebook sta provando a proporre una soluzione nelle sue intenzioni universale. Apple è forse quella più attenta al fattore sicurezza, a discapito però della semplicità di sviluppo e mette a disposizione dei visitatori delle estensioni per iOS8.

La mancanza di un vero e proprio standard complica la vita agli sviluppatori, richiedendo sforzi notevoli per migliorare l’esperienza per gli utenti e sono in molti quelli che hanno scelto di rinunciare per il momento, in attesa di tempi migliori.

Where do we go from here?

La strada da fare è davvero tanta così come sono tante le opportunità da cogliere.

Google Mobile Ads
Le guide per una migliore pubblicità mobile non mancano, ma un ottimo riferimento è sicuramente nei siti dedicati proposti da Google

Ad esempio, capita ancora con una certa frequenza di vedere su smartphone elementi pubblicitari – anche di marchi importanti e pubblicati su testate autorevoli – che interferiscono in maniera radicale con la navigazione dell’utente, per poi condurre a pagine web non ottimizzate per la fruizione da dispositivi mobili. Si tratta di un’esperienza fastidiosa per l’utente e di un ritorno negativo sia per l’inserzionista che per l’editore.

Fare meglio non è particolarmente complesso e le risorse a disposizioni di sviluppatori e pubblicitari sono tante: Google, tra molti, è particolarmente attivo ed attento nell’educare sulle opportunità correlate ad una giusta pubblicità su mobile.

Le risorse quindi ci sono: che si parli di sviluppo di siti web per smartphone o di indicazioni su come gestire tocchi e gesti su tablet in rete si trova veramente tutto quello che serve per stare al passo con lo sviluppo in questo settore dove il ritmo del cambiamento è davvero vertiginoso.

Il display arrotolabile OLED realizzato da LG
Display OLED completamente arrotolabili: LG è pronta al grande sbarco sul mercato (fonte: http://goo.gl/WN6V1v)

E’ utile farlo?

Beh, in base ai dati Audiweb, ad agosto 2014 il 66,4% del tempo totale speso online in Italia è stato generato dalla fruizione di internet da mobile.

La risposta è nei numeri e, se si vuole essere lungimiranti, è bene prestare attenzione alla prevista invasione di smartwatch e smartglass, tenendo anche conto che nella Roadmap di LG sulla tecnologia OLED – non diversa da quella di altri grandi produttori – i display completamente arrotolabili saranno sul mercato a partire dal 2017, e non è certo l’unica novità in arrivo …

Siamo pronti? 😉