Navegación y contenido: Carpetas, documentos y tarjetas

Fri Aug 25 22:03:14 BST 2023

Concreta Capacitación 
<http://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=PSUX20210120&utm_content=Navegación y contenido: Carpetas, documentos y tarjetas>

Taller de Diseño de la Interacción

<https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Carpetas, documentos y tarjetas>
Último comienzo del año: 27 de agosto de 2023

			Para conocer más sobre las distintas opciones, 
<https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Carpetas, documentos y tarjetas#wpcf7-f1248-p2072-o1>
contactá a un docente 
  Navegación y contenido II: Carpetas, documentos y tarjetas
Una carpeta es una página que reúne un conjunto de documentos de un tema o categoría. Además de permitir acceder a ellos, una buena carpeta debe generar un resumen del contenido en general y de cada documento.

<https://concreta.uy/biblioteca/carpetas-documentos-y-tarjetas/>

Una carpeta es un tipo de página o formato que reúne y organiza los documentos de un espacio de información de un sitio Web o aplicación. Es el lugar típico al que se aterriza cuando se clickea la opción cortinados, descargas, o novedades en un sitio Web. 
Una carpeta tiene implícita algunas características relevantes: 
Es completa    : abarca todos los documentos de la categoría o espacio de contenido que cubre. A veces pueden ser decenas o cientos de miles de documentos. 
Es automática    : cuando se crea un documento o pieza de contenido, el software administrador de contenidos lo colocará en la carpeta o carpetas correspondientes, a partir de las etiquetas, categorías y otros datos que contenga el documento. 
Tiene un orden preestablecido    : si bien los usuarios lo pueden alterar, inclusive de forma permanente, una carpeta tiene un criterio para ordenar el contenido que despliega. 
Es navegable    : es un estándar que las carpetas tengan sistemas de navegación que incluyen menús locales, filtrado y búsqueda en diferentes combinaciones. 

La carpeta de descargas del sitio de Apple tiene un menú local y un buscador especializado, distinto del buscador del sitio. Ordena los contenidos de más reciente a más antiguo.
Desde el punto de vista de la relación entre navegación y contenido, la carpeta es un formato clave, porque está exactamente en el medio de ambos: 50 y 50. La representación de cada contenido, a la que llamaremos tarjeta, permite acceder a cada documento o contenido, mientras que las herramientas de navegación de que disponga permite buscar y desplazarse entre los contenidos hasta llegar al que necesitamos. 
Simultáneamente, cada tarjeta resume el contenido y funcionalidad que representa, permitiendo no solo elegir, sino también conocer los aspectos más importantes del contenido sin necesidad de acceder a la versión completa. 
Esto se hace evidente en los sitios de comercio electrónico y clasificados, como se ve en los ejemplos que se muestran a continuación. Tarjetas de clasificados

SoloAutos – México

El País – Colombia

MercadoLibre

Carros.com – Brasil

Gallito.com – Uruguay

Autocosmos – Argentina
Si miramos la estructura general de las tarjetas, todas tienen arriba una imagen que abarca todo el ancho, el modelo, el precio y algún tipo de descripción. 
Si miramos más en detalle podemos observar: 
Imágenes    : es casi un estándar poder recorrer todas las imágenes sin necesidad de ingresar a la ficha completa y una muestra central de la idea de “subir” contenido del documento a la tarjeta. SoloAutos de México informa que tiene 17 fotos de un auto y 15 del siguiente, pero hay que ingresar a cada ficha para verlas, lo que aumenta sensiblemente el costo de interacción.
Información    : Si bien todas las tarjetas tienen la marca, el modelo, el kilometraje (o si es nuevo) y el precio, es interesante observar cómo algunos diseñadores se las ingenian para empaquetar una cantidad significativa de información útil en el mismo espacio en el que otros no incluyen casi nada, como salta a la vista si comparamos Carros.com de Brasil con El País de Colombia o El Gallito de Uruguay.
    Es interesante señalar que MercadoLibre, líder indiscutido en el rubro en América Latina, es de los que menos información brindan: ni siquiera están la marca y el modelo.
Agrupación    : es importante que el contenido de las tarjetas se agrupe visualmente, para que quede completamente claro qué elementos están relacionados con qué otros elementos a nivel miro y entiendo, evitando el 
<https://concreta.uy/biblioteca/el-mal-de-lucas/>
Mal de Lucas    . El uso del espacio en blanco y de bordes, pero sobre todo de fondo y sutiles sombras son fundamentales para cumplir este objetivo
Funcionalidad    : además del contenido gráfico y textual, la tarjeta puede (debe) incluir funcionalidad disponible en la ficha o documento. Ya hablamos de la posibilidad de ver todas las imágenes, toca aquí contactar, marcar como favorito, compartir y otras. Tarjetas de comercio electrónico
El problema del comercio electrónico es similar al de los clasificados. Elegimos para la comparación un producto en el otro extremo de la complejidad de compra que un auto: un mix de verduras para una ensalada o una sopa. 

