Ciao ciao Material Design

Considerando Material Design per il tuo prossimo progetto? Per favore, ripensaci.

“Crystal Gradation” di Paul Klee (1921)

Prima di leggere…

Se ritieni di essere troppo sensibile per leggere un testo scritto con un pensiero critico, ti preghiamo di essere consapevole se hai intenzione di lasciare un commento. Ci sono stati così tanti commenti che sono solo prodotti di una strana connessione condizionata a questo "strumento", che ha portato gli autori a scrivere un testo irrilevante, con una reazione emotiva. Ricorda che nessuno strumento è perfetto e criticarli aiuta solo a migliorare e il mondo diventa un posto migliore. Inoltre, per lo meno, ricorda che questo è un articolo di opinione (a differenza di molti altri sul web) con cui hai tutto il diritto di non essere d'accordo.

Ciò che le linee guida di progettazione come Material Design (di seguito MDG) hanno cercato di raggiungere è stato il primo a servire gli interessi del suo creatore; per così dire Google per cui MDG è stato creato per e da. Quindi, e di conseguenza, doveva creare una sorta di alfabetizzazione web per gli utenti finali del WWW. Questa alfabetizzazione web significa fondamentalmente creare abitudini di utilizzo per le persone che consumano informazioni di base ogni giorno e nel frattempo girano su piattaforme diverse, senza consumare e produrre continuamente dati.

Il World Wide Web è una giungla gigante. Tutto è solo un fattore di rumore in un cosmo infinitesimale, proprio come nella natura stessa.

Prima di tutto decostruiamo perché Material Design non è adatto per la maggior parte delle applicazioni, almeno per il resto del 21 ° secolo.

Fondazione sbagliata

L'MDG è stato costruito non con una conoscenza del design così approfondita che si estende nel corso dei secoli (Gestalt, Vitrivius ecc.). È stato costruito semplicemente con una relazione con il materiale nel mondo reale, da cui il nome ... Ciò che hanno considerato e cercato di replicare sono stati i fenomeni della vita reale del materiale, principalmente della carta, per essere il materiale dell'alfabetizzazione (immagino).

Questo è un approccio prematuro, superficiale e probabilmente errato per la progettazione per il web. Perché? Il motivo principale è che la percezione delle informazioni differisce molto da carta (e) a schermo (s), e non solo tra questi due concetti giganti; ma anche contesti diversi all'interno di ciascuno di questi ambiti.

Prima di tutto, per "carta" e "inchiostro"; a cosa ti riferisci? Ti riferisci a un giornale, una rivista, un romanzo, un'enciclopedia o un libro di illustrazioni, un libro per bambini, un cartone animato, un poster o un cartello o cosa? Tutti questi regni hanno i loro principi di progettazione distinti individualmente per la loro implementazione che non possono nemmeno essere scambiati tra loro. Quindi come puoi prenderlo interamente e applicarlo a uno completamente diverso?

E il web, di per sé, è un regno gigante che è molto distinto.

Shade Porn

MUI ha questo componente cartaceo che è ovunque. In nessun'altra soluzione che ho visto, le informazioni visive sono popolate per impilare le cose l'una sull'altra. Voglio dire, non tagliare pezzi di un giornale e impilarli uno sopra l'altro mentre leggi una domenica mattina, vero?

Controlla questo dalla Google Cloud Platform che utilizza MDG:

Cerca di dare un senso allo spazio 3D virtuale creato senza motivo, ma una confusione causata da elementi che cercano di attirare l'attenzione degli utenti simulando una distanza illusoria all'occhio degli spettatori ...

Non ti conosco, ma non voglio che una pagina web appaia come se diverse persone stessero cercando di vendermi cose diverse allo stesso tempo in un bazar.

Un utente ha un'attenzione in qualsiasi momento, e questo è meglio rispettato da qualsiasi dato mezzo con cui interagisce temporaneamente.

Un altro esempio è questo davvero interessante ma strano. Riesci a trovare l'illusione di questa immagine qui sotto?

