{"id":63451,"date":"2020-05-12T00:00:00","date_gmt":"2020-05-12T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/blog\/z-shaped-pattern-for-reading\/"},"modified":"2025-09-10T00:20:35","modified_gmt":"2025-09-10T03:20:35","slug":"z-shaped-pattern-for-reading","status":"publish","type":"post","link":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/","title":{"rendered":"Z-shaped pattern for reading: what it is and how does it work?"},"content":{"rendered":"<p>When it comes to webpage design, a Z-shaped pattern for reading plays an integral part in a website&#8217;s performance \u2014 that&#8217;s what experts in <a rel=\"noopener noreferrer\" href=\"https:\/\/pingback.com\/en\/resources\/content-marketing-assessments\/\" target=\"_blank\">content marketing assessments<\/a>\u00a0may tell you. It impacts the amount of time someone spends on the page.<\/p>\n<p>That\u00b4s why it is important to understand that different layout shapes serve different purposes.<\/p>\n<p>Take as an example the F-shape, the most common one. It has this name because it describes a pattern in which the user first looks at the top left on a page, moving horizontally until the top right, and then repeats this movement but without going as far as the previous sweep, following roughly the shape of the letter F.<\/p>\n<p>The pattern was first suggested after <a href=\"https:\/\/www.nngroup.com\/articles\/f-shaped-pattern-reading-web-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">a study made by the Nielsen Norman Group<\/a> with <strong>text-heavy content<\/strong>. It is important to stress the last part because the F-shaped design isn&#8217;t suited for all kinds of content.<\/p>\n<p>So what other kinds of design layouts exist? Let&#8217;s take a look at the Z-shaped pattern for reading. More appropriate for pages that are not so dense in terms of information, it has been considered an excellent option for landing pages.<\/p>\n<p>If you&#8217;re interested in learning more about the Z-shaped pattern, keep on reading the article and you&#8217;ll find out:<\/p>\n<ul class=\"wp-block-list\">\n<li>What exactly is the Z-shaped pattern for reading?<\/li>\n<li>What are the differences from other patterns?<\/li>\n<li>When is the Z-shaped pattern for reading more useful?<\/li>\n<li>How to fit your content in the Z-shaped pattern for reading?<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">What is the Z-shaped pattern for reading?<\/h2>\n<p>As the name suggests, the Z-pattern layout <strong>resembles the letter Z<\/strong>. This means that the content is carefully designed so that the user first looks at the top left of the page, then to the top right in a horizontal line. Then, the eyes move straight to the bottom left, in a diagonal line, and end up at the bottom right of the screen again, following another straight line.<\/p>\n<div class=\"wp-block-image size-full wp-image-26146\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/scribblelive-com-prod\/wp-content\/uploads\/sites\/4\/2020\/07\/z-shaped-ux-collective.png\" alt=\"Source: UX Collective\" class=\"wp-image-26146\"\/><figcaption>Source: UX Collective<\/figcaption><\/figure>\n<\/div>\n<p>This does not mean that the whole content has to be shaped like one big Z. Even though this might work for landing pages, content that uses <a href=\"https:\/\/visual.ly\/blog\/data-storytelling\/\" target=\"_blank\" rel=\"noopener noreferrer\">storytelling<\/a> can follow the shape of subsequent, smaller Zs, creating what is called a <strong>Zig-Zag pattern<\/strong>.<\/p>\n<h2 class=\"wp-block-heading\">What are the differences from other patterns?<\/h2>\n<p>Each design provides advice on where to place information, depending on <a href=\"https:\/\/visual.ly\/blog\/stop-making-average-content-make-remarkable-content-without-risk\/\" target=\"_blank\" rel=\"noopener noreferrer\">the content you want to create<\/a> and your marketing strategy. Before <a href=\"https:\/\/pingback.com\/en\/resources\/interactive-posts\/\" target=\"_blank\" rel=\"noopener noreferrer\">investing in interactive content<\/a> it is important to know at least the basics about each of them.<\/p>\n<p>The Z-shaped pattern assumes that <strong>viewers will pass straight through the middle of a page, placing their attention on the corners instead<\/strong>. This means that the content creator should design the webpage considering that the viewer will follow this order: (1) top left; (2) top right; (3) bottom left; (4) bottom right.<\/p>\n<p>This does not mean, of course, that the place cut by the diagonal line should stay empty, just that the layout should be designed so that this order makes sense according to the content creator&#8217;s goals.<\/p>\n<p>Differently from the Z-shape, the F-shape assumes that the user goes a little less further to the right with every line of a text. For this reason, this design should be used to make sure that the viewer focuses on the most important parts of text-heavy content.<\/p>\n<p>Another useful layout pattern is the Gutenberg diagram, also fit for denser content that is homogeneous and evenly distributed. It places special importance on the top-left and bottom-right areas, assuming that the eyes travel from one to the other in what is called the reading gravity path. It is used for text-heavy content, such as newspapers or pages on a novel.<\/p>\n<p>Differently from those, the Z-shaped pattern for reading <strong>highlights a few elements and is best suited for pages with less text<\/strong>, as we&#8217;ll see in the following section.<\/p>\n<p>Not everyone agrees that these patterns are universal, by the way. Some folks argue that as people have gotten more comfortable with screens\u2014and as devices have shrunk to phone size\u2014we don\u2019t always move our eyes in neat Zs or Fs. There\u2019s a point here: mobile habits are messy; people get distracted, poke around, and come back later. Still, when designers keep these patterns in mind, even loosely, they do seem to create webpages that feel less frantic. Sometimes, it\u2019s not about following a shape perfectly but nudging users in the direction you want them to end up.<\/p>\n<p>If you spend much time digging into real eye-tracking research (like that published by the NN Group in recent years), you\u2019ll see a pattern: people don\u2019t read online, they scan. And while nobody\u2019s tracing a literal Z with their eyeballs, the places they consistently look\u2014corners, key lines, buttons\u2014fit the Z-pattern\u2019s logic more often than not. It\u2019s almost like a shortcut wired in by years of seeing similar layouts, or maybe just basic human laziness. Either way, those invisible Zs on landing pages aren\u2019t an accident.<\/p>\n<p>If you think about how most of us scroll these days, it\u2019s not that we intentionally \u201cdraw\u201d a Z across the screen, but our brains seem wired to scan for key info in the spots the Z-pattern suggests. Quick eye-movements to the corners before we decide if a page is worth sticking around on. And it\u2019s pretty common to see brands placing their logo, navigation, key visuals, and that all-important CTA button directly on these hot spots\u2014maybe not out of some deep psychological theory, but just because it works. You can spot this trick all over websites in 2025; it\u2019s subtle but everywhere once you know what to look for.<\/p>\n<p>On the other hand, there\u2019s something kind of elegant about a layout that doesn\u2019t bombard you with text, just guides you right to what matters. The Z-pattern, intentionally or not, clears away any confusion about where your attention should land first\u2014and where it should go next. Less really is more here. I\u2019ve noticed that when sites get this balance right, they tend to feel easier, almost restful to browse, even if you\u2019re not exactly aware of why. Not every design trend earns its keep, but this one\u2019s stuck around for a reason.<\/p>\n<h2 class=\"wp-block-heading\">When is the Z-shaped pattern for reading more useful?<\/h2>\n<p>The Z-shaped is useful for pages with a simple design and a few key elements that need to be seen.<\/p>\n<p>Landing pages are a great example of the kind of content that profits from this design. If it takes advantage of the Z-shaped pattern, the page can <strong>create a visual narrative that guides the user from the logo until the CTA button<\/strong>.<\/p>\n<p>Speaking of narratives, this pattern is also perfect for guiding the user through a story, especially through the Zig-Zag structure. A good example of this case would be a sales pitch that tells a story and ends up in a call to action.<\/p>\n<h2 class=\"wp-block-heading\">How to fit your content in the Z-shaped pattern for reading?<\/h2>\n<p>If you have a landing page or you want to use the storytelling method, the Z-shaped pattern is a good choice. As we mentioned, it suggests that the visitor will start by looking at the top left of the screen. In this case, <strong>what do you want them to see first<\/strong>?<\/p>\n<p>To obtain the most benefits from the Z-shape, the content creator should place the main components at the top horizontal lines because that is where the user will look first. The following elements should then be organized according to the order we described before.<\/p>\n<p>Let&#8217;s imagine you&#8217;re designing a landing page. One possibility is to put your logo in the first area. This way, the visitor becomes aware of your brand and understands that what comes next will be associated with it.<\/p>\n<p>On point #2 is where important links are usually placed, letting the user know where important information can be found. It is highly recommendable to include a shortcut for the call to action or a link for contact there.<\/p>\n<p>The center of the page is a good place for an image, as it separates the top section of the design from the bottom. Area #3 could include some sort of product preview and be followed by elements that lead the viewer&#8217;s attention to point #4, where a call to action should be.<\/p>\n<p>Of course, there can be variations of this scheme. Storytelling content that uses the Zig-Zag pattern, for example, leaves more room for creativity. The most important thing to remember is that <strong>the Z-shaped pattern for reading should contain minimal text, highlight a few key elements, and create a clear path down the page<\/strong>.<\/p>\n<p>The beauty of taking advantage of the most appropriate design is establishing a visual hierarchy that will ultimately end with the user completing the intended action.<\/p>\n<p>Understanding what kinds of <a href=\"https:\/\/visual.ly\/blog\/why-every-marketer-needs-to-care-about-content-strategy\/\" target=\"_blank\" rel=\"noopener noreferrer\">content strategies<\/a> are the most effective for your goal is an important part of <a href=\"https:\/\/pingback.com\/en\/resources\/interactive-marketing-how-this-works\/\" target=\"_blank\" rel=\"noopener noreferrer\">interactive marketing<\/a>. Using the right design for your content can <a href=\"https:\/\/pingback.com\/en\/resources\/how-to-build-content-engagement\/\" target=\"_blank\" rel=\"noopener noreferrer\">boost engagement<\/a> and retention, not to mention it has the potential of <a href=\"https:\/\/pingback.com\/en\/resources\/creating-leads-interactive-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">generating more leads<\/a>. It is worth giving deeper thought to it and getting to know the possibilities.<\/p>\n<p>Now that you know more about how to use the Z-shaped pattern for reading to improve the design of your content, find out what are the <a href=\"https:\/\/visual.ly\/blog\/metrics-to-measure-content-performance\/\" target=\"_blank\" rel=\"noopener noreferrer\">most important metrics to measure content performance<\/a>!<\/p>\n<p> }}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to webpage design, a Z-shaped pattern for reading plays an integral part in a website&#8217;s performance \u2014 that&#8217;s what experts in content marketing assessments\u00a0may tell you. It impacts the amount of time someone spends on the page. That\u00b4s why it is important to understand that different layout shapes serve different purposes. Take [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":57554,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[125],"tags":[],"class_list":["post-63451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Z-shaped pattern for reading: what it is and how it works<\/title>\n<meta name=\"description\" content=\"Did you know that the Z-shaped pattern for reading is ideal for landing pages? Find out more about it!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Z-shaped pattern for reading: what it is and how it works\" \/>\n<meta property=\"og:description\" content=\"Did you know that the Z-shaped pattern for reading is ideal for landing pages? Find out more about it!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-12T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-10T03:20:35+00:00\" \/>\n<meta name=\"author\" content=\"Carolina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carolina\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/\",\"url\":\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/\",\"name\":\"Z-shaped pattern for reading: what it is and how it works\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2020-05-12T00:00:00+00:00\",\"dateModified\":\"2025-09-10T03:20:35+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33\"},\"description\":\"Did you know that the Z-shaped pattern for reading is ideal for landing pages? Find out more about it!\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Z-shaped pattern for reading: what it is and how does it work?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/en\/resources\/\",\"name\":\"Pingback\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/en\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33\",\"name\":\"Carolina\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Carolina\"},\"sameAs\":[\"https:\/\/pingback.com\"],\"url\":\"https:\/\/pingback.com\/en\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Z-shaped pattern for reading: what it is and how it works","description":"Did you know that the Z-shaped pattern for reading is ideal for landing pages? Find out more about it!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/","og_locale":"pt_BR","og_type":"article","og_title":"Z-shaped pattern for reading: what it is and how it works","og_description":"Did you know that the Z-shaped pattern for reading is ideal for landing pages? Find out more about it!","og_url":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/","og_site_name":"Pingback","article_published_time":"2020-05-12T00:00:00+00:00","article_modified_time":"2025-09-10T03:20:35+00:00","author":"Carolina","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Carolina","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/","url":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/","name":"Z-shaped pattern for reading: what it is and how it works","isPartOf":{"@id":"https:\/\/pingback.com\/en\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#primaryimage"},"thumbnailUrl":"","datePublished":"2020-05-12T00:00:00+00:00","dateModified":"2025-09-10T03:20:35+00:00","author":{"@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33"},"description":"Did you know that the Z-shaped pattern for reading is ideal for landing pages? Find out more about it!","breadcrumb":{"@id":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/en\/resources\/z-shaped-pattern-for-reading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Z-shaped pattern for reading: what it is and how does it work?"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/en\/resources\/#website","url":"https:\/\/pingback.com\/en\/resources\/","name":"Pingback","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/en\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33","name":"Carolina","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Carolina"},"sameAs":["https:\/\/pingback.com"],"url":"https:\/\/pingback.com\/en\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/63451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/comments?post=63451"}],"version-history":[{"count":4,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/63451\/revisions"}],"predecessor-version":[{"id":127873,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/63451\/revisions\/127873"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/media?parent=63451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/categories?post=63451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/tags?post=63451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}