Tab

Cosa sono le tab

Le tab sono elementi che servono a organizzare contenuti correlati all’interno della stessa pagina. Ogni tab ha un’etichetta: quando l’utente la seleziona il pannello corrispondente diventa visibile, mentre gli altri rimangono nascosti ma immediatamente raggiungibili.;

Le etichette devono descrivere con precisione il contenuto della scheda, essere brevi e leggibili a colpo d’occhio, così l’utente capisce subito dove trovare l’informazione di cui ha bisogno.

Le tab separano sezioni di contenuto, non avviano azioni né sono i passaggi di un processo (per i flussi multi-step usa lo stepper ).

Istruzioni operative

Etichette delle tab

Le etichette orientano: devono far capire prima del clic cosa si troverà nella scheda. Devono essere specifiche, brevi e coerenti tra loro. Mantieni la stessa grammatica all’interno del gruppo e usa sempre la stessa terminologia per gli stessi concetti.    

• Usa sostantivi o locuzioni nominali che descrivono il contenuto, ad esempio “Mandati”, “Dettagli di pagamento”, “Normativa”).
• Evita verbi e inviti all’azione come “Apri”, “Vai a”, “Clicca qui”: la tab non è una CTA.
• Sii concreto e predittivo: l’etichetta deve corrispondere al contenuto del pannello: stesso tema, nessun sinonimo gratuito.
• Tieni le etichette corte: idealmente una o due parole coincise.
• Mantieni parallelismo: o tutte nominali, come “Mandati”, “Rendicontazione”, “Riepilogo” oppure tutte verbali solo se davvero necessario e con lo stesso schema, ad esempio “Verifica dati”, “Confronta movimenti”, “Esporta report”.

Corrispondenza con il contenuto del pannello

La tab promette un contenuto: il pannello deve mantenere quella promessa. Etichetta e titolo o segnalatore del pannello devono essere coerenti: possono differire nella forma, non nel significato.    

• Allinea l’etichetta al titolo del pannello, per garantire corrispondenza semantica immediata.
• Evita sinonimi gratuiti tra tab e pannello.
• Se la tab include un conteggio, il pannello deve renderne evidente la base. Ad esempio “Messaggi (3)” sta a significare un elenco con 3 elementi.

Gestione della lunghezza delle etichette

Quando un’etichetta di tab non entra nello spazio disponibile, accorciala riscrivendo il testo. Non spezzare le parole e non inventare sigle. L’obiettivo è conservare il significato: l’utente deve capire subito cosa contiene la scheda, anche in spazi stretti.    

• Riduci nel contenuto, non nella forma. Taglia parole non fondamentali (“Dettagli su”, “Informazioni su”), evita abbreviazioni poco parlanti e parole troncate.
• Mantieni la naturalezza sintattica. Non tagliare preposizioni quando servono a chiarire. Se la locuzione è lunga, riscrivila in modo breve e naturale.
• Usa solo sigle ufficiali e note nel dominio (ad esempio “CUP”, “CIG”, “SPID”, “CIE”). Evita acronimi inventati.
• Se l’etichetta viene troncata con ellissi, mostra in un tooltip l’etichetta completa e identica alla versione estesa. Il tooltip serve far leggere la scritta per intero, non a cambiarla.

Tab con conteggio

Quando l’etichetta ha un numero, come “Messaggi (3)”, la scrittura deve restare pulita e predittiva.    

• Inserisci il conteggio tra parentesi senza spazi inutili, ad esempio “Richieste (12)”.
• Non unire testo che spiega il numero nell'etichetta. Evita “in attesa”, “nuove”: queste informazioni saranno presenti nel contenuto.

Lessico e stile

Le tab si leggono rapidamente: le etichette devono essere uniformi e prevedibili.    

• Stile frase: usa l'iniziale maiuscola solo nella prima parola della frase e nei nomi propri. Evita il Title Case, ovvero la prima lettera maiuscola per ogni parola del titolo.

• Taglia gli articoli non necessari, ma non tagliare le preposizioni.

• Evita inglesismi se esiste un equivalente italiano chiaro.

• Nessuna punteggiatura finale.

• Coerenza terminologica. Lo stesso termine deve avere lo stesso significato in tutto il portale.