it-swarm-eu.dev

Griglia / tabella con molti pulsanti

Considerando che ho una griglia con un numero di pulsanti per le azioni che l'utente può eseguire. Sembra così.

Button grid

Ho un numero di griglie simili nel sistema. Mi chiedo l'opinione della gente su se dovrei.

  1. Lascia com'è
  2. Avere un pulsante con l'elenco a discesa delle varie opzioni. Ciò significa che l'altezza della riga è inferiore.
  3. Qualcos'altro.

Questa è una schermata che gli utenti non usano regolarmente, forse solo una volta al giorno in media. La velocità (1 vs 2 clic) non è probabilmente un grosso problema.

23
Craig

C'è una situazione simile nell'Editor video di Youtube Studio che può aiutarti a ottenere idee, un mix di icone, menu a discesa delle opzioni e interattività.

  • Ogni riga ha due icone: l'icona seleziona a sinistra e la vista icona verde con opzioni
  • A Guarda in Youtube icona e il menu di opzioni a tre punti appare quando si passa con il mouse la riga
  • Facendo clic sul menu delle opzioni tre punti vengono visualizzate cinque opzioni:
    • Modificare
    • Ottieni link
    • Promuovere
    • Scarica
    • Elimina

enter image description here

30
Danielillo

Da un punto di vista dell'accessibilità, ti consiglio vivamente di avere un solo elemento interattivo per cella della tabella. Migliora notevolmente la navigazione della tabella con lo screen reader. Nel mio posto di lavoro avevamo un tavolo simile; alcune delle celle verrebbero lette ad alta voce dallo screen reader per 10-20 secondi a causa di tutti i vari contenuti nella cella e nella sua intestazione della tabella.

Come è: brutto ma funzionale. Penso che leggerebbe meglio con la stessa serie di pulsanti su ogni riga, con quelli inutili in grigio. È più semplice gestire i dati tabulari quando ogni riga ha esattamente la stessa forma. Le modificherei anche più piccole, anche se se è Bootstrap è un po 'una seccatura farlo. (Perché oh perché hanno rimosso btn-xs?)

Drop down: se l'atto di selezione innesca l'azione, allora questa interfaccia avrà una maggiore incidenza di errori perché operare un drop-down è fisicamente più soggetto a errori. Se è selezionare un'azione seguita da un pulsante per farlo accadere, va bene.

4
nigel222

Senza ulteriore contesto è difficile rispondere alle tue domande. In che modo gli utenti usano il tuo tavolo? Quanto spesso interagiscono con esso. È chiaro agli utenti quali azioni sono possibili nei diversi stati?

Ecco alcuni pensieri, senza conoscere il contesto: così com'è, potrebbe non sembrare molto carino ma ha alcuni vantaggi rispetto a un menu a discesa. È chiaro che non tutte le azioni sono disponibili in tutti gli stati. Tutte le azioni possibili sono visibili a prima vista. L'utente può fare clic direttamente sull'azione desiderata senza prima fare clic su un menu a discesa. Se lo cambi, dovresti considerare questi vantaggi. Ma ci sono anche alcuni svantaggi. L'interfaccia utente è molto ingombra. C'è molto da elaborare per l'utente.

La domanda è: qual è l'obiettivo di questa tabella. Dovrebbe aiutare l'utente ad essere molto efficiente nell'esecuzione dell'attività. Dovrebbe aiutare l'utente a fornire una rapida panoramica degli stati e interagire con gli elementi è secondario e non sempre necessario.

Direi che forse puoi usare un mix di soluzione 1 e 2. Avere l'azione più utilizzata disponibile e aggiungere le azioni non utilizzate così spesso in un menu a discesa. La difficoltà potrebbe essere che l'azione principale non è sempre la stessa a seconda dello stato dell'articolo.

Ma alla fine i tuoi utenti lo sapranno meglio. Quindi quello che vorrei fare è testarlo con un semplice prototipo e testarlo con utenti reali. Non avrai bisogno di provarlo con molti utenti per vedere quale soluzione funzionerà meglio nel tuo contesto.

