L’ascesa degli strumenti per sviluppatori al servizio degli utenti e altre novità

L’esperienza degli sviluppatori (DX) e l’esperienza degli utenti (UX) non sempre si completano a vicenda. Più spesso di quanto si pensi, uno strumento che offre una buona DX può creare una cattiva UX per l’utente finale, e viceversa.

Uno studio recente ha dimostrato che, in media, i siti web basati su React hanno prestazioni peggiori rispetto a quelli basati su jQuery e renderizzati lato server. Significa che React è uno strumento scadente? Assolutamente no. Ma i framework hanno un costo che finisce per ricadere sull’utente finale.

All’utente non interessano JSX, Web Components, CSS-in-JS e altri dibattiti insensati della comunità degli sviluppatori. Ma l’HTML semantico lo riguarda indirettamente, se usa uno screen reader. E gli interessa il peso complessivo della pagina quando naviga con una connessione 2G o 3G lenta, oppure quando non dispone di un piano dati conveniente.

Nel software, una buona astrazione risolve i problemi in modo efficace, nascondendo i dettagli sottostanti. Quando usiamo uno strumento per risolvere un problema complesso, ci aspettiamo che funzioni come una buona astrazione. Gli strumenti e i framework dovrebbero quindi essere una rete di sicurezza, capace di gestire problemi comuni come le prestazioni e l’accessibilità. Eppure molti di questi strumenti soddisfano solo le nostre esigenze (la DX), ignorando in larga misura quelle degli utenti (la UX).

Oggi, quindi, gli sviluppatori devono essere competenti in materia di prestazioni web, ottimizzazione delle immagini, accessibilità e sicurezza, se vogliono offrire agli utenti un’esperienza soddisfacente. E questo si aggiunge a un elenco già in crescita di competenze da acquisire prima ancora di pubblicare il loro primo «vero progetto». Finiscono così per lottare con i framework che dovrebbero aiutarli.

Fortunatamente, alcuni autori di framework si stanno già muovendo in questa direzione. Cercano di integrare la suddivisione del codice fin da subito e includono strumenti di analisi statica per aspetti delicati come l’accessibilità e la sicurezza. Ma la strada da fare è ancora lunga: questo deve diventare un orientamento condiviso dall’intero settore.

Così ci siamo chiesti:

• Chi sono i nostri utenti?
• Sono gli sviluppatori, i designer e i creatori di contenuti che usano lo strumento ogni giorno?
• O sono le persone che fruiscono dei contenuti generati dalla piattaforma?

Abbiamo capito che offriamo un’esperienza diretta ai nostri clienti e un’esperienza indiretta ai loro utenti, i consumatori. Crediamo fermamente che adottare misure per migliorare l’esperienza dei consumatori sia un modo per servire meglio i nostri clienti. Non lasceremo a loro tutta la responsabilità di creare applicazioni web accessibili, sicure e veloci.

Ecco alcune iniziative per integrare questa rete di sicurezza nel nostro prodotto:

1. Integrare le migliori pratiche
2. Impedire azioni dannose
3. Sensibilizzare e informare

Integrare le migliori pratiche#

In alcune situazioni, dal punto di vista dell’esperienza utente, è sensato adottare scelte precise. Nel tempo, la community ha definito queste migliori pratiche per la creazione di applicazioni web. Non dovremmo doverci preoccupare di applicarle a ogni nuovo progetto.

Prendiamo, per esempio, l’ottimizzazione delle immagini. Le immagini rappresentano il 75% del peso delle pagine web

secondo httparchive.org. Ma non tutti hanno le competenze o gli strumenti per creare immagini ottimizzate al meglio per i propri utenti. L’ottimizzazione delle immagini può diventare rapidamente complessa, tra formati diversi, densità di pixel e dimensioni adattive.

Di recente abbiamo aggiunto un servizio che ridimensiona le immagini caricate in base ai contenitori in cui vengono utilizzate. L’operazione avviene in modo trasparente: diamo per scontato che tu voglia la versione più ottimizzata dell’immagine per il prodotto finale. Nei prossimi mesi lavoreremo a una soluzione per generare immagini adattive e fornire webp ai browser che lo supportano.

L'immagine viene ridimensionata in base al contenitore in cui viene utilizzata

A questo livello, la piattaforma agisce per conto tuo e compie la sua «magia» dietro le quinte, senza bisogno del tuo intervento.

Prevenire le azioni dannose#

Non dovresti dover eseguire verifiche in produzione per scoprire che un'immagine è priva di testo alternativo o che hai annidato per errore alcuni tag di ancoraggio. Tutti questi aspetti possono essere segnalati in fase di compilazione.

Possiamo fare in modo che non si verifichino stati non validi o errati, perché disponiamo in tempo reale di tutte le informazioni sulla semantica. Per esempio, mentre progetti la pagina possiamo impedire l'annidamento dei tag di ancoraggio o una gerarchia errata delle intestazioni.

Nota: questa funzionalità non è ancora stata implementata; è nella fase di proposta progettuale.

In questo scenario, le conoscenze della piattaforma impediscono azioni che potrebbero danneggiare l'esperienza utente.

Sensibilizzare e informare#

Infine, potresti dover conoscere alcune raccomandazioni in materia di usabilità. Decidere se seguirle spetta a te, ma la scelta deve essere consapevole.

Il contrasto cromatico è un ottimo esempio. Dovresti decidere se i contrasti rispettano le raccomandazioni AA o AAA delle WCAG, in base al tuo pubblico di riferimento. Possiamo evidenziare le aree problematiche, fornire indicazioni e indirizzarti verso materiali formativi sull'argomento.

La dimensione del carattere è un altro esempio. La raccomandazione minima di 16 px può essere rispettata o meno, in base allo scopo dell’applicazione che stai realizzando. Tuttavia, la piattaforma evidenzierà le implicazioni delle tue azioni, così potrai prendere una decisione consapevole.

Lo strumento mostra un messaggio informativo sulla dimensione standard del carattere.

Stiamo ancora muovendo i primi passi in questa direzione, ma siamo convinti che sia quella giusta per il nostro prodotto. Crediamo che Playground debba essere uno strumento di sviluppo al servizio dell’utente, con conseguenze dirette per te, in quanto cliente, e benefici indiretti per i tuoi utenti. Perché, in fin dei conti, anche i tuoi utenti sono nostri utenti.