In linea col proprio mantra “focus on the user, all the rest will follow”, Google ha creato un linguaggio visivo essenzialmente incentrato sull’utente e le sue interazioni. Si chiama Material design ed è stato ufficialmente introdotto alla conferenza Google I / O del 2014: il nome deriva dal concetto stesso …
Il Material Design è uno stile, un codice, un linguaggio di design sviluppato da Google supportato nativamente a partire da Android 5.0.
Il Google material design è in qualche modo anche un linguaggio, che al posto di grammatica e sintassi utilizza transizioni, padding, effetti di profondità, tipografie tipiche: si tratta infatti di un sistema completo di design, studiato per fornire standard e risorse univoche per lo sviluppo multi-dispositivo (desktop, tablet o smartphone). Il suo scopo è proprio quello di fornire gli standard di progettazione specifici per lo sviluppo di applicazioni su dispositivi Android, Web e iOS.
Abbiamo accennato alla metafora sottesa al nome stesso del “material design”: un vero e proprio “materiale” digitale, basato su una realtà tattile, connessa con il senso dello spazio, con il tatto, ispirato allo studio della carta e dell'inchiostro ma -rispetto alle gabbie fisiche di carta e inchiostro- più aperto e creativo nel comportamento e nelle reazioni all’interazione.
A differenza della carta reale, il “material” può essere diviso, riorganizzato e spostato se necessario.
Ma esattamente come la carta, al momento dell'interazione, del tocco dell’utente, è in grado di offrire un'esperienza più realistica.
Attributi come ombre e spigoli forniscono spunti visivi. L'uso di attributi tattili familiari al cervello umano (indizi su come l'oggetto deve essere usato), aiuta gli utenti a comprendere rapidamente e intuitivamente le possibilità dell’oggetto.
Perché Google ha sentito la necessità d’introdurre il material design?
Pensiamoci: c’era già il flat design, l’approccio skeuomorfico. Perché introdurre un altro paradigma, per quale vantaggio?
Google risponde piuttosto chiaramente: il flat design? Bello, minimal - forse troppo.
Le interazioni sono limitate, quasi inesistenti le animazioni.
Lo skeuomorfismo poi, diventa critico nei tempi di caricamento.
Il Material Design nasce dunque per superare questi limiti: offrire palette di colori ampie, maggior varietà di iconografie e forme, spunti visivi più complessi, animati, interattivi al tatto.
Veniamo ora ai dettagli.
Che soluzioni ci propone, in pratica, il Material Design?
Gli elementi di la tipografia, le tabelle, l’uso degli spazi, le scale di colore sono progettate per creare gerarchia, attribuire significati, focalizzare l’attenzione.
La qualità dell’esperienza utente aumenta grazie alle scelte di colore, delle immagini end to end e dello spazio bianco intenzionale.
Il movimento, l’animazione, non è casuale, sottende invece un vero e proprio significato: è anzi forse la parte migliore del design finale, in quanto non interrompe in alcun modo l'esperienza dell'utente, ma la semplifica rendendola intuitiva, scorrevole.
L'animazione gioca il ruolo fondamentale di mettere l’utente al centro, farlo sentire motore principale dell’azione mentre si muove nell’applicazione, avviandone le azioni.
Grazie al movimento ed al conseguente feedback visivo, l’utente si sente realmente connesso a ciò che ha fatto, prende coscienza dell’intenzionalità della sua azione.
Oltre ai componenti dell'interfaccia utente, l’approccio “material” offre anche molti modelli per migliorare l'interfaccia utente: pattern che migliorano l'interfaccia utente creata con i componenti base. Alcuni modelli disponibili includono menu di navigazione, check di conferme/riconoscimento, schermate di avvio, effetti di scorrimento, ricerca, impostazioni, caricamento delle immagini, scorrimenti.
Il colore è l’elemento più distintivo di un’applicativo, ed è percio fondamentale sia per il designer che per l’utente.
Lo scopo di un colore va decisamente oltre il “rendere gradevole l'aspetto dell'applicazione”.
I colori hanno una loro semantica, che il buon designer conosce e tiene a mente, e possono aiutare l’utente nella navigazione funzionale, oltre che nel gradimento estetico o nel riconoscimento di un marchio.
Il material design mette a disposizione una collezione di colori e relative palette che possono essere utilizzati all’interno dell'interfaccia utente.
Le icone sono diventate uno strumento di comunicazione universale: ormai presenti ovunque, ci aiutano a riconoscere il prodotto con "emoji" anziché con parole.
Utilizzate correttamente, miglioreranno l'usabilità ed il design dell’applicazione.
Il material design classifica le icone come due set:
È difficile immaginare un mondo senza testi.
Un testo conciso, leggibile e gerarchico rende l'interfaccia utente più navigabile, la lettura scorrevole, per campi. Sappiamo poi il ruolo centrale che i testi giocano nella SEO, essendo di fatto gli unici dati che possiamo dire con certezza che i motori di ricerca sono in grado d’interpretare.
Roboto e Noto sono i caratteri tipografici standard su Android e Chrome, progettati e sviluppati per gestire l'utilizzo multipiattaforma e la loro traduzione in diversi contenti di layout tipografico (full width, colonne, etichette, bottoni, tag e chi più ne ha più ne metta).
La progettazione material non manca di fornire linee guida precise per gestire la scrittura dei diversi elementi dell'interfaccia utente.
Il layout “material” si basa sui principi del design a stampa.
Ne utilizza alcuni strumenti come griglie di base e modelli strutturali per migliorare la coerenza tra gli ambienti. Questi layout sono in grado di creare app scalabili che possono adattarsi a qualsiasi dimensione dello schermo.
Tra i componenti base previsti dal material design:
I vantaggi del Material Design? Perché abbiamo deciso di sfruttarlo nella progettazione di applicazioni web e mobile?
Categorie:
