Come Facebook ha cambiato il web design

Pregi, difetti e innovazioni del social network più popolare al mondo. Una rapida analisi di come Facebook ha cambiato il mondo del web design.

SHARE

Come Facebook ha cambiato il web design

E' inutile negarlo, ormai siamo tutti un po' Facebook-dipendenti, chi più chi meno; ci passiamo gran parte della nostra giornata, siamo sempre lì a sperare in un like o in una notifica, a condividere l'ultima foto scattata o l'ultimo link letto, ed è la prima app che installiamo sullo smartphone appena comprato.
1 utente su 13 nel mondo ha un account Facebook, 900 milioni di utenti attivi, 300 milioni di foto caricate giornalmente, 3,2 miliardi di like e commenti, 488 milioni di utenti che usano Facebook su dispositivi mobile. Numeri da capogiro. Praticamente gli unici superstiti sono i digital-divisi, i tecnofobi, e i nerd che lo ritengono meno eccitante di Linux e della riga di comando.
Qualcuno ha anche studiato i sintomi della dipendenza da Facebook e, come prevedibile, i risultati sono un po' inquietanti.

La deformazione professionale ti porta però a guardare il tutto da un altro punto di vista. E' un po' come quando studi marketing o comunicazione pubblicitaria all'università: dopo aver esplorato i segreti della piramide di Maslow capisci che l'idiota che blatera nella pubblicità dell'acqua, gli spot odiosi delle compagnie telefoniche e perfino l'adolescente isterica dello spot Ikea che ti fa venire voglia di spaccare a colpi di accetta tutto il mobilio di casa hanno un loro perché.
Si può discutere sull'utilità di Facebook, sulla sua influenza sui comportamenti umani e sulle relazioni sociali, ma è innegabile che la sua diffusione abbia influito molto sul web design e sulla progettazione delle interfacce moderne, a volte in modo positivo, a volte meno. Non è sempre stato così (le prime versioni di Facebook erano raccapriccianti), ma man mano che il social network cresceva è stato fatto molto in termini di perfezionamento dell'interfaccia; per un web designer vale la pena evidenziare quello che di buono è stato fatto dal ricchissimo ventottenne riccioluto e dal suo staff di tecnici.

« Il web è a un punto di svolta molto importante. Fino a poco tempo fa, la normalità sul web era che la maggioranza delle cose non erano sociali e la maggior parte delle persone non usava la propria identità reale. Stiamo costruendo un nuovo web in cui alla base vi è il "sociale". »

Mark ZuckerbergCEO & Founder di Facebook

Pulizia del design
Il boom di Facebook è arrivato dopo quella colossale schifezza di MySpace, che probabilmente è stato il peggiore parto dell'informatica dell'ultimo ventennio dopo WordArt e Internet Explorer, quindi tutto sommato fare di meglio è stato abbastanza facile. C'è stato uno stacco netto tra le interfacce complicatissime e strapiene di funzioni (per lo più inutili) e la tendenza a ripulire tutto, eliminando quello che non serve e nascondendo quello che viene usato raramente. Tendenza che oggi è abbastanza diffusa nelle interfacce dei CMS e dei vari applicativi, ma che fino a qualche anno fa era pura fantascienza. Diciamo che Facebook ha cercato di applicare al web quello che Apple ha fatto con i propri prodotti e con le interfacce dei sistemi operativi, secondo il teorema dell'oggetto "pratico da usare e bello da vedere".

Consistenza
E' la prima regola del web design, e al tempo stesso la più ignorata. Palette di colori scelte con criterio e utilizzate su tutto il sito, uso dei font preciso e costante, ripetizione sistematica dei principali elementi del design. Anche qui, Apple docet.

Attenzione al dettaglio
Piaccia o no, l'interfaccia di Facebook è quasi tutta "pixel-perfect": icone, bottoni, bordi, margini, padding, tutto è curato nei minimi dettagli. E' stato fatto un gran lavoro anche sulle modalità di interazione e comunicazione con l'utente; con un uso massiccio delle modal boxes, anche gli errori ajax e i popup di conferma - benché rimangano irritanti - sono diventati qualcosa di più accettabile per l'utente finale rispetto ai vecchi alert Javascript di non troppo tempo fa. Stessa cosa per le notifiche con dissolvenza in stile Growl, i tooltip visualizzati sul mouseover dei vari elementi, lo styling delle select box, e altro ancora.

