Seleziona una pagina

Anno 2017, l’incredibile testo delle prove INVALSI. Quasi una fake news.

Quello che segue è l’incredibile testo che l’INVALSI ha inserito come esercizio di comprensione del testo nelle prove per l’esame di terza media del 2017 in tutte le scuole d’Italia. Un articolo tratto da questo testo del 2013. In pratica l’INVALSI diffonde un contenuto anti-digitale che già nel 2013 poteva essere quasi una fake news, diventato surreale oggi, ma che distribuito in un mondo, quello della scuola, perennemente in deficit di competenze digitali diventa un qualcosa di veramente sconvolgente. Buona lettura.

“Uno dei video virali più provocatori caricati su YouTube negli ultimi due anni mostra una bambina di un anno che gioca con un iPad, passando le dita sullo schermo e rimescolando le icone. Nelle scene successive la vediamo «pizzicare» e cercare di far scorrere anche le pagine di una rivista cartacea. Pensa che possano comportarsi come uno schermo. Il video sottolinea i suoi gesti inquadrandoli da vicino.

Secondo il padre della bambina, che ha intitolato il filmato «Una rivista è un iPad che non funziona», le immagini dimostrano la transizione che vive la generazione di sua figlia. Nella descrizione aggiunge: «Ormai le riviste sono inutili e incomprensibili per i nativi digitali», cioè le persone che hanno imparato a interagire con le tecnologie digitali fin dalla prima infanzia e che crescono in un mondo in cui libri e giornali convivono con smartphone, e-reader e iPad.

Il video fa emergere una domanda interessante: in che modo la tecnologia cambia la lettura?

La maggior parte degli studi pubblicati su questo tema ci dice che, come mezzo per la lettura, la carta continua a offrire vantaggi rispetto allo schermo. Esperimenti di laboratorio, sondaggi e rapporti sulle abitudini dei consumatori indicano che gli apparecchi digitali impediscono una navigazione efficiente dei testi lunghi, il che incide negativamente sulle capacità di comprensione. Gli schermi rendono anche più difficile ricordare che cosa abbiamo letto una volta arrivati alla fine. Inoltre gli e-reader non sono in grado di riproporre le sensazioni tattili tipiche della lettura su carta, di cui alcuni sentono la mancanza.

«La lettura ha una sua dimensione fisica», dice Maryanne Wolf, professoressa della Tufts University nota per la sua attività di ricerca nel campo delle scienze cognitive. «Può essere un aspetto più importante di quanto ci piaccia ammettere, mentre barcolliamo, forse senza le dovute riflessioni, verso l’era della lettura digitale. L’ideale sarebbe conservare il meglio delle vecchie forme di lettura, ma sapere quando è il caso di usare quelle nuove».

Per capire le differenze tra lettura su carta e su schermo è necessario spiegare come il cervello umano interpreti la lingua scritta. Sebbene lettere e parole siano simboli che rappresentano suoni e idee, il nostro cervello le considera anche come oggetti fisici. Quando impariamo a leggere e a scrivere iniziamo a riconoscere le lettere in base a linee, curve e spazi vuoti: un processo di apprendimento che richiede l’uso sia degli occhi sia delle mani. Uno studio recente, effettuato da Karin James, dell’Università dell’Indiana a Bloomington, ha mostrato che nei bambini di cinque anni i circuiti cerebrali dedicati alla lettura si attivano quando provano a scrivere lettere a mano, ma non quando premono i corrispondenti tasti su una tastiera.

Oltre a trattare le lettere come oggetti fisici, è possibile che il cervello percepisca il testo nella sua interezza come una specie di paesaggio materiale. Quando leggiamo costruiamo una rappresentazione mentale del testo, simile, secondo alcuni ricercatori, alle mappe mentali che creiamo per il territorio che ci circonda. Varie prove e studi dimostrano che quando le persone cercano di ritrovare una frase o una scena in un libro spesso ricordano la posizione nella pagina in cui le hanno lette la prima volta.

