{"id":148,"date":"2022-03-01T15:42:46","date_gmt":"2022-03-01T15:42:46","guid":{"rendered":"https:\/\/uxvibes.in\/blog\/?p=148"},"modified":"2025-02-01T13:06:38","modified_gmt":"2025-02-01T13:06:38","slug":"an-example-showing-how-scannability-of-your-page-can-be-improved","status":"publish","type":"post","link":"https:\/\/uxvibes.in\/blog\/an-example-showing-how-scannability-of-your-page-can-be-improved\/","title":{"rendered":"An example showing how scannability of your page can be improved"},"content":{"rendered":"\n

Now we understand how scannability<\/a> can help users to find the information easily, while reducing the conscious memory load – here are a few examples how we can improve the scannability of our page by applying some common usability principles.<\/p>\n\n\n\n

Example 1<\/h3>\n\n\n\n

Imagine the below table as a first draft received in the form of wireframe.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Visual hierarchy is setting up the order of priorities<\/strong>, which gives you the control to drive your users attention. Let\u2019s improve the visual hierarchy by diversifying the optical weightages in order of their importance.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Brand consistency:<\/strong> Let\u2019s add some branding through colors, shapes, fonts etc. 95% of purchasing decisions are subconscious, showing that purchasing is more of an emotional decision than a practical one.<\/a> Read the complete branding study by By MarcomCentral. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Gestalt\u2019s law of common region<\/a>:<\/strong> Objects within the same closed region are quickly and easily perceived as grouped together. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Images speak thousand words:<\/strong> Human brain processes visuals (images\/icons etc.) 60,000 times faster than text.<\/a> Imagery plays an important role in accessibility as well.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Less is more:<\/strong> Scannability is all about reducing the cognitive load. So let\u2019s simplify it a bit more\u2026<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now look at the final output above. Did you find it more scannable than the earlier versions?<\/p>\n\n\n\n

Example 2<\/h3>\n\n\n\n

In above example, we took a comparison table to showcase the scannability best practices. Now imagine you have a text heavy content received as a requirement, will see how you can effectively arrange the typography. Assume the below raw content that need to be laid out.<\/p>\n\n\n\n

\"\"
Content is just for demo purpose, not actual.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now check the step 1 below.<\/strong> We have adjusted the fonts to the larger sizes. Set up the clearer visual hierarchy. Broken down the content into smaller paragraphs, while adding the gist of it as titles. Hyperlinks are clearly distinguishable and identifiable. Did it make your reading experience simpler?<\/p>\n\n\n\n

\"\"
Content is just for demo purpose, not actual.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Here in step 2<\/strong>, we have broken down the monotony of the layout.<\/p>\n\n\n\n

\"\"
Content is just for demo purpose, not actual.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 3.<\/strong> Some supporting icons would be a good idea! Now check back the first screen and compare. Did you observe how kept improving the scannability and ultimately the user experience?<\/p>\n\n\n\n

\"\"
Content is just for demo purpose, not actual.<\/figcaption><\/figure>\n\n\n\n

Hope these examples would help you get better clarity in order to increase the scannability in your designs.<\/p>\n","protected":false},"excerpt":{"rendered":"

Here are a few examples showing how we can improve the scannability of our page by applying some common usability principles.<\/p>\n","protected":false},"author":1,"featured_media":150,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":{"0":"post-148","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-visual-design","8":"","10":"fallback-thumbnail"},"jetpack_featured_media_url":"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/03\/image_scannability-example.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":7,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/148\/revisions\/189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media\/150"}],"wp:attachment":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}