Costruzione e approccio al design system

Costruzione e approccio al design system

Francesco De Mento

Ministero dell'Istruzione dell'Università e della Ricerca Alta Formazione Artistica Musicale e Coreutica

Accademia di Belle Arti di Catania Dipartimento di progettazione e arti applicate DAPL06— Diploma Accademico di Primo Livello in Progettazione Artistica per l’impresa corso di Design della comunicazione visiva a.a. 2017/2018 (anno accademico del Terzo anno di Triennio) Candidato Francesco De Mento Relatore Ciro Esposito Progetto grafico Francesco De Mento Nessuna parte di questo elaborato può essere riprodotta o trasmessa in qualsiasi forma o con qualsiasi mezzo elettronico, meccanico o altro senza l’autorizzazione scritta dei proprietari dei diritti e dell’Istituzione.

Le immagini utilizzate rispondono alla pratica del fair use (Copyright Act, 17 U.C.S., 107) essendo finalizzate a scopo divulgativo e didattico come da Articolo 70 Legge sulla protezione del diritto d’autore (L. 22 aprile 1941, n.633).

Pubblicazione composta in Helvetica Neue disegnato nel 1983 da Edouard Hoffmann e Max Miedinger. © Copyright 2019 Accademia di Belle Arti di Catania Francesco De Mento www.abacatania.it

FRANCESCO DE MENTO

Costruzione e approccio al design system

Indice

Premessa

7

Capitolo 1.0 — Introduzione al design system Introduzione 1.1 Nascita e sviluppo 1.2 Scalabilità e system thinking Standard Componenti 1.3 Il valore aggiunto del design system Design Scalare Prototipazione veloce Usabilità e accessibilità

8 10 12 14 15 16 18 18 19 19

Capitolo 2.0 — Progettare un design system 2.1 Figure e competenze digitali 2.2 Modelli di gestione dei team di progettazione Modello solitario Modello centralizzato Modello federato 2.3 Raccolta dei feedback

20 22 26 26 27 29 32

Capitolo 3.0 — Il linguaggio visivo 3.1 Introduzione al linguaggio visivo 3.2 Il colore 3.3 La tipografia 3.4 Immagini e icone Forma visiva e movimento e suono 3.5 UI e UX: progettare per gli utenti

36 38 40 46 50 51 54

Capitolo 4.0 — Progetto e prototipazione 4.1 I software per la progettazione della UI

62 64

Sketch Figma Framer X Adobe XD Adobe Illustrator 4.2 I software per la progettazione della UX Carta e penna Draw.io Mockplus MarvelApp InVision Axure RP

65 66 67 70 71 72 72 73 73 74 75 75

Capitolo 5.0 — Esempi di design system 5.1 Google Material Design 5.2 Apple Human Interface Guidelines 5.3 Airbnb Design Language System

80 82 84 90 92 98 100

Conclusioni

109

Bibliografia e sitografia

110

6

Premessa L’innovazione tecnologica degli ultimi vent’anni, ha portato con sé un un carico di responsabilità non indifferente che ad oggi si scontrano con l’ampiezza e l’infinito numero di possibilità regalateci dall’ecosistema informatico, formatosi grazie alle rivoluzioni tecnologiche e digitali che ci hanno permesso lo studio, l’approfondimento e la messa in atto di alcune delle idee più innovative del ventunesimo secolo.

Sebbene sia cresciuta e maturata anche la metodologia di contatto tra i brand e i clienti, è sempre più tangibile anche la crescita e l’aumento esponenziale delle interazioni e delle possibilità che vengono messe a disposizione degli utenti a tal punto da trasformare l’universo interattivo in un’esperienza realistica e pragmatica. L’utente moderno passa con estrema facilità da un dispositivo ad un altro. Da una pagina web su desktop ad un’applicazione mobile, da uno smartphone ad una smart-TV o da un tablet allo smartwatch. Questi passaggi repentini necessitano di una fruibilità elevata dell’esperienza di navigazione.

Si rende a tal proposito necessaria l’istituzione e la creazione di nuove convenzioni all’interno di applicativi e software più strutturati. In soccorso di queste necessità interviene il design system.

Lo scopo finale di questo elaborato è quello di mostrare tutte le variabili sociali, comunicative e progettuali che intervengono nella creazione di questi sistemi di elaborazione analizzando singolarmente tutte le tipologie di dati progettuali che variano per complessità e funzioni, in base alla vastità del prodotto/servizio in considerazione.

7

Capitolo 1.0

Introduzione al design system Nascita, sviluppo ed evoluzione del design system moderno

Capitolo 1.0

Introduzione

1. La reputazione della marca, identifica quanto e come il nome di un prodotto o di un marchio è conosciuto e apprezzato sul web.

Le aziende produttrici e distributori di prodotti e servizi, hanno cominciato a sentire il bisogno di indossare un abito facilmente riconoscibile, chiaro ed espressivo (praticamente unico) che potesse diventare il primo attributo di identificazione all’interno di un’infrastruttura molto più complessa di un mercato cittadino o di un centro commerciale: internet.

Forti dell’accessibilità attuale di dispositivi atti alla navigazione web, all’uso e al consumo di prodotti e servizi digitali, diventa sempre più impellente il bisogno dei brand di costruirsi una propria presenza, istituire delle convenzioni ed avvicinarsi sempre il più possibile alle necessità, coprendo le mancanze identificate all’interno di questa struttura.

In soccorso dei brand, sono intervenute agenzie e personalità di spicco del mondo del design, della progettazione, geni dell’advertising e del marketing, tutti con un unico scopo: la riuscita e la concretizzazione di un idea.

Allo stato attuale, il lavoro dei soggetti elencati poc’anzi è stato enormemente facilitato dalla proliferazione di strumenti pluri-settoriali, costruiti con l’unico scopo di ampliare lo spettro delle possibilità messe a disposizione degli utenti, creatori e utilizzatori.

In quest’ottica, brand e servizi, oggi possono contare su un fortissimo engagement sviluppatosi grazie alla propagazione globale dei nuovi mezzi di comunicazione. Infatti, la trasformazione graduale dei (ormai) vecchi media nei più attuali e diffusi social network, rappresenta esattamente la fusione di tutto ciò che di più bello e funzionale era stato inventato negli anni precedenti all’avvento di internet. Giornali e magazine, radio e televisione, oggi confluiscono all’interno di questi grandi contenitori.

Vista e considerata quindi quest ampia diffusione, l’identità visiva di un marchio (più o meno conosciuto) si carica anche di una brand reputation1 non indifferente, attenta sempre alle metodologie di comunicazione, alle parole e ai contenuti.

In merito a queste argomentazioni, la diffusione e l’identificazione di un brand passano inequivocabilmente da un brand manual, ovvero un docu-

10

Introduzione al design system

mento che stabilisce determinate linee guida su tutti gli aspetti del brand o della compagnia di riferimento. Tale documento stabilirà delle vere e proprie regole per creare un univoca e facilmente identificabile presenza dell’immagine coordinata all’interno di un sistema. In un sistema più complesso, i punti di contatto digitali tra brand e cliente aumentano a dismisura, rendendo sempre più significativa la coerenza e uniformità tra i diversi canali e la moltitudine di dispositivi ai quali si affida l’utente. Per intervenire sulle mancanze che avrebbero potuto affliggere gli utenti, progettisti e sviluppatori hanno trovato il punto di contatto per unire Il design system è un insieme di regole e linee guida che aiutano a mantenere coerenza e continuità all’interno di un ecosistema digitale, migliorando le performance produttive e fornendo all’utente una brand experience familiare e adattiva su tutte le piattaforme. Oltre alla presenza delle linee guida presenti anche nel manuale del brand, il design system è dotato anche di una libreria visuale contente tutti gli elementi costitutivi dell’immagine. Questi componenti seguono il principio dell’Atomic Design, ossia l’ordine di costruzione e visualizzazione degli elementi, dal più piccolo al più grande, dall’icona più piccola al layout completo di pagina.

L’evoluzione di questo principio consiste soprattutto nella sua ri-usabilità, condivisione e consultazione per tutti i creator appartenenti al progetto di sviluppo dell’immagine coordinata digitale del brand e di utenti esterni che ne studieranno uso e applicazione. Il concetto di brand manual digitale quindi cambia, si evolve e prende una forma nuova, mirata al multi-piattaforma, costruendo l’intero ambiente visuale all’interno del quale ogni utente, dal creatore al cliente, potrà sempre contare su dei validi punti di riferimento.

11

Capitolo 1.0

Paragrafo 1.1 Nascita e sviluppo

2. Edsger Dijkstra, The Visual History of Type, The Humble Programmer, 1972.

3. Douglas Mcllroy, matematico, Ingegnere, Programmatore Inventore delle pipe e delle utility UNIX.

12

Negli anni ‘60, le tecnologie e la velocità di elaborazione dei computer hanno iniziato a superare le velocità di programmazione dei software. Di conseguenza, i computer sono diventati più veloci ed economici a discapito dello sviluppo software, rimasto lento, difficile da sostentare e più soggetto a errori di compilazione.

Questa grossa lacuna, e il dilemma di cosa fare al riguardo, divenne nota come “software crisis”2.

Nel 1968, alla conferenza Nato sull’ingegneria del software, Douglas McIlroy3 presentò lo sviluppo basato sui componenti come una possibile soluzione al problema. Lo sviluppo basato su componenti ha fornito una metodologia per accelerare il potenziale della programmazione rendendo il codice riutilizzabile, più efficiente e più facile da scalare.

Ciò ha ridotto lo sforzo e aumentato la velocità di sviluppo dei software, consentendo agli stessi di sfruttare al meglio la potenza delle macchine più moderne.

Introduzione al design system

Adesso, circa 50 anni dopo, stiamo vivendo una sfida simile, ma questa volta nel settore del design. Il design sta combattendo per adattarsi alle applicazioni che ne necessitano, perché il design rappresenta ancora oggi soluzioni su misura per singoli problemi.

Per immaginare le complicazioni alle quali si sta andando incontro, basti pensare alle centinaia di elementi e colori che diventano possibili variazioni di un unico oggetto (un pulsante, il titolo di una pagina, l’icona di un menù).

Moltiplicato per ogni frammento di interfaccia utente, si inizia a comprendere quanto il design sia diventato inconsistente, incompleto e difficile da mantenere.

Allo stato attuale, per tenere il passo con la velocità dello sviluppo software, le aziende potrebbero compiere sostanzialmente tre azioni: • • •

assumere più personale; progettare più velocemente; creare soluzioni che funzionano per più problemi.

Anche con più mani e con più occhi che lavorano più velocemente, la realtà dei fatti si trasforma in un design, sì su misura, ma semplicemente non scalare. Il design su misura è diventato lento, incoerente e sempre più difficile da mantenere nel corso del tempo.

I design system consentono quindi ai team di creare prodotti migliori più velocemente rendendo possibile la riutilizzabilità del design e la sua scalabilità. Questo è il valore primario dei design system. Il design system è una raccolta di componenti riutilizzabili, guidati da standard chiari, che possono essere assemblati insieme per creare un numero illimitato di applicazioni.

13

Capitolo 1.0

Paragrafo 1.2 Scalabilità e system thinking I design system moderni sono diventati un argomento caldo nell’industria del software. Fondamentalmente per una buona ragione: il design è in scala4. Moltissime aziende stanno investendo nel design, riconoscendone l’influenza nell’esperienza del cliente nei confronti dei loro prodotti, offrendo vantaggi competitivi, attraendo e trattenendo i clienti e riducendo i costi di supporto. In un’azienda che investe nel design, alcune delle variabili che potrebbero comportare l’adozione di un design system sono sicuramente la crescita del team di progettazione e un design incorporato in tutte le posizioni e luoghi dell’azienda giocando un ruolo chiave nella promozione dei prodotti e servizi su tutte le piattaforme.

