Come è nato April Zero

Come è nato April Zero

Parte 1

Questo è il primo capitolo di come ho disegnato il sito originale di April Zero. Condividerò qualche schizzo, dei concept scartati e vecchi prototipi per raccontare come si è evoluto lungo la strada.

Se ti interessa usarlo anche tu, ora puoi iscriverti a Gyroscope.

Marzo 2014: l’ispirazione

Muoviti

Stavo per andare a Parigi con il mio coinquilino. È un fotografo appassionato e di solito, quando andiamo da qualche parte, costruisce un minisito sul nostro viaggio, pieno di belle foto e video a tutto schermo. Il precedente raccontava la nostra avventura in Giappone.

Era sempre bello tornarci qualche mese dopo e rileggere la cronaca dettagliata di quello che avevamo fatto, con foto e video bellissimi di ogni passo del viaggio.

Per quel viaggio decidemmo di usare l’app Moves per tenere traccia di ogni posto in cui andavamo. La installai mentre ero in fila ai controlli a SFO, senza immaginare che fosse l’inizio di quella che sarebbe presto diventata un’ossessione.

Qualcuno avrà provato Moves o app simili in passato e avrà avuto problemi con la batteria. Per molto tempo qualsiasi app basata sul GPS o sul movimento (Nike, Find My Friends, Highlight e così via) era terribile, perché ti prosciugava la batteria all’istante. Poi uscì l’iPhone 5S. Ma con le voci che impazzavano sul futuro iWatch, l’uscita rivoluzionaria del processore M7 di Apple passò inosservata a quasi tutti, me compreso.

All’improvviso era possibile fare moltissime cose con un impatto minimo sulla batteria. All’improvviso c’era una quantità enorme di contenuti disponibili in tempo reale. All’improvviso un’intera generazione di dispositivi per il fitness diventava obsoleta. I problemi hardware diventavano semplici problemi software. Moves fu una delle poche app a sfruttarlo davvero.

Battiti

Più o meno nello stesso periodo qualcuno mi parlò di un’app che si chiamava Cardiio e leggeva la frequenza cardiaca con la fotocamera dell’iPhone. La scaricai soprattutto perché non credevo che funzionasse. Di quanto spesso battesse il mio cuore non mi importava proprio nulla.

Ma dopo qualche giorno che ci giocavo ero ossessionato. La cosa bella era che bastavano circa 15 secondi per avere una misurazione, forse 30 contando il tempo per tirare fuori il telefono dalla tasca, sbloccarlo e aprire l’app.

Quello che mi prese davvero fu scoprire che gli atleti ben allenati hanno di solito una frequenza cardiaca a riposo più bassa. Più basso era meglio. Era un modo facilissimo per avere una misura oggettiva del mio stato del momento. Ed era divertente.

Una settimana notai che la mia frequenza era stranamente alta, vicino a 80 o 90 quando di solito era intorno a 60. Ero stressato per qualcosa? Andai a fare una lunga corsa e il giorno dopo ricontrollai. Di nuovo 60. Affascinante…

Era come avere installato New Relic dentro il corpo. Ero abituato a guardare i grafici e a sistemare le cose. Solo che stavolta, invece di un server, si trattava del mio corpo.

Corri per la tua vita

Il mio hobby precedente era l’arrampicata indoor. Abitavo a un paio di isolati da Mission Cliffs e andare a fare bouldering lì era diventata la mia routine serale. È però uno sport piuttosto duro e presto mi ritrovai con una serie di infortuni alle spalle.

Iniziai a correre. Stavo superando la fine di una storia importante ed era un ottimo modo per farci i conti. In passato avevo usato ogni tanto l’app di Nike per correre, un miglio qua e là, ma senza mai accumulare chilometraggi seri. L’app con il GPS mi uccideva la batteria, quindi non era granché piacevole da usare.

Ora invece, con l’M7, le ginocchia mi avrebbero mollato molto prima del telefono. Cose come i sofisticati orologi Garmin da corsa o i Fitbit a cui stavo pensando non servivano più. È facile trovare scuse dicendo che manca qualche strumento fondamentale, ma tutto quello che mi serviva era già in tasca.

