QuantoBasta · schermata «Scrivi la ricetta» · campionario 7
Scrivere una ricetta senza dover indovinare
I primi tester dicono che la pagina dove si scrive una ricetta è confusa. Hanno ragione, e si può dire con precisione perché: quasi tutto sulla pagina ha la stessa faccia. Etichette, segnaposto, bottoni accesi e spenti sono tutti testo semplice, in due soli colori.
Qui sotto: com'è oggi (schermate vere dal simulatore), le regole nuove per dire cosa si tocca e cosa no, e poi le proposte pezzo per pezzo. Tutto è disegnato alle misure vere dell'iPhone (402 punti di larghezza) e coi dati veri del ricettario demo. Per ogni proposta c'è cosa dà, quanto costa e il rischio. Ci sono anche quelle che sconsiglio, segnate così.
Dieci cose che confondono
Quattro schermate vere: una ricetta nuova appena aperta (con la tastiera, perché si apre da sola) e il Risotto alla milanese, dall'alto in basso. I numeri sulle schermate sono i punti dell'elenco.
1
2
4
5
9
3
1
10
6
7
8
8
3
- 1I campi dicono cosa sono solo finché sono vuoti. «Titolo», «Descrizione», «Porzioni» sono segnaposto: appena scrivi spariscono. Nel risotto resta un «4» da solo, e non si sa di cosa.
- 2Le etichette hanno quattro forme. Maiuscolo grigio (CATEGORIA), segnaposto grigio (Descrizione), grassetto nero (Per il brodo), e niente (le righe degli ingredienti). «AGGIUNGI UNA FOTO» ha la forma di un'etichetta ma è un invito.
- 3Tutto quello che si tocca è testo terracotta, senza forma. Nove comandi con la stessa faccia, da «Scatta una foto» a «Elimina ricetta», che si distingue solo per un rosso poco diverso.
- 4Spento vuol dire grigio, come le etichette. «Salva» spento e «Aggiungi gli ingredienti» spento hanno lo stesso colore di «CATEGORIA» e dei segnaposto. Non si capisce che sono bottoni.
- 5«Nessuna categoria» è la cosa più forte dello schermo. Pieno terracotta, come un bottone principale, e dice la cosa meno importante della ricetta.
- 6La prima sezione, senza nome, mostra «Aggiungi sezione». È il segnaposto del suo nome, ma sono le stesse parole del bottone più in basso. Due cose diverse con lo stesso testo.
- 7Tre campi in fila divisi solo da una riga sottile (contrasto 1,3:1). Quando l'unità è vuota (carota, cipolla) resta un buco, e sembra un errore.
- 8«Inserisci ingrediente manualmente» si ripete dopo ogni sezione: tre volte nel risotto, quattro nelle lasagne.
- 9Il riquadro per incollare sta sempre lì, 140 punti in mezzo alla pagina, anche quando correggi una ricetta finita e non devi incollare niente.
- 10Qui si chiama «Descrizione», nella ricetta «Procedimento». È lo stesso testo con due nomi, e qui sta prima degli ingredienti, là dopo.
Ogni cosa ha una forma sola
La confusione fra etichette, descrizioni e bottoni si risolve prima di disegnare la pagina: una forma per ogni ruolo, e la stessa forma ovunque. Il colore non basta a distinguere (terracotta e rosso si confondono, e chi non distingue bene i colori li vede uguali): conta la forma. I contrasti sono calcolati con la formula WCAG, chiaro e scuro.
Etichetta
Sempre sopra il campo, sempre visibile, anche a campo pieno. Piccola, grigia, frase normale (niente maiuscolo).
5,6:1 sul crema · 7,3:1 nel buioCampo
Una casella bianca col bordo intero, non una riga sotto. Il bordo è abbastanza scuro da vedersi: è quello che dice «qui si scrive».
bordo 3,2:1 (oggi 1,3:1)Segnaposto
Dentro il campo vuoto c'è un esempio, non il nome del campo. Il nome sta nell'etichetta sopra.
5,9:1 sul biancoBottone principale
Pieno terracotta. Al massimo uno per schermata: «Salva» nella barra, «Aggiungi» nei fogli.
bianco su terracotta 5,3:1Bottone secondario
Fondo terracotta chiarissimo, scritta terracotta, sempre con l'icona. Per le azioni frequenti.
4,6:1 · nel buio 4,7:1Comando leggero
Solo testo e icona, per le azioni rare. Mai senza icona: senza, è identico a un'etichetta colorata.
5,0:1 sul cremaSpento
Stessa forma di quando è acceso, solo grigia. La forma resta: si capisce che è un bottone che adesso non va, non una scritta.
4,5:1 · nel buio 5,2:1Distruttivo
Rosso, da solo, in fondo alla pagina e staccato da tutto. Chiede sempre conferma.
6,5:1 sul biancoDa controllare
La riga intera su un fondo ocra tenue, col pallino. Oggi è una barretta a sinistra: si nota poco e non dice cosa fare.
testo 12:1 · nota 5,1:1A: la foto in cima, poi tre blocchi con un nome
L'ordine è quello della ricetta nel Dosatore: foto, nome, ingredienti, procedimento. Le cose brevi (nome, porzioni, categoria) sono campi con l'etichetta; le cose lunghe (ingredienti, procedimento) hanno un titolo grande come nella ricetta. Gli ingredienti stanno in un riquadro bianco come le righe di Impostazioni, che i tester conoscono già.
A1 · Ricetta nuova, appena aperta
A2 · Risotto alla milanese, in alto
photo_cameraCambia fotoA3 · Lo stesso, scorrendo in fondo
- Cosa dà
- Ogni campo ha il suo nome, pieno o vuoto. «Salva» è una pillola: grigia finché manca il nome, piena quando si può salvare. Nella ricetta nuova la prima cosa sotto «Ingredienti» sono le due strade, spiegate in una riga: nessuno deve indovinare che il riquadro grande serve a incollare.
- La coerenza
- Le sezioni sono scritte come nel Dosatore (maiuscolo piccolo grigio), le righe si leggono come nel Dosatore («320 g riso Carnaroli»), il procedimento si chiama Procedimento e sta dopo gli ingredienti. Si modifica la ricetta che si vede, non un modulo diverso.
- Quanto costa
- È il pezzo grosso: la schermata si ridisegna quasi tutta, ma quello che c'è sotto (la bozza, il lettore dell'elenco, il salvataggio, la pulizia delle foto) resta com'è ed è già provato da 506 test. Due o tre giornate di lavoro con le prove sul simulatore e sull'emulatore.
- Il rischio
- Gli ingredienti non si scrivono più direttamente nella lista: si tocca la riga e si apre un foglio (vedi sotto). Per chi corregge dieci righe di fila è un tocco in più per riga. Lo compensa il fatto che la lista si legge, e che il foglio ha i campi grandi con le etichette.
B: a passi, una schermata per volta
B · Passo 1 di 3
- Cosa dà
- Alla prima ricetta è impossibile perdersi: una domanda per volta, un bottone solo.
- Quanto costa
- Più della A: tre schermate, la navigazione fra loro, e una seconda strada per modificare una ricetta che esiste già (lì i passi non hanno senso).
- Perché no
- La ricetta si scrive una volta e si corregge molte. Per cambiare una quantità dovresti passare dal passo 1 al passo 2, o avere due pagine diverse per la stessa ricetta. E chi incolla un elenco vuole finire in dieci secondi, non in tre schermate. È la forma giusta per un'iscrizione, non per un quaderno di ricette.
Un banner in cima: lo tocchi, e solo allora scegli
Come chiedi tu, e come fanno Contatti, WhatsApp e quasi tutte le app: la foto sta in alto, grande quanto la copertina che avrà nel Dosatore (210 punti, tutta larghezza), e toccandola compaiono le scelte. Senza foto è un riquadro terracotta chiaro con l'icona, più basso (148 punti), per non spingere giù il nome.
Toccando la foto (iPhone)
photo_cameraCambia foto- Cosa dà
- Tre comandi di testo in meno sulla pagina. La foto si vede subito com'è nella ricetta: stessa forma, stesso taglio. «Togli la foto» compare solo se una foto c'è, ed è rosso nel posto dove il sistema mette le cose che cancellano.
- iPhone e Android
- Sull'iPhone è il foglio di sistema che tutti conoscono. Su Android quel foglio non esiste: si usa il nostro foglio che sale dal basso (quello delle categorie), con le stesse tre voci e le icone.
- Quanto costa
- Poco. Il permesso si chiede ancora al momento del tocco su «Scatta» o «Scegli», come oggi. Mentre la foto si comprime, sul banner gira la rotellina e «Salva» resta spento, come oggi.
- Il rischio
- Chi non ha mai visto il gesto potrebbe non toccare il banner. Per questo senza foto c'è scritto «Aggiungi una foto», e con la foto c'è la pillola «Cambia foto»: il banner dice cosa succede se lo tocchi.
Il nome scritto sopra la foto, come nel Dosatore
- Cosa dà
- Sarebbe identico alla copertina della ricetta finita.
- Perché no
- Un campo scritto in bianco su una fotografia non sembra un campo, cioè il difetto numero 1 in un'altra forma. E senza foto il nome dovrebbe tornare giù: la pagina cambierebbe forma a seconda della foto.
Tre modi di scrivere una riga
Il problema dei tre campi in fila si può risolvere in tre modi diversi. Te li faccio vedere tutti e tre, perché qui la scelta è davvero tua: cambia il gesto che si fa più spesso.
C1: la lista si legge, la riga si scrive in un foglio
C1 · Toccando «Aggiungi» (o una riga)
- Cosa dà
- Tre campi grandi, uno per riga, ognuno col suo nome. L'unità si sceglie coi gettoni (le più usate, e si può sempre scrivere a mano: «bustine», «coste»). «Aggiungi» mette la riga nella lista e il foglio resta aperto e vuoto, col cursore sulla quantità: si scrive il prossimo senza chiudere niente. «Fine» chiude.
- Un errore in meno
- Oggi, se nel campo della quantità scrivi «200 g», la riga si salva come q.b. senza dire niente: il campo vuole solo il numero. Nel foglio l'unità scritta lì passa da sola nel suo campo.
- Per correggere
- Toccando una riga si apre lo stesso foglio, con «Fatto» al posto di «Aggiungi» e, in fondo, «Elimina ingrediente». La × accanto a ogni riga sparisce: era un bersaglio piccolo e distruttivo a un centimetro dal nome.
- Quanto costa
- Medio. Il foglio c'è già (è quello delle categorie), la catena dei campi con «avanti» sulla tastiera si semplifica: resta dentro il foglio, tre campi invece di tutta la ricetta.
- Il rischio
- Un tocco in più per correggere una riga. E la tastiera copre metà schermo: il foglio è disegnato per starci sopra (qui sopra le misure sono vere), ma va provato sull'iPhone più piccolo e sullo Xiaomi.
C2: i tre campi restano nella lista, ma si vedono
C2 · Caselle vere e i nomi delle colonne
- Cosa dà
- È la pagina di oggi resa leggibile: ogni campo è una casella, e in cima i nomi delle colonne. Si corregge senza aprire niente.
- Quanto costa
- Poco: si cambia il disegno della riga e basta.
- Il rischio
- Quattordici righe di caselle sono una griglia di 42 caselle: è ordinata ma è un modulo, non una ricetta. I nomi lunghi («Parmigiano Reggiano DOP da grattugiare») si tagliano: la colonna del nome è larga meno di 190 punti.
C3: una riga sola, scritta come si parla
C3 · Un campo per ingrediente, l'app capisce il resto
- Cosa dà
- Nessun campo da capire: si scrive «320 g riso Carnaroli» come su un foglietto. Sotto la riga che stai scrivendo l'app mostra cosa ha capito. È lo stesso lettore dell'incolla, quindi le due strade diventano una sola.
- Quanto costa
- Medio: il lettore c'è ed è provato su casi veri, va solo collegato alla riga.
- Il rischio
- La quantità è il dato su cui si riscala, e qui passa da un'interpretazione. Il lettore sbaglia di rado, ma quando sbaglia l'errore finisce dentro i conti. «Capito:» aiuta solo se lo si guarda.
Un foglio per incollare, e prima di confermare vedi cosa ho capito
Come chiedi tu: «Incolla un elenco» apre un foglio col riquadro, si incolla, si conferma, il foglio si chiude e gli ingredienti sono nella lista. In più, sotto il riquadro, l'anteprima si aggiorna mentre incolli: quanti ingredienti, quante sezioni, quanti da controllare. E il bottone dice il numero: «Aggiungi 13 ingredienti».
L'esempio è un elenco copiato così com'è da un sito, e i numeri sono quelli che il lettore vero dell'app ricava da questo testo: 13 ingredienti, 2 sezioni («Per il brodo» e «Per mantecare»), 1 riga che non capisce.
1 · Il foglio, col testo incollato
2 · Confermato: il foglio si chiude
- Cosa dà
- Il riquadro sparisce dalla pagina e compare solo quando serve. Le sezioni, che oggi sono la parte più confusa, nascono da sole dai «Per il brodo:» dell'elenco, e il foglio lo dice in una riga. La riga non capita si vede subito ed è una sola cosa da fare.
- Il bottone spento
- Finché il riquadro è vuoto, o se nel testo non c'è niente di leggibile, il bottone è grigio e dice solo «Aggiungi», e sotto il riquadro c'è scritto perché.
- Quanto costa
- Poco: il lettore e l'anteprima esistono già, cambia solo dove si mostrano.
- Il rischio
- Oggi chi incolla e tocca subito «Salva» non perde niente, perché «Salva» legge anche il riquadro. Col foglio quel caso non esiste più, ma ne nasce un altro: chiudere il foglio col testo dentro trascinandolo in basso. Lì si chiede «Aggiungere questi 13 ingredienti?» invece di buttarli.
- Non c'è
- Un bottone «Incolla dagli appunti». Sull'iPhone ogni lettura degli appunti fa comparire la richiesta di permesso del sistema: si incolla col dito, come ovunque.
Un titolo con un menù, e un solo bottone per aggiungere
Oggi le sezioni compaiono e scompaiono da sole, la prima non ha nome e mostra «Aggiungi sezione», e sotto ognuna c'è «Inserisci ingrediente manualmente». Proposta: la sezione è un titolo, scritto come nella ricetta, col suo menù; per aggiungere c'è un solo «Aggiungi» in fondo, e nel foglio dell'ingrediente si sceglie in quale sezione va.
Il menù di una sezione
Nel foglio: in quale sezione va
- Cosa dà
- Un solo «Aggiungi» invece di uno per sezione. La riga «Sezione» nel foglio c'è solo se le sezioni sono almeno due, e parte dall'ultima usata. Una ricetta senza sezioni (la maggior parte) non le vede mai.
- Togliere
- Oggi una sezione si toglie solo togliendo a uno a uno tutti i suoi ingredienti. Nel menù sì, e non si perde niente: gli ingredienti passano alla sezione sopra.
- Nuova sezione
- «Nuova sezione» (in fondo, comando leggero) chiede subito il nome in un foglio piccolo, con un esempio: «Es. Per la crema». Niente sezioni senza nome create per sbaglio.
- Quanto costa
- Poco: rinominare e togliere sono due funzioni nuove nella bozza, da provare con i test come le altre.
- Il rischio
- Il menù «…» è un gesto in più da scoprire. Ma serve solo per rinominare e togliere, cose rare; l'azione frequente (aggiungere) resta in vista.
Un «+» su ogni titolo di sezione
- Cosa dà
- Si aggiunge direttamente dove serve, senza scegliere la sezione nel foglio.
- Il rischio
- Torna la ripetizione di oggi, in piccolo: un «+» per sezione più quello in fondo. E la prima sezione, che non ha titolo, non avrebbe dove metterlo.
Le cose piccole che cambiano insieme
La categoria, toccando il campo
- Categoria
- Oggi è una fila di pillole che scorre di lato: se ne vedono due e mezza su sette, e quella scelta è piena terracotta come un bottone principale. Proposta: un campo che mostra la categoria scelta col suo colore, e toccandolo si apre la lista intera, coi colori e le icone, e «Nuova categoria» in fondo (quello che c'è già, spostato). Costa poco.
- Procedimento
- Si chiama come nella ricetta e sta dopo gli ingredienti, come nella ricetta. Il segnaposto è un esempio vero di appunto: i procedimenti del ricettario sono spesso di due righe, e va bene così.
- Porzioni
- Accanto alla categoria, stretto: è un numero. Resta facoltativo, e il segnaposto «Es. 4» lo fa capire senza scriverlo.
- Il titolo in alto
- «Nuova ricetta» o «Modifica» al centro della barra: oggi la barra è vuota e non si sa dove si è.
- Uscire senza salvare
- Oggi la freccia indietro butta via tutto senza chiedere. Se c'è qualcosa di nuovo, si chiede: «Esci senza salvare?» con «Continua a scrivere» ed «Esci» (rosso).
- La tastiera
- Su una ricetta nuova si apre ancora da sola sul nome, come oggi: è la prima cosa da scrivere. Nella foto qui in alto il campo col bordo terracotta è quello attivo.
- Android
- La stessa pagina. Cambiano solo il foglio della foto (il nostro al posto di quello di sistema) e il menù della sezione (un foglio dal basso invece del menù a comparsa).
Cosa ti chiedo
Il resto lo decido io (le regole di forma, i contrasti, come si costruisce). Queste sono scelte di prodotto, e sono tue. Accanto a ognuna c'è quella che consiglio.
1 · La pagina
A (foto in cima, tre blocchi) o B (a passi). Consiglio A.
2 · Un ingrediente alla volta
C1 (la lista si legge, la riga si scrive in un foglio), C2 (tre caselle in riga coi nomi delle colonne) o C3 (una riga sola che l'app interpreta). Consiglio C1. Se preferisci correggere senza aprire niente, C2 è la più economica.
3 · Le sezioni
Un «Aggiungi» solo e la sezione scelta nel foglio, oppure un «+» su ogni sezione. Consiglio il primo.
4 · La categoria
Campo che apre la lista, oppure la fila di pillole di oggi con la scelta nel colore della categoria invece che in terracotta pieno. Consiglio il campo.
Rispondimi anche solo coi numeri («1A, 2C1, 3 primo, 4 campo»). Dopo scrivo il progetto, lo faccio e te lo mando sul telefono per provarlo prima dei tester.