Come mostrare una collezione crescente di piccoli cuccioli virtuali

I piccoli cuccioli sono elementi principalmente visivi, quindi una griglia regolare è un ottimo punto di partenza. Utilizza celle di dimensioni uguali e mantieni un ordine di lettura costante da sinistra a destra, poi dall'alto verso il basso. Ciò fa sì che ogni nuovo cucciolo occupi una posizione prevedibile e aiuta il collezionista a esplorare rapidamente la galleria. Apple raccomanda layout familiari a righe o a griglia per le collezioni visive, mentre Material Design descrive i riquadri a griglia leggeri come adatti alle gallerie di immagini. (Apple Human Interface Guidelines: Collections; Material Design: Cards)

Offri a ciascuna cella spazio sufficiente per l'immagine del cucciolo e per il suo nome. Se il nome, il tipo o un breve stato devono comparire accanto a ogni cucciolo, usa un riquadro semplice con una chiara gerarchia invece di aggiungere una scheda completa di bordi, pulsanti ed elementi decorativi. Le linee guida di Material distinguono le gallerie di immagini dalle schede, che risultano più utili quando gli elementi presentano contenuti o azioni eterogenei. Per un insieme di cuccioli perlopiù uniforme, gli elementi superflui della scheda distolgono l'attenzione dalla collezione.

Una griglia non può mostrare tutti i cuccioli contemporaneamente una volta che la collezione supera l'area disponibile sullo schermo. Scegli un obiettivo primario: visualizzare il maggior numero possibile di elementi a colpo d'occhio, trovare rapidamente uno specifico cucciolo per nome oppure godersi una presentazione in evidenza. Questi obiettivi portano a layout differenti.

Obiettivo principale	Scelta di visualizzazione utile	Compromesso
Esplorare molti cuccioli	Griglia compatta e regolare	I singoli cuccioli hanno meno spazio
Trovare un cucciolo noto	Griglia con ricerca o ordinamento alfabetico	I comandi occupano parte dello spazio sullo schermo
Mostrare alcuni preferiti	Riga in evidenza o area di visualizzazione più ampia sopra la griglia	Una porzione maggiore dell'intera collezione si trova più in basso
Confrontare i dettagli dei cuccioli	Vista a elenco o di dettaglio	Meno cuccioli rientrano nella vista iniziale

Considera l'area in evidenza come una piccola finestra sulla collezione, non come un suo sostituto. Ad esempio, mostra una manciata di preferiti in alto, mantenendo l'intera griglia subito sotto. L'esempio di galleria adattiva di cuccioli di Android impiega un'area in evidenza di rilievo e una griglia in grado di mostrare più cuccioli man mano che il layout offre maggiore spazio. Questo approccio supporta la scelta progettuale generale di dare priorità visiva a un'area in evidenza, conservando al contempo una galleria navigabile al di sotto. (Android Developers: Furry friends and adaptive APIs)

Quando la griglia diventa lunga, dividila utilizzando categorie che riflettano il modo in cui un collezionista pensa ai cuccioli. Tra le possibili scelte figurano la specie o il mondo di appartenenza, il set di appartenenza, la famiglia di colori o il periodo di acquisizione: utilizza solo categorie effettivamente presenti nella collezione. Inizia con un numero ridotto di gruppi. Troppe sezioni minuscole possono dare la sensazione di navigare tra collezioni separate.

Mantieni una vista predefinita chiara ed evidente, come "Tutti i cuccioli", e rendi visibile il gruppo attivo. Se i cuccioli possono appartenere a più di un gruppo, un filtro risulta solitamente più chiaro rispetto alla duplicazione dello stesso cucciolo in più sezioni. Se ciascun cucciolo appartiene a un solo gruppo ben definito, suddividerli in sezioni etichettate può rendere l'intera collezione più facile da scorrere. Si tratta di applicazioni pratiche dell'organizzazione dei contenuti in base alla loro struttura; il miglior raggruppamento dipende dagli attributi reali della collezione, non da uno schema di categorizzazione universale.

L'immagine di un cucciolo può essere riconoscibile per il suo proprietario, ma i nomi aiutano a orientarsi quando la collezione cresce e a distinguere varianti simili. Inserisci un nome breve direttamente sotto ciascuna miniatura. Se due cuccioli possono avere lo stesso nome, aggiungi un identificatore secondario sintetico, come il loro set o la loro forma. Evita di inserire statistiche multiple, badge e comandi in ogni riquadro: questi dettagli entrano in competizione con l'immagine e rendono la griglia più caotica.