Pubblicare le foto delle mie corse su Instagram mi teneva motivato e mi faceva correre con regolarità, una volta iniziato. Avevano un sistema semplice per sovrapporre a una foto la mappa, la distanza e il logo Nike. Metterla su Instagram con l’hashtag #nikeplus garantiva un sacco di like da altri runner di tutto il mondo.

Univa tre delle mie passioni: correre, la fotografia e attirare l’attenzione. Era geniale. Era un gran bel momento per essere un runner: tra Runkeeper, Strava, Nike e gli altri, di strumenti e community fantastiche ce n’erano parecchi.

Vedere tutti i dati di ogni corsa mi dava qualcosa da ottimizzare e in cui migliorare. Ora potevo darmi sfide e obiettivi.

Ma quasi nient’altro aveva un ecosistema simile. Volevo questo tipo di informazioni e di motivazione per ogni aspetto della mia vita, non solo per la corsa. In fondo erano solo analytics. Di analytics ne avevo già costruiti. Era ora di iniziare a fare schizzi.

Valori del sangue

Ero in ritardo con la visita annuale. Feci tutti gli esami standard e chiesi anche che mi mandassero via email una copia delle analisi del sangue, per il mio archivio.

La settimana dopo ricevetti un PDF davvero completo. Non c’erano solo i miei valori del momento, ma anche la spiegazione degli intervalli ideali per ciascuno e un’analisi della mia situazione. Fui sorpreso di vedere la vitamina D così bassa, e altre cose fuori dagli intervalli ideali. Erano dati davvero straordinari, ma bloccati in un allegato PDF di testo nella mia casella di posta. Meritavano molto di più.

Da allora faccio le analisi del sangue ogni mese e tengo d’occhio i cambiamenti. Metterle in una dashboard sarebbe stato un promemoria costante di cosa dovevo provare a migliorare. Puntavo sulla mia teoria che il semplice fatto di misurare le cose me le avrebbe fatte migliorare. E se non avesse funzionato, almeno lo avrei saputo e avrei potuto impegnarmi di più.

Grasso corporeo

In Il corpo da 4 ore, Tim Ferriss parla dei vari aggeggi e test che usava per monitorarsi. Uno era un ecografo portatile USB per misurare con precisione la percentuale di grasso corporeo. Mi pesavo già, ma conoscere la percentuale di grasso mi avrebbe fatto capire molto meglio cosa stava cambiando.

Il procedimento con l’ecografo è un po’ scomodo, richiede qualche minuto e serve un gel apposito, ma scoprii che i dati che produceva erano davvero accurati e affascinanti da vedere ogni giorno. Potevi letteralmente guardare dentro il tuo corpo, fino a quanti millimetri di grasso, muscolo e osso avevi sotto.

Vedevo il grasso corporeo schizzare in alto nel weekend dopo epici giorni di sgarro, e poi scendere ancora più in basso la settimana successiva. I dati che ottenevo erano ottimi, l’interfaccia e la presentazione dell’app molto meno.

Volevo vedere come si legava a tutto il resto di quello che facevo.

Credevo anche all’idea che il solo fatto di misurare qualcosa ti porta a migliorarla. Conoscere lo stato attuale e la velocità del cambiamento ti permette di prendere decisioni migliori, di iterare in fretta e di capire cosa funziona davvero e cosa no. Senza strumentare tutto quello che ti sta a cuore stai sostanzialmente volando alla cieca.

Capii che dovevo trovare il giusto equilibrio tra misurazioni facili e frequenti come la frequenza cardiaca e il peso e dati più fastidiosi ma più profondi come il grasso corporeo e i valori del sangue. Insieme avrebbero formato una dashboard davvero buona e raccontato una storia completa. Scommetto anche sul fatto che la tecnologia migliorerà in fretta, soprattutto quando queste cose diventeranno più popolari e la domanda crescerà. Se esce la versione con microchip impiantato su Kickstarter, o se Apple inizia a monitorarlo con l’Apple Watch, dovrò solo cambiare qualche riga di codice.

