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!

Le linee guida per la realizzazione di siti accessibili da tempo hanno chiarito un punto: è fondamentale offrire ad un utente la stessa esperienza di navigazione, indipendentemente dal dispositivo utilizzato. Se fino a poco tempo fa era ovvio pensare alla navigazione da tastiera oltre a quella via mouse, l’avvento dei touchscreen ha aggiunto un altro livello di complessità.

Non si tratta di una questione banale, perché utilizzare un touchscreen è un’esperienza totalmente diversa rispetto alla navigazione tradizionale: ve ne sarete resi conto se avete uno smartphone o un iPad.

Cosa dicono le linee guida

Tra i 22 requisiti per la verifica tecnica della legge Stanca, è da sottolineare il numero 16:

Garantire che i gestori di eventi che attivano script, applet oppure altri oggetti di programmazione o che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico dispositivo di input.

Ed anche un passaggio del requisito 21:

I collegamenti presenti in una pagina devono essere selezionabili e attivabili tramite comandi da tastiera, tecnologia in emulazione di tastiera o tramite sistemi di puntamento diversi dal mouse.

Indicazioni di questo tipo esistono anche nelle WCAG, sia nella loro versione 1.0 che nella più recente 2.0. Un esempio è la linea guida 9 delle WCAG 1.0: Design for device-independence.

I problemi con i touchscreen

La differenza fondamentale tra un mouse ed un touchscreen è che per il secondo non esiste mouseover. Potrebbe sembrare una banalità, ma se pensate a quanti siti utilizzano i CSS o JavaScript per scatenare un evento al passaggio del mouse, potete rendervi bene conto dell’entità del problema (menu a tendina, tooltip…).

Fino ad ora la soluzione più utilizzata consiste nel trasformare il mouseover in un ulteriore clic, anche se questo aumenta la complessità della navigazione. E’ una soluzione efficace? Sì, perché risolve il problema, ma non è detto che sia quella ottimale.

Il discorso quindi si lega anche al tema usabilità ed al design delle interfacce: è inevitabile che l’arrivo di una nuova modalità di navigazione introduca nuove variabili.

Da evitare

Sono sicuramente da eliminare o rappresentare in maniera differente:

• contenuti leggibili solo con lo stato :hover (ad esempio testi con poco contrasto rispetto al background)
• link visibili solo al mouseover, normalmente poco distinguibili dal testo semplice
• azioni correlate al mouseover su un particolare elemento (le più comuni sono modifica e cancella)

Uno sguardo al futuro

I touchscreen sono ormai sul mercato da anni, e la loro presenza continua ad aumentare. Tralasciando le discussioni sulla loro effettiva utilità, è logico pensare che nei prossimi anni continueremo a vedere dispositivi che li utilizzano, seguendo l’esempio dell’iPad.

In questo scenario è obbligatorio considerarne la presenza, soprattutto se si realizzano siti con interfacce fuori dal comune. Proprio questa originalità a volte può rendere un sito inaccessibile: l’importante è ricordare che non esiste solo il mouse.

La prima cosa da fare è assicurarsi che sia possibile usufruire di tutti i servizi di un sito indipendentemente dal mezzo utilizzato per navigare. I touchscreen hanno introdotto nuovi fattori, e la situazione è destinata a diventare sempre più complicata: pensate a chi sta già utilizzando la propria console di casa per navigare dal televisore, o a chi sta usando lo stesso Tv LCD per collegarsi ad internet. In futuro i dispositivi connessi alla rete saranno sempre di più: forse sarà l’occasione buona per vedere considerare l’accessibilità una necessità e non un lusso per pochi.

[Foto di bark]

Come consuetudine la novità è stata pubblicata come preview per gli utenti, che possono decidere se mantenere la vecchia versione per qualche tempo o utilizzare la nuova: questa pratica è ormai consolidata e concede ad una buona fetta di utenti di abituarsi al cambiamento, senza imposizioni da un giorno all’altro. Le critiche non mancheranno comunque, ma sarebbe un’utopia pensare di fare felici tutti con un redesign di un’interfaccia.

Per l’elenco delle novità in dettaglio vi rimando al post ufficiale sul blog di Flickr: io preferisco soffermarmi solo su alcuni aspetti del cambiamento, e su come certi dettagli siano stati molto apprezzati dagli utenti abituali. E’ stata una sorpresa infatti leggere molti pareri positivi, cosa che non era successa con altri redesign (vedi il caso di Facebook).

