-
-
Save jtojnar/5b459361843075e7b52f701f320ed85a to your computer and use it in GitHub Desktop.
differences between readability parsing https://github.com/fossar/selfoss/issues/1230
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- mine.php | |
| +++ yours.php | |
| @@ -407,29 +407,29 @@ | |
| </header><div class="st-post-content st-entry st-clr" itemprop="text"> | |
| <p>Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.</p> | |
| <p>There is a direct relationship between content overload and information quality (<a href="https://www.researchgate.net/publication/276154707_THE_INFORMATION_OVERLOAD_PHENOMENON_THE_INFLUENCE_OF_BAD_-_AND_IR_RELEVANT_INFORMATION">research study</a>). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.</p> | |
| -<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408"><noscript> | |
| +<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32075" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408"></p> | |
| -</noscript></p> | |
| +</noscript> | |
| <p>Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.</p> | |
| <h2>De-emphasis</h2> | |
| <p>Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.</p> | |
| -<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408"><noscript> | |
| +<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32076" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408"></p> | |
| -</noscript></p> | |
| +</noscript> | |
| <p>Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.</p> | |
| <h2>Pattern Breaking</h2> | |
| <p>Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.</p> | |
| <p>The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.</p> | |
| -<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408"><noscript> | |
| +<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32078" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408"></p> | |
| -</noscript></p> | |
| +</noscript> | |
| <p>If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.</p> | |
| <p>You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.</p> | |
| <h2>Scaling and Badging</h2> | |
| <p>Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.</p> | |
| -<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408"><noscript> | |
| +<p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32079" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408"></p> | |
| -</noscript></p> | |
| +</noscript> | |
| <p>A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.</p> | |
| <hr><h2>Access the Full Article</h2> | |
| <p>This is only half the article. The other half shows you design techniques for hierarchy on grid layouts. Become a subscriber to access the full article.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| array(1) { | |
| ["pre-tidy"]=> | |
| string(35654) "<!DOCTYPE html><html lang="en-US" | |
| prefix="og: https://ogp.me/ns#" ><head><meta charset="UTF-8"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /><meta http-equiv="x-dns-prefetch-control" content="on"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="pingback" href="https://uxmovement.com/xmlrpc.php"><link rel="profile" href="http://gmpg.org/xfn/11"><title>Strong Layout Hierarchy Reduces Content Overload</title><meta name="description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't" /><meta name="keywords" content="content" /> <link rel="canonical" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /><meta property="og:type" content="article" /><meta property="og:title" content="Strong Layout Hierarchy Reduces Content Overload" /><meta property="og:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /><meta property="og:url" content="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /><meta property="og:site_name" content="UX Movement" /><meta property="og:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /><meta property="article:published_time" content="2020-11-11T17:11:26Z" /><meta property="article:modified_time" content="2020-11-11T00:27:56Z" /><meta property="og:image:secure_url" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@uxmovement" /><meta name="twitter:domain" content="uxmovement.com" /><meta name="twitter:title" content="Strong Layout Hierarchy Reduces Content Overload" /><meta name="twitter:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /><meta name="twitter:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> <link rel='dns-prefetch' href='//fonts.googleapis.com' /><link rel='dns-prefetch' href='//s.w.org' /><link rel="alternate" type="application/rss+xml" title="UX Movement » Feed" href="https://uxmovement.com/feed/" /><link rel="alternate" type="application/rss+xml" title="UX Movement » Comments Feed" href="https://uxmovement.com/comments/feed/" /><link rel="alternate" type="application/rss+xml" title="UX Movement » Strong Layout Hierarchy Reduces Content Overload Comments Feed" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/feed/" /> <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /></noscript> <link rel='https://api.w.org/' href='https://uxmovement.com/wp-json/' /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://uxmovement.com/xmlrpc.php?rsd" /><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://uxmovement.com/wp-includes/wlwmanifest.xml" /><link rel='prev' title='Color Contrast Mistakes on Buttons' href='https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/' /><meta name="generator" content="WordPress 4.9.16" /><link rel='shortlink' href='https://uxmovement.com/?p=32074' /><link rel="alternate" type="application/json+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" /><link rel="alternate" type="text/xml+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&format=xml" /> <link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-32x32.png" sizes="32x32" /><link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-192x192.png" sizes="192x192" /><link rel="apple-touch-icon-precomposed" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-180x180.png" /><meta name="msapplication-TileImage" content="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-270x270.png" /><meta name="generator" content="Built With The Status WordPress Theme 1.3 by WPExplorer" /></head><body class="post-template-default single single-post postid-32074 single-format-standard custom-background full-width st-has-topbar-social st-entry-style-grid st-responsive" itemscope="itemscope" itemtype="http://schema.org/WebPage"><div class="st-site-wrap"><div class="st-topbar-wrap st-clr"><div class="st-topbar st-container st-clr"><div class="st-topbar-left st-clr"><nav class="st-topbar-nav st-clr" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul id="menu-pages" class="st-dropdown-menu"><li id="menu-item-8857" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li><li id="menu-item-8858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li><li id="menu-item-8860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li><li id="menu-item-8865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li></ul></nav></div><div class="st-topbar-right st-clr"><div class="st-topbar-social st-clr"><div class="st-topbar-social-item"><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></div><div class="st-topbar-social-item"><a href="https://uxmovement.substack.com" title="Email" class="st-social-bg st-email" target="_blank"></a></div><div class="st-topbar-social-item"><a href="https://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></div></div></div></div></div><div class="st-site-header-wrap st-clr" itemscope role="banner" itemtype="http://schema.org/WPHeader"><header class="st-site-header st-container st-clr"><div class="st-site-branding st-clr"><div class="st-site-logo st-clr"> <a href="https://uxmovement.com/" title="UX Movement" rel="home"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /><noscript><img src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /></noscript></a></div></div></header><div class="st-site-nav-wrap st-clr"><nav class="st-site-nav st-container st-clr" ><div class="st-site-nav-container"><ul id="menu-categories" class="st-dropdown-menu"><li id="menu-item-10767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10767"><a title="Forms" href="https://uxmovement.com/category/forms/" class="st-is-cat st-term-77">Forms</a></li><li id="menu-item-10768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10768"><a title="Navigation" href="https://uxmovement.com/category/navigation/" class="st-is-cat st-term-106">Navigation</a></li><li id="menu-item-10772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10772"><a title="Buttons" href="https://uxmovement.com/category/buttons/" class="st-is-cat st-term-108">Buttons</a></li><li id="menu-item-10766" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-10766"><a title="Content" href="https://uxmovement.com/category/content/" class="st-is-cat st-term-80">Content</a></li><li id="menu-item-10771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10771"><a title="Mobile" href="https://uxmovement.com/category/mobile/" class="st-is-cat st-term-92">Mobile</a></li><li id="menu-item-10770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10770"><a title="Wireframes" href="https://uxmovement.com/category/wireframes/" class="st-is-cat st-term-83">Wireframes</a></li><li id="menu-item-10773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10773"><a title="Thinking" href="https://uxmovement.com/category/thinking/" class="st-is-cat st-term-85">Thinking</a></li><li id="menu-item-10774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10774"><a title="Sponsors" href="https://uxmovement.com/category/sponsors/" class="st-is-cat st-term-97">Sponsors</a></li><li id="menu-item-10769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10769"><a title="Products" href="https://uxmovement.com/category/products/" class="st-is-cat st-term-87">Products</a></li></ul></div> <a href="#" title="Search" class="st-menu-search-toggle"></a></nav></div></div><div class="st-site-content st-container st-clr"><div class="st-content-area st-clr"><main class="st-site-main st-clr"><div class="st-ad-region st-single-top st-clr"></div><div class="site-main-inner st-clr"><article class="st-post-article st-clr" ><div class="st-entry-cat st-post-cat st-clr st-button-typo"><a href="https://uxmovement.com/category/content/" title="Content" class="st-term-80 st-accent-bg">Content</a></div><header class="st-post-header st-clr"><h1 class="st-post-title">Strong Layout Hierarchy Reduces Content Overload</h1><div class="st-meta st-post-meta st-clr"><ul class="st-clr"><li class="st-date"><time class="updated" datetime="2020-11-11" itemprop="datePublished">November 11, 2020</time></li><li class="st-author"><a href="https://uxmovement.com/author/anthony/">anthony</a></li><li class="st-comments"><a href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="comments-link" >0 Comments</a></li></ul></div></header><div class="st-post-content st-entry st-clr" itemprop="text"><p>Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.</p><p>There is a direct relationship between content overload and information quality (<a href="https://www.researchgate.net/publication/276154707_THE_INFORMATION_OVERLOAD_PHENOMENON_THE_INFLUENCE_OF_BAD_-_AND_IR_RELEVANT_INFORMATION">research study</a>). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /><noscript><img class="aligncenter size-full wp-image-32075" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /></noscript></p><p>Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.</p><h2>De-emphasis</h2><p>Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /><noscript><img class="aligncenter size-full wp-image-32076" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /></noscript></p><p>Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.</p><h2>Pattern Breaking</h2><p>Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.</p><p>The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /><noscript><img class="aligncenter size-full wp-image-32078" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /></noscript></p><p>If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.</p><p>You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.</p><h2>Scaling and Badging</h2><p>Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /><noscript><img class="aligncenter size-full wp-image-32079" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /></noscript></p><p>A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.</p><hr /><h2>Access the Full Article</h2><p>This is only half the article. The other half shows you design techniques for hierarchy on grid layouts. Become a subscriber to access the full article.</p><p style="text-align: center;"><a class="st-theme-button" href="https://uxmovement.substack.com/subscribe?coupon=8f63b414">Access full article</a></p><div class="widget_text awac-wrapper"><div class="widget_text awac widget custom_html-5"><div class="textwidget custom-html-widget"><hr /> | |
| <iframe src="https://uxmovement.substack.com/embed" width="792" height="270" style="border:1px solid #EEE; background:white; border-radius: 12px;" frameborder="0" scrolling="no"></iframe></div></div></div><div class="awac-wrapper"><div class="awac widget media_image-6"><h4 class="widget-title">Toolkits</h4><a href="https://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjIiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyNjIgNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="262" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /><noscript><img width="262" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /></noscript></a></div></div><div class="awac-wrapper"><div class="awac widget media_image-5"><a href="https://uxmovement.com/products/flow-patterns-for-sketch-figma/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyMDggNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="208" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /><noscript><img width="208" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /></noscript></a></div></div><div class="widget_text awac-wrapper"><div class="widget_text awac widget custom_html-6"><h4 class="widget-title">Affiliates</h4><div class="textwidget custom-html-widget"><a href="https://uxmovement.com/thinking/how-designers-save-time-by-using-wordpress-themes/" target="_blank" rel="nofollow"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyMzQgNjAiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" style="border:0px" data-src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"><noscript><img style="border:0px" src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"></noscript></a></div></div></div></div><section class="st-author-info st-clr"><h4 class="st-heading">Article written by anthony</h4><div class="st-author-info-inner st-clr"><div class="st-author-info-avatar"> | |
| <a href="https://uxmovement.com/author/anthony/" title="Visit Author Page"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTMwIiB2aWV3Qm94PSIwIDAgMTMwIDEzMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" alt='' data-src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' data-srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /><noscript><img alt='' src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /></noscript></a></div><div class="st-author-info-content st-entry st-clr"><p>Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.</p></div></div><div class="st-author-info-recent st-clr"><h5 class="st-heading">Latest from this author<a href="https://uxmovement.com/author/anthony/" title="view all" class="st-more">view all</a></h5><ul><li><a href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/" title="Color Contrast Mistakes on Buttons">Color Contrast Mistakes on Buttons</a></li><li><a href="https://uxmovement.com/sponsors/bugherd-gather-website-feedback-without-the-long-email-chain/" title="BugHerd: Gather Website Feedback Without the Long Email Chain">BugHerd: Gather Website Feedback Without the Long Email Chain</a></li><li><a href="https://uxmovement.com/navigation/a-faster-way-to-view-search-results-with-fewer-clicks/" title="A Faster Way to View Search Results with Fewer Clicks">A Faster Way to View Search Results with Fewer Clicks</a></li><li><a href="https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/" title="10 Usability Mistakes Most Designers Make on Checkboxes">10 Usability Mistakes Most Designers Make on Checkboxes</a></li><li><a href="https://uxmovement.com/forms/why-signups-logins-should-open-in-a-right-form-drawer/" title="Why Signups & Logins Should Open in a Right Form Drawer">Why Signups & Logins Should Open in a Right Form Drawer</a></li></ul></div></section><section class="st-related-posts-wrap st-clr"><h4 class="st-heading">You May Also Like</h4><div class="st-related-posts st-clr"><div class="st-related-post st-clr"><div class="st-related-post-thumbnail st-clr"> | |
| <a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjYiIGhlaWdodD0iNDQ0IiB2aWV3Qm94PSIwIDAgNjY2IDQ0NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="666" height="444" data-src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript><img width="666" height="444" src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></noscript></a></div><div class="st-related-post-content st-clr"><h3 class="st-related-post-title"> | |
| <a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"> | |
| How Scan Control Improves the Readability of Content Cards </a></h3><ul class="st-related-post-meta st-meta st-clr"><li class="st-date">September 1, 2020</li><li class="st-comments"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/#comments" class="comments-link" >1 Comment</a></li></ul><div class="st-related-post-excerpt st-clr"> | |
| Content cards are one of the most common ways for apps to organize their content. They allow users…</div></div></div><div class="st-related-post st-clr st-last"><div class="st-related-post-thumbnail st-clr"> | |
| <a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iMzA0IiB2aWV3Qm94PSIwIDAgNDgwIDMwNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="480" height="304" data-src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript><img width="480" height="304" src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></noscript></a></div><div class="st-related-post-content st-clr"><h3 class="st-related-post-title"> | |
| <a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"> | |
| Why You Should Avoid Bright, Saturated Background Colors </a></h3><ul class="st-related-post-meta st-meta st-clr"><li class="st-date">May 22, 2018</li><li class="st-comments"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/#comments" class="comments-link" >1 Comment</a></li></ul><div class="st-related-post-excerpt st-clr"> | |
| Are you choosing colors for your interface that strain the user’s eyes? If you’re using a bright and…</div></div></div></div></section><div id="comments" class="comments-area st-clr"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/content/strong-layout-hierarchy-reduces-content-overload/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://uxmovement.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes">Your email address will not be published. Required fields are marked *</p><p class="comment-form-author"><label for="author">Name *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p><p class="comment-form-email"><label for="email">Email *</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p><p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="comment-form-comment"><label for="comment">Comment</label></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='32074' id='comment_post_ID' /> | |
| <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div><div class="st-ad-region st-single-bottom st-clr"></div></article></div></main></div></div><div class="st-footer-divider st-shuffle st-clr"></div><footer class="st-site-footer" itemscope itemtype="http://schema.org/WPFooter"><div class="st-footer-widgets-wrap st-container st-clr"><div class="st-footer-widgets st-row st-clr"><div class="st-footer-box st-col st-clr st-col-3"><div class="footer-widget widget_st_social_profiles st-clr"><h6 class="widget-title">Follow UX Movement</h6><div class="st-social-profiles-widget st-clr"><ul class="st-clr"><li> | |
| <a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></li><li> | |
| <a href="http://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></li></ul></div></div><div class="footer-widget widget_nav_menu st-clr"><div class="menu-pages-container"><ul id="menu-pages-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li></ul></div></div></div><div class="st-footer-box st-col st-clr st-col-3"><div class="footer-widget widget_categories st-clr"><h6 class="widget-title">Topics</h6><ul><li class="cat-item cat-item-108"><a href="https://uxmovement.com/category/buttons/" title="Articles on designing buttons and icons">Buttons</a> (38)</li><li class="cat-item cat-item-80"><a href="https://uxmovement.com/category/content/" title="Articles on optimizing text and images">Content</a> (43)</li><li class="cat-item cat-item-77"><a href="https://uxmovement.com/category/forms/" title="Articles on designing intuitive form components">Forms</a> (68)</li><li class="cat-item cat-item-92"><a href="https://uxmovement.com/category/mobile/" title="Articles on designing for mobile screens">Mobile</a> (25)</li><li class="cat-item cat-item-106"><a href="https://uxmovement.com/category/navigation/" title="Articles on designing navigation components">Navigation</a> (37)</li><li class="cat-item cat-item-87"><a href="https://uxmovement.com/category/products/" title="Products created by UX Movement">Products</a> (12)</li><li class="cat-item cat-item-97"><a href="https://uxmovement.com/category/sponsors/" title="Paid articles promoting products">Sponsors</a> (48)</li><li class="cat-item cat-item-85"><a href="https://uxmovement.com/category/thinking/" title="Articles on design theory and ideas">Thinking</a> (33)</li><li class="cat-item cat-item-83"><a href="https://uxmovement.com/category/wireframes/" title="Articles on creating wireframes and deliverables">Wireframes</a> (13)</li></ul></div></div><div class="st-footer-box st-col st-clr st-col-3"><div class="footer-widget widget_search st-clr"><h6 class="widget-title">Looking for an article?</h6><form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <input type="search" class="field" name="s" value="Search…" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> | |
| <button type="submit"></button></form></div><div class="footer-widget widget_st_about st-clr"><h6 class="widget-title">About UX Movement</h6><div class="st-about-widget st-clr"><div class="st-about-widget-description"> | |
| A user experience design blog dedicated to teaching you the best practices, design techniques and principles that will make your interface intuitive and easy to use.</div></div></div></div></div></div><div class="st-footer-bottom"><div class="st-container st-clr"><div class="footer-copyright st-clr" role="contentinfo">© Copyright UX Movement. All rights reserved.</div></div></div></footer></div><a href="#" title="Top" class="st-site-scroll-top"></a><div class="st-search-overlay st-clr"><form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <input type="search" class="field" name="s" placeholder="To search type and hit enter…" /> | |
| <button type="submit"></button></form></div><div class="st-post-share st-clr"><div class="st-container st-clr"><ul class="st-clr"><li class="st-twitter"> | |
| <a href="http://twitter.com/share?text=Strong+Layout+Hierarchy+Reduces+Content+Overload&url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Twitter" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> | |
| Tweet </a></li><li class="st-facebook"> | |
| <a href="http://www.facebook.com/share.php?u=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Facebook" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> | |
| Share </a></li><li class="st-pinterest"> | |
| <a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&media=https%3A%2F%2Fuxmovement.com%2Fwp-content%2Fuploads%2F2020%2F11%2Flayout-beforeafter.png&description=Content+overload+is+a+common+problem+that%E2%80%99s+not+only+caused+by+a+high+quantity+of+content.+It%E2%80%99s+also+caused+by+the+way+all+that+content+is+displayed.+You+can%E2%80%99t+control+how+content+grows+over+time%2C+but+you+can+control+the+way+you+present+it.+This+is+why+layout+hierarchy+is+crucial+for+reducing+content+overload.+%5B%26hellip%3B%5D" title="Share on Pinterest" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> | |
| Pin it </a></li><li class="st-comment"> | |
| <a href="#comments" title="Comment" rel="nofollow"> | |
| Comment </a></li></ul></div></div> </body></html> | |
| <!-- Page optimized by LiteSpeed Cache @2020-11-12 15:58:15 --> | |
| <!-- Page generated by LiteSpeed Cache 3.5.2 on 2020-11-12 09:58:15 -->" | |
| } | |
| array(1) { | |
| ["post-tidy"]=> | |
| string(35369) "<html lang="en-US" prefix="og: https://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" /> | |
| <meta http-equiv="x-dns-prefetch-control" content="on" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="pingback" href="https://uxmovement.com/xmlrpc.php" /> | |
| <link rel="profile" href="http://gmpg.org/xfn/11" /> | |
| <title>Strong Layout Hierarchy Reduces Content Overload</title> | |
| <meta name="description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't" /> | |
| <meta name="keywords" content="content" /> | |
| <link rel="canonical" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /> | |
| <meta property="og:type" content="article" /> | |
| <meta property="og:title" content="Strong Layout Hierarchy Reduces Content Overload" /> | |
| <meta property="og:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /> | |
| <meta property="og:url" content="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /> | |
| <meta property="og:site_name" content="UX Movement" /> | |
| <meta property="og:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> | |
| <meta property="article:published_time" content="2020-11-11T17:11:26Z" /> | |
| <meta property="article:modified_time" content="2020-11-11T00:27:56Z" /> | |
| <meta property="og:image:secure_url" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> | |
| <meta name="twitter:card" content="summary_large_image" /> | |
| <meta name="twitter:site" content="@uxmovement" /> | |
| <meta name="twitter:domain" content="uxmovement.com" /> | |
| <meta name="twitter:title" content="Strong Layout Hierarchy Reduces Content Overload" /> | |
| <meta name="twitter:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /> | |
| <meta name="twitter:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> | |
| <link rel='dns-prefetch' href='//fonts.googleapis.com' /> | |
| <link rel='dns-prefetch' href='//s.w.org' /> | |
| <link rel="alternate" type="application/rss+xml" title="UX Movement » Feed" href="https://uxmovement.com/feed/" /> | |
| <link rel="alternate" type="application/rss+xml" title="UX Movement » Comments Feed" href="https://uxmovement.com/comments/feed/" /> | |
| <link rel="alternate" type="application/rss+xml" title="UX Movement » Strong Layout Hierarchy Reduces Content Overload Comments Feed" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/feed/" /> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /></noscript> | |
| <link rel='https://api.w.org/' href='https://uxmovement.com/wp-json/' /> | |
| <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://uxmovement.com/xmlrpc.php?rsd" /> | |
| <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://uxmovement.com/wp-includes/wlwmanifest.xml" /> | |
| <link rel='prev' title='Color Contrast Mistakes on Buttons' href='https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/' /> | |
| <meta name="generator" content="WordPress 4.9.16" /> | |
| <link rel='shortlink' href='https://uxmovement.com/?p=32074' /> | |
| <link rel="alternate" type="application/json+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" /> | |
| <link rel="alternate" type="text/xml+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&format=xml" /> | |
| <link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-32x32.png" sizes="32x32" /> | |
| <link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-192x192.png" sizes="192x192" /> | |
| <link rel="apple-touch-icon-precomposed" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-180x180.png" /> | |
| <meta name="msapplication-TileImage" content="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-270x270.png" /> | |
| <meta name="generator" content="Built With The Status WordPress Theme 1.3 by WPExplorer" /> | |
| <style type="text/css"> | |
| /*<![CDATA[*/ | |
| a.c5 {display:none;} | |
| img.c4 {border:0px} | |
| img.c3 {max-width: 100%; height: auto;} | |
| iframe.c2 {border:1px solid #EEE; background:white; border-radius: 12px;} | |
| p.c1 {text-align: center;} | |
| /*]]>*/ | |
| </style> | |
| </head> | |
| <body class="post-template-default single single-post postid-32074 single-format-standard custom-background full-width st-has-topbar-social st-entry-style-grid st-responsive" itemscope="itemscope" itemtype="http://schema.org/WebPage"> | |
| <div class="st-site-wrap"> | |
| <div class="st-topbar-wrap st-clr st-topbar st-container st-clr"> | |
| <div class="st-topbar-left st-clr"> | |
| <nav class="st-topbar-nav st-clr" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"> | |
| <ul id="menu-pages" class="st-dropdown-menu"> | |
| <li id="menu-item-8857" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li id="menu-item-8858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li id="menu-item-8860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li id="menu-item-8865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="st-topbar-right st-clr st-topbar-social st-clr"> | |
| <div class="st-topbar-social-item"><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.substack.com" title="Email" class="st-social-bg st-email" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></div> | |
| </div> | |
| </div> | |
| <div class="st-site-header-wrap st-clr" itemscope="itemscope" role="banner" itemtype="http://schema.org/WPHeader"> | |
| <header class="st-site-header st-container st-clr"> | |
| <div class="st-site-branding st-clr st-site-logo st-clr"><a href="https://uxmovement.com/" title="UX Movement" rel="home"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /><noscript> | |
| <p><img src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /></p> | |
| </noscript></a></div> | |
| </header> | |
| <div class="st-site-nav-wrap st-clr"> | |
| <nav class="st-site-nav st-container st-clr"> | |
| <div class="st-site-nav-container"> | |
| <ul id="menu-categories" class="st-dropdown-menu"> | |
| <li id="menu-item-10767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10767"><a title="Forms" href="https://uxmovement.com/category/forms/" class="st-is-cat st-term-77">Forms</a></li> | |
| <li id="menu-item-10768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10768"><a title="Navigation" href="https://uxmovement.com/category/navigation/" class="st-is-cat st-term-106">Navigation</a></li> | |
| <li id="menu-item-10772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10772"><a title="Buttons" href="https://uxmovement.com/category/buttons/" class="st-is-cat st-term-108">Buttons</a></li> | |
| <li id="menu-item-10766" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-10766"><a title="Content" href="https://uxmovement.com/category/content/" class="st-is-cat st-term-80">Content</a></li> | |
| <li id="menu-item-10771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10771"><a title="Mobile" href="https://uxmovement.com/category/mobile/" class="st-is-cat st-term-92">Mobile</a></li> | |
| <li id="menu-item-10770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10770"><a title="Wireframes" href="https://uxmovement.com/category/wireframes/" class="st-is-cat st-term-83">Wireframes</a></li> | |
| <li id="menu-item-10773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10773"><a title="Thinking" href="https://uxmovement.com/category/thinking/" class="st-is-cat st-term-85">Thinking</a></li> | |
| <li id="menu-item-10774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10774"><a title="Sponsors" href="https://uxmovement.com/category/sponsors/" class="st-is-cat st-term-97">Sponsors</a></li> | |
| <li id="menu-item-10769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10769"><a title="Products" href="https://uxmovement.com/category/products/" class="st-is-cat st-term-87">Products</a></li> | |
| </ul> | |
| </div> | |
| <a href="#" title="Search" class="st-menu-search-toggle"></a></nav> | |
| </div> | |
| </div> | |
| <div class="st-site-content st-container st-clr st-content-area st-clr"> | |
| <main class="st-site-main st-clr"> | |
| <div class="st-ad-region st-single-top st-clr"></div> | |
| <div class="site-main-inner st-clr"> | |
| <article class="st-post-article st-clr"> | |
| <div class="st-entry-cat st-post-cat st-clr st-button-typo"><a href="https://uxmovement.com/category/content/" title="Content" class="st-term-80 st-accent-bg">Content</a></div> | |
| <header class="st-post-header st-clr"> | |
| <h1 class="st-post-title">Strong Layout Hierarchy Reduces Content Overload</h1> | |
| <div class="st-meta st-post-meta st-clr"> | |
| <ul class="st-clr"> | |
| <li class="st-date"><time class="updated" datetime="2020-11-11" itemprop="datePublished">November 11, 2020</time></li> | |
| <li class="st-author"><a href="https://uxmovement.com/author/anthony/">anthony</a></li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="comments-link">0 Comments</a></li> | |
| </ul> | |
| </div> | |
| </header> | |
| <div class="st-post-content st-entry st-clr" itemprop="text"> | |
| <p>Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.</p> | |
| <p>There is a direct relationship between content overload and information quality (<a href="https://www.researchgate.net/publication/276154707_THE_INFORMATION_OVERLOAD_PHENOMENON_THE_INFLUENCE_OF_BAD_-_AND_IR_RELEVANT_INFORMATION">research study</a>). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32075" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /></p> | |
| </noscript></p> | |
| <p>Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.</p> | |
| <h2>De-emphasis</h2> | |
| <p>Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32076" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /></p> | |
| </noscript></p> | |
| <p>Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.</p> | |
| <h2>Pattern Breaking</h2> | |
| <p>Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.</p> | |
| <p>The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32078" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /></p> | |
| </noscript></p> | |
| <p>If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.</p> | |
| <p>You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.</p> | |
| <h2>Scaling and Badging</h2> | |
| <p>Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32079" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /></p> | |
| </noscript></p> | |
| <p>A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.</p> | |
| <hr /> | |
| <h2>Access the Full Article</h2> | |
| <p>This is only half the article. The other half shows you design techniques for hierarchy on grid layouts. Become a subscriber to access the full article.</p> | |
| <p class="c1"><a class="st-theme-button" href="https://uxmovement.substack.com/subscribe?coupon=8f63b414">Access full article</a></p> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-5 textwidget custom-html-widget"> | |
| <hr /> | |
| <iframe src="https://uxmovement.substack.com/embed" width="792" height="270" class="c2" frameborder="0" scrolling="no"></iframe></div> | |
| <div class="awac-wrapper awac widget media_image-6"> | |
| <h4 class="widget-title">Toolkits</h4> | |
| <a href="https://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjIiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyNjIgNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="262" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt="" /><noscript> | |
| <p><img width="262" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="awac-wrapper awac widget media_image-5"><a href="https://uxmovement.com/products/flow-patterns-for-sketch-figma/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyMDggNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="208" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt="" /><noscript> | |
| <p><img width="208" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-6"> | |
| <h4 class="widget-title">Affiliates</h4> | |
| <div class="textwidget custom-html-widget"><a href="https://uxmovement.com/thinking/how-designers-save-time-by-using-wordpress-themes/" target="_blank" rel="nofollow"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyMzQgNjAiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" class="c4" data-src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes" /><noscript> | |
| <p><img class="c4" src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes" /></p> | |
| </noscript></a></div> | |
| </div> | |
| </div> | |
| <section class="st-author-info st-clr"> | |
| <h4 class="st-heading">Article written by anthony</h4> | |
| <div class="st-author-info-inner st-clr"> | |
| <div class="st-author-info-avatar"><a href="https://uxmovement.com/author/anthony/" title="Visit Author Page"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTMwIiB2aWV3Qm94PSIwIDAgMTMwIDEzMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" alt='' data-src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' data-srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /><noscript> | |
| <p><img alt='' src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /></p> | |
| </noscript></a></div> | |
| <div class="st-author-info-content st-entry st-clr"> | |
| <p>Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.</p> | |
| </div> | |
| </div> | |
| <div class="st-author-info-recent st-clr"> | |
| <h5 class="st-heading">Latest from this author<a href="https://uxmovement.com/author/anthony/" title="view all" class="st-more">view all</a></h5> | |
| <ul> | |
| <li><a href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/" title="Color Contrast Mistakes on Buttons">Color Contrast Mistakes on Buttons</a></li> | |
| <li><a href="https://uxmovement.com/sponsors/bugherd-gather-website-feedback-without-the-long-email-chain/" title="BugHerd: Gather Website Feedback Without the Long Email Chain">BugHerd: Gather Website Feedback Without the Long Email Chain</a></li> | |
| <li><a href="https://uxmovement.com/navigation/a-faster-way-to-view-search-results-with-fewer-clicks/" title="A Faster Way to View Search Results with Fewer Clicks">A Faster Way to View Search Results with Fewer Clicks</a></li> | |
| <li><a href="https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/" title="10 Usability Mistakes Most Designers Make on Checkboxes">10 Usability Mistakes Most Designers Make on Checkboxes</a></li> | |
| <li><a href="https://uxmovement.com/forms/why-signups-logins-should-open-in-a-right-form-drawer/" title="Why Signups & Logins Should Open in a Right Form Drawer">Why Signups & Logins Should Open in a Right Form Drawer</a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section class="st-related-posts-wrap st-clr"> | |
| <h4 class="st-heading">You May Also Like</h4> | |
| <div class="st-related-posts st-clr"> | |
| <div class="st-related-post st-clr"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjYiIGhlaWdodD0iNDQ0IiB2aWV3Qm94PSIwIDAgNjY2IDQ0NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="666" height="444" data-src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript> | |
| <p><img width="666" height="444" src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards">How Scan Control Improves the Readability of Content Cards</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"> | |
| <li class="st-date">September 1, 2020</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/#comments" class="comments-link">1 Comment</a></li> | |
| </ul> | |
| <div class="st-related-post-excerpt st-clr">Content cards are one of the most common ways for apps to organize their content. They allow users…</div> | |
| </div> | |
| </div> | |
| <div class="st-related-post st-clr st-last"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iMzA0IiB2aWV3Qm94PSIwIDAgNDgwIDMwNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="480" height="304" data-src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript> | |
| <p><img width="480" height="304" src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors">Why You Should Avoid Bright, Saturated Background Colors</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"> | |
| <li class="st-date">May 22, 2018</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/#comments" class="comments-link">1 Comment</a></li> | |
| </ul> | |
| <div class="st-related-post-excerpt st-clr">Are you choosing colors for your interface that strain the user’s eyes? If you’re using a bright and…</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div id="comments" class="comments-area st-clr comment-respond"> | |
| <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="c5">Cancel reply</a></small></h3> | |
| <form action="https://uxmovement.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"> | |
| <p class="comment-notes">Your email address will not be published. Required fields are marked *</p> | |
| <p class="comment-form-author"><label for="author">Name *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> | |
| <p class="comment-form-email"><label for="email">Email *</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> | |
| <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> | |
| <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> | |
| <p class="comment-form-comment"><label for="comment">Comment</label></p> | |
| <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='32074' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p> | |
| </form> | |
| </div> | |
| <div class="st-ad-region st-single-bottom st-clr"></div> | |
| </article> | |
| </div> | |
| </main> | |
| </div> | |
| <div class="st-footer-divider st-shuffle st-clr"></div> | |
| <footer class="st-site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"> | |
| <div class="st-footer-widgets-wrap st-container st-clr st-footer-widgets st-row st-clr"> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_st_social_profiles st-clr"> | |
| <h6 class="widget-title">Follow UX Movement</h6> | |
| <div class="st-social-profiles-widget st-clr"> | |
| <ul class="st-clr"> | |
| <li><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></li> | |
| <li><a href="http://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-widget widget_nav_menu st-clr menu-pages-container"> | |
| <ul id="menu-pages-1" class="menu"> | |
| <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="st-footer-box st-col st-clr st-col-3 footer-widget widget_categories st-clr"> | |
| <h6 class="widget-title">Topics</h6> | |
| <ul> | |
| <li class="cat-item cat-item-108"><a href="https://uxmovement.com/category/buttons/" title="Articles on designing buttons and icons">Buttons</a> (38)</li> | |
| <li class="cat-item cat-item-80"><a href="https://uxmovement.com/category/content/" title="Articles on optimizing text and images">Content</a> (43)</li> | |
| <li class="cat-item cat-item-77"><a href="https://uxmovement.com/category/forms/" title="Articles on designing intuitive form components">Forms</a> (68)</li> | |
| <li class="cat-item cat-item-92"><a href="https://uxmovement.com/category/mobile/" title="Articles on designing for mobile screens">Mobile</a> (25)</li> | |
| <li class="cat-item cat-item-106"><a href="https://uxmovement.com/category/navigation/" title="Articles on designing navigation components">Navigation</a> (37)</li> | |
| <li class="cat-item cat-item-87"><a href="https://uxmovement.com/category/products/" title="Products created by UX Movement">Products</a> (12)</li> | |
| <li class="cat-item cat-item-97"><a href="https://uxmovement.com/category/sponsors/" title="Paid articles promoting products">Sponsors</a> (48)</li> | |
| <li class="cat-item cat-item-85"><a href="https://uxmovement.com/category/thinking/" title="Articles on design theory and ideas">Thinking</a> (33)</li> | |
| <li class="cat-item cat-item-83"><a href="https://uxmovement.com/category/wireframes/" title="Articles on creating wireframes and deliverables">Wireframes</a> (13)</li> | |
| </ul> | |
| </div> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_search st-clr"> | |
| <h6 class="widget-title">Looking for an article?</h6> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" value="Search…" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p> | |
| </form> | |
| </div> | |
| <div class="footer-widget widget_st_about st-clr"> | |
| <h6 class="widget-title">About UX Movement</h6> | |
| <div class="st-about-widget st-clr st-about-widget-description">A user experience design blog dedicated to teaching you the best practices, design techniques and principles that will make your interface intuitive and easy to use.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="st-footer-bottom st-container st-clr footer-copyright st-clr">© Copyright UX Movement. All rights reserved.</div> | |
| </footer> | |
| </div> | |
| <a href="#" title="Top" class="st-site-scroll-top"></a> | |
| <div class="st-search-overlay st-clr"> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" placeholder="To search type and hit enter…" /></p> | |
| </form> | |
| </div> | |
| <div class="st-post-share st-clr st-container st-clr"> | |
| <ul class="st-clr"> | |
| <li class="st-twitter"><a href="http://twitter.com/share?text=Strong+Layout+Hierarchy+Reduces+Content+Overload&url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Twitter" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Tweet</a></li> | |
| <li class="st-facebook"><a href="http://www.facebook.com/share.php?u=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Facebook" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Share</a></li> | |
| <li class="st-pinterest"><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&media=https%3A%2F%2Fuxmovement.com%2Fwp-content%2Fuploads%2F2020%2F11%2Flayout-beforeafter.png&description=Content+overload+is+a+common+problem+that%E2%80%99s+not+only+caused+by+a+high+quantity+of+content.+It%E2%80%99s+also+caused+by+the+way+all+that+content+is+displayed.+You+can%E2%80%99t+control+how+content+grows+over+time%2C+but+you+can+control+the+way+you+present+it.+This+is+why+layout+hierarchy+is+crucial+for+reducing+content+overload.+%5B%26hellip%3B%5D" title="Share on Pinterest" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Pin it</a></li> | |
| <li class="st-comment"><a href="#comments" title="Comment" rel="nofollow">Comment</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html>" | |
| } | |
| array(1) { | |
| ["post-load"]=> | |
| string(35319) "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> | |
| <html lang="en-US" prefix="og: https://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""><meta http-equiv="x-dns-prefetch-control" content="on"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="pingback" href="https://uxmovement.com/xmlrpc.php"><link rel="profile" href="http://gmpg.org/xfn/11"><title>Strong Layout Hierarchy Reduces Content Overload</title><meta name="description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't"><meta name="keywords" content="content"><link rel="canonical" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/"><meta property="og:type" content="article"><meta property="og:title" content="Strong Layout Hierarchy Reduces Content Overload"><meta property="og:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows"><meta property="og:url" content="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/"><meta property="og:site_name" content="UX Movement"><meta property="og:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png"><meta property="article:published_time" content="2020-11-11T17:11:26Z"><meta property="article:modified_time" content="2020-11-11T00:27:56Z"><meta property="og:image:secure_url" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@uxmovement"><meta name="twitter:domain" content="uxmovement.com"><meta name="twitter:title" content="Strong Layout Hierarchy Reduces Content Overload"><meta name="twitter:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows"><meta name="twitter:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png"><link rel="dns-prefetch" href="//fonts.googleapis.com"><link rel="dns-prefetch" href="//s.w.org"><link rel="alternate" type="application/rss+xml" title="UX Movement » Feed" href="https://uxmovement.com/feed/"><link rel="alternate" type="application/rss+xml" title="UX Movement » Comments Feed" href="https://uxmovement.com/comments/feed/"><link rel="alternate" type="application/rss+xml" title="UX Movement » Strong Layout Hierarchy Reduces Content Overload Comments Feed" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/feed/"><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="cpsh-shortcodes-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="cpsh-shortcodes-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="isell-style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="isell-style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="font-awesome-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="font-awesome-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="magnific-popup-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="magnific-popup-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7" type="text/css" media="all"></noscript><link rel="https://api.w.org/" href="https://uxmovement.com/wp-json/"><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://uxmovement.com/xmlrpc.php?rsd"><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://uxmovement.com/wp-includes/wlwmanifest.xml"><link rel="prev" title="Color Contrast Mistakes on Buttons" href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/"><meta name="generator" content="WordPress 4.9.16"><link rel="shortlink" href="https://uxmovement.com/?p=32074"><link rel="alternate" type="application/json+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F"><link rel="alternate" type="text/xml+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&format=xml"><link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-32x32.png" sizes="32x32"><link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-192x192.png" sizes="192x192"><link rel="apple-touch-icon-precomposed" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-180x180.png"><meta name="msapplication-TileImage" content="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-270x270.png"><meta name="generator" content="Built With The Status WordPress Theme 1.3 by WPExplorer"><style type="text/css"> | |
| /*<![CDATA[*/ | |
| a.c5 {display:none;} | |
| img.c4 {border:0px} | |
| img.c3 {max-width: 100%; height: auto;} | |
| iframe.c2 {border:1px solid #EEE; background:white; border-radius: 12px;} | |
| p.c1 {text-align: center;} | |
| /*]]>*/ | |
| </style></head><body class="post-template-default single single-post postid-32074 single-format-standard custom-background full-width st-has-topbar-social st-entry-style-grid st-responsive" itemscope="itemscope" itemtype="http://schema.org/WebPage"> | |
| <div class="st-site-wrap"> | |
| <div class="st-topbar-wrap st-clr st-topbar st-container st-clr"> | |
| <div class="st-topbar-left st-clr"> | |
| <nav class="st-topbar-nav st-clr" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><ul id="menu-pages" class="st-dropdown-menu"><li id="menu-item-8857" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li id="menu-item-8858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li id="menu-item-8860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li id="menu-item-8865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul></nav></div> | |
| <div class="st-topbar-right st-clr st-topbar-social st-clr"> | |
| <div class="st-topbar-social-item"><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.substack.com" title="Email" class="st-social-bg st-email" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></div> | |
| </div> | |
| </div> | |
| <div class="st-site-header-wrap st-clr" itemscope="itemscope" role="banner" itemtype="http://schema.org/WPHeader"> | |
| <header class="st-site-header st-container st-clr"><div class="st-site-branding st-clr st-site-logo st-clr"><a href="https://uxmovement.com/" title="UX Movement" rel="home"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement"><noscript> | |
| <p><img src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement"></p> | |
| </noscript></a></div> | |
| </header><div class="st-site-nav-wrap st-clr"> | |
| <nav class="st-site-nav st-container st-clr"><div class="st-site-nav-container"> | |
| <ul id="menu-categories" class="st-dropdown-menu"><li id="menu-item-10767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10767"><a title="Forms" href="https://uxmovement.com/category/forms/" class="st-is-cat st-term-77">Forms</a></li> | |
| <li id="menu-item-10768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10768"><a title="Navigation" href="https://uxmovement.com/category/navigation/" class="st-is-cat st-term-106">Navigation</a></li> | |
| <li id="menu-item-10772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10772"><a title="Buttons" href="https://uxmovement.com/category/buttons/" class="st-is-cat st-term-108">Buttons</a></li> | |
| <li id="menu-item-10766" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-10766"><a title="Content" href="https://uxmovement.com/category/content/" class="st-is-cat st-term-80">Content</a></li> | |
| <li id="menu-item-10771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10771"><a title="Mobile" href="https://uxmovement.com/category/mobile/" class="st-is-cat st-term-92">Mobile</a></li> | |
| <li id="menu-item-10770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10770"><a title="Wireframes" href="https://uxmovement.com/category/wireframes/" class="st-is-cat st-term-83">Wireframes</a></li> | |
| <li id="menu-item-10773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10773"><a title="Thinking" href="https://uxmovement.com/category/thinking/" class="st-is-cat st-term-85">Thinking</a></li> | |
| <li id="menu-item-10774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10774"><a title="Sponsors" href="https://uxmovement.com/category/sponsors/" class="st-is-cat st-term-97">Sponsors</a></li> | |
| <li id="menu-item-10769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10769"><a title="Products" href="https://uxmovement.com/category/products/" class="st-is-cat st-term-87">Products</a></li> | |
| </ul></div> | |
| <a href="#" title="Search" class="st-menu-search-toggle"></a></nav></div> | |
| </div> | |
| <div class="st-site-content st-container st-clr st-content-area st-clr"> | |
| <main class="st-site-main st-clr"><div class="st-ad-region st-single-top st-clr"></div> | |
| <div class="site-main-inner st-clr"> | |
| <article class="st-post-article st-clr"><div class="st-entry-cat st-post-cat st-clr st-button-typo"><a href="https://uxmovement.com/category/content/" title="Content" class="st-term-80 st-accent-bg">Content</a></div> | |
| <header class="st-post-header st-clr"><h1 class="st-post-title">Strong Layout Hierarchy Reduces Content Overload</h1> | |
| <div class="st-meta st-post-meta st-clr"> | |
| <ul class="st-clr"><li class="st-date"><time class="updated" datetime="2020-11-11" itemprop="datePublished">November 11, 2020</time></li> | |
| <li class="st-author"><a href="https://uxmovement.com/author/anthony/">anthony</a></li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="comments-link">0 Comments</a></li> | |
| </ul></div> | |
| </header><div class="st-post-content st-entry st-clr" itemprop="text"> | |
| <p>Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.</p> | |
| <p>There is a direct relationship between content overload and information quality (<a href="https://www.researchgate.net/publication/276154707_THE_INFORMATION_OVERLOAD_PHENOMENON_THE_INFLUENCE_OF_BAD_-_AND_IR_RELEVANT_INFORMATION">research study</a>). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408"><noscript> | |
| <p><img class="aligncenter size-full wp-image-32075" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408"></p> | |
| </noscript></p> | |
| <p>Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.</p> | |
| <h2>De-emphasis</h2> | |
| <p>Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408"><noscript> | |
| <p><img class="aligncenter size-full wp-image-32076" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408"></p> | |
| </noscript></p> | |
| <p>Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.</p> | |
| <h2>Pattern Breaking</h2> | |
| <p>Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.</p> | |
| <p>The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408"><noscript> | |
| <p><img class="aligncenter size-full wp-image-32078" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408"></p> | |
| </noscript></p> | |
| <p>If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.</p> | |
| <p>You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.</p> | |
| <h2>Scaling and Badging</h2> | |
| <p>Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408"><noscript> | |
| <p><img class="aligncenter size-full wp-image-32079" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408"></p> | |
| </noscript></p> | |
| <p>A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.</p> | |
| <hr><h2>Access the Full Article</h2> | |
| <p>This is only half the article. The other half shows you design techniques for hierarchy on grid layouts. Become a subscriber to access the full article.</p> | |
| <p class="c1"><a class="st-theme-button" href="https://uxmovement.substack.com/subscribe?coupon=8f63b414">Access full article</a></p> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-5 textwidget custom-html-widget"> | |
| <hr><iframe src="https://uxmovement.substack.com/embed" width="792" height="270" class="c2" frameborder="0" scrolling="no"></iframe></div> | |
| <div class="awac-wrapper awac widget media_image-6"> | |
| <h4 class="widget-title">Toolkits</h4> | |
| <a href="https://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjIiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyNjIgNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="262" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt=""><noscript> | |
| <p><img width="262" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt=""></p> | |
| </noscript></a></div> | |
| <div class="awac-wrapper awac widget media_image-5"><a href="https://uxmovement.com/products/flow-patterns-for-sketch-figma/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyMDggNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="208" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt=""><noscript> | |
| <p><img width="208" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt=""></p> | |
| </noscript></a></div> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-6"> | |
| <h4 class="widget-title">Affiliates</h4> | |
| <div class="textwidget custom-html-widget"><a href="https://uxmovement.com/thinking/how-designers-save-time-by-using-wordpress-themes/" target="_blank" rel="nofollow"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyMzQgNjAiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" class="c4" data-src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"><noscript> | |
| <p><img class="c4" src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"></p> | |
| </noscript></a></div> | |
| </div> | |
| </div> | |
| <section class="st-author-info st-clr"><h4 class="st-heading">Article written by anthony</h4> | |
| <div class="st-author-info-inner st-clr"> | |
| <div class="st-author-info-avatar"><a href="https://uxmovement.com/author/anthony/" title="Visit Author Page"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTMwIiB2aWV3Qm94PSIwIDAgMTMwIDEzMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" alt="" data-src="https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg" data-srcset="https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x" class="avatar avatar-130 photo" height="130" width="130"><noscript> | |
| <p><img alt="" src="https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg" srcset="https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x" class="avatar avatar-130 photo" height="130" width="130"></p> | |
| </noscript></a></div> | |
| <div class="st-author-info-content st-entry st-clr"> | |
| <p>Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.</p> | |
| </div> | |
| </div> | |
| <div class="st-author-info-recent st-clr"> | |
| <h5 class="st-heading">Latest from this author<a href="https://uxmovement.com/author/anthony/" title="view all" class="st-more">view all</a></h5> | |
| <ul><li><a href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/" title="Color Contrast Mistakes on Buttons">Color Contrast Mistakes on Buttons</a></li> | |
| <li><a href="https://uxmovement.com/sponsors/bugherd-gather-website-feedback-without-the-long-email-chain/" title="BugHerd: Gather Website Feedback Without the Long Email Chain">BugHerd: Gather Website Feedback Without the Long Email Chain</a></li> | |
| <li><a href="https://uxmovement.com/navigation/a-faster-way-to-view-search-results-with-fewer-clicks/" title="A Faster Way to View Search Results with Fewer Clicks">A Faster Way to View Search Results with Fewer Clicks</a></li> | |
| <li><a href="https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/" title="10 Usability Mistakes Most Designers Make on Checkboxes">10 Usability Mistakes Most Designers Make on Checkboxes</a></li> | |
| <li><a href="https://uxmovement.com/forms/why-signups-logins-should-open-in-a-right-form-drawer/" title="Why Signups & Logins Should Open in a Right Form Drawer">Why Signups & Logins Should Open in a Right Form Drawer</a></li> | |
| </ul></div> | |
| </section><section class="st-related-posts-wrap st-clr"><h4 class="st-heading">You May Also Like</h4> | |
| <div class="st-related-posts st-clr"> | |
| <div class="st-related-post st-clr"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjYiIGhlaWdodD0iNDQ0IiB2aWV3Qm94PSIwIDAgNjY2IDQ0NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="666" height="444" data-src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""><noscript> | |
| <p><img width="666" height="444" src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards">How Scan Control Improves the Readability of Content Cards</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"><li class="st-date">September 1, 2020</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/#comments" class="comments-link">1 Comment</a></li> | |
| </ul><div class="st-related-post-excerpt st-clr">Content cards are one of the most common ways for apps to organize their content. They allow users…</div> | |
| </div> | |
| </div> | |
| <div class="st-related-post st-clr st-last"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iMzA0IiB2aWV3Qm94PSIwIDAgNDgwIDMwNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="480" height="304" data-src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""><noscript> | |
| <p><img width="480" height="304" src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors">Why You Should Avoid Bright, Saturated Background Colors</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"><li class="st-date">May 22, 2018</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/#comments" class="comments-link">1 Comment</a></li> | |
| </ul><div class="st-related-post-excerpt st-clr">Are you choosing colors for your interface that strain the user’s eyes? If you’re using a bright and…</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section><div id="comments" class="comments-area st-clr comment-respond"> | |
| <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="c5">Cancel reply</a></small></h3> | |
| <form action="https://uxmovement.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"> | |
| <p class="comment-notes">Your email address will not be published. Required fields are marked *</p> | |
| <p class="comment-form-author"><label for="author">Name *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required"></p> | |
| <p class="comment-form-email"><label for="email">Email *</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required"></p> | |
| <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200"></p> | |
| <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> | |
| <p class="comment-form-comment"><label for="comment">Comment</label></p> | |
| <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"><input type="hidden" name="comment_post_ID" value="32074" id="comment_post_ID"><input type="hidden" name="comment_parent" id="comment_parent" value="0"></p> | |
| </form> | |
| </div> | |
| <div class="st-ad-region st-single-bottom st-clr"></div> | |
| </article></div> | |
| </main></div> | |
| <div class="st-footer-divider st-shuffle st-clr"></div> | |
| <footer class="st-site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"><div class="st-footer-widgets-wrap st-container st-clr st-footer-widgets st-row st-clr"> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_st_social_profiles st-clr"> | |
| <h6 class="widget-title">Follow UX Movement</h6> | |
| <div class="st-social-profiles-widget st-clr"> | |
| <ul class="st-clr"><li><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></li> | |
| <li><a href="http://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></li> | |
| </ul></div> | |
| </div> | |
| <div class="footer-widget widget_nav_menu st-clr menu-pages-container"> | |
| <ul id="menu-pages-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul></div> | |
| </div> | |
| <div class="st-footer-box st-col st-clr st-col-3 footer-widget widget_categories st-clr"> | |
| <h6 class="widget-title">Topics</h6> | |
| <ul><li class="cat-item cat-item-108"><a href="https://uxmovement.com/category/buttons/" title="Articles on designing buttons and icons">Buttons</a> (38)</li> | |
| <li class="cat-item cat-item-80"><a href="https://uxmovement.com/category/content/" title="Articles on optimizing text and images">Content</a> (43)</li> | |
| <li class="cat-item cat-item-77"><a href="https://uxmovement.com/category/forms/" title="Articles on designing intuitive form components">Forms</a> (68)</li> | |
| <li class="cat-item cat-item-92"><a href="https://uxmovement.com/category/mobile/" title="Articles on designing for mobile screens">Mobile</a> (25)</li> | |
| <li class="cat-item cat-item-106"><a href="https://uxmovement.com/category/navigation/" title="Articles on designing navigation components">Navigation</a> (37)</li> | |
| <li class="cat-item cat-item-87"><a href="https://uxmovement.com/category/products/" title="Products created by UX Movement">Products</a> (12)</li> | |
| <li class="cat-item cat-item-97"><a href="https://uxmovement.com/category/sponsors/" title="Paid articles promoting products">Sponsors</a> (48)</li> | |
| <li class="cat-item cat-item-85"><a href="https://uxmovement.com/category/thinking/" title="Articles on design theory and ideas">Thinking</a> (33)</li> | |
| <li class="cat-item cat-item-83"><a href="https://uxmovement.com/category/wireframes/" title="Articles on creating wireframes and deliverables">Wireframes</a> (13)</li> | |
| </ul></div> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_search st-clr"> | |
| <h6 class="widget-title">Looking for an article?</h6> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" value="Search…" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></p> | |
| </form> | |
| </div> | |
| <div class="footer-widget widget_st_about st-clr"> | |
| <h6 class="widget-title">About UX Movement</h6> | |
| <div class="st-about-widget st-clr st-about-widget-description">A user experience design blog dedicated to teaching you the best practices, design techniques and principles that will make your interface intuitive and easy to use.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="st-footer-bottom st-container st-clr footer-copyright st-clr">© Copyright UX Movement. All rights reserved.</div> | |
| </footer></div> | |
| <a href="#" title="Top" class="st-site-scroll-top"></a> | |
| <div class="st-search-overlay st-clr"> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" placeholder="To search type and hit enter…"></p> | |
| </form> | |
| </div> | |
| <div class="st-post-share st-clr st-container st-clr"> | |
| <ul class="st-clr"><li class="st-twitter"><a href="http://twitter.com/share?text=Strong+Layout+Hierarchy+Reduces+Content+Overload&url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Twitter" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Tweet</a></li> | |
| <li class="st-facebook"><a href="http://www.facebook.com/share.php?u=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Facebook" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Share</a></li> | |
| <li class="st-pinterest"><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&media=https%3A%2F%2Fuxmovement.com%2Fwp-content%2Fuploads%2F2020%2F11%2Flayout-beforeafter.png&description=Content+overload+is+a+common+problem+that%E2%80%99s+not+only+caused+by+a+high+quantity+of+content.+It%E2%80%99s+also+caused+by+the+way+all+that+content+is+displayed.+You+can%E2%80%99t+control+how+content+grows+over+time%2C+but+you+can+control+the+way+you+present+it.+This+is+why+layout+hierarchy+is+crucial+for+reducing+content+overload.+%5B%26hellip%3B%5D" title="Share on Pinterest" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Pin it</a></li> | |
| <li class="st-comment"><a href="#comments" title="Comment" rel="nofollow">Comment</a></li> | |
| </ul></div> | |
| </body></html> | |
| " | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| array(1) { | |
| ["pre-tidy"]=> | |
| string(35654) "<!DOCTYPE html><html lang="en-US" | |
| prefix="og: https://ogp.me/ns#" ><head><meta charset="UTF-8"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /><meta http-equiv="x-dns-prefetch-control" content="on"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="pingback" href="https://uxmovement.com/xmlrpc.php"><link rel="profile" href="http://gmpg.org/xfn/11"><title>Strong Layout Hierarchy Reduces Content Overload</title><meta name="description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't" /><meta name="keywords" content="content" /> <link rel="canonical" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /><meta property="og:type" content="article" /><meta property="og:title" content="Strong Layout Hierarchy Reduces Content Overload" /><meta property="og:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /><meta property="og:url" content="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /><meta property="og:site_name" content="UX Movement" /><meta property="og:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /><meta property="article:published_time" content="2020-11-11T17:11:26Z" /><meta property="article:modified_time" content="2020-11-11T00:27:56Z" /><meta property="og:image:secure_url" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@uxmovement" /><meta name="twitter:domain" content="uxmovement.com" /><meta name="twitter:title" content="Strong Layout Hierarchy Reduces Content Overload" /><meta name="twitter:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /><meta name="twitter:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> <link rel='dns-prefetch' href='//fonts.googleapis.com' /><link rel='dns-prefetch' href='//s.w.org' /><link rel="alternate" type="application/rss+xml" title="UX Movement » Feed" href="https://uxmovement.com/feed/" /><link rel="alternate" type="application/rss+xml" title="UX Movement » Comments Feed" href="https://uxmovement.com/comments/feed/" /><link rel="alternate" type="application/rss+xml" title="UX Movement » Strong Layout Hierarchy Reduces Content Overload Comments Feed" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/feed/" /> <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /><noscript><link data-optimized="1" rel='stylesheet' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /></noscript> <link rel='https://api.w.org/' href='https://uxmovement.com/wp-json/' /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://uxmovement.com/xmlrpc.php?rsd" /><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://uxmovement.com/wp-includes/wlwmanifest.xml" /><link rel='prev' title='Color Contrast Mistakes on Buttons' href='https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/' /><meta name="generator" content="WordPress 4.9.16" /><link rel='shortlink' href='https://uxmovement.com/?p=32074' /><link rel="alternate" type="application/json+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" /><link rel="alternate" type="text/xml+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&format=xml" /> <link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-32x32.png" sizes="32x32" /><link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-192x192.png" sizes="192x192" /><link rel="apple-touch-icon-precomposed" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-180x180.png" /><meta name="msapplication-TileImage" content="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-270x270.png" /><meta name="generator" content="Built With The Status WordPress Theme 1.3 by WPExplorer" /></head><body class="post-template-default single single-post postid-32074 single-format-standard custom-background full-width st-has-topbar-social st-entry-style-grid st-responsive" itemscope="itemscope" itemtype="http://schema.org/WebPage"><div class="st-site-wrap"><div class="st-topbar-wrap st-clr"><div class="st-topbar st-container st-clr"><div class="st-topbar-left st-clr"><nav class="st-topbar-nav st-clr" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul id="menu-pages" class="st-dropdown-menu"><li id="menu-item-8857" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li><li id="menu-item-8858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li><li id="menu-item-8860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li><li id="menu-item-8865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li></ul></nav></div><div class="st-topbar-right st-clr"><div class="st-topbar-social st-clr"><div class="st-topbar-social-item"><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></div><div class="st-topbar-social-item"><a href="https://uxmovement.substack.com" title="Email" class="st-social-bg st-email" target="_blank"></a></div><div class="st-topbar-social-item"><a href="https://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></div></div></div></div></div><div class="st-site-header-wrap st-clr" itemscope role="banner" itemtype="http://schema.org/WPHeader"><header class="st-site-header st-container st-clr"><div class="st-site-branding st-clr"><div class="st-site-logo st-clr"> <a href="https://uxmovement.com/" title="UX Movement" rel="home"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /><noscript><img src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /></noscript></a></div></div></header><div class="st-site-nav-wrap st-clr"><nav class="st-site-nav st-container st-clr" ><div class="st-site-nav-container"><ul id="menu-categories" class="st-dropdown-menu"><li id="menu-item-10767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10767"><a title="Forms" href="https://uxmovement.com/category/forms/" class="st-is-cat st-term-77">Forms</a></li><li id="menu-item-10768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10768"><a title="Navigation" href="https://uxmovement.com/category/navigation/" class="st-is-cat st-term-106">Navigation</a></li><li id="menu-item-10772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10772"><a title="Buttons" href="https://uxmovement.com/category/buttons/" class="st-is-cat st-term-108">Buttons</a></li><li id="menu-item-10766" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-10766"><a title="Content" href="https://uxmovement.com/category/content/" class="st-is-cat st-term-80">Content</a></li><li id="menu-item-10771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10771"><a title="Mobile" href="https://uxmovement.com/category/mobile/" class="st-is-cat st-term-92">Mobile</a></li><li id="menu-item-10770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10770"><a title="Wireframes" href="https://uxmovement.com/category/wireframes/" class="st-is-cat st-term-83">Wireframes</a></li><li id="menu-item-10773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10773"><a title="Thinking" href="https://uxmovement.com/category/thinking/" class="st-is-cat st-term-85">Thinking</a></li><li id="menu-item-10774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10774"><a title="Sponsors" href="https://uxmovement.com/category/sponsors/" class="st-is-cat st-term-97">Sponsors</a></li><li id="menu-item-10769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10769"><a title="Products" href="https://uxmovement.com/category/products/" class="st-is-cat st-term-87">Products</a></li></ul></div> <a href="#" title="Search" class="st-menu-search-toggle"></a></nav></div></div><div class="st-site-content st-container st-clr"><div class="st-content-area st-clr"><main class="st-site-main st-clr"><div class="st-ad-region st-single-top st-clr"></div><div class="site-main-inner st-clr"><article class="st-post-article st-clr" ><div class="st-entry-cat st-post-cat st-clr st-button-typo"><a href="https://uxmovement.com/category/content/" title="Content" class="st-term-80 st-accent-bg">Content</a></div><header class="st-post-header st-clr"><h1 class="st-post-title">Strong Layout Hierarchy Reduces Content Overload</h1><div class="st-meta st-post-meta st-clr"><ul class="st-clr"><li class="st-date"><time class="updated" datetime="2020-11-11" itemprop="datePublished">November 11, 2020</time></li><li class="st-author"><a href="https://uxmovement.com/author/anthony/">anthony</a></li><li class="st-comments"><a href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="comments-link" >0 Comments</a></li></ul></div></header><div class="st-post-content st-entry st-clr" itemprop="text"><p>Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.</p><p>There is a direct relationship between content overload and information quality (<a href="https://www.researchgate.net/publication/276154707_THE_INFORMATION_OVERLOAD_PHENOMENON_THE_INFLUENCE_OF_BAD_-_AND_IR_RELEVANT_INFORMATION">research study</a>). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /><noscript><img class="aligncenter size-full wp-image-32075" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /></noscript></p><p>Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.</p><h2>De-emphasis</h2><p>Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /><noscript><img class="aligncenter size-full wp-image-32076" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /></noscript></p><p>Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.</p><h2>Pattern Breaking</h2><p>Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.</p><p>The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /><noscript><img class="aligncenter size-full wp-image-32078" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /></noscript></p><p>If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.</p><p>You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.</p><h2>Scaling and Badging</h2><p>Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.</p><p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /><noscript><img class="aligncenter size-full wp-image-32079" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /></noscript></p><p>A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.</p><hr /><h2>Access the Full Article</h2><p>This is only half the article. The other half shows you design techniques for hierarchy on grid layouts. Become a subscriber to access the full article.</p><p style="text-align: center;"><a class="st-theme-button" href="https://uxmovement.substack.com/subscribe?coupon=8f63b414">Access full article</a></p><div class="widget_text awac-wrapper"><div class="widget_text awac widget custom_html-5"><div class="textwidget custom-html-widget"><hr /> | |
| <iframe src="https://uxmovement.substack.com/embed" width="792" height="270" style="border:1px solid #EEE; background:white; border-radius: 12px;" frameborder="0" scrolling="no"></iframe></div></div></div><div class="awac-wrapper"><div class="awac widget media_image-6"><h4 class="widget-title">Toolkits</h4><a href="https://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjIiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyNjIgNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="262" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /><noscript><img width="262" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /></noscript></a></div></div><div class="awac-wrapper"><div class="awac widget media_image-5"><a href="https://uxmovement.com/products/flow-patterns-for-sketch-figma/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyMDggNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="208" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /><noscript><img width="208" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" /></noscript></a></div></div><div class="widget_text awac-wrapper"><div class="widget_text awac widget custom_html-6"><h4 class="widget-title">Affiliates</h4><div class="textwidget custom-html-widget"><a href="https://uxmovement.com/thinking/how-designers-save-time-by-using-wordpress-themes/" target="_blank" rel="nofollow"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyMzQgNjAiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" style="border:0px" data-src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"><noscript><img style="border:0px" src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"></noscript></a></div></div></div></div><section class="st-author-info st-clr"><h4 class="st-heading">Article written by anthony</h4><div class="st-author-info-inner st-clr"><div class="st-author-info-avatar"> | |
| <a href="https://uxmovement.com/author/anthony/" title="Visit Author Page"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTMwIiB2aWV3Qm94PSIwIDAgMTMwIDEzMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" alt='' data-src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' data-srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /><noscript><img alt='' src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /></noscript></a></div><div class="st-author-info-content st-entry st-clr"><p>Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.</p></div></div><div class="st-author-info-recent st-clr"><h5 class="st-heading">Latest from this author<a href="https://uxmovement.com/author/anthony/" title="view all" class="st-more">view all</a></h5><ul><li><a href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/" title="Color Contrast Mistakes on Buttons">Color Contrast Mistakes on Buttons</a></li><li><a href="https://uxmovement.com/sponsors/bugherd-gather-website-feedback-without-the-long-email-chain/" title="BugHerd: Gather Website Feedback Without the Long Email Chain">BugHerd: Gather Website Feedback Without the Long Email Chain</a></li><li><a href="https://uxmovement.com/navigation/a-faster-way-to-view-search-results-with-fewer-clicks/" title="A Faster Way to View Search Results with Fewer Clicks">A Faster Way to View Search Results with Fewer Clicks</a></li><li><a href="https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/" title="10 Usability Mistakes Most Designers Make on Checkboxes">10 Usability Mistakes Most Designers Make on Checkboxes</a></li><li><a href="https://uxmovement.com/forms/why-signups-logins-should-open-in-a-right-form-drawer/" title="Why Signups & Logins Should Open in a Right Form Drawer">Why Signups & Logins Should Open in a Right Form Drawer</a></li></ul></div></section><section class="st-related-posts-wrap st-clr"><h4 class="st-heading">You May Also Like</h4><div class="st-related-posts st-clr"><div class="st-related-post st-clr"><div class="st-related-post-thumbnail st-clr"> | |
| <a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjYiIGhlaWdodD0iNDQ0IiB2aWV3Qm94PSIwIDAgNjY2IDQ0NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="666" height="444" data-src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript><img width="666" height="444" src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></noscript></a></div><div class="st-related-post-content st-clr"><h3 class="st-related-post-title"> | |
| <a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"> | |
| How Scan Control Improves the Readability of Content Cards </a></h3><ul class="st-related-post-meta st-meta st-clr"><li class="st-date">September 1, 2020</li><li class="st-comments"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/#comments" class="comments-link" >1 Comment</a></li></ul><div class="st-related-post-excerpt st-clr"> | |
| Content cards are one of the most common ways for apps to organize their content. They allow users…</div></div></div><div class="st-related-post st-clr st-last"><div class="st-related-post-thumbnail st-clr"> | |
| <a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iMzA0IiB2aWV3Qm94PSIwIDAgNDgwIDMwNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="480" height="304" data-src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript><img width="480" height="304" src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></noscript></a></div><div class="st-related-post-content st-clr"><h3 class="st-related-post-title"> | |
| <a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"> | |
| Why You Should Avoid Bright, Saturated Background Colors </a></h3><ul class="st-related-post-meta st-meta st-clr"><li class="st-date">May 22, 2018</li><li class="st-comments"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/#comments" class="comments-link" >1 Comment</a></li></ul><div class="st-related-post-excerpt st-clr"> | |
| Are you choosing colors for your interface that strain the user’s eyes? If you’re using a bright and…</div></div></div></div></section><div id="comments" class="comments-area st-clr"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/content/strong-layout-hierarchy-reduces-content-overload/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://uxmovement.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes">Your email address will not be published. Required fields are marked *</p><p class="comment-form-author"><label for="author">Name *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p><p class="comment-form-email"><label for="email">Email *</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p><p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="comment-form-comment"><label for="comment">Comment</label></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='32074' id='comment_post_ID' /> | |
| <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div><div class="st-ad-region st-single-bottom st-clr"></div></article></div></main></div></div><div class="st-footer-divider st-shuffle st-clr"></div><footer class="st-site-footer" itemscope itemtype="http://schema.org/WPFooter"><div class="st-footer-widgets-wrap st-container st-clr"><div class="st-footer-widgets st-row st-clr"><div class="st-footer-box st-col st-clr st-col-3"><div class="footer-widget widget_st_social_profiles st-clr"><h6 class="widget-title">Follow UX Movement</h6><div class="st-social-profiles-widget st-clr"><ul class="st-clr"><li> | |
| <a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></li><li> | |
| <a href="http://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></li></ul></div></div><div class="footer-widget widget_nav_menu st-clr"><div class="menu-pages-container"><ul id="menu-pages-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li></ul></div></div></div><div class="st-footer-box st-col st-clr st-col-3"><div class="footer-widget widget_categories st-clr"><h6 class="widget-title">Topics</h6><ul><li class="cat-item cat-item-108"><a href="https://uxmovement.com/category/buttons/" title="Articles on designing buttons and icons">Buttons</a> (38)</li><li class="cat-item cat-item-80"><a href="https://uxmovement.com/category/content/" title="Articles on optimizing text and images">Content</a> (43)</li><li class="cat-item cat-item-77"><a href="https://uxmovement.com/category/forms/" title="Articles on designing intuitive form components">Forms</a> (68)</li><li class="cat-item cat-item-92"><a href="https://uxmovement.com/category/mobile/" title="Articles on designing for mobile screens">Mobile</a> (25)</li><li class="cat-item cat-item-106"><a href="https://uxmovement.com/category/navigation/" title="Articles on designing navigation components">Navigation</a> (37)</li><li class="cat-item cat-item-87"><a href="https://uxmovement.com/category/products/" title="Products created by UX Movement">Products</a> (12)</li><li class="cat-item cat-item-97"><a href="https://uxmovement.com/category/sponsors/" title="Paid articles promoting products">Sponsors</a> (48)</li><li class="cat-item cat-item-85"><a href="https://uxmovement.com/category/thinking/" title="Articles on design theory and ideas">Thinking</a> (33)</li><li class="cat-item cat-item-83"><a href="https://uxmovement.com/category/wireframes/" title="Articles on creating wireframes and deliverables">Wireframes</a> (13)</li></ul></div></div><div class="st-footer-box st-col st-clr st-col-3"><div class="footer-widget widget_search st-clr"><h6 class="widget-title">Looking for an article?</h6><form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <input type="search" class="field" name="s" value="Search…" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> | |
| <button type="submit"></button></form></div><div class="footer-widget widget_st_about st-clr"><h6 class="widget-title">About UX Movement</h6><div class="st-about-widget st-clr"><div class="st-about-widget-description"> | |
| A user experience design blog dedicated to teaching you the best practices, design techniques and principles that will make your interface intuitive and easy to use.</div></div></div></div></div></div><div class="st-footer-bottom"><div class="st-container st-clr"><div class="footer-copyright st-clr" role="contentinfo">© Copyright UX Movement. All rights reserved.</div></div></div></footer></div><a href="#" title="Top" class="st-site-scroll-top"></a><div class="st-search-overlay st-clr"><form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <input type="search" class="field" name="s" placeholder="To search type and hit enter…" /> | |
| <button type="submit"></button></form></div><div class="st-post-share st-clr"><div class="st-container st-clr"><ul class="st-clr"><li class="st-twitter"> | |
| <a href="http://twitter.com/share?text=Strong+Layout+Hierarchy+Reduces+Content+Overload&url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Twitter" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> | |
| Tweet </a></li><li class="st-facebook"> | |
| <a href="http://www.facebook.com/share.php?u=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Facebook" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> | |
| Share </a></li><li class="st-pinterest"> | |
| <a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&media=https%3A%2F%2Fuxmovement.com%2Fwp-content%2Fuploads%2F2020%2F11%2Flayout-beforeafter.png&description=Content+overload+is+a+common+problem+that%E2%80%99s+not+only+caused+by+a+high+quantity+of+content.+It%E2%80%99s+also+caused+by+the+way+all+that+content+is+displayed.+You+can%E2%80%99t+control+how+content+grows+over+time%2C+but+you+can+control+the+way+you+present+it.+This+is+why+layout+hierarchy+is+crucial+for+reducing+content+overload.+%5B%26hellip%3B%5D" title="Share on Pinterest" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> | |
| Pin it </a></li><li class="st-comment"> | |
| <a href="#comments" title="Comment" rel="nofollow"> | |
| Comment </a></li></ul></div></div> </body></html> | |
| <!-- Page optimized by LiteSpeed Cache @2020-11-12 15:58:15 --> | |
| <!-- Page generated by LiteSpeed Cache 3.5.2 on 2020-11-12 09:58:15 -->" | |
| } | |
| array(1) { | |
| ["post-tidy"]=> | |
| string(35369) "<html lang="en-US" prefix="og: https://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" /> | |
| <meta http-equiv="x-dns-prefetch-control" content="on" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="pingback" href="https://uxmovement.com/xmlrpc.php" /> | |
| <link rel="profile" href="http://gmpg.org/xfn/11" /> | |
| <title>Strong Layout Hierarchy Reduces Content Overload</title> | |
| <meta name="description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't" /> | |
| <meta name="keywords" content="content" /> | |
| <link rel="canonical" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /> | |
| <meta property="og:type" content="article" /> | |
| <meta property="og:title" content="Strong Layout Hierarchy Reduces Content Overload" /> | |
| <meta property="og:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /> | |
| <meta property="og:url" content="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/" /> | |
| <meta property="og:site_name" content="UX Movement" /> | |
| <meta property="og:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> | |
| <meta property="article:published_time" content="2020-11-11T17:11:26Z" /> | |
| <meta property="article:modified_time" content="2020-11-11T00:27:56Z" /> | |
| <meta property="og:image:secure_url" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> | |
| <meta name="twitter:card" content="summary_large_image" /> | |
| <meta name="twitter:site" content="@uxmovement" /> | |
| <meta name="twitter:domain" content="uxmovement.com" /> | |
| <meta name="twitter:title" content="Strong Layout Hierarchy Reduces Content Overload" /> | |
| <meta name="twitter:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows" /> | |
| <meta name="twitter:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" /> | |
| <link rel='dns-prefetch' href='//fonts.googleapis.com' /> | |
| <link rel='dns-prefetch' href='//s.w.org' /> | |
| <link rel="alternate" type="application/rss+xml" title="UX Movement » Feed" href="https://uxmovement.com/feed/" /> | |
| <link rel="alternate" type="application/rss+xml" title="UX Movement » Comments Feed" href="https://uxmovement.com/comments/feed/" /> | |
| <link rel="alternate" type="application/rss+xml" title="UX Movement » Strong Layout Hierarchy Reduces Content Overload Comments Feed" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/feed/" /> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='cpsh-shortcodes-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='isell-style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='font-awesome-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='magnific-popup-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68' type='text/css' media='all' /></noscript> | |
| <link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel='preload' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /><noscript> | |
| <link data-optimized="1" rel='stylesheet' id='style-css' href='https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7' type='text/css' media='all' /></noscript> | |
| <link rel='https://api.w.org/' href='https://uxmovement.com/wp-json/' /> | |
| <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://uxmovement.com/xmlrpc.php?rsd" /> | |
| <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://uxmovement.com/wp-includes/wlwmanifest.xml" /> | |
| <link rel='prev' title='Color Contrast Mistakes on Buttons' href='https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/' /> | |
| <meta name="generator" content="WordPress 4.9.16" /> | |
| <link rel='shortlink' href='https://uxmovement.com/?p=32074' /> | |
| <link rel="alternate" type="application/json+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" /> | |
| <link rel="alternate" type="text/xml+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&format=xml" /> | |
| <link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-32x32.png" sizes="32x32" /> | |
| <link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-192x192.png" sizes="192x192" /> | |
| <link rel="apple-touch-icon-precomposed" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-180x180.png" /> | |
| <meta name="msapplication-TileImage" content="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-270x270.png" /> | |
| <meta name="generator" content="Built With The Status WordPress Theme 1.3 by WPExplorer" /> | |
| <style type="text/css"> | |
| /*<![CDATA[*/ | |
| a.c5 {display:none;} | |
| img.c4 {border:0px} | |
| img.c3 {max-width: 100%; height: auto;} | |
| iframe.c2 {border:1px solid #EEE; background:white; border-radius: 12px;} | |
| p.c1 {text-align: center;} | |
| /*]]>*/ | |
| </style> | |
| </head> | |
| <body class="post-template-default single single-post postid-32074 single-format-standard custom-background full-width st-has-topbar-social st-entry-style-grid st-responsive" itemscope="itemscope" itemtype="http://schema.org/WebPage"> | |
| <div class="st-site-wrap"> | |
| <div class="st-topbar-wrap st-clr st-topbar st-container st-clr"> | |
| <div class="st-topbar-left st-clr"> | |
| <nav class="st-topbar-nav st-clr" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"> | |
| <ul id="menu-pages" class="st-dropdown-menu"> | |
| <li id="menu-item-8857" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li id="menu-item-8858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li id="menu-item-8860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li id="menu-item-8865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="st-topbar-right st-clr st-topbar-social st-clr"> | |
| <div class="st-topbar-social-item"><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.substack.com" title="Email" class="st-social-bg st-email" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></div> | |
| </div> | |
| </div> | |
| <div class="st-site-header-wrap st-clr" itemscope="itemscope" role="banner" itemtype="http://schema.org/WPHeader"> | |
| <header class="st-site-header st-container st-clr"> | |
| <div class="st-site-branding st-clr st-site-logo st-clr"><a href="https://uxmovement.com/" title="UX Movement" rel="home"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /><noscript> | |
| <p><img src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement" /></p> | |
| </noscript></a></div> | |
| </header> | |
| <div class="st-site-nav-wrap st-clr"> | |
| <nav class="st-site-nav st-container st-clr"> | |
| <div class="st-site-nav-container"> | |
| <ul id="menu-categories" class="st-dropdown-menu"> | |
| <li id="menu-item-10767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10767"><a title="Forms" href="https://uxmovement.com/category/forms/" class="st-is-cat st-term-77">Forms</a></li> | |
| <li id="menu-item-10768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10768"><a title="Navigation" href="https://uxmovement.com/category/navigation/" class="st-is-cat st-term-106">Navigation</a></li> | |
| <li id="menu-item-10772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10772"><a title="Buttons" href="https://uxmovement.com/category/buttons/" class="st-is-cat st-term-108">Buttons</a></li> | |
| <li id="menu-item-10766" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-10766"><a title="Content" href="https://uxmovement.com/category/content/" class="st-is-cat st-term-80">Content</a></li> | |
| <li id="menu-item-10771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10771"><a title="Mobile" href="https://uxmovement.com/category/mobile/" class="st-is-cat st-term-92">Mobile</a></li> | |
| <li id="menu-item-10770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10770"><a title="Wireframes" href="https://uxmovement.com/category/wireframes/" class="st-is-cat st-term-83">Wireframes</a></li> | |
| <li id="menu-item-10773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10773"><a title="Thinking" href="https://uxmovement.com/category/thinking/" class="st-is-cat st-term-85">Thinking</a></li> | |
| <li id="menu-item-10774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10774"><a title="Sponsors" href="https://uxmovement.com/category/sponsors/" class="st-is-cat st-term-97">Sponsors</a></li> | |
| <li id="menu-item-10769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10769"><a title="Products" href="https://uxmovement.com/category/products/" class="st-is-cat st-term-87">Products</a></li> | |
| </ul> | |
| </div> | |
| <a href="#" title="Search" class="st-menu-search-toggle"></a></nav> | |
| </div> | |
| </div> | |
| <div class="st-site-content st-container st-clr st-content-area st-clr"> | |
| <main class="st-site-main st-clr"> | |
| <div class="st-ad-region st-single-top st-clr"></div> | |
| <div class="site-main-inner st-clr"> | |
| <article class="st-post-article st-clr"> | |
| <div class="st-entry-cat st-post-cat st-clr st-button-typo"><a href="https://uxmovement.com/category/content/" title="Content" class="st-term-80 st-accent-bg">Content</a></div> | |
| <header class="st-post-header st-clr"> | |
| <h1 class="st-post-title">Strong Layout Hierarchy Reduces Content Overload</h1> | |
| <div class="st-meta st-post-meta st-clr"> | |
| <ul class="st-clr"> | |
| <li class="st-date"><time class="updated" datetime="2020-11-11" itemprop="datePublished">November 11, 2020</time></li> | |
| <li class="st-author"><a href="https://uxmovement.com/author/anthony/">anthony</a></li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="comments-link">0 Comments</a></li> | |
| </ul> | |
| </div> | |
| </header> | |
| <div class="st-post-content st-entry st-clr" itemprop="text"> | |
| <p>Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.</p> | |
| <p>There is a direct relationship between content overload and information quality (<a href="https://www.researchgate.net/publication/276154707_THE_INFORMATION_OVERLOAD_PHENOMENON_THE_INFLUENCE_OF_BAD_-_AND_IR_RELEVANT_INFORMATION">research study</a>). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32075" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408" /></p> | |
| </noscript></p> | |
| <p>Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.</p> | |
| <h2>De-emphasis</h2> | |
| <p>Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32076" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408" /></p> | |
| </noscript></p> | |
| <p>Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.</p> | |
| <h2>Pattern Breaking</h2> | |
| <p>Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.</p> | |
| <p>The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32078" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408" /></p> | |
| </noscript></p> | |
| <p>If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.</p> | |
| <p>You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.</p> | |
| <h2>Scaling and Badging</h2> | |
| <p>Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /><noscript> | |
| <p><img class="aligncenter size-full wp-image-32079" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408" /></p> | |
| </noscript></p> | |
| <p>A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.</p> | |
| <hr /> | |
| <h2>Access the Full Article</h2> | |
| <p>This is only half the article. The other half shows you design techniques for hierarchy on grid layouts. Become a subscriber to access the full article.</p> | |
| <p class="c1"><a class="st-theme-button" href="https://uxmovement.substack.com/subscribe?coupon=8f63b414">Access full article</a></p> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-5 textwidget custom-html-widget"> | |
| <hr /> | |
| <iframe src="https://uxmovement.substack.com/embed" width="792" height="270" class="c2" frameborder="0" scrolling="no"></iframe></div> | |
| <div class="awac-wrapper awac widget media_image-6"> | |
| <h4 class="widget-title">Toolkits</h4> | |
| <a href="https://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjIiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyNjIgNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="262" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt="" /><noscript> | |
| <p><img width="262" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="awac-wrapper awac widget media_image-5"><a href="https://uxmovement.com/products/flow-patterns-for-sketch-figma/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyMDggNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="208" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt="" /><noscript> | |
| <p><img width="208" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-6"> | |
| <h4 class="widget-title">Affiliates</h4> | |
| <div class="textwidget custom-html-widget"><a href="https://uxmovement.com/thinking/how-designers-save-time-by-using-wordpress-themes/" target="_blank" rel="nofollow"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyMzQgNjAiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" class="c4" data-src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes" /><noscript> | |
| <p><img class="c4" src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes" /></p> | |
| </noscript></a></div> | |
| </div> | |
| </div> | |
| <section class="st-author-info st-clr"> | |
| <h4 class="st-heading">Article written by anthony</h4> | |
| <div class="st-author-info-inner st-clr"> | |
| <div class="st-author-info-avatar"><a href="https://uxmovement.com/author/anthony/" title="Visit Author Page"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTMwIiB2aWV3Qm94PSIwIDAgMTMwIDEzMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" alt='' data-src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' data-srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /><noscript> | |
| <p><img alt='' src='https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg' srcset='https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x' class='avatar avatar-130 photo' height='130' width='130' /></p> | |
| </noscript></a></div> | |
| <div class="st-author-info-content st-entry st-clr"> | |
| <p>Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.</p> | |
| </div> | |
| </div> | |
| <div class="st-author-info-recent st-clr"> | |
| <h5 class="st-heading">Latest from this author<a href="https://uxmovement.com/author/anthony/" title="view all" class="st-more">view all</a></h5> | |
| <ul> | |
| <li><a href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/" title="Color Contrast Mistakes on Buttons">Color Contrast Mistakes on Buttons</a></li> | |
| <li><a href="https://uxmovement.com/sponsors/bugherd-gather-website-feedback-without-the-long-email-chain/" title="BugHerd: Gather Website Feedback Without the Long Email Chain">BugHerd: Gather Website Feedback Without the Long Email Chain</a></li> | |
| <li><a href="https://uxmovement.com/navigation/a-faster-way-to-view-search-results-with-fewer-clicks/" title="A Faster Way to View Search Results with Fewer Clicks">A Faster Way to View Search Results with Fewer Clicks</a></li> | |
| <li><a href="https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/" title="10 Usability Mistakes Most Designers Make on Checkboxes">10 Usability Mistakes Most Designers Make on Checkboxes</a></li> | |
| <li><a href="https://uxmovement.com/forms/why-signups-logins-should-open-in-a-right-form-drawer/" title="Why Signups & Logins Should Open in a Right Form Drawer">Why Signups & Logins Should Open in a Right Form Drawer</a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section class="st-related-posts-wrap st-clr"> | |
| <h4 class="st-heading">You May Also Like</h4> | |
| <div class="st-related-posts st-clr"> | |
| <div class="st-related-post st-clr"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjYiIGhlaWdodD0iNDQ0IiB2aWV3Qm94PSIwIDAgNjY2IDQ0NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="666" height="444" data-src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript> | |
| <p><img width="666" height="444" src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards">How Scan Control Improves the Readability of Content Cards</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"> | |
| <li class="st-date">September 1, 2020</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/#comments" class="comments-link">1 Comment</a></li> | |
| </ul> | |
| <div class="st-related-post-excerpt st-clr">Content cards are one of the most common ways for apps to organize their content. They allow users…</div> | |
| </div> | |
| </div> | |
| <div class="st-related-post st-clr st-last"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iMzA0IiB2aWV3Qm94PSIwIDAgNDgwIDMwNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="480" height="304" data-src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /><noscript> | |
| <p><img width="480" height="304" src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt="" /></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors">Why You Should Avoid Bright, Saturated Background Colors</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"> | |
| <li class="st-date">May 22, 2018</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/#comments" class="comments-link">1 Comment</a></li> | |
| </ul> | |
| <div class="st-related-post-excerpt st-clr">Are you choosing colors for your interface that strain the user’s eyes? If you’re using a bright and…</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div id="comments" class="comments-area st-clr comment-respond"> | |
| <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="c5">Cancel reply</a></small></h3> | |
| <form action="https://uxmovement.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"> | |
| <p class="comment-notes">Your email address will not be published. Required fields are marked *</p> | |
| <p class="comment-form-author"><label for="author">Name *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> | |
| <p class="comment-form-email"><label for="email">Email *</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> | |
| <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> | |
| <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> | |
| <p class="comment-form-comment"><label for="comment">Comment</label></p> | |
| <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='32074' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p> | |
| </form> | |
| </div> | |
| <div class="st-ad-region st-single-bottom st-clr"></div> | |
| </article> | |
| </div> | |
| </main> | |
| </div> | |
| <div class="st-footer-divider st-shuffle st-clr"></div> | |
| <footer class="st-site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"> | |
| <div class="st-footer-widgets-wrap st-container st-clr st-footer-widgets st-row st-clr"> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_st_social_profiles st-clr"> | |
| <h6 class="widget-title">Follow UX Movement</h6> | |
| <div class="st-social-profiles-widget st-clr"> | |
| <ul class="st-clr"> | |
| <li><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></li> | |
| <li><a href="http://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-widget widget_nav_menu st-clr menu-pages-container"> | |
| <ul id="menu-pages-1" class="menu"> | |
| <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="st-footer-box st-col st-clr st-col-3 footer-widget widget_categories st-clr"> | |
| <h6 class="widget-title">Topics</h6> | |
| <ul> | |
| <li class="cat-item cat-item-108"><a href="https://uxmovement.com/category/buttons/" title="Articles on designing buttons and icons">Buttons</a> (38)</li> | |
| <li class="cat-item cat-item-80"><a href="https://uxmovement.com/category/content/" title="Articles on optimizing text and images">Content</a> (43)</li> | |
| <li class="cat-item cat-item-77"><a href="https://uxmovement.com/category/forms/" title="Articles on designing intuitive form components">Forms</a> (68)</li> | |
| <li class="cat-item cat-item-92"><a href="https://uxmovement.com/category/mobile/" title="Articles on designing for mobile screens">Mobile</a> (25)</li> | |
| <li class="cat-item cat-item-106"><a href="https://uxmovement.com/category/navigation/" title="Articles on designing navigation components">Navigation</a> (37)</li> | |
| <li class="cat-item cat-item-87"><a href="https://uxmovement.com/category/products/" title="Products created by UX Movement">Products</a> (12)</li> | |
| <li class="cat-item cat-item-97"><a href="https://uxmovement.com/category/sponsors/" title="Paid articles promoting products">Sponsors</a> (48)</li> | |
| <li class="cat-item cat-item-85"><a href="https://uxmovement.com/category/thinking/" title="Articles on design theory and ideas">Thinking</a> (33)</li> | |
| <li class="cat-item cat-item-83"><a href="https://uxmovement.com/category/wireframes/" title="Articles on creating wireframes and deliverables">Wireframes</a> (13)</li> | |
| </ul> | |
| </div> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_search st-clr"> | |
| <h6 class="widget-title">Looking for an article?</h6> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" value="Search…" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p> | |
| </form> | |
| </div> | |
| <div class="footer-widget widget_st_about st-clr"> | |
| <h6 class="widget-title">About UX Movement</h6> | |
| <div class="st-about-widget st-clr st-about-widget-description">A user experience design blog dedicated to teaching you the best practices, design techniques and principles that will make your interface intuitive and easy to use.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="st-footer-bottom st-container st-clr footer-copyright st-clr">© Copyright UX Movement. All rights reserved.</div> | |
| </footer> | |
| </div> | |
| <a href="#" title="Top" class="st-site-scroll-top"></a> | |
| <div class="st-search-overlay st-clr"> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" placeholder="To search type and hit enter…" /></p> | |
| </form> | |
| </div> | |
| <div class="st-post-share st-clr st-container st-clr"> | |
| <ul class="st-clr"> | |
| <li class="st-twitter"><a href="http://twitter.com/share?text=Strong+Layout+Hierarchy+Reduces+Content+Overload&url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Twitter" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Tweet</a></li> | |
| <li class="st-facebook"><a href="http://www.facebook.com/share.php?u=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Facebook" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Share</a></li> | |
| <li class="st-pinterest"><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&media=https%3A%2F%2Fuxmovement.com%2Fwp-content%2Fuploads%2F2020%2F11%2Flayout-beforeafter.png&description=Content+overload+is+a+common+problem+that%E2%80%99s+not+only+caused+by+a+high+quantity+of+content.+It%E2%80%99s+also+caused+by+the+way+all+that+content+is+displayed.+You+can%E2%80%99t+control+how+content+grows+over+time%2C+but+you+can+control+the+way+you+present+it.+This+is+why+layout+hierarchy+is+crucial+for+reducing+content+overload.+%5B%26hellip%3B%5D" title="Share on Pinterest" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Pin it</a></li> | |
| <li class="st-comment"><a href="#comments" title="Comment" rel="nofollow">Comment</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html>" | |
| } | |
| array(1) { | |
| ["post-load"]=> | |
| string(35319) "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> | |
| <html lang="en-US" prefix="og: https://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""><meta http-equiv="x-dns-prefetch-control" content="on"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="pingback" href="https://uxmovement.com/xmlrpc.php"><link rel="profile" href="http://gmpg.org/xfn/11"><title>Strong Layout Hierarchy Reduces Content Overload</title><meta name="description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't"><meta name="keywords" content="content"><link rel="canonical" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/"><meta property="og:type" content="article"><meta property="og:title" content="Strong Layout Hierarchy Reduces Content Overload"><meta property="og:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows"><meta property="og:url" content="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/"><meta property="og:site_name" content="UX Movement"><meta property="og:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png"><meta property="article:published_time" content="2020-11-11T17:11:26Z"><meta property="article:modified_time" content="2020-11-11T00:27:56Z"><meta property="og:image:secure_url" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@uxmovement"><meta name="twitter:domain" content="uxmovement.com"><meta name="twitter:title" content="Strong Layout Hierarchy Reduces Content Overload"><meta name="twitter:description" content="Content overload is a common problem that's not only caused by a high quantity of content. It's also caused by the way all that content is displayed. You can't control how content grows"><meta name="twitter:image" content="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png"><link rel="dns-prefetch" href="//fonts.googleapis.com"><link rel="dns-prefetch" href="//s.w.org"><link rel="alternate" type="application/rss+xml" title="UX Movement » Feed" href="https://uxmovement.com/feed/"><link rel="alternate" type="application/rss+xml" title="UX Movement » Comments Feed" href="https://uxmovement.com/comments/feed/"><link rel="alternate" type="application/rss+xml" title="UX Movement » Strong Layout Hierarchy Reduces Content Overload Comments Feed" href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/feed/"><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="cpsh-shortcodes-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="cpsh-shortcodes-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/d5d6a.css?ac39a" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="isell-style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="isell-style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/086b0.css?78d37" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="font-awesome-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="font-awesome-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/9bc45.css?22742" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="magnific-popup-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="magnific-popup-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/b9f5b.css?bcf68" type="text/css" media="all"></noscript><link data-optimized="1" data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" id="style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7" type="text/css" media="all"><noscript> | |
| <link data-optimized="1" rel="stylesheet" id="style-css" href="https://uxmovement.com/wp-content/litespeed/cssjs/558f7.css?c8ab7" type="text/css" media="all"></noscript><link rel="https://api.w.org/" href="https://uxmovement.com/wp-json/"><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://uxmovement.com/xmlrpc.php?rsd"><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://uxmovement.com/wp-includes/wlwmanifest.xml"><link rel="prev" title="Color Contrast Mistakes on Buttons" href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/"><meta name="generator" content="WordPress 4.9.16"><link rel="shortlink" href="https://uxmovement.com/?p=32074"><link rel="alternate" type="application/json+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F"><link rel="alternate" type="text/xml+oembed" href="https://uxmovement.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&format=xml"><link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-32x32.png" sizes="32x32"><link rel="icon" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-192x192.png" sizes="192x192"><link rel="apple-touch-icon-precomposed" href="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-180x180.png"><meta name="msapplication-TileImage" content="https://uxmovement.com/wp-content/uploads/2019/02/cropped-uxmovement-site-icon-270x270.png"><meta name="generator" content="Built With The Status WordPress Theme 1.3 by WPExplorer"><style type="text/css"> | |
| /*<![CDATA[*/ | |
| a.c5 {display:none;} | |
| img.c4 {border:0px} | |
| img.c3 {max-width: 100%; height: auto;} | |
| iframe.c2 {border:1px solid #EEE; background:white; border-radius: 12px;} | |
| p.c1 {text-align: center;} | |
| /*]]>*/ | |
| </style></head><body class="post-template-default single single-post postid-32074 single-format-standard custom-background full-width st-has-topbar-social st-entry-style-grid st-responsive" itemscope="itemscope" itemtype="http://schema.org/WebPage"> | |
| <div class="st-site-wrap"> | |
| <div class="st-topbar-wrap st-clr st-topbar st-container st-clr"> | |
| <div class="st-topbar-left st-clr"> | |
| <nav class="st-topbar-nav st-clr" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><ul id="menu-pages" class="st-dropdown-menu"><li id="menu-item-8857" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li id="menu-item-8858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li id="menu-item-8860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li id="menu-item-8865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul></nav></div> | |
| <div class="st-topbar-right st-clr st-topbar-social st-clr"> | |
| <div class="st-topbar-social-item"><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.substack.com" title="Email" class="st-social-bg st-email" target="_blank"></a></div> | |
| <div class="st-topbar-social-item"><a href="https://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></div> | |
| </div> | |
| </div> | |
| <div class="st-site-header-wrap st-clr" itemscope="itemscope" role="banner" itemtype="http://schema.org/WPHeader"> | |
| <header class="st-site-header st-container st-clr"><div class="st-site-branding st-clr st-site-logo st-clr"><a href="https://uxmovement.com/" title="UX Movement" rel="home"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement"><noscript> | |
| <p><img src="https://uxmovement.com/wp-content/uploads/2019/02/logo-uxmovement.png" alt="UX Movement"></p> | |
| </noscript></a></div> | |
| </header><div class="st-site-nav-wrap st-clr"> | |
| <nav class="st-site-nav st-container st-clr"><div class="st-site-nav-container"> | |
| <ul id="menu-categories" class="st-dropdown-menu"><li id="menu-item-10767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10767"><a title="Forms" href="https://uxmovement.com/category/forms/" class="st-is-cat st-term-77">Forms</a></li> | |
| <li id="menu-item-10768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10768"><a title="Navigation" href="https://uxmovement.com/category/navigation/" class="st-is-cat st-term-106">Navigation</a></li> | |
| <li id="menu-item-10772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10772"><a title="Buttons" href="https://uxmovement.com/category/buttons/" class="st-is-cat st-term-108">Buttons</a></li> | |
| <li id="menu-item-10766" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-10766"><a title="Content" href="https://uxmovement.com/category/content/" class="st-is-cat st-term-80">Content</a></li> | |
| <li id="menu-item-10771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10771"><a title="Mobile" href="https://uxmovement.com/category/mobile/" class="st-is-cat st-term-92">Mobile</a></li> | |
| <li id="menu-item-10770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10770"><a title="Wireframes" href="https://uxmovement.com/category/wireframes/" class="st-is-cat st-term-83">Wireframes</a></li> | |
| <li id="menu-item-10773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10773"><a title="Thinking" href="https://uxmovement.com/category/thinking/" class="st-is-cat st-term-85">Thinking</a></li> | |
| <li id="menu-item-10774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10774"><a title="Sponsors" href="https://uxmovement.com/category/sponsors/" class="st-is-cat st-term-97">Sponsors</a></li> | |
| <li id="menu-item-10769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10769"><a title="Products" href="https://uxmovement.com/category/products/" class="st-is-cat st-term-87">Products</a></li> | |
| </ul></div> | |
| <a href="#" title="Search" class="st-menu-search-toggle"></a></nav></div> | |
| </div> | |
| <div class="st-site-content st-container st-clr st-content-area st-clr"> | |
| <main class="st-site-main st-clr"><div class="st-ad-region st-single-top st-clr"></div> | |
| <div class="site-main-inner st-clr"> | |
| <article class="st-post-article st-clr"><div class="st-entry-cat st-post-cat st-clr st-button-typo"><a href="https://uxmovement.com/category/content/" title="Content" class="st-term-80 st-accent-bg">Content</a></div> | |
| <header class="st-post-header st-clr"><h1 class="st-post-title">Strong Layout Hierarchy Reduces Content Overload</h1> | |
| <div class="st-meta st-post-meta st-clr"> | |
| <ul class="st-clr"><li class="st-date"><time class="updated" datetime="2020-11-11" itemprop="datePublished">November 11, 2020</time></li> | |
| <li class="st-author"><a href="https://uxmovement.com/author/anthony/">anthony</a></li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="comments-link">0 Comments</a></li> | |
| </ul></div> | |
| </header><div class="st-post-content st-entry st-clr" itemprop="text"> | |
| <p>Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.</p> | |
| <p>There is a direct relationship between content overload and information quality (<a href="https://www.researchgate.net/publication/276154707_THE_INFORMATION_OVERLOAD_PHENOMENON_THE_INFLUENCE_OF_BAD_-_AND_IR_RELEVANT_INFORMATION">research study</a>). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNTcyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32075" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32075" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-beforeafter.png" alt="" width="572" height="408"></p> | |
| </noscript> | |
| <p>Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.</p> | |
| <h2>De-emphasis</h2> | |
| <p>Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTYiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE2IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32076" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32076" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-deemphasis.png" alt="" width="616" height="408"></p> | |
| </noscript> | |
| <p>Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.</p> | |
| <h2>Pattern Breaking</h2> | |
| <p>Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.</p> | |
| <p>The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTciIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjE3IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32078" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32078" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-patternbreaking.png" alt="" width="617" height="408"></p> | |
| </noscript> | |
| <p>If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.</p> | |
| <p>You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.</p> | |
| <h2>Scaling and Badging</h2> | |
| <p>Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.</p> | |
| <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MzkiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjM5IDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" class="aligncenter size-full wp-image-32079" data-src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408"></p><noscript> | |
| <p><img class="aligncenter size-full wp-image-32079" src="https://uxmovement.com/wp-content/uploads/2020/11/layout-scalebadge.png" alt="" width="639" height="408"></p> | |
| </noscript> | |
| <p>A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.</p> | |
| <hr><h2>Access the Full Article</h2> | |
| <p>This is only half the article. The other half shows you design techniques for hierarchy on grid layouts. Become a subscriber to access the full article.</p> | |
| <p class="c1"><a class="st-theme-button" href="https://uxmovement.substack.com/subscribe?coupon=8f63b414">Access full article</a></p> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-5 textwidget custom-html-widget"> | |
| <hr><iframe src="https://uxmovement.substack.com/embed" width="792" height="270" class="c2" frameborder="0" scrolling="no"></iframe></div> | |
| <div class="awac-wrapper awac widget media_image-6"> | |
| <h4 class="widget-title">Toolkits</h4> | |
| <a href="https://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjIiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyNjIgNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="262" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt=""><noscript> | |
| <p><img width="262" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/wireframe-tout.png" class="image wp-image-31629 attachment-full size-full c3" alt=""></p> | |
| </noscript></a></div> | |
| <div class="awac-wrapper awac widget media_image-5"><a href="https://uxmovement.com/products/flow-patterns-for-sketch-figma/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyMDggNjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" width="208" height="64" data-src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt=""><noscript> | |
| <p><img width="208" height="64" src="https://uxmovement.com/wp-content/uploads/2020/02/flow-tout.png" class="image wp-image-31626 attachment-full size-full c3" alt=""></p> | |
| </noscript></a></div> | |
| <div class="widget_text awac-wrapper widget_text awac widget custom_html-6"> | |
| <h4 class="widget-title">Affiliates</h4> | |
| <div class="textwidget custom-html-widget"><a href="https://uxmovement.com/thinking/how-designers-save-time-by-using-wordpress-themes/" target="_blank" rel="nofollow"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMzQiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyMzQgNjAiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" class="c4" data-src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"><noscript> | |
| <p><img class="c4" src="https://www.elegantthemes.com/affiliates/media/banners/234x60.gif" width="234" height="60" alt="elegant wordpress themes"></p> | |
| </noscript></a></div> | |
| </div> | |
| </div> | |
| <section class="st-author-info st-clr"><h4 class="st-heading">Article written by anthony</h4> | |
| <div class="st-author-info-inner st-clr"> | |
| <div class="st-author-info-avatar"><a href="https://uxmovement.com/author/anthony/" title="Visit Author Page"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTMwIiB2aWV3Qm94PSIwIDAgMTMwIDEzMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" alt="" data-src="https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg" data-srcset="https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x" class="avatar avatar-130 photo" height="130" width="130"><noscript> | |
| <p><img alt="" src="https://uxmovement.com/wp-content/litespeed/avatar/55a0950534162d0d85fb1d7f6870bc68.jpg" srcset="https://uxmovement.com/wp-content/litespeed/avatar/a05f9aa09833cb1b89908c7916c0bf07.jpg 2x" class="avatar avatar-130 photo" height="130" width="130"></p> | |
| </noscript></a></div> | |
| <div class="st-author-info-content st-entry st-clr"> | |
| <p>Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.</p> | |
| </div> | |
| </div> | |
| <div class="st-author-info-recent st-clr"> | |
| <h5 class="st-heading">Latest from this author<a href="https://uxmovement.com/author/anthony/" title="view all" class="st-more">view all</a></h5> | |
| <ul><li><a href="https://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/" title="Color Contrast Mistakes on Buttons">Color Contrast Mistakes on Buttons</a></li> | |
| <li><a href="https://uxmovement.com/sponsors/bugherd-gather-website-feedback-without-the-long-email-chain/" title="BugHerd: Gather Website Feedback Without the Long Email Chain">BugHerd: Gather Website Feedback Without the Long Email Chain</a></li> | |
| <li><a href="https://uxmovement.com/navigation/a-faster-way-to-view-search-results-with-fewer-clicks/" title="A Faster Way to View Search Results with Fewer Clicks">A Faster Way to View Search Results with Fewer Clicks</a></li> | |
| <li><a href="https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/" title="10 Usability Mistakes Most Designers Make on Checkboxes">10 Usability Mistakes Most Designers Make on Checkboxes</a></li> | |
| <li><a href="https://uxmovement.com/forms/why-signups-logins-should-open-in-a-right-form-drawer/" title="Why Signups & Logins Should Open in a Right Form Drawer">Why Signups & Logins Should Open in a Right Form Drawer</a></li> | |
| </ul></div> | |
| </section><section class="st-related-posts-wrap st-clr"><h4 class="st-heading">You May Also Like</h4> | |
| <div class="st-related-posts st-clr"> | |
| <div class="st-related-post st-clr"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjYiIGhlaWdodD0iNDQ0IiB2aWV3Qm94PSIwIDAgNjY2IDQ0NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="666" height="444" data-src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""><noscript> | |
| <p><img width="666" height="444" src="https://uxmovement.com/wp-content/uploads/2020/08/scancontrol-contentcard.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/" title="How Scan Control Improves the Readability of Content Cards">How Scan Control Improves the Readability of Content Cards</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"><li class="st-date">September 1, 2020</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/how-scan-control-improves-the-readability-of-content-cards/#comments" class="comments-link">1 Comment</a></li> | |
| </ul><div class="st-related-post-excerpt st-clr">Content cards are one of the most common ways for apps to organize their content. They allow users…</div> | |
| </div> | |
| </div> | |
| <div class="st-related-post st-clr st-last"> | |
| <div class="st-related-post-thumbnail st-clr"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iMzA0IiB2aWV3Qm94PSIwIDAgNDgwIDMwNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" width="480" height="304" data-src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""><noscript> | |
| <p><img width="480" height="304" src="https://uxmovement.com/wp-content/uploads/2018/05/bright_saturated-background.png" class="attachment-st_entry_related size-st_entry_related wp-post-image" alt=""></p> | |
| </noscript></a></div> | |
| <div class="st-related-post-content st-clr"> | |
| <h3 class="st-related-post-title"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/" title="Why You Should Avoid Bright, Saturated Background Colors">Why You Should Avoid Bright, Saturated Background Colors</a></h3> | |
| <ul class="st-related-post-meta st-meta st-clr"><li class="st-date">May 22, 2018</li> | |
| <li class="st-comments"><a href="https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/#comments" class="comments-link">1 Comment</a></li> | |
| </ul><div class="st-related-post-excerpt st-clr">Are you choosing colors for your interface that strain the user’s eyes? If you’re using a bright and…</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section><div id="comments" class="comments-area st-clr comment-respond"> | |
| <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/content/strong-layout-hierarchy-reduces-content-overload/#respond" class="c5">Cancel reply</a></small></h3> | |
| <form action="https://uxmovement.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"> | |
| <p class="comment-notes">Your email address will not be published. Required fields are marked *</p> | |
| <p class="comment-form-author"><label for="author">Name *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required"></p> | |
| <p class="comment-form-email"><label for="email">Email *</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required"></p> | |
| <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200"></p> | |
| <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> | |
| <p class="comment-form-comment"><label for="comment">Comment</label></p> | |
| <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"><input type="hidden" name="comment_post_ID" value="32074" id="comment_post_ID"><input type="hidden" name="comment_parent" id="comment_parent" value="0"></p> | |
| </form> | |
| </div> | |
| <div class="st-ad-region st-single-bottom st-clr"></div> | |
| </article></div> | |
| </main></div> | |
| <div class="st-footer-divider st-shuffle st-clr"></div> | |
| <footer class="st-site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"><div class="st-footer-widgets-wrap st-container st-clr st-footer-widgets st-row st-clr"> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_st_social_profiles st-clr"> | |
| <h6 class="widget-title">Follow UX Movement</h6> | |
| <div class="st-social-profiles-widget st-clr"> | |
| <ul class="st-clr"><li><a href="http://twitter.com/uxmovement" title="Twitter" class="st-social-bg st-twitter" target="_blank"></a></li> | |
| <li><a href="http://uxmovement.com/feed" title="RSS" class="st-social-bg st-rss" target="_blank"></a></li> | |
| </ul></div> | |
| </div> | |
| <div class="footer-widget widget_nav_menu st-clr menu-pages-container"> | |
| <ul id="menu-pages-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8857"><a href="http://uxmovement.com/">Home</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8858"><a href="https://uxmovement.com/about/">About</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8860"><a href="https://uxmovement.com/sponsorship/">Sponsorship</a></li> | |
| <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8865"><a href="https://uxmovement.com/contact/">Contact</a></li> | |
| </ul></div> | |
| </div> | |
| <div class="st-footer-box st-col st-clr st-col-3 footer-widget widget_categories st-clr"> | |
| <h6 class="widget-title">Topics</h6> | |
| <ul><li class="cat-item cat-item-108"><a href="https://uxmovement.com/category/buttons/" title="Articles on designing buttons and icons">Buttons</a> (38)</li> | |
| <li class="cat-item cat-item-80"><a href="https://uxmovement.com/category/content/" title="Articles on optimizing text and images">Content</a> (43)</li> | |
| <li class="cat-item cat-item-77"><a href="https://uxmovement.com/category/forms/" title="Articles on designing intuitive form components">Forms</a> (68)</li> | |
| <li class="cat-item cat-item-92"><a href="https://uxmovement.com/category/mobile/" title="Articles on designing for mobile screens">Mobile</a> (25)</li> | |
| <li class="cat-item cat-item-106"><a href="https://uxmovement.com/category/navigation/" title="Articles on designing navigation components">Navigation</a> (37)</li> | |
| <li class="cat-item cat-item-87"><a href="https://uxmovement.com/category/products/" title="Products created by UX Movement">Products</a> (12)</li> | |
| <li class="cat-item cat-item-97"><a href="https://uxmovement.com/category/sponsors/" title="Paid articles promoting products">Sponsors</a> (48)</li> | |
| <li class="cat-item cat-item-85"><a href="https://uxmovement.com/category/thinking/" title="Articles on design theory and ideas">Thinking</a> (33)</li> | |
| <li class="cat-item cat-item-83"><a href="https://uxmovement.com/category/wireframes/" title="Articles on creating wireframes and deliverables">Wireframes</a> (13)</li> | |
| </ul></div> | |
| <div class="st-footer-box st-col st-clr st-col-3"> | |
| <div class="footer-widget widget_search st-clr"> | |
| <h6 class="widget-title">Looking for an article?</h6> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" value="Search…" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></p> | |
| </form> | |
| </div> | |
| <div class="footer-widget widget_st_about st-clr"> | |
| <h6 class="widget-title">About UX Movement</h6> | |
| <div class="st-about-widget st-clr st-about-widget-description">A user experience design blog dedicated to teaching you the best practices, design techniques and principles that will make your interface intuitive and easy to use.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="st-footer-bottom st-container st-clr footer-copyright st-clr">© Copyright UX Movement. All rights reserved.</div> | |
| </footer></div> | |
| <a href="#" title="Top" class="st-site-scroll-top"></a> | |
| <div class="st-search-overlay st-clr"> | |
| <form method="get" class="st-site-searchform" action="https://uxmovement.com/"> | |
| <p><input type="search" class="field" name="s" placeholder="To search type and hit enter…"></p> | |
| </form> | |
| </div> | |
| <div class="st-post-share st-clr st-container st-clr"> | |
| <ul class="st-clr"><li class="st-twitter"><a href="http://twitter.com/share?text=Strong+Layout+Hierarchy+Reduces+Content+Overload&url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Twitter" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Tweet</a></li> | |
| <li class="st-facebook"><a href="http://www.facebook.com/share.php?u=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F" title="Share on Facebook" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Share</a></li> | |
| <li class="st-pinterest"><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fuxmovement.com%2Fcontent%2Fstrong-layout-hierarchy-reduces-content-overload%2F&media=https%3A%2F%2Fuxmovement.com%2Fwp-content%2Fuploads%2F2020%2F11%2Flayout-beforeafter.png&description=Content+overload+is+a+common+problem+that%E2%80%99s+not+only+caused+by+a+high+quantity+of+content.+It%E2%80%99s+also+caused+by+the+way+all+that+content+is+displayed.+You+can%E2%80%99t+control+how+content+grows+over+time%2C+but+you+can+control+the+way+you+present+it.+This+is+why+layout+hierarchy+is+crucial+for+reducing+content+overload.+%5B%26hellip%3B%5D" title="Share on Pinterest" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Pin it</a></li> | |
| <li class="st-comment"><a href="#comments" title="Comment" rel="nofollow">Comment</a></li> | |
| </ul></div> | |
| </body></html> | |
| " | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment