Progetto personale · app mobile

Volée

La libreria di combo aeree: cerca per livello, salva, allena. Trenta schermate, quattro flussi, un prototipo che si tocca.

Quattro delle trenta schermate: il feed, lo studio del video sull’attrezzo, i preferiti scaricati, la pubblicazione.

Prima di leggere

Provala.

Trenta schermate vere e 152 punti attivi: si apre, si filtra, si cerca, si carica un video. Il racconto di come ci sono arrivata comincia sotto, ma la cosa da guardare è questa, ed è meglio guardarla prima.

A schermo intero: volee-prototipo.netlify.app

01

Da dove nasce

Faccio acrobatica aerea da meno di un anno, ma quasi ogni giorno, due o tre ore alla volta. Il problema l’ho avuto molto prima di riconoscerlo come problema.

Torni a casa con in testa mezza combo e la sera provi a ritrovarla: un video salvato che non ritrovi più, uno mandato nel gruppo del corso mesi fa, una figura che sai fare ma di cui non ricordi il nome. Non è che manchino i video, ce ne sono migliaia. Manca che siano ordinati per come si allena: per attrezzo, e soprattutto per livello. Un video bellissimo che non puoi ancora fare non ti serve, e uno che potresti fare ma che non trovi è come se non esistesse.

A quel ritmo di allenamento la cosa smette di essere un fastidio e diventa tempo perso ogni sera.

La palestra da cui nasce il progetto. Sotto gli attrezzi non ci sono reti ma tappetoni: si vola a pochi metri da terra, e proprio per questo sbagliare livello non è una delusione, è un infortunio.
02

Il problema

Ne ho parlato con chi si allena con me e con chi insegna, e ho guardato dove finiscono oggi i video: Instagram, TikTok, i gruppi chiusi, le cartelle nella galleria del telefono. Accanto ho messo le piattaforme a pagamento dei singoli insegnanti, che sono l’unica cosa davvero organizzata per livello, ma restano cataloghi chiusi di una persona sola.

Due frasi, dette a distanza di giorni da due persone diverse, dicono lo stesso problema da due lati.

«Cerco su Instagram le combo per i vari corsi, ma a volte non capisco nemmeno io alcuni dei passaggi.»Chi insegna
«Su Instagram mi compaiono nel feed delle combo fighissime, che però non so se rientrano nelle mie capacità.»Chi frequenta il corso

Sono le due metà della stessa cosa. Chi insegna non riesce a leggere i passaggi dentro un video girato per fare colpo; chi impara non riesce a leggere la difficoltà. Il feed dei social risponde a una domanda che nessuna delle due sta facendo: non «cosa è bello», ma «cosa posso fare io, oggi, e come è fatto dentro».

Da lì escono le tre condizioni che il progetto deve rispettare. Il momento in cui il video serve non è sul divano, è in palestra, sotto l’attrezzo, con la lezione che va avanti. Lì la rete non prende. E nessuno cerca un video: si cerca una figura con un nome, e quel nome cambia da palestra a palestra.

Il feed di apertura: niente follow e niente classifiche. L’attrezzo in alto funziona da interruttore, e sotto c’è tutto quello che la community ha caricato, dal più recente.
Mappa dell'architettura dell'informazione
Quattro zone e mai oltre il terzo livello di profondità: da qualunque punto, il video è a due tocchi.
03

Le cinque decisioni

Le cinque volte in cui il progetto poteva prendere due strade. Per ognuna: la domanda, cosa ho provato, cosa ho scelto, perché.

Un livello per video, o due?

provato«Da L1 a L2», per i video che iniziano facili e finiscono difficili.

sceltoUn livello solo, quello del pezzo più difficile. E il livello è per attrezzo: un L2 al cerchio non è un L2 ai tessuti.

perchéUn video «da L1 a L2» compare in due caselle e non è vero in nessuna delle due. Il livello per attrezzo ha poi una conseguenza che non avevo previsto: se non hai scelto l’attrezzo, filtrare per livello non significa niente. Per questo il livello non sta nel pannello dei filtri, ma compare in una riga rapida solo dopo che l’attrezzo è stato scelto.

La riga dei livelli esiste solo qui, sotto l’attrezzo scelto.

Like e commenti: dentro o fuori?

provatoIl pacchetto standard: cuore, commenti, conteggi in vista.

sceltoFuori. Restano i salvataggi, e non si vedono: servono a ordinare il feed, non a fare classifica.

perchéChi carica qui è chi frequenta il corso, col telefono in mano, non un creator. Un conteggio pubblico sotto il video decide chi carica il secondo. Togliendo il numero resta il segnale, cioè che quel video qualcuno lo sta usando, senza il costo di esporsi.

Nel dettaglio non c’è un solo numero: il video, i dati che servono, e chi l’ha caricato.