Il fatto è che, nella maggior parte dei casi, i libri cartacei hanno una topografia più chiara dei testi su uno schermo. Un tascabile aperto ci presenta due domini ben definiti – la pagina sinistra da una parte e quella destra dall’altra – con otto angoli grazie ai quali ci possiamo orientare. Siamo in grado di concentrarci su una singola pagina senza perdere di vista il testo nella sua interezza, e possiamo percepire con le mani lo spessore delle pagine che abbiamo già letto, a sinistra, e di quelle che ci restano da leggere, a destra. Girare le pagine è come lasciare un’impronta dopo l’altra lungo un cammino: è un’azione che ha un certo ritmo e lascia una testimonianza visibile di quanta strada abbiamo fatto. Tutto ciò rende il libro cartaceo più facile da “navigare”, e ci aiuta a crearcene una mappa mentale coerente.

Al contrario, la maggior parte dei dispositivi digitali interferisce con la navigazione intuitiva di un testo e ci impedisce di mappare il percorso seguito dalla nostra mente. Chi legge un testo in formato digitale può scorrere con il mouse un flusso di parole senza alcuna interruzione, passare alla pagina successiva con un tocco e sfruttare la funzione di ricerca per individuare al volo una particolare frase. Ma avrà difficoltà a cercare all’interno del testo una scena che ricorda vagamente. Per fare un’analogia, immaginate che cosa succederebbe se Google Maps ci permettesse di percorrere ogni singola via di una città ma non di allargare la prospettiva per vedere la mappa di un intero quartiere. Sebbene gli e-reader e i tablet riproducano l’impaginazione dei libri – a volte con tanto di numeri di pagina, testatine e illustrazioni – uno schermo mostra solo una o due pagine virtuali per volta. Appena passiamo oltre, quelle pagine diventano invisibili. È come se invece di guardarci intorno, mentre ci arrampichiamo su per un sentiero di montagna, vedessimo alberi, pietre e muschi passarci a fianco in una serie di scatti, senza traccia di quello che abbiamo superato e senza alcuna possibilità di vedere ciò che si prospetta più avanti.”

Ingrandimento delle pagine web e ipovisione

In relazione dell’accesso ai contenuti delle pagine web per gli utenti con ipovisione e del nuovo documento del W3C di cui ho parlato, è interessante focalizzare l’attenzione su una caratteristica molto importante dei browser, l’ingrandimento di solo testo.

I browser e gli ingrandimenti

Fino a un certo punto della evoluzione dei browser l’ingrandimento del testo è stata una funzionalità standard, l’unica possibile per dare la possibilità agli utenti di ridimensionare il testo a proprio piacere.

I browser non erano così evoluti come oggi e per poter effettuare questo tipo di zoom era necessario che le dimensioni dei font fossero espresse in em, una unità di misura relativa adatta a tale scopo, al contrario delle dimensioni espresse in pixel (px) che invece bloccavano tale possibilità.

Per questo linee guida e best practice su accessibilità e usabilità suggerivano di utilizzare nei progetti web unità di misure relative (em) e non assolute (px).

Ad un certo punto dell’evoluzione dei browser fu introdotta una funzionalità di zoom diversa, in un certo senso innovativa, quella dello zoom di porzioni di pagina. Internet Explorer, nelle sue stravaganti evoluzioni, nella versione 8.0 decise di eliminare la funzione di ingrandimento del solo testo a vantaggio dell’unica funzionalità di ingrandimento delle porzioni di pagina.

