Adiós Diseño de materiales

¿Está considerando el diseño de materiales para su próximo proyecto? Por favor, piensa de nuevo.

Antes de leer…

Si crees que eres demasiado sensible para leer un texto escrito con pensamiento crítico, ten en cuenta si vas a dejar un comentario. Hubo tantos comentarios que son solo productos de una conexión extraña y condicionada a esta "herramienta", que resultó en que los autores escribieron textos irrelevantes, con una reacción emocional. Recuerde que ninguna herramienta es perfecta y criticarlas solo las ayuda a mejorar y al mundo a convertirse en un lugar mejor. Además, por lo menos, recuerda que este es un artículo de opinión (a diferencia de muchos otros en la web) con el que tienes todo el derecho de estar en desacuerdo.

Lo que las pautas de diseño como Material Design (MDG en adelante) han intentado lograr fue primero servir a los intereses de su creador; por así decirlo, Google para qué ODM fueron creados para y por. Luego, y en consecuencia, fue crear una especie de alfabetización web para los consumidores finales de WWW. Esta alfabetización web significa básicamente crear hábitos de uso para las personas que consumen información básica diaria y se mueven en diferentes plataformas mientras tanto, sin consumir y producir datos continuamente.

La World Wide Web es una jungla gigante. Todo es solo un factor de ruido en un cosmos infinitesimal, como lo es en la naturaleza misma.

Primero deconstruyamos por qué el diseño de materiales no es adecuado para la mayoría de las aplicaciones, al menos para el resto del siglo XXI.

Fundación equivocada

Los ODM se construyeron no con un conocimiento de diseño tan profundo que abarque siglos (Gestalt, Vitrivius, etc.). Fue construido simplemente con una relación con el material en el mundo real, de ahí el nombre ... Lo que consideraron e intentaron replicar fue los fenómenos de la vida real del material, principalmente papel, por ser el material de la alfabetización (supongo).

Este es un enfoque prematuro, superficial y posiblemente incorrecto para diseñar para la web. ¿Por qué? La razón principal es que la percepción de la información difiere mucho de los papeles a las pantallas, y no solo entre estos dos conceptos gigantes; pero también diferentes contextos dentro de cada uno de estos ámbitos.

En primer lugar, por "papel" y "tinta"; a que te refieres ¿Se refiere a un periódico, una revista, una novela, una enciclopedia, un libro de ilustraciones, un libro para niños, una caricatura, un póster, un letrero o qué? Todos estos reinos tienen sus principios de diseño individualmente distintos para su implementación que ni siquiera pueden intercambiarse entre ellos. Entonces, ¿cómo puede tomarlo completamente y aplicarlo a uno completamente diferente?

Y la web, en sí misma, es un reino gigante que es muy distinto.

Shade Porn

MUI tiene este componente de papel que está en todas partes. En ninguna otra solución que he visto, la información visual se completa para apilar las cosas una encima de la otra. Quiero decir que no cortas trozos de periódico y apilas esos trozos uno encima del otro mientras lees un domingo por la mañana, ¿verdad?

Verifique esto desde Google Cloud Platform que usa MDG:

Intente dar sentido al espacio virtual en 3D creado sin ningún motivo, sino una confusión causada por elementos que intentan atraer la atención de los usuarios simulando una distancia ilusoria al ojo del espectador ...

No te conozco, pero no quiero que aparezca una página web, ya que varias personas están tratando de venderme cosas diferentes al mismo tiempo en un bazar.

Un usuario tiene una atención en un momento dado, y eso es mejor respetado por cualquier medio con el que interactúa temporalmente.

Otro ejemplo es este realmente interesante pero extraño. ¿Puedes encontrar la ilusión en esta imagen a continuación?

La barra de aplicaciones (en la parte superior) aparece sobre el contenedor principal, pero no la navegación; que aparece a la misma altura que la envoltura. Entonces, ¿cómo es eso posible en el mundo real?

Puedes quedarte atrapado en esto y nunca llegar a ningún lado, como en MDG

La razón por la que quería compartir esta información en particular es que en realidad está más allá de la cobertura de este ejemplo. El uso del componente de papel en MDG y, por lo tanto, MUI es omnipresente y, debido a todos los tonos proporcionados, los diseñadores y desarrolladores probablemente tendrán que enfrentar tales problemas que tendrán que resolver, si eligen adoptar MDG.

Interacción hombre-máquina

Los ODM se hicieron principalmente (pero no exclusivamente) para dispositivos móviles (particularmente para aplicaciones de Android en Play Store). Móvil no solo significa "pantallas más pequeñas". También significa interacción con el dedo frente al mouse. El dedo es mucho más grande que el mouse, y tiene diferentes sensibilidades y acciones implementadas para trabajar en un dispositivo y su pantalla. Además, significa que las operaciones que se pueden realizar en una pantalla en el móvil son mucho más limitadas que en el escritorio debido a problemas de tamaño. Hay tantos detalles que MDG y MUI abordan de una buena manera, pero estos no se corresponden necesariamente con las necesidades de la mayoría de las aplicaciones y el contexto muy bien.

Si está desarrollando una aplicación principalmente para Android o generalmente en dispositivos móviles, y no tiene muchos recursos de diseño; definitivamente puede beneficiarse de adoptar MDG. Sin embargo, es muy recomendable asegurarse de que no tome todo como se le otorgó y que lo personalice para satisfacer sus propias necesidades. Sin embargo, esto puede llevarle más tiempo que crear sus propias pautas inspiradas en todas las demás ...

Indicadores de retroalimentación abrumadores

