“Ma la musica è d’effetto, ci vuole per il mio sito supercool!” o “Il mio sito è quello di una discoteca, ci vuole il giusto background emotivo!” o ancora “Il mio sito di filosofia zen ha bisogno del giusto mood di accompagnamento!“. Risposta: NO.

Perchè?

1. Se l’utente vuole ascoltare della musica, avrà già la sua di sottofondo, e sentire una musica che si sovrappone con sgradevole cacofonia alla propria è irritante. Ancor peggio se si trova in un ufficio o luogo di lavoro e gli parte la musica: chiuderà instantaneamente il sito!
2. L’utente potrebbe avere gli altoparlanti disabilitati (vedi: uffici, luoghi pubblici, biblioteche o per volontà propria perchè desidera silenzio): prettamente inutile e rallenta il caricamento della pagina.
3. L’utente è un nerd che visita più pagine contemporaneamente, o ancora sta scegliendo una discoteca/locale/ristorante: indovinate qual è il sito che verrà chiuso perchè si sovrappone alla sua musica se non quella degli altri siti? e indovinate su quale si soffermerà? bravi. non il vostro.
4. Infine, se il sito è un sito di multimedia, video, o di un cantante/musicista, diamo comunque la scelta all’utente di scegliere quando sentire la musica, se vuole. Non è detto che stia visitando il sito perchè vuole ascoltare la musica del cantante che già ben conosce, ma perchè vuole vedere le date dei suoi prossimi concerti!
5. Infine ma non ultimo: bisogna pagare i diritti alla SIAE per tutto il periodo in cui rimarrà online se non si è titolari dei diritti sulla canzone pubblicata!

Questo libro è alla sua terza versione, io avevo la seconda, ma questa è completamente riscritta ed aggiornata alle novità degli ultimi anni della rete, dai social network, a tipi di sito che non erano neanche lontanamente pensabili nel 2004, anno della redazione della versione 2.

Gioisco e salto sulla sedia quando leggo parole che vorrei poter esprimere io stessa quando spiego certi concetti, ma Sofia lo sa far bene e meglio di me. I concetti che mi affollano la mente sono tanti, e nel libro sono tutti spiegati ed argomentati. Sentitevi liberi di criticarli, ma vedrete, ad un semplice test di usabilità, quanto sono veri!

Condivido particolarmente il pensiero a pagina 48 sui grafici che si vantano di voler essere creativi e abbattere la barriere con idee non convenzionali, salvo poi avere un sito bellissimo ma perfettamente inusabile. Non avrebbe potuto spiegare meglio i perchè e i come, ed invito tutti i grafici a leggerlo. Se volete ve lo presto io!

Detto questo: buona lettura!

• Un capitolo di “Siti che funzionano 3.0″, in questi giorni in libreria
• Chi è Sofia Postai
• Acquista presso l’editore – IBS o Amazon cliccando qui sopra

Guardate bene questa immagine: vi è mai capitato che selezionando del testo vi comparisse quell’iconcina con il punto di domanda?

clicca per ingrandire

Ecco, ora provate a farlo: cliccate, ed ecco che vi si apre in una nuova finestra uno strumento utilissimo: il dizionario.

clicca per ingrandire

Posso ipotizzare un suggerimento per renderlo più accessibile? Ok, c’è un title che dice: “esplora il significato della parola“, ma non sarebbe forse più utile ancora apporre all’immaginetta un testo che dica “dizionario” o qualcosa del genere? Ditemi, sono davvero io che sono così tarda?

Diamo un suggerimento valido a quelli del Corriere.it, commentate e fateci sapere, sottoporremo loro il nostro punto di vista di modo che possano usufruirne in molti di questa funzione. Scommetto che i test di usabilità non li hanno fatti neanche in fase di produzione, a questo punto…

“Le prossime generazioni di designer potrebbero non rendersi conto dei danni causati da chi li ha preceduti. E via via che certi problemi diventano sempre più rari, cresce il rischio che le nuove leve debbano reimparare sulla nostra pelle il costo di antichi errori.”

