L’estetica del Web

È nella natura del web essere flessibile e dovrebbe essere nostro compito come designer e sviluppatori adottare questa flessibilità e produrre pagine che, essendo flessibili, siano accessibili a tutti.

L’articolo prosegue sotto

L’articolo prosegue sotto

— John Allsopp, The Dao of Web Design

Dodici anni fa, John Allsopp ci chiese di adottare la natura flessibile del web. Non l’abbiamo ascoltato.

Sebbene il movimento degli standard web che ne è seguito abbia sostenuto la separazione tra presentazione e contenuto, un requisito essenziale per l’adaptive design, questo si è manifestato solamente nel codice. I div con proprietà float hanno sostituito le celle delle tabelle, ma i layout sono rimasti governati dalle convenzioni inflessibili della stampa.

Oggi, con tutti i device che possono connettersi a internet, è diventato più facile, praticamente necessario, accettare la natura flessibile del web. Il responsive web design è una best practice emergente e i nostri layout cominciano ad essere più flessibili, ma, ancora una volta, l’innovazione è focalizzata nelle implementazioni tecniche, mentre si ignora l’estetica visuale.

Per dirla in un altro modo, stiamo adottando il “responsive” ma trascurando la seconda parte, il “design”. Stiamo sostituendo i div a larghezza fissa con quelli fluidi. Sfruttiamo questo periodo di assestamento in termini di tool e di procedure per cercare un’estetica che sia più adatta al web in sé e per sé.

Il materiale del web#section1

Per progettare in maniera corretta per un mezzo di comunicazione, dobbiamo prima capirlo. Mi piace pensare al web come ad una specie di materiale, con caratteristiche uniche da cui possiamo trarre vantaggio e con dei limiti che possiamo raggiungere prima che si rompa. Il web potrebbe quasi essere considerato come un composto, costituito da HTTP (il “come”), dagli URL (il “dove”) e dall’HTML (il “cosa”). Tralasciate uno di questi tre ingredienti e non state più creando il web.

È questa combinazione di protocolli e convenzioni che aiuta il web a raggiungere quello che Sir Tim Berners-Lee definisce come il suo “principio di design primario”: l’universalità.

Dovrebbe essere accessibile da qualunque tipo di hardware che si può connettere a internet: fermo o mobile, con un piccolo schermo o con uno grande.

L’universalità è così propria di questo mezzo di comunicazione che si potrebbe affermare che il web è responsive di default. Il “responsive” non è tanto una tecnica o un procedimento, quanto una caratteristica fondamentale della piattaforma che noi minacciamo con ogni riga di CSS e JavaScript che gli sovrapponiamo. Inoltre, l’universalità trascende il design visuale: i siti web devono essere semplici da usare sia quando vengono visualizzati come solo testo sia quando vengono letti ad alta voce.

Questa natura e queste caratteristiche dovrebbero permeare ogni aspetto del nostro design. Quindi, come dovrebbe cambiare l’estetica prevalente del web se progettassimo con la sua natura universale in mente?

Il mezzo è il messaggio#section2

Come il web, la televisione è il mezzo in cui i device che vi accedono differiscono tra loro in dimensione, risoluzione, rapporto di aspetto (aspect ratio) e frequenza di refresh.

Questa cosa era particolarmente evidente negli anni ’70 e ’80. Sebbene i programmi venissero registrati a colori, le emittenti dovevano ancora considerare il gran numero di persone che possedevano delle tv in bianco e nero. La grafica sugli schermi doveva funzionare su entrambe i tipi di monitor, quindi i designer utilizzavano delle forme e dei colori con grande contrasto. Ad esempio, il logo della BBC1 utilizzava un globo giallo (in seguito verde brillante) che ruotava su un campo blu scuro. Il design risultante era appariscente, ma funzionava.

I loghi di BBC1 del 1974 e del 1981

La televisione sta affrontando un altro periodo di transizione, questa volta verso un formato “widescreen” ad alta definizione. Dal momento che molti spettatori possiedono ancora delle televisioni 4:3 a definizione standard, i designer devono ancora scendere a compromessi e lavorare all’interno della “zona sicura” per essere sicuri che la grafica non venga tagliata troppo sulle TV più vecchie. Come risultato, la grafica sulle televisioni widescreen tende a stare nel mezzo dello schermo, impossibilitata ad usare l’intera larghezza.