Aprile 2014: le prime bozze

Una griglia di dati

Mi piaceva l’idea e la semplicità di questo design a moduli, con una bella griglia ed elementi modulari da migliorare in seguito. Quasi tutti potevano essere automatizzati al 100% dalle API, e quelli manuali come la mia ultima arrampicata avrebbero richiesto solo pochi minuti.

Anche se fossi diventato pigro o pienissimo di impegni, il sito non sarebbe comunque invecchiato. Avrei continuato a correre, ad ascoltare musica o a pubblicare nuove foto su Instagram!

L’importanza dello schizzo

Passo la maggior parte delle prime fasi di un progetto solo a disegnare schizzi e a pensare. Che stia creando design o scrivendo codice, buttare giù le cose a matita mi permette di pensare con più chiarezza.

Lavorare con gli schizzi su carta è potente perché ti permette di andare veloce. È probabilmente l’unico mezzo con cui puoi registrare le idee alla stessa velocità con cui arrivano. Ti permette di metterti davanti delle opzioni visive invece che solo pensieri in testa, e quindi di prendere decisioni di design più informate. Spesso mettere due opzioni su carta, anche nella forma più grezza, rende evidente quale sia la migliore.

Tavoletta Wacom

Dopo la carta, buttai giù in fretta questa idea in Photoshop per assicurarmi che avesse senso anche in un contesto digitale. Molti design sembrano buoni su carta come piccole miniature, ma poi non funzionano una volta digitalizzati. C’è qualcosa nello stile degli schizzi che riesce a far sembrare elegante e raffinata anche un’idea pessima. Lavorando su lavagna o su carta è facilissimo barare sulle proporzioni e far entrare il testo dove non ci starebbe, o far occupare agli elementi molto più spazio di quanto ne riempiano davvero.

A volte mi piace mantenere uno stile da schizzo per i primi mockup. Ti permette di continuare a ragionare come se fossi su carta e di lavorare su una variabile alla volta. Visto che layout e contenuti erano appena stati definiti, ora potevo aggiungere il colore e verificare che contrasto e proporzioni avessero ancora senso. Texture, tipografia, immagini di sfondo e altri dettagli che richiedono tempo sarebbero arrivati dopo, se il progetto avesse avuto il via libera.

Questa versione mi sembrava piuttosto valida, così la mandai a qualche amico. Erano parecchio entusiasti, quindi continuai a lavorare in Photoshop per creare mockup più realistici. C’era del potenziale.

Passai qualche altro giorno a rifinire i dettagli e a provare variazioni. Ero molto entusiasta dei contenuti e dell’architettura dell’informazione, sempre le cose più importanti, ma lo stile e il layout non mi toglievano il fiato ogni volta che li guardavo.

Era un design solido e utilizzabile, ma non il migliore del mondo.

La styleguide di April Zero

Questo era il futuro. La possibilità di analizzare e condividere come per magia ogni cosa di te stesso è più o meno fantastica quanto il volo umano o l’elettricità. Volevo che desse la stessa sensazione di futuro che aveva davvero.

Quando costruisco un brand di solito metto insieme una moodboard per prototipare in fretta vari stili e capire quali elementi servono a trasmettere quell’atmosfera. I pezzi possono essere qualsiasi cosa: spezzoni di film, foto, cartelloni pubblicitari, screenshot di altre app e così via. Traggo spesso molta ispirazione dal motion design e dalla pubblicità, che hanno budget grandi e artisti straordinari alle spalle. E su Dribbble e Behance c’è tantissima roba bellissima.

Ci sono molti esempi di interfacce olografiche fantastiche e di cose dal sapore futuristico, ma dovevo restringere il campo a un sottoinsieme più preciso. Come per quasi tutte le decisioni della mia vita, mi chiesi: cosa farebbe Tony Stark?

