Im wondering if there is any difference between the reading patterns (Z and Layered-cake) since both of them require the user to read rtl or ltr whilest moving down a notch when going to the next line to scan for information.

The Z usually shows a classic example of a page with a big hero-image which is skipped by the diagonal line of the Z.

The layered-cake appears to be more about Headings / banners that would all be scanned.

I am unsure if they are both the same, or if they should follow eachother up. E.g. you start the page scanning in Z-pattern, continue in Layered Cake after youve passed the hero-image.

My source: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/


Z-patterns and layer-cake patterns have similarities. Like you said they both require the user to read from left to right. Remember that when someone is at the end (right) of the first line, he moves down to the beginning of a new line (left). A Z-Shape pattern occurs there too.

However, you cannot assume people will follow a certain pattern of sorts. This depends on the goal your user has when he lands on your page, the type of page you have created and hierarchy within this page.

For example, if someone is looking for a link or action, he might be scanning for buttons or something that has a color or font weight that stands out. There will most likely not occur a layer-cake or Z-shape pattern with this user goal. This in contrast to when someone visits an information page about something he likes. He will more like be reading the entire (or big parts of the) page in a layer-cake or Z-shape pattern.


Be sure to know what your users expect from your page, what you want them to do on that page and design your page accordingly with the expected reading pattern in mind.

  • Yeah already noticed the similarities. Both are also applicable for RtL and LtR reading. But i feel like the Z and Layered Cake pattern might just be the same pattern with different explanations bound to the terms used on different websites. I've got the studies regarding goals-per-page for the final wireframe all planned out already, but for the completion of the document and clarity of context i feel it's important to explain certain terms, like the reading patterns, up front. – SliQz Jan 9 '18 at 12:49
  • 1
    My assumption is that they are the same, but that layer-cake focusses more on headings and navigation elements. – Nick Groeneveld Jan 9 '18 at 13:33
  • Thanks for confirming my suspicions. I'll leave the layer-cake out of my document and use the Z-structure as it's got supporting reliable sources spread througout the web. – SliQz Jan 9 '18 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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