Molti utenti ipovedenti, ma anche utenti normo vedenti, non hanno mai gradito lo zoom di pagina per due motivi fondamentali:

  1. I testi e le immagini subiscono un degrado della qualità e della definizione che talvolta rende difficile, se non talmente scomodo e in definitiva impossibile, l’accesso al contenuto
  2. La pagina ingrandita non è più contenuta dallo schermo del dispositivo e si genera un nuovo scrolling orizzontale che l’utente è obbligato a usare per visualizzare l’intera pagina. Questo effetto introduce due problemi:
    1. Si è costretti a gestire lo zoom orizzontale per completare la lettura di ogni riga di testo; è un’operazione davvero scomoda, basta provare un attimo per rendersene conto. Provoca un continuo spostamento del focus visivo che molti utenti non possono proprio gestire.
    2. La presenza dello scrolling orizzontale non è usuale e la sua presenza, una volta generato, può diventare non immediatamente percepibile. L’utente può perdere consapevolezza che esistono porzioni di pagina nascoste. Per esempio possono diventare invisibili le barre laterali che sono spesso nettamente separate dal resto della pagina.

Ecco quindi che diventa importante, così come richiedono le WCAG2 (e in Italia la legge 4/2004) progettare pagine che supportino l’ingrandimento di solo testo, perché in questo modo viene preservata l’integrità della pagina che rimane (seppure con aspetto diverso) sempre integralmente a disposizione del campo visivo dell’utente.

In questo discorso le tecniche di responsive design, ossia la capacità dei progetti web di adattarsi al dispositivo usato dall’utente, conducono sviluppatori e committenti su due strade opposte: da una parte amplificano la consapevolezza che un progetto web deve “resistere” a ingrandimenti anche molto forti, dall’altra però la somiglianza dei progetti web alle applicazioni per mobile induce a credere che il tutto debba essere sempre immutabile, preciso al pixel e non modificabile.

Come spesso accade la verità sta nel mezzo: garantire correttamente le funzioni responsive senza però introdurre oggetti che impediscono il ridimensionamento dei caratteri.

A questo proposito ho provato a individuare quali sono gli elementi di design che devono essere usati con particolari attenzioni perché potenzialmente portatori di problematiche.

Menù orizzontali (semplici o a più righe)

Sono usati spesso su siti web ricchi di contenuti e contenenti molte sezioni. Le criticità legate ai menù orizzontali sono note ai designer: il numero di voci che possono contenere è limitata e la lunghezza di ogni elemento è talvolta un problema. Spesso gli sviluppatori, per garantire un’adeguata stabilità del menù optano per oggetti bloccati in lunghezza e altezza. Questo implica che ai primi ingrandimenti il testo scivola fuori dal suo contenitore e spesso le voci di menù si sovrappongono.
Quello che segue è il menù superiore del sito http://www.trenitalia.com con alcuni aumenti di solo testo.

menù del sito trenitalia

I due menù orizzontali sono sovrapposti e non più utilizzabili

Menù orizzontali e altri oggetti dropdown

Le criticità descritte nel punto precedente si amplificano quando i menù orizzontali hanno menù di secondo livello che si aprono a tendina per ogni voce di menù sulla quale si esercita un’azione hover con il mouse. Questi livelli “annidati” soffrono ancora di più del problema dell’ingrandimento del testo anche perché spesso sono generati dinamicamente dai cms e quindi il controllo del contenuto è più difficoltoso. Capita spesso per esempio che il designer che sviluppa il progetto di base ipotizzi voci di menù sintetiche e ottimizzate e poi il content manager (o l’addetto ai contenuti dell’azienda) trasformi la voce di menù in qualcosa di molto più esteso e complesso. Mi è capitato di vedere progetti web nei quali una voce di menù pensata per contenere la parola “Prodotti”, si sia poi trasformata in “I nostri prodotti a catalogo 2016/2017”.

Nell’immagine che segue c’è una pagina del Corriere della Sera, con il suo menù orizzontale e il menù dropdown aperto.

menù orizzontale e menù verticale del Corriere della Sera

Sia nel menù orizzontale che in quello verticale i caratteri sono sovrapposti e di difficile, e talvolta impossibile, lettura.

Box (elementi DIV) bloccati in altezza

Forse vi sarete accorti che negli ultimi anni molti progetti web, anziché essere strutturati in colonne verticali (una volta esisteva quasi uno pseudo standard basato su tre colonne, poi più frequentemente a due), sono strutturati a “fette” orizzontali. Tali tipo di layout ha introdotto anche la disposizione dei contenuti a blocchi orizzontali, e spesso i designer optano per bloccare le altezze di tali blocchi onde evitare lo spiacevole effetto che i tre elementi abbiano una estensione in verticale diversa.

Esistono chiaramente tecniche per bloccare le altezze dei box di layout ad altezze predefinite, ma che non impediscono al box di estendersi in verticale qualora lo spazio non sia sufficiente a contenere tutti gli elementi al suo interno. Esiste ad esempio il semplice attributo CSS min-height adatto a questo scopo, ma chiaramente non sempre gli effetti possono essere quelli desiderati.

L’esempio che segue è il sito Vodafone http://www.vodafone.it nella sezione di homepage dedicata alla scelta dello smartphone

Porzione di homepage di Vodafone

Nell’immagine è evidente come i riquadri contenitori rimangano immutati all’aumentare della grandezza dei caratteri

Oggetti sliders

Anche gli sliders di immagini e testi in homepage sono diventati in questi anni quasi uno pseudo standard. Di indubbia efficacia comunicativa, sono però oggetti amati e contestati per uno stesso motivo: presentano molto bene un argomento in primo piano, ma allo stesso tempo catalizzano l’attenzione solo su quell’argomento.

I motivi per cui andrebbero usati con molta cautela è invece proprio perché spesso sono oggetti che non si adattano bene al contesto, né alle fasi responsive (visualizzazione nei vari dispositivi) né agli effetti degli ingrandimenti dei testi, che spesso ai primi zoom slittano in zone non visibili all’utente o peggio ancora sforano in aree con immagini di sfondo rendendo il testo non più leggibile.

In questo caso l’esempio riportato è la homepage del sito turistico ufficiale di Roma http://www.turismoroma.it

Homepage del sto ufficiale del Turismo a Roma

Il titolo dello slider non è più visibile.

Icone gestite come immagini (e non da CSS)

Questo è uno dei problemi tipici delle applicazioni web: se le icone sono inserite come oggetto immagine, gli ingrandimenti di solo testo non avranno effetto su di esse. Un esempio su tutti, nell’applicazione Gmail di Google il pulsante stampa per le email è una immagine png, ingrandendo il testo quel pulsante rimane della sua dimensione originale e quindi quasi invisibile per l’utente che ha bisogno di accedere al contenuto in forma più ingrandita.

Pagina di Gmail

I pulsanti relativi alle funzioni (stampa, rispondi, ecc) hanno icone che non sono ingrandite

Pulsanti

I pulsanti sono quasi sempre un elemento fondamentale in un progetto web. Invio di moduli, sottoscrizione di newsletter, call-to-action di ogni tipo, rappresentano il punto di interazione tra il visitatore e organizzazione che sta esponendo i propri prodotti o servizi online, per questo andrebbe posta molta attenzione a tali oggetti.

Può sembrare una banalità eppure proprio questi oggetti soffrono di problemi legati all’ingrandimento dei caratteri. L’esempio che evidenzia questo problema è nell’immagine precedente, l’applicazione Gmail, dove l’unico pulsante presente “SCRIVI”, è quasi invisibile a causa dello scivolamento del testo bianco sul fondo bianco.

Conclusione

Chi sviluppa i progetti web dovrebbe occuparsi di rendere più agevole possibile la navigazione, e chi si occupa di competenze digitali e di formazione dovrebbe invitare e suggerire agli utenti di accedere a queste funzionalità: un semplice ingrandimento di caratteri può migliorare significativamente l’esperienza utente.

Purtroppo queste problematiche rimangono spesso sconosciute, o, peggio, chi ne ha consapevolezza si ritrova a pensare che forse, non sono poi così tanti gli utenti che ne beneficiano e ci si ritrova a sperare che quel CTRL+ (o CMD+ in ambiente Apple) non venga mai utilizzato.