I dettagli più interessanti

Foto più grandi

In un sito che ha nelle immagini la sua ragione di esistere, aumentare la dimensione di default delle stesse è una mossa vincente. Le foto iniziavano infatti ad essere troppo piccole per le risoluzioni sempre più elevate dei nuovi monitor: adesso arrivano ad una larghezza di 640 pixel, sicuramente più accettabile.

Ingrandimento con un clic

Questa è una delle novità più interessanti: molti utenti infatti inserivano nella descrizione delle foto un link alla stessa immagine più grande su sfondo nero. Sono nati anche servizi esterni per questo, e Yahoo! ha deciso di assecondare gli utenti offrendo la feature direttamente su Flickr. Adesso con un clic sull’immagine questa viene visualizzata a schermo intero su sfondo nero, e la resa è ottima:

Geotagging in evidenza

Mettere in evidenza le informazioni geografiche collegate ad una foto qualche anno fa sarebbe stata una follia. Adesso non lo è più. Con smartphone e fotocamere dotate di GPS, geolocalizzare le foto è automatico, e comunque è sempre possibile farlo anche manualmente dopo aver importato gli scatti.

Inserire questa feature al primo posto sulla sidebar destra fa capire la sua importanza. In questo modo diventa ancora più facile ritrovare tutti gli scatti di una certa località e scoprire le foto più popolari di un luogo.

I difetti

Nonostante il redesign sia positivo, alcune cose potrebbero essere ulteriormente migliorate.

Avrei apprezzato molto uno spazio dedicato ai dati EXIF delle immagini: Flickr è una community ricca di fotografi, e certe feature sarebbero sicuramente apprezzate. In questo redesign invece i metadati rimangono su una pagina separata: sarebbe stato interessante vedere almeno apertura, tempo di esposizione ed ISO.

Per quanto invece riguarda il codice e l’accessibilità delle pagine, non mi è mai piaciuta (e continua a non piacermi) l’eccessiva dipendenza da JavaScript di alcune funzioni. E’ comprensibile che certe azioni siano impossibili senza appoggiarsi a degli script, ma si potrebbe fare di meglio anche solo per quanto riguarda i menu di navigazione: con JavaScript disabilitato infatti la maggior parte dei link non funzionano ed i menu non possono essere aperti (cosa che sarebbe facile da implementare con qualche riga di CSS).

Sono invece funzionanti i nuovi link di zoom e di navigazione (foto successiva / precedente): è possibile che per alcuni nuovi elementi dell’interfaccia sia stata prestata più attenzione, ed altre parti del sito come il menu generale siano rimaste invece con i vecchi difetti. Questo redesign infatti riguarda solo la pagina foto di Flickr, tutto il resto è rimasto inalterato.

In conclusione

Il nuovo design è piacevole e più funzionale: il parere complessivo è decisamente positivo. Ci sono alcuni elementi che potrebbero essere ulteriormente migliorati, ma riguardano più la piattaforma intera di Flickr che la pagina delle singole foto. Per il momento fa piacere vedere qualcosa di nuovo in un sito che era rimasto fermo da anni: le modifiche faranno contenti i molti utenti pro che decidono ogni anno di rinnovare il proprio abbonamento.

L’esempio più recente è quello di Facebook: ha stravolto l’homepage, e nonostante gli avvertimenti che anticipavano l’aggiornamento le critiche non si sono fatte attendere. Migliaia di utenti insoddisfatti della nuova interfaccia si sono fatti sentire, reclamando quella precedente.

Evoluzione continua

La soluzione in molti casi potrebbe essere semplice: invece di aggiornare tutto in una volta, meglio procedere per gradi, apportando modifiche minori. In questo modo gli utenti saranno capaci di abituarsi al cambiamento, anzi molti non noteranno nemmeno le nuove funzionalità finchè non le troveranno casualmente.

E’ la pratica adottata da molte applicazioni web in beta costante (qualcuno ha detto Gmail?), che non possono permettersi di rimanere statiche nel tempo. Grazie ai feedback degli utenti le modifiche arrivano gradualmente, correggendo problemi ed introducendo nuove funzionalità.

Il nuovo spaventa

Un altro aspetto da considerare è il “fattore novità”. Molti si lasciano facilmente spaventare dal nuovo, finendo magari per scoprire che non è così male dopo un normale periodo di apprendimento.

