Best practice per l'impaginazione
Non sono sicuro del modo migliore per gestire alcune impaginazioni che devo eseguire su una tabella che potrebbe potenzialmente diventare molto grande (oltre 5.000 righe).
La mia prima domanda è se la quantità di righe mostrate per pagina deve essere dettata solo dal layout o dovrebbe essere presa in considerazione anche la quantità di pagine. Ad esempio, dovrei dire <1000 show 20 righe,> = 1000 show 30 righe?
La domanda successiva è il modo migliore per spostarsi tra le pagine, supponendo che l'utente abbia filtrato la tabella il più possibile e siano rimasti con 50 pagine di informazioni, dovrebbero ottenere una casella di input per saltare a pagina 45? O dovrebbero essere sufficienti i pulsanti skip (1) skip (5)? Al momento non so in che modo l'utente finale utilizzerà le tabelle, quindi non sono sicuro di quale opzione consentire loro di provare prima.
Infine, qualcuno ha qualche buon esempio di impaginazione fatto bene che potrebbe condividere? Sono sempre alla ricerca di un buon materiale di riferimento!
Questa impaginazione può essere eseguita correttamente oppure no, ma ecco come faccio l'impaginazione nella mia app Web:
|< First, << Previous, Page [5] of 12, Next >>, Last >|
Le quattro opzioni esterne sono collegamenti, mentre Page [5] of 12 è un modulo, con [5] come campo di input. Per gli utenti con JavaScript abilitato, nascondo il pulsante di invio e invio il modulo sull'evento unfocus o invio la pressione dei tasti. L'utente ha l'opzione su quante righe desidera visualizzare, che può selezionare da un menu a discesa: 10, 20, 50, 100, Tutto. Fornisco anche l'ordinamento e il filtraggio dei risultati oltre alla paginazione, anche se ciò potrebbe non avere senso in ogni situazione.
Edit:
Ecco uno snippet di un modello della nostra app Web per darti un'idea migliore. In questa versione, le parole sono state omesse dai pulsanti, ma appaiono come una descrizione comandi al passaggio del mouse dopo un leggero ritardo. Tuttavia, potresti scoprire che il mantenimento delle parole comporterà un livello superiore di usabilità.
Alcune altre cose da sottolineare:
- I pulsanti "Prima" e "Precedente" sono stati disabilitati perché è la prima pagina.
- Il blu indica i pulsanti attivi (dovrò eseguire questo particolare tema attraverso un controllo colore per assicurarmi che gli utenti daltonici possano fare la differenza).
- I pulsanti rimangono sempre, anche se sono disabilitati. Questo dà la coerenza dell'interfaccia.
- Ho scelto un campo di input piuttosto che una casella di selezione a discesa a causa della scala. Se hai 3000 pagine, non vuoi scorrere verso il basso per trovare la pagina
- L'impaginazione è raggruppata in una componente visuale singolare per indicare la somiglianza nello scopo.
Ci scusiamo per tale risposta, ma dipende . Che tipo di contenuto hai e cosa sta cercando l'utente? Quali sono gli obiettivi dell'utente? È un sito Web o un'applicazione?
In molti casi potresti evitare l'impaginazione usando ad esempio lo scrolling infinito (vedi i risultati di ricerca di Google image search ).
Il problema con l'impaginazione è che le pagine stesse non hanno alcun significato. Perché dovrei andare a pagina 45? Perché non 38? Se il contenuto è ordinato, puoi provare a dare alle pagine nomi significativi (come lettere di un alfabeto o intervallo di date o qualsiasi altra cosa che abbia senso). La quantità di righe per pagina dovrebbe essere la più grande possibile perché lo scorrimento di solito offre un'esperienza molto migliore rispetto alla navigazione tra le pagine (tuttavia non è una regola generale e ci sono alcune eccezioni).
E per gli esempi e le buone pratiche ecco un ottimo articolo .
In generale, il numero di elementi per pagina è qualcosa che determini in base ai seguenti criteri:
- Che tipo di dati sto visualizzando e per quanto tempo la pagina sarebbe composta da un determinato numero di elementi?
- Quali conseguenze hanno gli elementi X sulla pagina per le prestazioni dell'app?
- Voglio consentire agli utenti di personalizzare il numero di elementi visualizzati per pagina?
- Se mi interessa la navigazione interpagina (ad esempio, un utente si preoccuperà di andare alla pagina specifica n. 512?), In che modo il numero di elementi per pagina influirà sulla navigabilità dell'impaginazione?
- Quali controlli di paginazione sono disponibili per me?
Se rispondi alle domande precedenti, queste porteranno bene alle risposte per la tua seconda domanda. L'impaginazione è un prodotto dei dati che hai e del numero di elementi che stai visualizzando. Il mio consiglio è di determinare se i tuoi utenti vogliono specificare quale pagina vogliono visualizzare. È possibile capirlo facendo test utente e pensando a quale tipo di informazione viene elencata. Ad esempio, i risultati della ricerca sono raramente abbastanza specifici da poter dire "Voglio andare a pagina 47" poiché di solito sono ordinati in base a un algoritmo criptico e opaco. Ma se stai elencando, diciamo, i nomi in ordine alfabetico, andare a pagina 47 può essere molto intuitivo.
Allo stesso modo, anche il tipo di dati che stai visualizzando può influire sulla navigazione e potresti voler considerare il modello di progettazione della navigazione sfaccettata per semplificare le cose. Nell'esempio che ho appena dato sui nomi alfabetici, potresti considerare l'impaginazione usando lettere (A | B | C | D ecc.) E pagine all'interno di ogni lettera se hai molti dati.
In concreto:
- Non consiglio di dare agli utenti un controllo troppo specifico a meno che tu non sappia per certo che è quello che vogliono
- Invece, offri il riempimento intorno alla pagina corrente (1 .. 7 8 [9] 10 11 .. 28)
- Includi la prima e l'ultima pagina se stai ordinando algoritmicamente, a meno che non sia possibile per motivi di prestazioni.
- Se l'ordinamento è algoritmico, considerare varie opzioni di ordinamento (come invertire il criterio di ordinamento) - dipende dal tipo di dati
Esempi di impaginazione eseguiti correttamente:
- Flickr - cancella la differenziazione tra stato selezionato, inattivo e stato del collegamento; colori accessibili; collegamenti imbottiti con buoni target di clic; buona imbottitura attorno alla pagina corrente; non eccessivamente complesso. Un preferito personale.
- Funda.nl - Sito web immobiliare olandese con un design fantastico, semplice e di facile lettura che si riflette anche nella paginazione
- Bing - nessun BS, design tipografico minimalista che significa che l'impaginazione è molto sottile ma allo stesso tempo facile da usare
- Google (ovviamente) - una specie di espediente, ma nonostante abbia molte opzioni, si sente ancora semplice e ti porta persino un sorriso in faccia
- Chris Messina ha alcuni buoni scatti di impaginazione nel suo album dei modelli di design su Flickr.
Modelli di impaginazione:
Per quanto riguarda la tua prima domanda, sono un fan della coerenza (e anche la maggior parte degli utenti). Non confondere l'utente e fargli pensare perché vedono più righe questa volta ... Puoi anche consentire loro di selezionare "elementi per pagina", che è una pratica molto comune e utile.
Gli utenti preferiscono lo scorrimento e il paging. È molto più facile utilizzare la rotella di scorrimento che puntare su piccoli collegamenti di navigazione.