Non è solo una questione etica, è anche una questione di business, perché gli utenti che possono beneficiare dell’ingrandimento dei caratteri sono davvero tanti. Ma chi sono questi utenti? Quella che segue è una lista non esaustiva:

  • quelli che definiamo ipovedenti
  • quelli che hanno altri problemi alla vista e neanche ce lo immaginiamo
  • quelli che hanno dimenticato gli occhiali a casa
  • quelli che stanno sotto il sole e non vedono bene il monitor
  • quelli che hanno un computer obsoleto la cui definizione è scarsa
  • quelli che hanno fatto un ingrandimento 5 anni fa e non sanno più tornare indietro (e non sanno neanche di aver ingrandito le pagine)
  • quelli che hanno il monitor distante dalla propria posizione
  • quelli che devono sopperire alle inconsapevolezze dello sviluppatore che pensa che un font a 8px sia elegante
  • quelli che semplicemente stanno comodi a vedere più grande

Vi lascio con una nota di speranza. Visto che gli esempi che ho portato sono di progetti per il web di grande aziende, potreste essere indotti a pensare che quello che dico sia inapplicabile. Quello che segue è l’immagine della homepage del sito dell’Agenzia per l’Italia Digitale http://www.agid.gov.it e quello di IWA http://www.iwa.it  che, dopo molti ingrandimenti, risultano ancora perfettamente utilizzabili, non si perde nessun contenuto e l’interfaccia utente rimane invariata. Insomma, se si vuole si può.

Homepage sito Agid molto ingrandita


Accessibilità, eventi e iniziative (e anticipazioni) per maggio e giugno 2017

Ci sono tante cose che riguardano l’accessibilità, e mi riguardano, in questi mesi. Per non perdere traccia delle cose importanti ho pensato di riepilogarle qui. Sui miei canali social poi non mancherò di dare anticipazioni e pubblicare dei promemoria per ogni evento. Ecco la lista delle cose.

webaccessibile.org

Da maggio 2017 sono iniziate le attività per l’aggiornamento e la riorganizzazione editoriale dello storica risorsa online per l’accessibilità webaccessibile.org, edita da IWA, di cui sono il coordinatore. È stato costituito un gruppo di lavoro che porterà a breve ad avere sia un nuovo layout che una nuova impostazione editoriale. Non mancherò di tenervi aggiornati su questo fronte.

Global Accessibility Awareness Day

Il 18 maggio 2017 è la giornata mondiale di sensibilizzazione sull’accessibilità. Avremmo voluto far uscire la nuova versione di webaccessibile.org in questa data ma è stato impossible attivare una pianificazione delle attività con conclusione dei lavori (anche in versione beta) con una tempistica così stringente. Il 18 maggio però, su questo sito, in anteprima, pubblicherò un post sulle ipovisioni, un’analisi di alcune problematiche che spesso rimangono border-line nella progettazione per il web.

Hack-cessibility Days

Venerdì 19 e sabato 20 maggio 2017 si svolge alla Mole Vanvitelliana di Ancona una due giorni dedicata all’accessibilità “Hack-cessibility Days“. Sabato 20 maggio 2017, alle ore 10:30 parlo di accessibilità web “Accessibilità per il web: cos’è, a chi è rivolta e perché è fondamentale per un web di qualità“. Se potete non mancate perché è un evento davvero importante e soprattutto uno dei pochi che si svolgeranno in Italia in occasione del GAAD (descritto nel paragrafo precedente).

ForumPA 2017

Dal 23 al 25 maggio 2017 si svolge a Roma ForumPA 2017. Il giorno 23 alle ore 15:00 si tiene il mio seminario dal titolo “Come vengono percepiti i siti web della PA da parte degli utenti?“. Viaggio attraverso la qualità dei siti web della PA usando la percezione che ne hanno gli utenti.

Webinar: l’accessibilità legata alla User Experience

