Il Material Design: parte II

Il design di oogle

In questo precedente articolo avevamo parlato degli strumenti messi a disposizione dal Material Design, al fine di modernizzare l'interfaccia grafica di una determinata applicazione mobile (ma non solo). Oggi invece andremo a vedere in maniera essenziale gran parte delle tecniche di design di questo sistema adattivo di linee guide.

• Le superfici

Nel principio, il Material Design si inspira al mondo reale e alle trame, quindi come esse riflettono la luce e proiettano le ombre. Il Material quindi ripropone digitalmente tutto quello che avviene su carta e inchiostro. Nel mondo fisico, gli oggetti possono essere impilati o attaccati l'uno all'altro, ma non possono passare l'uno attraverso l'altro. Proiettano ombre e riflettono la luce. L'interfaccia grafica del Material Design viene impiegata in uno spazio tridimensionale (3D) utilizzando luce, superfici e ombre proiettate. Tutti gli elementi nell'ambiente Material Design si muovono orizzontalmente, verticalmente e a profondità variabili lungo l'asse z. Sul Web, l'interfaccia grafica espressa dallo spazio 3D viene manipolata tramite l'asse y.

• L'elevazione

Una tecnica di design ben nota è detta "elevazione", ossia la relativa distanza tra due superfici lungo l'asse Z: la distanza dalla parte anteriore di una superficie alla parte anteriore di un'altra viene misurata lungo l'asse Z in pixel indipendenti dalla densità (dps) e raffigurata (da default) utilizzando le ombre.

• I layouts

Per quanto riguarda i layouts, il Material Design incoraggia la coerenza tra piattaforme, ambienti e dimensioni dello schermo utilizzando elementi e spaziatura uniformi. Questo significa che usa layouts intuitivi e prevedibili con aree dell'interfaccia utente coerenti (per quanto riguarda l'uso delle griglie, il padding e le keylines) e organizzazione spaziale. Infine i layouts sono adattivi e reagiscono all'input di un utente, di un dispositivo e di elementi dello schermo (responsive).

• La navigazione

Parlando della navigazione, quindi il modo in cui l'utente può muoversi all'interno di una app, esistono tre tipi per poterla fare: navigazione laterale (permette di spostarsi tra schermate dello stesso grado di gerarchia), navigazione successiva (permette di spostarsi alla consecutiva schermata con un grado di gerarchia più elevato) ed infine la navigazione inversa (permette di spostarsi cronologicamente alla schermata precedente rispetto a quella attuale, indipendentemente dal grado di gerarchia).

• Il sistema dei colori

Il sistema dei colori di Google può aiutare notevolmente a mettere in risalto il tuo brand o il tuo stile, poichè nulla viene lasciato al caso. In questo sistema, selezioni un colore primario e un colore secondario per rappresentare il tuo marchio. Le varianti scura e chiaro di ogni colore possono quindi essere applicate all'interfaccia utente in modi diversi. Il colore indica quali elementi sono interattivi, come si relazionano con altri elementi e il loro livello di rilievo. Gli elementi importanti dovrebbero distinguersi di più. Il testo e gli elementi importanti, come le icone, dovrebbero soddisfare gli standard di leggibilità quando appaiono su sfondi colorati. Mostra i colori del marchio in momenti strategici che rafforzano lo stile del tuo marchio.

• La topografia

Il sistema di topografia, come quello dei colori, non è da sottovalutare. Per pensare e puntare in grande non bisogna trascurare nulla e tutto parte da questi dettagli. Usa la tipografia per presentare il tuo design e i tuoi contenuti nel modo più chiaro ed efficiente possibile. Quindi, quando si parla di tipografia si sta parlando di font e tendezialmente il miglior in questi casi è Roboto, però senza escludere anche Open Sans, Noto Sans JP, Lato, Montserrat e molti altri ancora.

• I suoni

Passando ai suoni, essi comunicano le informazioni in modi che migliorano l'esperienza dell'utente. Detto questo dovrebbero essere intuitivi, funzionali e comprensibili. Il suono dovrebbe essere un'autentica rappresentazione dell'identità e dell'estetica del marchio del prodotto. Il suono dovrebbe creare un senso di comfort e sicurezza, richiedendo un'azione solo quando necessario.

