È in arrivo Spectrum 2: la nostra vision per la progettazione delle esperienze Adobe di domani

Un’anteprima dell’aggiornamento che rivoluzionerà il sistema di progettazione Adobe

Immaginate di progettare una casa. Probabilmente il primo passo sarebbe disegnarla. Ma per trasformare quello schizzo in un edificio sarebbe necessario il contributo di vari professionisti (architetti, ingegneri e costruttori) e bisognerebbe pianificare, collaborare e dedicare tempo a ciascuna delle figure coinvolte.

Il team dovrebbe poi adeguare il progetto a fattori quali la composizione del terreno, il paesaggio circostante, i materiali, le caratteristiche fisiche e climatiche e il budget. Si susseguirebbero varie fasi di correzione. Inoltre, la struttura finale (ovvero la realizzazione del progetto collettivo) continuerebbe nel tempo a cambiare per effetto dei vincoli imposti dall’ambiente, e a richiedere riparazioni e modifiche.

Del disegno iniziale non resterebbe che un ricordo lontano.

Lo stesso vale per la progettazione di software. Ma poiché le bozze dei prodotti digitali vengono visualizzate sulla stessa superficie dei prodotti veri e propri (e con una fedeltà pari se non superiore), in questo caso lo scostamento può sembrare molto minore di quanto non sia in realtà. Ritroviamo gli stessi limiti e compromessi a cui si deve far fronte nella progettazione di una casa, oltre che la medesima necessità di avere una sinergia tra aree di competenza diverse.

Immaginiamo ora di non voler realizzare solo un prodotto ma tanti, e di non avere qualche decina di collaboratori ma migliaia, se non decine di migliaia. Senza una base univoca di principi, componenti e grafiche si potrebbe finire per duplicare il lavoro e ottenere una user experience frammentaria. Anche se si riuscisse, in qualche modo, a dare corpo a un’esperienza coesa e di buon livello, ogni aggiornamento successivo (perché ci saranno degli aggiornamenti) richiederebbe uno sforzo improbo di pianificazione e coordinamento (con i relativi costi).

Qui entrano in gioco i sistemi di progettazione, che offrono la vision di base su cui costruire i principi, i componenti e le grafiche di cui abbiamo bisogno. Questi elementi sono i “mattoni” che designer e ingegneri utilizzano per creare esperienze coerenti su vasta scala, in quanto consentono di colmare il divario tra l’idea iniziale e la realizzazione, di stabilire un linguaggio comune tra le varie discipline e di tracciare la via da seguire per sincronizzare gli aggiornamenti futuri tra superfici e modelli diversi.

Negli ultimi anni Adobe Design ha elaborato un massiccio aggiornamento di Spectrum, il nostro sistema di progettazione. Questo progetto si è via via trasformato in Spectrum 2, un ampio aggiornamento degli elementi fondanti delle esperienze Adobe e una bussola da seguire negli anni (e per le modifiche) che ci attendono.

Da dove è partito Spectrum e perché lo stiamo aggiornando

Spectrum è il sistema di progettazione che Adobe ha introdotto più di dieci anni fa. Dalla sua prima implementazione sui nostri prodotti e sulle nostre esperienze sono cambiate molte cose. Nel 2013 non si usava ancora l’espressione “sistemi di progettazione” per parlare delle interfacce utente unitarie che troviamo dietro un software. Google non aveva ancora lanciato il suo sistema Material Design. Apple puntava ancora pesantemente sullo scheumorfismo. Le esperienze digitali non erano nemmeno la brutta copia di quelle attuali.

Come si presentavano i siti Adobe, Apple e Airbnb nel 2013.

Ma un piccolo team di Adobe aveva già iniziato a immaginare il futuro dei nostri prodotti. E se creassimo una specie di linguaggio in grado di rendere omogeneo il nostro portafoglio prodotti? Quel portafoglio aveva appena subito modifiche sostanziali, in primis il passaggio da Creative Suite a Creative Cloud. I dispositivi mobili stavano raggiungendo la potenza necessaria per supportare i nostri prodotti e, finalmente, realizzare i nostri strumenti in ambiente web non era più un’utopia. Che futuro ci attendeva? Ci sono voluti anni di duro lavoro e la collaborazione e tenacia di migliaia di persone, ma alla fine Spectrum è approdato nella nostra offerta di prodotti. Nell’ultimo decennio siamo cresciuti, abbiamo realizzato iterazioni e abbiamo imparato. E anche tanto.

In questi anni sono nati e scomparsi dei visual trend, i sistemi di progettazione sono passati da nicchia emergente a pilastro del design di prodotto e il livello di qualità atteso dall’utente per le esperienze digitali è ora più alto che mai.

