Image for post
Image for post

Crea Design System, non Pagine.

Nicolas Ciotti
Mar 28, 2018 · 7 min read

In questo momento, tutta la nostra industria sta affogando in un mare di dispositivi, dimensioni di finestre e ambienti online. Un prodotto digitale deve essere accessibile in modo ottimale su tutti i dispositivi, indipendentemente dalle dimensioni dello schermo e dal tipo di supporto.

Allora perché stiamo ancora progettando i nostri prodotti per “pagina” o per schermo ?!

Questo modo di pensare e comunicare tende a farci ragionare e progettare un prodotto nel modo errato. Dovremmo “pensare” i nostri prodotti indipendentemente dal contesto e dal supporto su cui lo visualizziamo.

Quante volte avete sentito dire una frase del genere?

"Vogliamo lanciare un sito di cinque pagine entro questo ottobre ..."

oppure avete presentato al cliente un lavoro dicendo:

“Questa è la homepage, questa la pagina dei contatti…”

Errore!

Parlando di “pagine” per un prodotto digitale si rischia di comunicare, al nostro interlocutore, un’interfaccia e un’esperienza utente incoerente e scadente.

Il concetto di pagine si addice più ad un contesto «limitato», come un libro o una rivista, che hanno dimensioni fisse e che non cambiano; ma questo collide con il mondo digitale, dove esistono tantissimi supporti.

Image for post
Image for post
Questi sono solo alcuni dei dispoditivi di cui dobbiamo preoccuparci. — Fonte: Atomic Design

In termini più concreti, ad esempio, un sito web responsive per essere mostrato in tutte le sue possibili visualizzazioni, non è rappresentabile in sole poche schermate. Necessiterebbe di un infinità di varianti, ma questo porterebbe via troppo tempo a chi progetta.

La metafora di pagina, fino ad ora, è servita allo scopo di aiutare gli utenti a familiarizzare con il web. Ma per costruire interfacce pensate per essere visualizzate su una moltitudine di dispositivi, è giunto il momento di andare oltre la “pagina”.


È tempo di cambiare pensiero.

Immaginiamo un sistema modulare, fatto di elementi che possono essere utilizzati e assemblati in diversi ambienti e interfacce, mantenendo una consistenza sia visiva che in termini di esperienza utente. — Immaginiamo un sistema di progettazione.


Design System.

Un Design System (o sistema di progettazione) è un set di regole in continua evoluzione che regola la composizione di un prodotto, ovvero una raccolta di componenti riutilizzabili, guidati da standard chiari, che possono essere assemblati insieme per creare un numero illimitato di applicazioni.

Un sistema di progettazione non è solo una raccolta delle risorse e dei componenti che si utilizzano per creare un prodotto digitale.

“Non comprende solo cosa progettiamo, ma anche perché oltre al design di un sistema è fondamentale creare un’eccezionale esperienza utente. Questo definendo e aderendo a standard.”

Image for post
Image for post
image by Jack Morgan for Duolingo

Ma perché dovrei creare un Design System? Quali sono i vantaggi?

Il Design System consente ai team di creare prodotti migliori, più velocemente e rendendo riutilizzabile il design, cioè scalabile. Questo è il valore primario di un Design System.

“I sistemi di progettazione rappresentano un enorme cambiamento nel panorama del design e dello sviluppo. Gli sviluppatori si muovono più velocemente, i designer non devono reinventare la ruota e, in definitiva, gli utenti hanno una migliore esperienza. “

Ma ci sono altri vantaggi che un sistema di progettazione può portare.

Linguaggio comune e condiviso.

Con l’aumentare del numero di persone che lavorano su un progetto, diventa sempre più facile che si verifichino interruzioni nelle comunicazioni. Non è raro che figure diverse diano nomi diversi allo stesso modulo e questo può portare a un linguaggio visivo frammentato.

Cosa significa “utility toolbar”?

Tutti capiscono cos’è un “touch slider hero”?

Per creare un allineamento all’interno dei team, deve esserci una fonte condivisa, un luogo dove fare riferimento a modelli e stili ufficiali.

Un design system è la fonte più accessibile per i team di prodotto. Permette di avere una visione globale di un prodotto, tenendo sotto controllo ogni singolo componente e processo, unisce i team di prodotto attorno a un linguaggio visivo comune, mantendo i membri allineati e sincronizzati.

Debito progettuale.

Con l’utilizzo di un design system, inoltre si abbatterà il debito progettuale, che è costituito da una sovrabbondanza di stili e convenzioni non riutilizzabili e incoerenti. Così manterrai basso il costo del progetto consentendoti comunque di far crescere ed evolvere la tua applicazione.

