Dipingi il quadro, non la cornice: come i browser forniscono tutti ciò di cui ha bisogno l’utente

Kip Williams, professore di psicologia alla Purdue University, ha condotto un esperimento affascinante chiamato “cyberball”. Nel suo esperimento, un soggetto di prova e altri due partecipanti hanno giocato a un videogioco il cui scopo è di prendere al volo una palla. In un momento prestabilito, il soggetto del test è stato escluso dal gioco, costringendolo a poter solo osservare lo scorrere del timer.

L’esperienza ha mostrato un aumento dei livelli auto-riferiti di rabbia e tristezza, così come l’abbassamento dei livelli dei quattro bisogni necessari per sentire di avere significato. La versione digitale dell’esperimento ha creato risultati che corrispondevano ai risultati di quello fisico originale, il che significa che questi sentimenti si sono verificati indipendentemente dal contesto.

Dopo la conclusione del gioco, al soggetto del test è stato detto che gli altri partecipanti erano robot, non altri umani. È interessante notare che la rivelazione di concorrenti automatizzati non ha diminuito i sentimenti negativi segnalati. Anzi, ha fatto aumentare i sentimenti di rabbia, diminuendo anche il senso di forza di volontà e/o di autoregolazione dei partecipanti.

In altre parole: le persone che si sentono rifiutate da un sistema digitale si sentiranno ferite e avranno il loro senso di autonomia ridotto, anche quando credono che non ci sia un altro umano direttamente responsabile.

Ma cosa c’entra tutto questo con i browser?#section1

Ogni adeguamento all’aspetto e al comportamento delle funzionalità che i browser consentono di manipolare è un lancio di dadi, la scommessa sulla gioia di alcuni a scapito dell’alienazione di altri.

Quando si usa un browser per navigare sul Web, c’è un sacco di monotonia, fino a quando non ce n’è. La maggior parte delle volte passiamo da pagina a pagina e da sito a sito, facendo click su collegamenti, premendo pulsanti, guardando video, compilando form, scrivendo messaggi, etc. Ma ogni tanto ci imbattiamo in qualcosa di nuovo e innovativo che ci fa fermare per capire cosa sta succedendo.

Ogni sito e ogni web app è un’esperienza autonoma a sé stante, con le proprie idee su come le cose dovrebbero apparire e comportarsi. Alcune sono più simili alle altre, ma ciascuna richiede di imparare a gestire in una certa misura l’interfaccia.

Alcuni browser possono anche alterare parti della loro funzionalità e del loro aspetto, il che significa che, come con i siti Web, possono verificarsi discrepanze impreviste. Sveleremo alcune delle sfumature dietro alcune di queste funzionalità e, cosa ancora più importante, perché è meglio lasciar perdere la maggior parte di esse.

Scroll-to-top#section2

Tutti i principali browser desktop vi consentono di premere il tasto Home sulla tastiera per saltare all’inizio della pagina. Alcune implementazioni della barra di scorrimento consentono di fare click sulla parte superiore dell’area della barra di scorrimento per fare la stessa cosa. Alcuni browser vi permettono di digitare anche Command+Up (macOS) / Ctrl+Up (Windows). Le persone che utilizzano tecnologie assistive quali gli screen reader possono utilizzare cose come i banner landmarks per navigare nello stesso modo (a condizione che siano dichiarati correttamente nel HTML del sito).

Tuttavia, non tutti i dispositivi hanno un modo facilmente individuabile per richiamare questa funzionalità: molti laptop non hanno un tasto Home sulla propria tastiera. La funzionalità tap-the-clock-to-jump-to-the-top su iOS è difficile da scoprire e può essere sorprendente e frustrante se attivata accidentalmente. Occorrono delle estensioni specializzate per il browser per ricreare le tecniche di navigazione dei punti di riferimento (landmark navigation) dello screen reader.

Una soluzione di interfaccia utente comunemente implementata per pagine più lunghe è il pulsante scroll-to-top. È spesso fissato nell’angolo in basso a destra dello schermo. L’attivazione di questo controllo porta l’utente in cima alla pagina, indipendentemente da quanto è arrivato in basso.

Se il vostro sito presenta una grande quantità di contenuti per pagina, potrebbe valere la pena prendere in considerazione questo pattern di UI. Provate a guardare le statistiche e/o a condurre degli user test per vedere dove e quanto spesso viene utilizzata questa feature. L’avvertenza è che se è usata troppo spesso, potrebbe essere il caso di esaminare seriamente l’architettura dell’informazione e la content strategy.

