Tarjetas y Composabilidad en Sistemas de Diseño

Estructura, contenido, estilo y comportamiento de los componentes compuestos.

Soy un tonto para un componente de tarjeta. Me devuelve nostálgicamente a mi adolescencia cuando las tarjetas de béisbol me presentaron al diseño de información. Recolecté y organicé miles, cada uno exhibiendo la foto de un héroe, el equipo como tema, las posiciones como identidad. Mi cerebro se involucró con el diseño, los datos y la investigación en profundidad que fomentaron.

La tarjeta digital de hoy tiene el mismo propósito. Más que un contenedor genérico, una tarjeta es una instantánea escaneable de los signos vitales de un objeto. Tiene una vista previa suficiente para identificar. Nos invita a aprender más e interactuar, en ese orden.

Una tarjeta es una hoja de material que sirve como punto de entrada a información más detallada. Las tarjetas pueden contener una foto, texto y un enlace sobre un solo tema. - Tarjeta de Google Material Design

A menudo, la tarjeta también señala un pivote en el crecimiento de una biblioteca de componentes. A diferencia de las primitivas como el botón y la entrada, una tarjeta requiere composición. Relaciona muchos elementos (algunos ya en nuestra biblioteca) y a medida que el contenido fluye en cada uno. Además, las tarjetas casi siempre se muestran como un conjunto, hermanos al lado del otro. La composición desencadena un pensamiento de orden superior crítico para el diseño del sistema.

El endurecimiento de una composición como tarjeta obliga a un sistema a madurar. A veces, un sistema resuelve los desafíos, aumentando la complejidad de la biblioteca. Otras veces, la creciente madurez de un sistema se aleja de la complejidad, manteniendo las cosas simples. Estos desafíos toman la forma de estructura, contenido, estilo y comportamiento. Que las lecciones aquí inspiren las composiciones de su sistema por venir.

Estructura de composición

Las bibliotecas comienzan con primitivas (entrada, encabezado, casilla de verificación, botón de opción, etiqueta, icono) para servir como bloques de construcción. La compostibilidad de un botón es bastante mundana: un icono a la izquierda o derecha de una etiqueta, tal vez una barra dividida o una animación. Luego, el grupo de botones combina el botón, forzando las relaciones entre hermanos. Estos son desafíos de bajo nivel. Las cosas se ponen más interesantes al componer componentes como tarjetas con muchos elementos.

Identificar elementos centrales

Un componente composable comienza con el núcleo esencial de los elementos requeridos, por lo que querrá preguntar:

¿Qué elementos se requieren de cada pantalla?
¿Qué sucede si falta un elemento requerido?

la tarjeta a menudo requiere:

  • imagen, combinada con un ...
  • título (generalmente un encabezado con estilo), tal vez complementado con un ...
  • descripción (o "cubierta" u otro contenido elaborado).

Identificar todos los elementos y casos posibles

Extienda la red de descubrimiento en muchos productos. Inventario de cada ejemplo. El análisis debería producir una diversidad creciente de casos y los elementos deberían informar un diseño y orientación útil para la documentación posterior.

¿Qué es un completo posible elementos incluidos?
¿Qué combinaciones de elementos se desaconsejan o prohíben? Por ejemplo, una tarjeta puede incluir botones o íconos para acciones, pero nunca ambos.

las tarjetas satisfacen diversas necesidades en muchos momentos de una experiencia y pueden incluir una variedad de otros tipos de contenido:

  • etiqueta o tipo, que a menudo indica un grupo al que pertenece el objeto y posiblemente se muestra como una etiqueta o un par de icono / etiqueta.
  • acciones ofrecidas como botón (s), icono (s) o ambos.
  • precio y valoraciones de productos
  • metadatos, distintos de una descripción para resaltar propiedades clave
  • listas relacionadas como un conjunto de elementos relacionados con el objeto

Solidificar relaciones de elementos

Los muchos elementos de un componente componible plantean preguntas de orden, combinaciones, grupos y más:

