#SPEAKABEET about MATERIAL DESIGN
Speakabeet: la rubrica in cui parliamo dei massimi sistemi del mondo digitale, del flusso delle maree di caffè e della rotazione giornaliera della sedia del Programmatore sul proprio asse. #Coding #Design #DigitalLife
Dal 2014 Google con il suo design system ha settato quasi uno standard nel design di interfacce, scavallando l’ostinazione dello Skeuomorphism (Scheomorfismo), tanto amato da Apple e Microsoft. Azzardo a chiamarlo “standard” poichè il Material Design è ormai onnipresente: se solo si apre una qualsiasi app approdata in uno store, 2 su 3 sicuramente seguiranno il design system di Google.
Presentazione
“Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies. We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. A material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic. This is material design.”
Il 25 giugno 2014 Google svela il concept del suo progetto “Quantum Paper” (nome in codice) durante la sua annuale conferenza: il Material Design. Il termine riferisce al design system il cui concept, come il designer Matías Duarte ha spiegato nel Google keynote di presentazione nel 2014 nasce da carta e inchiostro e che “a differenza della carta reale, il nostro materiale digitale può espandersi e riformarsi in modo intelligente. Material ha superfici e bordi fisici. I layer e le ombre forniscono un significato su ciò che puoi toccare.”
Dalla carta allo schermo
What is the material that our software is made of?
— Jon Wiley, Principal Designer
Il dietro le quinte dell’ideazione del Material Design mostra le voci di chi ha creato il concept e il design system: Jon Wiley, Principal Designer, fa un’importante riflessione sull’esperienza prima della progettazione: “il modo corretto per fare cose è scontrarsi con esse, dato che difficilmente ci preoccupiamo della composizione fisica di esse. Perchè non le prendiamo e vediamo di cosa sono fatte? Perchè non vediamo di che materiale è fatto il nostro software?”
Da qui è nata l’idea di provare a creare una superfice “quantica” che dia la sensazione di essere tattile, come la carta.
Jonathan Lee, Designer Manager, mostra infatti la similitudine tra l’esperienza utente di un libro e l’approccio che le persone hanno nel mantenere e usare un device tecnologico.
Il team di Google ha sperimentato quindi con un set di luci a 45 gradi e tavole sovrapposte, aventi un determinato spazio, come agiscono le ombre su piani (surfaces) e come la loro profondità e intensità comunica la gerarchia dei piani.
Questo sistema infatti non utilizza soltanto x e y per determinare un piano ma anche la z: la z infatti è il parametro che, come descritto sopra, determina la gerarchia dei piani che influisce sull’attrazione magnetica dell’utente verso un’azione.
Il FAB, floating action button, ad esempio, è quell’elemento posizionato sopra le parti, “fluttuante” (floating), che concentra in sè tutte le possibili azioni (action) in quello spazio e nella sua forma circolare invita l’utente ad essere premuto (button).
Google infatti ha sintetizzato il concept in 9 principi:
- Material is the metaphor: una metafora materiale è la teoria unificante di uno spazio razionalizzato e un sistema di movimento. Il nostro materiale è basato sulla realtà tattile, ispirato al nostro studio di carta e inchiostro, ma aperto all’immaginazione e alla magia;
- Surfaces are intuitive and natural: le superfici e i bordi forniscono segnali visivi fondati sulla nostra esperienza della realtà. L’uso di attributi tattili familiari parla alle parti primarie del nostro cervello e ci aiuta a capire rapidamente le convenienze;
- Dimensionality affords interaction: i fondamenti di luce, superficie e movimento sono fondamentali per comunicare l’interazione degli oggetti. L’illuminazione realistica mostra le giunture, divide lo spazio e indica le parti in movimento;
- One adaptive design: un unico sistema di progettazione sottostante organizza interazioni e spazio. Ogni dispositivo riflette una diversa visione dello stesso sistema sottostante. Ogni vista è adattata alle dimensioni e all’interazione appropriate per quel dispositivo. Colori, iconografia, gerarchia e relazioni spaziali rimangono costanti;
- Content is bold, graphic, and intentional: il design audace crea gerarchia, significato e attenzione. Scelte cromatiche deliberate, immagini piene, tipografia su larga scala e spazio bianco intenzionale creano immersione e chiarezza;
- Color, surface, and iconography emphasize actions: l’azione dell’utente è l’essenza del design dell’esperienza. Le azioni primarie sono i punti di flesso che trasformano l’intero progetto. La loro enfasi rende immediatamente evidente la funzionalità di base e fornisce un waypoint per l’utente;
- Users initiate change: i cambiamenti nell’interfaccia prendono la loro energia dalle azioni dell’utente. Il movimento che deriva dal tocco rispetta e rafforza l’utente come motore principale;
- Animation is choreographed on a shared stage: tutte le azioni si svolgono in un unico ambiente. Gli oggetti vengono presentati all’utente senza interrompere la continuità dell’esperienza anche mentre si trasformano e si riorganizzano;
- Motion provides meaning: il movimento è significativo e appropriato, serve a focalizzare l’attenzione e mantenere la continuità. Il feedback è sottile ma chiaro. Le transizioni sono efficienti ma coerenti.
Conclusione
In sintesi, Google con il Material Design ha voluto sperimentare un nuovo modo di concepire l’esperienza utente: creare un design system timeless basato su principi sempre attuali, derivante dall’esperienza fisica della realtà e sintetizzato per essere intuitivo e autoparlante. Insomma, un design system che ancora oggi nel 2020 non ha rivali… o almeno, il neomorfismo (neumorphism) ci sta provando ad esserlo.
Link Utili
Letture Consigliate
#SPEAKABEET about UI, Anna Grazia Longobardi x weBeetle, 2019
#SPEAKABEET about UX, Anna Grazia Longobardi x weBeetle, 2019