Tre cose che mi piacciono del pattern scroll-to-top sono:

• la sua funzionalità è piuttosto ovvia (specialmente se etichettata a dovere).
• Posto che sia progettato bene, può fornire un target touch di dimensione decente in un’area facile da raggiungere col pollice. Per le considerazioni sulle disabilità motorie, il suo target touch può essere più grande delle strette barre di scorrimento o di stato, che possono costituire dei target così piccoli da essere frustranti da toccare.
• Non altera né rimuove il comportamento di scroll esistente, al contrario, lo aumenta. Se qualcuno è abituato a un modo di fare lo scroll verso l’alto, non lo state sovrascrivendo o interrompendo.

Se state implementando questo tipo di funzionalità, ho quattro richieste che aiutano a far sì che l’esperienza funzioni per tutti (trovo la libreria Smooth Scroll un punto di partenza utile):

• Onorate le richieste di movimento ridotto da parte degli utenti. Il drammatico effetto di scroll a frustata dal basso della pagina verso l’alto potrebbe innescare una reazione vestibolare, una situazione in cui il sistema che controlla il senso della posizione fisica e l’orientamento del vostro corpo nel mondo viene interrotta, causando cose come mal di testa, nausea, vertigini, emicrania e perdita di udito.
• Assicuratevi che il focus della tastiera venga spostato in cima al documento, rispecchiando quello che avviene visivamente. Applicare questa regola migliorerà l’esperienza di tutti gli utenti. Altrimenti, premere Tab dopo essere tornati in cima rimanderà l’utente giù al primo elemento interattivo che segue il punto in cui era il focus prima di attivare il pulsante di scroll.
• Assicuratevi che il pulsante non renda dell’altro contenuto inutilizzabile oscurandolo. Assicuratevi di tenere conto di quando il browser è in uno stato “zoomed in”, non solo nel suo stato di default.
• Siate consci di altri elementi con posizione fissa. Ho visto un certo numero di siti web che hanno anche un chatbot o un floating action button che competono per lo stesso spazio.

Scrollbar#section3

Se siete sufficientemente anziani per ricordarvelo, una volta era considerato alla moda assegnare uno stile alle scrollbar del vostro sito web. Internet Explorer permetteva questa personalizzazione attraverso una serie di proprietà vendor specific. Nel migliore dei casi, apparivano ottime! Se il designer e il developer erano entrambe talentuosi e orientati al dettaglio, si poteva ottenere l’effetto di un’estensione naturale del resto del sito web.

Tuttavia, la posta in gioco di un design di qualità è piuttosto alta: le scrollbar fanno parte dell’interfaccia di un’applicazione, non di un sito web. Nell’inclusive design, fa parte di quella che chiamiamo consistenza esterna. La consistenza esterna è l’idea che la funzionalità di un oggetto sia informata e rafforzata da implementazioni simili che si trovano altrove. È il motivo per cui potete premere l’interruttore sul muro di quasi tutte le case ed essere sicuri che si accenderanno le luci piuttosto che si attivi lo scarico della toilet.

Sebbene le scrollbar abbiano delle piccole differenze visuali tra i sistemi operativi (e tra le versioni di uno stesso sistema operativo), la loro funzione è esternamente consistente. Le scrollbar sono inoltre consistenti internamente, poiché ogni finestra e programma nel OS che richieda uno scrolling tratta le scrollbar in modo identico.

Se personalizzate i colori della scrollbar del vostro sito, per le persone meno istruite in materia tecnologia, avete cambiato un ulteriore aspetto dell’interfaccia senza avviso o istruzione per tornare all’originale. Se l’utente è già confuso su come funzionino le cose sullo schermo, ecco una cosa familiare in meno a cui aggrapparsi per stabilità e affidabilità.

Magari starete alzando gli occhi al cielo leggendo questo, ma vi chiederei invece di dare un’occhiata a questo incredibile articolo di Jennifer Morrow. In esso, descrive la conduzione di un guerilla user test in un centro commerciale, quando la sessione è stata completamente deragliata dalla scoperta di qualcuno che non aveva mai usato un computer prima di allora.

Quello che scopre è tanto importante quanto scioccante: la sostanza è che alcune persone (anche chi ha usato un computer in precedenza) non comprendono le sfumature dei vari “livelli” in cui si naviga per far funzionare un computer: l’hardware, l’OS, il browser installato nell’OS, il sito web che il browser sta mostrando, le modali e i disclosure statement del sito, etc. Per loro, l’esperienza è piatta.