Javascript e Ajax
Non li ha certo inventati Facebook, ma è stato uno dei primi ad utilizzarli in maniera massiva; non per creare inutili effettini di animazione (ricordate gli script di inizio 2000 che generavano l'effetto "twirl" sulle immagini o nevicate fuori stagione nel browser?), ma per migliorare l'esperienza d'uso dell'utente. Azioni più rapide, meno refresh e spostamenti di pagina, miglioramento del feedback, risparmio di banda, e molto altro. L'uso massiccio di Ajax è un'arma a doppio taglio, nel caso di Facebook ha nettamente migliorato la user experience, ma ha ucciso l'accessibilità. Se provate a disabilitare il Javascript sul vostro browser riuscirete a malapena a loggarvi e a scorrere la home page.
Promemoria: da usare con criterio.

HTML5 e CSS3
Mentre il W3C riflette da una decina d'anni sulla creazione dei nuovi standard e i web designer nostrani intavolano discussioni filosofiche (leggi: pipponi) sull'opportunità o meno di usare qualcosa che ancora standard non è e che potrebbe compromettere il supporto ai vecchi browser (IE6), Facebook ha fatto una scelta più rapida: li ha usati e basta.

Real-time web
Anche questa non è una novità di Facebook (se ne parla ormai da parecchi anni), ma grazie all'uso di Javascript e Ajax tutto può avvenire in tempo reale; un like, un commento, una notifica. Non servono più attese, refresh e cambi di pagina, se lasciate la home page aperta vedrete che i nuovi commenti ai post vengono caricati in tempo reale senza richiedere azioni dell'utente, addirittura anche le date dei post e degli aggiornamenti di stato vengono aggiornate in automatico.

Creazione di standard
Il boom di Facebook ha portato alla standardizzazione di alcuni elementi della sua interfaccia. La visualizzazione di foto e video in overlay ad esempio, un'assurdità fino a qualche anno fa e oggi presente sulla quasi totalità dei siti; l'uso delle modal boxes, dei dropdown menu, degli elementi a scomparsa. Sempre più spesso i clienti chiedono qualche funzionalità da sviluppare "in stile Facebook", e in questo ci vengono in aiuto la marea di script e framework che replicano con pochissimo sforzo elementi dell'interfaccia del social network (uno per tutti: l'ottimo Facebox per le modal boxes).

Un sito fatto da web designer
Il grafico medio italiano, che proviene dal cartaceo e non sa assolutamente nulla di web, a Palo Alto potrebbe al massimo aspirare ad un posto da fattorino. L'interfaccia di Facebook è stata evidentemente progettata da web designer: non ci sono bottoni 3D degli anni '90, ombreggiature ed effetti rilievo della stessa epoca, box-shadow di 10 cm, testi in Garamond o in Times New Roman. Per fortuna, aggiungerei.

Rottamazione dei vecchi browser
L'uso massiccio di Javascript ha incentivato la "selezione naturale" dei browser più obsoleti, vale a dire Internet Explorer. La fine del supporto a IE6, che fortunatamente oggi sopravvive in percentuali ridicole, e le pessime prestazioni di rendering ed esecuzione Javascript di IE7/8, hanno convinto sempre più utenti ad aggiornare o cambiare il proprio browser. Come dire: dove hanno fallito le campagne di aggiornamenti coatti del sistema operativo e gli anatemi dei guru del software libero, sono riusciti Facebook e l'innata propensione al cazzeggio degli utenti, che hanno preferito rischiare il terribile (!) cambio di browser piuttosto che perdere la possibilità di usare Facebook e spiare il profilo della propria vicina gnocca.
Una manna dal cielo per noi web designer.

Facebook è uguale per tutti
Uno dei più grandi errori che un web designer può commettere è quello di lasciare totale libertà di personalizzazione grafica ai propri iscritti. L'utente medio non ha nessuna competenza tecnica e tantomeno nessun gusto grafico, è come se mi mettessi in testa di comporre un concerto per clavicembalo o di curare un vivaio senza saper fare nessuna di queste due cose. Lasciargli totale libertà di azione è il modo migliore per uccidere la propria piattaforma (e perdere tempo a sistemare i casini che combinano gli utenti).
Se non applicherete questa regola, il risultato sarà identico a MySpace.

Il coraggio di cambiare
Mi rendo conto che in uno scenario informatico come quello italiano può suonare come una bestemmia.
Abbiamo siti che sopravvivono uguali da 10 anni ("perché se lo cambi l'utente non si ritrova"), che subiscono restyling leggerissimi per poi tornare indietro alla prima critica degli utenti, dove l'obiettivo primario è il supporto a IE5 (anno 1999) perché è installato sul pc del megadirettore.
Nel caso di Facebook, nonostante i vari restyling creino scompensi, crisi di panico e tentativi di suicidio in molti utenti allergici al cambiamento, in media ogni anno e mezzo viene sfornato un redesign dell'interfaccia. Certo, non tutte le scelte fatte sono riuscite, ma quantomeno c'è una volontà di evoluzione e di cambiamento che è quasi del tutto assente nel web design italiano.
Promemoria: Yes, we can.

Tutto rose e fiori?
No, anzi. Se dovessi scrivere un post sui difetti di Facebook probabilmente passerei i prossimi 2/3 mesi a scrivere, tra imperfezioni estetiche (chi ha detto barra della chat?), di usabilità (chi ha detto timeline?), e tecniche (chi ha detto API?).
In ogni caso, penso che valga la pena di riflettere su quelli che sono i lati positivi della user experience di Facebook e prenderne spunto per migliorare la qualità dei propri lavori; il rischio di sfornare un nuovo Volunia o Faceskin è sempre dietro l'angolo ;)

Hai trovato interessante questo post?

Condividilo sui Social, o contattami per farmi qualche domanda o discuterne insieme!
Oppure, se ti va, puoi offrirmi un caffè o una pizza! :)