Progetto personale · app mobile

SignBridge

Un modo di parlare in silenzio, al banco di un negozio. 19 schermate, due binari, un prototipo che si tocca.

Le richieste preparate a casa Lo schermo girato verso l'altra persona La voce che diventa testo Il repertorio del proprio mestiere
Quattro delle 19 schermate: le richieste preparate, lo schermo girato verso l'altra persona, la voce che diventa testo, il repertorio del proprio mestiere.

Prima di leggere

Toccala.

Trentuno schermate collegate e 72 punti da toccare, come si incontrano davvero al banco. Il racconto di come ci sono arrivata comincia sotto, ma la cosa da guardare è questa.

A schermo intero: signbridge-prototipo.netlify.app

01

Il banco

SignBridge non nasce da un tema assegnato. Nasce dal banco di un negozio di prodotti per animali, dove ho lavorato come commessa e dove alcuni clienti erano sordi. Con loro funzionava una cosa sola, e non era la lingua dei segni: era la scrittura, a turni, su carta, e il bigliettino a volte arrivava già scritto da casa. Il resto lo risolvevano il mimo e il display della cassa.

Poi c'è la volta che ricordo meglio. Una cliente mi ha appoggiato una mano sulla spalla per farsi notare e mi ha mostrato un bigliettino scritto a mano: il nome di un cibo per cani con problemi intestinali. L'ho portata al reparto e le ho alzato i sacchetti uno alla volta perché scegliesse. Volevo chiederle se era stata dal veterinario, cosa avesse il cane, se potevo consigliarle qualcosa da abbinare. Non l'ho fatto, per due motivi. Il primo: «è un discorso troppo complesso da fare mimando». Il secondo, che è quello che conta: «Dovrei chiederle di parlarmi delle feci del cane, e lei risponderebbe probabilmente urlando. E non credo che voglia che tutti i clienti che ci sono in negozio sentano quello che succede al suo cane».

Non è un dramma: alla domanda su qual è la volta che ricordo peggio, la risposta è che non c'è. È attrito ordinario. Solo che quel giorno è uscita con il prodotto giusto e senza il consiglio che avrei dato a chiunque altro.

Un banco di negozio con un blocchetto per appunti e una penna
Un banco come quello dove lavoravo, ricostruito. Il blocchetto e la penna funzionavano già, prima di qualunque app.
02

Quello che ho chiesto

Non ho fatto interviste da manuale. Ho parlato con due donne sorde fra i 50 e i 60 anni, che chiamo A e B: B è sorda dalla nascita, A lo è diventata da ragazzina, e tutte e due, quando escono, di solito sono sole. Hanno risposto per iscritto, quindi le frasi qui sotto sono le loro parole: ho sistemato ortografia e punteggiatura, non quello che hanno detto.

«Ho aspettato in coda, ho parlato per chiedere un consiglio su integratori, ma sembrava che il farmacista non capisse. Ho provato a segnarlo, ma ho subito capito che non mi capiva, così ho preso il telefono dalla borsa e ho scritto sulla prima chat di WhatsApp quello di cui avevo bisogno, senza ovviamente inviare il messaggio. Il farmacista ha detto qualcosa che non ho compreso, e ho smesso di provarci. Ho preso il prodotto che mi ha dato, pagato, e sono uscita.» B, in farmacia

È lo stesso momento che avevo vissuto io, visto dall'altro lato del banco. Lei smette di provarci, io rinuncio a chiedere. Nessuna delle due sa dell'altra, e il punto in cui ci fermiamo è lo stesso.

Da lì il problema ha smesso di essere «non ci si capisce»: quando la conversazione supera la transazione, si rinuncia, e si esce con il prodotto ma senza il consiglio. Il costo non è la comprensione, sono il tempo e la fatica, e li paga sempre lo stesso lato. A lo dice meglio di come lo direi io: «Lo faccio io perché sono io quella in difficoltà, sono io che devo riuscire a farmi capire», e aggiunge dove il conto diventa troppo alto: «Se devo chiedere, cerco di farlo altrove, non in cassa».