L’estetica prevalente della televisione continuerà a cambiare, ma rimarrà governata dai progressi delle tecnologie e della comprensione dei designer dei suoi limiti.

Tutto ciò che è vecchio è ancora nuovo#section3

Prima dei “killer websites” e del desiderio di produrre layout simili alla stampa, quando l’ampiezza di banda era limitata e i piccoli monitor potevano mostrare solo 256 colori, la grafica a pixel era considerata de rigueur, un obbligo: i layout erano semplici e mirati.

Nel 1995, Hotwired utilizzò solo sedici colori. La navigazione sulla homepage era composta da poco più di sei GIF a quattro colori, da 1kb, ciascuna rappresentante un argomento. Il layout era composto solo da quelle immagini, centrate:

Hotwired, nel 1995 circa.

Circondati da display ad alta risoluzione e da banda illimitata, è facile dimenticare che esistono ancora vincoli simili. Sebbene i device stiano diventando sempre più potenti e con numerose feature, si continuano a produrre dispositivi meno capaci: ad esempio, il Kindle di Amazon è un dispositivo molto diffuso, tuttavia, la maggior parte degli e-reader della linea Kindle ha la connessione cellulare e un display monocromatico E Ink.

Comprendere i limiti#section4

Muovendoci verso gli adaptive layout, abbiamo incontrato dei nuovi limiti: le immagini bitmap non si adeguano né alla dimensione della viewport né alla banda disponibile.

Questa non è una mancanza del web: il fatto di poter inserire diversi tipi di media in una pagina web è una feature utile, ma non tutti i formati condividono le caratteristiche del web. C’è l’enorme opportunità di sviluppare un formato bitmap responsive e dubito che le immagini faranno veramente parte del web finché non esisterà una tale cosa. Nel frattempo, la domanda rimane: come possiamo fare in modo che le immagini fotografiche estremamente dettagliate funzionino in un mezzo così flessibile?

Molte persone hanno cercato di rispondere a questa domanda con varie soluzioni tecniche. Poiché si è scoperto che gli hack complessi erano anche fragili, abbiamo concentrato i nostri sforzi nella direzione della definizione dei nuovi standard, dando maggiori consensi a quelli che individuano quando dovrebbero essere scaricate e mostrate immagini diverse a seconda dalle dimensione più adatta.

È nel regno dei vincoli che si alimenta la creatività. I designer devono ancora raggiungere i limiti di quello che è possibile. Nel cercare delle soluzioni di design a questo problema, potremmo creare un’estetica che sia più appropriata al mezzo e, forse, realizzare che il problema delle immagini responsive esiste solo perché le nostre convenzioni riguardanti il design affondano ancora le radici nella stampa.
Senza un periodo di sperimentazione e riflessione, temo che potremmo addirittura introdurre degli standard che vanno contro l’universalità del mezzo: praticamente gli elementi <font> del giorno d’oggi.

Progettare attorno al problema#section5

Fortunatamente, gli sviluppatori e i designer cominciano a fare questi esperimenti e trovano soluzioni che negano il bisogno di nuovi standard.

1. Ottimizzazione#section6

Piuttosto che generare immagini di dimensioni differenti e determinare quale mostrare, un’altra opzione è quella di mandare invece un’unica immagine altamente ottimizzata.

Il dConstruct Archive è un piccolo sito in cui le persone ascoltano gli interventi degli speaker delle precedenti edizioni della conferenza dConstruct. Qui, i dettagli di sfondo attorno al volto di ciascuno speaker sono stati sfuocati, generando immagini con minori artefatti di compressione e pertanto file di dimensioni ridotte. Questa tecnica funziona particolarmente bene con i ritratti, dal momento che gli esseri umani tendono a concentrarsi maggiormente sulle caratteristiche dei visi.

Immagine originale: 9kb. Immagine ottimizzata: 4kb

Sono stati presi in considerazione i display più piccolo e più grande per trovare quale dimensione usare. Possiamo già vedere un problema nelle attuali proposte per le immagini responsive. Se visitate questo sito, noterete che le viewport più grandi a volte mostrano le immagini più piccole, perché la dimensione dell’immagine richiesta è spesso dipendente dalla dimensione del blocco che la contiene, non della dimensione della viewport. Tuttavia la viewport è il valore che gli standard proposti vorrebbero farci sottoporre a query.

