L’usabilità di Periscope: soluzioni intelligenti per touchscreen

La navigazione tramite gesture è l’ideale per i touchscreen di grandi dimensioni.

Periscope è senza dubbio una delle app del momento: streaming video alla portata di tutti dal proprio smartphone. Dopo l’entusiasmo dei primi giorni viene ormai usata abitualmente da personalità più o meno famose del web, e sono in tanti ad avere trovato in questa app un modo per condividere con tutto il mondo momenti della propria vita in tempo reale.

Con questo articolo però voglio porre l’attenzione sull’usabilità di Periscope, che dietro un’interfaccia apparentemente semplice nasconde delle soluzioni intelligenti.

Continua a leggere L’usabilità di Periscope: soluzioni intelligenti per touchscreen »

UX design, e-commerce e flussi d’acquisto

Risorse e suggerimenti utili per realizzare un e-commerce, dalla scelta del prodotto alla conferma dell’ordine.

E-commerce

Nell’ultimo periodo ho lavorato in maniera approfondita su e-commerce e flussi d’acquisto, studiando i vari aspetti da considerare durante la progettazione di un sito destinato alla vendita online.

Come potrete immaginare è un mondo immenso, ma con regole ben definite e pratiche consolidate che possono essere d’aiuto durante tutte le fasi di sviluppo. Questo non significa che per avere l’e-commerce perfetto sia sufficiente seguire passo dopo passo una serie di istruzioni: non esistono ricette segrete universali e l’esperienza di acquisto cambia notevolmente a seconda del prodotto, ma durante il mio lavoro ho trovato diverse risorse utili che mi sembra giusto condividere.

Continua a leggere UX design, e-commerce e flussi d’acquisto »

Gates of Horizon MMORPG

La storia di un nuovo gioco multiplayer online e del lancio su Kickstarter.

Gates of Horizon

Gli aggiornamenti di questo blog non sono mai stati frequenti, ma negli ultimi due anni ammetto di avere scritto ben pochi articoli. Il motivo non è il classico blocco dello scrittore o la fine della mia passione per il blogging.

E allora cosa è successo?

La risposta è semplice. Ho dedicato tutto il mio tempo libero alla realizzazione di un sogno insieme ad altri quattro compagni di avventura: la creazione di un videogioco chiamato Gates of Horizon.

Continua a leggere Gates of Horizon MMORPG »

Groupon e i gruppi d’acquisto: pregi e difetti

Un’analisi dei principali fattori comuni ai siti di acquisti social: a cosa è dovuto il successo di Groupon?

Groupon è stato sicuramente uno dei maggiori fenomeni web degli ultimi anni: in Italia è cresciuto, si è affermato, ed è stato capace di convincere molte persone a compiere il primo acquisto online.

Ma a cosa è dovuto il suo successo?

Continua a leggere Groupon e i gruppi d’acquisto: pregi e difetti »

La paginazione è destinata a scomparire?

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!

Touchscreen e accessibilità

Siti accessibili ai touchscreen ed alcune implicazioni della loro diffusione.

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]

Flickr redesign: la nuova pagina foto

La nuova pagina foto di Flickr è un miglioramento per gli utenti?

Gli utenti abituali di Flickr se ne saranno già accorti: da qualche giorno è stata resa pubblica la nuova versione della pagina foto.

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.

Aggiornare l’interfaccia di un sito web

Rinnovare l’interfaccia di un sito spesso è un trauma per gli utenti abituali: meglio procedere per gradi?

Aggiornare l’interfaccia di un sito web spesso ha ripercussioni importanti sugli utenti abituali. Dopo un breve periodo di apprendimento è facile imparare la posizione degli elementi nelle pagine, per questo motivo qualsiasi cambiamento può essere problematico.

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.

WordPress 2.7: presentata l’interfaccia

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

Guida per una navigazione usabile

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.