it-swarm-eu.dev

Come si sceglie un carattere per uno spazio estremamente limitato, ovvero si adatterà il testo più LEGGIBILE nello spazio più piccolo?

Spesso ho uno spazio molto limitato durante la creazione di report e dashboard per gli utenti. Di solito uso Arial, o Arial Narrow, ma l'interfaccia utente non è la mia area di competenza, quindi voglio sapere, come si determina un carattere ottimale per adattare il testo più leggibile nello spazio più piccolo?

Ecco un esempio: tieni presente che questo è solo un esempio, poiché ci sono molte volte che lo spazio è limitato, ad esempio quando è necessario comprimere un milione di colonne in un report, ecc.

Chart with limited space

114
richard

Dipende davvero da molti fattori, come ad esempio la frequenza di alcuni caratteri che ti aspetti e quali caratteri sono disponibili per te.

Ho fatto un rudimentale creando un programma che scorreva su tutti i caratteri disponibili che avevo installato sulla mia finestra di Windows in quel momento e stampava una linea contenente ogni carattere ASCII stampabile sullo schermo in ciascuno di questi caratteri. Ho ripetuto il test anche con dimensioni dei caratteri diverse.

I risultati mentre li ricordo erano che Segoe UI e Tahoma erano i migliori per quanto riguarda l'utilizzo dello spazio e la leggibilità per scopi di interfaccia utente a dimensioni 10pt e 9pt. A breve termine ci siamo affidati a Tahoma poiché l'interfaccia utente di Segoe non è disponibile gratuitamente per i sistemi operativi sotto Windows Vista. Se non hai bisogno di supportare Windows XP o precedente un sistema operativo Windows o un altro sistema operativo non Windows, andrei sicuramente con l'interfaccia utente di Segoe altrimenti andrei con Tahoma se è disponibile e se tutto altrimenti non riesce a provare Verdana. Vedi questo elenco per una gamma di caratteri Windows disponibili e informazioni sul miglior utilizzo di ciascuno.

Tieni presente inoltre che, a partire da Windows Vista, credo che ora Microsoft consiglia di utilizzare un carattere 9pt anziché un carattere 10pt per gli elementi dell'interfaccia utente poiché il carattere Sego UI visualizza molto più chiaro rispetto ad altri caratteri a bassa risoluzione, specialmente su schermi piatti.

A seconda della piattaforma per cui stai sviluppando, potresti anche voler esaminare la modifica delle metriche dei caratteri, se possibile. In .NET con WPF ricordo che ci sono molti modi per modificare il modo in cui viene reso il testo per consentire la condensazione dello spazio tra i caratteri e rendere i singoli caratteri più stretti. Usando questo tipo di tecnica puoi rimanere con qualunque tipo di carattere ti piaccia e basta modificare il rendering per ottenere i risultati di cui hai bisogno.

Per quanto riguarda il tuo esempio di grafico specifico che hai fornito: per questo particolare grafico consiglierei di ruotarlo in modo che il testo che più probabilmente verrà letto sia orizzontale per una lettura più naturale. Vorrei anche posizionare il numero in modo che sia all'interno di ciascuna barra del grafico a barre quando si adatta a un colore che si distingue da qualsiasi colore di sfondo sia presente, aumentando così lo spazio per altre cose come le etichette. Disporre il grafico a barre come righe faciliterebbe la lettura e, se necessario, anche la stampa su più pagine. Se un layout di riga non è possibile, la creazione di una chiave separata per ciascun elemento nel grafico sarebbe probabilmente ragionevole e in questo modo ogni barra potrebbe essere posizionata più vicino insieme per risparmiare spazio. La chiave consentirebbe ad ogni barra di essere etichettata come A, B, C ... o 01, 02, 03 ... per esempio e la chiave (disposta in file altrove) fornirebbe informazioni più dettagliate su ciascuna.

Ricorda, un grafico o un diagramma è utile principalmente per ottenere informazioni visive rapide. Se diventa un onere eccessivo per l'utente/lettore, probabilmente è meglio semplificarlo, consolidare alcuni dettagli del grafico o fornire semplicemente più dati grezzi in una forma più tabulare.

Ecco un semplice elenco che mostra i caratteri Arial, Segoe UI e Tahoma di varie dimensioni. Si noti che lo spazio relativo occupato da ciascun carattere è diverso in punti di dimensioni diverse. enter image description here

