Up engagement by harnessing the power of great page flow - Create overlapping elements
I bet you have taking a look at a good amount of sites. On some you find yourself easily moving down the page with ease and others you just seem to get stuck up towards the top.
One of the main strategies being implemented here is Overlapping Elements.
Overlapping Elements can be used on really any page but especially pages like:
- Homepages
- Landing Pages
- Sign up pages
- Product pages
- Product story pages (Yes sir - Elegant Seagulls)
- About pages
- Pricing pages
- etc
Take a look at these 2 layouts.
Layout 1
Layout 2
Which one do you notice yourself easily moving through the design?
Yeah, the second one.
The first one has almost the identical layout but the second by having a few areas of interest that overlap make all the difference in having the user move down the page, maybe to learn more about a product or see benefits of a service.
A few things to keep in mind:
- Use overlapping strategically - like anything if you do it too much it isn't effective
- Be mindful of the depth you are creating on the page - if you think of looking at the page from above, create a Z-index grid to only have a few levels to keep your layout looking clean and organized
- Be thinking "how will this look on mobile" - Probably something you are keenly aware of at all times, but with a smaller horizontal space, you might not be able to overlap sections as elegantly on mobile devices.
Want to take it up a notch?
Play around with subtle and elegant animations as the user flows down the page. Animations to draw the user into the page to up interest and engagement are a great component to add.
Bonus - If no overlapping is present (to overlap the various sections requires more custom design and strategy to execute) could be an indicator that your site is from a template or little strategy has gone into the design. This isn't always the case but it is worth noting.