{"id":66936,"date":"2023-05-15T18:01:37","date_gmt":"2023-05-15T10:01:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=66936"},"modified":"2023-05-24T16:08:15","modified_gmt":"2023-05-24T08:08:15","slug":"ux-design-patterns","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/","title":{"rendered":"Improve Your UX Design with These 9 Helpful Patterns"},"content":{"rendered":"<p>In our everyday lives, we engage in activities that we regularly perform almost automatically and in a nearly unchangeable manner. We call these habits or, more professionally, \"patterns.\" Patterns help us structure our lives and simplify our decision-making processes.<\/p>\n<p>The same concept applies to <a href=\"https:\/\/www.hongkiat.com\/blog\/ux-and-ux-designers\/\">UX design<\/a> \u2013 there are patterns here as well. These patterns assist UX designers in building high-quality user interfaces and managing users\u2019 attention.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/ux-design.jpg\" alt=\"UX design patterns\" width=\"1600\" height=\"900\"><\/figure>\n<p>In this article, I want to shed light on some of the most popular patterns in UX design and explain how to use them to make your UI more user-friendly. Let\u2019s begin!<\/p>\n<h2>What is a Pattern?<\/h2>\n<p>In psychology, the term \"pattern\" often refers to a recurring type of behavior exhibited in a particular setting over time. In interface design, patterns encompass rules and laws, including cognitive biases and behavioral patterns. Though applied in design, these patterns still have a psychological basis, as the biases and rules stem from subconscious thoughts and judgments.<\/p>\n<p>Good products should elicit reactions and emotions while promoting specific actions. Thus, understanding how patterns work can help provoke the desired user responses. Comprehending patterns is essential for creating a user-friendly design that meets the following criteria:<\/p>\n<ul>\n<li>Users can solve their problems <\/li>\n<li>They can do so quickly <\/li>\n<li>The design minimizes human errors <\/li>\n<li>Users are satisfied <\/li>\n<li>The learning curve is short or non-existent <\/li>\n<li>The UI design aligns with business requirements (commercial success)<\/li>\n<\/ul>\n<h2>Are Patterns in UX Design Essential?<\/h2>\n<p>Not precisely. Patterns exist to assist you, not restrict you. Thus, I would suggest considering them. After all, it is more straightforward to follow existing patterns than to invest in new ones and teach them to users.<\/p>\n<h2>Top 9 Patterns to Follow in UX Design<\/h2>\n<p>These patterns are prevalent; therefore, remember to consider them every time you begin building an interface.<\/p>\n<h3>Fitts Law<\/h3>\n<p><em>\"The farther and smaller an object is, the lower the chances of accurately reaching it.\"<\/em><\/p>\n<p>Fitts\u2019 Law states: the likelihood of achieving a goal depends on the size and placement of the interactive elements.<\/p>\n<p>To provide some context, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Paul_Fitts\">Paul Fitts<\/a> was a psychologist who studied how people move toward their goals. In 1954, he concluded that the time it takes to achieve a goal depends not only on how far away it is, but also on its size. In other words, the farther and smaller an object is, the lower the chances of accurately reaching it.<\/p>\n<p>For designers, Fitts\u2019 Law is fundamental in terms of control placement. It can be translated as follows: interface elements should be large and accessible enough for the user.<\/p>\n<p>For example, on the Patreon website, users can click on the text menu and the entire block.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/fitts-law-ux-design-pattern.jpg\" alt=\"fitts law ux design pattern\" width=\"800\" height=\"530\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/fitts-law-ux-design-pattern-2.jpg\" alt=\"fitts law ux design pattern\" width=\"800\" height=\"530\"><\/figure>\n<h3>Hick\u2019 Law<\/h3>\n<p><em>\"The fewer options there are, the faster the choice is made.\"<\/em><\/p>\n<p>Congratulations! Now you know Hick\u2019s Law.<\/p>\n<p>Mr. Hick proposed this law in 1952, suggesting that when there are many choices, you end up \"thinking too long.\" Now, this is the top principle for goods selection services. Indeed, we all know that the torture of choosing is one of the toughest. As UX designers who care about users, we do not want to subject our beloved users to it.<\/p>\n<p>But what if it is impossible to reduce the number of options? Try to break them down into simpler steps. Hick\u2019s Law is all about making it easier for the user to choose. Sometimes the options can be endless, and it\u2019s difficult to make them fewer. Take Netflix, for example: the number of shows to choose from is seemingly infinite.<\/p>\n<p>However, Netflix has managed to rescue users from the anguish of a difficult choice. They introduced the \"Top 10 in your country\" feature. And this is what I call Hick\u2019s Law in action!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/hicks-law-ux-design-pattern-2.jpg\" alt=\"hicks law ux design pattern\" width=\"800\" height=\"530\"><\/figure>\n<div class=\"sue-icon-text su-image-caption\" data-url=\"\" data-target=\"self\" style=\"min-height:34px;padding-left:36px;color:#333333\">\n<div class=\"sue-icon-text-icon\" style=\"color:#333333;font-size:24px;width:24px;height:24px\"><i class=\"sui sui-photo\" style=\"font-size:24px;color:#333333\"><\/i><\/div>\n<div class=\"sue-icon-text-content su-u-trim\" style=\"color:#333333\">Screenshot \/ <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.techradar.com\/news\/netflixs-new-daily-top-10-list-reveals-whats-most-popular-in-yo%20ur-country\">Techradar<\/a><\/div>\n<div style=\"clear:both;height:0\"><\/div>\n<\/div>\n<h3>Jacob\u2019 Law<\/h3>\n<p>\"<em>The more familiar the website looks to the users, the better they will like it.<\/em>\"<\/p>\n<p>Have you ever noticed, while surfing the internet, that many websites look similar to each other? In other instances, this might seem like a bad sign. However, when it comes to websites, it\u2019s not about being \"unique and exclusive,\" but rather about <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.uptech.team\/services\/ui-ux-design-services\">usability<\/a>.<\/p>\n<p>As a designer, you need to accept the harsh truth \u2013 users spend a lot of time on other websites. The last thing they want to do is learn new things when they visit a new website.<\/p>\n<p>This is what UX specialist <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/people\/jakob-nielsen\/\">Jakob Nielsen<\/a> postulates: don\u2019t overwhelm users with new concepts and instead use familiar patterns.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/jacobs-law-ux-design-pattern.jpg\" alt=\"jacobs law ux design pattern\" width=\"800\" height=\"530\"><\/figure>\n<div class=\"sue-icon-text su-image-caption\" data-url=\"\" data-target=\"self\" style=\"min-height:34px;padding-left:36px;color:#333333\">\n<div class=\"sue-icon-text-icon\" style=\"color:#333333;font-size:24px;width:24px;height:24px\"><i class=\"sui sui-photo\" style=\"font-size:24px;color:#333333\"><\/i><\/div>\n<div class=\"sue-icon-text-content su-u-trim\" style=\"color:#333333\">Screenshot \/ <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/uxplanet.org\/7-important-ux-laws-with-examples-c1ff02a05488\">uxplanet.org<\/a><\/div>\n<div style=\"clear:both;height:0\"><\/div>\n<\/div>\n<h3>Pragnanz Law<\/h3>\n<p>\"<em>The human brain tends to interpret complex things via simpler forms.<\/em>\"<\/p>\n<p>Pragnanz Law also originates from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.verywellmind.com\/what-is-gestalt-psychology-2795808\">Gestalt psychology<\/a>. In 1910 psychologist <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Max_Wertheimer\">Max Wertheimer<\/a> noticed that the human brain would see a row of blinking fires as a constantly moving line. The reason for this is, again, the human brain\u2019s tendency to simplify difficult things and not to overwhelm itself.<\/p>\n<p>So do not make the UX interface a mystery to the user, as they either do not understand it or simplify it to an understandable form. This rule is mainly applicable to the icons on websites.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/Pragnanz-law-ux-design-patterns.jpg\" alt=\"Pragnanz law ux design pattern\" width=\"800\" height=\"599\"><\/figure>\n<h3>Law of Closeness<\/h3>\n<p><em>\"Elements standing close to each other are seen as one group.\"<\/em><\/p>\n<p>This principle originates from Gestalt theory and suggests that if you want elements to be seen as related to each other, place them next to each other.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/closeness-law-ux-design-patterns.jpg\" alt=\"closeness law ux design pattern\" width=\"800\" height=\"599\"><\/figure>\n<h3>Law of the Inward and Outward<\/h3>\n<p><em>\"To make one element distinct from others \u2013 make it more distant.\"<\/em><\/p>\n<p>This is another aspect of the Law of Closeness. Every complex element consists of smaller objects: words are made of letters, lines are made of words, and passages are made of lines. To instill individuality into one object, you need to increase the distance between it and other objects.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/inward-outward-law-ux-design-patterns.jpg\" alt=\"inward outward law ux design pattern\" width=\"800\" height=\"493\"><\/figure>\n<h3>Miller\u2019 Law<\/h3>\n<p><em>\"A person can averagely keep attention to 7 elements at a time.\"<\/em><\/p>\n<p>In 1956, American psychologist <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/George_Armitage_Miller\">George Miller<\/a> discovered that the human brain can, on average, remember 7 (+- 2) objects. Therefore, the interface should primarily include 9 elements, or even 5, for better clarity. Long lists can bore users, even if they are helpful, so it is recommended to divide them into categories.<\/p>\n<h3>Edge Effect<\/h3>\n<p><em>\"People better remember the first and the last elements in a row.\"<\/em><\/p>\n<p>It\u2019s as simple as that.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/edge-effect-ux-design.jpg\" alt=\"edge effect ux design\" width=\"800\" height=\"507\"><\/figure>\n<h3>Restorff (Isolation) Effect<\/h3>\n<p><em>\"Among the similar objects in a row, people will notice an isolated one.\"<\/em><\/p>\n<p>In essence, the one who is not like the others will always stand out the most.<\/p>\n<p>This fact was confirmed by psychiatrist <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thebehavioursagency.com\/von-restorff-effect\/\">Von Restorff<\/a>, who suggested that in a group of similar elements, the isolated ones will be remembered. So here\u2019s a tip for designers: if you want to emphasize something, give it a different form or keep it isolated from other elements.<\/p>\n<h2>General Recommendations Based on the Patterns<\/h2>\n<p>Here is a brief summary of how to create a user-friendly UI design, based on established patterns:<\/p>\n<h3>Navigation <\/h3>\n<ul>\n<li>Avoid hiding menu sections that are essential for the user or business. <\/li>\n<li>Ensure the user always knows their current location on the website.<\/li>\n<li> Make transitions to other website sections simple and smooth. <\/li>\n<li>Carefully plan the user\u2019s flow, considering the context.<\/li>\n<\/ul>\n<h3> Forms <\/h3>\n<ul>\n<li>Apply the Cut and Postpone rule: remove all fields that are not required for the user to proceed. Collect optional information only after the goal has been achieved.<\/li>\n<li> Optimize your design for mobile versions.<\/li>\n<li> Create a clear path to completion, with a direct line from the heading to the call to action and minimal distractions. <\/li>\n<\/ul>\n<h3>General Recommendations: <\/h3>\n<ul>\n<li>Maintain a strict hierarchy on the page. <\/li>\n<li>Help users understand what they should do on the page and include a clear Call to Action. <\/li>\n<li>Focus on the essentials, keeping the \"decision tree\" in mind.<\/li>\n<li> Use only meaningful and relevant images.<\/li>\n<li> Strive for a balanced and contrasting design.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>For some designers, UX patterns may appear as rules designed to limit their creativity. However, I view these patterns as specific \"hints\" that aid in understanding how the human mind functions. Adhering to these patterns does not constrain your abilities.<\/p>\n<p>On the contrary, they are present to help you comprehend the user and create a UX design that genuinely assists them.<\/p>","protected":false},"excerpt":{"rendered":"<p>Master UX design with these 9 patterns. Understand human behavior to build high-quality, user-friendly interfaces. Start improving your UX today.<\/p>\n","protected":false},"author":633,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3395],"tags":[3903],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Improve Your UX Design with These 9 Helpful Patterns - Hongkiat<\/title>\n<meta name=\"description\" content=\"Master UX design with these 9 patterns. Understand human behavior to build high-quality, user-friendly interfaces. Start improving your UX today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improve Your UX Design with These 9 Helpful Patterns\" \/>\n<meta property=\"og:description\" content=\"Master UX design with these 9 patterns. Understand human behavior to build high-quality, user-friendly interfaces. Start improving your UX today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-15T10:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-24T08:08:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/ux-design.jpg\" \/>\n<meta name=\"author\" content=\"Mykola Melnyk\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mykola Melnyk\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/\"},\"author\":{\"name\":\"Mykola Melnyk\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a68b1bcf08a69136239a8cce3e686a40\"},\"headline\":\"Improve Your UX Design with These 9 Helpful Patterns\",\"datePublished\":\"2023-05-15T10:01:37+00:00\",\"dateModified\":\"2023-05-24T08:08:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/\"},\"wordCount\":1397,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-design-patterns\\\/ux-design.jpg\",\"keywords\":[\"ux design\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/\",\"name\":\"Improve Your UX Design with These 9 Helpful Patterns - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-design-patterns\\\/ux-design.jpg\",\"datePublished\":\"2023-05-15T10:01:37+00:00\",\"dateModified\":\"2023-05-24T08:08:15+00:00\",\"description\":\"Master UX design with these 9 patterns. Understand human behavior to build high-quality, user-friendly interfaces. Start improving your UX today.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-design-patterns\\\/ux-design.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-design-patterns\\\/ux-design.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-design-patterns\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Improve Your UX Design with These 9 Helpful Patterns\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a68b1bcf08a69136239a8cce3e686a40\",\"name\":\"Mykola Melnyk\",\"description\":\"Mykola serves as the Design Team Lead at Uptech Product Studio. With several years of experience, he specializes in creating user-oriented UX designs for startups, assisting businesses in achieving their objectives. Furthermore, Mykola makes significant contributions to the design community by sharing his expertise as a mentor in UX design workshops and courses.\",\"sameAs\":[\"https:\\\/\\\/www.uptech.team\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/mykolamelnyk\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Improve Your UX Design with These 9 Helpful Patterns - Hongkiat","description":"Master UX design with these 9 patterns. Understand human behavior to build high-quality, user-friendly interfaces. Start improving your UX today.","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:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/","og_locale":"en_US","og_type":"article","og_title":"Improve Your UX Design with These 9 Helpful Patterns","og_description":"Master UX design with these 9 patterns. Understand human behavior to build high-quality, user-friendly interfaces. Start improving your UX today.","og_url":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-05-15T10:01:37+00:00","article_modified_time":"2023-05-24T08:08:15+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/ux-design.jpg","type":"","width":"","height":""}],"author":"Mykola Melnyk","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Mykola Melnyk","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/"},"author":{"name":"Mykola Melnyk","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a68b1bcf08a69136239a8cce3e686a40"},"headline":"Improve Your UX Design with These 9 Helpful Patterns","datePublished":"2023-05-15T10:01:37+00:00","dateModified":"2023-05-24T08:08:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/"},"wordCount":1397,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/ux-design.jpg","keywords":["ux design"],"articleSection":["UI\/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/","url":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/","name":"Improve Your UX Design with These 9 Helpful Patterns - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/ux-design.jpg","datePublished":"2023-05-15T10:01:37+00:00","dateModified":"2023-05-24T08:08:15+00:00","description":"Master UX design with these 9 patterns. Understand human behavior to build high-quality, user-friendly interfaces. Start improving your UX today.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/ux-design.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-design-patterns\/ux-design.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ux-design-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Improve Your UX Design with These 9 Helpful Patterns"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a68b1bcf08a69136239a8cce3e686a40","name":"Mykola Melnyk","description":"Mykola serves as the Design Team Lead at Uptech Product Studio. With several years of experience, he specializes in creating user-oriented UX designs for startups, assisting businesses in achieving their objectives. Furthermore, Mykola makes significant contributions to the design community by sharing his expertise as a mentor in UX design workshops and courses.","sameAs":["https:\/\/www.uptech.team\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/mykolamelnyk\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-hpC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/66936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/633"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=66936"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/66936\/revisions"}],"predecessor-version":[{"id":67247,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/66936\/revisions\/67247"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=66936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=66936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=66936"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=66936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}