Aggiornamento: Ho aggiunto un altro confronto di seguito che mostra un elenco più completo di caratteri comuni tra cui lettere maiuscole e minuscole in ciascuno dei caratteri precedentemente menzionati con l'aggiunta di Verdana e MS Sans Serif (font UI predefinito in Windows prima di Windows 2000). Sfortunatamente e in risposta alla raccomandazione di bobsoap per l'uso di Verdana, è abbastanza chiaro che Verdana è il peggiore rispetto agli altri caratteri a 9pt, anche se tieni presente che questo potrebbe non valere per altre dimensioni in punti. Inoltre, la dimensione non è necessariamente sempre il dettaglio più importante, a volte è più importante che un carattere sia leggibile a dimensioni ridotte rispetto al fatto che sia più compatto rispetto a un altro carattere.

enter image description here

94
jpierson

Lo stai facendo male.

In generale, c'è un "altro modo". Le risposte a questa domanda sono tutte fantastiche, ma onestamente, dovresti guardare tutte le diverse opzioni. Spremere più testo nel minor spazio possibile sempre significa che hai sbagliato una scelta di design precedente.

  • Forse avresti dovuto capovolgerli come barre orizzontali, dandoti MODO più spazio con cui lavorare.
  • Forse non avresti dovuto andare con un grafico a barre, o non avresti dovuto andare con i grafici in primo luogo.
  • Forse il problema sono i dati reali e potresti aver dovuto dividerli ulteriormente!
  • Potrebbe essere utile una barra laterale o una legenda/indice
  • Hovers potrebbe funzionare per la versione online

Ci sono così tante opzioni, assicurati di usare quella giusta. Comprimere quante più informazioni possibili in una singola piccola area è sempre la strada sbagliata da percorrere. L'informazione ha bisogno di spazio per respirare, per essere leggibile, per essere scansionabile e riconoscibile.

Sì, questo in genere significa utilizzare molto più spazio. Ma non è una brutta cosa. Ci vorrà meno sforzo per la persona che consuma i dati per scansionare rapidamente un paio di pagine piene di informazioni ben strutturate, piuttosto che capire cosa significhi quella barra su quel rapporto di una pagina. Pensa al vecchio membro del consiglio, intascando i suoi occhiali da lettura mentre passa il foglio alla persona accanto a lui: "Non riesco a leggere questo - che cosa dice?"

Mi scuso per la durezza e il leggero titolo ironico, ma vedo la risposta migliore e sento solo che la parte "ha bisogno di un approccio diverso" ha bisogno di più elaborazione.

. Edit:

Dato che questa è una risposta molto contestata e abbastanza in conflitto con la domanda originale, ritengo di dover elaborare il ragionamento alla base della sua pubblicazione.

Prima di tutto: questa non è una domanda UX, è una questione di progettazione grafica o tipografia.

Ci sono ipotesi in questa domanda, la più grande è che la "soluzione corretta" a questo problema di UX è un piccolo testo. Ma non lo è. Il testo piccolo diventa illeggibile, un problema aggravato da tablet e altri dispositivi mobili. Cosa succede se il tuo utente ha problemi di vista? Che cosa succede se viene mostrato su un monitor più vecchio, con una risoluzione inferiore? E se ci fosse bagliore dal sole o da una luce? Tanti motivi per cui il testo piccolo può essere illeggibile.

Pertanto, questa risposta è qui per aiutare la prossima persona che ha questo problema a essere consapevole di non commettere lo stesso errore.

... detto questo - apprezzo molto che la persona che pone la domanda semplicemente non abbia risorse per nient'altro che un cambio di carattere :) Siamo stati tutti lì e ci saremo tutti di nuovo!

TLDR: Ho trattato questa domanda nel modo in cui Henry Ford ha trattato la richiesta di cavalli più veloci. (Dichiarazione di non responsabilità: non sono Henry Ford)

44
Dirk v B

Coda

A volte un carattere più piccolo è un buon modo per uscire da un punto stretto. In questo caso particolare, almeno per la parte del problema mostrato, esiste una soluzione migliore che è sia più chiara che occupa metà dello spazio, in questo modo:

Lastname, Firstname

Sto usando un carattere abbastanza grande, 18pt Tahoma (apri l'immagine in una nuova scheda per visualizzare a schermo intero), che lo spazio negativo per le lettere sia OK.

24
James Crook

Presumendo che ti riferisca all'uso a schermo su un display convenzionale (~ 96 DPI) rispetto a qualcosa come un display Retina e hai un sistema con anti-aliasing sub-pixel, quello che stai cercando è un font con pixel formidabili suggerimento . Il suggerimento è l'arte di prendere le curve vettoriali progettate per l'uso della stampa e di personalizzarne la forma per punti di dimensioni diverse, in genere per allineare parti principali del carattere tipografico alla griglia di pixel. Si tratta di scendere a compromessi tra l'aspetto del carattere (il suo carattere se lo si desidera) con la griglia di pixel rigida e spietata. Tali compromessi diventano progressivamente più gravi man mano che si riduce, poiché la griglia di pixel fornisce successivamente meno pixel da compilare.

Molti caratteri sono stati esplicitamente progettati per l'uso su schermi di computer (generalmente indicati come caratteri dello schermo ). Il set di caratteri tipografici di Matthew Carter; Verdana , Tahoma , Georgia et al sono ottimi esempi; sono stati progettati fin dall'inizio pensando alla griglia dei pixel. Ciò li rende intrinsecamente buoni per l'uso in formati più piccoli (ma generalmente li rende un po 'imbarazzanti nella stampa).