L’evoluzione di Adobe Lightroom dal 2013 al 2023 con Spectrum (dall’alto): Lightroom 5 (2013), primi esperimenti con Spectrum in Lightroom, Lightroom oggi.

Anche in Adobe sono cambiate molte cose. Creative Cloud si è arricchito di nuovi strumenti e ha raggiunto più piattaforme e superfici; sono stati introdotti e ampliati i prodotti per il marketing aziendale del mondo Experience Cloud; anche Document Cloud è cresciuto e ha reso Acrobat più moderno; infine, abbiamo introdotto Adobe Express. Alcune persone passano tutta la giornata sui nostri strumenti, mentre altre li usano solo qualche volta per progetti di lavoro o per svago. Serviamo un pubblico decisamente più vasto rispetto a dieci anni fa. Adobe si è evoluta e i nostri sistemi di progettazione dovevano fare altrettanto.

Alla fine del 2021 abbiamo iniziato ad abbozzare il futuro di Spectrum. Non si trattava di un’impresa semplice: attualmente il portafoglio prodotti Adobe conta oltre 100 applicazioni uniche scritte in decine di linguaggi, disponibili su tutte le principali piattaforme (web, desktop, mobile e perfino realtà mista) e implementate in tantissime combinazioni di modelli di ingegneria. Un ecosistema vasto e complesso in cui sarebbero serviti anni per apportare cambiamenti generalizzati: una sfida emozionante che eravamo più che pronti ad accettare.

Dettare la vision di Spectrum 2

Il team di Adobe delle sessioni di brainstorming contava oltre 100 partecipanti, tra cui professionisti con le idee ben chiare e con competenze in ogni possibile ambito della progettazione: c’erano designer, content strategist, ingegneri, prototipatori, ricercatori, esperti di accessibilità e colleghi del team Product Equity.

Dopo le prime sessioni ci siamo divisi in gruppi più piccoli per concentrarci meglio su temi specifici come iconografia, tipografia, colori, brand, illustrazioni, accessibilità, product equity, personalizzazione, visualizzazione dei dati e tutti gli altri elementi che volevamo fossero rappresentati nel futuro di Spectrum. Quando i team hanno presentato il proprio lavoro, sono emersi punti di vista condivisi su quelli che erano gli obiettivi per Spectrum 2:

1. Tutte le esperienze dovevano far sentire l’utente “a casa”, a prescindere da dove si trovasse questa “casa”.
2. Tutte le esperienze dovevano essere accessibili e inclusive.
3. Tutte le esperienze non dovevano essere soltanto funzionali, ma anche piene di allegria.

Definita la nostra vision, eravamo pronti per iniziare a costruire la nuova fase di Spectrum.

Sentirsi a casa

Dal momento che i prodotti Adobe coprono diverse piattaforme (tra cui OSX, Windows, iOS, Android e il web), abbiamo dovuto riflettere a lungo per trovare il giusto equilibrio tra la coerenza cross-platform (grazie a cui gli utenti possono familiarizzare con uno strumento su una piattaforma e poi utilizzarlo su un’altra) e l’aderenza alle convenzioni di ogni piattaforma. All’epoca della prima progettazione di Spectrum, le piattaforme mobile vivevano una rapida evoluzione e la user experience delle varie app cambiava enormemente da un sistema operativo all’altro, quindi all’inizio abbiamo preferito rendere Spectrum il più coerente possibile su tutte le piattaforme. Oggi, invece, ciascuna piattaforma ha convenzioni radicate a cui desideriamo adeguarci in modo più puntuale, dunque Spectrum 2 deve offrire ogni volta una variante specifica.

Spectrum 2 seguirà le convenzioni proprie di ogni piattaforma, dal mondo mobile (in alto) alla realtà mista (in basso).

Ci siamo resi conto, inoltre, che ogni prodotto Adobe è unico e pertanto Spectrum non avrebbe potuto essere una soluzione passe-partout per Creative Cloud, Document Cloud, Experience Cloud e Adobe Express. Al contrario, volevamo mettere ogni esperto delle varie aree di prodotto aziendali in condizione di prendere le decisioni che meglio si adeguavano alla propria base di clienti unica. Spectrum 2 avrebbe avuto una flessibilità in più direzioni per andare incontro a quelle esigenze, aprendo nuove strade ai designer di prodotto per l’implementazione del sistema negli strumenti di loro competenza.

Inclusivo e accessibile

Spectrum 2 doveva soddisfare elevati standard di accessibilità, cosicché gli strumenti Adobe fossero fruibili dal più ampio numero di persone possibile. Per il web, le Linee guida per l’accessibilità dei contenuti web (WCAG) rappresentano il punto di partenza definitivo. Adobe dispone di un intero team dedicato a questo progetto (abbiamo anche contribuito alle linee guida). Un’accessibilità di successo comporta vari aspetti: adeguati rapporti di contrasto del testo e altri controlli e contenitori relativi a sfondi, tag di accessibilità, controlli da tastiera, stati di messa a fuoco e altri dettagli pratici di esecuzione.