Per questo motivo le critiche vanno sempre valutate con attenzione, cercando di intuire il male minore. Se un’interfaccia ha realmente bisogno di essere aggiornata introducendo importanti cambiamenti, gli utenti se ne accorgeranno col tempo: l’importante è rendere la transazione meno traumatica possibile.

Se avete intenzione di aggiornare il vostro blog, o avete un sito destinato a cambiare look, una soluzione potrebbe quindi essere farlo per gradi. Mantenere degli elementi dell’interfaccia comuni tra le due versioni è una scelta saggia, in modo che i visitatori possano orientarsi facilmente.

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, che permette di installare sul proprio blog personale lo stesso sistema di rilevamento delle visite presente su WordPress.com.

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.

Anche questa volta si parla del pannello di amministrazione, che sicuramente cambierà aspetto nonostante il restyling già avuto col rilascio della versione 2.5 della piattaforma.

Oggetto della discussione sono i seguenti elementi:

• la posizione del box di ricerca all’interno dell’amministrazione
• la posizione del menu “favorites”: un nuovo strumento che permetterà di avere a portata di clic tutte le funzioni più utilizzate, raccolte in un menu a tendina
• la label della funzione “Future Publish/Edit Timestamp”, che consente di cambiare l’ora dei post e programmarli anche per la pubblicazione futura

Il sondaggio si chiuderà dopo i primi 5000 pareri, quindi se volete partecipare e dire la vostra affrettatevi!

In occasione delle precedenti votazioni, anche su questo blog ci sono stati pareri discordanti. Da un certo punto di vista è interessante l’apertura di WordPress alla community ed al parere di chi utilizza tutti i giorni questa piattaforma di blogging, ma non tutti sono sicuri che questo sia il metodo migliore.

Lascio a voi eventuali considerazioni: lo sforzo del team è ammirevole, ma c’è chi ritiene (non senza ragione) che determinate scelte riguardanti l’interfaccia debbano essere fatte con attenzione, a seguito di attenti test e verifiche.

Tra le principali novità, si parla di una riorganizzazione dell’interfaccia nonostante le modifiche da poco introdotte, e di cui ho già parlato in maniera approfondita. La cosa può stupire, soprattutto considerando che l’attuale versione del pannello di amministrazione è stata studiata in collaborazione con lo studio Happy Cog di Zeldman, ma l’obiettivo è quello di continuare a migliorare WordPress, che negli ultimi tempi si è evoluto in maniera incredibile.

Se utilizzate WordPress e volete dire la vostra, la notizia di oggi è l’apertura di un sondaggio. E’ un segno di grande attenzione verso gli utenti, che non sempre vengono considerati come dovrebbero. Che abbiate un blog su un dominio personale o su wordpress.com, potete partecipare alla creazione della nuova interfaccia esprimendo le vostre preferenze.

Il sondaggio è in inglese e lo trovate a questo indirizzo.

Tra tutte le convenzioni utilizzate però, una sta ormai diventando obsoleta: quella del floppy disk per indicare il salvataggio di un documento. In questi giorni Positive Space ha sollevato la questione, affermando che è ormai ora di trovare una nuova soluzione: i dischi floppy stanno sparendo, e le nuove generazioni di utenti non avranno modo di capire a cosa faccia riferimento l’icona.

Premettendo che trovare una soluzione soddisfacente non è cosa facile, la stessa decisione di sostituire il floppy non è scontata. L’icona del salvataggio è ormai diventata un concetto astratto, al di là del significato materiale dell’oggetto rappresentato. La convenzione floppy = salva è ben radicata, e sostituirla con un altro tipo di supporto porterebbe ad affrontare lo stesso problema tra una decina di anni.

Voi cosa ne pensate? Avete delle proposte per cambiarla o preferireste mantenerla?

Ho fatto una ricerca su diversi set di icone esistenti, e spesso l’icona del salvataggio è assente, probabilmente perchè per le pagine web il download è più che sufficiente. Tutti i set che la possiedono però non osano utilizzare una simbologia differente, proprio ad indicare quanto sia forte l’attuale convenzione.

Nell’immagine è possibile vedere alcuni degli esempi che ho trovato, direttamente dai set di icone Milky, Oxygen, Function, Fugue e Diagona.