A quattro anni di distanza internet non funziona poi così male. Se avete navigato negli anni 90 o nei primi anni 2000, potreste ancora serbare il ricordo delle cattive esperienze di navigazione tipiche dell’epoca. Tanti di noi poi hanno commesso almeno qualcuno degli errori qui riportati (io almeno 4 su 5), ma poi si sono redenti.

D’altra parte molte persone che si avvicinano oggi al web design non sono rimaste impigliate nella fitta rete del web fine anni 90, quindi perché non spiegare quali scelte sono davvero sbagliate ed i motivi che le rendono tali?
Senza contare che a volte il cliente chiede proprio cose di questo tipo, e sta a noi far capire perché è meglio evitare.

Pagine d’introduzione animata (ma anche no)*

La pagina d’introduzione animata è stata una delle cose più dure da estirpare. Ancora oggi se ne fanno. Si trattava, il più delle volte, di animazioni in flash in cui il logo dell’azienda di turno veniva animato. Quali sono gli svantaggi della pagina d’introduzione?

1. Un costo aggiuntivo inutile per il cliente, tempo sprecato per il designer: dopotutto l’animazione di per sé non porta nessuna informazione all’utente finale su come raggiungere l’azienda, indirizzo, numero di telefono, attività, e via dicendo.
2. La “pagina d’introduzione” esiste già: si chiama Home Page e non è solo la prima pagina del sito, da cui l’utente poi può raggiungere le diverse sezioni, ma è soprattutto la pagina in cui si presenta il sito con le sue funzionalità.
   Se ad esempio devo andare alla pizzeria “I 4 baffi”, dove non sono mai stato prima, mi aspetto di trovare l’indirizzo sulla loro Home Page o, almeno, un link ad una pagina dove chiaramente è contenuto l’indirizzo. Voglio insomma informazioni utili, e non delle animazioni.
3. Problemi tecnologici: non tutti i navigatori sono muniti di flash, non tutti i computer reggono una introduzione, non tutti sono capaci di far scorrere la rotellina per visualizzare il stato “salta l’introduzione” che si trova sotto il blocco che conterrà l’animazione.
4. Il cliente vi potrà dire che vuole l’introduzione per non fare attendere all’utente i tempi di attesa di caricamento della pagina: spiegategli che il sito non è un programma che deve caricarsi e la velocità di caricamento è istantanea, sicuramente più veloce di una noiosa ed inutile animazione*

Musica di sottofondo

La musica di sottofondo era, tanti anni fa, un file midi che partiva in automatico con il sito, e ripartiva ogni volta che si cambiava pagina. A volte era un file .wav e in epoca più moderna un file .mp3.
Fortunatamente è sempre più raro sentire musiche partire in automatico mentre si naviga. Vediamo perché:

1. Si tratta di un costo inutile: qualcuno dovrà pur realizzare la musichetta che si andrà ad utilizzare, e dubito che voglia farlo gratis. Dunque è una spesa in più per il cliente.
2. Gli utenti navigano da uffici e luoghi pubblici e spesso i dispositivi sono dotati di casse. Ovviamente se partono dei suoni non richiesti possono dare fastidio, senza contare che si attira l’attenzione su di sé, qualcosa che chiunque vorrebbe evitare, specie in ufficio.
3. Un suono improvviso può spaventare e spaventare i visitatori del sito non è una buona idea.
4. Se l’utente sta navigando più siti contemporaneamente non saprà immediatamente da quale sito arriva il suono. E quando lo saprà non si farà scrupoli a chiudere la scheda.
5. La musica di sottofondo del sito si può confondere con la musica che l’utente sta ascoltando, magari tenendo aperto youtube o winamp. Ricordate che il suo piacere ha la priorità su tutto il resto, e chiuso il sito considerato fastidioso se ne trovano mille altri concorrenti.
6. Si naviga anche di notte, magari con il volume alto. Pensate che brutto svegliare i coinquilini, il gesto istintivo è quello di chiudere.