Il raggiungimento dei requisiti di accessibilità fondamentali è stato un ottimo punto di partenza, ma vogliamo andare oltre. Ogni persona è diversa, perciò vogliamo che i futuri prodotti Adobe si adattino alle esigenze e ai gusti personali. Tra gli aspetti che abbiamo evidenziato, ci sono:

• Contrasto dinamico e luminosità. Utilizzando palette adattive, siamo in grado di generare colori accessibili in tempo reale, consentendo agli utenti di scegliere l’aspetto della propria interfaccia. A volte le persone lavorano in un ambiente luminoso, altre al buio. Talvolta è necessaria la massima densità, ma gli occhi sono spesso stanchi. Le interfacce Adobe dovrebbero soddisfare tutte queste esigenze.
• Più colori accessibili. Abbiamo pensato a lungo a come ovviare al meglio alle varie carenze della visione dei colori, e di conseguenza abbiamo razionalizzato le nostre palette di colori. Abbiamo anche rivoluzionato i colori utilizzati per la visualizzazione dei dati, tenendo conto di altri fattori come il “conflitto tra nomi di colori”, che si verifica quando due o più tonalità rischiano di essere definite allo stesso modo (per esempio: pesca, arancio e salmone). La sfida si moltiplica se consideriamo le sfumature linguistiche.
• Gerarchia dell’attenzione. Per semplificare l’analisi delle esperienze create in Spectrum 2, abbiamo rimosso molti colori di evidenziazione superflui nei controlli comuni, riservandoli ai momenti di maggiore attenzione e azione. Abbiamo creato una separazione tra l’area di navigazione e quella di contenuto, e abbiamo aggiunto profondità ed elevazione. Abbiamo utilizzato ogni strumento a nostra disposizione per creare una gerarchia più consapevole, perché se tutto è importante, niente è indispensabile.

Il contrasto dinamico, la luminosità e la densità delle informazioni di Spectrum 2 soddisferanno le vostre esigenze personali.

I nostri sforzi si integrano con il reparto Product Equity di Adobe Design, che collabora inoltre con team di progettazione, di prodotto e di ingegneri per garantire che ogni persona, a prescindere dalle diversità fisiologiche, possa accedere e sfruttare tutta la potenza dei nostri prodotti, senza pregiudizi, danni o limitazioni.

Funzionale e allegro

La prima versione di Spectrum è stata concepita come un prodotto professionale. La nostra logica era semplice: Adobe produce strumenti professionali con cui le persone svolgono il proprio lavoro. Abbiamo pensato che le creazioni e i contenuti degli utenti dovessero essere al centro dell’attenzione, per cui le nostre prime decisioni (fortemente ispirate dal designer industriale Dieter Rams) avrebbero dovuto rendere Spectrum “il più minimal possibile”, una linea di pensiero codificata dai principi fondamentali di Spectrum.

Il nostro sistema di grigi è stato ideato facendo un passo indietro. I contenitori e le icone erano nitidi, vividi, con un aspetto molto professionale. Anche se in molti contesti questo approccio funzionava, non era in grado di supportare agilmente schermate complesse con più livelli di gerarchia, perché i grigi cominciavano a sembrare sbiaditi, e gli utenti potevano faticare a capire dove puntare l’attenzione. E per chi si affacciava alle nostre applicazioni per la prima volta, questo approccio brutalista è stato tutt’altro che confortevole.

I grigi tenui di Spectrum possono sembrare sbiaditi.

Nel 2019 abbiamo iniziato a lavorare su quello che sarebbe diventato Adobe Express. Sapevamo che Spectrum non sarebbe stato adatto a questo nuovo contesto (uno strumento creativo pensato per un vasto pubblico di principianti e professionisti); così abbiamo realizzato un nuovo tema dell’interfaccia utente in collaborazione con il team di progettazione di Express. Spectrum per Adobe Express era più audace e leggero, caratterizzato da linee più tondeggianti. Le icone e la tipografia erano più familiari, i tratti un po’ più marcati, i colori più brillanti e, in generale, era molto più accessibile. Di base era ancora Spectrum, ma tante piccole migliorie hanno portato a un enorme cambiamento.

Il lavoro che avevamo svolto per Adobe Express è servito come punto di partenza per Spectrum 2.

