5

I am designing card elements and struggling with the CTA button positioning: with equal amounts of dummy text the content heights and button positioning remained consistent and easy on the eye. However, with real content, the CTA buttons on the bottom left of the container can be far from the relevant content due to the unequal amount of text between containers.

Currently it seems to be a battle between consistency, always having the button in the bottom left vs. proximity to the relevant content.

So my question is, would you have the CTA button placed immediately after the content or in the same place (bottom-left) in every container?

Picture to illustrate the issue: A or B testing - button position

3 Answers 3

5

According to the Gestalt Law of Proximity, option B is the correct one.

The Law of Proximity is the gestalt grouping law that states elements that are close together tend to be perceived as a unified group. This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.

Consistency does not imply that everything needs to be in the same position, but rather that it follows a consistent logic.

Therefore, if the content in the aside column takes up 200px, the button will be positioned 40px below the content. If it takes up 300px, the button will still be 40px away from the content. Even if it takes up 1000px, the button will still be 40px away from the content.

Now let's consider the same scenario in your main content column. Placing the button as shown in version A not only violates the Gestalt Law of Proximity and disrupts the user flow but also lacks consistency. Buttons typically have a consistent margin and should always be connected to the relevant content, thus it still should be 40px (or whatever) from the content. If you use Figma, Sketch, XD or similar think about how you create components within a style guide and you'll have the answer. Same if you think how will this look in mobile, with a huge white space and then a button lost below the fold, not even in the same screen.

However, if you do not prefer this approach, an alternative is to place the button on the right side of the main column, eliminating any concerns regarding vertical space.

1
  • Thank you for the reply. Going to pause this for now, get more 'real' data in and then see how often and where it causes an issue May 18, 2023 at 8:29
3

When you decide a place where to place a series of buttons, you are proposing an interaction zone in the layout of the page, in other words, it is not about buttons, but an area of activity.

enter image description here

Taken to a practical example, in the pages of a book the information area, such as pagination, is usually at the bottom and is immovable, in this way, the reader knows where to look for the elements common to each page immediately.

In general terms, changing the position of the buttons based on the content, can not only generate an inconsistency in the design but also create doubts regarding its immediate perception and confusion with the content.

1
  • Thank you for the reply. Yes, that was the logic initially, however, in our case we will not be limiting the amount of data added which means that the white space in the info area may push the button below the fold, hence not sure about consistency or proximity May 17, 2023 at 12:27
0

You could combine the advantages of each by putting the button above the text, or by aligning the text to the bottom of its container.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.