Mobile first: 15 suggerimenti per la progettazione del tuo sito mobile

Dic 1
sitomobile

Ormai non ci sono più dubbi, il futuro, ma anche il presente, è rappresentato dal mobile, statistiche e ricerche ce lo confermano continuamente.

Miliardi di persone ogni giorno si connettono ad Internet con i propri smartphone o tablet, questo ci aiuta a comprendere quanto sia fondamentale rivolgere agli utenti mobile la stessa cura e attenzione che fino a qualche anno fa venivano dedicati solo alla versione desktop dei nostri siti.

Per questo motivo oggi molti designer si sono spinti oltre la semplice progettazione di una versione mobile del sito, prendendo in considerazione la tecnica del Mobile First, divenuta famosa anche grazie al libro di Luke Wroblewski.

Ecco 15 suggerimenti che vi aiuteranno a progettare significative esperienze  mobile per i vostri utenti, un vero e proprio ribaltamento della prospettiva di lavoro, che vi stimolerà a partire dai limiti posti dai dispositivi più piccoli, per concentrarvi al meglio sui contenuti essenziali,ed infine arricchire il tutto sui dispositivi più capaci, man mano che aumentano le dimensioni dello schermo.

01 Analizzate il contesto d’uso

Riflettete sul modo in cui gli utenti utilizzeranno il vostro sito mobile e terranno in mano il dispositivo. Non tenete conto solo delle dimensioni dello schermo, ma anche dei contesti spaziali e temporali in cui viene utilizzato. Il picco dell’utilizzo dell’iPad a fini di intrattenimento può collocarsi tra le 20 e le 23, mentre l’iPhone può essere utilizzato in piedi alla fermata dell’autobus e al bar. Non dimenticate inoltre le distanza a cui gli utenti terranno il dispositivo.

02 L’utente al centro

Considerate il sito mobile sempre dal punto di vista dell’obiettivo dell’utente e aiutatelo a raggiungerlo in modo facile e intuitivo: non limitatevi a progettare nel modo più semplice dal punto di vista dello sviluppatore. Spesso un sito mobile è incentrato su un unico principio tecnico e l’interfaccia va progettata in funzione di tale principio.

03 Un design migliore

Nello sviluppare il sito, il vostro obiettivo deve essere quello di aggiungere complessità evitando complicazioni: si tratta di aggiungere livelli funzionali progressivi. Iniziate da uno scheletro ben definito, dalla struttura delle informazioni e dai pattern di interazione e mantenete costanti questi elementi: potrete così aggiungere funzioni secondarie senza compromettere il nucleo centrale del sito.

04 Centrare l’obiettivo

Un’interfaccia touchscreen può essere flessibile e intuitiva, ma non è perfetta. Concepite il vostro sito una schermata per volta. Concentratevi sull’obiettivo specifico di ogni schermata e riducete il minor numero possibile di opzioni, pulsanti, comandi necessari a rendere accessibile tale obiettivo all’utente.

05 Rispettate gli step della progettazione

Esaminate sulla carta il progetto iniziale e la struttura delle funzioni, servendovi dei diffusi stencil per iPhone e Android. Quando sarete pronti per passare alla fase successiva, strumenti come Balsamiq o Axure vi aiuteranno a creare modelli funzionanti del sito prima di trasferire tutto in Photoshop per definire l’aspetto finale.

06 Non sprecate lo spazio

Nella normalità, quando qualcosa ha un valore inestimabile, fate in modo di conservarlo. Ma quando si tratta dello spazio su schermo non dovete fare scorta, bensì utilizzarlo. Si vedono in giro fin troppi design che costringono contenuti importanti o pulsanti di azione in piccole aree, sprecando un’enormità di spazio. In ambito mobile lo spazio è così poco che sperperarlo è un peccato.

07 Dispositivi di input