¿Hay zonas con nombre, como acciones?
¿Hay subgrupos de elementos? ¿Pueden los subgrupos reordenados u ocultos?
¿Qué lógica se necesita para ordenar, combinar o separar combinaciones?
¿Cuántos arreglos alternativos debemos probar?
¿Cuántas variaciones se deben revelar y describir en doc?

Para muchas tarjetas, el orden apilado es fijo: imagen, luego título y luego acciones. En otros sistemas, las necesidades más flexibles pueden sugerir elementos de reordenamiento. Por ejemplo, la tarjeta de Morningstar Design System permite a los usuarios colocar una imagen encima o debajo de un título.

Al igual que un modal y un cuadro de diálogo, la tarjeta podría identificar zonas para un encabezado, pie de página principal o multimedia, copia y acciones para identificar firmemente las relaciones de contenido.

Hacer frente a las regiones que permiten una entrada flexible

Cuanto más grande es el componente, más probable es que ofrezca una región que acoja, bueno, lo que sea que un usuario del sistema quiera poner allí. El contenido de la región puede ser tan inocuo como un párrafo o una lista con viñetas.

¿Existen regiones genéricas en las que puede colocar un marcado flexible?
¿Cómo impactan las zonas de regiones en pantallas fluidas y / o fijas?
¿Espera o recomienda ciertos tipos de contenido para dichos contenedores?

Pero esa región abre una puerta peligrosa. Tal vez un adoptante agrega una leyenda ... debajo de un gráfico ... con una tabla de datos de cuatro columnas contigua ... en la porción de contenido de una tarjeta. Sugerencia: para eso no es para qué sirve una tarjeta.

Regiones flexibles para que un usuario del sistema inyecte su propio contenido.

Las regiones ofrecen flexibilidad pero invitan al abuso. Nadie discute la apertura del área de contenido principal de un modal a un marcado incierto. Para una tarjeta, una zona de barra de acción puede incluir botón, icono y menú. Sin embargo, no depende de la tarjeta cablear todos los casos. Es posible que algunos componentes necesiten ofrecer regiones y renunciar al control y la responsabilidad de lo que está dentro.

Para llevar: con un gran poder de contenedor viene la gran responsabilidad de adoptar equipos. No te engañes creyendo que puedes predecir, construir, probar o documentar todos los casos posibles. Si una región está destinada a algunas variantes esperadas, haga un favor a los adoptantes y cree ejemplos que exhiban cada una.

Componer contenido

Títulos, prosa, metadatos, precios. Una imagen que tiene un poderoso golpe. No importa los elementos que incluya, una tarjeta requiere una consideración cuidadosa de los medios y la copia. A diferencia de las primitivas que manejaste tú mismo, los componentes compostables requieren colaboración con aquellos que conocen mejor el contenido.

El contenido varía. Formar convenciones basadas en contenido real.

Una imagen sobre el texto. Es simple, ¿verdad? No siempre. La relación de aspecto de la imagen es fundamental no solo para la armonía visual, sino también para la producción de contenido.

En un cliente, analizamos tarjetas inconsistentes existentes en todos los productos. Era un tesoro de contenido real. Excepto: ¡Ay, la relación de aspecto de las imágenes varía enormemente! Algunos productos tienen una relación de 16x9 o 3x2. Otros solo imágenes cuadradas. La búsqueda presentó la gama, incluidos los retratos extremadamente altos.

Variedad de relaciones de aspecto encontradas en imágenes reales distribuidas en productos existentes

Los expertos en contenido estaban comprensiblemente fatigados por años de chancletas de diseño. Para ellos, el sistema era una oportunidad para finalizar la conversación sobre el tamaño de la imagen. Una relación de aspecto estándar no solo mejoraría la consistencia de la pantalla, sino que también simplificaría enormemente los requisitos de su proveedor y la entrega de imágenes.

Como resultado, la tarjeta se estableció en una relación horizontal de 16x9, aumentada por una alternativa cuadrada. Este proceso también produjo código para resolver la visualización específica de la relación en el front-end. Como resultado, la capacidad de compilación condujo a un componente en miniatura útil para otros componentes también.

