{"id":612,"date":"2022-09-07T10:33:30","date_gmt":"2022-09-07T03:33:30","guid":{"rendered":"https:\/\/bnsd.binus.ac.id\/graphic-design\/?p=612"},"modified":"2022-09-07T10:33:30","modified_gmt":"2022-09-07T03:33:30","slug":"how-to-use-the-best-ui-design-patterns","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2022\/09\/07\/how-to-use-the-best-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<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<p><img decoding=\"async\" src=\"https:\/\/studio.uxpincdn.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.25.43-PM.png.webp\" alt=\"Vimeo UI Design Pattern\" \/><br \/>\nTo prevent clutter, Vimeo\u2019s main navigation triggers a dropdown when you hover over each item<\/p>\n<p>As Jared Spool describes in the\u00a0<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\u00a0<a href=\"http:\/\/ui-patterns.com\/patterns\">they target core site functions<\/a>\u00a0such as:<\/p>\n<ul>\n<li><b>Input and Output<\/b>\u00a0\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>\u00a0\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>\u00a0\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>\u00a0\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\">\u00a0theorizes 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\u00a0<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 decoding=\"async\" src=\"https:\/\/studio.uxpincdn.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.29.43-PM.png.webp\" alt=\"Yelp Style Guide\" \/><\/p>\n<p><strong>2. Flow<\/strong><\/p>\n<p>As explained in the free e-book\u00a0<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\u00a0<a href=\"http:\/\/www.creativebloq.com\/ux\/ui-design-patterns-jump-section-91412831\">Jump-To<\/a>\u00a0or\u00a0<a href=\"http:\/\/www.creativebloq.com\/ux\/ui-design-pattern-tips-sticky-fixed-navigation-101413270\">Sticky Navigation<\/a>\u00a0work 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>User Problem: 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>UI Pattern Solution: Hide additional options in an expandable menu so they don\u2019t clutter the main interface.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/studio.uxpincdn.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.30.45-PM.png.webp\" alt=\"Spotify UI Design Pattern\" \/><br \/>\nSpotify\u2019s Overflow Menu<br \/>\n<img decoding=\"async\" src=\"https:\/\/studio.uxpincdn.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.31.38-PM.png.webp\" alt=\"Pinterest UI Design Pattern\" \/><br \/>\nPinterest Overflow Menu<\/p>\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\u2019s 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<p><img decoding=\"async\" src=\"https:\/\/studio.uxpincdn.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.32.42-PM.png.webp\" alt=\"Virgin Atlantic Booking Form UI Pattern\" \/><\/p>\n<p>Virgin America\u2019s Booking Form<\/p>\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\u00a0<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\/\">\u00a0elaborates 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<p><img decoding=\"async\" src=\"https:\/\/studio.uxpincdn.com\/studio\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-02-24-at-3.34.24-PM.png.webp\" alt=\"Rottentomatoes UI Design Pattern\" \/><\/p>\n<p><b>1. Define the UX pattern<\/b>\u00a0\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>\u00a0\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>\u00a0\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>\u00a0\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>\u00a0\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>source:<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/\">How to Use the Best UI Design Patterns (uxpin.com)<\/a><\/p>\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 [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":613,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/612"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=612"}],"version-history":[{"count":0,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/613"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}