Aumentano gli esempi di scrolling infinito sulle pagine web: ma la paginazione è ancora una soluzione valida?
La paginazione è da sempre un elemento fondamentale su tutti i siti web e sui blog. Quei numeri che consentono di spostarsi nell’archivio delle notizie più datate sono stati spesso al centro di dibattiti sulla loro effettiva usabilità: sono veramente la soluzione più comoda?
Da qualche tempo questo tipo di paginazione è stata sostituita da una sorta di scrolling infinito su diversi siti importanti: Facebook e la nuova ricerca immagini di Google sono i casi più rilevanti. Ma la soluzione in realtà non è nuova. Già nel 2006 ne avevo parlato su questo sito, citando gli esperimenti degli Humanized Labs.
E’ difficile stabilire se questa sia la soluzione definitiva, ma sicuramente è una possibilità che va presa in considerazione. Tra gli svantaggi principali sono da considerare:
l’impossibilità di raggiungere il footer
l’impossibilità di linkare la pagina in uno stadio intermedio
la memoria richiesta dal browser per gestire pagine di questo tipo
Alcuni problemi possono essere aggirati, ad esempio inserendo un tasto per caricare i nuovi contenuti invece di farlo in automatico, ma questo non elimina tutti i difetti.
Molto dipende sicuramente dal sito: in certi casi non ha senso mostrare 200 pagine, soprattutto nel caso dei risultati di ricerca o di contenuti ordinati per rilevanza. Voi cosa ne pensate? Usereste lo scrolling infinito sul vostro blog?
Se siete interessati a sperimentare, esiste un plugin WordPress che introduce questo tipo di navigazione: pro e contro sono elencati anche dall’autore, valutateli con attenzione e se avrete dei risultati interessanti fatemi sapere!
La nuova funzione wp_nav_menu di Wordpress 3.0, tra drag & drop e menu su misura.
Una delle funzioni più interessanti del prossimo WordPress 3.0 permette di creare menu di navigazione personalizzati direttamente dal pannello di amministrazione.
E’ possibile infatti creare dei menu contenenti contemporaneamente:
pagine
categorie
link diretti ad url specifiche
Questa novità facilita le possibilità di personalizzazione: non è più necessario nemmeno modificare nel template funzioni come wp_list_pages() o wp_page_menu, alle quali andavano passate come parametri le pagine da escludere.
I menu personalizzati sono gestiti in maniera simile alle widget: si selezionano le pagine e con il drag & drop è possibile ordinarle anche su sottolivelli. Il problema più grave di questo metodo riguarda l’accessibilità: non c’è stato alcun miglioramento dalle versioni precedenti di WordPress. E’ infatti impossibile ordinare gli elementi senza usare il mouse.
Rendere compatibile un tema con i menu personalizzati
E’ possibile adattare un tema esistente con i nuovi custom menu senza troppe difficoltà. E’ stata infatti introdotta una nuova funzione, che inserisce automaticamente sul sito il primo menu personalizzato che viene creato:
<?php wp_nav_menu(); ?>
Trovate la documentazione relativa ed i parametri opzionali in questa pagina del Codex. L’unica cosa necessaria da sapere è che se non è stato creato nessun menu personalizzato, la funzione wp_nav_menu va in fallback direttamente su wp_page_menu, di cui avevo già parlato in passato. Questo garantisce sempre la presenza di un menu di navigazione, permettendo agli utenti con esigenze particolari di poterlo personalizzare.
Aggiornamento: in attesa dell’uscita della versione ufficiale, potete scaricare la beta 2 di WordPress 3.0 dal blog.
Presentati sul blog ufficiale di Wordpress alcuni screenshot della versione 2.7: il lancio è imminente, ed il visual design è ormai ad un punto ben definito.
La versione 2.7 di WordPress offrirà numerose novità: ci sono già stati alcuni segnali importanti con il primo ed il secondo sondaggio sull’interfaccia dell’amministrazione, presentata pochi giorni fa al pubblico sul blog ufficiale.
La pubblicazione di un articolo riguardante il visual design di WordPress 2.7 indica che la versione attuale è molto vicina a quella che sarà la release finale, e fino ad allora cambieranno solo dettagli minori.
Il menu laterale
Come è possibile vedere da questo screenshot, il menu sarà spostato a sinistra e le singole voci saranno espandibili, per consentire di arrivare alle varie pagine con pochi click. E’ la naturale correzione di uno dei maggiori difetti di WordPress, che attualmente io ho risolto col plugin Lighter Menus.
E’ un bene che sia stata rivolta particolare attenzione alla navigazione: in una piattaforma così evoluta era impensabile dover effettuare due o addirittura tre passaggi per arrivare alla pagina desiderata.
Interessanti le considerazioni del post ufficiale, dove vengono illustrate due possibili modalità di utilizzo del nuovo menu. Cliccando direttamente sui titoli delle sezioni si avrà una navigazione per utenti meno esperti, simile al modello attuale; si potranno però anche espandere le varie categorie e chiudere quelle meno usate con un doppio click, per muoversi più velocemente all’interno dell’amministrazione.
In questo screenshot della nuova Dashboard (la bacheca), il menu infatti appare completamente chiuso:
Nei prossimi giorni verrà probabilmente presentata in maniera più dettagliata proprio la Dashboard, mentre la data del rilascio definitivo di WordPress 2.7 sarà il 10 Novembre 2008, come è possibile verificare sulla roadmap.
Aggiornamento del 21 Ottobre 2008: come previsto è stato appena pubblicato anche un post sulla nuova Dashboard, insieme ad altre interessanti anticipazioni sul funzionamento del menu di navigazione: le sezioni aperte e chiuse resteranno tali grazie a dei cookie, che memorizzeranno le preferenze dell’utente. Potete approfondire l’argomento sul blog ufficiale di WordPress.
Per chi ha notato la presenza di alcune statistiche sulla Dashboard, queste non faranno parte del core. Si tratta del plugin WordPress.com Stats adesso incluso in Jetpack, che permette di installare sul proprio blog personale lo stesso sistema di rilevamento delle visite presente su WordPress.com.
Una guida completa per organizzare la navigazione di un sito, evitando gli errori più comuni.
Realizzare un sito usabile è un obbligo per ogni web designer professionista. Spesso però non viene riservata sufficente attenzione alla navigazione, dimenticando che un visitatore non tornerà mai su un sito dove non è capace di trovare ciò che cerca.
A questo proposito mi sono permesso di prendere spunto e reinterpretare un interessante post di ifohdesigns, per approfondire la questione suddividendola per argomenti.
Vincoli
Prima ancora di affrontare l’organizzazione della navigazione, è bene analizzare i vincoli presenti. Inutile pensare ad una soluzione se questa non è praticabile, ogni modello deve essere costruito in base al sito.
I limiti più evidenti, che spesso impediscono di seguire una scelta piuttosto che un’altra, sono:
il numero di pagine del sito
la gerarchia delle pagine e la struttura generale
lo stile grafico ed il layout
Consigli e divieti
Per migliorare la navigazione di un sito, è fondamentale non incorrere in gravi problemi di accessibilità ed usabilità. Alcune regole sono ovvie, ma non è mai scontato ricordarle:
non usare Flash per i menu
utilizzare JavaScript solo se i menu restano accessibili anche senza script abilitati
se usate delle immagini, fatelo tramite CSS con una tecnica di image replacement, senza inserirle direttamente nel codice html
cambiando le immagini di sfondo con i CSS, create degli sprite per evitare fastidiosi ritardi al caricamento
Posizione dei menu
I menu di navigazione possono essere posizionati in maniera più o meno originale, ma le collocazioni standard sono tre. Ci possono essere altre soluzioni, ma è meglio non esagerare con la fantasia:
menu orizzontale sotto l’header, se non ci sono troppe voci
menu orizzontale sopra l’header, per link secondari
menu verticale, solitamente a sinistra, facendo attenzione che le voci importanti siano visibili a colpo d’occhio e non scendano oltre i 600-700 pixel
Coerenza
La navigazione dovrebbe essere coerente su tutte le pagine del sito. Una volta decisa la struttura, è fondamentale non cambiare la posizione dei menu o modificarne l’aspetto a seconda della pagina, perchè il visitatore potrebbe rimanere disorientato.
A volte capita di trovare siti con sezioni dove manca la navigazione, con un semplice link “torna alla homepage”. Una soluzione simile non è sufficiente.
Attributi title
E’ importante non dimenticare di fornire maggiori informazioni sui link tramite gli attributi title dell’HTML. Alcune pagine possono avere nomi convenzionali e autoesplicativi, ma è sempre meglio semplificare la vita dell’utente.
Inoltre usare dei title coerenti può favorire una corretta indicizzazione sui motori di ricerca, rendendo anche il sito più accessibile.
Gerarchia
Se un sito contiene numerose pagine, non è mai conveniente metterle tutte sullo stesso livello. Meglio organizzarle in gruppi, suddividendo la navigazione per facilitare la comprensione.
A volte potrebbe bastare raccoglierle in un menu secondario, da mostrare solo quando necessario.
Breadcrumb (Briciole di pane)
Se il sito è complesso, è essenziale avere sempre visibile il percorso della pagina corrente. In certi casi può essere utile visualizzare il path anche su un blog, se esistono molte pagine distribuite su più livelli.
Come si può intuire dal nome, le briciole di pane aiutano l’utente a ritrovare la strada, capire quali pagine ha visitato e decidere quali visitare successivamente.
Footer
Fino a qualche anno fa era considerato un elemento di scarsa importanza, finchè non hanno iniziato ad apparire footer alti, ricchi di link. E’ un modo per permettere all’utente di continuare la visita del sito una volta arrivato a fine pagina.
Il footer non è ovviamente da utilizzare per la navigazione principale, ma non va sottovalutato.
Conclusioni
Organizzare la navigazione non è cosa semplice. Le variabili da considerare sono numerose e non tutte facili da gestire, soprattutto su siti con una struttura complessa.
La cosa più importante è curarsi di tutti gli aspetti, tenendo presente il target di utenti, la coerenza dei menu di navigazione e l’accessibilità degli stessi. Un menu in flash per quanto possa essere attraente impedirà a tutti i visitatori senza plugin di visitare le vostre pagine.
Se ne avete la possibilità fate dei test di usabilità, anche con parenti o amici: scoprirete cose impensabili. Con un minimo di buon senso potrete ottenere ottimi risultati.
E’ arrivato anche in Italia l’Eee PC della Asus, un portatile ridotto all’essenziale con schermo da 7″, scheda wireless, 512mb di ram e Linux preinstallato (questa sì che è un’incredibile novità).
E’ la soluzione ideale per chi ha bisogno di spostarsi senza grosse pretese, ma il primo dubbio che mi è venuto leggendo il post di orangeek riguarda il monitor.
La risoluzione infatti è 800×480, e per quanto riguarda la navigazione web ci sono diversi problemi su tutti i siti realizzati negli ultimi 1-2 anni. Basti pensare che la maggioranza richiede uno schermo largo almeno 1024px per non vedere le orrende scrollbar orizzontali.
Navigare su internet con l’Eee PC è quindi difficoltoso, quasi la stessa esperienza della navigazione su cellulare che però può contare su browser studiati ad-hoc.
Peccato, perchè una risoluzione leggermente più alta avrebbe reso l’oggetto ancora più interessante, anche se il prezzo non sarebbe più stato così accessibile. Sembra tra l’altro che siano in uscita a Marzo nuove versioni a 8 e 8.9 pollici, ma con la stessa risoluzione del modello attuale.
Dubito che questo settore di mini-portatili possa far cambiare tendenza al web design degli ultimi anni, ma se realizzate applicazioni web e volete che siano veramente accessibili da tutti, fate in modo che usino un layout fluido da 800px in su, o fornite una valida alternativa come una versione per cellulari.
E’ arrivato anche in Italia l’