{"id":23557,"date":"2021-11-10T06:11:00","date_gmt":"2021-11-10T14:11:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=23557"},"modified":"2023-03-17T08:16:32","modified_gmt":"2023-03-17T15:16:32","slug":"ux-design-patterns-focus-on","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/","title":{"rendered":"UX Design Patterns You Should Focus On"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns-1024x512.png\" alt=\"UX Design Patterns\" class=\"wp-image-32308\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>It&#8217;s a UX designer&#8217;s goal to create a seamless and positive user experience. UX design patterns are the universal building blocks design teams use to solve usability issues and create familiarity.<\/p>\n\n\n\n<p>We see many familiar design patterns in the world around us. For example, most roads separate lanes with solid or striped lines. There are also traffic lights and road signs to help you navigate roads. If every country used a different system, drivers would have to learn a new driving pattern for every country they want to drive through\u2014not practical!<\/p>\n\n\n\n<p>UX design patterns work similarly. They provide users with the familiarity to navigate a digital product or web page without learning a new system.<\/p>\n\n\n\n<p>UXPin comes with several <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">built-in design system libraries<\/a> with common UX patterns so designers can start building high-fidelity prototypes straight away! <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a 14-day free trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-ux-design-patterns\">What are UX Design Patterns?<\/h2>\n\n\n\n<p>UX design patterns are the familiar building blocks for building user interfaces. Designers use UX design patterns as reusable components to solve common usability issues.&nbsp;<\/p>\n\n\n\n<p>For example, a design pattern we see regularly is a breadcrumb. A breadcrumb shows the user which page they&#8217;re on and the path back to the home page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-ux-design-patterns-improve-the-user-experience\">How UX Design Patterns Improve the User Experience<\/h3>\n\n\n\n<p>Design patterns provide designers with building blocks to create user interfaces faster, but they also enhance the user experience.<\/p>\n\n\n\n<p>UX design patterns typically follow a universal design standard familiar to users, thus reducing the time and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-psychology-for-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">cognitive load<\/a> required to learn and navigate a new product or website.<\/p>\n\n\n\n<p>In <a href=\"https:\/\/en.wikipedia.org\/wiki\/How_We_Decide\" target=\"_blank\" rel=\"noreferrer noopener\"><em>How We Decide<\/em><\/a>, author Jonah Lehrer writes that recognizing familiar patterns releases a hit of dopamine\u2014the chemical involved in motivation, reward, memory, and attention. That dopamine hit <em>increases<\/em> when the UX pattern works as anticipated.<\/p>\n\n\n\n<p>Designers who use effective <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-psychology-for-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX design psychology<\/a> techniques, like familiar UI design patterns, can enhance the user experience and make product interactions more pleasurable.<\/p>\n\n\n\n<p>Free eBook Resource: <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/better-ux-with-ui-design-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Designing Better UX With UI Patterns<\/em><\/a>. Includes examples from Dribbble, Quora, MailChimp, Medium, and others.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-differences-between-ux-and-ui-patterns\">Differences Between UX and UI Patterns<\/h3>\n\n\n\n<p>Most designers use the terms <strong>UX patterns<\/strong> and <strong>UI patterns<\/strong> interchangeably because the distinction is minor, there&#8217;s lots of overlap, and it can get confusing!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>UX patterns:<\/strong> reusable patterns for user flows and navigation\u2014infinite or continuous scroll on a social media platform or website. The user recognizes that they can scroll down to refresh the page.<\/li>\n\n\n\n<li><strong>UI patterns:<\/strong> reusable patterns for visual and interaction design\u2014a hamburger icon. The user knows a hamburger icon will open the navigation.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-when-and-how-to-apply-ui-design-patterns\">When and How to Apply UI Design Patterns<\/h2>\n\n\n\n<p>Knowing when to use a design pattern is vital for product design and user experience. Designers must only use design patterns when there is an exact usability reason. If there is no problem with the user interface, then there&#8217;s no need for a design pattern\u2014in other words, <em>if it&#8217;s not broken, don&#8217;t fix it!<\/em><\/p>\n\n\n\n<p>Here is a four-step, problem-centered approach to identifying user needs and applying UX design patterns:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Pinpoint the problem<\/strong>\u2014You can identify problems through a mix of analytics and usability testing. For example, you notice that your product&#8217;s signup flow has a high drop-off rate when capturing customers&#8217; details. Through usability testing, you learn that a common pain point is that the signup process takes too long\u2014your signup form requests full name, email, age, gender, city, and mobile number (many of these details are irrelevant to using the product).<\/li>\n\n\n\n<li><strong>Find solutions through market and competitor research<\/strong>\u2014Look to competitors and popular design libraries to find common UI patterns to solve your problem. Returning to our example above, you find that competitors usually only ask for a user&#8217;s full name and email address during signup. They also allow users to use social media accounts to signup and log in, thus streamlining the onboarding process.<\/li>\n\n\n\n<li><strong>Customize the design pattern<\/strong>\u2014You must customize the new UX pattern to match your brand and existing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a>. For our user signup example, this customization might include adjusting the corner radius for inputs, social media buttons, and submit button. The placeholder text, input labels, and error\/success messages will use colors from your style guide.<\/li>\n\n\n\n<li><strong>Test your design pattern<\/strong>\u2014Lastly, you must always test new design pattern implementations to ensure they meet usability and brand requirements.<\/li>\n<\/ol>\n\n\n\n<p>The example above shows the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-run-an-insightful-usability-test\/\" target=\"_blank\" rel=\"noreferrer noopener\">importance of usability testing<\/a>\u2014identifying and applying user interface design patterns <strong>starts and ends with testing<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Don&#8217;t add a design pattern just because a competitor has one or you think it&#8217;s <em>the right thing to do<\/em>. For example, does your web design need a breadcrumb? For eCommerce, it might be necessary so users can return to a product category or know where they are in a checkout sequence. But, for most other websites, it&#8217;s just adding extra data points for users to process.<\/p>\n\n\n\n<p>Redundant patterns clutter user interfaces, making it harder for users to absorb the content and make decisions.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-common-examples-of-ux-design-patterns\">Common Examples of UX Design Patterns<\/h2>\n\n\n\n<p>Design patterns fall into six primary categories:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Data input and output<\/li>\n\n\n\n<li>Content structuring<\/li>\n\n\n\n<li>Navigation<\/li>\n\n\n\n<li>Social media and sharing<\/li>\n\n\n\n<li>Incentivization&nbsp;<\/li>\n\n\n\n<li>Hierarchy<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/1_3.png\" alt=\"ux design pattern\" class=\"wp-image-23559\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/1_3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/1_3-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-data-input-and-output\">Data Input and Output<\/h3>\n\n\n\n<p>Data input and output is one of the most common user\/product interactions. Users enter information, and the system returns data or completes an action.<\/p>\n\n\n\n<p>A good example is a date picker which many websites and applications use. Although they look slightly different, most date pickers display a similar layout and functionality\u2014month\/year in the header, days of the week, and dates.&nbsp;<\/p>\n\n\n\n<p>When a user clicks a date, it&#8217;s highlighted to show the selection. Lastly, there&#8217;s a CTA (and sometimes a cancel button) the user can click when they&#8217;re done and ready to proceed.<\/p>\n\n\n\n<p>Other examples of data input and output include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Form submissions<\/li>\n\n\n\n<li>Success\/fail messages<\/li>\n\n\n\n<li>App notifications<\/li>\n\n\n\n<li>Progress bars\/steps<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-structuring\">Content Structuring<\/h3>\n\n\n\n<p>Have you ever noticed that most galleries use a similar block layout with image thumbnails? Or, how admin interfaces feature a navigation panel to the left and content to the right?<\/p>\n\n\n\n<p>Using these familiar content structures and UI patterns can help users navigate a new digital product or website quickly. The goal is to minimize friction (such as learning a new interface) for a seamless and enjoyable user experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/3_3.png\" alt=\"ux design pattern for content the rule of 3\" class=\"wp-image-23560\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/3_3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/3_3-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-navigation\">Navigation<\/h3>\n\n\n\n<p>Familiar UI patterns can help users navigate a website or digital product with ease. There are different navigation patterns for desktop and mobile interfaces.<\/p>\n\n\n\n<p>For example, the primary navigation is in the header or to the left in a desktop website or application. While in a mobile app, the primary navigation bar is in the footer, where it&#8217;s only a thumb reach away.<\/p>\n\n\n\n<p>An infinite or continuous scroll is a typical navigation design pattern used by Instagram and Pinterest. As users scroll, the system refreshes to show more content. This design pattern is familiar and enhances the user experience because users don&#8217;t need to click a next button or pagination to see more content.<\/p>\n\n\n\n<p><br>Extra resource: <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/4-types-creative-website-scrolling-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The 4 Types of Creative Scrolling Patterns<\/em><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/4_3.png\" alt=\"ux pattern for navigation\" class=\"wp-image-23563\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/4_3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/4_3-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-social-media-sharing\">Social Media &amp; Sharing<\/h3>\n\n\n\n<p>There are several social media and sharing design patterns available to designers, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Branded social media icons for links<\/li>\n\n\n\n<li>Sharing icons\u2014either the arrow curving to the right or share icon with an open triangle and three dots<\/li>\n\n\n\n<li>Testimonials\u2014quote in inverted commas with the person&#8217;s name and image<\/li>\n<\/ul>\n\n\n\n<p>These familiar design patterns help users find social proof to build trust in your product and brand.<\/p>\n\n\n\n<p>These design patterns leverage psychology, encouraging users to perform desired actions. The goal here is to create a bond between the user and a product. This can be achieved through the use of hooks. Read more about hooks in this article, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/6-persuasive-ui-design-patterns-to-hook-users\/\" target=\"_blank\" rel=\"noreferrer noopener\">6 Persuasive UI Design Patterns to Hooks Users<\/a>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/5_3.png\" alt=\"ux pattern for social media sharing\" class=\"wp-image-23562\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/5_3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/5_3-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-incentivization\">Incentivization<\/h3>\n\n\n\n<p>Incentivization UX patterns leverage design psychology to encourage users to perform tasks and actions, thus creating a user\/product relationship.<\/p>\n\n\n\n<p>Designers incentivize using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/6-persuasive-ui-design-patterns-to-hook-users\/\" target=\"_blank\" rel=\"noreferrer noopener\">design patterns to hook users<\/a> through positive feedback, cognition, gamification, and more.<\/p>\n\n\n\n<p>For example, gamified patterns encourage users to invite friends to earn rewards. A UI pattern will show users their current points with a CTA to invite more friends to earn more.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/6v.png\" alt=\"ux pattern that persuades users to do the task\" class=\"wp-image-23561\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/6v.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/6v-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hierarchy\">Hierarchy<\/h3>\n\n\n\n<p>Hierarchy patterns are similar to content structure in that they create instant visual familiarity for users to quickly scan an interface and know how to complete the desired action.<\/p>\n\n\n\n<p>Two common hierarchy patterns for a blog include headers and a table of contents. Users can scroll through a page to quickly find what they want or use the table of contents to jump to a specific section.<\/p>\n\n\n\n<p>A breadcrumb is another hierarchy pattern eCommerce websites use to help users navigate product pages and checkout flows.<\/p>\n\n\n\n<p>Extra resource: <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/mobile-design-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The Essential Guide to Mobile Design Patterns<\/em><\/a>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prototyping-and-testing-design-patterns\">Prototyping and Testing Design Patterns<\/h2>\n\n\n\n<p>Prototyping and testing design patterns are critical to identifying usability problems and discovering effective pattern designs to solve them.<\/p>\n\n\n\n<p>The problem is vector-based design tools don&#8217;t provide a way to design common design patterns like signup forms or date pickers. Meaning you can&#8217;t test these with usability participants!<\/p>\n\n\n\n<p>UXPin is a code-based tool that allows you to <a href=\"https:\/\/www.uxpin.com\/studio\/prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">build prototypes<\/a> that look and function like the final product. Now you can test fully functioning design patterns to see if they&#8217;re the right fit for your digital product or website.<\/p>\n\n\n\n<p>UXPin features <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\">advanced interactions<\/a> with Javascript-like functionality. Designers can enhance prototype fidelity with states, conditional formatting, variables, data capture and validation, functions, and more.<\/p>\n\n\n\n<p>With these advanced interactions, you can create a fully functioning signup form. The form will capture a user&#8217;s personal information and save that data to validate them when they log in\u2014exactly like a coded application.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-try-uxpin\">Try UXPin<\/h2>\n\n\n\n<p>UX design patterns are an essential part of the user experience because they minimize a product&#8217;s learning curve and human cognitive load. Designers must know <strong><em>when<\/em><\/strong> to use these UX design patterns and <strong>not<\/strong> just implement them out of habit or copy competitors.<\/p>\n\n\n\n<p>Analytics and usability studies help designers identify which UX patterns are missing from an interface and then test whether they have implemented the correct one.<\/p>\n\n\n\n<p><br><em>Can your design tool test fully functioning UX design patterns?<\/em> Why not try UXPin to experience what it&#8217;s like to create advanced interactions to enhance your prototype fidelity and testing. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> and start designing with the world&#8217;s most advanced code-based design tool!<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s a UX designer&#8217;s goal to create a seamless and positive user experience. UX design patterns are the universal building blocks design teams use to solve usability issues and create familiarity. We see many familiar design patterns in the world around us. For example, most roads separate lanes with solid or striped lines. There are<\/p>\n","protected":false},"author":156,"featured_media":32308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6],"tags":[],"class_list":["post-23557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-ux-design"],"yoast_title":"%%title%% %%page%% %%sitename%%","yoast_metadesc":"Aiming to provide the best possible user experience? UX design patterns allow you to build interfaces and solve the most common issues.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>UX Design Patterns You Should Focus On Studio by UXPin<\/title>\n<meta name=\"description\" content=\"Aiming to provide the best possible user experience? UX design patterns allow you to build interfaces and solve the most common issues.\" \/>\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.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Design Patterns You Should Focus On\" \/>\n<meta property=\"og:description\" content=\"Aiming to provide the best possible user experience? UX design patterns allow you to build interfaces and solve the most common issues.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-10T14:11:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-17T15:16:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"headline\":\"UX Design Patterns You Should Focus On\",\"datePublished\":\"2021-11-10T14:11:00+00:00\",\"dateModified\":\"2023-03-17T15:16:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/\"},\"wordCount\":1744,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/UX-Design-Patterns.png\",\"articleSection\":[\"Blog\",\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/\",\"name\":\"UX Design Patterns You Should Focus On Studio by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/UX-Design-Patterns.png\",\"datePublished\":\"2021-11-10T14:11:00+00:00\",\"dateModified\":\"2023-03-17T15:16:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"description\":\"Aiming to provide the best possible user experience? UX design patterns allow you to build interfaces and solve the most common issues.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/UX-Design-Patterns.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/UX-Design-Patterns.png\",\"width\":1200,\"height\":600,\"caption\":\"UX Design Patterns\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-design-patterns-focus-on\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Design Patterns You Should Focus On\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\",\"name\":\"UXPin\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zbigniew-trzeciakuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UX Design Patterns You Should Focus On Studio by UXPin","description":"Aiming to provide the best possible user experience? UX design patterns allow you to build interfaces and solve the most common issues.","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.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/","og_locale":"en_US","og_type":"article","og_title":"UX Design Patterns You Should Focus On","og_description":"Aiming to provide the best possible user experience? UX design patterns allow you to build interfaces and solve the most common issues.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/","og_site_name":"Studio by UXPin","article_published_time":"2021-11-10T14:11:00+00:00","article_modified_time":"2023-03-17T15:16:32+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"headline":"UX Design Patterns You Should Focus On","datePublished":"2021-11-10T14:11:00+00:00","dateModified":"2023-03-17T15:16:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/"},"wordCount":1744,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns.png","articleSection":["Blog","UI Design","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/","name":"UX Design Patterns You Should Focus On Studio by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns.png","datePublished":"2021-11-10T14:11:00+00:00","dateModified":"2023-03-17T15:16:32+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"description":"Aiming to provide the best possible user experience? UX design patterns allow you to build interfaces and solve the most common issues.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/UX-Design-Patterns.png","width":1200,"height":600,"caption":"UX Design Patterns"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"UX Design Patterns You Should Focus On"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a","name":"UXPin","url":"https:\/\/www.uxpin.com\/studio\/author\/zbigniew-trzeciakuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=23557"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23557\/revisions"}],"predecessor-version":[{"id":43801,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23557\/revisions\/43801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/32308"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=23557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=23557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=23557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}