Evolução Display Media Card e Poster Card

[annefranca]

Goal

Discutir e avaliar a proposta para aplicação do asset para SVA na parte inferior dos Cards.

Context

Atualmente usamos o Display Media Card e o Poster Card quando queremos ofertar um serviço ou produto para pessoa usuária. As marcas da Vivo e algumas de parceiros, como: Amazon Prime, quando aplicadas como um asset no canto superior esquerdo, apresentam baixa legibilidade, especialmente em tamanhos menores e em fundos mais complexos. Nossa proposta é que a aplicação da marca seja feita na parte inferior dos Cards ocupando 100% da largura podendo receber até 3 marcas.

Impact

Aplicando essa evolução nos Cards, vamos conseguir dar mais ênfase para marcas próprias e dos nossos parceiros, além de consistência e legibilidade, o que impacta diretamente em Acessibilidade.

Discussion Questions

• Essa é uma evolução possível dentro do Display Media Card e do Poster Card ou vocês acreditam que seria necessário a criação de um novo Card para suprir essa necessidade?

Additional considerations

Esses componentes são aplicados tanto em jornadas no CMS (framework Novum) quanto no framework Brasil, por isso a solução não pode ser feita na Vivo Extended e nem apenas dentro da Novum Extended do CMS.

Do you have a visual proposal?

https://www.figma.com/design/glVZhmK940bHHSMhtyvFPf/Display-Media-Card-e-Poster-Card?node-id=4701-112&t=nqmwLIwLPhhNdDQ6-1

[annefranca]

@yceballost @aweell vocês têm alguma devolutiva sobre esse tema?

[aweell]

Hello @annefranca,

We have looked for a solution for this problem but as I commented earlier is something complicated.

First we think this should not be included at the moment in the card component for the following reasons:

• The context of the problem: This is a product related feature and another product could choose to solve this problem in a different way, we should't bake product decisions inside mistica components.
• This is an specific problem of a specific card that needs to display multiple assets instead of a single asset or increase the legibility of a single asset. The size of the asset in the card is not fixed, so you could insert a container or an element in that area bigger than the described in your slide called "Problemática", here's an example: Example of an asset of 120 in a posterCard

But even the previous statements we were looking for possible solutions using what we already have today in order to achieve what you were looking for:

• Use a container in the slot absolute positioned: the problem with this approach is that the implementation relies in the padding value of the card to position the bottom band, so if we change that value, we will broke your implementation, so we should avoid this solution.
• The second solution is to wrap the card in a container that has the content: the drawbacks of this solution is that the area with the third party brand is not part of the card, so if a user interacts with this part will not work...another solution is to have the card and this area and then wrap everything in a interactive container (Touchable) but you will loose the onPress default behaviour of the card.
• Using the current asset space to display more than brand: Although is possible this is something that doesn't work really good.
  Evolve the card to use a footer: This is another idea that came to our minds, but I believe the're not exclusive, a card can have footer and also this band of third party brands. Also what we thought about the footer is to use it to solve the interaction problems already discussed in the advanced data card discussion, so a card can have two areas, the top area all interactive, and the fotter with actions (buttons).

We think the second solution could be a way to go in order to solve this problem, WDYT?

[annefranca]

@aweell, obrigada pela devolutiva!

Sobre a primeira opção: você teria um exemplo de como a implementação poderia ser quebrada?
Sobre a segunda opção: teria como a imagem acompanhar a largura do card (exemplo aqui)? Dessa forma não teríamos a borda externa.

[aweell]

Sobre a primeira opção: você teria um exemplo de como a implementação poderia ser quebrada?

Yes, in the example I provided you can see that i need to make a logic using the actual padding values of the card, that way i can place the banner full width in the card.

But this values potentially can change, so if we change them and the version of Mística is updated in that product, the banner will appear misplaced and feel broken. Harcoding the padding values in the product is not a good practice and we should avoid going that way.

Sobre a segunda opção: teria como a imagem acompanhar a largura do card (exemplo aqui)? Dessa forma não teríamos a borda externa.

Of course! The container can be exactly the width of the card so the outer edge is only visible at the bottom. We choose that design because we liked it more, no other reasons involved :).

[vinrosa]

@aweell thinking that this solution is to be used in the Novum CMS, would it be possible for the Novum development team to make this suggested application? This demand is prioritized in this ticket https://jira.tid.es/browse/OBVIVO-2848

[annefranca]

@aweell existe a possibilidade de existir um novo card em Community com a estrutura e as necessidades que precisamos?

[yceballost]

Se trabajará con el proyecto de Cards Evolution #2106

Lo tenemos para trabajar en Q2, esperemos que tengamos tiempo para hacerlo!!