Se è vero che il floppy ormai è un oggetto obsoleto, cambiare l’icona di salvataggio non è detto che sia una scelta saggia nel design di un’interfaccia. Dite la vostra nei commenti, nuove proposte sono benvenute: la discussione può servire anche a rendersi conto se davvero esista un’alternativa valida.

Ho effettuato alcuni test, e posso dire con cognizione di causa che Google Chrome mi ha decisamente stupito. Mi aspettavo un prodotto spartano, ancora instabile e non all’altezza della concorrenza, ma i fatti mi hanno smentito clamorosamente.

Velocità

Fin dalle prime pagine aperte, vi renderete conto che la velocità del browser di Google è incredibile. Il motore javascript è stato realizzato da zero, ed i risultati si vedono.

Pseudotecnico sul suo blog ha pubblicato un confronto con Firefox 3, fino ad ora il più veloce, e Chrome risulta 3 volte meglio.

Rendering delle pagine

Chrome utilizza WebKit per il rendering delle pagine, lo stesso di Safari 3.1. I siti realizzati secondo gli standard web non avranno quindi grandi problemi di visualizzazione. Potrebbe essere necessario un controllo per evitare problemi con il Javascript, ma per gli sviluppatori il lavoro aggiuntivo non dovrebbe essere troppo.

Dai primi test ho notato però che text-shadow, proprietà dei CSS3 funzionante su Safari, non ha alcun effetto su Chrome.

Barra degli indirizzi e ricerca

La barra degli indirizzi funziona in maniera simile a quella di Firefox 3, ma serve anche come casella di ricerca. E’ una bella soluzione, consente di alleggerire l’interfaccia e dopo poco tempo diventa tutto intuitivo. Tutto sommato è una banalità, ma nessuno ci aveva pensato prima.

Dettagli e curiosità

Ci sono altre funzioni degne di nota, prima di tutto per gli sviluppatori. E’ disponibile una console Javascript, un debugger, e cliccando col tasto destro del mouse su una pagina appare la voce “Ispeziona elemento” che apre una finestra simile a Firebug.

Come noto inoltre, le tab aperte occupano ognuna un processo separato. Se provate a chiuderne uno a caso dal task manager, vedrete apparire un originale messaggio sul browser.

Mancanza di estensioni

Il principale difetto di Chrome, così come di altri browser, è la mancanza di estensioni ed add-on. E’ proprio questa la forza di Firefox, e nessuno fino ad ora è riuscito a contrastare il browser di casa Mozilla su questo campo. E’ improbabile che per Chrome le cose cambino: basti pensare ad un’estensione come AdBlock. Google non consentirà mai di nascondere le pubblicità sul suo browser.

Problemi di sicurezza

Safari ha presentato alcune lacune sul lato della sicurezza, e Chrome che deriva da WebKit non ne è esente. In particolare è stata già riscontrata una vulnerabilità grave, che su Safari è stata corretta, mentre sul browser di Google è ancora presente.

Licenza d’uso

La nota dolente di Chrome è soprattutto questa. La licenza di utilizzo del software presenta diversi lati oscuri, una vera manna per chi contesta a Google le sue attitudini da Big Brother.

Il primo punto critico riguarda gli aggiornamenti, visto che Google si riserva il diritto di installarli automaticamente senza che l’utente possa fare niente.

Altro punto della licenza riguarda la pubblicità:

[..] alcuni servizi sono supportati con sistema di advertising revenue e possono mostrare pubblicità e promozioni. Queste pubblicità possono essere personalizzate sui contenuti delle informazioni allocate nei servizi [..]

Chrome potrebbe quindi sfruttare le numerose informazioni dell’utente collezionate durante la navigazione per scopi pubblicitari. Advertising mirato quindi, a scapito della privacy.

Conclusioni

Il nuovo browser di Google è un prodotto interessante, veloce e per certi versi innovativo, soprattutto per quanto riguarda l’interfaccia. Personalmente trovo difficile rinunciare a Firefox, ma non mi stupirei se Chrome guadagnasse quote di mercato interessanti.

Restano i lati oscuri riguardanti la sicurezza e la privacy, e per il momento esiste solo la versione Windows, ma il futuro potrebbe riservarci numerose sorprese. Se Google decidesse di puntare in questa direzione con decisione, anche i competitor più agguerriti avranno dei problemi a mantenere le loro quote di mercato.

Se avete altri dubbi su Chrome, vi rimando alle FAQ realizzate da Giovy.