

{"id":4998,"date":"2018-07-03T18:01:08","date_gmt":"2018-07-03T15:01:08","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4996"},"modified":"2023-07-24T11:35:00","modified_gmt":"2023-07-24T11:35:00","slug":"ux-design-how-to-make-web-interface-scannable","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/","title":{"rendered":"UX Design: How to Make Web Interface Scannable"},"content":{"rendered":"<p><span style=\"color: #333333;\">Day by day we are overwhelmed with massive information flow both offline and online. Due to new technologies and a fast internet connection, people can produce more content than they are physically able to consume. Dealing with numerous websites and apps, users don&#8217;t read everything they see word by word &#8211; they first scan the page to find out why and how it&#8217;s useful for them. So, scannability is one of the essential factors of website usability today. Today&#8217;s article explores the phenomenon and gives tips on how to make digital product scannable.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8025\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux_design_practices_article-1024x683.jpg\" alt=\"ux design practices article\" width=\"1024\" height=\"683\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux_design_practices_article-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux_design_practices_article-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux_design_practices_article-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux_design_practices_article-150x100.jpg 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux_design_practices_article.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2><span style=\"color: #333333;\">What Is Scannability?<\/span><\/h2>\n<p><span style=\"color: #333333;\">Applied to a page or screen, the verb &#8220;scan&#8221; means to glance at\/over or read hastily. So, scannability is the way to present the content and navigation elements like the layout that can be scanned easily. Interacting with a website, especially the first time, users quickly look through the content to analyze whether it&#8217;s what they need. Any piece of the content may become a hook in this process: words, sentences, images, or animations. <\/span><\/p>\n<p><span style=\"color: #333333;\">By the way, this behavior is nothing new: for many decades, people often do the same with a new magazine or newspaper looking through them before they start attentive reading of the articles. What&#8217;s more, reading from the screen is much more tiring than on paper, so users are more selective when and where they are ready to bother.<\/span><\/p>\n<p><span style=\"color: #333333;\">Why is that important? About a decade ago <a style=\"color: #333333;\" href=\"https:\/\/www.nngroup.com\/articles\/how-users-read-on-the-web\/\" rel=\"nofollow\">Jacob Nielsen<\/a> answered the question &#8220;How people read on the Web?&#8221; simply: &#8220;They don&#8217;t. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences&#8221;. Since then it hasn&#8217;t changed much: we aren&#8217;t ready to invest our time and effort into exploring the website if we aren&#8217;t sure it corresponds to our needs. So, if\u00a0an eye has nothing to be caught with at the first minutes of introduction, the risk is high that the user will go away. Whatever is the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/web-design-types-of-websites\/\">type of website<\/a>, scannability is one of the significant factors of\u00a0its user-friendly nature.<\/span><\/p>\n<p><span style=\"color: #333333;\">How can you check if the webpage is scannable? Try to look at it as a first-time user and answer two questions:<\/span><\/p>\n<p><span style=\"color: #333333;\">&#8211; Does what you see in the first couple of minutes correspond to what target audience expects from this page?<\/span><\/p>\n<p><span style=\"color: #333333;\">&#8211; Can you understand what kind of information is on the page for the first minute or two?<\/span><\/p>\n<p><span style=\"color: #333333;\">If you aren&#8217;t sure that both answers are positive, perhaps it&#8217;s time to think about how to strengthen the website scannability. It&#8217;s worth investing <\/span>time<span style=\"color: #333333;\"> because well-scanned pages become much more efficient in the following aspects:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">users complete their tasks and achieve their goals quicker<\/span><\/li>\n<li><span style=\"color: #333333;\">users make fewer mistakes in the search of content they need<\/span><\/li>\n<li><span style=\"color: #333333;\">users understand the structure and navigation of the website faster<\/span><\/li>\n<li><span style=\"color: #333333;\">the bounce rate is\u00a0reduced<\/span><\/li>\n<li><span style=\"color: #333333;\">the\u00a0level of retaining users gets higher<\/span><\/li>\n<li><span style=\"color: #333333;\">the website looks and feels more credible<\/span><\/li>\n<li><span style=\"color: #333333;\">the SEO rates are affected positively.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8194\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design.jpg\" alt=\"tips on visual hierarchy in design\" width=\"2500\" height=\"1667\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design.jpg 2500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-150x100.jpg 150w\" sizes=\"auto, (max-width: 2500px) 100vw, 2500px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Popular Scanning Patterns<\/span><\/h2>\n<p><span style=\"color: #333333;\">The vital thing which interface designer has to consider is eye-scanning patterns that show how users interact with a webpage in the first seconds. When you understand HOW people scan the page or screen, you may prioritize the content and put WHAT users need into the most visible zones. This domain of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/user-research-empathy-is-the-best-ux-policy\/\">user research<\/a> is supported by\u00a0<a style=\"color: #333333;\" href=\"https:\/\/www.nngroup.com\/articles\/eyetracking-study-of-web-readers\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Nielsen Norman Group<\/a> and provides designers and usability specialists with a better understanding of user behavior and interactions.<\/span><\/p>\n<p><span style=\"color: #333333;\">Different experiments collecting data on user eye-tracking have shown that there are several typical models\u00a0along which visitors usually scan the website.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7731\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/z-pattern-web-scannability-1-1024x1015.png\" alt=\"z pattern web scannability\" width=\"800\" height=\"793\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/z-pattern-web-scannability-1.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/z-pattern-web-scannability-1-150x150.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/z-pattern-web-scannability-1-300x297.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/z-pattern-web-scannability-1-768x761.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">Z-Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7732\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/zig-zag-pattern-web-scannability-1-955x1024.png\" alt=\"zig zag pattern web scannability\" width=\"800\" height=\"858\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/zig-zag-pattern-web-scannability-1.png 955w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/zig-zag-pattern-web-scannability-1-280x300.png 280w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/zig-zag-pattern-web-scannability-1-768x823.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/zig-zag-pattern-web-scannability-1-140x150.png 140w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">Another scheme features a zig-zag pattern typical for pages with visually divided content blocks. Again, the reader\u2019s eyes go left to right starting from the upper left corner and moving across all the page to the upper right corner scanning the information in this initial zone of interaction.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7733\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/f_reading-pattern-eyetracking-scannability.jpg\" alt=\"f_reading pattern eyetracking scannability\" width=\"785\" height=\"364\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/f_reading-pattern-eyetracking-scannability.jpg 785w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/f_reading-pattern-eyetracking-scannability-300x139.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/f_reading-pattern-eyetracking-scannability-768x356.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/f_reading-pattern-eyetracking-scannability-150x70.jpg 150w\" sizes=\"auto, (max-width: 785px) 100vw, 785px\" \/><\/p>\n<p><span style=\"color: #333333;\">One more model is F-pattern presented in the explorations by\u00a0<a style=\"color: #333333;\" href=\"https:\/\/www.nngroup.com\/articles\/f-shaped-pattern-reading-web-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nielsen Norman Group\u00a0<\/a>and showing that users often demonstrate the following flow of interaction:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F\u2019s top bar.<\/span><\/li>\n<li><span style=\"color: #333333;\">Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F\u2019s lower bar.<\/span><\/li>\n<li><span style=\"color: #333333;\">Finally, users scan the content\u2019s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eye-tracking <\/span>heatmap<span style=\"color: #333333;\">. Other times users move faster, creating a spottier heatmap. This last element forms the F\u2019s stem.<\/span><\/li>\n<\/ul>\n<h2><span style=\"color: #333333;\">Tips on Improving Scannability<\/span><\/h2>\n<h3><span style=\"color: #333333;\">1. Prioritize the content with visual hierarchy<\/span><\/h3>\n<p><span style=\"color: #333333;\">Basically, <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/9-effective-tips-on-visual-hierarchy\/\">visual hierarchy<\/a> is the way to arrange and organize the content on the page in the way which is the most natural for human perception. The main goal behind it is to let users understand the importance level of each piece of content. So, if the visual hierarchy is applied, the users will see the\u00a0key content first.<\/span><\/p>\n<p><span style=\"color: #333333;\">For example, when we see the article in the blog, we&#8217;ll get the\u00a0headline first, then subheadings and only then copy blocks. Does it mean that the information in the copy blocks has the low level of importance? Well, no, but this way users will be able to scan the headline and subheadings to understand if the article is useful and interesting for them instead of trying to read all the text. And if the headline and subheadings are done properly and inform the user about the structure and contents of the article, this will be the factor convincing to read more. On the other hand, if users see\u00a0the huge and long sheet of text not separated into chunks, they will be literally scared, not able to understand how long it will take to read this article and if it is worth investing their time and effort.<\/span><\/p>\n<p><span style=\"color: #333333;\">There are several main factors helping to build up the visual hierarchy:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">size<\/span><\/li>\n<li><a href=\"https:\/\/blog.tubikstudio.com\/color-matters-6-tips-on-choosing-ui-colors\/\"><span style=\"color: #333333;\">color<\/span><\/a><\/li>\n<li><span style=\"color: #333333;\">contrast<\/span><\/li>\n<li><span style=\"color: #333333;\">proximity<\/span><\/li>\n<li><a href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices-2\/\"><span style=\"color: #333333;\">negative space<\/span><\/a><\/li>\n<li><span style=\"color: #333333;\">repetition.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">All of them help designers transform the set of elements, links, images and copy into the harmonic scannable system of the page layout.<\/span><\/p>\n<h3><span style=\"color: #333333;\">2. Put the core navigation into the website header<\/span><\/h3>\n<p><span style=\"color: #333333;\">All the mentioned eye-scanning patterns show that whichever of them a particular user follows, the scanning process will start in the top horizontal area of the webpage.\u00a0Using it for showing the key zones of interaction and branding is a strategy supporting both sides. That is the basic reason why <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/best-practices-for-website-header-design\/\">website header design<\/a> is considered as an essential issue\u00a0by not only UI\/UX designers\u00a0but also content managers and marketing specialists.<\/span><\/p>\n<p><span style=\"color: #333333;\">On the other hand, the header shouldn&#8217;t be overloaded: too much information makes it impossible to focus. The attempt to put everything into the top part of the page can transform the layout into the mess. So, in every particular case, it&#8217;s a must to analyze the goals of the core target audience, how they cross with the business goals behind the website and based on that &#8211; what information or navigation should be put into the\u00a0header as the most important. For example, if it&#8217;s a big e-commerce website, search functionality has to be instantly visible and is often found in the header to be accessible from any point of interaction. Whereas for the small corporate website,\u00a0search functionality can be\u00a0unnecessary at all but the immediately seen link to the portfolio will be crucial.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8166\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/gourmet_website_interactions_tubik.gif\" alt=\"gourmet website interactions tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">3. Keep the balance of negative space<\/span><\/h3>\n<p><span style=\"color: #333333;\"><a href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices-2\/\">Negative space<\/a> \u2014 or white space, as it\u2019s often called \u2014 is the area of the layout that is left empty, not only around the objects in the layout but also between and inside them. <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices\/\">Negative spac<\/a>e is a kind of breathing room for all the objects on the page or screen. It defines the limits of objects, creates the necessary bonds between them according to\u00a0<a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/gestalt-theory-for-ux-design-principle-of-proximity\/\">Gestalt principles<\/a>\u00a0and builds up effective visual performance.\u00a0In UI design for websites and mobile apps, negative space is a big factor of high <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigability<\/a>\u00a0of the interface: without enough air, layout elements aren&#8217;t properly seen so users risk missing what they really need.\u00a0It may be a strong reason for eye and brain tense although many users won\u2019t be able to formulate the problem.\u00a0A proper amount of negative space, especially micro space, solves\u00a0it and makes the process more natural.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">4. Check that CTA is seen at once<\/span><\/h3>\n<p><span style=\"color: #333333;\">Obviously, the vast majority of web pages are aimed at particular actions that users have to complete. The elements that contain the call to action (CTA), usually <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ux-practices-8-solid-tips-on-cta-button-design\/\">buttons<\/a>, should be seen\u00a0in split seconds to let users understand what actions they can do on this page. Among the good tests is checking the page in the black-and-white\u00a0and blurred modes. If in both cases you can distinguish CTA elements quickly, they are done well. For example, on the webpage of the <a href=\"https:\/\/blog.tubikstudio.com\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\">bakery website<\/a> shown below the CTA button of adding the item to the list is easily seen among the other elements.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8195\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui.png\" alt=\"Bakery website catalog design-ui\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3><span style=\"color: #333333;\">5.\u00a0Test the readability of copy content<\/span><\/h3>\n<p><span style=\"color: #333333;\"><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">Readability<\/a> defines how easy people can read words, phrases,\u00a0and\u00a0blocks of copy. Legibility measures how quickly and intuitively users\u00a0can distinguish the letters in a particular typeface.\u00a0These characteristics should be carefully considered, especially for the interfaces filled with a lot of text. The <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/light-or-dark-ui-tips-choose-proper-color-scheme\/\">color of the background<\/a>, amount of space around copy blocks, kerning, leading, type of font and font pairing &#8211; all these factors influence the ability to quickly scan the text and catch the content convincing users to stay. To prevent the problem, designers have to check if the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/typography-in-ui-guide-for-beginners\/\">typography<\/a>\u00a0laws are followed and whether the chosen fonts support general visual hierarchy and readability. <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/tests-go-first-usability-testing-in-design\/\">User testing<\/a> will help to check how quickly and easily users are able to perceive the text.<\/span><\/p>\n<h3><span style=\"color: #333333;\">6. Apply numbers, not words<\/span><\/h3>\n<p><span style=\"color: #333333;\">This piece of advice is based on another investigation by\u00a0<a style=\"color: #333333;\" href=\"https:\/\/www.nngroup.com\/articles\/web-writing-show-numbers-as-numerals\/\" rel=\"nofollow\">Nielsen Norman Blog<\/a>. They shared an important finding: eye-tracking studies showed that in the process of scanning web pages, numerals often stop the wandering user&#8217;s eye and attract fixations, even embedded in a mass of words that would be ignored without numbers. We subconsciously associate numbers with facts, stats, sizes and distance \u2014 data that is potentially useful. So numbers included in copy catch reader&#8217;s attention while words representing numerals can be missed in the bulk of copy. What&#8217;s more, numbers are more compact than the textual numeral, so it makes the content more concise and time-saving for scanning.<\/span><\/p>\n<h3><span style=\"color: #333333;\">7. Place one idea in one paragraph<\/span><\/h3>\n<p><span style=\"color: #333333;\">Processing the copy content in the aspect of scannability, try not to make the bulks of text too long. Short paragraphs look more digestible and can be easier skipped in case the information is not valuable for the reader. So, follow the rule when you present one idea in one paragraph and start another one for\u00a0a new thought.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7729\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/tubik_studio_design-studio-bjorn.gif\" alt=\"design studio bjorn website\" width=\"800\" height=\"600\" \/><\/p>\n<h3><span style=\"color: #333333;\">8. Use numbered and bulleted lists<\/span><\/h3>\n<p><span style=\"color: #333333;\">One more good trick to make the text more scannable is using lists with numbers or bullets. They help to organize data clearly. Also, they catch the user&#8217;s eye so the information won&#8217;t get lost in the general body of the text.<\/span><\/p>\n<h3><span style=\"color: #333333;\">9. Highlight the key information in the text<\/span><\/h3>\n<p><span style=\"color: #333333;\">Good old bold, italics and color highlighting are old school but they still work successfully. This way you may attract attention to the significant idea, definition, quote or another type<\/span><span style=\"color: #333333;\">\u00a0of specific data included right into the paragraph. What&#8217;s more, the <strong>clickable part of the text (links to other pages)\u00a0must be visually marked<\/strong>. We are used to seeing them underlined, still highlighting them additionally with color or bolder font is even more effective.<\/span><\/p>\n<h3><span style=\"color: #333333;\">10. Use images and illustrations<\/span><\/h3>\n<p><span style=\"color: #333333;\">In web user interface design, <a href=\"https:\/\/blog.tubikstudio.com\/web-design-basic-types-of-images-web-content\/\">images<\/a> are highly supportive in setting the mood or transferring the message. They are the content that is both informative and emotionally appealing. Original illustration, prominent hero banners, engaging photos can easily catch users\u2019 attention and support the general stylistic concept. What&#8217;s more, they play a big role in building visual hierarchy and make the <a href=\"https:\/\/blog.tubikstudio.com\/user-experience-tips-ux-writing\/\">copy content<\/a> more digestible in combination with illustrations or photos. People perceive images faster than words which is an important factor for increased scannability.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8132\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/financial_service_website_tubik.png\" alt=\"financial service website_tubik\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/financial_service_website_tubik.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/financial_service_website_tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/financial_service_website_tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/financial_service_website_tubik-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">Improving the scannability of the web pages<\/span><span style=\"color: #333333;\">, designers and content creators show real respect to website users. This way we save users&#8217; time and <\/span>effort<span style=\"color: #333333;\"> providing them with organized, harmonic, valuable, and attractive content.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Useful Articles<\/span><\/h2>\n<p><span style=\"color: #333333;\"> <a style=\"color: #333333;\" href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2015\/06\/scannability-principle-and-practice.php\" rel=\"nofollow\">Scannability: Principle and Practice<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/www.nngroup.com\/articles\/how-users-read-on-the-web\/\" rel=\"nofollow\">How Users Read on the Web<\/a><\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">How to Make User Interface Readable<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/www.nngroup.com\/articles\/eyetracking-tasks-efficient-scanning\/\" rel=\"nofollow\">Scanning Patterns on the Web Are Optimized for the Current Task<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/visual-hierarchy-effective-ui-content-organization\/\">Visual Hierarchy: Effective UI Content Organization<\/a><\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/anatomy-of-web-page\/\">The Anatomy of a Web Page: 14 Basic Elements<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/3c-of-interface-design-color-contrast-content\/\">3C of Interface Design: Color, Contrast, Content<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/gestalt-theory-for-ux-design-principle-of-proximity\/\">Gestalt Theory for UX Design: Principle of Proximity<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/gestalt-theory-for-efficient-ux-principle-of-similarity\/\">Gestalt Theory for Efficient UX: Principle of Similarity<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices\/\">Negative Space in Design: Tips and Best Practices<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article explains the factor of scannability, eye-tracking patterns and presents 10 tips for UX designers on enhancing scannability of web user interfaces.<\/p>\n","protected":false},"author":3,"featured_media":8055,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[479,482,485,487,491,502,100,504,151,505,256,527,347,533,410,548,463,465,466,468,469],"coauthors":[],"class_list":["post-4998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-usability","tag-user-experience","tag-user-experience-design","tag-user-experience-design-process","tag-user-interface","tag-ux","tag-design","tag-ux-design-article","tag-design-tips","tag-ux-design-best-practices","tag-interaction-design","tag-visual-hierarchy","tag-navigation","tag-web-design","tag-scannability","tag-website-design","tag-ui-design-article","tag-ui-design-examples","tag-ui-design-inspiration","tag-ui-design-process","tag-ui-design-tips"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UX Design: How to Make Web Interface Scannable<\/title>\n<meta name=\"description\" content=\"The article explains the factor of scannability, eye-tracking patterns and presents 10 tips for UX designers on enhancing scannability of web user interfaces.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Design: How to Make Web Interface Scannable\" \/>\n<meta property=\"og:description\" content=\"The article explains the factor of scannability, eye-tracking patterns and presents 10 tips for UX designers on enhancing scannability of web user interfaces.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-03T15:01:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:35:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1281\" \/>\n\t<meta property=\"og:image:height\" content=\"961\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/\",\"name\":\"UX Design: How to Make Web Interface Scannable\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png\",\"datePublished\":\"2018-07-03T15:01:08+00:00\",\"dateModified\":\"2023-07-24T11:35:00+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article explains the factor of scannability, eye-tracking patterns and presents 10 tips for UX designers on enhancing scannability of web user interfaces.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png\",\"width\":1281,\"height\":961,\"caption\":\"ux design scannable interface tubik blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Design: How to Make Web Interface Scannable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX Design: How to Make Web Interface Scannable","description":"The article explains the factor of scannability, eye-tracking patterns and presents 10 tips for UX designers on enhancing scannability of web user interfaces.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/","og_locale":"en_US","og_type":"article","og_title":"UX Design: How to Make Web Interface Scannable","og_description":"The article explains the factor of scannability, eye-tracking patterns and presents 10 tips for UX designers on enhancing scannability of web user interfaces.","og_url":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-07-03T15:01:08+00:00","article_modified_time":"2023-07-24T11:35:00+00:00","og_image":[{"width":1281,"height":961,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png","type":"image\/png"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/","url":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/","name":"UX Design: How to Make Web Interface Scannable","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png","datePublished":"2018-07-03T15:01:08+00:00","dateModified":"2023-07-24T11:35:00+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article explains the factor of scannability, eye-tracking patterns and presents 10 tips for UX designers on enhancing scannability of web user interfaces.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/ux-design-scannable-interface-tubik-blog.png","width":1281,"height":961,"caption":"ux design scannable interface tubik blog"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/ux-design-how-to-make-web-interface-scannable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UX Design: How to Make Web Interface Scannable"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4998"}],"version-history":[{"count":6,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4998\/revisions"}],"predecessor-version":[{"id":14446,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4998\/revisions\/14446"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8055"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4998"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}