Animazioni continue o lampeggianti all’interno del sito

Dieci anni fa circa non era insolito trovarsi in situazioni irritanti. Alcuni siti infatti presentavano gif animate, fatte di animazioni continue ed elementi lampeggianti. I motivi per non usare questi elementi sono pochi, ma decisamente solidi:

1. Sono causa di convulsioni nei soggetti che soffrono di epilessia fotosensibile, ed è pertanto un punto importante nell’adeguamento ai leggi sull’usabilità*
2. L’utente viene distratto. La maggior parte dei contenuti sul web è testo, e l’utente deve fare uno sforzo per leggere. Avere un tipo che gli balla a destra e un blocco di testo che lampeggia a sinistra non è il massimo per restare concentrati, infatti le persone lo trovano fastidioso, oltre che a concepirlo come un “pericolo”.*
3. Gli elementi che lampeggiano sembrano banner, e gli utenti tendono ad evitarli: quindi se volevate far lampeggiare, ad esempio, il link per acquistare forse dovreste rifletterci sopra.

Navigazione insolita

Qual è la caratteristica principale di tutti gli utenti web? L’impazienza. Sia usando i CSS o Flash si possono creare dei sistemi di navigazione alquanto insoliti. Ma in generale, quando si può, è meglio cercare di seguire la massa e fare i siti così come li hanno realizzati tutti gli altri. Perché?

1. Gli utenti potrebbero non voler capire come funziona l’innovativo sistema di navigazione che avete creato.
2. Gli utenti potrebbero non possedere capacità cognitive adeguate a capirne il funzionamento (vedi leggi sull’usabilità)*

Bisogna dunque cercare di capire quali sono i sistemi di navigazione più usati e come implementarli nel proprio sito.
Qualcuno potrà protestare dicendo che fare dei siti che funzionano tutti allo stesso modo rende i siti web banali e tutti uguali. Ma riuscire a rendere esteticamente originale, e funzionale, qualcosa di comune è molto più impegnativo e difficile di quanto sembri.

Nascondere le informazioni

All’epoca non era raro vedere negli e-commerce i prezzi nascosti. Per visualizzarli bisognava registrarsi. In teoria bisognava proteggere quella preziosa informazione, il prezzo, dalla concorrenza. In realtà la preziosa informazione non era affatto protetta, visto che bastava un indirizzo e-mail.
A dirla tutta ciò che si proteggeva era proprio la concorrenza, visto che si allontanavano i clienti dal sito che, volendo sapere il prezzo, andavano a cercarne un altro.
Non sempre si possono mostrare i prezzi, se si tratta di servizi ad esempio, ma la morale della storia è che non bisogna nascondere le informazioni agli utenti.
Se un utente arriva sul vostro sito si aspetta di trovare tutte le informazioni su prodotti e servizi disponibili immediatamente. Non vuole perdere tempo a compilare moduli e, soprattutto, non è propenso a lasciare i propri dati personali se non alla fine.
Salvo casi alquanto particolari non ci sono buone ragioni per nascondere delle informazioni esistenti dietro la richiesta di registrazione.

Conclusione

In definitiva queste sono state le cose che più mi hanno angosciato nelle navigazioni passate.

Se state iniziando a creare siti web oggi tenetele bene a mente. Se il cliente ve le chiede usate pure le osservazioni di questo articolo per farlo desistere. Non abbiate paura, perché è proprio il vostro dovere fare in modo che il cliente abbia un sito web usabile e fargli capire vantaggi e svantaggi di determinate scelte.

E ricordate questo: per un visitatore i siti web sono tutti uguali e nessuno è essenziale. E se non troverà ciò che sta cercando andrà da qualche altra parte.

Link utili: Line-Height (ITA), useit (ENG).

*NB le parti in corsivo sono state aggiunte da Lauryn

Chi può diventare Ux Designer?