In generale, a dimensioni in punti piccoli (ricordando che le dimensioni in punti si riferiscono a altezza), raccomanderei Verdana perché ha a molto alto altezza x che fornisce ampio aperto contatori. Ciò lo renderà più largo di alcuni altri caratteri, che non è quello che stai cercando (basato sui tuoi esempi).

Caratteri come Segoe UI , Tahoma e MS Sans Serif sono tutti progettati come versatili caratteri dello schermo (essendo i caratteri tipografici predefiniti per Windows Vista/7, Windows XP e versioni precedenti di Windows rispettivamente) , quindi sono buone scelte a tutto tondo (con l'interfaccia utente di Segoe che è l'unica progettata pensando ai sub-pixel ed è la scelta più moderna).

Ci sono due fattori che dovrebbero essere considerati anche quando si seleziona un carattere; se stai eseguendo il tipo verticalmente l'antialiasing sub-pixel è naturalmente diverso, e generalmente il suggerimento pixel inizia a sembrare un po 'peggio (poiché è probabile che i progettisti del tipo non abbiano testato le loro facce in verticale). Se stai eseguendo i caratteri in diagonale o altrimenti non nella griglia dei pixel, i pixel hinting vengono tutti buttati fuori dalla finestra.

Per una spiegazione molto dettagliata di suggerimenti sui pixel, rasterizzazione e tutto il resto, non esiste un riferimento migliore di questo fantastico sito .

Se c'è qualche interesse, aggiungerò un paragrafo o due sulle scelte di stampa per un tipo molto piccolo, ma non c'è molto che potrei aggiungere oltre questo articolo straordinariamente buono .

15
Kit Grose

È importante specificare quale dimensione stai cercando di ottimizzare. Stai cercando di ridurre le dimensioni in orizzontale (linee più corte) o anche in verticale? Se stai cercando di ottimizzare la larghezza orizzontale, dovresti cercare un tipo di carattere condensato. Arial Narrow e Helvetica Condensed sono due opzioni ovvie, ma non le trovo molto leggibili e sembrano poco costose.

Per sans-serif simili ad Arial/Helvetica, ma più stretti, dai un'occhiata a:

Myriad Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive e il nuovo font Adobe Sans Source.

In un confronto che ho fatto con i numeri, ho scoperto che Myriad Pro, Source Sans Pro, UI Segoe e Tahoma sono i migliori per la leggibilità con una larghezza minima di 9px-11px. Si noti che questi caratteri gestiscono le dimensioni in modo molto diverso, quindi spesso è necessario incorporare un offset di dimensione per fare un confronto equo.

Anche Lato può funzionare bene. Asana usa Proxima Nova, che è molto aperta e leggibile a dimensioni ridotte, ma non sembra grande in una dimensione più grande mentre la usano.

Ecco il confronto che ho fatto con tutto a 10px. È meglio giocare in questo modo da soli, tuttavia, poiché la modifica della dimensione del carattere spesso ha un effetto non lineare su queste piccole dimensioni.

font comparison at 10px

Altri hanno menzionato Verdana. Verdana è molto leggibile a dimensioni ridotte, ma non ottimizza affatto la larghezza. Detto questo, un carattere di grandi dimensioni che è leggibile a piccole dimensioni ottimizza l'altezza piuttosto che la larghezza, e forse questo è ciò che stai cercando, ma sul web in cui lo scorrimento verticale è più naturale dello scorrimento orizzontale, di solito non è così .

La mia preferenza personale è per Arial sullo schermo e se sto cercando un aspetto meno neutro o se devo ottimizzare la larghezza, potrei guardare l'interfaccia utente di Sans Sans Pro o Segoe.

9
terrace

Ho sempre amato l'interfaccia utente di Segoe, ma recentemente ho dovuto ammettere che Arial è in realtà più leggibile (sussulto) in molti casi. Se non mi credi, confronta 12px Arial con 12px Segoe UI in una griglia piena di dati numerici. Arial sembra brillare. Anche il testo di esempio mostrato nella risposta originale mostra chiaramente l'Arial come più facile da leggere. È brutto ma più leggibile. Molto di questo è solo la sottile differenza di dimensioni.