Poi è arrivata la frase che ha demolito il progetto che avevo in mano. Alla domanda su cosa non funzionerebbe, B ha risposto: «Eh, chi dei due ha l'app?». Tutte e 21 le schermate che avevo disegnato davano per scontato che l'app ci fosse da entrambe le parti. Il negozio non la installerà mai.

Schema delle due rinunce, in farmacia e al banco di un negozio
Due episodi diversi, in due negozi diversi, fra persone che non si conoscono: si fermano nello stesso punto.
03

La premessa sbagliata

La prima versione traduceva la lingua dei segni con la fotocamera. Non esiste come tecnologia matura, e comunque non è quello il problema: al banco non si segna. La LIS è la lingua fra sordi. A la usa «solo con mio marito, i miei figli e qualche amico», perché «quasi nessuno la conosce»; B scrive per lo stesso motivo: «nessuno conosce la LIS».

Quindi cade la traduzione, e resta la metà buona dell'idea di partenza: la voce che diventa testo. Che è anche la metà che sposta il carico dall'altra parte, perché a essere trascritta è la voce di chi sta dietro il banco.

Prima · la traduzione

La schermata iniziale della prima versione, con quattro pulsanti in inglese

Dopo · la voce trascritta

La schermata che trascrive la voce mentre l'altra persona parla
A sinistra quattro pulsanti identici che promettono una traduzione, e l'interfaccia in inglese di un'app sulla lingua dei segni italiana. A destra quello che è rimasto dell'idea: la voce dell'altra persona, scritta mentre parla.
04

Due binari, un telefono solo

I due lati del banco non usano lo stesso canale, quindi l'interfaccia non può essere simmetrica. Chi arriva scrive, chi sta dietro il banco parla e viene trascritto. Sono due modi diversi di dire la stessa cosa, e questa asimmetria è tutto il progetto.

Il telefono è uno solo, quello di chi arriva. Al negozio non si chiede di installare niente: era l'obiezione di B, ed è anche il motivo per cui lo schermo si mostra e non si passa di mano. La spiegazione sta dentro la schermata mostrata, in una riga: «Sono sorda. Risponda pure a voce: il telefono scrive per me». Grande la prima volta, sottile dalla seconda, e nessuno deve toccare niente.

Da lì nascono due percorsi. Chi arriva al banco ha uno scambio scritto che si prepara a casa e si usa in trenta secondi. Chi lavora con il pubblico ha il repertorio dei segni del proprio mestiere, che non è un corso di lingua dei segni: sono le frasi che dice ogni giorno.

La prima volta

La riga di spiegazione, grande, al primo messaggio

Dalla seconda in poi

La stessa riga, sottile, dal secondo messaggio
La riga che legge l'altra persona: grande finché serve a capire cosa sta succedendo, sottile quando lo spazio serve alla frase vera.
Mappa dell'app: due binari e i passaggi fra loro
Il binario di sopra è un anello, quello di sotto una fila. Da guardare sono i due punti in cui l'app si ferma: da lì partono le frecce rosse.
05

La mappa, e i sette buchi

È il passo che non avevo fatto. Avevo un elenco di schermate in fila e lo chiamavo flusso: sedici riquadri, nessun ritorno. Una mappa vera si disegna con i ritorni, e appena l'ho disegnata così ha tirato fuori sette cose che mancavano: sei stati di schermate che credevo finite, e una schermata intera.

Quella intera è il confine. «In salute e in emergenza l'app non insegna a improvvisare» era una frase dentro un riquadro di testo: se una cosa non ha una schermata non è una decisione di design, è un'intenzione.

E c'è una scoperta di struttura che l'elenco nascondeva. Il primo binario non è una fila, è un anello: due delle schermate che sembravano passaggi in sequenza sono deviazioni che rientrano, e solo la terza è l'uscita.

Mappa di navigazione con i ritorni e i sette buchi segnati
Sei riquadri col bordo rosso per sette buchi: su «Ascolta» ne cadevano due, il permesso del microfono e il silenzio. Si vedono solo disegnando i ritorni, che nell'elenco non esistevano.
La schermata delle richieste alla prima apertura, vuota
Uno dei sette: la prima apertura, quando non hai ancora scritto niente. Capita quasi sempre prima di averne bisogno, e non è una pagina bianca.
06