Che si fa con chi filma in orizzontale?

provatoAccettare entrambi i formati, con le bande nere sui video orizzontali.

sceltoSolo verticale, dichiarato prima di scegliere il file, con il taglio a 9:16 nello stesso passo del trim.

perchéCon due formati il feed va a due velocità e le anteprime smettono di essere confrontabili. Ma respingere chi ha già girato è il modo più rapido per non farlo tornare: così il vincolo si dice all’inizio e si risolve subito dopo, nella stessa schermata.

Il vincolo è scritto, e sotto c’è già il riquadro per ritagliare invece di un messaggio d’errore.

La ricerca è un posto, o è uno stato?

provatoUna schermata di ricerca a sé, coi suoi risultati, staccata dal feed.

sceltoLa ricerca è un filtro sul feed: la parola cercata diventa un chip che si somma ad attrezzo e livello.

perchéNella schermata separata la ricerca perdeva i filtri già attivi, e chi cercava «chiave d’anca» dopo aver scelto Tessuti e livello 2 doveva rifare tutto. Come stato, invece, le due cose si sommano, che era la promessa fatta all’inizio.

Prima · un posto

Dopo · uno stato

A destra la parola cercata è diventata un chip in fila con gli altri filtri: «Tessuti» resta acceso e l’ordinamento passa a rilevanza.

Cosa dice una schermata vuota?

provatoUn messaggio unico e gentile per tutti i casi: «Nessun risultato».

sceltoUn componente, tre testi. Il testo nomina la causa e offre di togliere l’ultimo vincolo messo.

perchéC’è un caso in cui il messaggio unico è una bugia: i video per quella parola esistono, sono i filtri a tagliarli. Dire «niente per chiave d’anca» manderebbe via una persona che era a un tocco dal risultato.

Stesso componente, tre cause diverse: la casella è ancora vuota, la parola non esiste nemmeno con gli alias, i video ci sono ma li stanno tagliando i filtri.
04

Il marchio

Tre giri di simboli, buttati tutti e tre. Il primo erano figure umane stilizzate. Il secondo, figure umane fatte meglio. Il terzo, una figura ricalcata da una posa vera, per uscire dal generico.

Alla fine del terzo ho capito che il problema non era che la figura fosse generica: era che fosse una figura. Una silhouette umana in poche linee legge «omino» a qualunque fedeltà, e a 34 pixel diventa un cartello stradale. Non è un limite di esecuzione, è un limite della categoria, e ricalcare da una posa vera non lo salva.

Il pezzo che mancava non era il soggetto, era il tratto. I riferimenti che mi attiravano avevano tutti la stessa qualità: una linea continua a spessore variabile, che si ingrossa dove porta il peso e si assottiglia dove è solo aria. Rifatto così, il segno ha smesso di essere una figura ed è diventato un movimento. Due linee che nascono insieme, si scambiano di posto una volta e scendono: il tessuto attorcigliato, senza il corpo.

Prima tavola: dodici segni
Il primo giro, dodici segni in tre famiglie. Due erano già occupati da caratteri che esistono, il bemolle e la corona musicale: un marchio che coincide con un carattere Unicode non è difendibile.
Terza tavola: il tratto calligrafico
Il giro in cui cambia il tratto e non il soggetto: contorni calcolati con un profilo di larghezza, non linee di spessore fisso.
Marchio finale
Il segno scelto. Compare in un punto solo dell’app, lo splash: montato sopra la foto d’ingresso, a 30 pixel, cadeva sul corpo e spariva.
05

L’ingresso

La schermata d’ingresso è una foto con del testo sopra, e il testo deve restare leggibile. La strada breve, cioè scurire la foto o metterci sopra un pannello, l’ho provata e l’ho buttata: cancella l’immagine per cui l’hai messa.

Il problema vero non era il trattamento, era la foto. Ne ho passate in rassegna 91 e non ce n’era una con una zona di riposo nel terzo basso, dove va il testo. Poi ho capito perché, ed è una proprietà dell’attrezzo: il tessuto per gravità arriva sempre a terra, quindi c’è sempre una colonna scura dove serve il vuoto, in qualunque posa e con qualunque ritaglio. Il cerchio invece ha una sola cima sottile che sale, e sotto non scende niente.

Ne ho generate altre 84 e, invece di sceglierle guardandole, ho misurato la fascia bassa di ognuna: luminosità media, deviazione, energia dei bordi dal 58 al 100 per cento dell’altezza. Le migliori otto le ho montate davvero dentro la schermata, poi altre trentaquattro. Ed è lì che è nata la regola del capitolo: si giudica solo montato. Sul foglio a contatto due immagini sembravano perfette, ma montate i capelli cadevano dentro la parola «Volée».

Otto finaliste montate
Le otto finaliste, montate. Il criterio non è quale foto è più bella, è dove cade la parola.