Inoltre ... Quando porti Segoe a 13px e oltre, i numeri iniziano davvero a sembrare strani. Alla fine la maggior parte delle applicazioni sono guidate dai dati. Crea una griglia piena di dati. Passa tra i due e chiedi ad alcune persone che è più facile da leggere ??? Hmmm ..

Se stai leggendo un testo semplice (senza numeri) a 11px, penso che Segoe sia più facile da leggere. Ma, chiunque abbia deciso che l'interfaccia utente di Segoe sia un carattere tutt'altro che semplice da leggere rispetto a Arial ... Mi piacerebbe vedere dove hanno ottenuto questi dati. Ho chiesto a molte persone e tutti pensano che Arial sia più leggibile per i dati a 12px (9pt) (incluso me stesso).

Ci sono molte intrazioni con i caratteri anche per quanto riguarda il colore dei caratteri. Segoe sembra leggermente più leggero ... (# 333333 o # 212121) di solito è buono. Arial sembra troppo difficile da leggere con questi colori e di solito è meglio con il nero solido. L'interfaccia utente di Segoe ha troppi contrasti e tende a sembrare occupata dal nero solido.

Trovo che arial sia più leggibile di Tahoma personalmente. Se stai solo parlando di leggibilità diretta. Tahoma potrebbe apparire migliore nell'interfaccia di Windows, ma questa è una cosa estetica.

Spaziatura, colore del carattere e dimensione del carattere cambiano tutto. Non lasciare che nessuno ti dica che l'interfaccia utente di Segoe è un font migliore. È meglio per alcuni casi, ma non tutti. È sicuramente attraente però.

6
KingOfHypocrites

Different fonts in different sizes

Arial Narrow e Tahoma sembrano essere i migliori.

4
Fubz

Nella mia esperienza, Avenir Next Condensed è meravigliosamente chiaro, pur occupando pochissimo spazio. Rispetto ad Arial Narrow, occupa meno spazio ed è più facile da leggere.

Visual comparison of Arial Narrow and Avenir Next Condensed

2
McHobbes

Ho riscontrato un problema in cui l'ottimizzazione dello spazio dei caratteri era un fattore importante con alcuni software che utilizzo su Mac (Soundminer, su OS X Mavericks 10.9.5, ma immagino che potrebbero essere informazioni utili per altri software Mac e versioni future di OS X anche). Il programma elenca i metadati del file con righe ad altezza fissa e consente all'utente di scegliere l'altezza della riga e la dimensione del carattere. Il ritorno a capo automatico è un'opzione, ma l'altezza della riga non verrà regolata per adattare automaticamente il contenuto di ogni cella.

Dopo aver esaminato tutte le diverse centinaia di caratteri sul sistema, quello che si adattava alla maggior parte dei dati dei caratteri all'interno della minima quantità di spazio, pur rimanendo leggibile era (sorprendentemente) Simboli Apple. Con la dimensione del carattere impostata su 12 e un'altezza di riga di 22, posso adattare comodamente due righe di testo e più caratteri rispetto a qualsiasi altro carattere (stessa dimensione o inferiore) mantenendo comunque una facile leggibilità da una posizione fino a 3 'o giù di lì dal display.

Speriamo che questo si riveli utile a qualcun altro là fuori con lo stesso (o simile) problema.

2
EarHax

La maggior parte delle risposte qui dovrebbero essere usate solo come suggerimenti di possibili caratteri da usare. Dopo la leggibilità, è una questione di gusti. (Nel commento che ha detto che Verdana era chiaramente la scelta peggiore, mi è piaciuta di più.) Provo spesso 8 o 10 caratteri diversi e poi decido quale mi sembra migliore. Una scelta dipende anche dal contesto. Sono sicuro che tutti userebbero caratteri diversi per i biglietti da visita per un negozio di biancheria e un'acciaieria. Tutto il BS su serif e sans serif è una perdita di tempo. Basta usare ciò che sembra buono, non importa quale sia.

Concordo sul fatto che l'obiettivo non dovrebbe essere quello di stipare nel testo quante più informazioni possibili. La maggior parte delle persone non leggerà tutto o nemmeno molto. Cercheranno i punti chiave e, se quelli sono di interesse, potrebbero leggere le parti rimanenti o, meglio ancora, chiamare per ulteriori informazioni.

1
c.j.

Arial Narrow. Divertente, nessuno l'ha menzionato (A colpo d'occhio attraverso la risposta). L'ho usato con buoni risultati in tutte le app MS. Neeraj.

1
Neeraj

Trovo che Verdana sia ideale per caratteri di piccole dimensioni (non tanto per quelli più grandi). Oppure, se è possibile, è possibile utilizzare un carattere pixel.

0
bobsoap