Le elezioni per la presidenza degli Stati Uniti, nonostante il loro clamore mediatico, sono ormai un lontano ricordo. Prendendo spunto da quella che è stata la corsa alla casa bianca più social e web centrica che sia mai esistita, proponiamo la traduzione e la rielaborazione in italiano di una interessantissima analisi realizzata da Smashing Magazine inerente l’approccio al mobile web dei due candidati.
Da una parte la scelta di un approccio al mobile attraverso la tecnica del Responsive Web Design, dall’altra la progettazione di una versione separata del sito pensata specificatamente per dispositivi mobili.
Innanzitutto partiamo da una domanda: perchè perdere tempo nel realizzare una versione del proprio sito che possa essere fruita da dispositivi mobile?
La popolazione degli Stati Uniti è di circa 311 milioni di persone. Di questi circa la metà degli adulti ha uno smartphone. Per circa il 28% di americani un device mobile è la primaria via di accesso al web. Da questo ne consegue che i candidati che vogliono raggiungere potenziali elettori non possono permettersi di ignorare il settore mobile.
C’è da aggiungere, inoltre, che gli utenti accedono a contenuti web da mobile attraverso canali molto differenti tra loro: in aggiunta, infatti, al traffico diretto e al referral, i candidati utilizzano social network, campagne email, campagne sms, keywords advertising etc…
Dal momento che questi canali sono anch’essi sempre di più fruiti attraverso lo smartphone, ha decisamente senso creare la migliore esperienza mobile possibile.
Perchè qualcuno dovrebbe visitare il sito di un candidato e a maggior ragione perchè dal proprio cellulare?
Chi visita i siti dei candidati alla presidenza degli Stati Uniti che cosa cerca? Che cosa vorrebbe vedere sul proprio terminale?
I visitatori in genere o cercano informazioni o un modo per rendersi parte attiva nella campagna elettorale
Il visitatore orientato all’informazione.
Il visitatore orientato all’informazione cerca soprattutto dettagli sul candidato: biografia, background, proposte per risolvere determinate problematiche economico/sociali. Può essere interessato anche a leggere aggiornamenti regolari come news, post del blog o per sfatare notizie circolate sui media e che possono trovare una smentita solo tramite comunicati ufficiali diffusi nei siti web dei rispettivi candidati.
Il sito, quindi, fornisce ai candidati la possibilità di veicolare informazioni direttamente ai propri elettori senza il filtro dei media e dei giornalisti che possono distorcere una notizia in base alla propria linea editoriale.
Il visitatore orientato all’azione
L’utente orientato all’azione, invece, cerca modi per supportare la campagna elettorale del candidato; sia attraverso un supporto reale sia attraverso una donazione economica.
Entrambi i siti web, comunque, presentano “call to action” che invitano l’utente a effettuare donazioni per supportare la campagna elettorale o a iscriversi alla newsletter. I visitatori orientati all’azione, inoltre, solitamente sentono il bisogno di connettersi con il candidato attraverso i social media, di fare da volontari agli eventi, di portare altri possibili iscritti, di acquistare merchandising.
Prima di poter effettuare una dettagliata analisi delle performance dell’esperienza mobile dei rispettivi candidati, dobbiamo determinare una serie di criteri in base ai quali possiamo misurare l’efficacia delle scelte effettuate da Obama e Romney.
Kristofer Layon, web designer specializzato nel settore mobile, ha un’idea chiara riguardo le gerarchie che devono essere rispettate nell’esperienza mobile. La sua teoria della “motivazione mobile” è basata sulla gerarchia dei bisogni di Maslow, una teoria psicologica che identifica i diversi livelli dei bisogni umani.
Kristofer Layon ha applicato questa teoria ai bisogni di un utente che naviga sul web con il proprio smartphone dove l’accesso primario e la navigazione sono parametri fondamentali dell’esperienza e al vertice della piramide pone i diversi valori aggiunti che possono derivare dall’utilizzo dell’HTML 5.
A questo punto applichiamo una versione semplificata della piramide gerarchica di Kristofer per valutare quanto bene effettivamente funzionino i diversi approcci dei due candidati alla Casa Bianca
ACCESSIBILITA’
Potrà sembrare scontato ma il primo e più importante aspetto tra tutti è che gli utenti devono avere la possibilità di accedere a una determinata esperienza web tramite il proprio smartphone. Il design più bello del mondo non serve a nulla se non posso averne accesso e vederlo.
In passato realizzare la versione mobile di un sito web ha sempre significato un allegerimento e impoverimento del sito stesso rendendo disponibili solo una piccola serie di funzioni e contenuti.
Come abbiamo già affermato il 28% dei residenti negli USA, però, usano un dispositvo mobile come primaria via di accesso al web. E’ basilare, quindi, permettere a tutti questi utenti di accedere alla stessa quantità di contenuti che sono presenti nella versione desktop del sito e fornirgli una esperienza completa indipendentemente dal device utilizzato o da come è stato configurato.
Vediamo, rispetto a questo criterio, come si comportano i siti di entrambi i candidati.
Barack Obama
La scelta del team di Barack Obama è stata quella di realizzare un sito web ricorrendo alla tecnica del Responsive Web Design. Questo significa che non esiste una versione del sito “full size” e un’altra specifica per il mobile. Esiste un solo sito web capace di adattarsi alla risoluzione del device su cui viene visualizzato e fruito.
In un sito web responsive, quindi, i contenuti convivono sotto uno stesso tetto. Questa scelta permette al sito di rispettare una maggiore parità di contenuti. Sebbene, infatti, molti web designer specializzati nel Responsive Web Design possano (e lo fanno) nascondere determinati contenuti per gli utenti con schermi troppo piccoli, questa tecnica di per sé permette una minore disparità di contenuti e una minore divergenza tra l’esperienza desktop e quella mobile.
Mitt Romney
Il team del candidato repubblicano, invece, ha deciso di progettare una versione del sito specifica per i device mobili. Il dispositivo dell’utente che tenta di accedere al sito di Romney viene identificato e se si tratta di uno smartphone, l’utente verrà reindirizzato sulla versione mobile del sito stesso, con una differente url.
In questo caso, quindi, esistono due differenti siti web: uno realizzato per essere fruito da desktop e uno specifico per il mobile.
Da una parte questa scelta permette di confezionare e caratterizzare meglio ognuna delle due versioni. Dall’altra, però, un differente design e, soprattutto, un differente sottodominio potrebbero aprire la porta ad alcuni importanti inconvenienti: il problema principale è che nella versione mobile del sito di Mitt Romney si trova solo una parte delle caratteristiche e dei contenuti presenti sulla versione desktop.
E’ un mito da sfatare quello per cui gli utenti che acceddono al web con il proprio telefonino non vogliono accedere a tutte le informazioni e a tutte le funzioni presenti sul sito tradizionale. L’assenza di contenuti chiave nel sito mobile di Mitt Romney lascia senza risposte una serie di domande importanti per i suoi potenziali sostenitori come: chi è questo tizio? Qual’è il suo programma elettorale? Che cosa può fare per lo stato in cui vivo? Quali sono i suoi programmi per l’economia? Dove posso comprare merchandising?
Un altro problema da non sottovalutare è causato dal fatto che la versione mobile del sito dispone di una url differente rispetto a quella della versione desktop. I contenuti della versione desktop e della versione mobile, infatti, risiedono su indirizzi web separati ed è necessario il riconoscimento del device utilizzato per reindirizzare gli utenti nella versione giusta. Sfortunatamente molti siti non riescono a eseguire molto bene questa funzione per cui spesso utenti con computer desktop visualizzano la versione mobile e viceversa.
Questo problema si fa ancora più evidente quando utenti che stanno navigando la versione mobile del sito condividono contenuti nei social network e questi contenuti (con una url specifica per il mobile) vengono visualizzati da utenti che stanno utilizzando un computer desktop.
INTERAZIONE
Un aspetto molto importante che caratterizza l’interazione è rappresentato dalla struttura del menu di navigazione, che permette appunto di muoversi all’interno delle pagine del sito
Il menù di navigazione soprattutto nel mondo mobile dovrebbe essere come un buon amico: c’è quando ne hai bisogno ma ti lascia lo spazio vitale necessario. Quando il menù prende il sopravvento sull’intera struttura del sito diventa quell’amico noioso che non ti lascia mai solo. Quando è inaccessibile, nascosto o difficile da trovare è quell’amico che è assente quando hai bisogno di una mano per traslocare.
La verisione del sito di Obama per device con piccoli schermi presenta un menù di navigazione molto simile a quello dell’applicazione ufficiale di Facebook per iOS e Android. Sebbene questa sia una soluzione responsive molto utilizzata, è relativamente complessa e apre le porte a non pochi problemi.
Come afferma Stephanie Rieger nel suo post “A Plea for Progressive Enhancement,” il menu di navigazione del sito di Obama nei device mobile è un fallimento totale: non sempre si apre e spesso il sito rimane senza.
Questa situazione potrebbe essere evitata ricorrendo a particolari tecniche di programmazione, ma rimane un ottimo esempio delle sfide che si possono presentare quando si ricorre a un design adattivo.
Il menu di navigazione relativamente semplice della versione mobile del sito di Romney contrasta moltissimo rispetto a quello di Obama.
Si presenta in homepage come una dashboard (cruscotto) mentre nelle sezioni interne ritroviamo un semplice tasto “indietro” e il logo contenente il link alla homepage.
Questa tecnica di navigazione, da una parte, risolve senza dubbio il problema dello spazio limitato e della complessità ma ne crea altri: richiedere il refresh di una pagina intera solo per il fatto che si ha accesso a una sezione interna è una soluzione decisamente inefficace.
Inoltre un logo utilizzato come un bottone per tornare alla pagina iniziale non urla certo “cliccami” e il tasto “indietro” non ha alcun significato per un utente che arriva a una pagina interna senza passare dall’homepage. In aggiunta i browser mobile hanno già i loro tasti “indietro”; duplicare questa funzione, quindi, può essere solo uno spreco di spazio.
SCROLLING
Gli utenti, soprattutto nel mobile, hanno la necessità di accedere ai contenuti principali il più velocemente possibile.
Mitt Romney
La lunghezza della pagina del sito mobile di Romney è accettabile. Non c’è troppa confusione prima di poter accedere al contenuto principale e per la maggior parte del tempo l’utente non deve fare molto “scrolling” prima di trovare quello che gli interessa.
Barack Obama
Le pagine del sito di Obama contengono, invece, una grandissima quantita di contenuto. Nuove sezioni del sito, spesso, vengono introdotte molto in basso e il risutlato è: pagine estremamente lunghe con seri problemi di visualizzazione.
Fare “scrolling” con il mouse attraverso i piu disparati contenuti non è una esperienza positiva per l’utente. Come fanno i visitatori a sapere che il contenuto che cercano esiste? Trovare quello che cercano potrebbe essere più complicato che cercare un ago in un pagliaio.
Sebbene la parità di contenuto per gli utenti mobile è di primaria importanza questo non significa che tutto il contenuto deve essere presentato tutto subito in un’unica schermata. Tecniche come il “lazy loading” e il “conditional loading” permettono ai web designer di fornire agli utenti accesso a tutto il contenuto senza che per forza sia presentato tutto subito in un’unica schermata.
E sebbene queste tecniche possano essere estremamente efficaci, non c’è alternativa alla strategia di togliere del contenuto un po’ ovunque per incentrarsi su cio che è veramente importante.
In aggiunta alla noia di dover scorrere con il mouse su una grande quantità di contenuto, queste lunghissime pagine hanno un altro lato negativo: performance terribili.
PERFORMANCE
I web designer sempre più spesso danno per scontato che ormai gli utenti posseggono una connessione veloce e dispositivi mobile performanti di ultima generazione. Questi presupposti hanno portato la pesantezza media di una pagina web alla dimensione di un 1 MB. Un mega potrebbe essere irrilevante se non guardassimo da una prospettiva mobile.
Il 71% degli utenti mobile si aspetta che i siti si carichino velocemente almeno quanto quelli desktop (se non di più). Il 74% degli utenti mobile abbonderebbero un sito web se ci mettesse piu di 5 secondi per caricarsi. In altre parole hai solo 5 secondi di tempo per catturare l’attenzione di qualcuno.
Mitt Romney
Una pagina tipo del sito mobile di Romney è circa di 687 KB e impiega circa 8,75 secondi a caricare. Nonostante superi i 5 secondi di cui parlavamo prima, pesa sempre meno della dimensione media.
Barack Obama
Una pagina tipo del sito responsive di Obama pesa 4,2 mega e impiega 25 secondi di tempo per caricarsi. Al di la del fatto che solo un visitatore molto paziente attenderebbe 25 secondi per il caricamento della pagina, tutto questo contenuto da caricare crea problemi di accessibilità. Alcuni terminali come il blackberry (ancora molto diffuso all’interno delle aziende)non riescono a caricare tutta la pagina perchè è troppo larga.
Sfortunatamente molti siti web responsive che si trovano su internet sono caratterizzati da pessime performance. Guy Podjarny, chief product architect di Akamai e CTO di Blaze.io, afferma che solo il 3% delle versioni per piccoli schermi di siti responsive è significatamente più leggero rispetto alla corrispettiva versione desktop.
VALORE AGGIUNTO
Abbiamo più volte parlato della parità dei contenuti e dell’importanza di avere accesso alle stesse funzioni indipendentemente del device che si sta utilizzando. Ma questo non significa che non dobbiamo differenziare le due esperienze. Molti device mobili e browser mobile hanno funzioni che non sono presenti sui computer desktop. Sfruttarle significa portare l’esperienza mobile su un piano decisamente superiore.
A questo proposito, i web designer del sito di Obama hanno implementato una funziona specifica per il mobile che crea un grosso valore aggiunto. La possibilità di effettuare chiamate alla sede del comitato elettorale direttamente dal telefonino. Spesso dimentichiamo che i nostri dispositivi mobili sono prima di tutto un telefono e che i browser mobile possono avviare una chiamata quando si clicca su un numero di telefono. In questo modo si incentivano gli utenti a prendere parte attiva alla campagna elettorale.
Esistono molte altre funzioni che potrebbero essere implementate e che differenzierebbero significativamente la versione mobile di un sito rispetto a quella desktop. Tutte realizzabili ricorrendo all’HTML 5. Vediamone alcune.
Per esempio è possibile strutturare i form di contatto affinchè, se stiamo compilando un campo numerico, compaia la tastiera touch già settata sui numeri. Si eviterebbe all’utente un passaggio in più e si potrebbero incrementare le conversioni.
Un’altra possibilità potrebbe essere quella di rilevare la posizione geografica del dispositivo mobile per fornire all’utente informazioni rilevanti e pertinenti in relazione alla posizione in cui si trova. Per esempio il sito di Obama permette agli utenti di scegliere il proprio stato di residenza. Tutti questi passaggi si sarebbero potuti evitare se si fosse implementata la funzione di geolocalizzazione del dispositivo.
Il bello dei dispositivi mobili touch, inoltre, è prorpio quello di poter essere toccarti e di poter interagire con essi attraverso i gesti delle proprie dita. I siti mobile, quindi, dovrebbero permettere, per esempio, di poter scorrere una galleria fotografica attraverso il gesto delle dita e in generale rispondere ai quei gesti che solitamente utilizziamo per il nostro smartphone.
Insomma chi tra Obama e Romney è riucisto a creare la migliore esperienza mobile?
Non c’è un vincitore. Se c’è una lezione che dobbiamo imparare da questi siti e da queste tecniche è che questo lavoro è veramente difficile. Ci vuole grande impegno e grandi capacità per realizzare una perfetta esperienza mobile e a mio avviso è già un fatto molto positivo che entrambi i candidati abbiano preso così sul serio la tematica.
Dobbiamo guardare al mobile web come a un fantastico viaggio non come a una destinazione e dobbiamo cercare di offrire agli utenti la migliore esperienza possibile indipendentemente dal device che decidono di utilizzare.