Pensamiento de diseño para listas, tarjetas y tarjetas de dos columnas en aplicaciones

Los diseños de lista se ven comúnmente en aplicaciones de noticias. Se caracterizan por la capacidad de mostrar múltiples piezas de información en una pantalla pequeña y la capacidad de obtener una gran cantidad de comentarios de los usuarios deslizándose. arriba y abajo. Las listas también son un formato de visualización muy fácil de entender.

Los diseños de tarjetas son comunes en aplicaciones sociales como Weibo y Facebook, pero también son comunes en diferentes categorías de aplicaciones y el formato es muy flexible. Su característica es que el contenido y la forma de cada tarjeta pueden ser independientes entre sí y no interferir entre sí, por lo que se pueden utilizar diferentes tarjetas con contenido diferente en una misma página. Y debido a que cada tarjeta existe de forma independiente, su información puede ser más rica que la lista y los usuarios pueden comentarla, darle me gusta, etc., eliminando la necesidad de saltar a la página de detalles. Sin embargo, debido a la gran cantidad de información en las tarjetas, no se pueden mostrar varias tarjetas en la pantalla pequeña y el número de tarjetas en una pantalla rara vez supera las tres.

El diseño de tarjeta de dos columnas es más común en aplicaciones que se centran en información de imágenes, como Pinterest y páginas de exhibición de productos en algunos centros comerciales. Este formulario es similar al tipo tarjeta, pero puede mostrar más contenido en una pantalla, al menos 4 tarjetas. Al mismo tiempo, al separar las visualizaciones de las columnas izquierda y derecha, los usuarios pueden comparar más cómodamente el contenido de las tarjetas en las columnas izquierda y derecha.

Lógica de comportamiento detrás del diseño

Sin embargo, ¿por qué las noticias tienen más listas, las redes sociales tienen más tarjetas y las imágenes tienen más tarjetas de dos columnas?

Volvamos a las necesidades y patrones de comportamiento de los usuarios para pensar en este tema.

¿Cuáles son nuestras necesidades cuando navegamos por las noticias? Las necesidades de la mayoría de las personas son: por un lado, quieren saber qué sucedió recientemente, que es la necesidad de cantidad, por otro lado, quieren comprender este asunto en profundidad, que es la necesidad de una lectura en profundidad; . Los requisitos cuantitativos suelen ser lo primero, seguidos de una lectura en profundidad. En base a esta demanda, el patrón de comportamiento de los usuarios al buscar noticias es: Navegar en grandes cantidades rápidamente → Filtrar → Juicio → Navegar en grandes cantidades rápidamente, como se muestra en la siguiente figura:

Como se puede ver en En la figura anterior, los usuarios buscan noticias. Es necesario procesar grandes cantidades de información rápidamente y tomar decisiones de alta frecuencia en un período de tiempo muy corto. Por lo tanto, la eficiencia es extremadamente importante y obviamente es inapropiado mostrar solo uno o dos datos en una pantalla. Además, también son importantes un alto grado de coherencia en el formato de visualización y un control estricto sobre la cantidad de información mostrada. Un alto grado de coherencia permite a los usuarios comprender rápidamente la forma de visualización, de modo que puedan seleccionar de forma independiente el contenido que desean, lo que facilita el filtrado y la evaluación. Controlar la cantidad de información puede reducir la interferencia de la información y así mejorar la eficiencia. Debido a estas limitaciones, las listas son un formato razonable para mostrar noticias.

Asimismo, ¿qué es lo que realmente queremos al usar Pinterest? Se trata simplemente de encontrar la imagen perfecta. El más adecuado, habrá unicidad, habrá comparación, ponderación y selección. Esto también significa que los usuarios no navegan uno por uno, sino que comparan y navegan repetidamente, de la siguiente manera:

En base a este patrón de comportamiento, se plantean requisitos para el diseño del formulario: 1. En una pantalla Puede mostrar suficiente contenido; 2. Permitir a los usuarios comparar contenido fácilmente. Al mismo tiempo, el contenido en sí también tiene requisitos: 1. El contenido en sí puede entenderse rápidamente. 2. El contenido en sí es comparable.

