giovedì 8 maggio 2014

Quali caratteristiche dovrebbe avere un sito ottimizzato per smartphone

Il tuo sito per i telefonini

Il 50% degli internauti usa uno smartphone e la percentuale è in netta crescita.
Tra meno di un anno la versione per telefonini del vostro sito sarà più importante di quella per desktop.
Il vostro sito deve quindi essere ristudiato per i dispositivi mobili in modo da essere facilmente navigabile e consentire di acquistare on line anche dai cellulari.
Anzi .. il vostro sito dovrà esssere concepito, progettato e strutturato principalmente per dispositivi smartphone, ed eventualmente adattato alla visualizzazione con tablet e desktop.

In sintesi la versione del sito per cellulari dovrà:

  1. Dare priorità alla velocità.
  2. Semplificare il processo di navigazione.
  3. Essere pensato per gli schermi touch-screen.
  4. Avere un layout grafico semplice.
  5. Essere progettato sia per display orientati in orizzontale che in verticale.
  6. Fornire le informazioni principali in modo chiaro e diretto.
  7. Utilizzare la geo-localizzazione offrendo servizi localizzati.
  8. Avere una immagine coordinata tra le versioni PC, cellulare e tablet.
  9. Essere affiancato da una applicazione se diventa molto popolare.

Velocità
Stiamo usando un telefono e spesso la connessione è lenta.
Immaginiamo un utente che per strada cerca qualcosa che gli è indispensabile in quel momento, potrebbe essere un malcapitato automobilista che in viaggio si ritrova ad aver bucato una gomma ed ha bisogno di un gommista, oppure un marito che ha scoperto che oggi è il compleanno di sua moglie ed ha urgente bisogno di un fiorista. Comunque si tratta di persone che difficilmente saranno connesse in wireless alla rete e che quindi non avranno una alta velocità di navigazione e che non saranno disposti ad aspettare che le vostre pagine si carichino mostrando effetti grafici pesanti anche se belli. Si tratta di utenti che preferiscono arrivare subito al sodo, senza fronzoli.
Tanto più una pagina è carica di cose, qualunque esse siano, tanto più è lenta nel caricarsi. I tread possibili non sono mai più di 10, e significa che caricare elementi in più obbliga a mettere in coda il loro caricamento.
Evitare l’utilizzo di plug in che richiedono tempo per essere caricati, il caso di skype o di facebook. Meglio mettere un semplice link.
Passare il sito nel page speed di google con l’obiettivo di ottenete il massimo punteggio.

semplificare la navigazione
Gli utenti usano le dita, quindi usate pulsanti sufficientemente grandi.
Le informazioni importanti devono essere raggiungibili subito, quindi raccolte nella prima schermata senza che si debba scorrere.
E’ opportuno che sia sempre disponibile un tasto torna indietro.
Utilizziamo una maniacale attenzione nel predisporre i form in modo che l’utente debba scrivere il meno possibile. Con html5 è possibile definire quale tastiera comparirà all’utente, quindi se si deve inserire una email andiamo direttamente alla tastiera con la chiocciola. Per il resto forniamo liste di valori predefiniti tra cui scegliere ovunque sia possibile farlo.

Pensate al touch
Non ci sono solo persone con dita di fata o da pianista, al mondo c’è ance Mike Tison.  Quindi nel progettare il layout di un sito web per telefonini è bene non inserire i tasti linkati troppo piccoli e troppo ravvicinati. Non mettiamo i nostri utenti nelle condizioni di cliccare il tasto sbagliato e finire su una pagina che non volevano raggiungere, diversamente ci malediranno.
Le dita a patatina fritta sono uno dei problemi principali di ogni sviluppatore mobile. Prima o poi l’ingegneria genetica, unita alla scomparsa dei lavori manuali produrrà persone con dita affusolate e piccole, ma fino ad allora bisognerà pensarci!

Semplificare il layout
così come il processo di navigazione, va semplificato anche il layout grafico.
Attenzione al contrasto, lo smarthphone se utilizzato in piena luce non è visibile facilmente. Ideale è il bianco su nero, ma anche il contrario va bene. Evitiamo comunque di smorzare il contrasto tra il testo e lo sfondo e soprattutto evitiamo contrasti cromatici che rischiano di diventare invisibili come il verde-rosso o il rosso-blu.
Utilizziamo caratteri leggibili e non troppo piccoli, quindi font molto netti. Ideale è il verdana o il calibri. I font messi a disposizione da google non sono l’ideale poiché richiedono tempo per essere caricati, quindi usiamoli con parsimonia e solo se realmente indispensabili.
Evitare componenti  flash perché non saranno visualizzati dalla gran parte dei dispositivi.

Layout orizzontale e verticale
ovvero portrait e landscape. La maggior parte degli smartphone consentono due modalità di visualizzazione. Il sito va ottimizzato per entrambe. In ogni caso è bene che il sito si adatti automaticamente ai diversi dispositivi di visualizzazione. I tasti principali non devono perdersi nel passaggio da un layout all’altro e non devono rimanere grandi vuoti..

Informazioni principali chiare e dirette
Le informazioni principali ed essenziali devono essere immediatamente visibili. Ogni tipologia di attività ha peculiarità diverse da mettere in evidenza: un gommista dovrà mettere in evidenza la propria posizione sulla mappa, il proprio numero di telefono e i propri orari di apertura e chiusura. Un negozio virtuale dovrà mettere in evidenza il proprio catalogo prodotti, ecc ..
Il numero di telefono e l’indirizzo, normalmente inseriti nel bottom della pagina dovranno comparire nella testata.

Geo localizzazione
mettere sempre la posizione su una mappa e magari inserire anche quella dell’utente.
Se la posizione del punto vendita è la cosa più importante, allora bisognerà inserire nella home page una mappa che consenta la visualizzazione del landmark della attività accanto alla geo localizzazione dell’utente.

Immagine grafica coordinata tra diverse versioni
rendere l’esperienza di navigazione cross device il più omogenea possibile. Ideale è pensare ad un sito adaptive che risponde in maniera diversa ai diversi dispositivi, eventualmente mostrando o nascondendo parti di pagina non essenziali nella navigazione da smartphone ma utili a chi naviga con il desktop.

Fare una applicazione per android ed iphone
Per i siti molto visitati e frequentemente aggiornati vale la pena pensare allo sviluppo di applicazioni capaci di inviare notifiche push!