Non dovremmo aspettarci che questi utenti giochino con questo tipo di overhead cognitivo. Questi tipi di astrazioni sono create per essere degli analoghi degli oggetti del mondo reale, in modo specifico così che le persone possano ottenere ciò che vogliono da un sistema digitale senza dover essere programmatori. Aggiungere complessità non necessaria indebolisce queste metafore e dà agli utenti un punto di riferimento in meno su cui fare affidamento.

Ricordatevi l’esperimento cyberball: quando un utente è già in uno stato emotivo stressato, la nostra scrollbar personalizzata mal progettata potrebbe essere la goccia che fa traboccare il vaso, ovvero la persona potrebbe rinunciare a cercare di ottenere quello che vuole e rifiutare l’intero sistema.

Nonostante l’articolo di Morrow sia stato scritto nel 2011, è tuttora rilevante. Sempre più persone usano internet globalmente e vengono digitalizzati sempre più servizi fondamentali per il vivere quotidiano. Sta a noi in qualità di designer e sviluppatori responsabili assicurarci che tutti si sentano i benvenuti, indipendentemente dal device, dalle circostanze o dalla capacità.

Oltre ad abbandonare inutilmente la consistenza esterna, c’è un’altra questione dell’assegnare uno stile personalizzato alle scrollbar, ossia quello che potenzialmente non abbiano sufficiente contrasto nel colore. I colori troppo tenui possono creare una situazione in cui una persona con problemi di vista non sia in grado di percepire, e pertanto far funzionare, il meccanismo di scroll di un sito web.

Questo articolo non cercherà nemmeno di tirare fuori le questioni implicate nelle implementazioni personalizzate di scrollbar, in cui invece di assegnare un tema con CSS alle scrollbar native dell’OS, le si sostituiscono invece con una soluzione JavaScript. Fidatevi di me quando dico che devo ancora vederne una implementata in maniera tale che possa ricreare con successo e affidabilità tutte le feature e funzionalità attraverso tutti i device, OS, browser e browsing mode.

La mia opinione? Non alterate l’aspetto di default delle scrollbar di un OS. Usate quel tempo per lavorare su qualcosa d’altro, come per esempio controllare e sistemare tutti i problemi di contrasto dei colori.

Scrolling#section4

La preoccupazione principale dell’alterare il comportamento di scrolling è di consenso: si prende un comportamento esternamente consistente e presente nel sistema e improvvisamente lo si altera senza permesso. Per descrivere questa pratica è stato coniato il termine scrolljacking. Non va confuso con scrollytelling, un trattamento del comportamento di scroll più considerato che onora le impostazioni si scrolling dell’OS.

Alterare il comportamento dello scrolling sul vostro sito web o nella vostra web app può essere in contraddizione con le preferenze specifiche espresse da qualcuno. Per alcune persone, si tratta semplicemente di una seccatura. Potrebbe rendere difficile muoversi all’interno del sito per le persone con problemi di controllo del movimento. In alcuni casi estremi, la discrepanza annunciata tra la quantità di scrolling e la distanza percorsa potrebbe anche costituire un trigger vestibolare. Un’altra considerazione da fare è se il vostro comportamento di scrolling modificato esclude accidentalmente le persone che non usano mouse, touch o trackpad per fare scroll.

Tutto sommato, penso che Robin Rendle l’abbia detto al meglio:

Selezionare, evidenziare#section5

Un’altra feature del sistema operativo a cui ci è permesso di assegnare stili nel browser è il testo selezionato. In maniera simile alle scrollbar, si tratta di un elemento di interfaccia condiviso da tutte le app dell’OS, non solo dal browser.

Rompere la consistenza esterna del colore di selezione dell’OS ha molti degli stessi problemi delle scrollbar con stili personalizzati, cioè l’alterazione del comportamento atteso di qualcosa che funziona in maniera affidabile altrove. È potenzialmente disorientante e alienante e potrebbe negare le preferenze espresse da qualcuno.

Alcune persone evidenziano il testo mentre lo leggono. Se il vostro stile di sottolineatura ha un basso contrasto tra il colore del testo sottolineato e il colore di sfondo del testo sottolineato, la persona che legge sul vostro sito o web app potrebbe non essere in grado di percepire il testo che stanno selezionando. L’effetto causerà l’apparente sparizione del testo mentre cercano di leggere.

