{"id":7518,"date":"2022-08-15T13:11:31","date_gmt":"2022-08-15T13:11:31","guid":{"rendered":"https:\/\/designcompass.org\/?p=7518"},"modified":"2026-07-01T11:08:51","modified_gmt":"2026-07-01T02:08:51","slug":"motion-for-good-ui","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2022\/08\/15\/motion-for-good-ui\/","title":{"rendered":"Movement for Good UI"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Before the advent of mobile design, motion was taboo in web design. It was a device that slowed down the speed and forced users to focus on information they did not want to see. It was primarily used to ensure users viewed the information the provider wanted to display. With the advent of the mobile era, motion was rarely used due to unstable internet and declining device performance. Now, however, with the advancement of mobile technology, the difficulty of applying motion to services has decreased. While it is still used to emphasize specific information, efforts to provide appropriate motion for the user are gradually increasing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/ui-motion-clean.gif\" alt=\"\" class=\"wp-image-7557\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Just like auditory and visual languages, movement is a type of language. It can convey diverse information within a limited space, making it easy to communicate content that is difficult to convey through static elements. Furthermore, since nothing in the real world we experience is truly &quot;still,&quot; movement adds a touch of naturalness. It can be seen as the final piece that depicts naturalness on a flat screen. In addition, if it reacts to my actions, it conveys the feeling that abstract visual elements actually exist in the physical world.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Uses of movement<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/motion-waiting.gif\" alt=\"\" class=\"wp-image-7525\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Making them pay attention and wait<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Movement makes users focus. Moving elements are the first to catch the eye compared to other visual techniques. While the eyes and brain process information quickly from static elements, the gaze tends to linger on dynamic elements until attention wanes. It can also help make waiting times feel shorter because the user does not perceive time while processing movement information.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/transition.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Helps you imagine a virtual space<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Movement helps make the structure of the service easy to understand. A flat mobile screen is an abstract space. Animation is utilized to help visualize a concrete structure within this abstract space. To help visualize the space and structure within a limited screen, animations indicate where elements appear when the screen transitions. An animation appearing from the right allows one to imagine a structure progressing from left to right, while a structure where something pops out from below, finishes its work, and disappears allows one to imagine a temporary task briefly appearing from bottom to top. <\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/sequence.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Delivering a lot of information sequentially<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Movement is effective for conveying multiple pieces of information within a small space. When content is static, once displayed, it occupies a specific area. By using movement to switch the displayed information, you can convey various details in a short amount of time. This technique reduces the amount of information the eyes absorb at once and allows customers to view diverse information without performing touch or scroll actions. Since users cannot know what content will appear without waiting, it is best to ensure that the context of the elements is connected from start to finish.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/feedback.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Intuitive and fast feedback cycle<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Movement can also convey intuitive and predictable feedback. Users must interpret information whenever visual elements such as text, photos, or images are added. Changes occurring within specific elements can be conveyed solely through the movement of the element itself, without the need for separate explanations. For example, when attempting to delete a specific element, information such as &quot;Failed&quot; or &quot;Successful&quot; can be conveyed by adding text or icons. However, instead of adding visual elements, movement can be added to the object being deleted to help users understand intuitively without needing to interpret the visuals. For instance, it might move left and right as if shaking its head upon failure, or jump slightly as if pleased upon success.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Elements of movement<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/duration.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">speed<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Speed and duration are relative. Based on a 1-second (1,000ms) mobile environment, it is recommended to start at 0.2 seconds (200ms) to 0.5 seconds (500ms). These numbers are <a href=\"https:\/\/www.nngroup.com\/articles\/animation-duration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Neilson Norman Group<\/a>class <a href=\"https:\/\/en.wikipedia.org\/wiki\/Human_processor_model\">Model Human Processor<\/a>It is based on. 0.1 seconds (100ms) is perceived as a moment, and 1 second (1,000ms) is said to be the upper limit of what can be thought of. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Human_processor_model\">Model Human Processor<\/a> In this context, if it is too short, it is not perceived, and if it is too long, it becomes boring. On the web, animations associated with execution must be faster. This is because users might perceive that the web is not functioning properly. Additionally, the larger the element, the faster it must move, as the distance it needs to cover within the same area differs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/velocity.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It is natural to apply acceleration to repetitive movements. Moving at a constant speed feels unnatural because it is difficult to exist. It is natural for a movement to start fast and gradually slow down as it reaches the end. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/appear.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The movements for appearance and exit vary depending on the situation. When an element appears, it is best to display it as quickly as possible so that the user does not have to wait. When an element exits, it is advisable to express the disappearance speed with gradual acceleration, as it is best to vanish as quickly as possible after conveying that the element is moving.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Movement path<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In digital products, you must consider the environment in which elements are displayed and the user flow. Clearly define what problems the movement solves at each stage of the user experience, and apply the movement by finding a context that supports the user&#039;s journey to achieve their goals. Design the system to avoid confusion caused by the movement of multiple elements, clearly prioritize elements, and minimize cognitive load. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"900\" style=\"aspect-ratio: 1600 \/ 900;\" width=\"1600\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/order.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It is best for movement to start from the location where the user performs an action. For example, if the user swipes the screen from the right, a new window should appear from the right. When the user presses a button to open a popup, it is natural for a window for selecting details to appear by expanding from the pressed button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"900\" style=\"aspect-ratio: 1600 \/ 900;\" width=\"1600\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/position.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The order in which elements appear depends on the context. Not all elements need to move sequentially, and it is better to minimize the amount and duration of movement as much as possible. Even when not displaying all information simultaneously to indicate its beginning and end, moving elements should be grouped as much as possible to minimize the user&#039;s visual path.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>\ubaa8\ubc14\uc77c \ub514\uc790\uc778\uc774 \ub4f1\uc7a5\ud558\uae30 \uc804 \uc6f9 \ub514\uc790\uc778\uc5d0\uc11c \uc6c0\uc9c1\uc784\uc740 \uae08\uae30\uc600\uc2b5\ub2c8\ub2e4. \uc18d\ub3c4\ub97c \ub290\ub9ac\uac8c \ud558\uace0 \uc0ac\uc6a9\uc790\uac00 \ubcf4\uace0 \uc2f6\uc5b4\ud558\uc9c0 \uc54a\ub294 \uc815\ubcf4\uc5d0 \uac15\uc81c\ub85c \uc9d1\uc911\ud558\uac8c \ub9cc\ub4dc\ub294 \uc7a5\uce58\uc600\uc2b5\ub2c8\ub2e4. \uacf5\uae09\uc790\uac00 \ubcf4\uc5ec\uc8fc\uace0 \uc2f6\uc740 \uc815\ubcf4\ub97c \ubcf4\uac8c\ud558\ub294 \uc6a9\ub3c4\ub85c \ub9ce\uc774 \uc4f0\uc600\uc2b5\ub2c8\ub2e4. \ubaa8\ubc14\uc77c \uc2dc\ub300\ub85c \ub4e4\uc5b4\uc11c\uba74\uc11c \uc778\ud130\ub137\uc774 \ubd88\uc548\uc815\ud558\uace0 \uae30\uae30 \uc131\ub2a5\uc774 \ub5a8\uc5b4\uc84c\uae30 \ub54c\ubb38\uc5d0 \uc6c0\uc9c1\uc784\uc740 \uac70\uc758 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. \uc774\uc81c\ub294 \ubaa8\ubc14\uc77c \uad00\ub828 \uae30\uc220\uc774 \ubc1c\ub2ec\ud558\uba74\uc11c \uc11c\ube44\uc2a4\uc5d0 \uc6c0\uc9c1\uc784\uc744 \uc801\uc6a9\ud558\ub294 \ub09c\uc774\ub3c4\ub3c4 \ub0ae\uc544\uc84c\uc2b5\ub2c8\ub2e4. \uc5ec\uc804\ud788 \ubcf4\uc5ec\uc8fc\uace0 \uc2f6\uc740 \uc815\ubcf4\ub97c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7559,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[4],"tags":[107,370,374,377,597],"class_list":["post-7518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-107","tag-ui","tag-ux","tag-597"],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2026-09-08 00:05:16","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"jetpack_featured_media_url":"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/08\/thumbnail-motion.png","_links":{"self":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/7518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/comments?post=7518"}],"version-history":[{"count":6,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/7518\/revisions"}],"predecessor-version":[{"id":65427,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/7518\/revisions\/65427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media\/7559"}],"wp:attachment":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media?parent=7518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/categories?post=7518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/tags?post=7518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}