{"id":6264,"date":"2015-02-24T16:55:08","date_gmt":"2015-02-25T00:55:08","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6264"},"modified":"2024-05-20T21:49:52","modified_gmt":"2024-05-21T04:49:52","slug":"use-right-ui-design-patterns","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/","title":{"rendered":"How to Use the Best UI Design Patterns"},"content":{"rendered":"<p>For many, UI design patterns can be difficult to implement correctly since the concept is so simple: collections of patterns that are aesthetically pleasing and functional. But if you treat them as just patterns, your sites can start to feel cookie cutter.<\/p>\n<p>We\u2019ll explain the\u00a0different classifications of UI patterns and describe how to choose the right ones based on your needs. Read on to learn more.<\/p>\n<p><!--more--><\/p>\n<h2>The 4 Main Types of UI Design Patterns<\/h2>\n<p>Patterns are not website features that can just be cut and pasted into your design. A more accurate definition would be visual strategies for solving common usability problems. Furthermore, patterns are not pieces you stitch together to create an interface; instead, they are closer to foundational pieces on which you can build your customized site. UI design patterns aren\u2019t templates, so they shouldn\u2019t be treated as such (unless you want a sterile feel to your website).<\/p>\n<figure id=\"attachment_6265\" aria-describedby=\"caption-attachment-6265\" style=\"width: 625px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6265 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.25.43-PM.png\" alt=\"Vimeo UI Design Pattern\" width=\"625\" height=\"126\" \/><figcaption id=\"caption-attachment-6265\" class=\"wp-caption-text\">To prevent clutter, Vimeo&#8217;s main navigation triggers a dropdown when you hover over each item.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>As Jared Spool describes in the <a href=\"http:\/\/www.uie.com\/handouts\/UIE_AnatomyOfADesignDecision_R2.pdf\">Anatomy of a Design Decision<\/a>, UX\u00a0patterns are only helpful when they are used based on specific design cases. Typically <a href=\"http:\/\/ui-patterns.com\/patterns\">they target core site functions<\/a> such as:<\/p>\n<ul>\n<li><b>Input and Output<\/b> \u2014 These patterns deal with how the user interacts, or submits input, to the site, and likewise of how the site responds, or submits feedback.<\/li>\n<\/ul>\n<ul>\n<li><b>Navigation<\/b> \u2014 These help guide the user around the site, ensuring they are properly oriented and know how to find their way if lost.<\/li>\n<\/ul>\n<ul>\n<li><b>Content Structuring<\/b> \u2014 Is your content accessible and easy to access? These patterns help you organize your content so that your user can fully enjoy your site.<\/li>\n<\/ul>\n<ul>\n<li><b>Social Sharing<\/b> \u2014 These are the patterns that allow, promote, and facilitate the sharing of your site on any social media venue you prefer.<\/li>\n<\/ul>\n<h2><strong>The 3 Levels of UI Design Patterns<\/strong><\/h2>\n<p>Patterns can further be classified by the way in which they help a site, as seen in the above pyramid. Anders Toxboe, designer at Benjamin Interactive in Copenhagen,<a href=\"http:\/\/ui-patterns.com\/blog\/The-three-levels-of-design-patterns-implementation-flow-and-context\"> theorizes that patterns can aid a site in three ways<\/a>: implementation, flow, and context.<\/p>\n<p><b>1. Implementation<\/b><\/p>\n<p>At the bottom of the pyramid are the elemental components of patterns, categorized as implementation.<\/p>\n<p>As you can see in the below example from the <a href=\"http:\/\/www.yelp.com\/styleguide\">Yelp Style Guide<\/a>, these are the most direct and strict patterns, and the rules tend to be black-and-white: a search box should be in the upper right-hand corner, form labels should be directly under the field box, etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6266\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.29.43-PM.png\" alt=\"Yelp Style Guide\" width=\"618\" height=\"402\" \/><\/p>\n<p><strong>2. Flow<\/strong><\/p>\n<p>As explained in the free e-book <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web UI Best Practices<\/a>, a step above implementation patterns are patterns that assist the flow of the user experience. At this level, patterns become more advanced, and are concerned with how they help the user move through the site to achieve their goals. Would a <a href=\"http:\/\/www.creativebloq.com\/ux\/ui-design-patterns-jump-section-91412831\">Jump-To<\/a> or <a href=\"http:\/\/www.creativebloq.com\/ux\/ui-design-pattern-tips-sticky-fixed-navigation-101413270\">Sticky Navigation<\/a> work better to help users access additional content? Given your target user and site genre, what\u2019s the best way to receive input? In essence, these patterns are more flexible and customize your site to your specific needs.<\/p>\n<p>Let\u2019s take a look at examples below from Spotify and Pinterest.<\/p>\n<p><span style=\"text-decoration: underline;\">User Problem<\/span>: I want quick access to additional options or actions on the site, but I don\u2019t want to feel paralyzed by too many choices.<\/p>\n<p><span style=\"text-decoration: underline;\">UI Pattern Solution<\/span>: Hide additional options in an expandable menu so they don\u2019t clutter the main interface.<\/p>\n<figure id=\"attachment_6267\" aria-describedby=\"caption-attachment-6267\" style=\"width: 625px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6267 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.30.45-PM.png\" alt=\"Spotify UI Design Pattern\" width=\"625\" height=\"574\" \/><figcaption id=\"caption-attachment-6267\" class=\"wp-caption-text\">Spotify&#8217;s Overflow Menu<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_6268\" aria-describedby=\"caption-attachment-6268\" style=\"width: 631px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6268 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.31.38-PM.png\" alt=\"Pinterest UI Design Pattern\" width=\"631\" height=\"366\" \/><figcaption id=\"caption-attachment-6268\" class=\"wp-caption-text\">Pinterest Overflow Menu<\/figcaption><\/figure>\n<h2><\/h2>\n<p><b>3. Context<\/b><\/p>\n<p>Patterns of context are specific to the type or genre of site you choose.<\/p>\n<p>For instance, let\u2019s say you\u2019re building a site for a professional entertainer: you\u2019ll need to include patterns like an event calendar, biography, and portfolio. If you\u2019re making a e-commerce site, you won\u2019t need an event calendar, but you won\u2019t get very far without a checkout system.<\/p>\n<p>Now let&#8217;s look at a real example.\u00a0<b>Virgin America<\/b>\u00a0requires a UI pattern for its booking form (an advanced user input pattern) because it\u2019s in the airline business. Obviously, something this complex isn\u2019t needed for a social site like Pinterest or Twitter.<\/p>\n<figure id=\"attachment_6269\" aria-describedby=\"caption-attachment-6269\" style=\"width: 625px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6269 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.32.42-PM.png\" alt=\"Virgin Atlantic Booking Form UI Pattern\" width=\"625\" height=\"401\" \/><figcaption id=\"caption-attachment-6269\" class=\"wp-caption-text\">Virgin America&#8217;s Booking Form<\/figcaption><\/figure>\n<h2>4 Steps to Using the Right UI Design Patterns<\/h2>\n<p>Before you lay out the fine details of your web interface \u2014 how users input data, how the site provides feedback, etc. \u2014 first you need to <a href=\"http:\/\/www.awwwards.com\/understanding-web-ui-visual-hierarchy.html\">determine the visual hierarchy of your site<\/a>.<\/p>\n<p>Knowing the look and feel of your site will help you realize which patterns will work for you. Once that\u2019s established, you can start the process of selecting UI patterns.<\/p>\n<p>The selection process can be simplified to four basic steps:<\/p>\n<ol>\n<li>Determine the problems that need to be solved.<\/li>\n<li>Explore how others have solved the same problem.<\/li>\n<li>Examine the solution\u2019s use on other sites.<\/li>\n<li>Detail the patterns proper usage so you can recreate it.<\/li>\n<\/ol>\n<p>The above process is focused on finding patterns, but how do you decide what patterns are right for you? Melissa Joy Kung, Editor-in-Chief of Technori,<a href=\"http:\/\/technori.com\/2013\/02\/3346-building-a-website-make-sure-you-choose-design-patterns-and-build-wireframes-first\/\"> elaborates on the process in her post about the topic<\/a>. She illustrates her points through the example of a \u201cratings\u201d style pattern used by Rotten Tomatoes:<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6270\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.34.24-PM.png\" alt=\"Rottentomatoes UI Design Pattern\" width=\"616\" height=\"402\" \/><\/h2>\n<p><b>1. Define the UX pattern<\/b> \u2014 First and foremost, you should understand what the pattern does. The main functions of the ratings pattern are to give users quick feedback, allow the user\u2019s voice to be heard, and collect qualitative and quantitative user data.<\/p>\n<p><b>2. Find the pattern used well<\/b> \u2014 Search the web until you find a site that uses the pattern particularly well, in this case, Rotten Tomatoes. This can be used as a reference guide later.<\/p>\n<p><b>3. List the problems the pattern solves<\/b> \u2014 Similar to defining the main functions of a pattern, it\u2019s important to know which problems they target. The ratings pattern satisfies feedback, improves interactivity, and it gives the users\u2019 opinions more weight, which they appreciate.<\/p>\n<p><b>4. Know when to use the pattern<\/b> \u2014 This goes back to our earlier discussion of UI patterns for context. A ratings pattern is used when your product requires additional feedback, or when you want to expand on existing feedback like a written review \u2014 but it wouldn\u2019t make sense on a journalistic blog.<\/p>\n<p><b>5. Know how to use the pattern<\/b> \u2014 In this stage, you get into the technical details of a site. The ratings pattern utilizes an aggregated average of the user ratings, an option to change the rating later, a display that lights up when you hover on it, a cue to let the user know their rating is accepted, etc.<\/p>\n<p>If you\u2019d like to learn more, check out our free <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web UI Patterns 2014 e-book<\/a> which breaks down and explains 63 UI patterns in depth.<\/p>\n<\/section><section class=\"related-books-section\"><h3>Grab design ebooks created by best designers<\/h3><p class=\"section-desc\">All for free<\/p><ul class=\"related-books-list\"><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/free-ui-ux-design-trends-2015-2016-ebook-bundle\/\" class=\"action-get-ebook\" data-name=\"The Definitive 2016 UX Design Trends Bundle\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/the-book_bundle1.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book bundle1\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/the-book_bundle1.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/the-book_bundle1-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/free-ui-ux-design-trends-2015-2016-ebook-bundle\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Definitive 2016 UX Design Trends Bundle\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"action-get-ebook\" data-name=\"Web UI Design Best Practices\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web UI Design Best Practices\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices-210x300.jpg 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Web UI Design Best Practices\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-content-typography\/\" class=\"action-get-ebook\" data-name=\"Web UI Design for the Human Eye\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye-Content-Patterns-Typography-.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web UI Design for the Human Eye Content Patterns Typography\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye-Content-Patterns-Typography-.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye-Content-Patterns-Typography--210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-content-typography\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Web UI Design for the Human Eye\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ultimate-web-ui-design-pattern-workbook\/\" class=\"action-get-ebook\" data-name=\"Tactical UI Design Patterns\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book4.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book4\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book4.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book4-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ultimate-web-ui-design-pattern-workbook\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Tactical UI Design Patterns\">Download<\/a><\/li><\/ul><\/section><section class=\"related-books-section-single\"><section class=\"post-content-wrapper\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book4.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book4\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book4.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book4-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><article><h3>Do you want to know more about UI Design?<\/h3><p>Download 'Tactical UI Design Patterns' <span>FOR FREE!<\/span><\/p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ultimate-web-ui-design-pattern-workbook\/\" class=\"btn btn-flat btn-darker action-get-ebook\">Download e-book for free<\/a><\/article><\/section><a href=\"#closeEbookPanel\" class=\"icon-close action-close-ebook-panel\">Close<\/a><\/section><section class=\"post-content-wrapper\">\n<h2>UI Design Pattern Libraries &amp; Resources<\/h2>\n<p>Unless you\u2019re a hardened UI designer with years of experience, it\u2019s hard to keep track of all the UX patterns at your disposal.<\/p>\n<p>Below are several resources that collect and compile all the latest and most useful patterns. These can help you stay up-to-date, which we all know is very important in a fast-moving field like web design.<\/p>\n<p><b>1. <\/b><a href=\"http:\/\/ui-patterns.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>UI Patterns<\/b><\/a><\/p>\n<p>A web pattern library that has an organization system for easy browsing. Fun fact: it was just recently redesigned and restructured.<\/p>\n<p><a href=\"http:\/\/www.ui-patterns.com\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6271\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.36.47-PM.png\" alt=\"UI Design Pattern Library\" width=\"626\" height=\"450\" \/><\/a><\/p>\n<p><b>2. <\/b><a href=\"http:\/\/patterntap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Pattern Tap<\/b><\/a><\/p>\n<p>This designer community posts and updates lots of helpful resources for web design education (since it&#8217;s part of <a href=\"http:\/\/zurb.com\/university\">ZURB University<\/a>).<\/p>\n<p><a href=\"http:\/\/patterntap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6272 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.37.30-PM.png\" alt=\"PatternTap UI Design Pattern Library\" width=\"626\" height=\"366\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><b>3. <\/b><a target=\"_blank\" rel=\"noopener noreferrer\"><b>UXPatterns<\/b><\/a><\/p>\n<p>See low-fi to hi-fi transformations of designs from top companies like Lyft, Uber, Pinterest, and others. Click on the\u00a0patterns\u00a0to use them for free in <a href=\"https:\/\/www.uxpin.com\" target=\"_blank\" rel=\"noopener noreferrer\">UXPin<\/a>.<\/p>\n<p><b>4. <\/b><a href=\"http:\/\/useyourinterface.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>UseYourInterface<\/b><\/a><\/p>\n<p>A fantastic infinitely-scrolling library of GIFs that show the interactive power of UI patterns.<\/p>\n<p><a href=\"http:\/\/useyourinterface.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6273\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.40.19-PM.png\" alt=\"UI Design Pattern Library\" width=\"624\" height=\"402\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>5. Capptivate <\/strong><\/p>\n<p>An exhaustively thorough collection of mobile UI patterns. Almost all of them are animated, so you can see how to layer interactions on top of popular patterns.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-6275\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.50.01-PM-1024x894.png\" alt=\"Mobile UI Design Pattern Library\" width=\"640\" height=\"558\" \/><\/p>\n<h2><b>Additional Resources<\/b><\/h2>\n<p>For even more detailed listings on UX patterns, Smashing Magazine posted a <a href=\"http:\/\/www.smashingmagazine.com\/2009\/06\/15\/40-helpful-resources-on-user-interface-design-patterns\/\">list of over 40 online pattern libraries<\/a>.<\/p>\n<p>If want to bring UI patterns to life, give UXPin a try with <a href=\"https:\/\/www.uxpin.com\/\">our free trial<\/a> and explore our more than 900 UI templates and patterns.<\/p>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>For many, UI design patterns can be difficult to implement correctly since the concept is so simple: collections of patterns that are aesthetically pleasing and functional. But if you treat them as just patterns, your sites can start to feel cookie cutter. We\u2019ll explain the\u00a0different classifications of UI patterns and describe how to choose the<\/p>\n","protected":false},"author":9,"featured_media":6280,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,8,4,6,7],"tags":[],"class_list":["post-6264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-prototyping","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"How to Use the Best UI Design Patterns | UXPin","yoast_metadesc":"Learn about the different types of UI patterns, and how to choose the best one for your design.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use the Best UI Design Patterns | UXPin<\/title>\n<meta name=\"description\" content=\"Learn about the different types of UI patterns, and how to choose the best one for your design.\" \/>\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\/use-right-ui-design-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Best UI Design Patterns\" \/>\n<meta property=\"og:description\" content=\"Learn about the different types of UI patterns, and how to choose the best one for your design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-25T00:55:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-21T04:49:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-4.10.47-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1614\" \/>\n\t<meta property=\"og:image:height\" content=\"898\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\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\\\/use-right-ui-design-patterns\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"How to Use the Best UI Design Patterns\",\"datePublished\":\"2015-02-25T00:55:08+00:00\",\"dateModified\":\"2024-05-21T04:49:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/\"},\"wordCount\":1376,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/02\\\/Screen-Shot-2015-02-24-at-4.10.47-PM.png\",\"articleSection\":[\"Blog\",\"Prototyping\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/\",\"name\":\"How to Use the Best UI Design Patterns | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/02\\\/Screen-Shot-2015-02-24-at-4.10.47-PM.png\",\"datePublished\":\"2015-02-25T00:55:08+00:00\",\"dateModified\":\"2024-05-21T04:49:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Learn about the different types of UI patterns, and how to choose the best one for your design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/02\\\/Screen-Shot-2015-02-24-at-4.10.47-PM.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/02\\\/Screen-Shot-2015-02-24-at-4.10.47-PM.png\",\"width\":1614,\"height\":898,\"caption\":\"Screen Shot 2015 02 24 at 4.10.47 PM\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-right-ui-design-patterns\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use the Best UI Design Patterns\"}]},{\"@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\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use the Best UI Design Patterns | UXPin","description":"Learn about the different types of UI patterns, and how to choose the best one for your design.","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\/use-right-ui-design-patterns\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Best UI Design Patterns","og_description":"Learn about the different types of UI patterns, and how to choose the best one for your design.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/","og_site_name":"Studio by UXPin","article_published_time":"2015-02-25T00:55:08+00:00","article_modified_time":"2024-05-21T04:49:52+00:00","og_image":[{"width":1614,"height":898,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-4.10.47-PM.png","type":"image\/png"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"How to Use the Best UI Design Patterns","datePublished":"2015-02-25T00:55:08+00:00","dateModified":"2024-05-21T04:49:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/"},"wordCount":1376,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-4.10.47-PM.png","articleSection":["Blog","Prototyping","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/","name":"How to Use the Best UI Design Patterns | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-4.10.47-PM.png","datePublished":"2015-02-25T00:55:08+00:00","dateModified":"2024-05-21T04:49:52+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Learn about the different types of UI patterns, and how to choose the best one for your design.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-4.10.47-PM.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-4.10.47-PM.png","width":1614,"height":898,"caption":"Screen Shot 2015 02 24 at 4.10.47 PM"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Use the Best UI Design Patterns"}]},{"@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\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6264","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=6264"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6264\/revisions"}],"predecessor-version":[{"id":53113,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6264\/revisions\/53113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/6280"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=6264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=6264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=6264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}