Progettiamo al telefono, non in Figma

La prima volta che si apre il mockup di Figma accuratamente progettato su un telefono reale, c'è sempre qualcosa che ci sorprende.

Il testo è più piccolo di quanto pensassi. Gli elementi su cui cliccare sono più vicini tra loro di quanto pensassi. L’intero layout sembra più affollato rispetto a come appariva sul monitor — perché sul monitor guardavi il design isolatamente. Sul telefono, invece, lo guardi insieme a tutto il resto che la tua mano sta facendo.

Continuiamo a utilizzare gli strumenti di progettazione. Sono utili per esplorare rapidamente le idee, confrontare le opzioni e garantire la coerenza dei componenti. Quello che non facciamo è considerarli come il luogo in cui un progetto viene approvato.

La nostra regola

Nessuna scelta di progettazione è definitiva finché non è stata testata su un telefono reale per almeno 48 ore. Non su un simulatore. Non riprodotta dallo schermo di un portatile. Un telefono, in mano, alla luce del giorno, in una stanza buia, in metropolitana, in tasca mentre lo schermo è spento e poi si riaccende.

Dopo quel test, la maggior parte delle decisioni cambia. I caratteri vengono ingranditi di una taglia. La spaziatura interna diventa leggermente più ampia. Quel tratto sottile ed elegante diventa un tratto di 2px perché quello di 1px non si legge bene alla fermata dell’autobus in pieno sole.

Come trasferiamo i disegni su un dispositivo

Il percorso più veloce è solitamente una versione grezza piuttosto che un prototipo rifinito. Una schermata con dati reali, caratteri reali e scorrimento reale ci dice di più di un mockup cliccabile perfetto, perché si comporta proprio come farà l’app. Per le piccole modifiche, le integriamo semplicemente in una versione di prova e la installiamo sui nostri telefoni lo stesso giorno.

I dati reali sono importanti tanto quanto il dispositivo stesso. Un prototipo con tre voci dal nome chiaro non dice nulla su cosa succede quando si ha a che fare con un elenco lungo, un nome molto lungo o, addirittura, quando non c’è ancora nulla. Per questo effettuiamo i test con contenuti disordinati: una lista di invitati con nomi scritti in diverse scritture, un viaggio con una dozzina di tappe, un giardino con piante aggiunte nel corso dei mesi.

Oltre il telefono

Lo stesso principio vale anche sulle nostre altre piattaforme. Le app Windows vengono testate sullo schermo di un normale laptop con il ridimensionamento standard, non solo su un monitor esterno di grandi dimensioni. Le estensioni per browser vengono testate in una barra degli strumenti reale, con i popup che si aprono su pagine web reali. Le app iPhone in esecuzione su un Mac vengono verificate in una finestra ridimensionabile. Ogni superficie presenta una propria versione del divario tra mockup e realtà.

Cosa insegna il telefono

Ti insegna l’umiltà. I progetti che sembravano sofisticati nello strumento di simulazione appaiono spogli o confusi sul dispositivo vero e proprio. I gesti che sembravano ingegnosi diventano scomodi quando provi a eseguirli con una sola mano. Le animazioni che sembravano fluide su un monitor ad alta frequenza di aggiornamento appaiono rallentate su un Android di tre anni fa.

Cosa abbiamo sbagliato

Un tempo rifinivamo i mockup alla perfezione prima ancora di provarli su un dispositivo, per poi passare giorni a difendere scelte che, una volta messe in pratica, si rivelavano chiaramente inadeguate. Quella rifinitura dava l’impressione che i progetti fossero definitivi, quando invece non lo erano. Ora manteniamo i mockup volutamente grezzi e li proviamo su un dispositivo il prima possibile, così cambiare idea non comporta grandi costi.

Il rovescio della medaglia è che le prime versioni sembrano incomplete, e ci vuole una certa disciplina per non giudicarle solo dall’aspetto. Ma correggere un layout nella prima settimana è di gran lunga meno costoso che correggerlo dopo il lancio.

Non è una cattiva notizia. È semplicemente la realtà concreta in cui si inserisce il tuo lavoro. Prima il tuo progetto si adegua a quella realtà, migliore sarà il risultato finale.