Siti web a prova di smartphone, ecco alcune cose che faresti bene a non dimenticare

Nel giro di pochi anni, gli smartphone hanno rivoluzionato il modo in cui si fruisce il web, e in cui si progettano siti e app.

I trend degli ultimi anni parlano chiaro, più di un miliardo di utenti interagisce con internet tramite dispositivi mobili. Sono dappertutto. È assai più facile scordare a casa il portafoglio piuttosto che uscire senza il nostro preziosissimo smartphone, giusto? È ormai impossibile per designer e sviluppatori progettare soluzioni servizi digitali pensati solo per la versione desktop. Cerchiamo quindi di capire con i suggerimenti che seguono cosa vuol dire pensare prima ai dispositivi mobili (tablet e smartphone).

1. Gli utenti non pianificano

Vero che molti di noi ancora usano un desktop o un laptop. Magari al lavoro, o a casa. Ma viviamo sempre connessi, ed è proprio fuori dalle pareti di casa o dell’ufficio che usiamo più spesso i social, WhatsApp o le email. È quindi probabile che se ci arriva un link o una notifica che ci suggeriscono di provare un nuovo servizio, il nostro primo contatto con esso sia tramite dispositivo mobile. Anche se magari il servizio richiede uno schermo molto più grande per essere fruito al meglio. Chi guarda ad esempio un film sullo smartphone?! Ma quanti trailer ci avete visto? Gli utenti non pianificano, fanno qualcosa quando ne hanno l’opportunità o la necessità.

2. Prima il contenuto, quindi prima l’utente

Le ridotte dimensioni dello schermo sono sicuramente una buona ragione per focalizzarsi sull’essenziale: il contenuto. Il contenuto deve venire prima della sua presentazione, dell’interfaccia che lo veicola. Questo richiede chiaramente un’attenzione maggiore sia alla strutturazione dei testi che agli aspetti redazionali. Anche le funzioni di contorno devono essere implementate al minimo a favore di un rapido caricamento della pagina e delle sue interazioni essenziali. Mettere l’accento sul contenuto significa quindi mettere l’accento sull’utente.

3. Diversi dispositivi, diversi contesti d’uso, diverse funzioni

Il contesto di fruizione influenza i veri obiettivi dell’utente. Un’applicazione o un sito web possono dover avere funzioni diverse in base a dove vengono fruiti. Ad esempio posso proporre una navigazione basata sulla geolocalizzazione se sono su un dispositivo che offre questa funzione. Se invece ne sono sprovvisto, il mio servizio potrebbe propormi come default una ricerca testuale. O potrei decidere che le funzioni geografiche sono secondarie rispetto ad una navigazione per categorie. Ma non facciamo supposizioni: ricordiamoci di chiederlo agli utenti! ;-)

4. Progettate per le dita (e per l’autobus)

Progettare un’applicazione o un sito che debba essere usato su un dispositivo mobile significa innanzitutto fare i conti con le dita, con le mani di chi lo usa. Un dito medio (ehm, nel senso di medie dimensioni) è molto più largo rispetto alla tanto amata freccina del mouse. E lo è ancor di più in rapporto alle dimensioni dello schermo di uno smartphone. Un’interfaccia per un dispositivo mobile richiede facilitazioni per selezionare un bottone o compilare un campo form. Occorre inoltre stabilire una dimensione minima delle aree funzionali e distanziarne gli elementi adeguatamente, affinché non vengano involontariamente selezionati. Spesso infatti, oltre che in un display piccolo e con mani grandi, il vostro servizio digitale verrà usato in condizioni disagevoli o di emergenza: avete mai provato a comprare un biglietto in una app mal progettata dopo essere già saliti sull’autobus all’ora di punta, schiacciati e accaldati ed in equilibrio a dir poco precario (non si fa, lo sappiamo)?

I cari vecchi menù con tutte le voci dell’enciclopedia britannica, su un dispositivo mobile non servono più a nulla. Chi ha il tempo di leggerli? Vi ricordate che non possiamo far comparire una tendina “quando ci passi sopra il mouse”, visto non abbiamo appunto più il mouse? Occorre quindi lavorare bene all’architettura dell’informazione semplificando il più possibile la navigazione. Addirittura possiamo pensare che la navigazione lineare (a, b, c) sia più efficace in certi contesti. Meglio ricorrere a diversi link interni alla pagina e subito disponibili e a delle call-to-action (insomma, i bottoni) molto ben evidenziate e autoevidenti , piuttosto che costringere l’utente a scovare il menu nascosto dietro l’icona del toast. O era un panino? Ah, ecco, l’hamburger (☰)!

5. Conoscere il sistema operativo e le sue convenzioni

Il browser è da sempre il peggior nemico dei designer (e degli sviluppatori di frontend). Il browser (specie quello le cui iniziali sono “IE”) è quel magico strumento che fa sì che la stessa cosa “da me si veda bene e da te faccia schifo”. Ma è la stessa cosa! ;-) I browser erano molto diversi, ma tutti avevano almeno un bottone: il nostro amato tasto “indietro”. Sapevi che ci potevi contare. Bene, ora non puoi dare per scontato nemmeno quello: in alcuni browser mobile, per ottimizzare lo spazio, il tasto indietro è sparito (o meglio, è nascosto, ma per alcuni utenti è lo stesso).

È solo un esempio per dimostrare come sia importante una conoscenza approfondita dei sistemi operativi mobili, delle loro specifiche funzioni e delle convenzioni di interfaccia che essi portano in dote.

L’utente interagisce in massima parte con applicazioni che già fanno parte del sistema operativo e quindi prende familiarità con quella interfaccia.

Dove possiamo lasciamo che l’utente si focalizzi sui contenuti e servizi che eroghiamo piuttosto che distrarlo con interfacce “originali”. So che noi designer siamo sempre convinti di avere una soluzione ineguagliabile e rivoluzionaria per riscaldare l’acqua o far rotolare qualcosa, ma forse è meglio concentrare gli sforzi su qualcos’altro, giusto?

6. Test, test, test

Qualunque software, preso singolarmente, ha un comportamento prevedibile. Ma le varianti dei dispositivi sono moltissime e quelle dei loro sistemi operativi lo sono forse ancora di più.

Occorre quindi predisporre test adatti, magari automatizzandoli con alcuni servizi e strumenti ad hoc (ad esempio Cross Browser Testing oppure BrowserStack ).

Ma se c’è qualcuno di davvero imprevedibile questi è senza dubbio l’utente. Quindi non appena ne avete la possibilità mettete la vostra applicazione in mano a dei veri utenti, osservate come la usano e se ne sono soddisfatti, e raccogliete i loro suggerimenti: sono spesso illuminanti e molto più competenti di quanto non sembri.

E vedrete, i vostri utenti saranno sempre felici di darvi una mano a migliorare: del resto non hanno ancora digerito la multa presa sull’autobus per colpa di quella maledetta app! ;-)

Originally published at designers.italia.it on January 17, 2018.