In occidente ogni giorno
decine di lemuri
vengono maltrattati senza ragione
questo post è dedicato alla difesa
di questi sciacalli.

Si, c’è un errore. Un problema banale di coerenza nel testo: un’anafora che non funziona come dovrebbe. Talmente banale che non vi sorprenderà sapere che non vincerete un premio per averlo scoperto. Quello che dovrebbe sorprendervi è invece la facilità e la precisione con la quale appena letta la parola “sciacalli” siete tornati a leggere la parola “lemuri”. Se tutto è andato come dovrebbe, non avete riletto il testo per ricercare la parola sbagliata, ma siete direttamente saltati alla sua posizione.

Nella frase che segue invece tutto è coerente dal punto di vista semantico:

In occidente ogni giorno
decine di lemuri italiani
vengono maltrattati senza ragione.
La stessa sorte spetta agli
sciacalli francesi.
Un’altra categoria a rischio sono i falchi turchi.

Nessun problema semantico in questo caso, eppure anche qui c’è qualcosa che non va. Questa volta si tratta di coerenza grafica: nelle prime due frasi i nomi di animali (lemuri e sciacalli) sono in grassetto e la loro provenienza (italiani, francesi) è in corsivo. Nella terza questo codice è ribaltato.

Dietro a questi due esempi sta buona parte della progettazione dell’estensione che avete incontrato in un post precedente: «Una faccia della medaglia» e che serve a tenere insieme in una pagina web i grassetti che servono ad aiutare la lettura (scelti dal redattore) e i grassetti che servono ad ancorare il lettore alle parole chiave di un testo (scelti dal SEM) distinguendoli da un punto di vista grafico e temporale. I grassetti di lettura servono a comprendere meglio il testo, i grassetti SEM servono invece a individuare le parole chiave del testo durante una prima lettura rapida, per capire se il contenuto ci interessa o no.
C’è una descrizione più precisa nel post originale a cui vi rimando.

Quello che faremo è invece condividere alcune delle riflessioni sulla User Experience che hanno animato la fase di design dell’estensione e che potrebbero servire a dare qualche indicazione sul design di applicazioni web più in generale. Cosa c’entrino lemuri, sciacalli e falchi lo capirete a breve.

Se avete letto il post precedente capirete di cosa parliamo. Se non l’avete fatto siete ancora in tempo per farlo.

Fatto? Bene.

La versione che vedete ora (anche in questo post) è solo l’ultima di una serie di prove, in gergo iterazioni che abbiamo testato per decidere quale fosse la maniera migliore di distinguere graficamente (come) e temporalmente (quanto) ha richiesto lo scambio di un buon numero di mail.
Se vi capitasse di sviluppare qualcosa di simile sappiate che un modo sbagliato di ragionare è quello di considerare ogni elemento separatamente:

1. Decidiamo quale sia lo stile migliore da attribuire al grassetto SEM « acceso » per renderlo rapidamente reperibile a una prima lettura;
2. Poi quale sia lo stile migliore da attribuire al grassetto SEM « spento » per renderlo leggibile a una seconda lettura;
3. Infine decidere dopo quanto tempo il grassetto SEM deve spegnersi;

É quello che abbiamo fatto in un primo momento, rendendoci poi conto che le nostre soluzioni non potevano funzionare. Ripercorriamo le fasi del design.

Fase 1: grassetti evidenziati, e testo normale

In un primo momento i grassetti SEM accesi erano evidenziati in rosso: così e quando si disattivavano apparivano come testo normale: cosi.
Soluzione che soddisfaceva pienamente il nostro desiderio di fornire il miglior layout alle due fasi della lettura:
massima leggibilità nella prima, minima distrazione nella seconda.

Il problema è però che per quanto riguarda l’Esperienza dell’Utente queste due fasi di lettura non sono affatto indipendenti: l’utente coglie informazioni di un certo tipo nella prima lettura che poi utilizzerà nella seconda, ma non vive una pausa tra le due. Inoltre, come i due esempi di lemuri sciacalli e falchi ci hanno dimostrato, quando leggiamo un testo non ci interessiamo solo al suo contenuto semantico, ma ci serviamo anche della sua posizione e del suo aspetto di superficie: usiamo degli indici spaziali e grafici per identificare un contenuto con l’aspetto che questo ha all’interno della pagina, in modo da poterlo ritrovare quando diventerà per noi interessante. Il primo esempio ci ha dimostrato quanto possa essere preciso questo meccanismo, e spiega ad esempio perchè fatichiamo cosi tanto a leggere dei pdf a monitor: ogni volta che facciamo uno scroll perdiamo quegli indici spaziali la cui stabilità costituisce la struttura di superficie del testo che è fondamentale alla sua comprensione.

Da questo punto di vista la nostra soluzione poneva due problemi:

1. Il primo problema riguarda l’evidenziazione dei grassetti SEM, che catturavano troppo la nostra attenzione: Lo sfondo rendeva molto “grafici” i grassetti e portava a dare poca attenzione al testo. Proprio perchè diamo molta importanza alla struttura di superficie del testo in questo caso gli occhi rimbalzavano sui blocchi rossi senza fermarsi sul loro contenuto. Per capire quale sia la struttura di superficie del vostro testo e quali elementi attirino maggiormente l’attenzione potete testare la vostra interfaccia con delle tecniche di eye tracking.
   Un modo low cost per averne comunque un’idea approssimativa è quello di sfocare (con Photoshop) un’immagine della vostra pagina e vedere quali sono le strutture che restano salienti. Molto probabilmente l’occhio seguirà queste strutture.
2. Il secondo problema che avevamo riguardava il passaggio dal grassetto evidenziato al testo normale. Anche in questo caso il problema era dato dal fatto che la struttura con cui l’utente diventava familiare durante la prima lettura scompariva nella seconda. E questo perchè avevamo considerato la prima e la seconda lettura come due eventi indipendenti, mentre in realtà sono strettamente collegati: giustamente l’evidenziazione creava una struttura visiva di superficie (delle etichette rosse) che doveva servire a scorrere il testo a una prima lettura. Ma avevamo dimenticato che aiutare la prima lettura significa fornire le basi per la seconda!
   Nel nostro caso la differenza grafica tra grassetti SEM attivi e non attivi era troppo grande, e l’utente non aveva alcun modo di servirsi nella seconda lettura di quegli indici grafici che aveva incontrato nella prima.

La prima soluzione è stata quella di sostituire le evidenziazioni con dei dei grassetti normali. Non abbiamo scelto di adottare un’evidenziazione meno forte perchè l’evidenziazione rappresenta un problema in sè: crea degli spigoli. E siccome i nostri occhi sono attirati dalle strutture salienti e discontinue come gli spigoli, c’erano molte meno probabilità che gli occhi cadessero anche sulle parole che si trovano prima o dopo il grassetto. E questo era un male perchè il grassetto dovrebbe si attirare lo sguardo sulla parola importante, ma all’interno di una frase che dovrebbe comunque essere percepita per intero, anche se rapidamente.

Come seconda soluzione cosa abbiamo deciso di trasformare i grassetti disattivi in grassetti più “magri”, graficamente vicini al testo normale, ma ancora distinguibili. Questo per evitare il problema di coerenza visto nel secondo esempio di lemuri, sciacalli e falchi: leggo dei grassetti molto marcati, imparo a distinguerli semanticamente dal testo normale finchè ad un tratto la distinzione scompare e le caratteristiche grafiche che avevo imparato a distinguere si fondono con il testo normale. Rendendoli meno intensi, ma ancora distinguibili dal testo standard, introduciamo non una forte variazione grafica, ma una modulazione che permette all’utente di passare alla seconda lettura mantenendo però gli indici grafici e spaziali che aveva appreso nella prima.

Fase 2: Gestione del tempo
In una seconda fase ci siamo invece occupati del tempo. Per quanto tempo i grassetti SEM devono restare attivi ? In un primo momento avevamo deciso di far sparire l’evidenziazione dopo un numero di secondi pari a quello delle parole evidenziate presenti nella pagina. Ad esempio: 20 parole, 20 secondi. Un ottimo criterio quantitativo, ma che si basa su un’interpretazione sbagliata delle azioni e delle intenzioni dell’utente. Questo criterio funziona solo se l’utente durante la prima lettura arriva direttamente in fondo alla pagina subito dopo averla aperta. Ci eravamo dimenticati una possibilità: quella che la pagina fosse aperta, ma letta solo dopo un certo tempo. Una possibilità resa molto probabile dall’uso dei TAB.

Quante volte vi capita di aprire un nuovo tab e poi leggere la pagina molto tempo più tardi?. Nel tempo che passa tra l’apertura del tab e l’effettiva lettura della pagina le nostre evidenziazioni sarebbero sparite, e ci saremmo ritrovati con un gran numero di utenti che non le avrebbe mai viste.
La soluzione adottata in questo caso è stata quella di far cominciare il conto alla rovescia solo dopo un periodo di attività del mouse sulla pagine, il che ci garantisce che l’utente stia scorrendo la pagina quando inizia il conteggio.

Queste modifiche ci lasciano con l’estensione WordPress che verrà ufficialmente rilasciata nei prossimi giorni (siamo ancora in trattativa per l’esclusiva con Wired). Ci lasciano anche qualche saggio insegnamento sul webdesign: volete costruire una buona User Experience? Prendetevi cura della coerenza e della continuità:

1. Gestite in maniera coerente gli indici grafici e spaziali che servono all’utente per orientarsi nella semantica del testo. Fate attenzione alla struttura di superficie della vostra pagina.
2. Prendete in considerazione che l’utente vive anche al di fuori della vostra pagina. Chiedetevi sempre da dove venga, cosa voglia fare quando agisce in un certo modo, dove vorrebbe andare poi;
3. Rendeveti conto che non esiste una sola categoria di utenti, ma che il nostro design deve cercare di soddisfarne il più possibile. Non ci sono solo diverse versioni di browser, ma diverse pratiche d’uso del browser: ad esempio c’è chi legge tutto subito e chi apre tab che leggerà solo in seguito. Pensateci, se progettate un’applicazione che evolve nel tempo.