Scelto · ingresso chiaro

Scartato · ingresso scuro

Le app del settore sono tutte scure con un accento fluo. Il chiaro non assomiglia a nessuna, e racconta il passaggio: fuori la luce, dentro la palestra, perché l’app dopo il login torna scura.
06

Il sistema

Il colore l’ho scelto in due giri, e mai su un campione astratto: ogni verde montato sullo stesso frammento di interfaccia. Il chartreuse cade troppo vicino al bianco del testo, ed è irreparabile. La menta legge «wellness», non «prodotto». Il verde chiaro sparisce nella barra di navigazione, che è il posto dove deve funzionare per forza. Resta un verde medio, abbastanza freddo da non litigare con gli incarnati nelle anteprime dei video.

Poi una regola sola, che tiene insieme tutto il resto: l’accento marca solo stato o azione, cioè attivo, livello, azione primaria. Mai decorazione. Da lì discende anche il rosso, un rosso desaturato caldo che resta nella stessa famiglia e si usa soltanto per le azioni che distruggono.

La stessa regola ha deciso il segno della verificata. Il verde pieno vuol dire «questo si tocca», ma una verificata non è un’azione, è una fiducia che c’è già. Su cinque involucri confrontati alla misura vera, 15 pixel accanto al nome, il disco pieno competeva con i pulsanti, il contorno spariva, la spunta nuda non si leggeva. Ha vinto il disco smorzato: si distingue dalle azioni proprio perché è più quieto.

I verdi confrontati in contesto
Da sinistra i tre scartati, poi quello scelto. Guarda la riga della navigazione e non il campione grande: è lì che il verde chiaro si perde.
Cinque involucri per la spunta della verificata
Sopra il segno ingrandito, sotto la misura in cui vive davvero. L’ultimo a destra è quello scelto.
07

La verifica

Alla fine ho controllato tutte e trenta le schermate in automatico invece che a occhio: contrasto di ogni testo calcolato ricostruendo cosa ha dietro, area di tocco di ogni elemento premibile, immagini rotte, destinazioni morte.

Sono uscite quattro cose che a occhio non avevo visto. Due voci delle Impostazioni che si aprivano l’una al posto dell’altra. I chip di livello a una cifra, alti a norma ma larghi 36 pixel invece di 44. La maniglia dei fogli, che nel disegno è un ornamento e nel prototipo è alta quattro pixel e la devi prendere. E cinque schede con doppia identità, cioè la stessa foto usata per due video diversi.

Da lì è uscita la regola che mi porto dietro: in un prototipo il catalogo è un dato, e va verificato come tale. Una foto, un video, ovunque compaia.

Bersagli di tocco e contrasti misurati
Il tratteggio è l’area da toccare, non il segno che si vede: si allarga il bersaglio senza ingrossare il disegno. Sotto, lo stesso testo prima e dopo il grigio corretto.
08

Cosa ho tagliato

La striscia «In evidenza». Era la mia curatela a mano, e mi piaceva. L’ho tolta perché era arbitraria: scegliere io i video buoni non è una struttura, è un gusto, e la struttura c’era già.

Il suggerimento automatico del livello. Nel flusso di caricamento c’era un chip che diceva «sembra L2». Nel pilota quel modello non esiste, e mostrarlo attivo sarebbe stato raccontare una funzione che non c’è. È rimasto nel case study come funzione da costruire, non nell’app.

I marcatori obbligatori. Segnare i pezzi della combo è la cosa più utile dell’app, ed è la risposta diretta alla prima delle due frasi qui sopra: se chi insegna non capisce un passaggio, il passaggio va segnato. Proprio per questo li avevo messi obbligatori. Ma la barriera d’ingresso era già di quattro campi, quindi sono diventati facoltativi, con uno schermo dedicato che si può saltare.

Lo schermo dei marcatori, quello che si può saltare. La funzione più utile dell’app è anche quella che non si può imporre a chi sta caricando il suo primo video.
09

Dove sono ora

Trenta schermate collegate, quattro flussi navigabili, un prototipo che si tocca da qualunque telefono. Il passo dopo è una palestra pilota: le persone con cui mi alleno caricano i video veri, e si vede se il livello dichiarato tiene quando a dichiararlo non sono io.

Il rischio numero uno resta la densità. Due attrezzi per quattro livelli fanno otto caselle, e con una palestra sola alcune resteranno semi vuote per mesi. Per questo la schermata vuota dice la verità invece di nasconderla.

Lo splash, l’unico posto dell’app dove il simbolo compare. Dura meno di un secondo, e poi comincia la palestra.

Il prototipo

È ancora lì.

Trenta schermate, quattro flussi, 152 punti da toccare: volee-prototipo.netlify.app

Indietro
Indietro

SignBridge

Avanti
Avanti

Biscò