Alcuni elementi ricorrenti che notai erano: sovrapposizioni olografiche, cerchi concentrici, prospettiva isometrica & linee sottili. Portarli dentro un prodotto senza sacrificare l’usabilità sarebbe stato difficile, ma era un ottimo punto di partenza.

Ora che avevo ristretto sia i contenuti sia lo stile, era ora di tornare al tavolo da disegno…

Versione 2

Volevo mantenere la modularità e l’architettura di prima, ma senza un layout così noioso. Decisi di dividere tutto in “mini-app” per presentare i dati intorno a temi specifici. Le prime due si sarebbero potute chiamare “Sport” ed “Explorer”.

Restringere ogni sezione a un unico contesto avrebbe permesso di costruire un racconto coerente, invece di scaraventare addosso al visitatore un mucchio di numeri e statistiche.

E in futuro avrei potuto pubblicare nuove sezioni senza dover ricostruire quelle esistenti. Qualche esempio di altre cose che mi entusiasmavano:

“Aviazione”, registrare ogni volo mentre lavoravo al brevetto da pilota

“Sott’acqua”, registrare le immersioni mentre prendevo il brevetto da sub

“Digitale”, cosa facevo quando ero al computer (design, codice, screencast e così via)

“Finanza” , abitudini di spesa, barra di avanzamento verso il primo miliardo

“Amore”, quantificare la mia vita sentimentale e così via

Forse qualcosa avrebbe avuto bisogno di una password…

Disegnare Sport

La sezione Sport avrebbe contenuto tutto quello che riguardava fitness e salute, mostrando i valori del sangue del momento e i miglioramenti nel tempo.

La prima versione era un feed con i diversi tipi di attività. Mi piaceva molto come venivano mostrati i valori del sangue, ma sentivo che il feed era troppo difficile da leggere al volo. Vedevo solo gli ultimi eventi, e questo non dava una buona visione d’insieme.

Volevo poter vedere un anno di dati a colpo d’occhio. Per riuscirci mi servivano più dati aggregati e tutto doveva diventare più compatto.

Questo layout era migliore, ma non sembrava molto avanzato. Era un problema risolvibile in fase di sviluppo, aggiungendo qualche animazione discreta e curando i dettagli.

Questa era la versione statica già in codice. Le colonne laterali più scure danno un po’ più di contrasto e la legano alla homepage spostando di lato la colonna dei contenuti.

Volevo che tutto fosse esplorabile e interattivo. Passandoci sopra il mouse avresti scoperto altri dettagli: sotto il cofano c’erano un sacco di dati che si potevano rivelare.

Lo spinner

Uno schema che avevo notato guardando gli analytics dei siti precedenti è che quasi tutti aprono una pagina o due e poi se ne vanno. Anche se c’è un mondo intero di contenuti bellissimi, quasi nessun visitatore ci arriva. Cliccare su qualcosa è un impegno, ed esplorare a fondo ogni sezione non si fa.

Volevo creare un nuovo tipo di interfaccia, in cui all’inizio non dovevi impegnarti a cliccare niente ma potevi solo muovere il mouse ed esplorare, con micro-interazioni leggere, facili e divertenti.

E così nacque questo spinner. Volevo creare qualcosa di divertente e rivoluzionario come l’iPod originale.

Permetteva anche di allontanarsi dai layout rettangolari e noiosi. La moodboard era piena di elementi circolari e in movimento, e questo avrebbe fatto vivere quei dettagli in modo naturale dentro l’interfaccia.

Quando ebbi un mockup che mi entusiasmava abbastanza, era ora di iniziare a scrivere codice! Avevo già una base Jekyll di un precedente esperimento con un blog. Creai un nuovo branch e iniziai a programmare lo spinner.

I primi prototipi in codice

Questo è un buon esempio di situazione in cui è molto utile affrontare un problema sia dal design & sia dal codice. Che la pagina fosse bella da vedere era importante, ma capire come si sentiva & come si muoveva lo era altrettanto. Per farlo misi insieme un prototipo di base con un po’ di Javascript leggero, dentro il container Jekyll che all’inizio dovevo usare per il blog.