Alcuni di voi si staranno ancora chiedendo il senso degli esempi su lemuri, sciacalli e falchi in apertura di post. Ci sono tre risposte:

la prima è che se avessimo voluto inserirli solo per spiegare l’importanza di indici non semantici e della coerenza superficiale saremmo stati costretti a introdurli con « ora leggete questa frase ». Voi avreste capito che c’era qualcosa sotto e l’esempio non avrebbe funzionato cosi bene (mica bello farsi fregare cosi in un post in cui si scrive di User Experience).

La seconda ragione è che certe volte la curiosità di capire dove il post andrà a parare può motivare la lettura più di un buon riassunto.

La terza è che è molto divertente iniziare un post scrivendo di lemuri, sciacalli e falchi.

Claudio è stato completo e chiaro (ma del resto ne ero sicuro), spero che la lettura sia stata per voi interessante tanto quanto lo è stato per noi il processo che ci ha portato qua.
Mi limito solo a ringraziare di nuovo anche le altre persone che hanno collaborato all’idea:

dplastino che mi ha spiegato tutto quello che dovevo sapere sul dove e come posizionare correttamente i grassetti per entrambi i tipi di lettura.

Diego (formaldeide) Ricci che per primo ha notato che per gli spider <span class=”qualcosa”> non ha lo stesso peso di <strong>è

Ci siamo evoluti, quando leggiamo sul grande web applichiamo due stili di lettura molto diversi.
Il primo è valutativo, una scorsa veloce per decidere se i contenuti meritano la seconda lettura più approfondita.

I SEM dicono che i grassetti devono aiutare a catturare l’utente e quindi devono formare un “sommario” del testo che fermi il lettore sulla pagina, la mia analogica professoressa di italiano, a suo tempo, mi diceva che il grassetto deve fornire un appiglio visivo a quelle parti del testo che sono anche semanticamente rilevanti.
Le due cose anche se si assomigliano non sono affatto equivalenti, chi scrive di mestiere distingue immediatamente un testo ottimizzato per “fermare” il lettore da uno scritto per la lettura approfondita, il lettore passivo invece probabilmente non riesce a razionalizzare la differenza, ma la sente come un retrogusto.

Al momento siamo costretti ad una scelta, un testo deve essere ottimizzato in un modo o nell’altro, abbiamo solo un tag <strong> e dobbiamo conviverci.

Siccome entrambi i tipi di lettura sono utili al nostro scopo di divulgazione/marketing dover scegliere quale adottare oltre ad essere insulso (perchè rinunciamo ad una cosa in cambio di un’altra di pari valore) ci porta anche ad effettuare una scelta “artigianale” di quale tipo di lettura sia la più adatta per il nostro testo.
Definisco questa scelta artigianale perchè si basa su variabili non conoscibili tramite strumenti tecnici, ma solo sulla percezione che supponiamo il lettore avrà del testo, ponendo quindi l’effettiva efficacia dell’articolo al di  fuori del nostro controllo.

Le soluzioni sono due, continuare ad usare la sensibilità del nostro editor per decidere che stile usare oppure non accettare nessun compromesso e distinguere nettamente le due cose.
Un’aspetto per gli analogici grassetti del professore d’italiano ed un’altro per il digitalissimo sommario del SEM.

Il problema è che in questo modo molta parte del testo risulterà evidenziata, come può dirvi chiunque “tutto importante = niente importante” e questo non ci piace per niente.
Ci viene però in aiuto il fatto che i due tipi di lettura sono temporalmente non contemporanei, il grassetto SEM compie il grosso del suo scopo nei primi secondi, nel tempo di scorrere la pagina da cima a fondo per decidere se vale la pena leggere tutto, poi passa in secondo piano.
Questo ci suggerisce che il primo tipo di grassetto non è necessariamente permanente sul testo, ma che può scomparire dopo un tempo congruo alla valutazione del testo stesso.

Quindi con due intonacate di javascript e qualche pennellata di css potremmo ottenere un nuovo strumento che funzioni all’incirca così:

• evidenziazione di tutti i tag “SEM” della pagina
• calcolo della durata dell’evidenziazione (in sperimentazione 1 secondo per ogni tag)
• scomparsa dell’evidenziazione “SEM” dopo un periodo di inattività del mouse pari alla durata dell’evidenziazione

A riprova che il web non è più il “one man show” di qualche anno fa vi informo che anche questa semplice idea è estremamente interdisciplinare, infatti la mia idea iniziale non avrebbe raggiunto un livello soddisfacenze senza:

dplastino che mi ha spiegato tutto quello che dovevo sapere sul dove e come posizionare correttamente i grassetti per entrambi i tipi di lettura.

Claudio Vandi che ha rivisto l’intera idea in un’ottica di usabilità ed UX oltre ad aver fornito una tonnellata di altri spunti e nuove idee.

Diego (formaldeide) Ricci che per primo ha notato che per gli spider <span class=”qualcosa”> non ha lo stesso peso di <strong>

Se notate qualche “movimento” strano sulla pagina è perchè sto già sperimentando l’estensione cercando il giusto equilibrio tra i vari parametri da tenere in considerazione in vista della prima release.