4. The design system handbook, 2019.

14

Se si intraprende la strada della progettazione visiva, l’investire nel design può da subito sembrare un’ottima scelta, ma con essa ci sono da considerare le ulteriori sfide che ci impone questo sistema: come progettare interfacce utente coerenti multi-piattaforma quando molti team sono in possesso di varie parti dei tuoi prodotti? In che modo consentirai a tutti questi team di lavorare rapidamente e in maniera meticolosa? Come manterrai l’inevitabile debito progettuale che si costruirà con il numero di designer che creano nuovi “progetti su misura”?

Per capire come la creazione di un design system può risolvere queste problematiche e vincere queste sfide progettuali, bisogna innanzitutto comprendere quante e quali sono le possibilità a nostra disposizione. In genere si sposano due concetti chiave:

Introduzione al design dystem

STANDARD: Capire non solo il “cosa”, ma anche il “perché”, dietro la pro-

gettazione di un sistema, è fondamentale per creare un’esperienza utente perfetta. Aderire a degli standard è come definiamo e creiamo tale comprensione. Ciò elimina la soggettività e l’ambiguità che spesso creano frizione e confusione all’interno dei team di progettazione.

«Le “Standard Web Conventions” sono un insieme di regole e bestpractice del web design che seguono i progettisti per costruire dei prodotti in linea con le aspettative dei visitatori. Quindi sono linee guida per la chirezza e l’usabilità.»5

Gli standard comprendono sia la progettazione che lo sviluppo. La standardizzazione di convenzioni di denominazione, requisiti di accessibilità, e struttura dei file aiuterà i team a lavorare in modo coerente e a prevenire gli errori. Il linguaggio visivo è una parte fondamentale per gli standard di progettazione. Definire lo scopo e lo stile di colore, forma, tipo, icone, spazio e movimento, è essenziale per creare un’esperienza utente coerente e allineata al marchio. Ogni componente del sistema incorpora questi elementi che svolgono un ruolo fondamentale nell’esprimere la personalità del marchio.

Senza standard, prendere delle decisioni arbitrarie diventa un rischio sottoposto all’incapacità critica di chi collabora al progetto.

In tal modo non solo non si afferma il concetto di scalabilità, ma si crea un’esperienza utente inconsistente e frustrante.

5. Andy Crestodina, Co-Founder / Chief Marketing Officer of Orbit Media, Web design standards, 2015.

6. Roy Stanfield, principal interaction designer, Airbnb, intervista, 2016.

«Quando progettiamo un nuovo componente, vogliamo assicurarci che ci indirizzi tutti e quattro insieme. Se non avessimo un insieme di principi base, sarebbe difficile essere d’accordo su qualcosa. Vogliamo assicurarci che ogni componente sia all’altezza»6 Mentre per il web-designer, l’utilizzo degli standard si rivela quasi fondamentale, nell’universo del marketing essi non vengono sempre considerati.

Nella maggior parte dei casi si tratta sostanzialmente, di un insieme di regole (dette anche best-practice) e linee guida per chiarezza e usabilità per cercare di non sconvolgere ulteriormente l’esperienza utente.

15

Capitolo 1.0

COMPONENTI: I componenti sono porzioni di codice riutilizzabile all’interno

del sistema e fungono da elementi costitutivi dell’interfaccia dell’applicazione. I componenti variano in complessità. Ridurre i componenti a una singola funzione, come un pulsante o un menu a discesa, aumenta la flessibilità, rendendoli più riutilizzabili. Componenti più complessi, come le tabelle per tipologie specifiche di dati, possono funzionare nei loro usi specifici, ma questa complessità limita il numero di scenari applicabili.

Lo sviluppo basato su componenti riduce il sovraccarico tecnico rendendo il codice riutilizzabile. Gli standard governano lo scopo, lo stile e l’utilizzo di questi componenti. Insieme, forniscono al team un sistema facile da usare e semplice da replicare, collegando tra loro tutte le possibilità e rendendolo immediatamente più comprensibile.

16

Introduzione al design system

Figura 1. Dati rilevati da Andy Crestodina, Co-Founder / Chief Marketing Officer of Orbit Media, durante uno studio pubblicato in Web design standards, 2015.

17

Capitolo 1.0

Paragrafo 1.3 Il valore aggiunto del design system Le modalità in cui un design system può fare la differenza sono molteplici, come gli ambiti e le situazioni. A tal proposito, ci sono alcune caratteristiche che vanno evidenziate per poterne comprendere al meglio le potenzialità:

7. La sezione di un app o di un servizio dedicata principalmente alle novità introdotte all’interno dello stesso.

8. Riferimento diretto all Torre di Babele, la leggendaria costruzione di cui narra la Bibbia nel libro della Genesi: 11,1-9.

18

DESIGN SCALARE: Man mano che cresce un team, è di uso comune per i designer concentrarsi su aree distinte di un applicativo come la funzione 'cerca' o la parte 'discovery'7, la gestione del proprio account personale e molto altro ancora. Questa frammentazione può portare a un linguaggio visivo confuso ricreando una situazione simile alla metafora comune della Torre di Babele8 (del Design in questo caso), con ogni designer che parla la propria lingua di progettazione personale.

Questo problema si presenta nel momento in cui ognuno di essi risolve individualmente ogni problema senza utilizzare un approccio sistematico.

Senza un linguaggio comune, l’esperienza utente inizia a non funzionare, così come l’intero processo di progettazione. Ed è la carenza di convenzioni il problema fulcro di questa possibile dinamica.

Per creare ordine all’interno di un team di design, la fonte primaria deve essere unica e condivisa, un luogo dove fare riferimento a modelli e stili ufficializzati per tutto il brand/servizio.

Ecco perché gli studi e i team che giocano di squadra costruiscono delle librerie magnifiche come il famoso sito di Shopify Polaris, un sito di design system a tutti gli effetti, costruito con una logica incredibile, che documenta tutti gli aspetti del sistema inclusi i contenuti, i componenti, le linee guida e le best-practice per l’UX. E poiché è costruito con un “sistema”, sarà sempre costantemente aggiornato.

Un sito parallelo focalizzato solo sul design system interno relativo sempre al prodotto principale, è la miglior fonte di verità più accessibile per ogni componente del team incaricato.

Introduzione al design system

PROTOTIPAZIONE VELOCE: La prototipazione è il mezzo più veloce per

testare tutti i flussi di lavoro situati all’interno di un design system già esistente. La rapidità del processo potrebbe essere paragonabile alla semplicità con il quale si costruisce un oggetto utilizzando dei mattoncini LEGO9 provenienti dallo stesso contenitore. Creare dei prototipi funzionanti ci aiuta ad avere la percezione reale di ciò che stiamo sperimentando, consentendoci la pluri-creazione di infinite varianti della stessa azione.

9. Produttore di giocattoli danese, noto a livello internazionale per la sua linea di mattoncini assemblabili.

USABILITÀ E ACCESSIBILITÀ: Sul web funziona così: una pagina lenta,

è una pagina brutta. Ma peggio di una pagina brutta c’è solo una pagina inconsistente. L’inconsistenza è una variabile davvero dannosa perché, anche a causa di un solo piccolo errore, fa cadere un utente nella confusione.

Per questo motivo, combinando gli standard (vedi pag.15), le convenzioni usate nello sviluppo dei componenti, e delle figure in grado di lavorare con flessibilità e dinamicità, lo sforzo si riduce dalla scrittura di centinaia di righe di codice a pochi caratteri facilmente modificabili.

L’incoerenza perciò ostacola l’usabilità e l’accessibilità. Perché progettare vuol dire anche implementare funzioni “alla portata di tutti”, mantenere un rapporto visivo con l’utente finale e proporre sempre una navigazione fluida senza fronzoli, che porti esattamente dove ci siamo immaginati termini il percorso di navigazione, anche per quegli utenti già debilitati a causa di un deficit fisico (disabili e portatori di handicap) o tecnico (utenti con connessioni lente o hardware datato).

19

Capitolo 2.0

Progettare un design system Dove software e strumenti di disegno e progettazione non bastano

Capitolo 2.0

Paragrafo 2.1 Figure e competenze digitali Costruire da zero un design system non è un lavoro semplice. Gli elementi da tenere in considerazione sono molteplici e di vario genere: lo stile del design, la progettazione della modularità tenendo conto della scalabilità, come gli altri membri del team utilizzeranno questi elementi e come convincere chi di competenza nell’adozione della nostra idea.

Per poter analizzare il “problema” più grande, bisogna innanzitutto iniziare a suddividere i compiti tra i vari membri del team e, in prospettiva di ciò, si dovrà scegliere chi verrà coinvolto e in che modo dovrà gestire il proprio compito con gli altri membri della squadra. Il linguaggio del design in questa fase sarà fondamentale.

22

Progettare un design system

Prima di iniziare a lavorare su un design system, è necessario conoscere il ruolo di ogni membro appartenente al team. Tra le figure coinvolte, sicuramente il designer è quello che dovrà essere presente in forma maggiore.

Tra le altre, ecco un elenco di possibili figure professionali adatte ad un lavoro di tale portata: • • • • • • • •

DESIGNER per definire gli elementi visivi di tutto il sistema; SVILUPPATORI FRONT-END capaci di creare un codice efficiente, ade-

guato ma soprattutto modulare; ESPERTI DI ACCESSIBILITÀ per garantire che il tuo sistema sia conforme agli standard WCAG; CONTENT STRATEGIST per pubblicare e gestire contenuti utili, capaci di avere un ruolo unico all’interno della web experience di un individuo; RICERCATORI per studiare bisogni e necessità degli utenti finali; PERFORMANCE EXPERTS veri e propri tester per la prototipazione in grado di valutare velocità ed efficienza del nostro prodotto; PRODUCT MANAGER per garantire che il nostro prodotto sia allineato con le esigenze dei clienti; LEADERS (VP’s and direttori) per sostentare le decisioni di ogni membro del team, offrire il proprio parere critico e prendere decisioni importanti.

La figura del leader, in realtà, andrebbe presa in considerazione per ogni area di interesse dedicata al progetto. Poiché il team potrebbe essere composto anche da molte persone, è necessaria una figura in grado di guidare ed eventualmente difendere le posizioni dei componenti della squadra che lui stesso rappresenta.

23

Capitolo 2.0

Figura 2. John Ive e Tim Cook, rispettivamente Chief Design Officer e Chief Executive Officer della nota azienda di Cupertino, Apple, discutono di fronte ai nuovi modelli di iPhone XR durante la loro presentazione al Steve Jobs Theater.

24

Progettare un design system

25

Capitolo 2.0

Paragrafo 2.2 Modelli di gestione dei team di progettazione Tra le responsabilità di un leader, gestire un team rientra probabilmente tra quelle più difficoltose e allo stesso importanti. Il modo in cui lo si gestisce è importante tanto quanto il team stesso che si impiegherà nella creazione di un design system.

Nathan Curtis10, esperto in design system, in un articolo su Medium11 descrive alcuni modelli tra i più validi e conosciuti per la gestione del team nella costruzione di un sistema valido e funzionale utilizzati anche tra le più grandi e importanti aziende: 10. Fondatore di UX firm8 ed esperto di usabilità, design system e progettazione.

11. Piattaforma di pubblicazione online creata dal cofondatore di Twitter, Evan Williams, nell’agosto 2012.

MODELLO SOLITARIO: —Un modello solitario vede una squadra rendere disponibile un sistema, ma con sforzi concentrati principalmente sui bisogni di quella squadra—.