La prima versione non era granché. La Versione 1 (qui sopra) era molto rudimentale. Far girare e allineare bene ogni cosa era un po’ complicato, quindi mentre la costruivo e la correggevo usavo cerchi di colori accesi.

La Versione 3 (qui sotto) aggiunse gli anelli e il javascript per altre interazioni, come la rotazione del cerchio quando passavi sopra il testo.

La Versione 5 aggiunse un’animazione di apertura, più impegnativa di quanto mi aspettassi visto che cercavo di far girare transizioni su elementi che erano già in animazione.

La Versione 8 introdusse un’animazione di uscita con impostazioni diverse da quella di apertura, così cliccare su qualcosa dava più soddisfazione.

Ogni iterazione risolveva un problema preciso o aggiungeva una funzione per renderlo un po’ migliore. Fui piacevolmente sorpreso da quanto stesse diventando divertente da usare. Confermava la mia idea che qui ci fosse qualcosa su cui valeva la pena investire tempo. Con qualche miglioria e qualche dettaglio di design in più, poteva diventare un’esperienza fantastica.

E così continuai a lavorarci, passando ore al giorno a ricaricare la pagina e a cercare di rendere le animazioni più fluide, più interessanti, meglio ritmate.

Mi stavo divertendo, ma mi serviva più conferma per essere sicuro che non ci fossero problemi di design. All’epoca lavoravo in vari bar, così reclutai qualche sconosciuto per fargli provare il sito.

Non davo nessuna istruzione a parte “prova a usarlo” e gli passavo il portatile, guardando con attenzione cosa facevano. Notai qualche problema, per lo più legato ai click su parti dell’interfaccia che non erano link. Allargai in fretta le aree cliccabili per includere i punti su cui sbagliavano più spesso e aggiunsi qualche effetto al passaggio del mouse per rendere più evidente che erano cliccabili. Presto i miei volontari non avevano più difficoltà a navigare o a capire il sito.

Si rivelò intuitivo come speravo. Cosa ancora più importante, sembravano divertirsi davvero a girare con il mouse e a cliccare sulle sezioni, un po’ sorpresi ed entusiasti di tutte le animazioni che facevano partire.

Soddisfatto del design di fondo della homepage, era ora di affrontare la parte del sito che mi spaventava di più.

Explorer

Stavano per entrare in scena un bel po’ di problemi tecnici. Le sezioni precedenti erano abbastanza facili da schizzare e da simulare in Photoshop con dati di base, ma per questa mi servivano contenuti veri. Creai una chiave API e iniziai a importare i miei dati da Moves.

Dopo qualche settimana a San Francisco capii che mi serviva una serie di dati più varia con cui lavorare. Così presi il Macbook e il passaporto e partii per New York a fare ricerca. Se volevo trasmettere quella sensazione in questa sezione, dovevo entrare davvero nella mentalità dell’esplorazione e dell’avventura.

Ora dovevo capire come mostrare i voli, i cambi di fuso orario, le corse a Central Park e il conteggio di quanta pizza avevo mangiato. Fu un’ottima cosa esserci andato, perché incontrai subito parecchi problemi su come Moves gestiva i fusi orari, di cui dovevo tenere conto. Se fossi rimasto a San Francisco affidandomi ai vecchi dati di Parigi per i test internazionali, sarebbe esploso tutto la volta successiva che avessi attraversato un fuso.

Sul volo di ritorno iniziai a elaborare tutti i dati di Moves e a disporli in una timeline di base. Era un guazzabuglio quasi illeggibile, ma funzionava con i dati veri del mio viaggio!

Una delle scelte di design più importanti fu di rendere le timeline orizzontali, con i giorni impilati uno sopra l’altro.

Quasi tutti gli altri design simili le disponevano in verticale, evitando comodamente il problema di sovrapposizione del testo che avevo io. Ma per me la possibilità di vedere tutti i giorni a confronto era essenziale. Volevo che ogni giorno fosse un asse capace di contenere in futuro tanti dati ricchi. Il problema di mostrare le etichette andava risolto in un altro modo.

