Data Card e Display Data Card actions

[vinrosa]

Goal

Tornar o componente "Data Card" e "Display Data Card" interativo ao toque e com a possibilidade de remover as Actions semelhante aos componentes "Media Card" e "Display Media Card".

Context

Existem casos de uso no aplicativo Vivo em que existem multiplos cards em uma tela com uma única ação. A utilização de um botão primário em cada dos cards torna a lista extensa e repetitiva.
A utilização da ação ser executada no diretamente no card no lugar de um botão de ação parece uma solução mais acertada.

Impact

Essa alteração torna os componentes de "Data Card" e "Display Data Card" mais flexíveis e cobrindo uma maior gama de situações. e torna suas propriedades mais consistentes com outros componentesdo Design System como os componentes de "Media Card" e "Display Media Card".

Discussion Questions

• Poderia o Data Card e Display Data Card receberem o comportamento de toque no próprio card como acontece no Media Card e Display Media Card?
• Seria possível desabilitar o uso das actions para o Data Card e Display Data Card?
• Para manter a consistência na experiência do usuário seria possível utilizar uma ação de toque no card mesmo que se esteja utilizando os botões de action no card?

Additional considerations

No response

Do you have a visual proposal?

[aweell]

Hey @vinrosa! Thanks for reaching,

Answering your questions:

Poderia o Data Card e Display Data Card receberem o comportamento de toque no próprio card como acontece no Media Card e Display Media Card?

Yes, this has been included in #935

Seria possível desabilitar o uso das actions para o Data Card e Display Data Card?

Yes, this has also been included in #935

Para manter a consistência na experiência do usuário seria possível utilizar uma ação de toque no card mesmo que se esteja utilizando os botões de action no card?

No, this need was already covered in https://telefonicacorp.sharepoint.com/:x:/s/Colabora_TCX/Ee9cFk_VD2NItAAsYdlrJLIB2bXcMKmXswLu7FC68oTcmg?e=sFuMtr (Line 10 - Card multiple interactive areas)

Please confirm that all your questions have been resolved and I will proceed to close the discussion since there's already an issue covering this topic.

[piresrodrigo]

Hola @aweell

In the new concept of the app, we are using card navigation a lot. And one of the principles of this new app is to offer shortcuts to shorten journeys.

We understand that once we have clickable cards, they should all behave the same.
It would be inconsistent for me to offer a type of shortcut to the user on some cards and not on others, even though it has a next level of navigation.

In this example that @vinrosa attached, it is clear that there will be a coexistence of cards with buttons and without buttons. It would be an interaction inconsistency problem.

The other solution to maintain consistency would be to put buttons on everything and that is definitely not an option in this new concept.

My suggestion is that if this is not a single choice that it be optional for each product to make its choices

[aweell]

Hey @piresrodrigo!

The cards will support two different configurations:

• Use of actions: Multiple buttons can be placed at the bottom of the card
• Global interaction: The whole card container is clickable

This behavior is already supported in one of the current card variants in Mística: the highlightedCard

Example ->

The idea behind #935 is to include this behavior in the mediaCard, dataCard, displayMediaCard and displayDataCard and remove the actions as required in the dataCard and displayDataCard

Each product then can decide then if:

• All cards should have buttons
• None of the cards should have buttons
• Some of the cards will have them and others will not

 
Regarding the third option presented by @vinrosa

A card can be entirely clickable but at the same time have a buttonGroup

There are potential interaction problems regarding this configuration and it was decided to avoid exploring that path. At the moment there is a risk in the highlighted card:The whole card interaction and the dismiss area are sharing the same space, this is something to avoid.

In #935 we are allowing to do so. If you ask me personally my recommendation would be:

• When there's a need of top actions in a card, avoid the usage of the onPress property and use a buttonGroup instead. In that way the two interaction areas in the card will be clearly limited reducing the risk of mis-click.

Instead of having onPress and a buttonGroup at the same time in a card, there are multiple alternatives a designer can define the UX. And I think we would agree, that if the main purpose of a card is to navigate, having multiple additional items in the same entrypoint to perform different actions is in detriment of the user experience.

[yceballost]

According to "A card can be entirely clickable but at the same time have a buttonGroup", after user tests, we confirmed the hypothesis of the issues posed by this proposal, and the evolution will not be carried out.

https://www.figma.com/file/Lrk84ONkDsCzelKzp8GLT2/2023_Testes-Novo-App?node-id=4008-39981&t=6qKMkBtoYwTedwTh-4

[yceballost]

Abro de nuevo la discussion aportando información por parte de Vivo, parece que lo que se pretende unicamente desde Vivo es que la zona del Slot sea clickable.

Esto actualmente ya sería posible
https://bit.ly/3Ldtc4q

El unico problema que tendrá este uso es que no existirá cambio de estado en la card cuando un usuario hago hover / press en esa zona.

Damos como resuelta esta discussion? @piresrodrigo @vinrosa