When it comes to where elements are positioned, you can encourage users to take actions or view information they ought to be seeing by just putting things in the right place.

A user's eye would generally (like in the Western world of left to right reading) follow a pattern of top to bottom, and left to right, tracing to the right when attention is grabbed.

Law of Common Region + layout

The Law of Common Region Gestalt Principle suggests that you can create an identifiable region around an element to group or draw attention to.

Two of the most straightforward ways to do this as a UI designer are:

1. adding a border around grouped/emphasized elements
2. adding a background color around grouped/emphasized elements

Let's add a border on the listing card example.

The heart button is likely one of the pieces of the card you most want the user to notice, but the changes we made in font sizes keep the button from looking like it has any relevance in the design. We don't want to scale the icon up so large it looks awkward, so we need to turn to another technique.

Take a look at this adjustment by toggling the switch:

The heart button becomes much more prominent in this space. By overlapping sections, a content space was created where one was virtually empty before. The padding on the top and bottom elements actually gives some space that can be strategically used by the button.

By moving the heart icon to overlap the two content sections, it appears to float over the content and is even more visually apparent than even the title. We've raised the heart button in the visual hierarchy by giving it greater importance by its place in the layout.

(Since we want the user to press the button, you'll also notice how the button will animate when hovered and tapped.)

You can play with that differentiation in visual layers to help form an accurate mental model in this demo.

1. start by switching the component to the better state to see how the button looks overlapping the 2 content sections
2. then flip the component into isometric mode to see how the component might look if it were modeled in the real world
3. hover the card to see the visual layers animate.

Grouping items in overlapping sections is a clever way to almost lift a group of elements up in the page. Although we're operating in a 2D plane on a computer screen, our brain that sees in 3D will find ways to sort the page into varying levels of depth.