Il modello solitario è, nella pratica, il più utilizzato ma non il più funzionale 26

Progettare un design system

per ogni circostanza. Tutto gira intorno a una figura principale che mette a disposizione il proprio materiale. Un bootstrap12 del design system.

Il “solitario” è un modello ottimo per chi, non possiede un team prestante in termini di sviluppo e progettazione front-end, ma possiede già un’ottima base pre-costruita basata (magari) anche su sistemi modulari dai quali è comunque possibile estrapolare una parte, risparmiando del tempo (anche significativo).

Nonostante ciò, la condivisione di una “biblioteca comune” non risolve definitivamente i problemi legati alla progettazione e non implica il dover mantenere determinati aspetti legati al sistema precedente.

12. Raccolta di strumenti liberi per la creazione di siti e applicazioni per il Web.

MODELLO CENTRALIZZATO: —Un unico team di progettazione centrale

produce e supporta un sistema utilizzato da altri come parte del loro lavoro—.

Il team centralizzato è un modello lavorativo basato sul supporto progettuale tramite un gruppo di persone dedicate esclusivamente alla realizzazione e distribuzione delle parti di un sistema, motivando le decisioni.

Queste parti, potrebbero averle create loro o, più semplicemente, potrebbero averle costruite e/o implementate grazie alla consulenza di un’agenzia esterna.

27

Capitolo 2.0

Il team di un sistema centralizzato può: •

13. Gruppo multidisciplinare di persone che sono collettivamente responsabili della fornitura di un prodotto o processo definito.

• •

•

diffondere un linguaggio di progettazione, componenti e modelli per un portfolio sempre più ampio; sostenere più product team13 contemporaneamente, senza essere legato a qualsiasi tipo di priorità, servizio o prodotto; identificare delle opportunità e sollecitare le richieste affinché si approfondisca una ricerca specifica per un particolare elemento della biblioteca; impostare pratiche e processi per convalidare design emergenti.

Tuttavia, i team centralizzati spesso non hanno: • • • 28

un contesto, normalizzando soluzioni solo indirettamente fondate sui vincoli reali del prodotto o della piattaforma; una visione sulle sfide quotidiane ai quali si va incontro, specifiche per ogni prodotto; influenza sui product designer per bilanciare i compromessi tra gli obiettivi del prodotto e quelli del sistema.

Progettare un design system

Se il modello solitario e centralizzato non si adattano, c’è un percorso più complicato da perseguire, ma decisamente più rilevante per le grandi organizzazioni di “talenti ad alte prestazioni”.

MODELLO FEDERATO: In un modello federato , i designer prendono deci-

sioni collettivamente, ma bisogna specificare che non tutti partecipano o hanno voce in capitolo. Invece, le decisioni del gruppo federato si propagano ad altri product team che decidono se sfruttare il risultato o ignorarlo a loro rischio e pericolo.

Negli ultimi anni, il pensiero sistematico dei designer tra le piattaforme e le product line è cresciuto considerevolmente e con questo anche la metodologia di approccio. I progressi di Google Design14, per esempio, sono l’archetipo perfetto.

In questo caso , un piccolo gruppo di designer, ha costruito e ufficializzato ciò che è diventato oggi il Material Design, utilizzando un approccio “committee-by-design”15. «È tutta una questione di team che si intrecciano insieme e condividono le stesse informazioni, assicurandosi che il tutto termini in un punto in cui il nostro linguaggio di design è molto simile, si adatti bene ad ogni piattaforma, ma allo stesso tempo continui ad essere Google.»16

14. La piattaforma di Google per la diffusione dei dati relativi al visual design aziendale.

15. Nathan Curtis, Team Models for Scaling a design system, Medium, 2015

29

Capitolo 2.0

17. Nathan Curtis, Team Models for Scaling a design system, Medium, 2015 18. Mina Markham, Senior Engineer, Front-End per Slack e LinkedIn, curatrice della campagna politica di Hilary Clinton.

Ogni modello ha quindi punti di forza e debolezza.

Il modello solitario è veloce ma decisamente troppo frammentato, con un responsabile, che può causare però un collo di bottiglia nel completamento di molte attività. Un team centralizzato, d’altra parte, mantiene il sistema in forza, ma il gruppo potrebbe non essere così connesso alle esigenze dei clienti in quanto potrebbero essere meno coinvolti nella ricerca degli utenti.

Infine, un team federato ha una visione molto approfondita di ciò che è necessario per tutte le funzionalità del prodotto e le esigenze degli utenti, ma questi gruppi potrebbero essere piuttosto impegnati a lavorare anche su altri progetti esterni alla costruzione del sistema.

«I responsabili non sono in scala.»17 I modelli centralizzati o federati sono in genere i migliori per il ridimensionamento di un design system. Nel momento in cui determiniamo quale modello di squadra possa essere quello attuale, valutiamo e riconsideriamo i nostri obiettivi per il raggiungimento di un fine ultimo.

Anche se il modello solitario è meno popolare nella maggior parte dei team perché il contributore principale può provocare l’effetto “collo di bottiglia”, ci sono situazioni invece in cui potrebbe funzionare.

Nel bel mezzo di una campagna politica, per esempio, che scorre a velocità vertiginose, Mina Markham18 ha avuto poco tempo per chiamare i rinforzi mentre sviluppava nuove risorse online per Hillary Clinton.

Ha creato un design system chiamato Pantsuit per aiutare più team contemporaneamente in più luoghi ad accelerare la progettazione e la produzione del materiale, mantenendo la coerenza del marchio all’interno della campagna. Il modello solitario ha consentito a Markham di concentrarsi prima sulla velocità e secondariamente sulla longevità, diversificando tutto il processo.

30

Nel momento in cui si determina quale modello organizzativo funziona meglio, bisogna considerare gli obiettivi finali. Inizialmente, per accelerare i processi, il metodo solitario è l’ideale, anche se potrebbe essere necessario del lavoro in seguito per adottarlo pienamente anche su altri team. Per muoversi velocemente, incoraggiando il buy-in fin dall’inizio, è preferibile considerare invece il modello di squadra centralizzato.

Progettare un design system

Figura 3. Hilary Clinton durante un comizio con alle spalle un cartellone contenente gli artefatti progettati da Mina Markham per la sua campagna politica

E per ottenere la maggior parte del buy-in e della proprietà condivisa, il modello federato è una buona opzione. In ogni caso, non bisogna dimenticare che un design system si comportamente esattamente come un prodotto: il pubblico deve impegnarsi a mantenerlo sano e far sì che si evolva.

Subito dopo la ricerca e l’applicazione del modello organizzativo, bisogna passare a una delle fasi più importanti: la raccolta delle opinioni e dei feedback dei clienti.

31

Capitolo 2.0

Paragrafo 2.3 Raccolta dei feedback Ritrovarsi come figura di leadership all’interno di un progetto di design comporta una grossa responsabilità: sviluppare il talento della propria squadra e aiutare a far crescere le loro capacità. Il feedback costruttivo sia sul design che sul comportamento sul lavoro è una parte vitale di questo processo.

19. Fabricio Teixeira, Design Director, Work & Co. 20. Derek Kohn, principal designer presso GoFundMe. 21. Piattaforma di crowdfunding “for-profit” che consente alle persone di raccogliere fondi per eventi che vanno da celebrazioni e lauree a circostanze difficili come incidenti e malattie.

22. Ciascuno dei soggetti direttamente o indirettamente coinvolti in un progetto o nell’attività di un’azienda.

«Ricevere feedback è una parte naturale del processo di progettazione.

Mostrate il vostro lavoro. Le persone lo commenteranno e così facendo scoprirete quali sono i loro bisogni.»19 Derek Kohn20 afferma: «Un feedback sul design è fondamentale per la crescita dei progettisti e la riuscita dell’esecuzione di un prodotto. In GoFundMe21 lo facciamo in due modi. Innanzitutto, incoraggiando il feedback fluido.

Utilizziamo strumenti come InVision per socializzare e raccogliere informazioni da altri stakeholder22 in qualsiasi momento. Secondariamente, avviamo sessioni di revisione dell’esperienza settimanale. Questi incontri sono impostati intenzionalmente per consentire a un designer di raccogliere le informazioni du cui ha bisogno per andare avanti. È tempo per loro. Non per noi. La chiave è concentrarsi sulla chiarezza, non sull’ambiguità» Ma questo processo non solo avvantaggia le aziende, che migliorano e rafforzano i loro progetti; giova anche agli impiegati.

Sfortunatamente, qualsiasi feedback relativo ad episodi precedenti non avrà lo stesso effetto. Ad esempio, delle ricerche dimomostrano che essere criticati per il comportamento passato ha l’effetto opposto.

Invece di motivare i dipendenti a fare meglio, li fa sentire disimpegnati.

32

Progettare un design system

Inoltre, uno studio del 2018 di Harvard Business Review mostra che quando le persone ricevono un feedback negativo, si allontanano intenzionalmente da chi lo esprime, andando in cerca di feedback più positivi per sentirsi meglio.

Detto questo, c’è anche un’eccezione: se chi riceve il feedback (non totalmente positivo, in questo caso) mostra un comportamento di apertura nei confronti di chi lo elargisce, dimostrando particolarmente apprezzamento la relazione sarà più forte e sicura e, così facendo, ogni parola spesa sarà motivo di riflessione di spunto.

Poiché hanno meno esperienza, che in genere è accompagnata da una minore sicurezza, i membri del team junior hanno maggiori probabilità di avere difficoltà a ricevere feedback di qualsiasi genere. Istruire i dipendenti su come accettare e agire sul feedback migliorerà sia l’impegno che le prestazioni nell’intero dipartimento.

Ecco alcune buone strategie da condividere con la propria squadra: •

Imparare a lasciare andare. Quando i designer si “affezionano” a certi aspetti dei loro progetti, criticarli non porterà nessun risultato, soprattutto nel breve termine.

Lasciar correre è un ottimo modo per sbrigare in fretta piccoli disguidi. Poi bisognera iniziare ogni critica rivisitando gli obiettivi del design complessivo, piuttosto che valutarne il valore estetico. E, se le cose vanno fuori strada, riorientare la conversazione.

•

Fare domande aperte. Sempre secondo Harvard Business Review, le persone curiose che chiedono e fanno domande che presumono una risposta aperta, ricevono feedback migliori. Producono anche materiale di qualità superiore.

A differenza delle domande a risposta chiusa (come “Ti piace questo disegno?”), Le domande a risposta aperta (come “Che ne pensi di questo disegno?”) non limitano la risposte della persona che fornisce il feedback. Senza restrizioni, è molto più probabile che condividano informazioni preziose o che possano aiutarci a migliorare il nostro lavoro.

33

Capitolo 2.0

23. Claire Lew, CEO di Know Your Company.

•

Chiedere chiarimenti alle domande. Quanto più il proprio team comprende il feedback che gli viene dato, tanto più ne trarrà beneficio.

Un passo essenziale è quello di porre domande chiare. In tal modo, raggiungeranno il nucleo di un problema, che li aiuterà a ripetere in modo più accurato il feedback. Poiché ciò ridurrà il numero di revisioni necessarie, comporterà anche un processo di progettazione più efficiente.

•

Annotare il più possibile. Il feedback è utile solo se è perseguibile e non si può agire su un feedback che non si ricorda.

Per questo motivo, è sempre una buona idea incoraggiare la propria squadra a prendere appunti mentre si ascolta.

•

Chiedere consigli, non feedback. Sfortunatamente, molte persone associano il feedback alle critiche. Per questo motivo, quando viene chiesto, l’idea di dare un feedback mette a disagio. «Quando chiedi consiglio, è un invito», spiega Claire Lew23 «Stai segnalando ad un’altra persona che ha più esperienza o conoscenza che trovi interessante e prezioso il suo contributo.»