Cinque decisioni

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

Come si mostra che una frase la sai già fare?

Provato Quattro versioni montate del repertorio: caselle spuntabili, casella più parola, lo stato a inizio riga, la parola in legenda.

Scelto Lo stato all'inizio della riga, un quadrato pieno contro un cerchio vuoto, e la parola scritta una volta sola nella legenda.

Perché La casella spuntabile era l'idea ovvia e prometteva un tocco che non esiste, perché quello stato si guadagna altrove. E liberare il bordo destro toglie la sensazione di schermata fitta.

Il repertorio con lo stato all'inizio di ogni riga
Lo stato apre la riga, e il bordo destro resta libero.

Quanto spazio merita una spiegazione che serve una volta sola?

Provato Tenerla sempre uguale, per non far sparire l'informazione.

Scelto Grande la prima volta, sottile dalla seconda in poi.

Perché La riga serve a chi legge lo schermo, non a chi lo tiene: la prima volta deve arrivare da lontano, dalla seconda lo spazio serve alla frase vera.

Dove si tira indietro un'app che deve farsi capire?

Provato Una schermata che porta allo scambio scritto oppure a un interprete.

Scelto Una strada sola: scrivilo e mostralo. L'interprete è caduto e non è stato sostituito.

Perché In salute e in emergenza quattro segni imparati male fanno più danni del non capirsi: chi crede di essersi fatto capire smette di controllare. E l'interprete l'ho tolto perché in quel momento, lì, un interprete non c'è: prometterlo sarebbe la stessa bugia della traduzione automatica.

La schermata del confine: qui l'app dice di no
Un'azione sola, ed è la cosa più netta del progetto.

Lo scambio finito serve ancora a qualcosa?

Provato Chiuderlo e basta, come si chiude una chat.

Scelto Resta una schermata, con la conversazione intera e in ordine.

Perché È l'unica cosa che si rilegge dopo, fuori dal negozio, quando ti chiedi cosa ti avevano detto di fare. È anche l'unica idea sopravvissuta al progetto di partenza.

Due pulsanti affiancati, o uno solo?

Provato Le azioni una accanto all'altra, come si fa quasi sempre.

Scelto Un pulsante solo a piena larghezza, e il resto in forma diversa.

Perché Su uno schermo da 390 due pulsanti affiancati danno 166 px l'uno, e la frase più corta che mi serviva ne chiedeva 177. Ma il motivo vero è che questo schermo si legge da lontano, e dimezzare l'azione principale è la cosa sbagliata da fare proprio lì.

Le tre richieste di chiarimento, una sotto l'altra
Tre richieste diverse, impilate: nessuna dimezzata.
Prima versione del repertorio, con le caselle spuntabili
Seconda versione, con casella e parola
Versione scelta, con lo stato all'inizio della riga
Le due versioni scartate e quella scelta, montate a misura vera. Guarda il bordo destro: è quello a rendere fitta la schermata, non il numero di righe.
07

L'icona

Sembra la scelta più istintiva del progetto, ed è l'unica che ho dovuto verificare a sette misure diverse e sotto due maschere di sistema. Il simbolo è mio e viene dal progetto di partenza: una mano che sfiora un'onda sonora, cioè il segnato e la voce trascritta. Il soggetto non è la mano e non è l'onda, è il punto in cui si toccano.

Il disegno originale ha 33 linee larghe 2 o 3 pixel su 451. A 60 pixel, che è la misura in cui un'icona vive davvero, quelle linee diventano 0,3 pixel: sotto il pixel, quindi grigio. Non è una questione di gusto, è aritmetica.

Ho perso tre giri interi a cercare la soluzione sbagliata. Riducendo le linee senza dire come, l'onda è diventata prima un istogramma, poi una linea ondulata decorativa, poi barre piene in cui la mano non toccava più niente. Ogni volta la forma migliorava e il soggetto spariva.

