Immissione di dati in una griglia

Question

Una domanda sull'interfaccia utente: esiste un consenso sul migliore (definito come "quello che gli utenti finali preferiscono") o meno peggio per implementare l'immissione dei dati in una griglia?

Ho una griglia, con molte righe. Le colonne della griglia contengono vari tipi di proprietà, che l'utente può inserire/modificare. I "tipi" di proprietà includono:

• Testo libero
• Numbers (cifre numeriche)
• valore Enum (ad esempio, uno dei 'High', 'media' e 'Low')
• Altri (es. data, durata)

Il tipo di 'testo libero' non è difficile da progettare (quindi non lo chiederò a riguardo), ma per quanto riguarda i due tipi successivi?

cifre numeriche

• Quando si utilizza una tastiera per immettere un numero, vero consentire l'ingresso di testo libero, e quindi eseguire un metodo validate sulla sfocatura? Oppure, monitorare ogni pressione di un tasto per limitare l'immissione dei dati alle sole cifre?
• Come si comunica all'utente (su una griglia, non in un modulo) che la sintassi dei dati in alcune colonne è limitata a solo valori numerici? Cosa fai se l'utente preme un tasto sbagliato (non numerico)?
• Un controllo "spin" o "spinner" è un controllo standard di Windows; è appropriato provare a utilizzarne uno anche su una griglia basata su HTML?

Enum Valori

Per entrare o la modifica di un valore di enumerazione utilizzando il mouse, immagino che popping un piccolo menu contestuale su un clic del mouse è la cosa da fare.

• Un'alternativa è utilizzare il controllo di input (ad esempio una casella combinata). Immagino però che avere un'intera colonna di caselle combinate non sia facile da leggere quanto avere una colonna di valori di testo (perché le caselle combinate aggiungono inchiostro extra non di testo)? Cosa ne pensi di solito mostrando testo semplice, ma sostituendo quel testo con una casella combinata quando il campo ottiene il focus di input (e quindi rimuovendo la casella combinata in sfocatura)?
• Vuoi mettere a fuoco anche quello stesso menu, quando il focus cambia come risultato della tastiera (cioè il tasto [Tab]) invece del risultato del mouse (ad esempio un clic)? In altre parole, il tabging di un campo dovrebbe risultare in un menu a comparsa? Per inciso, i menu a comparsa basati su CSS che ho visto rispondono al mouse ma non alla tastiera (per esempio ai tasti freccia [Su] e [Giù]). Conoscete un'implementazione di inserimento dati simile a Intellisense che può essere eseguita in un browser?

Ad esempio?

Sarei anche interessato a vedere qualsiasi cosa tu pensi sia un esempio esemplare. Sono interessato all'interfaccia utente desktop e/o alle risposte del browser.

---

Edit: dopo un'altra domanda con il tag [data-entry] ("Has anyone used Sigma Grid (Javascript-based editable data grid)?"), sto guardando l'esempio Sigma Grid.Fa un sacco di cose bene IMO (buon supporto per la tastiera e le caselle di selezione just-in-time); ma il suo supporto per i campi numerici può essere imperfetto, ad esempio se premo 'a' in una cella numerica, poi a volte si apre una finestra di avviso per dirmi che ho torto (dove forse un suggerimento sarebbe meno invadente), e/o a volte lascia la cella vuota (vuota), cancellando la 'a' e non lasciando nulla al suo posto.

---

Modifica in risposta a una delle risposte seguenti.

Ancora una volta, tuttavia, determinare quale sarà l'uso principale del modulo e ottimizzare per quello. La visualizzazione o l'analisi dei dati ha esigenze diverse rispetto all'ingresso di massa e soddisfare gli utenti della tastiera è completamente diverso rispetto agli utenti di tastiera e mouse.

