Tra i molteplici elementi standard delle nostre UI, c’è un componente in particolare che apprezzo più di tutte per la sua estrema versatilità: la card.
Cosa sono esattamente le card?
Le card sono un sempreverde dell’interfaccia utente che veicolano contenuti e azioni relative a un singolo argomento.
Le troviamo ovunque: social, dashboard, landing page, usate per rispondere alle esigenze più disparate.
Questi elementi apparentemente semplici offrono un modo pratico, intuitivo e moderno per condividere informazioni sintetiche con gli utenti.
Scopriamo insieme quali sono le best practice per sfruttare al meglio questo potente elemento.
Anatomia di una card
Prima di capire cosa fare e cosa NON fare per progettare card degne di nota, facciamo un passo indietro e vediamo nel dettaglio l’anatomia di questo sdoganatissimo elemento.
È importante iniziare sottolineando una cosa: il layout di una card può variare in base all’obiettivo per cui la si progetta (prodotto, blog, esposizione dati ecc).
I componenti che vedremo ora sono quelli più comunemente diffusi:
- media: che sia una foto, una illustrazione o altro, è l’elemento visuale che accompagna il contenuto informativo
- titolo: utile ad introdurre l’argomento, guidando l’occhio dell’utente nella scansione dei contenuti presenti in pagina
- testo secondario: una breve descrizione che parla del contesto della card fornendo maggiori informazioni
- call to action: l’azione primaria verso cui vorremmo spingere il nostro utente
Do and Dont’s
So che stavate fremendo per arrivare alla ciccia, arriviamo quindi al dunque con le nostre best practice per progettare card a prova di bomba.
Contenuti visibili
Evitate lo scroll per presentare i contenuti all’interno di una card. Non aggiungete inutile complessità a un elemento di per sé semplice.
Una card dovrebbe includere solo le informazioni importanti e fornire all’utente un punto di accesso in caso in cui volesse approfondire in seguito il tema.
Border radius
Utilizzare lo stesso border radius per gli angoli della card e per gli angoli degli elementi contenuti al suo interno crea un effetto irregolare e anche un po’ bruttino.
La “regola” suggerisce di utilizzare per la smussatura degli elementi interni un raggio che sia la metà circa di quello usato per gli angoli esterni della card.
Spazio bianco
Lo spazio bianco mette in risalto i contenuti, permettendo all’utente di concentrarsi, senza rubare loro la scena.
Non è necessario utilizzare elementi grafici (es. linee) per separare gli elementi.
Lo spazio bianco svolge egregiamente questo compito, senza creare sovraccarichi cognitivi.
Ombre naturali
Le ombre sotto a una card possono aiutare a mettere in risalto l’elemento o possono suggerirne all’utente l’interattività.
Il consiglio è quello di non utilizzare le ombre di default create da programmi come Figma, optando piuttosto per ombre molto più morbide e naturali.
Immagine pertinente
L’immagine o, in generale, il media scelto, rappresenta il focus della card.
Scegliere un’immagine che sia efficace per attirare l’attenzione e che supporti in maniera coerente la spiegazione dei contenuti è importantissimo.
Link e collegamenti
Link inseriti direttamente all’interno della parte testuale richiedono un maggiore sforzo cognitivo.
La card dovrebbe fungere da collegamento o fornire un set limitato di azioni ben chiare e distinte.
Inserite piuttosto un più immediato e classico pulsante.
Le card sono davvero un elemento potente.
Semplici e moderne, possono cambiare l’aspetto delle nostre interfacce con poco.
Con un po’ di attenzione e qualche piccolo accorgimento, possiamo schivare inutili casini e progettare card efficaci e immediate.