Disco – Argentina

Libertad – Argentina

Tienda Inglesa – Uruguay

Éxito – Colombia

Disco – Uruguay

Covabra – Brasil
En el caso del comercio electrónico las necesidades del usuario tienen una naturaleza distinta que las de los clasificados de autos, pero se contestan con las mismas herramientas.
Imágenes    : en todos los casos hay una sola imagen y muchas veces muy pobre: pequeña y poco clara. Inclusive en el caso de Tienda Inglesa hay un producto con una foto promocional, que no llega a describir el producto que recibiremos. 
Información    : la información parece también más escueta de lo que debería, inclusive cuando quedan grandes espacios libres como en Disco – Argentina. Tienda Inglesa es un caso particular, porque un producto tiene la mejor información, con el listado de vegetales que incluye la bolsa y el de al lado se limita a dos palabras.
Agrupación    : los sitios de comercio electrónico han mejorado sensiblemente la agrupación visual de sus tarjetas, con respecto por ejemplo a lo que vimos cuando publicamos el artículo sobre el 
<https://concreta.uy/biblioteca/el-mal-de-lucas/>
Mal de Lucas    . Si bien hay espacio para mejorar, todos califican como aceptable hacia arriba. 
Funcionalidad    : Todos permiten agregar al carrito de compras desde el producto. Esto es un gran avance, porque hace 5 años era frecuente encontrar sitios de supermercados que requerían ir a la tarjeta del producto para comprarlo. Sin embargo, el resto de la funcionalidad se limita a listas y favoritos. Ninguno permite compartir, comparar, guardar para después u otras funcionalidades que son casi imprescindibles en una compra que va a abarcar decenas de productos. 
No pretendemos en una nota abarcar todo el problema de la relación de la navegación y contenido en las carpetas y sus tarjetas. Mucho menos creemos que sea posible encontrar el ejemplo de lo que hay que hacer exactamente: diseñar siempre es un problema de equilibrios, y cada equipo de diseño decide qué ganar y qué perder en cada caso. 
Pero sí queremos mostrar que diseñar buenas carpetas implica bastante más que poner un título, una foto para cada documento, precedidos de un botón de filtrar y uno de ordenar.

Entrega anterior:
– 
<https://concreta.uy/biblioteca/navegacion-y-contenido/>
Navegación y contenido I: Mega-menús
Próxima entrega:
– El menú de Windows a lo largo de sus versiones. 

<https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Carpetas, documentos y tarjetas>
Taller de Diseño de la Interacción
Un entrenamiento práctico con tutoría para desarrollar y/o profundizar tus habilidades como diseñador, a través del análisis del proceso del Diseño.
Último comienzo del año: 29 de agosto
Si querés conocer más detalles, o hablar con los docentes, 
<https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Carpetas, documentos y tarjetas#wpcf7-f1248-p2072-o1>
no dudes en contactarnos.
<https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Carpetas, documentos y tarjetas#inscripciones>
Inscripciones 

<https://tracking.concreta.uy/tracking/unsubscribe?d=302-IDR0TKmPrOjr_ZF4NjwPxax3Uu9KX0TzXB6LFfNmiB-yYDmREJ20udJyxus5Dl-qR-zgG7_Vf3-1DpBzQk0aj348ZWu2L4z4ul_pGvM0t5S5viWdUW5Vh_NElKfV3FMqO0J7uDxg0hQbeOymF82bvERI6C-zHN9j_ajBTLrVaIk109n_4ZauHdb6fyFdBhjZI3f0gJJL_qSvb8p8pw1HmMMlmrECLnqYJ6WpDpMNia8z-KAtEYko2Bj9Ypyi1uStBdbBdEmVYmpPjsNRSiZbIBykmHttdv30hVVSTf2jvCy14byl7fI6n0MQ9-51cO08_VKsE1acsRr2cuXezFreUAqhNAwcUnYO3PfVkYx3ZmsNhM2lGWukxWaG4ir9i67YoWY3MUJKzOAb_xsp29tXbyAqW3dGpxRlaZqZcTNHYVsRaYZ7W0QfMxG5fgfyTZjRH-PRgwSnvkrtIdcEmiIF8g1GgBXckSUzjvBVbh3xxCB9v_o22b0bBbVqpYzaBS9CcfFUaogAIvmSJ_dzG7KiYuNLObqeKhRSF7hIXRl7ppLeFid1fwfB8njt0883gdtoiBcQzK3MOVxmRN_oOT41>
No quiero recibir información sobre cursos de Concreta 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://alioth-lists.debian.net/pipermail/pkg-grass-devel/attachments/20230825/f418e5d6/attachment-0001.htm>