risposta-alla-domanda-sullo-sviluppo-web-bd.com

Mostra grandi numeri in una piccola area

Sto sviluppando un'app di contabilità in cui visualizzo diversi ordini. Ogni ordine ha un prezzo. Ho una casella in cui vorrei visualizzare il prezzo come mostrato di seguito:

enter image description here

Funziona abbastanza bene per numeri abbastanza piccoli ma non appena inizio ad avere numeri grandi la scatola non è più adatta:

enter image description here

Una soluzione che ho trovato è quella di visualizzare solo migliaia come mostrato di seguito:

enter image description here

  • Ad alcuni dei miei utenti non piace la lettera K che indica migliaia.
  • Alcuni di loro vogliono il prezzo esatto e tutte le cifre contemporaneamente.

Fare il ridimensionamento della scatola per adattarsi a tutte le cifre del prezzo non è un'opzione in quanto ciò renderà alcune delle scatole più grandi delle altre e la simmetria andrà persa.

Esistono altri modi per gestire questo tipo di problema?

47
GETah

La migliore soluzione sarà quella di aumentare la dimensione della scatola . Se riesci a farlo senza cambiare il layout, è buono.

Per ridurre la dimensione del carattere , suggerirei di utilizzare una singola dimensione anziché scendere. È più facile da leggere.

E, se vuoi fare rappresentazioni 'k' , assicurati che l'utente abbia un modo per accedere al numero effettivo, tramite una descrizione comando o qualche altro segnale .

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

67
rk.

Il layout dovrebbe supportare i tuoi contenuti. Primo contenuto, quindi layout appropriato. Non puoi facilmente rompere i vincoli fisici (come lo schermo piccolo), ma forse anche il tuo numero più grande potrebbe essere posizionato come linea separata sullo schermo più piccolo.

Inoltre consiglierei di tenere a mente tre fasi relative al software:

  1. Utile (Funzionalità)
  2. Utilizzabile (usabilità)
  3. Estetica

L'ordine è importante, quindi non lasciare che l'estetica superi la funzionalità e l'usabilità.

38

Qualcosa che viene fatto qui in stackexchange è sando i colori in combinazione con k's per visualizzare il peso (e sto indovinando anche m's).

Guarda come diversi colori rappresentano un peso diverso, in combinazione con le k, stai ricevendo qualcosa che è inconfondibilmente utilizzabile e comprensibile

colors to display weight

Ulteriori letture: hai preso in considerazione l'aggiunta di una descrizione comando/popover che rappresenta il numero esatto?

enter image description here

33
Itai Sagi

Rendi la scatola abbastanza grande da contenere qualsiasi prezzo probabile.

Se la tua app ha prezzi che possono arrivare a sei cifre, rendi il box abbastanza grande da prendere un prezzo a sei cifre. Fallo anche se devi modificare il layout, anche se gli immobili sono limitati e devi sacrificare qualcos'altro per fare spazio. Non usare "K" o qualsiasi altra abbreviazione per cercare di mantenere piccola l'area dei prezzi - come dici correttamente, non tutti lo capiranno.

Il motivo per cui lo sto dicendo che per la maggior parte delle persone che fanno il prezzo di acquisto è un'informazione molto importante - più importante di ogni altra cosa tranne le informazioni di base "cos'è questa". Inoltre, alla gente non piace davvero essere ingannato sul prezzo. Se non sembra che tu sia in anticipo sul prezzo, la gente penserà che stai cercando di ingannarli, anche se non lo sei. Il confronto con la reputazione Stack Overflow e l'uso di K non è valido, poiché la reputazione non è importante quanto il prezzo e il tuo pubblico ha meno probabilità di comprendere l'abbreviazione.

11
DJClayworth

La dimensione della scatola è una limitazione come è stato chiesto? L'unico motivo per cui chiedo questo è dovuto al fatto che probabilmente puoi cambiare la dimensione della scatola in base alla larghezza del prezzo più grande che hai e impostarla come larghezza fissa per la scatola. Quindi centra il prezzo all'interno della scatola e saprai che nessun altro prezzo può superare la larghezza perché l'hai bufferizzato utilizzando il prezzo più alto possibile (puoi forse aggiungere qualche altra cifra alla dimensione massima che desideri visualizzare).

Inoltre, se utilizzerai i prezzi con un numero decimale, ridimensionerei la casella una volta alla dimensione più grande possibile e quindi non dovrai preoccuparti della modifica della dimensione della scatola ma puoi iniziare a centrare i prezzi al loro interno lasciandoti così con uno sguardo uniforme sul sito.

8
Melroy Coelho

Potresti scendere a compromessi con il mouse su tutte le cifre (se questa è un'opzione) oppure potresti ridurre/snellire le cifre finali (se hai la risoluzione).

Ho provato con Calibri + Arial stretto, questo non ti compra molto:

enter image description here

(FWIW quando uso 'k' ne userei uno piccolo, si distingue meglio dalle cifre ed è SI-Corretto. Nessuna fortuna con 'M per milione', però.)


In generale, considera di ridurre le informazioni totali sullo schermo. Se devi già comprimere i dati, il tuo problema non sono i singoli elementi.

Puoi scegliere il simbolo valuta + valore,

$ 123,786

può essere più compatto di

123k
Prezzo


[modifica] come richiesto: l'idea è quella di enfatizzare le informazioni più importanti ("123" (k)) ma di conservare ancora i dettagli. Ho visto la versione "one step" (secondo e terzo esempio) alcune volte, ma di solito per estetica/stile piuttosto che per far fronte alla densità delle informazioni. L'uso di cifre successivamente più piccole è stata un'idea spontanea per estenderlo.

Come mostra l'esempio, il "one step" non compra molto in termini di pixel, il secondo sembra almeno insolito, se non confuso.

6
peterchen

La notazione scientifica vorrebbe visualizzarlo come: 1.23e5, è più "corretto" quando si tratta di unità: 1,23e5 m è giusto, mentre 123k non lo è (dovrebbe essere 123 km).

Tuttavia, se i tuoi utenti non sono a proprio agio con il postfix 'k', dubito che gli piacerebbe così tanto, lo menziono semplicemente per completezza.

Altre possibilità potrebbero essere avere qualcosa del genere: 123tu o 123, 000

2
steeveeet

È difficile dirlo senza saperne di più, ma qui ci sono alcune opzioni possibili:

  1. Ridimensiona tutte le caselle in modo che siano tutte grandi come quella contenente il numero più grande
  2. Ridurre l'imbottitura a sinistra/a destra di numeri più grandi in modo che si inseriscano nella casella
  3. Riduci il testo numerico
  4. Mantieni il 123K e hai la possibilità di mostrare l'intero importo con una sorta di interruttore (clic o passaggio del mouse o qualsiasi altra cosa)
1
bendur

Prendi spunto dai widget dei social media là fuori. I pulsanti Mi piace/Seguace/+ 1 ecc. Devono tutti mostrare grandi numeri in un piccolo spazio.

0
Mark Simpson