La prima volta che si apre il mockup di Figma accuratamente progettato su un telefono reale, c'\u00e8 sempre qualcosa che ci sorprende.<\/p>\n
Il testo \u00e8 pi\u00f9 piccolo di quanto pensassi. Gli elementi su cui cliccare sono pi\u00f9 vicini tra loro di quanto pensassi. L\u2019intero layout sembra pi\u00f9 affollato rispetto a come appariva sul monitor \u2014 perch\u00e9 sul monitor guardavi il design isolatamente. Sul telefono, invece, lo guardi insieme a tutto il resto che la tua mano sta facendo.<\/p>\n
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 \u00e8 considerarli come il luogo in cui un progetto viene approvato.<\/p>\n
Nessuna scelta di progettazione \u00e8 definitiva finch\u00e9 non \u00e8 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 \u00e8 spento e poi si riaccende.<\/p>\n
Dopo quel test, la maggior parte delle decisioni cambia. I caratteri vengono ingranditi di una taglia. La spaziatura interna diventa leggermente pi\u00f9 ampia. Quel tratto sottile ed elegante diventa un tratto di 2px perch\u00e9 quello di 1px non si legge bene alla fermata dell\u2019autobus in pieno sole.<\/p>\n
Il percorso pi\u00f9 veloce \u00e8 solitamente una versione grezza piuttosto che un prototipo rifinito. Una schermata con dati reali, caratteri reali e scorrimento reale ci dice di pi\u00f9 di un mockup cliccabile perfetto, perch\u00e9 si comporta proprio come far\u00e0 l\u2019app. Per le piccole modifiche, le integriamo semplicemente in una versione di prova e la installiamo sui nostri telefoni lo stesso giorno.<\/p>\n
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\u2019\u00e8 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.<\/p>\n
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\u00e0.<\/p>\n
Ti insegna l\u2019umilt\u00e0. 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.<\/p>\n
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\u2019impressione 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\u00ec cambiare idea non comporta grandi costi.<\/p>\n
Il rovescio della medaglia \u00e8 che le prime versioni sembrano incomplete, e ci vuole una certa disciplina per non giudicarle solo dall\u2019aspetto. Ma correggere un layout nella prima settimana \u00e8 di gran lunga meno costoso che correggerlo dopo il lancio.<\/p>\n
Non \u00e8 una cattiva notizia. \u00c8 semplicemente la realt\u00e0 concreta in cui si inserisce il tuo lavoro. Prima il tuo progetto si adegua a quella realt\u00e0, migliore sar\u00e0 il risultato finale.<\/p>","protected":false},"excerpt":{"rendered":"
Figma makes things look good on a 27-inch monitor. Phones are not 27-inch monitors. Here’s what actually happens when you test on a real device.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-449","post","type-post","status-publish","format-standard","hentry","category-journal"],"yoast_head":"\n