Costante progettazione e aggiornamento.

Molto spesso un artefatto statico diventerà quasi immediatamente obsoleto. Ecco perché aziende, come Atlassian, Salesforce, Airbnb o Google con il Material Design costruiscono un design system, che documenta tutti gli aspetti del prodotto, inclusi i componenti, le linee guida e le best practice di UX. Aggiornandolo in modo continuo.

“I sistemi di progettazione sono in continua evoluzione e anche il modo in cui condividi e incoraggi l’adozione di nuove iterazioni si evolverà lungo il cammino.”

I componenti standardizzati consentono inoltre ai designer di dedicare meno tempo allo stile e più tempo a sviluppare una migliore esperienza utente. Componenti standard utilizzati in modo coerente creano un’applicazione più prevedibile e facile da capire.

Usabilità migliore.

Un’interfaccia incoerente ostacola l’usabilità e genera una pessima esperienza utente. Quando creiamo innumerevoli stili unici per gli elementi dell’interfaccia, generiamo conflitto e aumentiamo anche il peso della nostra schermata, rallentandone il caricamento. Utilizzando un sistema di progettazione, puoi evitare questi conflitti creando una libreria di componenti.

Spesso ci si aspetta che i designer rompano con le convenzioni. Apple per prima incoraggia tutti a “pensare in modo diverso”, ma è necessario ricordare che un prodotto fa parte di un sistema più grande.

Qualsiasi prodotto è basato su convenzioni per l’utente, modelli di interazione coerenti che consentono di capire rapidamente come funzionano le cose, un modello che non dovrebbe essere infranto.

“Quando in un’app viene introdotto improvvisamente una nuova funzione per eliminare il contenuto, ma questa funziona in modo contrario a quello a cui si è abituati in tutte le altre app, spesso ci si sente frustrati. Questo è abbastanza per cercare alternative o addirittura eliminare l’app.”

Quando si progetta per piattaforme native, è necessario fare sempre riferimento alle linee guida del sistema operativo, che variano pattern di navigazione tra una piattaforma e l’altra, per ottenere il massimo in qualità e coerenza.

L’accessibilità può essere implementata a livello di componenti ottimizzati anche per persone con disabilità, connessioni Internet lente o vecchi dispositivi. Questa è una facile vittoria per l’usabilità.

Prototipazione rapida e iterazioni più veloci.

Lavorare con un design system consente di raggruppare flussi e interazioni rapidamente tanto quanto estrarre i mattoncini LEGO da un contenitore e creare costruzioni sempre diverse. Ciò consente di creare una quantità infinita di prototipi diversi tra loro.

Sia che si evolva lo stile dell’interfaccia o che si apportino cambiamenti di User Experience, l’utilizzo di un sistema di progettazione riduce lo sforzo. Ciò rende le iterazioni rapide e indolori, e le sperimentazioni molto più veloci.


Per concludere.

Un sistema di progettazione consente di concentrarsi separatamente sui componenti che compongono il sistema, scollegandoci dall’aspetto del layout, aiutandoci a non rimanere bloccati nei classici breakpoint dei dispositivi Apple e costringendoci a progettare la variazione di esperienze viewport contemporaneamente, non uno dopo l’altro.

Sia per testare le idee del sistema, sia perché un cliente potrebbe aver bisogno di aiuto per visualizzare come funzionerà il sistema, può capitare che emerga la necessità di dover produrre alcuni mock-up statici. Non è un problema, ma è necessario assicurarsi che considerino tutte le viewport dei dispositivi attualmente sul mercato.

“I componenti hanno sempre una visualizzazione ottimale, quindi i breakpoint dovrebbero essere basati su questa.”

Ma dobbiamo ricordare che i mock-up non sono il risultato di come verrà il nostro prodotto, ma sono un modo per mostrare il comportamento del sistema, come viene interpretato e visualizzato in quella particolare larghezza della finestra.


Una pratica metodologia che ci aiuta a creare in modo intuitivo un Design System è l’Atomic Design, che racconto nell’articolo di seguito.



Ringrazio Viola Sgarbi, Mario Bello e Arianna Marchetti per il loro aiuto.




Mi chiamo Nicolas Ciotti, sono un Digital & Interaction Designer.
Amo tutto ciò che ha a che fare con il mondo del digital design e ho un particolare interesse per la fotografia.

Seguimi su twitter e LinkedIn

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store