Handling the information depth on a website sometimes is a balancing act. How much text, or rather how much detail, will not hurt the users’ cognitive receptivity? On the other hand, how much information do they need in place, to get the whole story and find quick answers?

A layered content approach can solve this.

Two examples, illustrating possible solutions to this problem. They nicely play with layers to satisfy deeper needs for information.

The first example is Duda. Nice and bold illustrations and crisp copy allow for quickly scanning the content to get an overview.

Where more information is available, they use layers that hold more information. The layers, at first sight, hide the information, releasing it when hovering over the content blocks.

Another text link, as a quasi third layer, let’s users access the really detailed information about e.g. an API – located on a dedicated page.

In the mobile context, all information is displayed directly. Although this would also work when using a mobile.

The second example is the Baymard Institute. The tiles that the users encounter first, give a rough overview of the topics. When hovering over one of these tiles, more information is provided within an extra layer.

This one also works in the mobile context. Where tapping on a tile opens the corresponding text layer.


If nicely crafted, such layers may bring some variety to your narrative. It also allows crisper copy and focuses on what’s the core of your story.

On the other side, there, of course, exist some pitfalls. Additional info may stay hidden for users if there’s no clue. This may keep back info which is relevant to the users or even break your story.

I’ll suggest starting as simple/crisp as possible when authoring the main plot of your product’s story. Think about and find out, where additional info, such as deeper explanations of features, may help. You can either make assumptions or, if possible access data or heat maps. E.g. clicks on elements, that aren’t intended to be clicked. This gives you an indication that users are missing information.

References: duda Website Builder and the Baymard Institute.