Ampliar el item per page para visibilizar más los segundos items de los carrouseles

[MontseTelefonica]

Uno de los insights de los data reviews es lo poco que se hace scroll horizontal en los elementos que lo tienen.
Nuestra hipótesis desde producto es que el elemento segundo elemento no es lo suficientemente visible y que aumentando el item per page en 0.2 en snap cards y 0.1 en media, highlighted y data card hasta hacer visible el icono o parte del texto del siguiente elemento mejoraría el ratio de scroll.

Hace tiempo, en targeting realizaron test con esta misma hipótesis y el resultado fue que aumentó el scroll en los carruseles que tenían los segundos elementos más visibles. Lamentablemente no hemos podido localizar los resultados de estos tests porque son antiguos.

Además en Brasil se han quejado del bajón de CTR al cambiar las featured cards y las han cambiado a este modelo:

Una opción sería lanzar un test A/B en producción para comprobar esta hipótesis o tirarnos directamente a la piscina con el cambio.

[MontseTelefonica]

Añado un comentario de Pablo @kydorn con respecto a ampliar en 1.1 el item per page de algunos carrouseles, en UK tenemos esta mega card en la que el contenido puede verse muy apretado en un 1.1, y Pablo sugiere el 1.05.
Además hay que tener en cuenta que estos cambios NO generen cards como "vistas" según el criterio de analytics, que actualmente considera "vista" una card que se muestre al 25%

[kydorn]

yo creo que no debería ser un cambio del componente, sino de las features que lo usen. Es posible que para data cards encaje mejor un 1.1, y para las featured cards de explore un 1.05.

Aunque las media cards se hayan diseñado para ser adaptativas, las features de producto pueden incluir contenido que haga que se vea mejor o peor según el tamaño horizontal, y creo que podría ser peligroso tomar una decisión que afecte a todos los usos del carrusel.

[yceballost]

No me convence el argumento último sobre que en ese caso de una card que se salta muchas reglas de UX tengamos que mostrar un poco menos del siguiente item. El objetivo de mostrar el siguiente debería ser el mismo que en cualquier otro caso que es el que un usuario haga más control horizontal.

no usaría ese ejemplo para tomar la decisión, en mi opinión ahí se está haciendo un mal uso en cuanto al contenido que debería de llevar una card.

estoy de acuerdo en aumentar lo que se muestra el siguiente item. Actualmente se está mostrando 24px del siguiente elemento, a cuánto sugieres que deberíamos de aumentar ese espacio? Tendríais tiempo vosotros para montar ese test?

tengo dudas de si eso debería estar abierto, la verdad, no veo gran necesidad en customizar tanto ese espacio siempre y cuando encontremos uno más óptimo al actual, que claramente parece no estar funcionando del todo.

[MontseTelefonica]

Uno a @wyunreal a esta conversación, que tiene ideas para probar esto.

[aweell]

Hemos estado tocando este tema un poco mas en profundidad hoy, algunos puntos generales:

• Consideramos que la parte visible del siguiente item en un carousel debería estandarizarse y no es una buena práctica usar otros valores que enteros en la prop itemsPerPage.
• Teniendo en cuenda los datos @MontseTelefonica sería conveniente aumentar la proporción de item visible, esto en principio aplicaría a todos los carouseles de la misma manera. Y por ende a cualquier componente que va en un carousel, sin hacer diferenciaciones entre el tipo de card que lleve como content.

Notas adicionales:

• Para abordar el cambio sería super útil conocer, cual es punto donde empieza a percibirse mejor el scroll, el test A/B que comentas podría arrojar luz sobre el valor concreto que necesitaríamos aplicar.
• Podría darse el caso, que dependiendo el tipo de componente/o contenido fuera necesario que hubiera varios valores disponibles, esto habría que verlo muy en detalle, pero si consideraríamos mas adecuado, que dándose el caso, se predefinan x valores para esa prop.

[MontseTelefonica]

@wyunreal se te ocurre como podríamos hacer un test A/B en producción de esto?

[wyunreal]

se podria hacer un AB test a dia de hoy usando el items per page de mistica, esto se puede hacer cuando tengamos el AB test en CMS project done, sera en este Q

[MontseTelefonica]

@wyunreal Ahora que ya tenemos el A/B test en el CMS, ¿crees que podemos empezare a mover este test?

[BrunoBiagioniNeto]

@yceballost segue a proposta que temos no novo APP que pode ajudar nessa tarefa.

FIGMA
https://www.figma.com/file/4yrdhwPB2OyajurbAAMz2E/Carousel-Next-Item-Showed?node-id=0-1

[yceballost]

Hello, vuelvo a intentar cerrar este tema.

Actualmente el itemsPerPage puede ser cualquier valor entero o decimal. Creemos que permitir esta libertad no tiene mucho sentido en un sistema de diseño si queremos tener consistencia entre carruseles.

Para solucionar esto y cubrir las necesidad de Vivo.. además de cubrir la necesidad de evitar cambios en producción creemos que la siguiente solución es perfecta para todos.

Limitar el itemsPerPage y que siempre sea un valor entero (1, 2, 3 , 4. ..)
Añadir una propiedad al carrusel donde puedas elegir entre varios tipos de "peak" (lo que se muestra del siguiente item)

Podriamos plantear de principio 3 tipos de peak:

• Default: El tamaño actual, así no hay cambios en producción en aquellos productos que ya estén usando el carrusel estándar.
• Medium: A definir, pero sería el peak que propone Vivo que ahora mismo si no recuerdo mal lo que mostraba era 56px del siguiente elemento
• Large: Muestra la mitad del siguiente item, lo que equivaldría a 1.5 de un itemPerPage actual.

(habría que estudiar como esto se comportaría en tablet, en desktop no existe el peak.)

@MontseTelefonica @kydorn sé que vosotros tenéis mucha definición hecha para los carruseles.. pero.. esta solución os encaja?

[MontseTelefonica]

Suena genial, para mi está bien que se pueda elegir, dar libertad de forma limitada me parece el mejor approach,

[yceballost]

Finalmente queda así:

Existirán 2 tipos de peek: Default y Large
Default = 24px (todas las obs) | 64px novo app (mediante token interno. Este token será temporal).
Large = x.5 (se ve la mitad del siguiente elemento) para todas las marcas será igual

Mediaqueries: puede suponer problemas en carruseles en desktop dentro de sidebars (habría que analizar más esto)
Pero una idea podría ser mantener los 24px actuales en tamaños de pantalla de moviles pequeños y 64 en moviles grandes.

[lauraocana]

Buenas, tal y como hablamos y tras el análisis realizado vemos que es mejor aumentar el peek Default de todas las OBs (salvo Vivo) de 24px a 40px, de este modo quedaría:
Default = 40px (todas las obs) | 64px novo app

@yceballost

[MontseTelefonica]

Duda: estos peaks estarán disponibles en el componente de Figma o debemos aplicarlos nosotros manualmente según necesitemos?