Fornire feedback su base continuativa è il modo migliore per aiutare le persone a crescere e svilupparsi sul proprio lavoro. È una parte importante di una strategia complessiva per i dipendenti che include la misurazione del coinvolgimento collettivo e delle capacità sociali di interazione tra i membri del team.

34

Progettare un design system

Figura 4/5. Alcune immagini che ritraggono il processo sistematico di raccolta feedback piĂš usato attualemente nelle grosse organizzazioni.

35

Capitolo 3.0

Il linguaggio visivo Teoria e ABC per progettisti alle prime armi

Capitolo 3.0

Paragrafo 3.1 Introduzione al linguaggio visivo Teoria dei colori, tipografia e ricerca dei layout sono al centro di ogni design system. Lavorare a queste componenti è sicuramente la fase più creativa del progetto e ognuna di esse compone il linguaggio visivo, che a sua volta è suddiviso in: • • • •

colori; tipografia (dimensioni e caratteri tipografici); spaziatura (margini, riquadri, coordinate di posizionamento, spaziatura dei bordi); immagini (icone e illustrazioni).

A seconda delle esigenze, è possibile includere anche quanto segue per standardizzare ulteriormente l’esperienza utente: • • •

forme visive (profondità, elevazione, ombre, angoli arrotondati e texture); movimenti; suoni.

Visti nel complesso, gli aspetti da tenere in considerazione potrebbero sembrare molti. Ma considerando il ruolo che ciascuno di questi design elements gioca in un semplice componente come un pulsante, se ne comprende al meglio la funzione: “Un pulsante di solito ha un colore di sfondo, un carattere tipografico per l’etichetta e una spaziatura al suo interno. Potrebbe esserci un’icona accanto all’etichetta per creare un segnale visivo. Uno spessore sui bordi può fungere da semplice ornamento e può anche arrotondare gli angoli. Infine, passando con il mouse o cliccando sul pulsante, è possibile attivare l’animazione (anche sonora) come feedback per l’utente.”

38

Il linguaggio visivo

E se per un solo pulsante, queste sono solo alcune delle possibili considerazioni, moltiplicando questi valori per ogni elemento del design system, ecco trapelare il suo potenziale.

39

Capitolo 3.0

Paragrafo 3.2 Il colore Ogni colore che scegliamo per il nostro design system non è solo l’estensione del marchio principale. Per esempio, in un’interfaccia utente il colore viene utilizzato per trasmettere: • • •

Feedback: messaggi di errore e di successo; Informazioni: grafici, diagrammi ed elementi di orientamento; Gerarchia: mostra l’ordine strutturato attraverso il colore e la tipografia;

I colori comuni in un design system includono i primi 3 colori primari che rappresentano il marchio principale. Se nessuno di questi risulta funzionale – come un collegamento e il colore del pulsante – allora potrebbe essere necessario scegliere un altro colore. È una buona prassi usare lo stesso colore per link e colori di riempimento per i pulsanti, in quanto rende più facile per gli utenti riconoscere gli elementi interattivi.

Iniziare raggruppando le tonalità neutre – solitamente grigi – per gli sfondi e per i bordi dell’interfaccia utente generale, scegliere una selezione di gradazioni più accese per dei messaggi con stati di errore, avvertenza e successo, potrebbe essere un ottimo punto di partenza per costruire una prima panoramica generale e decidere quali palette confermare e quali invece riformare.

Alle volte, i design system più grandi e consistenti, includono anche dei colori per dei sotto-sistemi progettati per app o prodotti specifici. Proprio il colore diventa lo strumento di orientamento migliore per distinguere al meglio queste parti. Anche in design.google, esistono delle sezioni dedicate alle sottocategorie di prodotti appartenenti allo stesso ecosistema.

Riguardo il colore, c’è da considerare anche l’ipotesi “accessibilità limitata” dovuta a utenti con particolari deficit visivi (quali il daltonismo, per esempio) 40

Il linguaggio visivo

che potrebbero non essere in grado di riconoscere determinate sfumature.

Ogni variazione di colore consente ai designer di scegliere. Ma bisogna porre attenzione alla scelta poiché, avere troppe possibilità può influire negativamente e creare incoerenze progettuali rilevanti.

Mantenere sempre una gamma di tinte, sfumature e tavolozze neutre snelle per evitare l’uso improprio del sistema, potrebbe rivelarsi la soluzione ideale per dare ai progettisti la flessibilità di cui hanno bisogno. Aggiungere o rimuovere un colore resta comunque una decisione valida.

Figura 6. Ritaglio mostrante i principi di accessibilità nei testi secondo le linee guida del WCAG

41

Capitolo 3.0

Figura 7. Sezione “color tool� per le interfacce progettate secondo le linee guida del Material Design

42

Il linguaggio visivo

43

Capitolo 3.0

Figura 8. Sezione “Color Palette� del design system di Kintohub, sistema collaborativo disegnato per gli sviluppatori.

44

Il linguaggio visivo

Figura 9. Sezione “Palette� del design system di Pivotal, interfaccia utente open source.

45

Capitolo 3.0

Paragrafo 3.3 La tipografia Ogni carattere tipografico ha un fortissimo impatto sull’esperienza utente, dalla leggibilità alla gerarchia. Mantenere i font di sistema più comuni come il font Helvetica, Times New Roman o Verdana può essere una comoda scorciatoia, poiché essi sono familiari all’occhio di moltissimi utenti.

Alcune aziende, invece, preferiscono adoperare caratteri web personalizzati per poter riflettere al meglio il loro marchio aziendale, prestando particolare attenzione anche al modo in cui essi vengono utilizzati.

Figura 10. Homepage del sito Google Fonts.

46

Il linguaggio visivo

La maggior parte dei design system si basa esclusivamente su due font principali: un carattere per le intestazioni (H1, H2 e H3) e body copy, e un carattere monospaziato24 per il frammenti di codice.

La maggior parte dei design system non necessita di altro, a meno che non si disponga di un sistema contenente il supporto ad altri marchi. È più saggio mantenere un numero basso di caratteri tipografici in quanto, non è solo una best-practice del design tipografico, ma evita anche problemi di prestazioni nel caricamento causati dall’uso eccessivo di web-font25.

Quando si seleziona una dimensione per impostare il font, bisogna considerare innanzitutto la leggibilità. Nella maggior parte dei casi, vengono utilizzati font con dimensione non inferiori ai 16 px. È anche la dimensione del carattere predefinita nella maggior parte dei browser ed è abbastanza facile da leggere per la maggior parte delle persone. È possibile utilizzare una scala modulare per le dimensioni dei caratteri più grandi o più piccoli o per altri elementi come le intestazioni.

Una scala modulare è un insieme di numeri in cui si dispone di un numero base e un rapporto per generare il numero successivo. Si continua ad applicare il rapporto al nuovo numero ottenuto per generare altri numeri ancora.

24. Carattere tipografico che possiede glifi con larghezza fissa, detto anche non proporzionale o a larghezza fissa.

25. Steve Krug, Don’t Make Me Think, Hops, 2014

47

Capitolo 3.0

È bene ricordarsi che, studiando quale tipologia di font fa al caso nostro, è necessario anche assicurarsi che il carattere scelto svolga correttamente il suo lavoro su ogni piattaforma ove verrà visualizzato.

Tra le proprietà più semplici e allo stesso tempo più importanti c’è il line-height. Il web è soprattutto testo, e il line-height giusto può fare la differenza in quanto a leggibilità.

Questa proprietà specifica l’altezza di linea del testo, definendo così implicitamente l’interlinea, ovvero la spaziatura tra due linee di testo successivo.

La proprietà line-height accetta valori specificati in tutte le unità di misura, ma i modi più diffusi per specificarlo sono sostanzialmente pixel, percentuale, .em e numeri puri.

C’è da premettere che non c’è una misura standard per il line-height, e che il più delle volte la misura di default dei browser (tipicamente 1.2 volte il font-size) non è sufficiente per garantire una buona leggibilità.

Il valore del line-height dipenderà dai casi. Su layout a più colonne o pagine con sezioni di testo di differente grandezza, è consigliabile utilizzare differenti line-height, tenendo presente che sezioni di testo più lunghe, testo più grande, giustificato e con contrasto minore con lo sfondo richiedono line-height maggiore.

La metodologia che usiamo per spaziatura e dimensionamento di tutti gli elementi risulterà sempre migliore se costruita con una logica. Ciò significa usare numeri basati su schemi e rapporti. L’uso di una scala di spaziatura coerente promuove anche la manutenibilità attraverso le proporzioni, rendendo i layout più prevedibili e più propensi a “adattarsi” e allinearsi correttamente.

48

Il linguaggio visivo

Figura 11. Esempio di applicazione del line-height all’interno di un testo con dimensioni e stili differenti.

49

Capitolo 3.0

Paragrafo 3.4 Immagini e icone Anche le immagini, le icone e le illustrazioni giocano un ruolo chiave all’interno del nostro design system. L’utilizzo di formati vettoriali (formato .SVG) si integra meglio nel concetto di scalabilità e progettazione responsive.

Tuttavia, potremmo ritrovarci a dover utilizzare delle immagini fotografiche e, in quel caso, i formati di riferimento più comuni sono .JPG e .PNG .

Per la maggior parte delle foto, illustrazioni e diagrammi, oggi si rende necessaria la possibilità che esse possano allargarsi al 100% , consentendo così alle figure di arrivare a ricoprire l’intero contenitore visualizzandosi interamente per lungo, lasciando che l’altezza si imposti automaticamente senza definirla.

Le icone invece devono essere disegnate ad hoc (o acquistate su e-commerce specifici). Nel caso in si intraprenda la strada del disegno e della progettazione, ci sono delle considerazioni da affrontare: le icone saranno con un colore pieno o contornate da un bordo? Quale sarà il peso della linea? Utilizzeranno più di un colore? In che dimensioni dovranno essere progettate?

Anche qui, delle linee guida chiare ed efficienti, manterranno coerente tutta la comunicazione principale. Ciò non toglie che, in un approccio più “creativo”, le icone possono avere stili diversi per ogni tipologia. Ad esempio, le icone di utilità e azione (come una campanella delle notifiche o un’icona di impostazioni ad ingranaggio) possono essere piene con un colore soltanto, mentre tutte le altre icone di navigazione possono essere multicolore e più creative.

50

Il linguaggio visivo

FORMA VISIVA: La forma visiva dell’interfaccia utente riguarda principal-

mente le immagini di sfondo, le sfumature e le trame, le ombre e gli z-index, gli angoli arrotondati e i bordi. Queste qualità visive aiutano a enfatizzare e decorare gli elementi di un’interfaccia per calibrare la gerarchia visiva ed estetica.

MOVIMENTO E SUONO: Quando si definisce il proprio linguaggio visivo, il movimento e il suono potrebbero non venire immediatamente in mente.

Li vedi in un modo diverso. Ma il movimento e il suono possono avere un forte impatto sull’esperienza della tua app. Avrai voglia di sistemarlo anche per coerenza. Personalmente non ho esplorato queste aree per quanto mi piacerebbe ammettere, ma ci sono alcuni grandi esempi in natura.

51

Capitolo 3.0

Figura 12. Raccolta di icone progettata dal design team di Etsy.

52

Il linguaggio visivo

53

Capitolo 3.0

Paragrafo 3.5 UI e UX: progettare per gli utenti Se il prodotto/servizio in considerazione appartiene ad un progetto totalmente nuovo, privo di qualsiasi forma visiva, è necessaria una fase iniziale di progettazione e a tal proposito bisogna parlare di User Interface e User Experience. Prima di tutto, è necessario fare chiarezza: che cos’è esattamente l’UI design e l’UX design e qual è la differenza tra i due?

