it-swarm-eu.dev

Significando all'utente quel campo è modificabile

Ho una griglia che ha un sacco di dati. Alcuni dei campi sono modificabili e causano un postback che aggiorna i dati. Quali sono i modi migliori per mostrarlo all'utente? cioè Esiste una migliore pratica su come distinguere tra modificabile e non modificabile dal punto di vista dell'interfaccia utente?

16
Dan

Di solito mantengo i miei campi modificabili bianchi e i campi non modificabili grigi (o colori monocromatici se non campi bianchi, colore chiaro: modificabile e colore scuro: non modificabile).

19
wnathanlee

Sì, esiste una procedura consigliata: rendere i campi modificabili come caselle di testo e i campi non modificabili come testo. C'è una ragione per cui quei due elementi dell'interfaccia utente hanno un aspetto distinto.

14
Charles Boyung

Ho optato per l'aggiunta di un'icona a matita silenziata fa - spostata a destra del campo.

Fonte: https://webapphuddle.com/inline-edit-design/

4
Geoffrey Hale

Le caselle di testo sono fantastiche nei layout più semplici, in cui l'uso principale dell'elemento è la modifica. In una griglia in cui il controllo viene ripetuto indefinitamente, essi (come pulsanti o altri controlli) aumenteranno il disordine visivo. Questo è un problema poiché uno dei motivi per cui utilizziamo le griglie è quello di fornirci una panoramica.

Mi piacciono molto i progetti in cui i campi modificabili hanno un aspetto molto neutro, come qualsiasi testo di interfaccia, ma al passaggio del mouse passano a uno stato che mostra che possono essere modificati. Ciò potrebbe essere ottenuto utilizzando un colore o un'icona, che è visibile solo al passaggio del mouse. Facendo clic, si accede alla modalità di modifica effettiva. L'app Web di Jira è un eccellente esempio di questo approccio.

2
John Liungman

Le migliori pratiche generalmente utilizzano input per contenuti modificabili e testo normale per contenuti non modificabili. È possibile rendere sottili gli input, in modo che non creino troppi ingombri anche in una griglia piuttosto popolata.

Se il disordine causato dagli input esposti è troppo alto, hai la possibilità di utilizzare i controlli mostrati al passaggio del mouse (icona di modifica dell'azione) o di trasformare il testo normale in un campo di input al passaggio del mouse (funziona per il contenuto di una riga, con cautela anche per il contenuto di più righe ).

Tuttavia, in termini di fornire indizio modificabile solo al passaggio del mouse, dovresti chiederti qual è il contesto principale di utilizzo. Se si tratta di dispositivi touch mobili, non puoi fare affidamento sul passaggio del mouse e devi esporre subito la commestibilità (di nuovo, usando l'icona per l'azione di modifica o esponendo il campo di input).

1
Pavel Macek

In genere ho uno sfondo grigio e un campo modificabile bianco. Quando il campo non è modificabile, ho impostato lo sfondo con lo stesso grigio (che tecnicamente è lo stesso di trasparente, ma l'utente non se ne preoccupa .. Vedono solo che è lo stesso).

1
Bryan Field

Casella di testo per il web. Gli utenti saranno in grado di distinguere che il campo è per l'immissione di testo. È preferibile concentrarsi sul primo campo di testo, se possibile. Questo campo può essere delimitato da un sottile blu con un cursore nel campo o semplicemente evidenziato con un bordo.

Per il cellulare, apri una tastiera. Se puoi avere il primo elemento selezionato con un cursore lampeggiante, fallo. L'ingrigimento dei campi rimanenti va bene.

0
Jonathan Bowman

Ciò può rivelare un pregiudizio personale, ma tendo anche a preferire una sorta di "focus visivo" che indica a un utente su quale campo si trova. Uno sfondo sfumato o un bordo sono modi per farlo.

0
David in Dakota