Sono molti gli specialisti di diversi campi che possono dedicarsi all’User Experience.
Un webdesigner potrà diventare un UX Designer, perché ha già chiare le meccaniche di un sito web e quindi sa come muoversi.
Un seo può diventare un UX Designer perché anche il suo lavoro richiede un’attenta progettazione, dovrà pensare anche agli utenti e non solo ai motori di ricerca.
Anche un programmatore ma più in generale le figure professionali a stretto contatto col sito e le sue problematiche sono candidati ideali a diventare progettisti dell’esperienza, perché sanno cosa significa usare un sito e quanto è importante che sia facile da usare.

Perché diventare Ux Designer?

L’User Experience è una disciplina decisamente importante quando si sviluppa un sito web, permette infatti di capire i problemi degli utenti, i bisogni delle aziende, i requisiti che quel dato sito dovrà avere.
In sostanza, permette di creare un sito più usabile.
Siti web più usabili vogliono dire più facilità d’uso nella navigazione, nella ricerca di informazioni, e quindi, più registrazioni, acquisti.
Oltretutto la maggior parte dei siti sono progettati senza pensare agli utenti, e avere quindi un sito usabile è un chiaro vantaggio rispetto alla concorrenza.

Risorse

Come già detto l’user experience è una disciplina molto vasta, ci sono diversi approcci alla materia, chi è specializzato in Architettura dell’Informazione sarà più portato a ragionare su come organizzare e gestire i contenuti, mentre gli Interaction Designer si focalizzeranno più sulle interazioni tra il sito e l’utente.
Ho cercato di fare una summa di tutte le migliori risorse che sono riuscito a trovare, ben conscio che sicuramente ho dimenticato qualcosa.

Libri

Ci sono innumerevoli libri, in italiano e in inglese, tra cui ricordiamo:

• Don’t make me think: questo è senza spiegazione, andrebbe letto comunque.
• A project guide to Ux Design: un buon libro di base, per chi mastica l’inglese.
• Architettura dell’informazione per il world wide web: architettura dell’informazione in italiano.
• Information architecture Blueprints for the web: architettura dell’informazione, in inglese.
• The paradox of choice, why less is more; attenzione che questo libro è senza ritorno. Comprare o scegliere qualcosa non sarà più la stessa cosa dopo averlo letto.

Siti web

Questi sono da mettere tra i feed assolutamente:

• UxBooth
• Findability.org
• The Web Usability Blog
• Uxmatters
• UsableWorld
• Trovabile
• UxMagazine, versione italiana e versione inglese
• UserPathways
• Uselog

Corsi ed eventi

Per chi volesse fare magari un corso o partecipare ad un evento dedicato al mondo dell’ux segnalo:

• Corso di architettura dell’informazione, Luca Rosati, all’università di Perugia.
• IA Summit, evento annuale dedicato all’architettura dell’informazione.
• UxLondon, altro evento annuale al di fuori dell’Italia.
• UxConference

Una volta pubblicato un sito ecco cosa dobbiamo fare:

• Installare un software per le statistiche.
• Installare un software per heatmap.
• Lanciare dei sondaggi per il sito.
• Raccogliere feedback.
• Fare dei test utenti.

A che serve fare queste cose? A una cosa molto semplice: migliorare l’esperienza d’uso del sito, cioè la sua usabilità.

Vediamole in dettaglio.

Statistiche & Mappe di calore

Questi due strumenti sono sicuramente i più facili da impostare, bastano pochi codici javascript nel sito e abbiamo finito.

Raccogliere le statistiche, oltre ovviamente a vedere quante persone entrano nel sito, e quindi utile a fini SEO, ci aiuta perché ad esempio possiamo scoprire quali sono le pagine più cercate del sito, con quali termini sono cercate, e quindi migliorare le parole, i vocabolari controllati, le etichette. Oltretutto, se sappiamo quali sono le pagine più cercate del sito, possiamo pensare ad evidenziare in maniera maggiore queste pagine, magari linkandole direttamente dalla home (se sono pagine interne), oppure espandere la loro sezione o pagina.

