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

Il miglior approccio per aggiornare tutte le voci in un elenco che è impaginato?

Ho un elenco che è impaginato in una pagina web. Ha anche una funzione per selezionare il numero di voci per pagina. È richiesto un aggiornamento globale su tutto.

Quale sarebbe l'approccio migliore a questo? La mia preoccupazione è che un utente dubiterebbe se ci riferiamo alla pagina corrente o all'intero elenco. Sarebbe sufficiente una finestra di conferma con dettagli o un messaggio informativo per i dettagli?

Ecco come appare ora:

enter image description here

29

Consentire all'utente di vedere quanti sono selezionati e dare loro la possibilità di selezionare l'intero set di dati oltre l'impaginazione.

Gmail ha questo modello. Dopo aver selezionato "Tutto" tramite la casella di controllo, viene visualizzato un messaggio che indica:

  • Quanti sono attualmente selezionati
  • Un collegamento con il numero dell'intero set di dati e la possibilità di selezionare l'intero set

enter image description here

enter image description here

41
Mike M

Aggiungi un pulsante in basso dove si trovano gli altri controlli della pagina.

enter image description here

Inoltre, se gli utenti apportano spesso modifiche di massa, prendi in considerazione la possibilità di crearne uno separato.

13
moot

Il suggerimento di Gmail è fantastico, ma vorrei anche sottolineare come Laravel Nova (e sono sicuro che molte altre UI) lo fanno.

Nova mostra la casella di controllo multi-selezione "standard" nella parte superiore della pagina, ma facendo clic su di essa si riducono due caselle di controllo. Uno seleziona tutto sulla pagina, l'altro seleziona tutto ciò che corrisponde alla tua query. Mostra anche quanti elementi selezionerà quando lo fai.

La formulazione potrebbe essere migliore (ad es. "Seleziona tutto nella pagina/Seleziona tutto") ed è un po 'confuso fare clic su una casella di controllo e non fare controllare immediatamente qualcosa, ma ti costringe a fare una scelta consapevole di ciò che vuoi selezionare.

Laravel Nova Select All UI

Il modo di farlo di Gmail è fantastico, ma la notifica che non hai selezionato tutto viene dopo che hai effettuato una selezione e personalmente preferisco sapere cosa sto selezionando mentre lo sto selezionando.

Come nota a margine se si voleva seguire il modo di farlo di Gmail, suggerirei di far apparire la notifica in un colore adatto (ad esempio il giallo), quindi svanire rapidamente quel giallo per dare un indizio visivo all'utente che un nuovo pezzo di informazioni a cui dovrebbero prestare attenzione è apparso. Ecco come fanno gli strumenti di sviluppo di Google Chrome per mostrare che un elemento nel DOM è cambiato:

Chrome's devtools flash

3
Grayda