Skip to content


L’altra faccia della medaglia

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.


lghinelli:
Questo post è il frutto di molte iterazioni tra me e Claudio.
Io avevo cominciato a sviluppare l’idea e ne ho parlato con lui per avere un feedback.
Il risvolto inaspettato è che l’idea lo ha interessato molto ed ho quindi potuto accedere al suo specifico corpus di conoscenze imparando molte cose e rendendo l’estensione di gran lunga migliore rispetto a quanto avrei mai immaginato.

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>è

Posted in buone idee, development.

Tagged with , , .


2 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Whitney Hess says

    Thanks so much for linking to my blog post! Keep reading.

Continuing the Discussion

  1. Tweets that mention L’altra faccia della medaglia – monkey#6 -- Topsy.com linked to this post on October 9, 2009

    [...] This post was mentioned on Twitter by lghinelli. lghinelli said: post sul blog: un contributo di @vandicla sull'UX applicata ai grassetti: http://bit.ly/pswKC [...]



Some HTML is OK

or, reply to this post via trackback.