Le heatmap, o mappe di calore, creabili con software tipo Crazyegg (a pagamento ma il mio preferito) oppure con script tipo Clickheat (che non sono mai riuscito a far funzionare) hanno un vantaggio non così diretto, ma di ampio respiro.
Queste mappe di calore ci permettono di scoprire dove l’utente posiziona il mouse, e di conseguenza, l’occhio. Questo ci serve davvero tanto quando vogliamo scoprire come migliorare visivamente degli elementi, su come spostarli, renderli più evidenti, come ad esempio un pulsante per vendere prodotti.

Test utenti

I test utenti: sarebbe da dedicarci non un paragrafo ma un libro intero (Steve Krug lo ha fatto!).
Abbiamo un sito online, completo e funzionante, quando testarlo se non ora?
Il più comune dei test a questo punto è prendere delle persone e dare loro degli obiettivi per quel sito, e vedere come e se riescono ad assolvere quei compiti.
Attenzione, un piccolo disclaimer: facendo questi test adesso potreste essere tentati di cambiare tutto nel sito, ma così facendo rischiate di creare solo confusione. Avete presente facebook ogni volta che aggiorna la grafica? Ecco.
La scimmia sapiens si adatta anche alle cose fatte male (ma questa non è una scusa per fare siti da cani, sia ben chiaro), e ogni cambiamento provoca traumi. Meglio concordare col cliente una strategia di redesign del sito e procedere a piccoli passi, per non sconvolgere gli utenti.

Sondaggi e feedback

Una volta che il vostro sito è online potete direttamente chiedere ai vostri utenti che cosa ne pensano. Sondaggi e feedback esistono apposta per questo, anche se sono leggermente diversi tra di loro. Infatti i sondaggi danno un numero limitato di risposte preimpostate, con conseguente riduzione dei benefici ricavabili, mentre i feedback avendo la risposta libera sono più proficui. Il problema dei feedback è che richiedono più tempo per scriverli, quindi gli utenti che ne inviano sono minori di quelli che rispondono a un sondaggio.

Una volta completata la raccolta dei dati nella fase di ricerca, possiamo passare alla strategia.
Adesso dobbiamo decidere la direzione da prendere per procedere in maniera coerente attraverso la progettazione. In parole povere, dobbiamo definire gli obiettivi del sito e la direzione da prendere affinché questi si realizzino.

Questo momento non va preso alla leggera, dobbiamo riuscire infatti a bilanciare i bisogni degli utenti e dell’azienda, cosa che non è mai facile. Un obiettivo deve cercare di accontentare i bisogni di tutti, o quantomeno la maggioranza delle persone che visiteranno quel sito.
La definizione di questi obiettivi si basa in gran parte su quello che vuole il cliente dal sito (se lo sa), cercando di bilanciare questo con i bisogni degli utenti. Non è accettazione acritica da parte vostra degli obiettivi del cliente. Ma d’altra parte non è neanche accettazione acritica da parte del cliente dei vostri obiettivi: dovete trovare un punto di incontro, un compromesso che bilanci bisogni e usabilità. Altrimenti state per creare un sito inutile.

Quando creo un documento per gli obiettivi mi piace distinguere tra obiettivi principali (primari), e obiettivi secondari, così da definire diverse priorità al progetto. Questo mi è utile soprattutto in siti complessi, che devono assolvere a molte funzioni e non si può fare tutto subito. Molto agile.

Presentare la strategia

Abbiamo la nostra bella strategia pronta ad essere messa in pratica, abbiamo faticato tanto per creare un qualcosa che bilanciasse utenti e business: come la facciamo capire al cliente?
Possiamo farglielo capire creando ad esempio dei diagrammi che mostrano come gli utenti navigheranno in determinati scenari, e quindi come sviluppare una data funzione.
Possiamo creare delle bozze da mostrargli, non un vero e proprio wireframe, solo una bozza a grandi linee.
Possiamo creare una presentazione powerpoint e mostrargli come lo sviluppo in quella data maniera gli porterà benefici. Gli scenari sono molteplici.