Iniziai a giocare con un algoritmo per sfalsare bene le etichette su 4 livelli. Analizzava la differenza di tempo tra un posto e l’altro e si assicurava che ci fosse sempre spazio a sufficienza per far comparire il testo.

La Versione 9 era su sfondo chiaro, ma con la Versione 10 passai a uno sfondo scuro per far risaltare di più i luoghi e per stare in linea con lo stile del resto del sito.

Decisi di mostrare all’inizio solo i luoghi significativi, e che passandoci sopra si sarebbero visti più dettagli del giorno e sarebbe comparso il testo più piccolo. Ridimensionai anche il peso visivo dei luoghi ricorrenti come casa o gli hotel, perché non erano interessanti quanto gli altri pur avendo molto più tempo trascorso.

Poi un giorno decisi di lavorare all’aperto, al parco. In fondo la sezione si chiamava Explorer.

E… non riuscivo a leggere niente.

La versione originale con lo sfondo bianco andava benissimo, ma quella nuova con lo schema scuro migliorato era del tutto inutilizzabile alla luce del sole.

Ecco perché usare il proprio prodotto nel contesto reale è estremamente importante. Più ne sei distante, anche in modi che sembrano insignificanti, più è probabile farsi cogliere di sorpresa o avere difetti di design. È per questo che mi piace lavorare sugli aerei, nei bar, a testa in giù e in altri modi che possono attirare sguardi strani. Ti apre la mente a prospettive diverse e fa emergere problemi che altrimenti passerebbero inosservati.

Ora dovevo decidere: tenevo il tema scuro perché era quello che stava meglio al chiuso per il 95% delle persone, o aveva senso rifare tutto in chiaro? Se era capitato a me, poteva capitare a qualcun altro o, cosa più importante, poteva ricapitare a me.

A volte, quando ti blocchi o incontri un ostacolo, devi solo andare avanti e forzare, buttando ore sul problema finché non si risolve. Altre volte è meglio cambiare marcia e affrontarlo da un’angolazione diversa. Feci una versione scura (11) e una chiara (12) per l’archivio e decisi di passare ad altri problemi.

Rappresentare i viaggi

La prima versione metteva viaggi e luoghi sulla stessa linea. Volevo provare a renderlo più intuitivo, rappresentando invece gli spostamenti da un punto all’altro come salti.

Statistiche aggregate

Volevo tenere la mappa del mondo in alto con la mia posizione del momento, ma anche aggiungere statistiche complessive alla pagina, per dare un riassunto veloce senza dover scorrere 30 timeline. Decisi di aggiungere un altro livello di struttura e di dividere tutto in mesi. Ogni mese avrebbe avuto le sue statistiche e si sarebbero potuti confrontare tra loro.

Era affascinante vedere come cambiavano le mie abitudini di mese in mese: certi mesi li passavo a viaggiare e negli aeroporti, altre volte andavo molto ad arrampicare o passavo quasi tutta la giornata nei bar. I ristoranti italiani crollarono in fretta appena tornai da New York, sostituiti dai burrito.

Diventare responsive

Quando iniziai a lavorare alla versione responsive le cose presero una brutta piega. La timeline orizzontale che funzionava benissimo su desktop non ci stava su uno schermo piccolo. Doveva diventare verticale, ma non volevo sacrificare le funzionalità di tutto il sito solo per l’implementazione mobile. Iniziai a rifattorizzare il codice per far girare entrambi gli orientamenti e passare in modo fluido dall’uno all’altro quando lo schermo cambiava dimensione.

Il codice per avere una versione mobile separata senza rovinare il desktop funzionava. Ora potevo iniziare a disegnare per il mobile da zero, invece di provare a stipare la versione grande in uno spazio piccolo.

Mi stavo stancando di giocare sempre con gli stessi dati. Il design stava venendo bene, ma mancava ancora qualcosa. Mi serviva un cambio di scenario e una prospettiva nuova.

Stavo lavorando in un bar (il Coffee Bar, il 6 maggio) quando mi scrisse un amico.

Tempismo perfetto.