Un dito è meno preciso del cursore del mouse e gli elementi interattivi di un’interfaccia touch devono lasciare un ampio margine di errore. Non collocate mai troppi comandi in un’unica area dello schermo molto vicini tra loro e assicuratevi che i pulsanti siano abbastanza grossi. Alcuni designer ancora sembrano non aver appreso la lezione e ci sono utenti incastrati nel cercare di fare tap su minuscole aree, molto più piccole delle loro dita. La sindrome del ‘dito grosso’ sarà nostra compagna per molti anni a venire.

08 Semplificate la vita dei vostri utenti

Molti utenti odiano compilare form sui device mobile utilizzando tastiere virtuali e sono molte le ragioni. Scrivere una email e un messaggio è diverso dall’inserire dati personali in un campo testo: le abbreviazioni e gli errori di scrittura hanno conseguenze trascurabili nei primi due casi, mentre possono contare molto nel terzo. Quindi rendete il form il più breve possibile e chiedete solo le informazioni fondamentali, evitate di far inserire più volte gli stessi dati, supportate il copia e incolla e attivate la pre-compilazione automatica.

sitomobile_1

09 Non tradite gli standard

Spesso gli utenti si aspettano che i software abbiano un aspetto e un funzionamento specifico. Per esempio non utilizzate il gesto del pizzico se non per zoomare, ridimensionare o espandere altrimenti quasi sicuramente finirete per confondere i vostri utenti.

10 Schermi piccoli e visuale ridotta

Leggere attraverso uno spioncino accresce il carico cognitivo e rende due volte più difficile comprendere il testo su un dispositivo mobile. É vero, le persone leggono romanzi su kindle, ma sono principalmente storie di fantasia con una trama lineare e semplice da seguire. Leggere articoli di economia o altro richiede un maggiore livello di concentrazione.

11 Progettate esperienze su misura

Se volete dare il meglio ai vostri utenti, dovrete progettare esperienze diverse per ciascun tipo di device: più lo schermo è piccolo, meno saranno le funzioni e gli elementi che compongono il design. La vostra IA dovrebbe sempre avere una struttura semplice che eviti una gerarchia eccessivamente profonda. Quando si progetta un sito mobile le funzioni a disposizione devono essere solo quelle pensate espressamente per un uso in mobilità.

12 Less is more

Riducete tutto ciò che è secondario. Non ci sono alternative, in ambito mobile il contenuto meno importante deve essere spostato in pagine secondarie o addirittura eliminato. Per ogni funzione rimossa, si evita una possibilità di confondere l’utente, e tutto ciò che rimane è più semplice da utilizzare.

13 Alleggerire il carico della memoria

Gli schermi dei device mobile sono molto piccoli e questo rende impegnative tutte le interazioni più difficili. Evitate finestre multiple o altre soluzioni che supportino comportamenti avanzati, come la ricerca comparativa di prodotto per non rischiare di sovraccaricare la memoria a breve termine dell’utente di per se molto debole.  

14 Pensate in grande

Se volete creare una splendida interfaccia, puntate al dispositivo di livello massimo. Sfruttate cioè a vostro vantaggio il display retina utilizzando texture, particolari e sfumature, per poi ridurli progressivamente nelle versioni per altri dispositivi.

15 Buona la prima non esiste

Anche il progettista più geniale non può realizzare l’interfaccia perfetta in un colpo solo e, ammettiamolo, nemmeno noi possiamo. Design iterativo e test con gli utenti sono fondamentali. unSe non avete budget per uno user test professionale, a volta preparato un prototipo funzionante su un dispositivo, offrite un caffè al bar a degli sconosciuti in cambio di un test informale di 10 minuti!

Alexandra Frigieri

Alexandra Frigieri

Analyst e content editor at Polk&Union
Laureata in Comunicazione digitale alla Sapienza di Roma, ha lavorato come social media specialist. In Polk&Union è marketing assistant, associate editor e analista responsabile dell'area web intelligence.
Alexandra Frigieri