Quanto Basta · concept · elenco a due viste

Le due viste dell'elenco

Tre disegni per la vista a righe con la foto a sinistra, e tre per la vista a griglia con le tessere tutte uguali. Come nella schermata principale, sceglie l'utente con un comando in alto a destra.

Cosa prendo da GialloZafferano

  • La foto grande e la scheda bianca staccata dal fondo: dà alla ricetta la dignità di un oggetto invece che di una riga.
  • Le due viste commutabili dallo stesso posto, in alto a destra accanto al titolo.
  • I dati con l'icona sotto il titolo, che si leggono a colpo d'occhio senza doverli decifrare.

Cosa non posso prendere

  • I loro numeri sono 1053 salvataggi e 4,3 stelle: dati che hanno perché sono un sito con milioni di persone. Il tuo ricettario è tuo, non ha voti né commenti, e quello spazio va riempito con quello che abbiamo: ingredienti, porzioni, categoria.
  • Il cuoricino «salva» non serve: le ricette sono già tue.
  • Il buco verticale nella loro riga compatta — guarda «Spaghetti alle vongole»: titolo in alto, numeri in fondo, e in mezzo il vuoto. Nasce dall'altezza dettata dalla foto e non dal contenuto. Qui il testo sta centrato e il buco non c'è.
Foto
Tema

La vista a righe

Foto a sinistra, titolo e dati a destra, tutta la larghezza. È la vista da leggere: il titolo resta lungo quanto serve e la foto non lo comprime.

9:41
arrow_backTutte le ricettegrid_view
search Cerca una ricetta
cake
Baci di Dama (Angela)
list_alt8restaurant35cakeDolci
soup_kitchen
Besciamella
list_alt5soup_kitchenSalse
cookie
Biscotti al limone
list_alt7restaurant40cakeDolci
cake
Ciambella Bertolini
list_alt6restaurant30cakeDolci
inbox
Empanadas
list_alt7restaurant4
+
Righe · A

La scheda-riga

La più vicina a quello che ti piace: scheda bianca staccata dal fondo, foto a filo del bordo sinistro, e sotto il titolo i nostri dati al posto dei loro voti — ingredienti, porzioni, e la categoria come pastiglia colorata piccola.

Densità
Cinque ricette per schermata, contro le sette di adesso. La foto costa due ricette.
Senza foto
Al posto della foto la pastiglia della categoria, larga uguale: la scheda non si sfonda e i titoli restano incolonnati.
Costo
Un giorno, contando la pastiglia della categoria dentro la riga.
Il rischio
Con la categoria ripetuta su ogni riga si affolla, e dentro una categoria sarebbe la stessa parola cinque volte. La pastiglia va mostrata solo guardando tutte le ricette insieme.
9:41
arrow_backTutte le ricettegrid_view
search Cerca una ricetta
cake
Baci di Dama (Angela)
list_alt8 ingredientirestaurant35
soup_kitchen
Besciamella
list_alt5 ingredienti
cookie
Biscotti al limone
list_alt7 ingredientirestaurant40
cake
Ciambella Bertolini
list_alt6 ingredientirestaurant30
inbox
Empanadas
list_alt7 ingredientirestaurant4
inbox
Farinata
list_alt3 ingredientirestaurant14
+
Righe · B

La riga senza scheda

Stessa struttura, ma senza il riquadro bianco: la foto è un quadrato arrotondato appoggiato sul fondo crema, e il titolo si prende più larghezza perché non ci sono margini di scheda da pagare due volte.

Densità
Sei ricette per schermata: una in più della scheda, a parità di foto.
Senza foto
La pastiglia della categoria. È esattamente la proposta della miniatura che ti ho già mostrato, e vale come ponte fra le due.
Costo
Mezza giornata: è il disegno di adesso con la foto più grande.
Il rischio
Senza la scheda la ricetta è meno «un oggetto», e la foto sembra appoggiata lì invece che parte di qualcosa. È il punto in cui si allontana da quello che ti è piaciuto.
9:41
arrow_backTutte le ricettegrid_view
search Cerca una ricetta
cake
Baci di Dama (Angela)
8 ingredienti · 35 porzioni
soup_kitchen
Besciamella
5 ingredienti
cookie
Biscotti al limone
7 ingredienti · 40 porzioni
cake
Ciambella Bertolini
6 ingredienti · 30 porzioni
inbox
Empanadas
7 ingredienti · 4 porzioni
ramen_dining
Minestra di zucca
6 ingredienti · 2 porzioni
+
Righe · C

La riga col filetto

Scheda bianca come la A, ma la categoria non è una pastiglia da leggere: è un filetto di colore sul bordo sinistro, alto quanto la scheda. Si vede scorrendo, non occupa una parola, e libera la riga sotto il titolo per i due numeri scritti per esteso.

Densità
Sei ricette per schermata: la scheda è più bassa perché il testo è su due righe invece che su tre.
Senza foto
Resta il filetto colorato più la pastiglia: la categoria si legge due volte, ed è una in più. Andrebbe tenuto solo il filetto.
Costo
Un giorno.
Il rischio
Un filetto colorato sul lato di una scheda è il vezzo grafico più abusato degli ultimi anni: si vede su ogni pannello di controllo e su ogni riquadro di avviso. Qui almeno dice qualcosa di vero, ma è il punto in cui questo campionario somiglia di più a mille altre app.

La vista a griglia

Due colonne, tessere tutte della stessa altezza — niente mosaico sfalsato: le foto vengono ritagliate in un rettangolo fisso, e le righe restano allineate. È la vista da guardare.

9:41
arrow_backTutte le ricetteview_list
search Cerca una ricetta
cake
Baci di Dama (Angela)
list_alt8restaurant35
soup_kitchen
Besciamella
list_alt5
cookie
Biscotti al limone
list_alt7restaurant40
cake
Ciambella Bertolini
list_alt6restaurant30
+
Griglia · A

La tessera

Foto in alto, titolo e dati sotto su fondo bianco. L'altezza è fissa e uguale per tutte, così le righe si allineano e l'occhio scorre in orizzontale come si aspetta. È la trasposizione a due colonne della loro scheda grande.

Densità
Quattro ricette per schermata e mezza fila della quinta: praticamente come la vista a righe, ma con la foto due volte più grande.
Senza foto
La testa della tessera diventa la tinta della categoria con la sua icona grande. È lo stato vuoto più dignitoso delle sei proposte: sembra una scelta, non una mancanza.
Costo
Un giorno, e riusa il ritaglio della foto che c'è già.
Il rischio
«Baci di Dama (Angela)» sta su due righe e riempie tutto lo spazio del testo; un titolo più lungo si tronca. E l'altezza fissa vuol dire ritagliare la foto: una torta alta viene tagliata in cima e in fondo.
9:41
arrow_backTutte le ricetteview_list
search Cerca una ricetta
cake
Baci di Dama (Angela)
list_alt8restaurant35
soup_kitchen
Besciamella
list_alt5
cookie
Biscotti al limone
list_alt7restaurant40
cake
Ciambella Bertolini
list_alt6restaurant30
+
Griglia · B

La tessera piena

La foto riempie tutta la tessera e il titolo ci sta sopra, su una sfumatura scura. A parità di ingombro l'immagine è quasi il doppio, perché non deve dividere lo spazio col testo.

Densità
Quattro ricette e mezzo, come la A, ma con la foto molto più grande.
Senza foto
La tessera si accorcia e diventa un rettangolo di tinta con l'icona e il titolo in nero. Regge, ma quattro tessere colorate vuote sono parecchio colore.
Costo
Un giorno.
Il rischio
Il testo bianco su foto è leggibile solo grazie al velo scuro, e su una foto già scura in fondo il titolo fatica. È l'unica proposta in cui il contrasto non lo posso garantire con un calcolo: dipende dalla fotografia, e le fotografie le fai tu.
9:41
arrow_backTutte le ricetteview_list
search Cerca una ricetta
cake cakeDolci
Baci di Dama (Angela)
8 ingr. · 35 porz.
soup_kitchen soup_kitchenSalse
Besciamella
5 ingr.
ramen_dining ramen_diningPrimi
Minestra di zucca
6 ingr. · 2 porz.
inbox
Empanadas
7 ingr. · 4 porz.
+
Griglia · C

La tessera con la marca

Come la A, ma la categoria è una marca colorata appoggiata sull'angolo della foto. Guardando tutte le ricette insieme si vede da dove arriva ognuna senza rubare la riga dei dati, e chi categoria non ne ha semplicemente non ha la marca.

Densità
Quattro e mezzo, come le altre due.
Senza foto
La marca finisce sopra la tinta della categoria: stesso colore due volte, che è di troppo. Senza foto la marca va nascosta, perché la testa colorata dice già tutto.
Costo
Un giorno e mezzo: la marca ha regole sue in tre casi diversi.
Il rischio
Una pastiglia chiara appoggiata su una foto chiara sparisce. Servirebbe un'ombra o un velo sotto la marca, e sono i cerotti che si mettono quando un elemento sta in un posto che non è suo.