People don\u2019t read, they scan!<\/h2>\n\n\n\n
As we all know, the internet is the most crowded place. If you search one keyword, you\u2019ll get minimum 1000 results that one human life is too short to crawl through every one of them Users don\u2019t have that much time to read the content & then know if this is the right one they are looking for. They just want to skim it quickly and move on to the next!<\/p>\n\n\n\n
So as per the calculation, you just have 4 to 6 seconds to win your users attention, convince them and to make them hang on your website further. <\/strong><\/p>\n\n\n\n One more reason they don\u2019t read is – reading on the screen is not as easy as reading in the actual world. The backlit coming from the screen is very stressful for the eyes. That\u2019s the reason most probably, they will just scan your page quickly first and ONLY if they found any piece of information aligned with their interest, will go for reading it. <\/p>\n\n\n\n This is where the scannability comes into play!<\/p>\n\n\n\n \u201cScannability is presenting the layout in such a way that users can find the relevant piece of information quickly and easily.\u201d<\/strong><\/p>\n\n\n\n Scannability is one of the most important aspects in the world of user experience. It helps in conversions to a measurable distinct. Making your website scannable\u2026<\/p>\n\n\n\n To ensure your website is well scannable, you can just ask two questions to yourself after completing the design.<\/strong><\/p> \u201cWhat are our target users expecting from our site?\u201d<\/strong><\/p> \u201cWhat are the key information areas on the page users would see in the first few seconds?\u201d<\/strong><\/p><\/blockquote>\n\n\n\n Well, this is all about why and what about scannability, but how can you bring it to your designs?<\/p>\n\n\n\n As we all know that users have visited our site to get their tasks done or to learn\/to get advice on something, right? Our job is to make their job easier. Below are the couple of things you can follow into your layouts.<\/p>\n\n\n\n Visual hierarchy is an arrangement of the elements on the page as per their priorities. For example, you can see the paragraphs under the titles, subsections under the primary sections etc. The variety of font size would help you to understand which comes under what easily.<\/p>\n\n\n\n Visual hierarchy gives you the control to decide and direct the path of your user\u2019s attention.<\/strong><\/p><\/blockquote>\n\n\n\n There are many ways to create a visual hierarchy in your pages. Although the bottom line is to make the content optically scannable, you can consider some design factors below to achieve the same.<\/p>\n\n\n\n Size:<\/strong> <\/em>Large size elements are often perceived as something important. See the home page of hugeinc.com<\/a> and Cafe Mokarico<\/a>.<\/p>\n\n\n\n Contrast:<\/strong> Contrast is the another best way to prioritize the content. See how xd.adobe.com<\/a> have effectively made use of contrast variations in their header and navigation.<\/p>\n\n\n\n Color:<\/strong> <\/em>Did this colorful image on a plain white background in the UX planet<\/a>\u2019s blogpost immediately grab your attention?<\/p>\n\n\n\n Imagine this article with no imagery. Lengthy paragraphs with single font styling followed from the beginning to end like regular or bold. How long would you go while reading? I am sure you\u2019ll definitely quit reading after one or two paragraphs max. <\/p>\n\n\n\n Now just go back to the top again and check what made you read it till here without losing your interest, without putting much stress on your eyes and brain? What made your reading simpler?<\/p>\n\n\n\n Here are a few tricks:<\/p>\n\n\n\n This is Google\u2019s blog on Global accessibility<\/span><\/a>. Although there is a lot of text on this page, see how they have presented it in a very easily scannable manner. What have they done differently?<\/strong><\/p>\n\n\n\n Images speak a thousand words. Attractive imagery immediately catches your attention, reduces the cognitive load and makes users hang on for a while. The imagery used on hugeinc<\/a> tells their own story themselves in a while.<\/p>\n\n\n\n Whitespace is not literally a \u2018white\u2019 space but a blank space or breathing space. This is also a very important design element to let users focus on a particular object. If I put a small black dot on a plain white background, you’ll see that dot first although there is a lot of empty space around, right?<\/p>\n\n\n\nWhat is scannability?<\/h2>\n\n\n\n
How can I make the layout scannable?<\/h2>\n\n\n\n
Maintain a proper visual hierarchy<\/h3>\n\n\n\n
![\"Size:\u00a0Large](\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/02\/hugeinc-1024x469.jpg\")
![\"Large](\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/02\/cafe-mokarico-1024x463.jpg\")
![\"Contrast](\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/02\/image_xd-ideas-1024x418.jpg\")
![\"Did](\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/02\/image_ux-planet-1024x569.jpg\")
Typography<\/h3>\n\n\n\n
![\"See](\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/02\/image_Google-Design.jpg\")
Use of imagery & videos<\/h3>\n\n\n\n
![\"Attractive](\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/02\/image_hugeinc-1024x464.jpg\")
Whitespace<\/h3>\n\n\n\n
![\"See](\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/02\/image_ceremony-1024x475.jpg\")