2. Alterare l’estetica#section7

Se le immagini con minori colori e maggiori livelli di compressione danno file di dimensioni minori, allora forse i nostri design dovrebbero rispecchiare questa cosa.

Con il tema “giocare con il futuro”, il sito della conferenza dConstruct 2012 ha usato un design altamente tipografico con immagini monocromatiche e aree di colore piatto. Questa decisione di design ha fatto sì che le immagini potessero essere davvero piccole, alcune addirittura usano appena otto colori:

Immagine originale: 14kb. Immagine ottimizzata: 11kb

Come abbiamo visto nell’esempio della televisione, i vincoli di un mezzo di comunicazione hanno impatto sui risultati estetici. In questo caso, le immagini con meno colori o con lo sfondo sfuocato (magari anche con artefatti di compressione evidenti) possono diventare una norma accettata sul web? Sicuramente la popolarità di servizi come Instagram (un prodotto nato esso stesso da vincoli) ha provato che la fotografia viene giudicata per il suo contenuto, non per la sua risoluzione.

3. Progressive enhancement#section8

Alterare l’estetica visuale per adattarsi ai bisogni del mezzo è il fine ideale, ma è improbabile che venga accettato da alcuni clienti. E, diciamocelo: non è sempre appropriato. Infatti, sembra che raramente ci poniamo la domanda di cosa sia appropriato. Valutando il nostro contenuto, possiamo decidere quante immagini sono davvero necessarie per convogliare un messaggio.

Piuttosto che aumentare la risoluzione delle immagini all’aumentare della dimensione di un sito, possiamo pensare invece di aumentarne il numero. Questo si collega molto bene con le idee del progressive enhancement: fornire un’esperienza di base che possa arricchirsi all’aumentare delle capacità del device.

Il sito mobile di BBC News è un ottimo esempio di progressive enhancement. Il codice sorgente HTML contiene solo due immagini: il logo della BBC e un’immagine per la storia principale. Tutti i dispositivi ricevono questo codice HTML e le pagine hanno un peso minimo di 28kb: quasi un’impresa in un mondo di siti web da 5Mb.

Quando vi si accede da dispositivi più potenti come gli smartphone più nuovi, i tablet e i computer desktop (quelli che possono “superare le aspettative“), viene visualizzata un’immagine per ogni storia. Queste immagini sono state giudicate come miglioramenti che sarebbe bello avere rispetto all’esperienza base e vengono richiesti condizionatamente dopo che la pagina base è stata caricata.

L’esperienza del sito mobile di BBC News

Il progressive enhancement fa parte della cassetta degli attrezzi degli sviluppatori da molto tempo, ma adesso dovrebbe apparire in tutto il processo di design. Pensando ai siti web meno in termini binari (desktop vs. mobile, IE6 vs. browser “moderni”), possiamo creare delle esperienze che si adattano ai diversi panorami del web.

Adattiamo le nostre assunzioni (non solo i nostri layout)#section9

Immaginate il design di un nuovo sito web. Vedete il layout contenuto tra header e footer, con la navigazione in alto e un’area di contenuto principale con accanto una sidebar?

Dobbiamo resettare queste assunzioni.

Piuttosto che cercare ispirazione dalla stampa, forse dovremmo guardare di più al software design. Le applicazioni desktop sono state spesso imitate sul web, particolarmente nel caso delle applicazioni di produttività e spesso i risultati sono intollerabili. Le interfacce di maggior successo combinano gli aspetti migliori delle applicazioni desktop con le interfacce native del web, pensiamo a Gmail piuttosto che a Yahoo! Mail.

Un ragionamento simile viene ora impiegato nelle applicazioni centrate sul contenuto, in gran parte grazie all’introduzione del Chrome Web Store nel 2010. Questa feature ha dato un marketplace in cui gli sviluppatori possono vendere e promuovere le app create utilizzando gli standard web e molti hanno creato delle applicazioni che danno un nuovo scopo al contenuto disponibile sul web.

Il fatto che queste app possano essere usate solo con Chrome è un requisito snervante e uno per cui valga la pena protestare. Ma, se guardiamo a queste app semplicemente da una prospettiva puramente visuale e le confrontiamo con le loro controparti costituite da siti web tradizionali, vedremo che una tela bianca senza assunzioni può fornire esperienze più applicabili al web.