Para abordar el contenido heredado, la tarjeta ofreció un accesorio para contener imágenes (usando la propiedad CSS de tamaño de fondo) dentro del espacio de 16x9. Los diseñadores lograron la armonía visual de la cuadrícula en los resultados de búsqueda, mientras que los productores ajustaron las pantallas por tarjeta para abordar los cultivos fotográficos no deseados.

Para llevar: cuanto más composable sea un componente, más vital será incorporar consideraciones de contenido. Diseño y construcción de pruebas de estrés con contenido real. Involucre a aquellos que hacen frente al contenido que fluye a sus componentes todos los días. Puedes convertirte en su nuevo mejor amigo.

¿Demasiado contenido? Envoltura de direcciones y truncamiento

Si bien las imágenes dominan una pantalla, la copia también juega un papel fundamental en los encabezados, descripciones y metadatos. Pero es una tarjeta, no un opus, por lo que la copia no puede volverse loca.

Los títulos y las descripciones más largos están obligados a envolverse una vez o, si puede soportarlo, dos veces. Así que diseñe para márgenes y altura de línea. Pero si la copia se alarga, la efectividad de la tarjeta disminuye rápidamente.

¿Cuál es la longitud máxima de cada elemento de copia?
¿Cuál es el recuento máximo y mínimo de caracteres con el ancho cómodo?

El truncamiento proporciona una escotilla de escape que protege contra la longitud de la copia que no podemos predecir. El truncamiento divide la opinión: algunos clientes detestan el truncamiento, mientras que otros lanzan una utilidad truncada en un primer lote de componentes. Truncar el título de una tarjeta o incluso un subtítulo o descripción, y corre el riesgo de dañar el contexto y la comprensión. En componentes componibles, diferir a prioridades: truncar una descripción antes del título, o después de tres líneas en lugar de dos, en medio de una apariencia que se flexiona lo suficiente.

El truncamiento da como resultado una descripción más corta, pero potencialmente no preferible.

Tampoco es solo envoltura de copia. Considere filas de acciones como un botón horizontal y una lista de iconos que podrían colisionar cuando la configuración se estrecha.

El ancho estrecho de la tarjeta hace que un botón alineado a la izquierda choque con una lista de iconos alineados a la derecha.

Para llevar: los máximos de longitud de copia y el atractivo de truncamiento a nuestro sentido de control sobre el contenido fluido. A medida que crece la complejidad de los componentes, fortalezca la opinión editorial y el control del código sobre la longitud de la copia, la medida de línea y los impactos del ancho de la tarjeta fluida. Si ofrece servicios públicos, hágalo como moderación, no como una muleta.

¿No hay suficiente contenido? Cuando faltan imágenes y / o copias

Por otro lado, a veces el contenido no está disponible. El contenido de la tarjeta a menudo llega a las profundidades, sacando este artículo relacionado o ese perfil heredado para mostrar. ¿Está su tarjeta lista para la ausencia de una descripción, metadatos o incluso una imagen? No hay imagen, ¡oh, el escándalo! ¿Qué haces?

Los más obstinados de nosotros dicen: ¡Nunca! ¿Quieres usar una tarjeta? Incluya los elementos requeridos o no se moleste. Sin embargo, eso es duro. A menudo poco realista. Los componentes compostables elegantes deben doblarse pero no romperse a medida que fluye el contenido.

Instancias con títulos de envoltura y descripciones faltantes.

En ausencia de copia, la composición de la tarjeta se basa en un espacio sólido apilable, considerando las muchas combinaciones que puede esperar o no.

Instancias con imágenes faltantes reemplazadas por relleno de fondo e ícono para indicar el tipo de activo.

En ausencia de imagen, tenemos opciones. Puede distinguir los tipos de forma atractiva a través de un color plano, una marca de identidad superpuesta del sitio o incluso un combo de icono / color para el tipo (¿formato de activo? ¿Tipo de actividad? Canal de contenido?).

Estilo de composición

Diseñar elementos atómicos es más fácil (los elementos requieren menos decisiones) y más difícil (esas decisiones tienen un impacto fundamental). Sin embargo, la tarjeta plantea desafíos y amplía nuestras opciones de estilo a medida que los elementos interactúan en espacios reducidos.