La barra dell'app (in alto) appare sopra il wrapper principale, ma non la navigazione; che appare della stessa altezza dell'involucro. Allora, come è possibile nel mondo reale?

Puoi rimanere bloccato in questo e non arrivare mai da nessuna parte, proprio come in MDG

Il motivo per cui volevo condividere queste informazioni particolari è che in realtà è al di là della copertura di questo esempio. L'uso del componente cartaceo in MDG e quindi MUI è onnipresente e, a causa di tutte le sfumature fornite, i progettisti e gli sviluppatori dovranno probabilmente affrontare tali problemi che dovranno risolvere, se scelgono di adottare MDG.

Interazione uomo-macchina

Gli MDG sono stati realizzati principalmente (ma non esclusivamente) per dispositivi mobili (in particolare per le app Android su Play Store). Mobile non significa solo "schermi più piccoli". Significa anche interazione con dito vs mouse. Il dito è molto più grande del mouse e ha diverse sensibilità e azioni implementate per funzionare su un dispositivo e il suo schermo. Inoltre significa che le operazioni che possono essere eseguite in una schermata sul cellulare sono molto più limitate rispetto a quelle sul desktop a causa di problemi di dimensioni. Ci sono così tanti dettagli che MDG e MUI affrontano bene, ma questi non corrispondono necessariamente alle esigenze della maggior parte delle applicazioni e al contesto.

Se stai sviluppando un'app principalmente per Android o in genere su dispositivi mobili e non hai molte risorse di progettazione; puoi sicuramente beneficiare dell'adozione dell'MDG. Tuttavia è molto incoraggiato a garantire di non prendere tutto come è concesso e di personalizzarlo in base alle proprie esigenze. Tuttavia, ciò potrebbe richiedere più tempo rispetto alla creazione di linee guida ispirate a tutte le altre ...

Indicatori di feedback travolgenti

Devo prima ammettere che questo è stato un buon modo per indicare agli utenti dove toccano un determinato dispositivo touch-screen, data la natura ambigua della tangibilità dello schermo. È stato anche necessario; poiché gli utenti non si rendono subito conto di dove si toccano.

Ma, mio ​​Dio, questo può essere facilmente travolgente:

Sopravvivi guardando questo per più di 10 anni e tanto meno usalo a lungo?

Poiché MDG è stato sviluppato per i consumatori finali su dispositivi mobili (principalmente per le app Android), la frequenza di utilizzo è stata considerata piuttosto bassa (per app). In questo modo hanno reso visivamente risonanti molte interazioni (come quando tocchi / fai clic c'è un'animazione circolare che indica dove fai clic). Questo perché gli utenti che non conoscono realmente le dinamiche di un'app mobile potrebbero avere una facile comprensione delle loro interazioni con feedback immediato. Quindi, anche quando usano app diverse, c'è coerenza nell'intera esperienza.

Tuttavia, queste interazioni potrebbero essere facilmente travolgenti per tali utenti che utilizzano un'applicazione ad alta intensità di dati dopo un breve periodo di utilizzo, distogliendoli da ciò che vogliono fare. Ci sono molte differenze che sorgono tra le abitudini delle persone sedute sui loro divani che utilizzano una determinata app di tanto in tanto su un telefono, rispetto alle persone che utilizzano costantemente un'applicazione desktop pesante, caricata sui dati, come un requisito, forse, il loro lavoro quotidiano per il quale vengono pagati.

Quindi ci sono così tante differenze da tenere in considerazione durante la progettazione principalmente per desktop vs mobile e alta o bassa frequenza di utilizzo.

Numero scarso di componenti originati da dati