Se la visualizzazione fa parte di un sito web o di un'app, assicurati che l'identità del cucciolo sia accessibile sia come testo che come immagine. Le linee guida W3C stabiliscono che le immagini informative necessitano di alternative testuali che trasmettano le informazioni rilevanti; quando un'etichetta adiacente fornisce già le stesse informazioni, ripeterle nel testo alternativo dell'immagine potrebbe essere superfluo. In pratica, abbina un nome visibile a un'etichetta di accessibilità appropriata ed evita che un cucciolo distintivo sia identificabile solo dal colore o dall'immagine. (W3C WAI: Images Tutorial)

Sfrutta la larghezza disponibile per variare il numero di colonne, anziché forzarne uno fisso su ogni schermo. Un telefono compatto potrebbe mostrare due colonne; uno schermo più ampio può mostrarne di più, a patto che ogni immagine e nome rimanga leggibile. Mantieni una spaziatura coerente e preserva lo stesso ordine di base quando il layout si riorganizza. L'esempio di responsive design di Android descrive una galleria a due colonne su schermi compatti, mostrando più contenuti man mano che c'è più spazio disponibile. (Android Developers: Furry friends and adaptive APIs)

Controlla la resa visiva alle dimensioni più ridotte che gli utenti potrebbero verosimilmente usare e su desktop a larghezza piena. Presta attenzione a nomi troncati, immagini che perdono i loro dettagli distintivi, riquadri con altezze irregolari o comandi che vanno a capo in modo disordinato. Se un cucciolo richiede un nome più lungo, consenti espressamente una seconda riga o tronca il testo in modo coerente offrendo la possibilità di visualizzare il nome completo; evita che una singola voce atipica deformi l'intera griglia.

Per una collezione contenuta, scorrere una singola griglia può essere sufficiente. Aggiungi la ricerca quando gli utenti devono trovare un cucciolo specifico all'interno di un elenco più lungo. Aggiungi l'ordinamento quando l'ordine è importante, ad esempio in ordine alfabetico o per data di aggiunta. Aggiungi filtri solo per gli attributi che aiutano a differenziare gli elementi. Posiziona questi controlli sopra i risultati e mostra l'ordinamento o il filtro selezionato, in modo che la visualizzazione corrente sia chiara. Le linee guida di Material relative alle collezioni posizionano filtri e ordinamento all'esterno delle schede stesse, mantenendo l'attenzione degli elementi focalizzata sul rispettivo contenuto. (Material Design: Cards)

Evita di affidarti a uno scorrimento infinito privo di indicazioni sull'avanzamento. Un conteggio visibile degli elementi della collezione, intestazioni di sezione o un chiaro comando "mostra altro" possono aiutare a capire quanto resta da visualizzare. Si tratta di indicatori facoltativi e non di requisiti assoluti; scegli l'opzione più leggera che permetta all'utente di orientarsi senza appesantire visivamente l'interfaccia.

Aggiungi alcuni cuccioli rappresentativi, inclusi quelli dall'aspetto simile e quello con il nome più lungo, quindi esamina la collezione alle larghezze tipiche di smartphone e desktop. Chiediti: è possibile riconoscere ogni cucciolo, leggerne il nome, capire il raggruppamento o l'ordinamento attuale e raggiungere l'intera collezione senza dover tirare a indovinare? Si riesce a trovare un cucciolo familiare senza dover scorrere ogni singolo elemento? Le immagini continuano a essere il punto focale?

Se il riconoscimento risulta difficile, ingrandisci i riquadri o riduci i dettagli visibili. Se trovare gli elementi è complicato, introduci una ricerca per nome o un criterio di ordinamento sensato. Se la prima schermata sembra sovraccarica, riserva una piccola area per gli elementi in evidenza e mantieni l'intera collezione al di sotto. Apporta una modifica alla volta e ripeti il controllo man mano che la collezione si espande; il layout corretto è quello che continua a supportare il compito effettivo dell'utente alle dimensioni e alla densità in cui viene visualizzato.

• Apple Developer, "Collections" — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, "Cards" — https://m1.material.io/components/cards.html
• Android Developers, "Furry friends and adaptive APIs" — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, "Images Tutorial" — https://www.w3.org/WAI/tutorials/images/