Expandir el lenguaje visual de un sistema

Mi experiencia sugiere que componentes como la tarjeta desencadenan una conversación incremental sobre las convenciones del sistema de forma modular y capas. Las conversaciones pueden dirigirse hacia el radio del borde, la sombra y las sutilezas del contraste de color de fondo entre el objeto y el lienzo a continuación.

Para llevar: Un componente compuesto establece un tono para la forma de muchos diseños por venir, tanto en una biblioteca como para esos proyectos de trabajo. Tales decisiones se desangran en la experiencia de maneras inimaginables, tanto peligrosas como deliciosas.

Estilo dentro y entre componentes

Una tarjeta evoca relaciones de color, comenzando con el contraste contra el lienzo a continuación. Algunos optan por la simplicidad: solo una tarjeta blanca sobre un lienzo blanco, sin fondos alternativos, y usan otras propiedades como la sombra para el contraste.

Los entornos visuales más ricos resuelven combinaciones de primer plano / fondo en entornos claros y oscuros. El sistema Comet de Discovery Education ofrece muchos fondos, a menudo mostrados en concierto en una sola página. Por lo tanto, el sistema ofrecía tarjetas claras y oscuras a través de cada uno a través de mixins y tokens. Dichas tarjetas crean otro nivel de jerarquía: texto en el fondo del componente en el fondo del lienzo.

Para llevar: la capacidad de composición desafía su tolerancia a la complejidad visual. Los componentes poderosos y obstinados tientan a un equipo del sistema a resolver cada combinación con la esperanza de ahorrar tiempo a los colaboradores. Pero las soluciones complejas y bien modeladas invocan un mayor costo de creación y mantenimiento. La complejidad "suficiente" no siempre es clara.

Organización de diseños

La separación, a menudo a través del margen, también juega un papel. Un diseño de tarjeta puede aprovechar una cuadrícula de diseño o definir el suyo propio para organizar muchas tarjetas en una fila o cuadrícula. Si bien la mecánica de la cuadrícula es sencilla, el diseño de la tarjeta plantea más preguntas:

¿Cuántas cartas podemos tener en una sola fila?
¿Las tarjetas se reorganizan en función de consideraciones receptivas?
¿El ancho de la tarjeta se flexiona de manera fluida dentro de una rejilla fluida? Si es así, ¿qué ancho o estrecho puede ser una carta? ¿Existen reglas receptivas que ajusten elementos dentro de una tarjeta?
¿Deberían todas las cartas en una fila, o en una cuadrícula completa, tener siempre la misma altura?

Comportamiento de composición

El propósito principal de la tarjeta es como puerta de entrada a detalles más profundos en otro lugar. Una tarjeta también eleva interacciones sutiles, también. El primero no está en debate. Esto último puede llevar a discusiones polémicas sobre "¿En qué se puede hacer clic?"

Como entrada, la navegación de una tarjeta es más simple cuando se puede hacer clic en toda la tarjeta. En ese caso, toda la tarjeta puede responder a eventos de cursor como: pasar el cursor y: enfocar para activar una imagen o bloque para hacer zoom, título para volver a colorear y sombra para oscurecer. Si una tarjeta no contiene interacciones más específicas, hacer que el bloque completo permita una sola interacción simplifica estas preocupaciones.

Muchos elementos que potencialmente pueden responder a eventos como hacer clic y desplazarse

Por otro lado, un componente compuesto como la tarjeta puede incluir muchas zonas interactivas (título, imagen, botón, icono, enlace) que afectan tanto el marcado, el estilo y el comportamiento. Haga un favor a su ingeniero y analícelos durante la iteración del diseño y la transferencia, antes de cambiar la implementación se vuelve doloroso.

¿Está a punto de embarcarse en un sistema de diseño o necesita profundizar para hablar sobre productos y jugadores? EightShapes realiza talleres de planificación de sistemas y entrena a clientes en sistemas de diseño. ¡Hablemos!