«In poche parole, “l’UI è come appaiono le cose, UX è come funzionano le cose. L’UX è un processo, l’UI è il risultato.»25

25. Harshita Arora, What’s the difference between UX and UI design?, Medium, 2017

UI DESIGN: La progettazione dell’interfaccia utente (UI) è un campo decisamente ampio. In teoria, l’UI è una combinazione di contenuti (documenti, testi, immagini, video, ecc.), modulo (pulsanti, etichette, campi di testo, caselle di controllo, elenchi a cascata, progettazione grafica, ecc.) e comportamenti interattivi (ovvero cosa succede se clicchiamo/digitiamo/ trasciniamo).

Ci vuole un occhio allenato, molta pratica e un sacco di prove ed errori di progettazione per migliorare. Come UI designer, l’obiettivo è creare un’interfaccia utente coinvolgente, bella da vedere e che provochi anche una risposta emotiva da parte dell’utente per rendere i tuoi prodotti più piacevoli e interessanti. Per potersi immedesimare quanto più possibile all’interno di un’interfaccia, basti immaginare un “viaggio immaginario” compiuto da ogni singolo utente, fruitore di quel sistema che, nel suo percorso, deve trovarsi costantemente a proprio agio con una moltitudine di elementi a schermo, senza entrare in confusione.

Riuscire a padroneggiare il software si rivelerà particolarmente importante, ma ancor di più sicuramente sarà il modo in cui sfrutteremo le strategie, i processi e suggerimenti durante l’intera progettazione del nostro design.

Nella progettazione dell’interfaccia utente, è necessario fare brainstorming, sperimentare, testare e comprendere gli utenti e il loro percorso durante l’utilizzo del prodotto.

54

Il linguaggio visivo

I vantaggi di avere un prodotto ben progettato ricadono sul più alto tasso di fidelizzazione degli utenti che, nel mercato attuale, vale più di qualsiasi altra cosa.

1. Su uno schermo, le persone leggeranno sempre il più grande, il più rilevante e il più luminoso.

Questa è la natura umana. La nostra attenzione è programmata in modo tale da vedere prima i più grandi, i più rilevanti e i più brillanti. E poi passa a cose più piccole, meno audaci e meno luminose.

2. L’importanza dell’allineamento.

L’allineamento è un aspetto fondamentale dell’UI Design. E un principio di progettazione ancor più importante è: minimizzare il numero di linee di allineamento. Ciò migliora la leggibilità e rende il design più piacevole alla vista.

Esistono due tipi fondamentali di allineamento: allineamento del bordo e allineamento del centro: • •

L’allineamento dei bordi è dove tutti gli elementi hanno un lato o un bordo allineati con una singola linea; L’allineamento al centro è dove allinea tutti gli elementi per il loro punto medio.

A seconda del caso, si sceglie l’uno o l’altro. Di solito, l’allineamento dei bordi è considerato migliore. È abbastanza facile allineare elementi e la maggior parte dei software di design solitamente fornisce dei righello/guida per allineare tutti gli elementi.

3. Diventare un architetto di “attenzione”.

Sostanzialmente i modi per interpretare al meglio questo ruolo sono due: bisogna attirare l’attenzione dell’utente sul proprio design e si deve prestare particolare attenzione ad ogni dettaglio.

L’UI Design si occupa di personalizzare l’esperienza per i tuoi utenti guidando la loro attenzione su cose importanti. Il testo, anche in questo caso

55

Capitolo 3.0

(vedi pag.46), svolge una funzione fondamentale.

Grazie ad alcuni accorgimenti come la grandezza dei paragrafi, il colore, lo stile, l’impatto e il modo in cui vengono graficizzate le parole, si può creare un percorso all’interno di un’interfaccia.

UI LIBRARY: Dopo aver costruito un inventario visivo, esaminando tutte le caratteristiche visive degli elementi, come il colore, la spaziatura e la tipografia, bisognerà raggruppare anche gli elementi dell’interfaccia utente in un inventario separato.

In questa fase verranno analizzati tutti i componenti reali di pulsanti, card, elenchi, moduli e altro ancora. Laddove il linguaggio visivo riguarda l’approccio visuale e il modo in cui le cose appaiono su un livello visivo globale, una libreria (altrimenti nota come pattern library) esamina i componenti dell’UI.

Organizzare un inventario di tutti gli elementi dell’interfaccia in produzione è anche un ottimo metodo per correggere eventualmente delle mancanze sotto il punto di vista progettuale. Proprio per questo motivo, questa fase potrebbe rivelarsi molto più lunga di quanto non si immagini, poiché rilevare delle incoerenze in un sistema “appena nato”, non è poi così raro.

56

Il linguaggio visivo

Un ottimo metodo per iniziare a raggruppare tutti gli elementi, potrebbe essere: visualizzare semplicemente tutti i materiali in produzione nella tua azienda/organizzazione, fare degli screenshot di ogni pulsante, modulo, stile di testo, immagine, ecc. raccogliendo tutto come in un “mazzo di carte” disponendo il tutto su una superficie più grande. In questo modo, si allargherà la panoramica di tutto il complesso progettuale e del lavoro svolto fino a quel momento.

I raggruppamenti di solito danno più o meno questi risultati: • •

• •

gli elementi – o basi o atomi: piccoli componenti stand-alone come pulsanti e icone; i componenti – o molecole o moduli: in genere componenti più piccoli uniti in un componente più grande come un modulo di ricerca (che include moduli di input, pulsanti e potenzialmente anche icone); le regioni – o zone o organismi: le aree dell’interfaccia utente come le zone adibite alla navigazione; i layout: come sono disposti tutti gli elementi sulla pagina (come le intestazioni, seguite dalle barre laterali e dall’area del contenuto principale, seguita da un piè di pagina);

Dopo aver completato la fase di inventario, è possibile unire e rimuovere ciò che non è necessario. Inoltre, “documentare” ogni singolo oggetto dell’inventario è una pratica estremamente utile per etichettare ogni singolo elemento, specificando come e quando utilizzarlo.

Documentare gli elementi del design system, di solito, include fornire un nome, una descrizione, degli esempi di applicazione e il codice del componente. Altre metodologie ancora suggeriscono di mostrare persino metadati, date di rilascio, esempi prototipati e molto altro. Bisogna comunque specificare che non esiste una soluzione tipo per ogni sistema. Bensì saranno le informazioni stesse ad adattarsi all’inventario in questione, sottolineando e descrivendo sempre i dati più rilevanti.

57

Capitolo 3.0

UX DESIGN: La User Experience è fondamentale per il successo dei pro-

dotti e servizi digitali e come tale va progettata e sviluppata con qualità e professionalità. Per fare questo, serve un mix di competenze e sensibilità che permette da un lato di captare i bisogni ed i desideri degli utenti e dall’altro una conoscenza tecnica che permetta di soddisfare al meglio questi bisogni, attraverso progetti di interfacce coinvolgenti ed efficaci tecnicamente realizzabili.

L’obiettivo dell’UX design è quello di fornire al target la migliore esperienza possibile in ogni momento. Questo implica un miglioramento continuativo per stare al passo con le esigenze in evoluzione del pubblico di destinazione. Un semplice esempio: solo fino ad alcuni anni fa i siti web classici erano ancora del tutto sufficienti. Al contrario coloro che oggi non offrono un design responsive per dispositivi mobili o un’applicazione nativa per i dispositivi mobili, perdono molti utenti e in ultima analisi anche ricavi se l’esperienza dell’utente risulta migliore con la concorrenza.

La progettazione dell’interfaccia è sempre preceduta da uno studio approfondito delle tendenze e delle dinamiche che spingono gli utenti a compiere determinate azioni in particolari condizioni. Affinché ciò accada, è necessario che i designer conoscano bene i principi fondamentali sui quali deve essere cucita la rete di interazioni che compirà il nostro utente: 1. Usabilità: per cosa utilizzerà l’utente l’applicazione? Qual è la funzionalità principale dell’app? Cosa è necessario per far funzionare correttamente l’applicazione affinché tutte le sue funzioni siano facilmente accessibili?

Come è possibile ridurre al minimo il numero dei passaggi necessari affinché l’utente possa raggiungere un obiettivo all’interno dell’app?

Qual è la cosa principale che gli utenti vogliono ottenere con quest’app? Come fare a rendere l’esperienza veloce, fluida e piacevole?

2. Profilo utente: bisogna conoscere gli utenti e i loro bisogni. Il modo migliore per farlo è profilando ciascuno di essi. Restringere il pubblico target/utente potrebbe rivelarsi la soluzione vincente.

58

Il linguaggio visivo

3. Richiedere i permessi: se l’applicazione mobile sfrutta le notifiche push, necessita di servizi di localizzazione, integrazione con social media, email, ecc.

L’autorizzazione dell’utente è fondamentale per ogni azione.

Invece di domandare il permesso per ognuna di queste azioni utilizzando un messaggio univoco (che potrebbe sopraffare e confondere l’utente) una pratica parecchio utilizzata è l’effetto “Benjamin Franklin”26. Prima di chiedere a qualcuno un "grande favore", chiedi loro un piccolo favore. E, lentamente, questo spinge l’utente verso una certa direzione. Bisogna assicurarsi che l'app o il servizio invii la notifica di autorizzazione solo quando l’utente sta per utilizzare una determinata funzione e non quando entra sul sito o avvia l'app.

4. Forma e funzione: il design non riguarda sempre la forma (bella combinazione di colori, caratteri, layout e così via). Riguarda anche la funzionalità. Lavorare.

5. Coerenza: c’è coerenza nell'applicazione? È tutto coerente con il marchio? L'incoerenza nel design è la principale fonte di confusione.

Un utente confuso è un utente infelice. Pensare alla coerenza, non solo in termini di aspetto, ma anche in termini di funzionalità, è un passo fondamentale.

26. Effetto della persuasione secondo il quale una persona che ha già eseguito un favore per un altro è più incline a fare un altro favore per l’altro piuttosto che se il favore lo avesse ricevuto da quella persona.

27. Steve Krug, Don’t Make Me Think, Hops, 2014

6. Semplicità: è possibile renderlo più semplice? Bisogna assicurarsi che la propria app sia a prova di anziano (o bambino), e cioè che entrambi riescano a usarlo correttamente senza cadere nell’errore o nella confusione di troppe icone o righe di testo, di troppi colori o elementi estremamente vicini tra loro.

7. “Don’t Make Me Think”27: stiamo rendendo le cose difficili per i nostri utenti? L’essere umano detesta aspettare e fermarsi a pensare. Durante la programmazione, l’obiettivo è creare un prodotto finito con un codice più semplice possibile. Questo dovrebbe avvenire anche durante la progettazione di un interfaccia e, così facendo, renderla più chiara e meno confusa possibile.

59

Capitolo 3.0

UI

USER INTERFACE Design the product

Figura 13. La differenza tra UI e UX spiegata utilizzando i contenitori del famoso ketchup Heinz.

60

Il linguaggio visivo

UX

USER EXPERIENCE

Design the experience

61

Capitolo 4.0

Progetto e prototipazione PerchĂŠ carta e penna non bastano piĂš al progettista moderno

Capitolo 4.0

Paragrafo 4.1 I software per la progettazione della UI In un sondaggio effettuato su un campione di oltre 2500 persone da tutto il globo, l’83% di essi sono designer appartenenti a team di progettazione di 10 persone o meno, utilizzano maggiormente il software Sketch in accoppiata con InVision per progettare artefatti e prototipi e sono (per ovvi motivi legati al software) utilizzatori di sistemi operativi Apple (MacOS).