Desidero che lo stesso display (ad esempio una tabella/griglia) funzioni bene per visualizzare le proprietà esistenti, creare nuove proprietà e modificare le proprietà esistenti. Mi aspetto dozzine di elementi (ad esempio dozzine di righe di dati), ciascuno con solo poche colonne (ad esempio una colonna di testo/descrizione articolo, più 1 o più colonne per 1 o più proprietà dell'elemento associate).

Alcuni dei dati/proprietà possono essere soggettivi e relativi (ad esempio, due proprietà per ogni articolo sono la "priorità" o la "difficoltà" di ciascun elemento, che è particolarmente significativa solo se confrontato con altri articoli), che è un motivo per cui voglio visualizzare tutti i dati insieme su un'unica schermata: in modo che l'utente finale possa confrontarli.

La mia applicazione è per gli utenti di computer relativamente esperti (non per i principianti), ma non per gli specialisti di immissione dei dati: ad es. gli utenti sono sviluppatori software, project manager, product manager, persone QA, ecc., ma anche in una certa misura i loro clienti; è in esecuzione su una rete intranet (non su Internet pubblica), tuttavia è facile e piacevole da usare e facile e/o intuitivo da imparare sono entrambi importanti.

Inoltre, non vedo perché soddisfare gli utenti della tastiera sia completamente diverso rispetto agli utenti di tastiera e mouse: ho pensato che una singola soluzione potesse/dovrebbe supportare uno o entrambi.

Answer 1

IMHO, la grande domanda che devi porre è lo scopo principale della tua pagina e la relativa raffinatezza dei tuoi utenti. Hai a che fare con Tab + 10 professionisti chiave, con clic del mouse + dattilografi hunt-peck, un po 'di entrambi?

Le scelte necessarie devono tenerne conto. Suppongo che, in virtù della scelta di una griglia, gli utenti siano un gradino dal basso e utilizzino il tab-navigation come mezzo principale per navigare nel modulo e che l'utilizzo principale sia l'immissione di dati collettivi.

Per quanto riguarda l'input numerico:

• Se avete in programma di fornire una routine di conversione, non c'è alcuna necessità di limitare a cifre.
• Nel caso in cui un utente inserisca un input non valido (si noti che alcuni numeri, non solo il testo potrebbe non essere valido ... ad esempio, l'età negativa) è meglio mostrare l'errore in linea e immediatamente.
• Evita i filatori, in particolare se hai a che fare con numeri decimali. I filatori si concentrano sull'inserimento dei dati e forniscono un valore minimo a meno che non si tratti di un numero finito di numeri discreti. Se questo è il caso, un Combo/Select potrebbe essere migliore (spiegherò perché nel prossimo post).

quanto riguarda valori enum:

• Evitare i menu popup/contesto come la peste. Richiedono all'utente di usare il mouse e di mettere a fuoco lontano dal compito corrente, letteralmente quando si genera una nuova finestra. Un Combo/Select consente agli utenti un certo grado di type-ahead e consente la selezione della tastiera tramite frecce.
• Il problema della casella combinata che si apre (la freccia di rilascio che rende il testo più difficile da leggere) è qualcosa che si può alleviare con la soluzione di messa a fuoco che si fornisce, tuttavia, in genere è possibile rendere la griglia più leggibile in generale con più padding tra righe e colonne.

commenti aggiuntivi:

• testo libero le date w/conversioni se possibile. A meno che non pianifichi di addestrare i tuoi utenti, o di optare per l'adozione di un sistema di mascheramento draconiano (e altrettanto irritante schiaffi da polso in caso di fallimento della convalida), dovrebbero essere autorizzati a inserire le date come preferiscono. Caveat se hai a che fare con persone internazionali, entrano in diversi mesi e giorni. SOP negli Stati Uniti in mm/gg/aaaa, mentre molti paesi preferiscono gg/mm/aaaa.
• Se si dispone di una quantità considerevole di campi, è possibile prendere in considerazione la possibilità di dividere l'immissione dati in più righe. Una griglia piatta di> 10 colonne è piuttosto difficile da comprendere in una singola vista. Lo svantaggio di questo è l'aumento dello scorrimento verticale, quindi dovrai bilanciare l'importanza dell'utilizzo del contesto dei dati (ad esempio le righe sopra e le righe sottostanti) nell'interpretazione della riga corrente dei dati di modifica da un lato e ottenere tutto il informazioni di una riga (multi-linea o scorrimento a scorrimento) sull'altra.

Anche in questo caso, però, determinare COSA l'uso primario del modulo sta per essere, e ottimizzare per questo. La visualizzazione o l'analisi dei dati ha esigenze diverse rispetto all'ingresso di massa e soddisfare gli utenti della tastiera è completamente diverso rispetto agli utenti di tastiera e mouse.

EDIT: Risposte ai commenti

Anche io non vedo perché soddisfacenti utenti della tastiera è completamente diverso rispetto agli utenti tastiera + mouse: Ho pensato che un'unica soluzione potrebbe/dovrebbe supporto o e/o entrambi.

Non è completamente diverso. Pensala come la differenza tra "ottimizzare per" e "supportare" la maggior parte dei tuoi utenti. Alcuni esempi: gli editor di codice sono ottimizzati per gli utenti di tastiera. Tra hot-key, scorciatoie e navigazione da tastiera, un utente ha raramente bisogno di usare il mouse. La maggior parte dei giochi RTS funziona utilizzando l'one-hand-on-mouse-the-other-on-keyboard.In genere, il supporto supporta utilizzando esclusivamente il mouse, ma non è il ottimizzato per questo. ITunes è all'estremo opposto: si basa quasi esclusivamente sul mouse (come la maggior parte delle interfacce utente con trascinamento della selezione) e l'utilizzo della tastiera è quasi impossibile.

Consentire l'immissione e visualizzare un errore ; o impedire la voce e visualizzare un errore? Cosa intendi per mostrandolo "in linea" quando si tratta di una griglia (una cella, da qualche parte all'interno di una tabella)?

Non sono sicuro di quale piattaforma si stia sviluppando, ma sì intendo da qualche parte all'interno del tavolo, preferibilmente sulla riga di dati di cui si sta parlando. In GridView di ASP.NET è possibile utilizzare TemplateField che consentono di incorporare più controlli nella stessa "cella". Nel mondo rich client, la maggior parte dei componenti di terze parti fornisce supporto per cose simili OOTB (ad esempio IDataErrorInfo) che forniscono errori nel contesto.

Se l'alternativa sta mettendo tutti gli errori sopra o sotto la griglia, sarà difficile per gli utenti capire quale delle dozzine di righe di dati ha l'errore. Per un esempio di gestione sub-ottimale di questo, prova ad aggiungere 10 articoli a un carrello Amazon, quindi modifica tutti gli importi a 2, ad eccezione di 1 elemento, che cambierai in -1. Fai clic su Aggiornamento e vedi se riesci facilmente ad accedere alla riga con errori.

Inoltre, il "in" sapore di stile convalida è quello di consentire agli utenti di inserire i dati e dare loro messaggi se è errato senza impedire l'ingresso e/o l'eliminazione di loro input. StackOverflow lo fa in numerosi luoghi, molto facilmente evidenziato aggiungendo un commento. La convalida ti avverte che hai bisogno di almeno 15 caratteri, ma non cancella il tuo commento quando ti avvisi. Un secondo vicino sarebbe quello di far conoscere l'utente in modo esplicito e immediatamente che il loro inserimento non è corretto. Un esempio di questo sarebbe cercare di rinominare un file con una barra rovesciata in Windows. Vedrai immediatamente un pallone con istruzioni precise.

Beh, Intellisense o auto-completamento è una sorta di pop-up, ma può essere comandato con (non distogliere l'attenzione lontano dal) la tastiera.

Se è possibile supportare i popup in modo nitido come Intellisense in Visual Studio, direi di farlo. La mia esperienza non-VS con i popup è che molti provano e falliscono (alcuni, in modo abbastanza orribile, mi richiedono di prendere il mio mouse e rifocalizzarmi al posto giusto). Un'altra cosa da tenere a mente con Intellisense è che ha una gestione brillante della fine dell'istruzione (con ciò intendo l'interazione con le parole digitate + lookahead + spelling/casing forgiveness + tab/enter handling). Dato che presumo che tu stia usando la scheda per navigare tra i campi (nota che VS non ha campi) dovrai trovare un altro modo per far sapere alla tua applicazione che "Ho finito ora, vai in auto -Complete/Intellisense quello che ho appena digitato"

stavo pensando che cornice della casella combinata intorno al testo rende il testo più difficile da accelerare lettura; magari un po ' casella combinata minimal, con una freccia in giù ma nessuna cornice intorno alla casella combinata (solo i bordi delle celle della tabella) sarebbe meglio per le cellule che non hanno l'attenzione: anche se mi chiedo perché anche la freccia rivolta verso il basso potrebbe essere utile sulle celle che non hanno lo stato attivo.

Se sei preoccupato per il telaio del ComboBox, sono assolutamente d'accordo: cambia il colore del telaio in qualcosa con un contrasto inferiore. Qualsiasi soluzione che si prende per minimizzare il controllo "chrome" quando non è focalizzata, ovviamente la renderà più simile al testo e (possibilmente?) Più leggibile.

In ogni caso, buona fortuna per il tuo design.

Answer 2

Per i valori numerici, di solito utilizzo solo JavaScript per limitare l'immissione di valori diversi da quelli che si desidera siano inseriti. In questo caso, numeri. Non c'è bisogno di dare loro avvisi o altro, basta non permetterlo.

Per i valori di enumerazione, vorrei davvero andare con una sorta di selezione o casella di riepilogo. Questo è ciò a cui le persone sono abituate con i siti web. Puoi essere fantasioso e nasconderlo fino al passaggio del mouse o fare clic sulla casella.

Per la tabulazione, consentirei di inserirli in un'altra casella di selezione. Questo sarà più veloce per alcune persone per inserire molti dati.

Answer 3

ExtJS

modificabile griglia: http://extjs.com/deploy/ext-3.0-rc2/examples/grid/edit-grid.html

Row Editor griglia: http://extjs.com/deploy/ext-3.0-rc2/examples/grid/row-editor.html

non ho ancora usato personalmente le versioni 3.0 x, ma 2,0 è abbastanza impressionante. C'è un po 'di una curva di apprendimento per il framework Ext, ma praticamente fa tutto: convalida, limitazione degli input, databinding, ecc.

Answer 4

jQuery ha alcuni cool plugins che aiutano negli idiomi di immissione dei dati comuni.

utilizzo elevato di jQuery, e alcuni di questi plugin, insieme al fattore estetico, indicare a me che questi plugin rappresentano alcuni dei modi migliori per gestire l'input dell'utente ...

Isaac sopra a Evolt ha anche a good article su Moduli utilizzabili

Answer 5

Ecco un elenco confuso di osservazioni dal lavoro con i moduli di iscrizione per anni.

cifre numeriche:

• non limitano la lunghezza del campo - E 'davvero fastidioso se hai aggiunto un carattere di separazione (o uno di troppo) solo per capire voi ora non si può riempire nel campo. Quindi devi tornare indietro, rimuovere il carattere "offendente", andare alla fine e continuare a riempire. Un buon sistema dovrebbe tagliare e rimuovere tutti i caratteri non di dati quando si esce dal campo. Se il valore non si adatta ancora, informa l'utente immediatamente.
• Per evitare numeri diversi, ignorare semplicemente i tasti che riempiono una stringa non numerica. Attenzione ai separatori di migliaia/decimali, caratteri bianchi e caratteri di controllo (CTRL-x). Dovresti essere in grado di incollare i valori da qualsiasi formato disponibile, compresi i simboli di valuta (da rimuovere).
• I controlli di rotazione non sono ancora ubiquitari, quindi devono essere utilizzati solo per interfacce esperte. Condividono anche molte delle insidie ​​delle barre di scorrimento: c'è spazio sufficiente per avere frecce di punto finale, se la scala della barra con, um, scala, se la scala è lineare, qual è la lunghezza minima/massima della barra che è facile fare clic e fornisce un'accuratezza adeguata, può essere incrementato in modo accurato e veloce anche con una tastiera?
• Dopo che l'utente ha chiuso il campo, il valore deve essere arrotondato alle cifre massime consentite e preferibilmente formattato in base alle impostazioni del sistema operativo per verificarne la leggibilità.

valori Enum:

• Cambiare il widget del campo in ingresso sarebbe fonte di confusione per i nuovi utenti, quindi dovrebbe essere utilizzato solo per le interfacce di esperti.
• Le interfacce di Google Suggest-like sono utili quando l'elenco è grande ma familiare all'utente, poiché la navigazione di una lunga lista può essere ridotta a una porzione più gestibile in pochi clic. Forse un selettore a discesa dovrebbe essere disponibile nel caso in cui l'utente desideri davvero vedere tutte le opzioni esistenti. Se il campo non consente nuove voci e il contenuto del campo non corrisponde a nessuna delle opzioni, dovrebbe cercare di trovare la corrispondenza più simile quando l'utente si allontana da esso. Ad esempio, è utile inserire solo il primo carattere se si conoscono le opzioni "Alta", "Media" e "Bassa", e fare in modo che il sistema faccia il resto.
• Quando il campo acquisisce la messa a fuoco, tramite mouse o tastiera, dovrebbe immediatamente mostrare le opzioni disponibili se non sono molto numerose. È un buon suggerimento per gli utenti. Una trappola è se è troppo insistente, oscurando altre parti dello schermo quando l'utente sta cercando di allontanarsi.

Answer 6

Dai un'occhiata alla http://www.peterblum.com

Usiamo questo prodotto in molte delle nostra applicazione per il passato 4+ anno. Migliora in modo definitivo l'interfaccia utente dei moduli Web e risolve molti problemi di convalida. In particolare, funziona bene con il controllo della griglia.

Buona fortuna