La mossa che risolve il piccolo formato non è assottigliare, è togliere: l'icona non è tutto il disegno, è il punto di contatto. Si ritaglia lì, e a 60 px si legge.

Primo scarto: l'onda diventa un istogramma
Secondo scarto: l'onda diventa una linea decorativa
Terzo scarto: barre piene, la mano non tocca l'onda
I tre giri falliti, nell'ordine. Ognuno ha una forma migliore del precedente e ha perso il soggetto: il contatto fra la mano e l'onda.
L'icona sotto le maschere di iOS e Android
Sotto la maschera tonda di Android il 43% del disegno cadeva fuori dalla zona sicura. L'icona adattiva non è il quadrato ritagliato: è fondo e figura, separati.
L'icona scelta, alle misure in cui viene usata davvero
La scelta finale, dalle misure grandi ai 29 px della barra di stato. Non è il disegno rimpicciolito: è il punto in cui le dita toccano l'onda.
08

La verifica misurata

I contrasti della prima versione, calcolati sui pixel e non a occhio: il pulsante principale faceva 1,61 contro il fondo, la barra di navigazione 2,16, e lo stato attivo 1,30. Quel numero è il capitolo, perché lo stato attivo era affidato al solo colore, su un'app che si presentava come inclusiva.

Nella versione nuova gli stessi punti fanno 6,82, 6,31 e 7,16, e lo stato attivo ha tre segnali invece di uno: forma, colore e parola.

Poi c'è il rilievo che mi interessa di più, perché riguarda il progetto nuovo e non quello vecchio. Misurando ho trovato che il pulsante spento faceva 4,12 mentre la mia specifica dichiarava 4,7: un grigio scelto senza misurarlo, finito anche nella tavola del sistema visivo. Su un'app che porta il proprio capitolo sui contrasti, un pulsante spento che dice perché è spento deve essere leggibile.

Stessa storia per la tipografia: le schermate usavano 26 combinazioni di misura e peso contro le 9 che dichiaravo. Ora sono 15 dichiarate e 15 usate, zero fuori scala.

La parola incerta, sottolineata invece che evidenziata
La parola su cui il telefono ha un dubbio: nessun giallo chiaro passa il 3:1 su fondo chiaro, quindi l'informazione la porta la sottolineatura e non l'evidenziazione.
09

Cosa ho tagliato, e a che punto è

Ho tolto tre promesse che non sapevo mantenere. I 180 segni del repertorio erano un numero inventato, e insieme a loro è caduta la barra di avanzamento che li contava. «Trova un interprete LIS» è uscito e non è stato sostituito. Il luogo sotto le richieste salvate avrebbe richiesto il permesso di posizione per essere vero, quindi è rimasta solo la data.

Restano due riquadri dichiarati e vuoti, ed è la cosa di cui vado più fiera. Il video del segno dovrebbe segnarlo una persona sorda madrelingua: un avatar animato o qualcuno che imita il gesto sarebbero esattamente le due cose che questa app dice di non fare, e valgono meno di un riquadro onesto.

Da 21 schermate a 19, con dentro un'altra app.

L'ultima cosa l'ha trovata il prototipo, non le revisioni: dopo tre riletture del documento c'erano ancora due collegamenti dichiarati nella mappa che nessuna schermata realizzava. Finché le schermate stanno ferme su una tavola, nessuno prova a premerle.

Stato. Il prodotto è fermo e il prototipo è navigabile: 31 schermate, 72 punti attivi. Il file Figma è in costruzione. Non è un'app spedita, e non fingo che lo sia.

Il video del segno

La schermata del segno, con il riquadro del video dichiarato vuoto

Allo specchio

La schermata dello specchio, con i due riquadri dichiarati vuoti
I due riquadri vuoti, con l'etichetta che dice cosa manca. Sono una coppia: riempirne uno solo farebbe leggere l'altro come una svista.

Il prototipo

È ancora lì.

Trentuno schermate, due binari, 72 punti da toccare.

Apri il prototipo

signbridge-prototipo.netlify.app

Avanti
Avanti

Volée