Il 25 maggio alle 15,30 sarò relatore per Siteimprove di un webinar nel quale parleremo di Accessibilità e User Experience, di utenti e di scelte che oltre ad essere etiche e qualitative, diventano anche un supporto ai modelli di business. Al webinar si parlerà del processo di accessibilità in corso all’Università  LUISS Guido Carli. Il webinar è gratuito e aperto a tutti, basta registrarsi da qui http://go.siteimprove.com/webinar-accessibilita-user-experience

SMAU Bologna 2017

L’8 e il 9 giugno 2017 c’è SMAU Bologna. Il giorno 8 (orario da definire) sarà impegnato in un seminario di presentazione di una importante iniziativa associativa (IWA). Non posso ora rilevarne i dettagli perché appunto verrà presentata in occasione dell’evento. Vi anticipo solo che è una importantissima attività a supporto delle aziende che fanno impresa nel settore digitale. Chiaramente le strategie accessibili saranno uno dei fili conduttori.

Web Marketing Festival

La carrellata di eventi descritti in questa pagina si chiude con il Web Marketing Festival. Si svolge a Rimini il 23 e il 24 giugno 2017. È davvero troppo presto per qualunque anticipazione, ma come si dice in questi casi “save the date”. Ci saranno cose interessanti anche qui.

Un digitale di carta

Spesso si dice che il digitale non è un supporto efficiente per la vita delle persone perché “i processi digitali” non sono stati pensati come tali ma è stato semplicemente trasposto in digitale ciò che avveniva nel mondo analogico. Ma cosa significa “ripensare i processi per il digitale”? Molti ne parlano ma talvolta rimangono parole vuote e prive di senso.

Per dargli forma ci facciamo aiutare da un caso reale, che ci permetterà di capire cosa può significare  tutto ciò.

Il caso: a una anziana signora, già esente dal pagamento dei Ticket, viene diagnosticata una patologia per la quale ha diritto a una esenzione supplementare per l’acquisto di beni strumentali necessari per la cura di tale problema. Un medico della Pubblica Amministrazione si prende la responsabilità di certificare tale patologia e di autorizzare tale esenzione, rilasciando alla paziente i documenti necessari. Visto che la sanità della PA in questione è abbastanza all’avanguardia nel settore digitale, CUP centralizzati su tutta la regione, ritiro e prenotazioni online, interoperabilità dei dati tra le varie organizzazione, ci si aspetterebbe che il percorso della signora potesse concludersi con il portare in farmacia quel foglio e ritirare quanto necessario. Invece no, nonostante tutto sia completamente digitalizzato la signora ha dovuto fare le seguenti azioni:

  1. Ritirare il certificato dal medico come già descritto nell’ambulatorio di riferimento.
  2. Portare quel foglio in un CUP, localizzato in un altro centro della stessa ASL a 8km di distanza dall’altro dove l’operatore ha il compito di trascrivere quando già scritto dal medico in un altro terminale.
  3. Prendere un nuovo foglio rilasciato dal CUP e il foglio rilasciato dal medico in prima fase e andare in un nuovo ufficio dove un altro medico, in un altro terminale, inserisce nuovamente i dati in una nuova maschera.
  4. Finalmente avere i giusti documenti per andare a prendere i prodotti in farmacia.

Non ci è dato sapere se i due operatori, quello del CUP e il secondo medico, abbiano aggiunto informazioni sulle piattaforme digitali che hanno usato, ma di sicuro l’impressione data all’anziana signora è stata quella di un mero copia (a mano) di dati che in qualche modo erano già in possesso della PA stessa. E di sicuro nessuno dei due operatori ha fatto azioni di controllo, verifica, analisi sul paziente stesso, limitandosi a usare le informazioni nei fogli redatti dal primo medico.

È difficile immaginare che il paziente in questione abbia avuto la sensazione di aver dovuto fare almeno 2 azioni superflue?

Cosa ha impedito alla PA di eliminare questo presunto inutile vagabondare di utenti in tre uffici diversi?

Credo che questo esempio sia perfetto per dare un senso compiuto alla frase “riprogettare i processi in modo digitale“.