Usabilità mobile

iPhone, iPad, Blackberry, Nokia nQualcosa, ecc… Ormai il web è diventato accessibile da chiunque in qualunque luogo, con qualunque dispositivo, in particolar modo i cellulari o “smartphone[[Smart nel senso che puoi telefonare poco ma fare tante altre inutili cose.]]”

Questo è diventato un problema per noi sviluppatori ora, perché ci troviamo a dover adattare i nostri siti per far si che i visitatori non abbiano problemi a navigare nel nostro sito. È un problema di usabilità. Prendiamo il sito della Apple. Provate a navigarlo col vostro cellulare, è comodo? È facile? È piacevole? No, no, no.

Se fino ad ora abbiamo sviluppato con successo e direi anche tranquillità a 960 pixel, ora ci troviamo a dover creare, in fretta anche, versioni semplificate del nostro sito, fluide[[Non tutti gli smartphone hanno la stessa risoluzione ovviamente.]], per far si che anche l’esperienza mobile sia piacevole come quella desktop e non un trauma.
Fondamentalmente, parlando tra di noi, si tratta di estrapolare i dati dal nostro database e presentarli in una maniera più semplice senza fronzoli e grafiche accattivanti. Contenuto puro, o quasi.

Ci sono però smartphone e smarthpone, ci sono innanzitutto quelli con dispositivo touch e quelli che non ce l’hanno, che hanno ancora il paddino tradizionale.

Progettare per uno o per l’altro non dovrebbe fare differenza, ma in realtà ho notato che il comportamento online degli utenti cambia di molto a seconda di che tipo di dispositivo si sta usando. Oltretutto siamo influenzati da fattori come la forma del telefonino, la sua interfaccia, il fatto di avere o meno una tastiera fisica.

iPhone like (touchscreen)

iPhone

Gli utenti di questi dispositivi, me compreso, hanno un approccio molto più intuitivo al web, grazie al fatto che bastano i polpastrelli per navigare su internet in semplicità. L’unico problema è rappresentato dalla dimensione dei pulsanti, devono essere belli grossi per essere facilmente clickabili senza dover zoommare, e questo magari può influire sulla decisioni di grafica e interfaccia, come il dover fare tutto più grosso a scapito di quel minimo di stile che gli si poteva dare altrimenti.
Oltretutto direi che ormai il futuro dei cellulari è il touchscreen, e quindi dovremo, almeno sempre secondo me, aspettarci un aumento di questi modelli a discapito degli altri classici.

Tasti normali

Nokia n82

Questi utenti navigano su internet in maniera più sistematica, non hanno problemi di dimensioni (a parte ovviamente di quelle del sito), quindi se la cavano discretamente anche su siti complessi come ad esempio Facebook[[La versione mobile o touch? Fantascienza, sto parlando della versione classica, visualizzata -male- su cellulare. Incredibile ma vero.]]. Il loro maggior problema è anche il loro pregio, possono navigare tranquillamente su siti normali, non hanno problemi di dimensione dei pulsanti, a patto però di usare una lente di ingrandimento e di adattarsi all’html senza css. Pessima cosa.
Non sviluppo per loro, ma solo per gli iPhone-like, e il motivo è presto detto: se progettassi per loro, dovrei poi adattare tutti quelli con touchscreen, mentre facendo il contrario non devo adattare niente, e gli utenti hanno tasti e testi belli grandi da cliccare e leggere.

Siti mobile = brutti?

Ora, apparte il mio sito mobile che fa schifo ma non ho alcuna voglia di modificarlo, alcuni siti web mobile sono tutt’altro che brutti. Questa è come la bufala dell’usabilità che vuole un sito usabile brutto.
Prendiamo ad esempio il sito di Dropbox, che è tutto bellino e colorato, o quello di mailchimp, sono tutt’altro che brutti. Pensate che ci hanno creato perfino una gallery come quelle più blasonate, basta un poco di fantasia e ci si può sbizzarrire senza per questo perdere in usabilità.

Reindirizzamento automatico

Sono convinto che il redirect automatico sia la cosa più giusta da fare sempre e comunque in qualsiasi sito. Una forzatura certo, ma anche l’unico modo per essere sicuri che tutti i visitatori visitino il sito adatto al loro browser e al loro schermo. Così facendo risparmiamo loro la scocciatura di sapere che il nostro sito ha una versione mobile prima di tutto, e poi di doversi ricordare l’url per accedere alla versione loro dedicata.

Cms

Spero per voi che stiate usando un cms sul vostro sito, rende la vita più facili a tutti, anche in questo caso, perché di solito si tratta di installare un semplice plugin e passa la paura.

Se non usate un cms è più complicato, dovete fare una richiesta al browser per vedere di che si tratta, e in caso fare una deviazione alla pagina dedicata, estrarre dati dal database, ecc….

ExpressionEngine

Per EE c’è MX Mobile Device Detect, lo stesso plugin che uso su questo sito. È molto simpatico perché permette di scegliere dove far finire i visitatori che visitano il sito. Nel mio caso ad esempio (ma probabilmente anche voi farete così) il sito mobile è un template group dedicato. Più semplice di così non so.
Questo plugin vi permette e vi impone anche di creare la grafica che volete voi (il plugin capisce se è un device mobile e fa il redirect, ma poi sta a voi creare la pagina dove finisce), il che da una parte è una gran seccatura, ma dall’altra vi garantisce la massima flessibilità.

WordPress

Se usate WordPress, MobilePress è la soluzione per voi. Funziona esattamente come quello per ExpressionEngine, questo però da anche un accenno di grafica (modificabile volendo).

Diffusione dei dispositivi mobile

Basandomi sulle statistiche del mio sito, noto che sono ancora poco diffusi, con uno share del 0,66%, con una crescita però del 25,95% su base mensile. Ecco un grafico che illustra la situazione al meglio:

image

Come possiamo notare iPhone e comunque i dispositivi della Apple la fanno assolutamente da padrone, conquistando tutti assieme l’88,3% dello share.
Purtroppo non conosco siti di statistiche che pubblicano anche le statistiche per il mobile, se ne conoscete qualcuno mi fareste un gran favore a segnalarlo nei commenti.

]]>

Marco

Marco è un blogger che scrive di Web Design, in particolare di User Experience e accessibilità, Graphic Design, tutorial e tutto quello che riguarda il mondo del web e della carta stampata.

Commenta l'articolo