Durante i nostri brainstorming su Spectrum 2 è emersa l’opportunità di rendere le Esperienze Adobe più espressive e accessibili (il lavoro che avevamo svolto per Express ci aveva già instradato in questa direzione). Al tempo stesso ci stavamo concentrando maggiormente sui flussi di lavoro tra prodotti differenti, per cui avremmo avuto bisogno di un linguaggio visivo unificato per tutti i nostri prodotti. Era chiaro che avremmo dovuto combinare il linguaggio di progettazione di base di Spectrum con Spectrum per Adobe Express, ed è così che il tema di Express ci è servito come punto di partenza per Spectrum 2.

Partendo dalla nostra ampia visione per Spectrum 2 ed esaminando Spectrum per Adobe Express, abbiamo iniziato a concentrarci sui componenti chiave del sistema:

Icone. Dopo aver esplorato un’ampia gamma di idee, il nostro eccezionale team di progettazione delle icone ha optato per uno stile che coniugasse la razionalità brillante delle icone originali di Spectrum con lo stile più frizzante di Adobe Express. I tratti sono stati modificati affinché fossero in piena armonia con il nostro carattere tipografico distintivo: Adobe Clean.

Le icone di Spectrum (a sinistra) erano razionali, classiche, serie e uniche. Le icone di Adobe Express (a destra) sono semplici, di tendenza, allegre e familiari. Le icone di Spectrum 2 (al centro) sono pulite, familiari e versatili.

Le icone di Spectrum 2 si sposano perfettamente con Adobe Clean (il nostro carattere tipografico distintivo).

Colore. Abbiamo corretto la nostra palette di grigi per aumentare i contrasti e reinventato il nostro sistema di colori utilizzando i colori di Adobe e gettando le basi per integrare più organicamente il nostro brand nell’esperienza del prodotto.

Colori di Spectrum 2 (dall’alto): Orange, Celery, Cyan, Indigo, Fuchsia, Magenta.

Illustrazioni. Le illustrazioni assumono varie forme nelle esperienze Adobe. Spaziano da semplici linee a stili editoriali più solidi e colorati, in modo da richiamare le tonalità del brand del prodotto.

Stili di illustrazione di Spectrum 2 (da sinistra): Lineare, riempito senza sfondo, riempito con sfondo.

Forme. Il team di progettazione del brand ha sviluppato un nuovo set di forme geometriche che possono essere combinate in infiniti modi per creare illustrazioni, banner e altre risorse. L’allineamento del sistema cromatico di Spectrum 2 con quello del brand crea armonia tra le interfacce dei vari prodotti.

Il design di Spectrum 2 per la pagina "I tuoi file" di Creative Cloud presenta una gerarchia visiva più chiara e un aspetto più leggero, luminoso, espressivo e accessibile.

Per Adobe Photoshop sul web, gli angoli arrotondati dei pannelli e delle barre degli strumenti sono abbinati a icone più rotonde e giocose, ma sempre nitide, pulite e facilmente riconoscibili. Accenni al colore del marchio aiutano a orientarsi per gli utenti che passano da un'applicazione all'altra.

Il design di Spectrum 2 per la home page di Adobe Acrobat sul web presenta un sistema di illustrazioni flessibile e adattabile che comprende icone, illustrazioni spot e banner. Inoltre, adotta un approccio modulare per raggruppare le parti dell'interfaccia e conferisce un senso di profondità attraverso colori stratificati e ombre sottili.

Il design visivo Spectrum 2 per il visualizzatore di Adobe Acrobat sul Web offre un maggiore contrasto e leggibilità per le icone, il testo e i componenti (come pulsanti e input di testo).

Nel design di Spectrum 2 per Adobe Journey Optimizer, un maggiore contrasto e una navigazione semplificata portano l'attenzione su ciò che è più importante nella pagina e rendono l'esperienza dell'utente complessa più facile da analizzare.

Dare vita al nostro progetto originale di Spectrum 2 è stata un’impresa, ma questo è solo l’inizio: come ogni sistema di progettazione, Spectrum è in continua evoluzione. Al momento stiamo lavorando sodo sulle direzioni future dei nostri prodotti desktop e mobile, affinché ciascuno abbia la propria versione di Spectrum. Per uno sguardo ravvicinato al sistema e alle sue potenzialità, vi invitiamo a consultare il sito di Spectrum 2.

Spectrum 2 è stato realizzato dalla community e da decine di persone che ci hanno messo mano direttamente (e continueranno a farlo), ma vorrei ringraziare il team principale che ha lavorato al mio fianco, che ha guidato questo lavoro con lungimiranza, perseveranza e passione, contribuendo a trasformare Spectrum 2 in realtà: Progettazione: Lynn Hao, PJ Buddhari, Jess Sattell, Matt Knorr, Isabelle Hamlin, Lindsay Browne, Marco Mueller e Alexis Gallisá. Ingegnerizzazione: Garth Braithwaite e Patrick Fulton. Operazioni: Angelie Herreria-Tagle, Deanna Washington e Veda Rosier.