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

Cosa fare con il pulsante "last" nella paginazione?

Viene utilizzato un numero elevato di elenchi e pagine dei risultati di ricerca First e Last collegamenti, a volte in stile come << e >>. Nella maggior parte dei casi, il Last il pulsante è anche quello all'estrema destra, che sembra essere considerato una buona usabilità.

Di solito si presenta così:

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Personalmente non mi piace questo accordo. Perché? Perché nel 90% dei casi, tutto ciò di cui ho bisogno è il Next pulsante. Gallerie fotografiche, risultati di ricerca, tabelle, ecc. Un caso mi viene in mente dove avrei bisogno di frequente Last pulsante è nei forum di Internet, dove voglio saltare rapidamente all'ultima voce ...

La disposizione di cui sopra rende il Next sia difficile da identificare sia da cliccare perché è inserito tra quegli altri elementi. Sembra Next ha un peso inferiore rispetto a Last.

Certo, logicamente Last Sostituisce Next, ecco perché è posto dopo di esso. Ma questo è al prezzo di (secondo me) un aumento del carico cognitivo.

Questo può davvero essere considerato come "buona usabilità"?

63
J_rgen

Esattamente, penso che questo particolare tipo di impaginazione mi abbia causato confusioni molte volte. Tuttavia è già adattato dalla popolazione.

Suggerirei qualcosa di simile al di sotto

enter image description here

Quindi quello che sta realmente accadendo qui è -

  • Sta chiaramente rendendo molto importante il precedente/successivo e non crea confusione.

  • Nei numeri di pagina tre punti (...) seguiti dagli ultimi due numeri di pagina che mostrano chiaramente che l'impaginazione arriva fino a 200. Nel caso in cui l'utente desideri andare all'ultima pagina, farà semplicemente clic su 200.

  • UX molto lineare e non confusa

Spero che sia di aiuto.

114
Dinesh Golani

Impaginazione con elenco di selezione

Quando esiste un numero gestibile di pagine:

previous/next pagination with select list (with all page numbers)

  • Mostra il numero di pagina corrente (selected attributo di option)
  • Mostra l'ultimo numero di pagina dopo un clic (potrebbe anche essere aggiunto accanto all'elenco di selezione se è importante)
  • Permette di saltare direttamente a qualsiasi pagina (incluso il primo e l'ultimo)
  • Non confondere due serie di pulsanti (primo/ultimo e precedente/successivo)

Impaginazione con campo di input

Funziona bene anche quando ci sono molte pagine:

previous/next pagination with input field

  • Mostra il numero di pagina corrente (predefinito value del campo di input)
  • Mostra l'ultimo numero di pagina (potrebbe anche essere reso selezionabile)
  • Permette di saltare direttamente a qualsiasi pagina inserendo il numero di pagina
  • Non confondere due serie di pulsanti (primo/ultimo e precedente/successivo)

(Entrambi i modi potrebbero essere combinati con una casella combinata.)

17
unor

Digito spesso nella barra degli URL in modo da poter accedere direttamente alla pagina desiderata. Una casella di input che consente all'utente di digitare la pagina diretta sarebbe un grande impulso in UX e usabilità.

Puoi fare in modo che il numero di pagina corrente (quello che appare come attivo) diventi contenteditable quando fai clic (assicurati di evidenziare automaticamente) e lasciare che l'utente digiti un numero e premi Enter. Puoi anche fare qualcosa come la risposta di Dinesh Golani e sostituire uno dei ... con una casella di input, come il mio (brutto) modello rapido di seguito:

1

2

3

4

9
Keavon

Inserendo le opzioni in questo modo l'utente ha un senso mentale della propria posizione e direzione per il movimento. Invertire la posizione dei pulsanti NEXT e LAST sarebbe controintuitivo.

Ogni scenario è diverso a seconda delle azioni probabili dei tuoi utenti e delle informazioni che stai visualizzando. Se i risultati della ricerca si estendono su molte pagine, forse un sistema di filtraggio migliore potrebbe essere utilizzato per limitare i risultati e impedire ulteriori lavori da parte dell'utente, allo stesso modo l'ordinamento dei risultati (Ordina per) potrebbe essere implementato se vengono presentate più colonne.

Se, come nel tuo scenario, spesso vuoi semplicemente andare alla pagina successiva, lo scorrimento infinito potrebbe essere un'opzione migliore (ad esempio tumblr.com). Ma spesso se la pagina ha icone chiaramente definite che non sono piccole e difficili da usare, le opzioni di paginazione generali funzionano bene.

enter image description here

7
OpenTage

Cercando di pensare fuori dagli schemi:

Innanzitutto dobbiamo considerare cosa facciamo con l'impaginazione:

Penso che questi coprano la maggior parte dei casi:

  • Navigazione "fine": vai alla pagina successiva/precedente
  • Navigazione "grossolana": vai alla prima/ultima pagina, vai avanti/indietro di molte pagine
  • Indica le pagine attuali e totali

quindi, che dire di usare un cursore per l'impaginazione:

    [ < prev ]  [=================================[~~~]-------------------]  [ next > ]
                                                    ^
                                             { page 10 / 14 }
  • successivo e precedente consentono una navigazione di precisione
  • facendo scorrere il dispositivo di scorrimento completamente verso sinistra o verso destra, si accede alla prima o all'ultima pagina. Trascinando il dispositivo di scorrimento o facendo clic sulla barra, è possibile navigare in modo approssimativo.
  • Tenendo premuto con il pulsante del mouse o il touchscreen, viene visualizzato un popup con il numero esatto di pagina e la posizione del dispositivo di scorrimento indica approssimativamente la pagina in cui ci si trova.

Professionisti:

  • Visivamente attraente.
  • Non ci sono molti numeri sullo schermo.
  • Pulsanti facili (relativamente grandi) per la pagina successiva/precedente.
  • Nessuna confusione con le frecce singole e doppie.

Contro:

  • Non comunemente usato
  • Potrebbe essere difficile da usare su dispositivi touchscreen.
  • Potrebbe essere difficile posizionare la descrizione comandi per i dispositivi touchscreen.

Modifica

Mi piace evitare di usare solo le frecce per anteprima/successiva, a seconda del contesto, ma possono essere troppo piccole per fare clic facilmente. Prova anche a posizionare i pulsanti successivo/precedente in una posizione coerente, consentendo un rapido clic successivo. Considera anche di usare parole più descrittive rispetto a next/previous: (ad esempio: newer/old; più economico/più costoso; ecc., A seconda del metodo di ordinamento delle pagine)

4
Amy

Bene, c'è una bella soluzione qui: Pagina . Cerca di incorporare collegamenti numerati e precedenti/successivi nello stesso stile di impaginazione. Ed ecco una demo funzionante: Demo .

2
Abhinav Gauniyal

Mi piace la risposta di Hildred e metterei una casella di input tra le due righe come separatore e usabilità extra, e mi piacciono i passaggi del 10% arrotondati nella parte inferiore. Solo un'altra idea. Per visualizzarlo come di seguito è necessaria una buona logica.

[modificare]

Raffreddare sarebbe visualizzare la riga inferiore solo al passaggio del mouse, ma non in fondo, in cima ai numeri di pagina come la tastiera Android.

Pagina 1/100

     1   2   3    >
[  or enter page  ]
    10  20  30   >>

Pagina 66/100

<    65  66  67   >
[  or enter page  ]
<<   70  80  90  >>

Pagina 99/100

<    98  99  100  >
[  or enter page  ]
<<   80  90  100  >
1
twicejr

Un'idea diversa:

Prev 1 2 3 Next
First 99 100 Last

Ha bisogno di un po 'di lavoro, ma non dimenticare <a rel=next> o <rel = next>

1
hildred

Ho anche visto l'impaginazione visualizzata in questo modo:

Prec. 1 2 3 4 5 ... 10 11 12 ... 18 19 20 Succ

~ È possibile fare clic su ogni numero, insieme a Precedente e Successivo.
~ I numeri indicati al centro aiutano l'utente a raggiungere la metà del numero totale di pagine, che è 20 in questo esempio.
~ L'utente può effettivamente navigare facilmente verso l'inizio, la metà e la fine dei risultati.
~ Anche il carico cognitivo è nelle giuste quantità.

Nota che qui il primo set ha 5 numeri, questo aiuta l'utente ad andare fino alla 5a pagina assumendo facilmente che queste pagine siano più rilevanti.

0
Vinay

Pensi che l'approccio nella barra in basso rende i numeri difficili da identificare? Penso di no.

PDF-XChange Viewer

Informativa completa: non lavoro per l'azienda che produce PDF-XChange Viewer.

0
sergiol

Mi piace l'approccio del sito http://www.kuantokusta.pt/ : non hanno affatto il primo o l'ultimo pulsante. Puoi vederlo se fai una ricerca, oppure posso darti il ​​link di una ricerca esemplare: http://www.kuantokusta.pt/search?q=ténis&pag=11 .

Se scorri verso il basso, vedrai ogni numero di pagina come un rettangolo arrotondato attorno ad esso, facendoli apparire come entità più coerenti e difficilmente facendo clic erroneamente sulla pagina a lato. Perché ciò contribuisce anche al fatto che quando si passa con il mouse su uno di questi elementi, si ottiene uno sfondo diverso.

Puoi vedere questa "barra di navigazione della pagina" sull'immagine:

Kuanto kusta Page navigation bar

0
sergiol

Se voglio vedere gli elementi alla fine dell'elenco mentre è attualmente in ordine, allora LAST mi permette di arrivarci rapidamente piuttosto che fare clic su ogni pagina fino a quando non sono in Z. Alcune interfacce utente mi consentono di ordinare e invertire l'ordinamento, ma non tutti lo fanno.

Questa è la sua unica "buona usabilità", in cima alla mia testa.

0
Ken Mohnkern