In realtà, dai dati raccolti, risulta ancora una grande maggioranza di persone legata strettamente ai metodi più convenzionali per gestire il flusso di lavoro, mappe mentali e brainstorming e disegnare schizzi e prove di layout.

Tra questi, spicca anche una grossa fetta di pubblico che utilizza un solo strumento per ognuno dei processi sopra elencati, dalla fase di disegno a quella di prototipazione.

Ma gli strumenti sono molteplici e tendono a moltiplicarsi in relazione ai trend più attuali, implementando funzioni sempre più avanzate e strumenti sempre più all’avanguardia per migliorare la vita dei progettisti impegnati nella costruzione di interfacce e artefatti visivi.

64

Progetto e prototipazione

SKETCH: un editor interamente vector-based28 focaliz-

zato sull’UI design, progettato unicamente per macOS di Apple e sviluppato dalla società olandese Bohemian Coding. Rilasciato per la prima volta il 7 settembre 2010, sin dalle prime versioni del software, l’interfaccia si mostrava avanzata e decisamente più semplice delle sue controparti di casa Adobe oltre a supportare la quasi totalità dei formati per dispositivi mobili e web.

Questo software si è rivelato estremamente flessibile anche grazie al vastissimo supporto ai plugin esterni che ne modificano e influenzano notevolmente la fruibilità, sotto ogni punto di vista. Essendo supportato solo per i sistemi operativi del marchio Apple, la progettazione in vettoriale si è rivelata estremamente utile per tutti gli schermi con risoluzione Retina29 migliorando la visualizzazione di tutti gli artefatti sempre in alta definizione.

28. Sinonimo di “grafica vettoriale”.

29. Retina Display è il marchio utilizzato da Apple per riferirsi a quegli schermi che, introdotti a partire dal 2010 con l’iPhone 4, si distinguono, rispetto al passato, per la notevole densità di pixel, tale da rendere impercettibile a occhio nudo la presenza dei singoli pixel.

65

Capitolo 4.0

FIGMA: co-fondata da Dylan Field nel 2013 e nel 2015 ha ottenuto un finanziamento di 14 milioni di dollari. In un articolo di Techcrunch, Dylan afferma che Figma vuole “fare per l’User Interface design ciò che Google Docs ha fatto per l’editing di testo”.

Oggi Figma è disponibile come strumento di design in-browser e cioè utilizzabile tramite software di navigazione internet (Chrome, Firefox, Edge, Safari, ecc).

Figma è probabilmente la soluzione ideale per unificare il software di progettazione in tutti i comparti del tuo design team e, così facendo, dare la possibilità ad ogni membro appartenente ad esso di modificare, condividere e commentare ogni singola riga di testo o frammento di interfaccia in tempo reale. Quindi, in pratica, Figma sembra piuttosto semplice. Le funzionalità, i collegamenti e l’esperienza utente sono molti simili a quelli di Sketch. Nel complesso, l’interfaccia utente e gli strumenti di progettazione sembrano praticamente copiati. È la parte della “collaborazione e della condivisione”. Non funziona solo per la fase di produzione, ma ci consente anche di commentare e collaborare all’interno dei progetti realizzati su Figma.

66

Progetto e prototipazione

FRAMER X: questo strumento ha fatto un enorme salto nel futuro. È l’unico strumento di progettazione che consente di creare componenti di codice già pronti per poter essere utilizzati in un sito.

Questo può rivelarsi estremamente utile per il proprio design system, infatti, così facendo, le componenti di Framer X diventano l’unica fonte di informazioni principale.

Gli stessi componenti possono essere modificati e ri-adattati anche tramite editor di codice esterni aumentando esponenzialmente il livello di collaborazione tra gli sviluppatori e i progettisti, per creare componenti coerenti e già pronti per la produzione. Framer X non è come qualsiasi altro strumento. È completamente focalizzato sul design dell’interazione. Di conseguenza, è possibile creare stati con sovrascritture, animare interazioni complesste e lavorare con dati dinamici, il tutto all’interno di un unico strumento di progettazione.

Non c’è limite alla creatività. E tutto questo grazie a pochissime righe di codice ex-novo o parti già pre-costruite dalla community. Man mano che si acquisisce familiarità con il funzionamento di Framer X a livello di base, si scoprono funzionalità sempre nuove nonché nel loro stack tool che consente di creare layout veramente adattivi senza sforzo.

67

Capitolo 4.0

Figura 14. Alcune delle interfacce dei software di progettazione piĂš conosciuti e utilizzati.

68

Progetto e prototipazione

69

Capitolo 4.0

ADOBE ILLUSTRATOR: Adobe Illustrator è senza dubbio uno dei migliori software per progettare design di stampe e immagini vettoriali. Ma negli ultimi dieci anni il designer grafico si è trasformato anche in UI e UX designer, concentrandosi maggiormente sullo sviluppo delle interfacce per il web e per il mobile. Illustrator è ancora lo strumento principale per il wireframing e lo dimostrano i dati relativi al 2018. Seppur con le stesse caratteristiche, programmi come Sketch o Figma siano particolarmente simili sotto questo punto di vista, Illustrator risulta essere ancora molto valido e (a volte) insostituibile per tutti coloro che hanno iniziato a creare grazie alla suite Adobe.

È incredibilmente veloce nel rendering dei vettori. Nessun software gestisce una quantità simile di punti, forme, pulsanti, caselle, campi di testo e linee meglio di Illustrator. È un must-have per il ritocco del vettore e include alcune caratteristiche uniche che sono ottime per la progettazione rapida di wireframes per siti Web reattivi. L’unico vero limite di questo software è non conoscerne a pieno le funzioni, e questo potrebbe essere un grosso ostacolo vista la sua vastità.

70

Progetto e prototipazione

ADOBE XD: il software con cui Adobe cerca di compe-

tere con strumenti del calibro di Sketch per progettare e prototipare tutto in una sola app.

Adobe XD è anche un’alternativa valida per gli utenti di Windows che sfruttano e utilizzano anche tutti gli altri prodotti del pacchetto Creative Cloud offerto da Adobe.

XD è totalmente diverso da tutto ciò che Adobe ha mai fatto prima d’ora: è gratuito, costruito con l’aiuto delle community e usa le API aperte per gli sviluppatori creando così nuove funzionalità testandole direttamente su di esso. Con questo approccio, la sua crescita è stata esponenziale e ad oggi conta moltissime funzioni avanzate che stringono l’occhio a quelle già presenti su altri software coetanei.

71

Capitolo 4.0

Paragrafo 4.2 I software per la progettazione della UX Conoscere gli strumenti per la progettazione della User Experience rappresenta una vera e propria marcia in più persino per la progettazione di ogni singolo elemento che sarà, in ogni sua parte, sempre oggetto di studio e di analisi per una migliore interazione con l’utente finale. A tal proposito esistono molti strumenti per la UX e, a parte le caratteristiche oggettive di ognuno di essi, la preferenza circa l’uso di questi strumenti è spesso una questione soggettiva. Tutti gli strumenti digitali hanno alcune caratteristiche comuni e in generale, si possono dividere questi tipi di tool in due categorie: • 30. In informatica, (lett. “modello in fil di ferro”) indica un tipo di rappresentazione in computer grafica di oggetti tridimensionali.

72

•

quelli per la creazione di wireframe30 statici (normalmente esportati in immagini); quelli che gestiscono in maniera avanzata l’interattività e permettono la creazione di prototipi navigabili (fruibili come PDF o presentazioni online gestite dal software nativo).

CARTA E PENNA: L’approccio “Carta e penna” (o più spesso matita) è talvolta sottovalutato a favore di strumenti digitali, ma ha alcuni vantaggi poiché azzera i tempi di apprendimento legati al software da utilizzare (dal momento che sappiamo già scrivere e disegnare), la realizzazione fisica della bozza avviene in pochi minuti e si può usare in qualunque ambiente.

Inoltre, poiché il focus è appunto il contenuto e non la forma, non sono necessarie capacità artistiche particolarmente spiccate.

Finché si tratta di un progetto di dimensioni ridotte, personale o di un piccolo team, è possibile condividere le bozze su carta tramite foto, via chat o email.

Quando si lavora a progetti più complessi, di solito commerciali e/o in ambito aziendale, è bene avere anche dei file che possano fungere da documentazione e su cui si possa lavorare in maniera collaborativa senza paura

Progetto e prototipazione

di perdere le proprie bozze. Per questo motivo, dopo una rapida fase su carta per fissare le idee e i punti principali, in genere si passa ad un software di wireframing per produrre digitalmente le varie schermate.

DRAW.IO: Si tratta di una web app completamente

gratuita che si integra con la maggiorparte di servizi di Cloud Storage, permettendo altresì di salvare i wireframe sul proprio computer. Ha le funzionalità di base di un tool di wireframing, così come la libreria di componenti pronti divisi per categoria, permettendo l’esportazione in diversi formati. Purtroppo non permette di creare più pagine e non ha elementi interattivi (hotspots), quindi non permette di effettuare test di usabilità. Inoltre, è sempre necessaria una connessione ad internet per poterci lavorare. Per essere un’applicazione web, è comunque un buono strumento se ciò che si vuole sono solo wireframe statici.

MOCKPLUS: Mockplus è un’applicazione desktop per creare in modo veloce wireframe e prototipi, elaborati per varie piattaforme (mobile, web e desktop).

Ha un’interfaccia pulita, è potente ed ha una curva di apprendimento molto rapida. Offre una vasta libreria di componenti e widget31 interattivi pronti e aggiornati agli standard web contemporanei (pop-up panel, stack panel, scroll box, ecc…) e, come Balsamiq, ripropone uno stile “sketch”, con elementi disegnati a mano. Il plus di questo tool è la possibilità di creare e collegare pagine e componenti interattivi tramite drag & drop, di provarli immediatamente con una preview sui dispositivi reali (tramite QR code) e di condividere il progetto online tramite link. È diventata popolare per il suo mix di funzionalità potenti e facilità di utilizzo. Le sue potenti funzionalità legate alla parte di interaction design lo rendono di fatto un tool ottimo anche per i prototipi lo-fi, oltre che per i wireframe.

Il confine tra tool di wireframing e di prototipazione (o prototyping) è molto labile, e in alcuni casi le due cose si sovrappongono.

In ogni caso, il tool di prototyping si concentra sull’interazione piuttosto che

31. In informatica, nell’ambito della programmazione, è un componente grafico di una interfaccia utente di un programma, che ha lo scopo di facilitare all’utente l’interazione con il programma stesso.

73

Capitolo 4.0

sulla progettazione dell’interfaccia. In alcuni casi questi strumenti sono anche tool di wireframing, ma possono risultare più complessi perché hanno funzionalità aggiuntive necessarie per gestire anche il prototipo (che è ricco di interazioni e si deve avvicinare maggiormente al prodotto finito).

Anche in questo caso esistono diversi strumenti, che hanno in comune il fatto di creare schermate interattive senza che siano necessarie capacità di sviluppo di codice.

MARVELAPP: Marvel è una web-app32 che permette di

32. Dicesi web-app, un software utilizzabile tramite il proprio browser web impiegato per la navigazione in internet.

74

creare prototipi mobile e web in modo semplicissimo. È possibile importare diversi formati di immagini, tra cui anche Sketch e Photoshop, gestendo la sincronizzazione su cloud. Non permette la creazione di wireframe, di asset e di interazioni complesse, quanto piuttosto la gestione di link per navigare tra le schermate (immagini) e il supporto a gesti e transizioni.

Una funzionalità molto interessante è quella che consente di scegliere il frame del prototipo per crearne diversi in base al dispositivo (smartphone, iPad, desktop, Apple TV, Apple Watch e Android).