Che cos'è un componente originato dai dati? È un tipo di componente che è principalmente progettato e realizzato per entrambi: visualizzare, inserire o personalizzare un dato contenuto di dati stesso, piuttosto che concentrarsi sul modulo che assume. Ad esempio, Drawer è un componente non originato da dati, sebbene possa includerne alcuni. Considerando che la tabella, o la forma o persino il feed sono buoni esempi di componenti originati da dati. Puoi vedere buoni esempi di ciascuno di questi componenti se fai clic sui link indicati per vedere anche le librerie a cui appartengono.

Le forme sono forse i componenti più utilizzati della nostra epoca e quindi sono difficili da progettare e costruire in modo coerente. La libreria MUI non ha nemmeno un componente che lo gestisce (ha solo i componenti di input di base) L'esempio è preso da Ant.design come buono

L'ancora dimenticata non è nemmeno menzionata

Questa sezione viene aggiunta dopo la pubblicazione dell'articolo (25 gennaio 2018)

In MDG, ci sono 4 (quattro) diverse sezioni dedicate ai pulsanti.

Non ci sono, tuttavia, informazioni su uno degli elementi più fondamentali nella storia di HTML: anchor:

Personalmente penso che questo sia molto triste. Le ancore rendono possibile i collegamenti, che ci consentono di navigare attraverso il WWW, senza dover impegnarci per nulla. Sono le basi dell'interoperabilità del web. Puoi fare clic su un collegamento da un articolo a un altro e navigare nel web leggendo, e tutto ciò grazie ai collegamenti ipertestuali che lo abilitano. Inoltre, le ancore o semplicemente i "collegamenti" vengono spesso utilizzati anche per navigare all'interno di un'applicazione Web. È solo un aspetto fondamentale del web.

Le ancore, contrariamente ai pulsanti, sono anche un ottimo modo per mantenere costante l'alfabetizzazione; preservando la tipografia di un paragrafo fornendo al contempo mezzi per saltar fuori senza ingombro visivo.

Tuttavia Material Design non ne parla nemmeno. Questo, per me, è la prova che è stato realizzato principalmente o anche esclusivamente per le app, in particolare Android.

Conclusione

Le Linee guida per la progettazione dei materiali e le biblioteche che sono state create di conseguenza hanno affrontato in precedenza molti dei problemi che gli utenti di Internet del 21 ° secolo avevano bisogno da allora. Innanzitutto, è solo una "coerenza" dell'esperienza complessiva. Quando usiamo centinaia di diverse interfacce utente, noi come utenti vogliamo sapere cos'è un pulsante e in sostanza cos'è un menu ...

Anche se una linea guida di progettazione o solo il progetto stesso è "cattivo", o "scarso", se è sufficientemente diffuso; allora diventa coerente per gli utenti perché gli utenti creano le loro abitudini di conseguenza. Credo che Material Design abbia raggiunto un buon modello di costruzione di un comportamento d'uso più coinvolgente che trasforma le persone dagli spettatori di feed di notizie di Facebook a nodi che prendono attivamente una decisione e possono fare clic su un pulsante.

MA, quello che sto cercando di promuovere è coinvolgere gli utenti a sperimentare meglio l'alfabetizzazione web. Non abbiamo bisogno di altri pulsanti fantasiosi o transizioni fantasiose. Non abbiamo bisogno di una nuova biblioteca più sexy. Ciò di cui abbiamo bisogno è informare meglio le persone e produrre linee guida migliori e più sane che affrontino i paradigmi fondamentali della percezione umana. Non abbiamo scelta di ispirarci ai Principi Gestalt, ai Principi Vitrivius e a qualsiasi altro che sia stato fatto nella storia.

Se hai bisogno di altri, ti preghiamo di dedicare un po 'di tempo alla ricerca e non aver paura di crearne uno raffinato e sintetizzato con l'aiuto degli altri. Personalmente ant.design (creato da Alibaba) mi ha davvero colpito e mi ha ispirato a continuare la ricerca su questo ed elaborare ulteriormente.

Ecco già una raccolta di una combinazione di linee guida e librerie che puoi utilizzare:

Grazie a Doruk Demircioğlu per avermi indicato: https://adele.uxpin.com/