Primero tengo que admitir que esta ha sido una buena manera de indicar a los usuarios dónde tocan en un dispositivo de pantalla táctil dado, dada la naturaleza ambigua de la tangibilidad de la pantalla del dedo. También ha sido necesario; ya que los usuarios no saben de inmediato dónde tocan.

Pero, Dios mío, esto puede ser fácilmente abrumador:

¿Sobrevive mirando esto durante más de 10 segundos y mucho menos usarlo por mucho tiempo?

Dado que MDG se desarrolló para consumidores finales en dispositivos móviles (principalmente para aplicaciones de Android básicamente), la frecuencia de uso se consideró bastante baja (por aplicación). Por lo tanto, hicieron muchas de las interacciones visualmente bastante resonantes (como cuando tocas / haces clic hay una animación circular que indica dónde haces clic). Esto se debe a que los usuarios que realmente no conocen la dinámica de una aplicación móvil podrían comprender fácilmente sus interacciones con comentarios inmediatos. Entonces, incluso cuando usan diferentes aplicaciones, hay una coherencia en toda la experiencia.

No obstante, estas interacciones podrían ser fácilmente abrumadoras para aquellos usuarios que usan una aplicación intensiva en datos después de un corto tiempo de uso, distrayéndolos de lo que quieren hacer. Hay muchas diferencias que surgen entre los hábitos de las personas que se sientan en sus sofás usando una determinada aplicación de vez en cuando en un teléfono, en comparación con las personas que usan una aplicación de escritorio pesada y cargada de datos de manera consistente, como un requisito de, tal vez, su trabajo diario que les pagan.

Por lo tanto, hay muchas diferencias a tener en cuenta al diseñar principalmente para computadoras de escritorio frente a dispositivos móviles y alta o baja frecuencia de uso.

Pobre número de componentes originados por datos

¿Qué es un componente originado en datos? Es un tipo de componente que está diseñado y construido principalmente para: mostrar, ingresar o personalizar un contenido de datos en sí, en lugar de centrarse en la forma que toma. Por ejemplo, Drawer es un componente no originado en datos, aunque puede incluir algunos. Mientras que Table, o Form, o incluso Feed son buenos ejemplos de componentes originados por datos. Puede ver buenos ejemplos de cada uno de estos componentes si hace clic en los enlaces dados para ver también las bibliotecas a las que pertenecen.

Los formularios son quizás los componentes más utilizados de nuestra época y, por lo tanto, son difíciles de diseñar y construir de manera coherente. La biblioteca MUI ni siquiera tiene un componente que se ocupe de ella (solo tiene los componentes de entrada básicos). El ejemplo se toma de Ant.design como uno bueno.

El ancla olvidada ni siquiera se menciona

Esta sección se agrega después de la publicación del artículo (25 de enero de 2018)

En MDG, hay 4 (cuatro) secciones diferentes dedicadas a los botones.

Sin embargo, no hay información sobre uno de los elementos más fundamentales en la historia de HTML: ancla:

Personalmente, creo que esto es muy triste. Las anclas hacen que ocurran los enlaces, que nos permiten navegar a través de la WWW, sin tener que comprometernos con nada. Son la base de la interoperabilidad de la web. Puede hacer clic en un enlace de un artículo a otro y navegar por la lectura web, y todo esto gracias a los hipervínculos que lo habilitan. Además, los anclajes, o simplemente "enlaces", a menudo se usan para navegar dentro de una aplicación web también. Es solo un aspecto muy fundamental de la web.

Las anclas, en contraste con los botones, también son una excelente manera de mantener la alfabetización constante; al preservar la tipografía de un párrafo y al mismo tiempo proporcionar medios para saltar sin desorden visual.

Sin embargo, Material Design ni siquiera lo menciona. Esto, para mí, es una evidencia de que se hizo principalmente o incluso exclusivamente para aplicaciones, particularmente Android.

Conclusión

Las Pautas de diseño de materiales y las bibliotecas que se han creado en consecuencia han abordado previamente muchos de los problemas que los usuarios de Internet del siglo XXI necesitaban desde entonces. Primero y principal de ellos es solo una "consistencia" de la experiencia general. Cuando usamos cientos de UI diferentes, nosotros, como usuarios, queremos saber qué es un botón y qué es básicamente un menú ...

Incluso si una directriz de diseño o simplemente el diseño en sí mismo es "malo" o "pobre", si está suficientemente extendido; entonces se vuelve consistente para los usuarios porque los usuarios crean sus hábitos en consecuencia. Creo que Material Design ha logrado un buen patrón de construcción de un comportamiento de uso más atractivo que convierte a las personas de los espectadores de noticias de Facebook en nodos que toman una decisión activamente y pueden hacer clic en un botón.

PERO, lo que estoy tratando de promover es involucrar a los usuarios para que experimenten mejor la alfabetización web. No necesitamos más botones elegantes o transiciones elegantes. No necesitamos una nueva biblioteca más sexy. Lo que necesitamos es informar mejor a las personas y producir pautas mejores y más saludables que aborden los paradigmas fundamentales de percepción humana. No tenemos otra opción que inspirarnos a partir de los Principios de Gestalt, los Principios de Vitrivius y cualquier otro que se haya hecho en la historia.

Si necesita otros, tómese un poco de tiempo para investigar y no tenga miedo de crear uno refinado y sintetizado con la ayuda de otros. Personalmente ant.design (creado por Alibaba) realmente me ha impresionado e inspirado para continuar la investigación sobre esto y elaborar más.

Aquí ya hay una compilación de una mezcla de pautas y bibliotecas que puede usar:

Gracias a Doruk Demircioğlu por señalar esto: https://adele.uxpin.com/