Tomemos como ejemplo Kitchen Stories, una aplicación de cocina de estilo occidental que no tiene nada que ver con Pinterest pero que utiliza el mismo diseño. Además de la explicación perceptual de la estética visual, también podemos entenderla desde otras perspectivas.

Supongamos que es hora de cenar y hoy quiero comer comida occidental, así que abro "Daily Kitchen" y elijo una de ellas para la cena de esta noche. Como es posible que solo prepare una comida esta semana, tengo que ser exigente para que sea deliciosa, tenga buen aspecto y sea fácil de usar. La primera pantalla de la cocina diaria muestra imágenes de varios productos terminados, lo cual es bueno, puedo elegir lo que quiero comparando la apariencia. También está el número de favoritos de cada plato, lo que probablemente refleja la valoración general del plato, lo que también hace que mi elección ya no sea tan difícil.

Pronto, después de varias comparaciones, finalmente elegí espaguetis a la boloñesa como cena de esta noche...

Como se puede ver en la situación anterior, cuando los usuarios usan esta aplicación, debido a que solo puedes seleccionar una vez, por lo que el contenido debe compararse. Además, las imágenes y los datos fáciles de entender facilitan este acto de comparación. Por lo tanto, un diseño como tarjetas de dos columnas es una excelente manera de llevarlo a cabo.

De manera similar, cuando navegamos por Weibo, ¿cuáles son nuestras necesidades? Es más cómodo interactuar con amigos o personas a las que seguimos. El requisito previo para la interacción es leer el contenido con comprensión en lugar de saltarlo rápidamente. Por lo tanto, el patrón de comportamiento al navegar por las noticias de amigos debe ser el siguiente:

Como puede verse en la figura anterior, se deben cumplir al menos dos condiciones en el formulario de visualización. En primer lugar, debe transportar información de menos de dos latitudes, una es información de contenido que los usuarios pueden entender y la otra es información que permite a los usuarios interactuar entre sí; en segundo lugar, los usuarios pueden operar sobre el contenido en el; página actual, e incluso completarla en la página actual. Sin embargo, esto no significa del todo que el diseño de la tarjeta sea el más razonable. Es necesario considerar de manera integral factores como la comprensibilidad del contenido de Weibo y la complejidad de la información. El diseño de la tarjeta es una mejor solución.

Debido a que el diseño de la tarjeta es tan versátil y flexible, tiene una gama extremadamente amplia de aplicaciones. No discutiremos esto en profundidad aquí.

Resumen

Combinando las características de cada diseño y la lógica de comportamiento detrás del mismo, podemos sacar las siguientes conclusiones:

Cuando el patrón de comportamiento del usuario es más inclinado Las listas son una excelente opción cuando se trata de filtrar información de manera eficiente y rápida.

Intente utilizar un diseño de tarjeta de dos columnas cuando los patrones de comportamiento del usuario requieran comparar información una y otra vez, o cuando sea necesario obtener más información en una sola pantalla.

Se puede preferir el diseño de la tarjeta cuando los usuarios no solo consumen el contenido presentado, sino que también están dispuestos a interactuar con él.

Reflexión final

Este artículo solo piensa en el alcance del diseño a través de las características de la forma del diseño y la lógica de comportamiento detrás del diseño. Obviamente, este pensamiento unidimensional no es adecuado. en casos reales. Además de los patrones de comportamiento del usuario, los factores que deben considerarse incluyen:

1. Las características del flujo visual de cada formulario de diseño (las listas son flujo visual de tipo "I" de arriba hacia abajo, las tarjetas de dos columnas son Flujo visual tipo "Z" saltando hacia arriba, abajo, izquierda y derecha)

2. La prioridad de comunicar información (las listas son más adecuadas para la comunicación de texto, mientras que las tarjetas son más adecuadas para la comunicación con imágenes)

3. Escalabilidad del diseño

4. Marca

5. Etc.

Y para cada escenario, cada aplicación, cada página, cada consideración. Las ponderaciones también son diferentes, lo que requiere un análisis específico de cuestiones específicas. Pero pase lo que pase, los resultados del diseño pueden variar ampliamente, pero la lógica detrás del diseño debe ser rastreable.