3
BrunoH

È possibile inserire tutte le opzioni in un menu di scelta rapida e disabilitare quelle che non possono essere utilizzate a quel punto a causa dello stato dell'elemento. In questo modo l'utente ha sempre lo stesso elenco di opzioni (e potresti spiegare perché un'opzione è disabilitata).

Inoltre non è possibile rendere l'opzione di visualizzazione non un pulsante ma solo un clic sulla riga stessa?

3
Annemiek

Possiamo discernere tre tipi di azioni su un ordine. Dividi quelle e raggruppa le azioni all'interno di un tipo.

Sta guardando

Prima di tutto, darei il pulsante per l'unica opzione che gli ordini hanno in comune, che è di visualizzarli (suppongo qui che non ci sono obiezioni a visualizzare un nuovo ordine), la sua posizione più prevedibile. Ora sta saltando dappertutto, a seconda delle altre opzioni disponibili.

La modifica

Quando si modifica un ordine, l'utente deve prima vedere cosa c'è dentro. Quindi rimuovere il pulsante di modifica qui e rendere accessibile l'opzione di modifica dalla schermata di visualizzazione.

In lavorazione

Ora restiamo con l'invio, il rinvio, la ricezione, la cancellazione e la cancellazione. Puoi usare un menu a discesa, ma questi sono un po 'più delicati dei pulsanti normali, quindi forse una griglia di cinque pulsanti sarebbe la cosa migliore. Non nascondere le opzioni che non sono disponibili, ma disabilitarle, quindi ogni pulsante sarà sempre nella stessa posizione.


Visualizza prima, Azione dopo

Oppure, secondo il suggerimento eccellente di Annemiek , rendi disponibile la visualizzazione facendo clic sulla riga. Rimuovi tutti i pulsanti e riposizionali nella schermata di visualizzazione, se un clic aggiuntivo per ordine non è un problema . Dipende un po 'dai tuoi utenti. crea un controllo extra, una sorta di, perché un utente deve visualizzare un ordine prima di agire su di esso.

3
SQB

Ho un numero di griglie simili nel sistema

Lo screenshot che hai condiviso ha azioni diverse su ogni riga. Avere tutti questi pulsanti/azioni disponibili in anticipo su ogni riga non è una buona scelta in termini di disordine visivo, carico cognitivo per l'utente e anche dal punto di vista dell'accessibilità come Tobias menzionato. Se è presente un'azione presente su ogni riga e l'utente esegue quell'azione frequentemente, è possibile mantenere quel pulsante sulla riga e il resto delle azioni secondarie può essere raggruppato all'interno di un menu di kebab (icona a tre punti verticali)

2
Sooraj MV

Puoi continuare le azioni al passaggio del mouse per ogni riga. Quindi, una volta che l'utente passa il mouse su una riga, vedrà un'opzione a discesa, che fornisce un elenco di azioni.

1

Sembra confuso avere diverse opzioni per ogni elemento in questa vista. In genere in una griglia o in un elenco, l'utente si aspetta la stessa identica interfaccia per ciascun elemento.

È possibile mantenere il pulsante "Visualizza" (magari convertirlo in un'icona, ma non è importante), dal momento che quell'azione è disponibile per tutti gli elementi e spostare le altre opzioni in qualunque elemento UX sia esposto quando l'utente "Visualizza" è l'elemento .

Inoltre, la visualizzazione non è un passaggio distruttivo, mentre le altre azioni svolgono un qualche tipo di lavoro, che potrebbe non essere reversibile. Immagina che l'utente cerchi di annullare ORD-123455 in un elenco, inserito tra ORD-123545 e ORD-213455. Aggiungendo un'azione aggiuntiva tra la visualizzazione di un oggetto e l'azione su di esso si aggiunge un piccolo attrito, ma si dà anche all'utente maggiore sicurezza di aver selezionato l'elemento corretto.

0
Harrison Paine