Altre persone potrebbero non curarsi delle vostre sensibilità estetiche. Sia macOS sia Windows vi permettono di specificare un colore di selezione custom. In uno scenario in cui qualcuno ha deliberatamente impostato una preferenza diversa dal default di sistema, un colore di selezione a cui è assegnato uno stile potrebbe sovrascrivere le loro specifiche dichiarate.

Per me, i rischi potenziali sorpassano di molto la vanità di uno stile di selezione su misura: meglio lasciarlo così com’è.

Ridimensionare il testo#section6

Molte persone cambiano la dimensione del testo per adattarlo alle loro esigenze. Ed è una cosa buona. Vogliamo che le persone siano in grado di leggere i nostri contenuti ed agirci, indipendentemente dalle loro circostanze.

Per il problema del testo troppo piccolo, alcuni designer si rivolgono alle widget di ridimensionamento del testo, un pattern UI custom che permette a una persona di provare una serie di valori preimpostati di font-size del CSS. Si trova comunemente dove ci sono moltissimi contenuti testuali e le widget di ridimensionamento del testo sono spesso accoppiate a design complessi con più colonne. I siti di notizie ne sono un esempio comune.

Prima di buttarmi nelle mie preoccupazioni riguardanti le widget di ridimensionamento del testo, voglio chiedervi: se trovate che il vostro sito abbia bisogno di una widget specializzata per gestire la dimensione del vostro testo, perché non prendete semplicemente la strada più facile e aumentate la dimensione del testo di base?

Come molti problemi di accessibilità, una richiesta di dimensioni di font maggiori non è necessariamente indicativa di una condizione permanente di disabilità. Spesso è circostanziale, come una situazione in cui state mostrando un sito web sul pessimo proiettore del vostro ufficio.

I browser permettono agli utenti di cambiare la loro dimensione del font preferita, ridimensionando il testo di conseguenza nei siti web. I browser eccellono nella gestione di questa impostazione quando scrivete CSS che sfrutti i valori senza unità di line-height e le unità relative di font-size.

Alcuni designer potrebbero pensare che garantire questa libertà agli utenti riduca in qualche modo il branding pianificato. I bravi designer comprendono che c’è di più nel branding del semplice aspetto. Si tratta di implementare il design iniziale nel browser e poi di lavorare con le capacità del browser per servire al meglio la persona che lo usa. Anche se cose come la dimensione del font vengono aggiustate, un brand solido brillerà ancora attraverso la facilità di scorrimento dell’utente, la qualità della tipografia e della palette, la forza del copywriting, etc.

Sfortunatamente, alle widget personalizzate di ridimensionamento del testo del browser manca un approccio universale. Se fate affidamento sulle impostazioni di testo del browser, funziona e basta: in modo consistente, con gli stessi controlli, gesture e scorciatoie da tastiera per ogni pagina in ogni sito, anche in condizioni meno che ideali. Non dovete scrivere e mantenere codice extra, testare tramite regression o scrivere copy che istruisca l’utente su dove trovare la widget di ridimensionamento del testo nel sito e in che modo usarla.

La consistenza nel comportamento è incredibilmente importante. Il ridimensionamento del testo del browser è applicato a tutti il testo sulla pagina in maniera proporzionata ogni volta che si cambia l’impostazione. Queste impostazioni vengono inoltre salvate per la vostra visita successiva. Non tutte le widget di ridimensionamento del testo custom lo fanno né ridimensionano tutto il contenuto al punto stabilito dalle Web Content Accessibility Guidelines.

Temi ad alto contrasto#section7

Quando parlo di temi ad alto contrasto, non sto parlando di cose come un dark mode. Sto parlando di una risposta a persone che dicono di aver bisogno di cambiare i colori del vostro sito web o web app perché sia per loro più accessibile visivamente.

In maniera simile ai controlli per ridimensionare il testo, i temi progettati per fornire valori di colore con contrasto maggiore sono sconcertanti: se vi prendete del tempo per farne uno, perché semplicemente non fissare i valori di contrasto insufficienti nel vostro CSS regolare? Gestire in maniera efficace i temi in CSS è un affare complicato e che impiega molte risorse, anche in situazioni ideali.

La maggior parte dei temi ad alto contrasto forniti dai siti sono statici perché il designer o il developer ha preso delle decisioni in merito a quali valori di colore usare, che potrebbe essere un problema. Troppo contrasto è noto per far scattare cose come le emicranie così come rendere potenzialmente difficile concentrarsi per gli utenti che hanno alcune forme di ADHD (attention-deficit hyperactivity disorder).