Essa, tuttavia, non permette il download dei file, ma è comunque possibile condividere in vari modi il lavoro per ricevere feedback. Le sue funzionalità sono veramente basiche, quindi non è adatto a tutti i progetti ma è facilissimo da usare, soprattutto per creare prototipi che necessitano solo di navigazione tra diverse pagine.

Progetto e prototipazione

INVISION: Anche InVision, come Marvel app, è una web

app e nasce per realizzare prototipi basati sulla navigazione tra diverse schermate tramite link (hotspot), sebbene non sia uno strumento adatto per produrre wireframe. Sempre come Marvel, permette di effettuare l’upload di immagini, integrando anche Sketch e Photoshop. Mette a disposizione anche “TETHR”, uno UI kit proprietario di InVision. I suoi punti di forza sono l’interfaccia pulita, la facilità di utilizzo (drag & drop33), la gestione multipiattaforma (desktop/web/mobile + touch), il controllo di versione, gli strumenti di condivisione e quelli collaborativi. La toolbar in basso che permette di accedere ai diversi “livelli” di gestione del prototipo (Preview, Build, Comment, History mode e Configuration) risulta molto utile nella modifica della singola schermata.

Le sue funzionalità permettono lo user test, ma richiedono sempre dei mockup da cui partire per le varie schermate.

AXURE RP: è il tool più usato a livello enterprise. Basato

su HTML, permette la creazione di prototipi responsive (sebbene non abbia template dedicati) e la gestione dei gesti su mobile. Ha tutte le funzionalità solide di un tool di prototyping standard: animazioni/transizioni, online sharing del progetto (su ambiente Axure Share), libreria di widget ed elementi di UI, permette di creare asset e wireframe. Ma anche molte funzionalità avanzate: interazioni data-driven, flow condizionali, contenuti dinamici e funzioni matematiche.

Due i punti di forza: la flessibilità che permette di personalizzare i componenti e l’interattività applicabile a singoli elementi che consente di creare comportamenti di interazione complessi. Per realizzare prototipi ad alta fedeltà è necessario importare dei mockup già fatti.

Axure è sicuramente un tool potente, di una categoria superiore rispetto a Marvel e InVision. Proprio per questo, però, risulta molto più complesso e sceglierlo significa investire molto più tempo nell’apprendimento del software e nella creazione e gestione dei prototipi.

33. Il drag-and-drop indica una successione di tre azioni, consistenti nel cliccare su un oggetto virtuale per trascinarlo in un’altra posizione, dove viene rilasciato.

75

Capitolo 4.0

76

Progetto e prototipazione

Figura 15. L’interfaccia di InVision, web-app per il wireframing e la prototipazione.

77

Capitolo 4.0

Figura 16. Wireframing dell’app Meitu, impiegata nel settore del benessere e della cosmetica.

78

Progetto e prototipazione

Figura 17. Wireframing in costruzione tramite Framer X (in alto) e MarvelApp (in basso).

79

Capitolo 5.0

Esempi di design system I migliori casi di design system di successo internazionale

Capitolo 5.0

Paragrafo 5.1 Google A cosa lavora il team di Google addetto al design? Difficile trovare una risposta sintetica e al tempo stesso esplicativa per questa domanda. L’azienda di Mountain View34 prova comunque a riassumere il proprio impegno con un filmato visibile in streaming: due minuti e mezzo in cui vengono passati in rassegna decine di progetti, dispositivi, servizi e piattaforme.

34. Cttà della contea di Santa Clara, California, Stati Uniti.

35. Servizio accessibile dal relativo sito web che consente la ricerca e la visualizzazione di carte geografiche di buona parte della Terra 36. Project Loon è un progetto di ricerca e sviluppo di Google X con l’obiettivo di fornire l’accesso a internet nelle aree rurali e remote delle Terra.

37. Google Doodle, ovvero versioni speciali del logo di Google per commemorare anniversari di eventi.

Il video si apre con quella che è stata la prima schermata del motore di ricerca, alla fine degli anni ’90, un logo ben lontano per canoni estetici da quello attuale e dalle linee guida del Material Design (vedi pag.84). Si arriva fino ad oggi attraverso l’intelligenza artificiale dell’Assistente Google, l’interazione con la riproduzione del pianeta in Maps35 e Earth, l’iniziativa Project Loon36 per combattere il digital divide, la traduzione di testi e scritte in tempo reale, le iniziative umanitarie messe in campo per supportare le popolazioni in difficoltà, le raccolte di emoji, gli algoritmi di machine learning, i programmi educativi, la realtà virtuale e quella aumentata, l’intrattenimento di YouTube, gli smartphone, gli smart speaker della linea Home per la casa, i doodle37 realizzati per celebrare le ricorrenze di tutto il mondo, il browser Chrome per la navigazione, la guida autonoma delle self-driving car, l’attività di Verily per la tutela della salute, la promozione culturale di Arts & Culture e molto, molto altro ancora.

Ognuno di questi progetti, dispositivi, servizi e piattaforme può dimostrare la propria efficacia solo passando attraverso lo studio di un design in grado di esprimerne al meglio le potenzialità. Questo è ciò che Google vuol far comprendere con questa rapida e intensa panoramica sul proprio business, oggi più che mai diversificato e ramificato. Il design non è solo l’insieme degli elementi che caratterizzano la scocca di un dispositivo o un’interfaccia per lo scambio dei dati: è un linguaggio, è un’espressione, è il punto di contatto e il canale di comunicazione tra chi da vita a un elemento e chi ne fruisce.

82

Esempi di design system

Figura 18. Frame del video realizzato da Google per riassumere storia e traguardi della famosa azienda di Mountain View, mostrando visivamente tutti gli eventi e le tecnologie alle quali Google ha preso parte.

83

Capitolo 5.0

38. Sistema operativo per dispositivi mobili sviluppato da Google Inc. e basato sul kernel Linux

84

MATERIAL DESIGN: unisce i principi del design classico con la tecnologia, per creare un modello di design intuitivo e naturale. Gli elementi del Material Design si parlano chiaramente pur essendo flessibili in ogni loro dettaglio.

Il primo obiettivo del Material Design di Google è creare un linguaggio visivo unificato che sia coerente per tutti i dispositivi, per tutte le piattaforme e le dimensioni degli schermi. Questa universalità è estremamente importante per una grossa azienda come Google che, a causa dell’ampiezza e degli innumerevoli ambiti di utilizzo, deve mantenere una coerenza costante.

Google è utilizzato e installato su una miriade dispositivi, dall’esordio di Android38 ad oggi.

In concomitanza con la sua diffusione massiva degli ultimi anni deve garantire un’esperienza sempre coerente indipendentemente dal dispositivo o dalla piattaforma di utilizzo.

Il secondo obiettivo di Material Design è quello di unire i principi del design classico con la tecnologia per creare un sistema di progettazione convenzionale ma innovativo.La natura intuitiva e semplice del Material Design deriva dalle radici minimaliste di Google. Uno dei motivi per cui Google è diventata così popolare, è stata la natura diretta e semplice della sua famosissima pagina di ricerca (all’epoca ogni altra pagina di ricerca era disseminata di pubblicità e informazioni irrilevanti).

Esempi di design system

Figura 19. Principi chiave del design di Google, Material, applicati alle interfacce mobile.

Si tratta di un esempio perfetto di design system poiché grazie alla sua natura intuitiva e al modello concettuale sul quale è costruito ogni singolo elemento, dal colore alla tipografia, l’esperienza minimalista resta sempre fluida e visivamente interessante.

Le linee guida di questo sistema sono state la fonte di ispirazione principale per moltissimi altri designer. Il valore intrinseco del Material Design è assolutamente valido, e lo si comprende dal modo in cui si abbina a modelli concettuali più generici piuttosto che specifici, per creare un’esperienza utente universalmente intuitiva.

85

Capitolo 5.0

Figura 20. Sezioni del sito material.io , la raccolta di tutte le linee guida di design (e non) dedicate al Material Design di Google.

86

Esempi di design system

87

Capitolo 5.0

Figura 21. Esempio di progettazione per dispositivi web e mobile di un interfaccia in stile Material Design.

88

Esempi di design system

89

Capitolo 5.0

Paragrafo 5.2 Apple Sono passati 40 anni da quando Steve Jobs e Steve Wozniak decisero di uscire dalle rispettive camerette per spostarsi nel garage di casa del primo e intraprendere una delle più grandi e rivoluzionarie avventure imprenditoriali e culturali dell’età moderna.Una rivoluzione, quella innescata da Apple, che ha origine nelle ossessioni personali di questi due ragazzi.

39. Città degli Stati Uniti nella contea di Santa Clara, in California.

40. Strumento realizzato da Apple disponibile per iPhone, iPod touch e iPad che permette agli utenti di scaricare e acquistare applicazioni disponibili in iTunes Store.

41. Progettista britannico.

Attualmente occupa la posizione di “Chief Design Officer” presso Apple, dove è anche supervisore del gruppo di design industriale e ha ruolo guida per il team Human Interface.

90

Se per Wozniak la sfida personale era riuscire ad aumentare esponenzialmente l’efficienza dei computer che progettava, cercando continuamente nuove soluzioni che integrassero al meglio l’interazione tra hardware e software – ancora oggi dogma alla base di ogni prodotto nato a Cupertino39 – Jobs applicava la sua ossessiva meticolosità a qualunque aspetto percettibile di Apple, non importa se si trattava di dover decidere dove apporre il punto dopo la P nel suo biglietto da visita, l’orientamento se da destra verso sinistra o viceversa di una catena di montaggio per la produzione di un computer o la tonalità di giallo di un’icona nell’App Store40.

Era sempre e comunque una questione di stile. Stile nello scrivere codice, stile nella scelta dei materiali, dei colori e, ovviamente, del design.

Apple non è stata la prima azienda nella storia a prestare un’attenzione particolare allo stile e al design ma nessun’altra è mai riuscita a integrarli e renderli un fattore imprescindibile nella scelta di acquisto di prodotti di largo consumo come i suoi. Prima del fatidico rientro di Steve Jobs in azienda agli inizi del 1997 nessun consumatore aveva mai badato all’aspetto di un personal computer, l’attenzione dedicata al design era la stessa riservata ad un frullatore o un aspirapolvere. Ed è proprio a quel tipo di elettrodomestici così famigliari che Jony Ive41 ha fatto riferimento per creare dispositivi come iPhone, iPod e iMac.

Esempi di design system

Ispiratosi ad uno dei più importanti designer tedeschi del XX secolo, Dieter Rams, direttore per oltre trent’anni del dipartimento design di Braun, Ive è riuscito a muovere leve emotive nei consumatori, completamente assenti invece negli scatoloni beige di fine secolo scorso, rifacendosi ad oggetti che molti avevano conosciuto fin da bambini in ambienti famigliari come la cucina o la sala da bagno. Il legame di Apple con il design industriale tedesco è frutto della passione di Steve Jobs per le macchine provenienti dalla Germania, come racconta Hartmut Esslinger42, disegnatore del primo Macintosh: «Steve non sapeva granché di design, ma gli piacevano le macchine tedesche. Facendo leva su questa connessione gli ho spiegato che un progetto del genere dovesse essere un pacchetto completo, esprimendo l’essenza più profonda del prodotto; una Porsche, senza un’esperienza di guida eccezionale e una reputazione per performance stellari, sarebbe soltanto un’altra bella macchina – ma non sarebbe una Porsche».

42. Fondatore di Frog Design, una delle agenzie di design e progettazione più conosciute a livello internazionale

