{"id":531,"date":"2023-10-24T11:05:41","date_gmt":"2023-10-24T11:05:41","guid":{"rendered":"https:\/\/uxvibes.in\/blog\/?p=531"},"modified":"2023-11-04T16:25:18","modified_gmt":"2023-11-04T16:25:18","slug":"gestalt-for-ux-continuation","status":"publish","type":"post","link":"https:\/\/uxvibes.in\/blog\/gestalt-for-ux-continuation\/","title":{"rendered":"Gestalt for UX- Continuation"},"content":{"rendered":"\n<p>Gestalt theory is a human tendency to perceive the shapes in a simplified and unified form, rather than seeing them as multiple, disconnected objects. It is one of the best usable design practices to reduce the cognitive loads and make the interfaces easy-to-scan &amp; easy-to-perceive for the users.<\/p>\n\n\n\n<p>Let&#8217;s try to understand the principle of continuation in this article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Continuation<\/h2>\n\n\n\n<p>Our mind primarily operates on the emotional ground rather than rational. As a result, it often gravitates towards the simplest path whether it be straight or curved, regardless of whether it\u2019s visually apparent. This whole Gestalt theory is based upon the innate human inclination to perceive the most unified and straightforward representation within a complex arrangement of visual elements. Continuation is another principle from the gestalt theory based on the same tendency of our mind.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>According to the principle of continuation, the objects that follow the common visual path or sequences are perceived in relation to each other or a part of the same group.<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>Again, these Amazon, Netflix, Instagram provide excellent illustrations for comprehending the principle of continuation. These platforms arrange the sequences of thumbnails so thoughtfully that it enables our eyes to effortlessly trace a specific path, fostering the perception that they are the part of a cohesive group.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-1-7-1024x512.jpg\" alt=\"\" class=\"wp-image-532\" srcset=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-1-7-1024x512.jpg 1024w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-1-7-300x150.jpg 300w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-1-7-768x384.jpg 768w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-1-7-720x360.jpg 720w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-1-7-560x280.jpg 560w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-1-7.jpg 1480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>These list components below are also examples of continuation. All the list items are sharing a common visual path either vertical or horizontal.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"296\" src=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-2-5-1024x296.jpg\" alt=\"\" class=\"wp-image-533\" srcset=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-2-5-1024x296.jpg 1024w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-2-5-300x87.jpg 300w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-2-5-768x222.jpg 768w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-2-5-720x208.jpg 720w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-2-5-560x162.jpg 560w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-2-5.jpg 1480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Check this Google Cloud page below and you\u2019ll find this principle applied everywhere, in fact the complete structure of this page follows the principle of continuation as everything is aligned to the left and sharing a common visual path. The only thing is that path is not visible to us.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"837\" height=\"1024\" src=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4-837x1024.jpg\" alt=\"\" class=\"wp-image-534\" srcset=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4-837x1024.jpg 837w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4-245x300.jpg 245w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4-768x939.jpg 768w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4-1256x1536.jpg 1256w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4-720x881.jpg 720w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4-560x685.jpg 560w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-3-4.jpg 1480w\" sizes=\"auto, (max-width: 837px) 100vw, 837px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This pagination above the slider can also be an example of continuation pattern.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-4-4-1024x506.jpg\" alt=\"\" class=\"wp-image-535\" srcset=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-4-4-1024x506.jpg 1024w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-4-4-300x148.jpg 300w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-4-4-768x380.jpg 768w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-4-4-720x356.jpg 720w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-4-4-560x277.jpg 560w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-4-4.jpg 1480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This ecommerce site structure also adheres to the continuation pattern, the only condition here is that- it should be coupled with a closure experience. Without this closure element, it may become challenging to recognize them as a discernible path or a series. Again, a <a href=\"https:\/\/uxvibes.in\/blog\/false-ending-are-your-users-missing-the-hidden-content\/\">false ending<\/a> experience!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-5-4-1024x684.jpg\" alt=\"\" class=\"wp-image-536\" srcset=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-5-4-1024x684.jpg 1024w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-5-4-300x200.jpg 300w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-5-4-768x513.jpg 768w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-5-4-720x481.jpg 720w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-5-4-560x374.jpg 560w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-5-4.jpg 1480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Now all the elements we have examined so far have featured multiple objects arranged in a series. But is it possible for a single object to convey the perception of the series? The answer is yes. Our visual perception doesn\u2019t always require the entire series visible at once; they can also follow a designated path guided by a pointing gesture. Check the testimonial module below as an example. How do you discern that it represents the series of multiple testimonials? You are correct! The presence of pointing arrows are effectively guiding users as they are the part of larger series.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"400\" src=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-6-4-1024x400.jpg\" alt=\"\" class=\"wp-image-537\" srcset=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-6-4-1024x400.jpg 1024w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-6-4-300x117.jpg 300w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-6-4-768x300.jpg 768w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-6-4-720x281.jpg 720w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-6-4-560x219.jpg 560w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-6-4.jpg 1480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>To illustrate this concept in real life scenarios, we often unconsciously apply this principle of continuation in our daily life experiences. When someone points their finger towards an object, our eyes instinctively follow the indicated direction tracing the guided path. This is precisely why we prefer the human imagery in our layouts facing inwards rather than leading to outside. The following examples provide a visual demonstration of how imagery can play a crucial role in achieving the continuation effect in our layouts, directing users&#8217; attention to important sections.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"800\" src=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-7-4-1024x800.jpg\" alt=\"\" class=\"wp-image-538\" srcset=\"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-7-4-1024x800.jpg 1024w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-7-4-300x234.jpg 300w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-7-4-768x600.jpg 768w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-7-4-720x562.jpg 720w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-7-4-560x437.jpg 560w, https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Image-7-4.jpg 1480w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Conclusion<\/h4>\n\n\n\n<p>According to the principle of continuation, human mind tends to follow the simplest path or sequences wherever possible and perceives them as are related to each other. This can also be used to grab user attention to some important sections.<\/p>\n\n\n\n<p>Well, that wraps up our discussion on continuation. Our next principle shares some similarities with continuation. The key distinction lies in the visibility of direct connections between the objects. This is precisely why it&#8217;s known as &#8220;<a href=\"https:\/\/uxvibes.in\/blog\/gestalt-for-ux-connectedness\/\" data-type=\"link\" data-id=\"https:\/\/uxvibes.in\/blog\/gestalt-for-ux-connectedness\/\">connectedness<\/a>.&#8221;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Human mind tends to follow the simplest path or sequences wherever possible, and perceives them as a part of same group.<\/p>\n","protected":false},"author":1,"featured_media":539,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,4],"tags":[],"class_list":{"0":"post-531","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-ux-design","8":"category-visual-design","9":"","11":"fallback-thumbnail"},"jetpack_featured_media_url":"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2023\/10\/Continuation.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/531","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=531"}],"version-history":[{"count":4,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/531\/revisions"}],"predecessor-version":[{"id":589,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/531\/revisions\/589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media\/539"}],"wp:attachment":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media?parent=531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/categories?post=531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/tags?post=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}