it-swarm-eu.dev

App Web di reporting: come progettare tabelle di dati di grandi dimensioni?

Sto lavorando a una webapp legacy che si concentra principalmente sulla segnalazione di grandi quantità di dati, ad esempio tabelle con oltre 20 colonne che riportano dati finanziari. Il problema principale è l'incoerenza del layout della tabella a seconda dell'interazione dell'utente e dei dati stessi. Ad esempio, la larghezza di una particolare colonna cambia a seconda della dimensione del numero/della parola nella cella o se l'utente ha deciso di ordinare quella colonna - una freccia crescente o decrescente nell'intestazione incasina l'intera larghezza della colonna. L'utente finisce con una tabella "instabile" in cui la navigazione si trova in un posto diverso ad ogni azione.

Inoltre, si tratta di un'app internazionale che significa che la traduzione incasina anche la larghezza del titolo della colonna in diverse lingue.

Richiediamo una risoluzione minima molto piccola, ma la maggior parte dei nostri tavoli sono larghi circa 1200-1400 px per adattarsi a tutto.

Esistono linee guida su come progettare una webapp aziendale in modo efficiente e, soprattutto, in modo che l'usabilità non ne risenta?

8
eagerMoose

Quello che ho fatto in un caso simile è usare le tabelle con un layout fixed (quindi non salterebbe), e qualunque informazione trabocca è nascosta. Quindi, all'interno del tag title, ho inserito il contenuto completo.

Non sono sicuro che ciò valga per te, ma avevo un sacco di colonne piuttosto piccole e un insieme limitato di colonne che contenevano una sorta di descrizione (in modo che potesse facilmente crescere e incasinare il layout). Quindi ho usato il layout fisso della tabella.

Il vantaggio era che l'utente aveva ancora una panoramica istantanea e aveva accesso alle informazioni complete quando necessario (passa con il mouse sopra l'elemento e appare il titolo).

[EDIT: capire che limitare le colonne non è un'opzione]

Ok, capisco che limitare le colonne in alcun modo non è fattibile. In tal caso, mi sembra che l'unico problema che stai riscontrando ora sia l'aspetto dell'icona asc/desc ordinata e le diverse traduzioni dell'intestazione di colonna.

Il primo è relativamente semplice da risolvere: usando css aggiungi una classe se l'intestazione della colonna è sorted_asc, sorted_desc o not_sorted e in ognuna fai spazio a un'icona (che nel caso non ordinato non è presente o è disattivata o qualcosa del genere).

Il secondo: sarebbe un'opzione per usare le abbreviazioni? Immagino che nel mondo finanziario le loro potrebbero essere abbreviazioni valide a livello globale, e al passaggio del mouse mostrino il valore tradotto? Qualcosa del genere sarebbe un'opzione? Suppongo che non controlli abbastanza le traduzioni per assicurarti che siano tutte di lunghezza simile. Altrimenti la dimensione del carattere dell'intestazione di colonna potrebbe essere davvero piccola?

Supponendo che il testo dell'intestazione di colonna non sia così importante, potresti lasciare che l'overflow?

2
nathanvda