Così come i prodotti Apple non sarebbero prodotti Apple senza quella meticolosa attenzione allo stile, alla qualità, al design e all’esperienza finale – doverosamente piacevole ed evocativa di momenti positivi - che una volta fece esclamare a Jobs, parlando dei bottoni di un’interfaccia utente: «sono venuti così belli che viene voglia di leccarli».

Oggi lo stile di Apple è diventato più essenziale, più materico. Con l’introduzione di Apple Watch e l’ingresso di Angela Ahrendts, ex-CEO di Burberry, l’attenzione è sempre rivolta all’eleganza ma con un occhio di riguardo al lifestyle che introduce in qualche modo un componente di futilità, fino ad oggi inedita, ad un’esperienza comunque tra le più gratificanti che la tecnologia possa procurare.

91

Capitolo 5.0

HUMAN INTERFACE GUIDELINES: contrariamente a Material Design, le

43. Antoine de Saint Exupéry, Terre des Hommes,1939

“Human Interface Guidelines” di iOS si concentrano sull’utilizzo efficace dei componenti standardizzati dell’interfaccia utente per creare un’esperienza focalizzata sul contenuto, chiara e accessibile. Le linee guida dichiarano i loro obiettivi come segue: Mantenere la chiarezza dell’interfaccia funzionale su tutte le dimensioni dei dispositivi; Garantire una costante attenzione ai contenuti attraverso la semplificazione degli elementi dell’interfaccia utente e creare profondità visiva e funzionale attraverso stratificazione, continuità e rilevabilità.

Questi obiettivi definiscono l’eleganza di Apple attraverso la funzionalità.

L’obiettivo della semplicità può essere messo in relazione con una citazione di Terre des Hommes: “La perfezione è finalmente raggiunta non quando non c’è più nulla da aggiungere, ma quando non c’è più nulla da togliere”43.

Apple trova il suo design attraverso la semplificazione della funzionalità piuttosto che viceversa

92

Esempi di design system

Il valore che Apple attribuisce alla funzionalità può essere visto attraverso il primo obiettivo delle HIG. In tutte le applicazioni, tutti i componenti devono essere il più chiari possibile. La tipografia, le icone e gli ornamenti devono essere leggibili ed evidenti a qualsiasi dimensione e servono a evidenziare i contenuti e trasmettere il concetto di l’interattività.

Mantenere la chiarezza visiva su tutte le diverse dimensioni deegli schermi è particolarmente importante nel caso di Apple.

L’App Store è universale su tutti i dispositivi Apple e pertanto le applicazioni devono essere reattive alle dimensioni di telefoni, tablet e laptop pur offrendo sempre funzionalità eccezionali.

E la reattività è il primo passo fondamentale per garantire una chiarezza costante in tutti i prodotti dell’azienda. Questo è l’obiettivo di Apple.

93

Capitolo 5.0

Figura 22. Sezioni del sito Apple, nelle sezioni dedicata alla raccolta di tutte le linee guida di design (e non) del Human Interface Guidelines dell’azienda di Cupertino.

94

Esempi di design system

95

Capitolo 5.0

Figura 23. Alcuni componenti grafici delle interfacce mobile per i dispositivi Apple.

96

Esempi di design system

97

Capitolo 5.0

Paragrafo 5.3 Airbnb Nel 2009, Airbnb era vicino al fallimento. Come tante altre start-up, avevano lanciato la prima versione dell’app, ma quasi nessuno se ne accorse.

Le entrate dell’azienda sono state piatte a 200 dollari circa a settimana.

Gli incassi, divisi tra tre giovani fondatori di San Francisco, portavano a perdite quasi indefinite e crescita zero. Come tutti sanno, gli investitori dei fondi venture capital cercano aziende che mostrino grafici promettenti e, secondo il co-fondatore Joe Gebbia, la sua azienda aveva un grafico decisamente sottotono. Fu così che il team si ritrovò costretto a massimizzare le spese tramite le proprie carte di credito.

44. Y Combinator è considerato l’acceleratore di startup più importante al mondo. Y Combinator ha investito in più di 1000 startup cumulato un aggregato di valorizzazioni per 65 miliardi di dollari YC companies con exit importantissime (e miliardarie) come Dropbox, Airbnb, Instacart, Weebly,

In quel momento, Airbnb faceva parte di Y Combinator44. Un pomeriggio, la squadra stava studiando i risultati delle ricerche sulle inserzioni di New York City con Paul Graham, cercando di capire cosa non funzionasse e perché non stavano crescendo. Dopo aver trascorso del tempo sul sito, utilizzandolo in maniera approfondita, Gebbia ha avuto un illuminazione: «Abbiamo notato uno schema. C’è qualche somiglianza tra tutti questi 40 annunci. La somiglianza è che le foto attirano, e le foto non erano delle ottime foto. Le persone stavano utilizzando i loro telefoni con fotocamera. In realtà non fu una sorpresa scoprire che le persone non prenotavano le camere, perché non riuscivano a vedere realmente quello per cui pagavano.»

Graham ha gettato le basi per una soluzione completamente non scalabile e non tecnica al problema: recarsi a New York, noleggiare una videocamera, passare un po ‘di tempo con i clienti che elencano le proprietà e sostituire la fotografia amatoriale con bellissime immagini ad alta risoluzione.

Sono andati e l’hanno fatto. Una settimana dopo, i risultati erano: migliorare le immagini raddoppiando il fatturato settimanale a $ 400 a settimana.

Questo fu il primo miglioramento finanziario che la compagnia aveva visto in oltre otto mesi.

98

Esempi di design system

Questo è stato il punto di svolta per l’azienda. Gebbia ha condiviso che inizialmente il team credeva che tutto ciò che facevano doveva essere “scalabile”. Solo quando si concedevano il permesso di sperimentare cambiamenti non scalabili per l’azienda, uscivano da quello che chiamavano il “fondo del dolore”. ‘

Figura 23. Brian Chesky, Nathan Blecharczyk e Joe Gebbia. Soci fondatori di Airbnb.

99

Capitolo 5.0

DESIGN LANGUAGE SYSTEM: Kari Saarinen, Principal Designer di Airb-

nb ha lavorato alla progettazione e alla manutenzione dell’attuale design system soprannominato “Design Language System” per via del suo approccio.

L’obiettivo fissato per il Dls era quello di creare un linguaggio di design più bello e accessibile dei precedenti. I progetti dovevano essere unificati per aumentarne l’efficienza attraverso componenti ben definiti, riutilizzabili e multipiattaforma.

Invece di affidarsi ai singoli “atomi” (o sull’atomic design), il team ha iniziato a considerare i propri componenti come elementi di una sorta di organismo vivente. Ognuno di essi ha una sua funzione e una personalità, definita da un insieme di proprietà, possono coesistere con gli altri e possono evolvere (o “morire”) indipendentemente. Questo è uno dei punti chiave del sistema rispetto a quello più atomico: non esiste una rete complicata di parti e componenti interconnessi.

100

Ogni componente è definito dagli elementi richiesti (come titolo, testo, icona e immagine) e talvolta può contenere elementi facoltativi. Questi ele-

Esempi di design system

Figura 24. Esempi di impostazione delle “card” impiegate nell’app ufficiale di Airbnb.

menti sono entrambi definiti nel file di progettazione e nel codice.

Il sistema di design di Airbnb è in gran parte indipendente dalla piattaforma.

La maggior parte dei componenti funziona e ha lo stesso aspetto sia su iOS che su Android. Il team ha ricercato soluzioni di design che possano integrarsi su piattaforme diverse seguendo comunque alcune convenzioni su elementi importanti come la navigazione, l’iconografia di sistema, le azioni contestuali e le interazioni. Ad esempio, la barra di navigazione Android è leggermente diversa e utilizza un’icona diversa da quella di iOS. Oggi il DLS di Airbnb è applicato a tutte le interfacce web e mobile ed è utilizzato da tutta l’organizzazione, da dozzine di progettisti e ingegneri.

101

Capitolo 5.0

Figura 25. Sezioni dell’applicazione Airbnb, suddivisi per tipologia e sezione di appartenenza.

102

Esempi di design system

103

Capitolo 5.0

Figura 26. Le linee guida di design principali del brand Airbnb e di alcune caratteristiche riguardanti testo, palette colori e scale modulari.

104

Esempi di design system

105

106

107

108

Conclusioni Attraverso l’analisi di ogni singolo oggetto costituente del design system, si può dunque constatare come, ad oggi, la costruzione di un sistema visuale sempre aggiornato, usufruibile e coerente, rappresenti un grosso supporto in termini di lavoro di squadra all’interno dei team di progettazione e una semplificazione delle dinamiche progettuali appartenenti al settore del design e dello sviluppo dei componenti visivi legati ad un prodotto o ad un servizio molto vasto, modificando radicalmente l’approccio con il quale avviene la riproduzione degli elementi e degli attributi durante la costruzione in scala di una funzione o la modifica di una variabile all’interno di un singolo oggetto che poi correggerà e influenzerà tutta l’esperienza utente durante il processo interattivo.

109

Bibliografia Ambrose Gavini e Paul Harris, Il libro del layout, Storia, principi, applicazioni, Zanichelli, Bologna, 2009.

Baroni Daniele, Il manuale del design grafico, (“La vostra via”), Longanesi & C., Milano, 2015.

Jesse James Garrett, The Elements of User Experience: User-Centered Design for the Web and Beyond, Second Edition, New riders, Berkeley, 2011.

Guida Francesco, Identità visive generative, Programmare la corpo- rate identity, STS Italia Publishing, Milano, 2014.

Grizzanti Gaetano, Brand identikit, Trasformare un marchio in una marca, Fausto Lupetti Editore, 2011.

Alan Cooper Robert Reimann David Cronin Christopher Noessel with Jason Csizmadi and Doug LeMoin, About Face, The Essentials of Interaction Design - Fourth Edition, John Wiley & Sons, Inc., Indianapolis, 2014.

Aarron Walter, Designing for Emotion, Jeffrey Zeldman, New York, 2011.

Alla Kholmatova, design systems, A practical guide to creating design languages for digital products, Smashing Media AG, Freiburg Germany, 2017.

Rauch Andrea, Il racconto della grafica. Storie e immagini del graphic design italiano e internazionale dal 1890 a oggi, (“I libri di Omar”), La casa di Usher, Firenze, 2017.

110

Sitografia Brad Frost, Atomic Web Design, in “http://bradfrost.com/blog/post/atomic-web-design/”, 2013.

Edsger Dijkstra, The Humble Programmer, in “https://it.wikipedia.org/wiki/Software_crisis”, 2017.

Cristiano Rastelli, Measuring the Impact of a design system, in “https://medium. com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7”, 2019.

Nathan Curtis, Team Models for Scaling a design system, in “https://medium.com/ eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0”, 2015 Naema Baskanderi, How to Build a design system with a Small Team, in “https:// medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac”, 2018.

Cristiano Ghidotti, Il design secondo Google, in “https://www.webnews. it/2018/04/26/design-google/”, 2018.

Dieter Bohn e Ellis Hamburger, Redesigning Google: how Larry Page engineered a beautiful revolution, Committee by design, in “https://www.theverge. com/2013/1/24/3904134/google-redesign-how-larry-page-engineered-beautiful-revolution”, 2013.

Andy Crestodina, Web Design Standards, in “https://www.orbitmedia.com/blog/ web-design-standards/”, 2015.

Alexis Croswell, Employee Feedback Examples: Evolving On Performance Reviews, in “https://blog.cultureamp.com/employee-feedback-examples”.

Jes Kirkwood, How to give designers feedback they can actually use, in “https:// www.invisionapp.com/inside-design/give-designers-feedback/”, 2018.

Andrea Carraro, I primi 40 anni di Apple: l’evoluzione del design, in “https://icondesign.it/storytelling/apple-40-anni-design/”

111