Il dilemma del contrasto ci porta a una cosa difficile da accettare in materia di accessibilità: quello che funziona per una persona potrebbe in realtà bloccarne un’altra. Perciò, è importante rendere le cose aperte e interoperabili. Lasciate il controllo ultimo all’utente finale così che possa decidere come interagire al meglio con il contenuto.

Se comunque decidete di fornire questo tipo di feature, ecco un consiglio: modellatelo sulla modalità High Contrast di Windows. È una feature specializzata di Windows che permette a una persona di forzare una palette ad alto contrasto in tutti gli aspetti delle UI dell’OS, inclusa qualsiasi cosa il browser mostri. Offre quattro temi pronti all’uso ma permette anche all’utente di soddisfare i propri bisogni specificando i propri colori.

La vostra feature “high contrast mode” dovrebbe fare lo stesso. Offrire un range di temi con diverse palette e lasciare che l’utente scelga i colori che funzionano meglio per lui: garantirà che se quello che offrite non va bene, le persone potranno ancora fare una selezione da sole.

Spostare il focus#section8

Il keyboard focus è il modo in cui le persone che fanno affidamento su input quali tastiere, switch contro, voice input, eye tracking e altre forme di tecnologie assistive possano navigare e interagire con le interfacce digitali. Anche se potete fare cose come usare l’attributo autofocus per spostare il keyboard focus al primo input su una pagina dopo che si è caricata, non è raccomandato.

Per le persone con problemi di vista o non vedenti, è equivalente a venire spostati in un nuovo posto all’improvviso e istantaneamente. È un’esperienza che confonde e disorienta: c’è un motivo per cui c’è un tema ricorrente nei film sci-fi di gente che vomita dopo essere stata teletrasportata per la prima volta.

Per le persone con problemi motori, spostare il focus senza il loro permesso significa che potrebbero venir trasportati in un punto in cui non intendevano andare. Tirarsi fuori da quel posto diventa fastidioso nel migliore dei casi e super faticoso nel peggiore. I siti web senza gli elementi heading o i document landmark che fungono da aiuti alla navigazione possono peggiorare questo effetto.

Sta tutto nel consenso. Spostare il focus va bene finché una persona inizia deliberatamente un’azione che lo richiede (per esempio, spostare il focus ad una modale aperta). Non vengo a casa vostra a obbligarvi a cliccare sulle cose, quindi non spostate il focus della mia tastiera a meno che non ve lo chieda io esplicitamente).

Lasciate che sia il browser a gestire il keyboard focus. I browser lo faranno bene, ammesso che usiate markup semantico. Alcuni consigli:

• Usate l’attributo tabindex con cura e discrezione.
• Non dichiarate tabindex su elementi interattivi (a, button, input, select, summary e textarea).
• Non usate un ordine di tabindex curato a mano che vada in parallelo a quello che vi aspettate che clicchi un utente. Al contrario, create il vostro HTML in maniera tale che il DOM risultante appaia come l’ordine visivo della pagina. In questo caso, aiuta molto adottare un approccio responsive e mobile first.

La clipboard e la cronologia del browser#section9

La clipboard è uno spazio sacro. Non impedite alla gente di copiarvi delle cose e non appendete contenuti extra a quello che copiano. Lo stesso vale per la cronologia del browser e per i pulsanti avanti e indietro. Non armeggiate con i viaggi nel tempo e lasciate che browser faccia il suo lavoro.

Concludendo#section10

Nella parte di gioco del cyberball, il divertimento deriva dall’essere in grado di partecipare con gli altri, passandosi la palla avanti e indietro. Con il web, il divertimento deriva dall’essere in grado di navigarvi. In entrambe le situazioni, il divertimento si ferma quando le persone vengono escluse, costrette a guardare passivamente da bordo campo.

Fortunatamente, il web non deve essere un lungo esperimento di cyberball. Sebbene alterando le potenti funzionalità assistive technology-friendly dei browser è possibile migliorare l’esperienza per alcuni utenti, questa operazione comporta un grande rischio di alienazione di altri se vengono apportate modifiche ignorando esattamente quante cose ne saranno influenzate.

Ricordate che tutto questo è al servizio di ciò che alla fine conta veramente: creare esperienze robuste che permettono alle persone di usare con successo il vostro sito o la vostra web app indipendentemente dalle loro abilità o dalle circostanze. A volte, la miglior strategia è lasciare le cose come sono.