• Le icone

Le icone dei prodotti sono l'espressione visiva di un marchio e di un prodotto, inclusi i loro servizi e strumenti. Le icone comunicano l'idea e l'intento di base di un prodotto in modo semplice, audace e amichevole. Mentre ogni icona è visivamente distinta, tutte le icone dei prodotti per un marchio dovrebbero essere unificate attraverso il concetto e l'esecuzione.

• Le forme

Le superfici possono essere visualizzate in forme diverse. Le forme indirizzano l'attenzione, identificano i componenti, comunicano lo stato ed esprimono il marchio. Una tecnica di design è denominata morphing, cioè l'atto di cambiare una forma in un'altra. Le forme possono trasformarsi in risposta a modifiche dello stato o del contenuto o come risultato dell'interazione dell'utente. Ad esempio, quando si ruota un dispositivo mobile dal verticale al orizzontale, le superfici possono rispondere modificando le dimensioni, il che può causare il morphing delle forme. Un altro esempio viene illustrato nel video seguente, nel quale la bottom app bar viene modificato nella sua forma da un floating action button.

• Il Motion Design

Il movimento aiuta a rendere un'interfaccia utente espressiva e facile da usare.

• Le gesture

Le gesture permettono all'utente di interagire nell'ambiente mediante il tocco, ergo aiutano gli utenti a spostarsi facilmente all'interno di un prodotto. Integrano altri metodi di input espliciti, come pulsanti e componenti di navigazione. I gesti di spostamento includono:

• Tap: gli utenti possono raggiungere le destinazioni mediante un semplice tocco;
• Long press: questo gesto (un tap premuto più a lungo rispetto al classico tap) può rivelare modalità e funzionalità aggiuntive, ma non sono facilmente individuabili;
• Scroll and pan: gli utenti possono far scorrere le superfici verticalmente, orizzontalmente o omnidirezionalmente per spostarsi continuamente attraverso il contenuto;
• Drag: gli utenti possono far scorrere le superfici (o gli elementi) per portarle dentro e fuori dalla view;
• Swipe: gli utenti possono spostare le superfici orizzontalmente per spostarsi tra una scheda e l'altra, come i tabs;
• Pinch: gli utenti possono ridimensionare le superfici per spostarsi tra le schermate o per zoomare un elemento in particolare;
• Double tap: simile al pinch, i doppi tocchi consentono agli utenti di ingrandire il contenuto o passare da un livello di zoom all'altro.

• Conferma e riconoscimento

Le comunicazioni di conferma e riconoscimento chiedono conferma prima di intraprendere un'azione e riconoscono le azioni di successo. Confermare e riconoscere le azioni degli utenti può ridurre l'incertezza su un'azione che un utente ha intrapreso o sta per intraprendere. Impediscono inoltre agli utenti di commettere errori.
La conferma delle azioni chiede all'utente di verificare che desideri procedere con un'azione.
Le azioni di riconoscimento forniscono testo per indicare all'utente se un'azione scelta è stata completata. Non tutte le azioni giustificano una conferma o un riconoscimento.

• La Machine Learning

La Machine Learning (ML) offre ai dispositivi la possibilità di effettuare previsioni ed eseguire attività senza istruzioni specifiche. Esempi conosciuti ormai da tutti possono essere: la live camera (si accede alla fotocamera in tempo reale per identificare oggetti nel mondo reale), l'object detenction (simile alla live camera ma in questo caso viene utilizzata una foto per identificare un oggetto del mondo reale), il barcode scanning (un modo semplice e conveniente per trasferire dati complessi o strutturati dal mondo reale a un dispositivo) e come non citare l'ormai famosissimo QR code scanning.

• Il Material Theming

Il Material Theming si riferisce alla personalizzazione della tua app per riflettere meglio il marchio del tuo prodotto. Quando inizi a modificare aspetti dell'interfaccia utente, ad esempio il colore e la tipografia, il Material Theming applica la tua visione di progettazione in tutta l'User Experience. Questo strumento consente un facile passaggio tra flussi di lavoro di progettazione e codice fornendo valori specifici per tutti gli attributi personalizzabili. La personalizzazione di questi valori crea un tema univoco per il prodotto.