Presentare la strategia è altrettanto importante che elaborarla. Infatti alla fine tutto ricade nelle mani dei nostri clienti, ed è quindi nostro dovere fargli capire al meglio possibile quello che vogliamo sviluppare e come questo può soddisfare suoi obiettivi.

Questo articolo, suggerito ieri da Sofia Postai su Facebook, mi è piaciuto molto.

Buona lettura!

Conclusione: entro i primi 1.000 pixel scrollano che è una bellezza, l’attenzione cala se non si pongono dei punti fermi visivi. Il 20% circa arriva alla fine e vi si sofferma, per cui l’attenzione anche ai footer è importante.

Sopra e sotto la “piega”: lunghezza della pagina, scrolling e attenzione degli utenti

[di Maurizio Boscarol]

• La parola o le parole che ho scelto sono chiare per tutti (o quantomeno per la maggior parte dei miei utenti)?
• Se non, perché? Sono previste delle spiegazioni per queste etichette?
• Le etichette sono coerenti in tutto il sito oppure diverse parole usano diversi sistemi di etichettatura? Perché non sono standardizzati?

Forme di etichette

Esistono diverse forme di etichette, che possiamo in maniera generica racchiudere in 4 principali:

• Titoli
• Link
• Icone
• Menu

Non sono gli unici tipi di etichetta che esistono, ma prendiamo in considerazione solo questi per il momento, senza bisogno di complicarci ulteriormente la vita.

Etichette come titoli

Le etichette usate come titoli sono tutte quelle etichette che rappresentano intestazioni e blocchi di testo (h1, h2, ecc). Hanno una chiara gerarchia, facilmente distinguibile per via delle dimensione delle etichette (più grandi significa più importanti), dai colori e dai caratteri usati. Gli utenti si basano su queste etichette per leggere il contenuto della pagina.

Etichette come link

Le etichette usate come link nei contenuti, etichette che sono diverse da quelle usate come menù, sono tutti quei link che sono presenti nel contenuto di una pagina. Questi link, per essere ben compresi devono basarsi sul contesto della pagina ed essere esplicativi. Se ad esempio su un sito di una webagency mi trovo scritto: “web design”, dove potrà condurmi questo link? Nella pagina dei servizi? A Wikipedia? Per risolvere in parte questo problema basta passare sopra al link col mouse, ma questa non può essere una scusante per creare dei link che siano oscuri o ambigui (come i tristemente famosi “clicca qui”).

Etichette come menu

Con le nostre etichette possiamo sfruttare uno strumento molto potente: le convenzioni. Homepage sappiamo tutti cosa voglia dire, ci porta alla pagina principale, di meno Main, che assolve alle stesse funzioni.
Non c’è alcun bisogno di creare etichette fantastiche che però non abbiano nessun nesso con la realtà (ovvero che non hanno alcun senso per i nostri visitatori). Per aumentare la comprensione di queste etichette possiamo inserire una descrizione della pagina sotto o affianco l’etichetta. Questo sistema sta andando di moda in questi ultimi anni, e per fortuna è una buona pratica.
Ovviamente, spero di non doverlo più ripetere, queste etichette, o almeno quelle principali, dovrebbero essere sempre nella stessa parte di pagina in tutto il sito, in modo da non creare ulteriore confusione.

Etichette come icone

Non dovete quasi mai usare queste etichette.
Ok, ora che vi ho spaventati a dovere, diamo un po’ di spiegazioni.
Queste icone grafiche vanno usate solo nel caso che la convenzione dell’etichetta sia palesemente nota, ad esempio, la casetta significa homepage e la @ contatti. Ma le altre? Queste etichette generano una grande frustrazione nell’utente che va poi ad utilizzarle.
Una scappatoia per il loro utilizzo è quella di affiancare a queste icone una breve descrizione della pagina che linkeranno, in modo da aumentare la comprensione dell’immagine.