Solo la notizia è adatta per la stampa#section10

Quando pensiamo a siti web ispirati dalla stampa, ci vengono subito in mente quelli dei giornali. Il sito del The New York Times era costruito su una griglia multi-colonna fissa, strapiena. Come molti siti contemporanei, il contenuto è soffocato dalla pubblicità, dalle widget per la condivisione e dai link correlati:

L’inadeguatezza di questo design diventa più lampante quando lo si confronta con la sua Chrome App (che grazie al cielo è accessibile in altri browser). Il contenuto ha un ruolo centrale, con un’interfaccia meno affollata e più focalizzata ed è perfino responsive, fino a un certo punto. Notate che ci sono anche meno immagini fotografiche, ad avvalorare l’idea che le immagini responsive potrebbero solo essere un problema quando i web designer cercano di replicare la stampa.

Siti Task-oriented#section11

Un altro sito che soffre di un layout altrettanto affollato è BBC Good Food:

Tuttavia, quando si visualizza la pagina di una ricetta nella sua Chrome app, vediamo di nuovo un design molto più ragionato e concentrato sull’utente: è molto più facile seguire una ricetta quando non si deve far scorrere la pagina.

Contenuto, non chrome#section12

Un esempio finale di questo trend lo si ha con Rdio. Con l’evolversi del servizio di musica in streaming, i suoi designer hanno cercate di mantenere consistenza tra il sito web e l’applicazione desktop. Queste interfacce una volta condividevano solo pochi componenti, adesso sono praticamente identiche. Questo approccio ha prodotto un design che si inserisce tra i due: non proprio un sito web ma nemmeno una applicazione desktop.

Come l’app Chrome del New York Times e di BBC Good Food, questo spostamento verso un’interfaccia più simile a una app è risultata in una concentrazione maggiore sul contenuto (in questo caso, sulle copertine degli album), su un layout più fluido e su una navigazione meno intrusiva.

Per alcuni versi, la nuova interfaccia condivide delle qualità con il nuovo linguaggio di design “Metro” di Microsoft, che possiamo trovare sui Windows Phone e in Windows 8. Quando considererete che i principi di design dietro Metro includono “Pulito, Leggero, Aperto e Veloce”, “Contenuto, non chrome” e “Essere genuinamente digitali”, sarà difficile argomentare che questi valori non dovrebbero applicarsi allo stesso modo alle interfacce web.

Ovviamente, uno dei motivi per cui queste app possono essere trattate in maniera diversa rispetto ai tradizionali siti web è l’assenza di pubblicità, un vincolo non proprio del web, ma dei modelli di business che vi si sono creati. La pubblicità online sta lentamente andando verso una lunga e dolorosa morte: le pubblicità diventano sempre più grandi e più fastidiose, mentre i servizi che le rimuovono, come AdBlock, Instapaper e Readability stanno guadagnando sempre più popolarità. Tuttavia, senza dei modelli di business sicuri che possano rimpiazzarla, la pubblicità sarà con noi ancora per qualche anno.

Tuttavia, questo non dovrebbe fermarci dall’imparare dai design ispirati da queste app. Se non altro, sottolineano delle possibilità di layout alternativi e come possono essere i servizi auspicabili quando viene data maggior importanza al contenuto.

Il viaggio continua#section13

Mentre ci affacciamo alla terza decade dell’esistenza del web, dovremmo avere un’idea di quello che funziona e di quello che non funziona. Dovremmo avere sufficiente fiducia nel scegliere da quali aspetti degli altri media e delle altre piattaforme possiamo trarre ispirazione e quali invece ignorare. Dovremmo essere ispirati dalle convenzioni degli altri media ma smettere di esserne governati.

Con l’universalità come principio guida, possiamo impiantare approcci come il progressive enhancement per tutto il nostro processo di design. In fin dei conti, tutto sul web deve poter “degradare” a semplice testo (le immagini richiedono il testo alternativo, i video richiedono le trascrizioni), pertanto l’editor di testo potrebbe diventare l’app più potente nella cassetta degli attrezzi del designer.

Man mano che il web matura, dovremmo riconoscere ed adattare i suoi vincoli e l’estetica che ne può derivare. Quando lo faremo, potremmo scoprire che la vera estetica del web potrebbe non essere affatto visuale.

Illustrazioni: {carlok}