Button inside a clickable card

Asked

Viewed 261 times

9

During development I saw the following situation:

inserir a descrição da imagem aqui

Where the card is clickable and leads to the user stock, but inside the card has an inactive button, that is, the user will usually click the button to go to stock but this would work for any part of the card.

In my view the button should be clickable and the card inactive so that the user could copy some card information or something like that.

Which approach would be the most correct?

  • When you create a link object, it is assigned to all objects within it in the first instance. If you can edit this thistle put the text to be clicked, or I do the button outside the card and put it over the card with css.

  • But the card click goes to a different location than the details button ?

1 answer

7


Heuristics Number 5 of Nielsen: Previna Erros

Heuristics Number 6 by Nielsen: Recognition instead of memorization

Law 5: Basically you are deceiving the user and inducing him to error... If you want the card all be clicked do not put a outline on the button, since delimiting the area of the button seems that it is exclusively a clickable element. Then in case the user click on card "unintentionally" and be directed to another place he will get frustrated and confused (especially if he doesn’t have an easy way to get back).

Law 6: Elements that look something must act like the something, so if something looks like a botão user expects it to work as botão, if a texto é sublinhado the user expects it to be a link. Most likely the user will not expect the card be a link, mainly having a button inside it.

You are sinning on two fundamental errors of Nielsen’s Heuristics, and I will not delve into the concepts, but I suggest you read the source link

Source: https://www.nngroup.com/articles/ten-usability-heuristics/

An alternative is to remove the outline of botão, so at least vc does not fool the user by "delimiting an active area" that is not real.

inserir a descrição da imagem aqui

OBS: Despite this, if you have a button do not have to let the card all as an active area... You yourself cited a problem, imagine that the user wants to give a ctrl+c of something inside the card, he can accidently click to another page... Previna erros!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.