{"id":197,"date":"2020-09-02T05:56:31","date_gmt":"2020-09-02T05:56:31","guid":{"rendered":"https:\/\/www.sagaratechnology.com\/blog\/?p=197"},"modified":"2023-04-17T03:38:30","modified_gmt":"2023-04-17T03:38:30","slug":"the-golden-rules-of-user-interface-design","status":"publish","type":"post","link":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/","title":{"rendered":"The Golden Rules of User Interface Design"},"content":{"rendered":"\n<p><strong><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/X16UG73TnyqA8QHAJAzMmGb0Zz1iGNVnR4qR9Vgylj0O-mzgFmN_4Gl0MFKAh-EMP3f_bVf5oD-bS358xC2DMwEFGqIkstWO8zGMTF1cpu01UUKn-NM24yGAWZs3MjobxfLmR7WMsD3VJZkeQKOx5DM\" width=\"624\" height=\"416\"><\/strong><\/p>\n\n\n\n<p id=\"04d0\">The user interface (UI) is a critical part of any software product. When it\u2019s done well, users don\u2019t even notice it. When it\u2019s done poorly, users can\u2019t get past it to efficiently use a product. To increase the chances of success when creating user interfaces, most designers follow interface design principles. Interface design principles represent high-level concepts that are used to guide software design. In this article, I\u2019ll share a few fundamental principles.<\/p>\n\n\n\n<p id=\"28d0\">8 Golden Rules of User Interface Design is a \u201c<strong>rule<\/strong>\u201d that needs to be considered in making interface design. This Golden Rule was proposed by Ben Schneiderman on August 21, 1947, in his book entitled Designing the User Interface: Strategies for Effective Human-Computer Interaction.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e2cb8e14a52\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e2cb8e14a52\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#1_Strive_for_consistency_in_User_Interface_Design\" >1. Strive for consistency in User Interface Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#2_Enable_Frequent_Users_to_Use_Shortcuts\" >2. Enable Frequent Users to Use Shortcuts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#3_Offer_informative_feedback\" >3. Offer informative feedback<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#4_Design_dialogs_to_yield_closure\" >4. Design dialogs to yield closure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#5_Offer_Simple_Error_Handling\" >5. Offer Simple Error Handling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#6_Permit_easy_reversal_of_actions\" >6. Permit easy reversal of actions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#7_Keep_users_in_control\" >7. Keep users in control<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#8_Reduce_short-term_memory_load\" >8. Reduce short-term memory load<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"bf1a\"><span class=\"ez-toc-section\" id=\"1_Strive_for_consistency_in_User_Interface_Design\"><\/span><strong>1. Strive for consistency<\/strong> <strong>in User Interface Design<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"1ae9\">Designing \u201c<strong>consistent interfaces<\/strong>\u201d means using the same design patterns and sequences of actions for similar situations. This includes but isn\u2019t limited to, the proper use of color, typography, and terminology in prompt screens, commands, and menus throughout your user journey.<\/p>\n\n\n\n<p id=\"ac3d\">Remember: a consistent interface will allow your users to complete their tasks and goals much more easily.<\/p>\n\n\n\n<h2 id=\"2336\"><span class=\"ez-toc-section\" id=\"2_Enable_Frequent_Users_to_Use_Shortcuts\"><\/span><strong>2. Enable Frequent Users to Use Shortcuts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"069c\">Speaking of using UI rules as shortcuts, your users will benefit from shortcuts as well, especially if they need to complete the same tasks often.<\/p>\n\n\n\n<p id=\"519e\">Expert users might find the following features helpful:<\/p>\n\n\n\n<ul>\n<li>Abbreviations<\/li>\n\n\n\n<li>Function keys<\/li>\n\n\n\n<li>Hidden commands<\/li>\n\n\n\n<li>Macro facilities<\/li>\n<\/ul>\n\n\n\n<p>Read more:&nbsp;<a href=\"https:\/\/www.sagaratechnology.com\/blog\/the-fundamentals-of-ux-and-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Fundamentals of UX and UI Design<\/a><\/p>\n\n\n\n<h2 id=\"8125\"><span class=\"ez-toc-section\" id=\"3_Offer_informative_feedback\"><\/span><strong>3. Offer informative feedback<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"a407\">For every user action, there should be interface feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial. Visual presentation of the objects of interest provides a convenient environment for showing changes explicitly.<\/p>\n\n\n\n<h2 id=\"ebcf\"><span class=\"ez-toc-section\" id=\"4_Design_dialogs_to_yield_closure\"><\/span><strong>4. Design dialogs to yield closure<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"fc43\">Sequences of actions should be organized into groups with a beginning, middle, and end. Informative feedback at the completion of a group of actions gives users the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans from their minds, and an indicator to prepare for the next group of actions. For example, e-commerce websites move users from selecting products to the checkout, ending with a clear confirmation page that completes the transaction.<\/p>\n\n\n\n<h2 id=\"e8fc\"><span class=\"ez-toc-section\" id=\"5_Offer_Simple_Error_Handling\"><\/span><strong>5. Offer Simple Error Handling<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"abd7\">A good interface should be designed to avoid errors as much as possible. But when errors do happen, your system needs to make it easy for the user to understand the issue and know how to solve it. Simple ways to handle errors include displaying clear error notifications along with descriptive hints to solve the problem.<\/p>\n\n\n\n<p id=\"6174\">As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer a simple, comprehensive mechanism for handling the error.<\/p>\n\n\n\n<p id=\"d960\"><strong>Error Prevention:<\/strong><\/p>\n\n\n\n<ul>\n<li>Error prevention over error correction<\/li>\n\n\n\n<li>Automatic detection of errors<\/li>\n\n\n\n<li>Clear error notifications<\/li>\n\n\n\n<li>Hints for solving the problem<\/li>\n<\/ul>\n\n\n\n<h2 id=\"f2ec\"><span class=\"ez-toc-section\" id=\"6_Permit_easy_reversal_of_actions\"><\/span><strong>6. Permit easy reversal of actions<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"41cc\">This feature relieves anxiety since users know that errors can be undone, and encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data-entry task, or a complete group of actions, such as the entry of a name-address block.<\/p>\n\n\n\n<h2 id=\"b99c\"><span class=\"ez-toc-section\" id=\"7_Keep_users_in_control\"><\/span><strong>7. Keep users in control<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"49c9\">Experienced users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions. They don\u2019t want surprises or changes in familiar behavior, and they are annoyed by tedious data-entry sequences, difficulty in obtaining necessary information, and inability to produce their desired result.<\/p>\n\n\n\n<p>Read more:&nbsp;<a href=\"https:\/\/www.sagaratechnology.com\/blog\/top-references-for-user-interface-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Top References for User Interface Design<\/a><\/p>\n\n\n\n<h2 id=\"aba7\"><span class=\"ez-toc-section\" id=\"8_Reduce_short-term_memory_load\"><\/span><strong>8. Reduce short-term memory load<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"9ff1\">Humans\u2019 limited capacity for information processing in short-term memory (the rule of thumb is that people can remember \u201cseven plus or minus two chunks\u201d of information) requires that designers avoid interfaces in which users must remember information from one display and then use that information on another display. It means that cellphones should not require reentry of phone numbers, website locations should remain visible, and lengthy forms should be compacted to fit a single display.<\/p>\n\n\n\n<p id=\"5cd0\">These underlying principles must be interpreted, refined, and extended for each environment. They have their limitations, but they provide a good starting point for mobile, desktop, and web designers. The principles presented in the ensuing sections focus on increasing users\u2019 productivity by providing simplified data-entry procedures, comprehensible displays, and rapid informative feedback to increase feelings of competence, mastery, and control over the system.<\/p>\n\n\n\n<p id=\"cd5d\">The goal for UI designers is to produce user-friendly interfaces: interfaces that encourage exploration without fear of negative consequences. Without any doubt interfaces of the future will be more intuitive, enticing, predictable, and forgiving, but most principles of UI design listed in this article will surely be applicable. 8 These Golden Rules from Schneider ensure a good design but can ease the burden experienced by users in using applications that we make.<\/p>\n\n\n\n<p id=\"39c4\"><a rel=\"noreferrer noopener\" href=\"https:\/\/www.sagaratechnology.com\/en\" target=\"_blank\">Sagara Technology<\/a>&nbsp;can help you develop beautiful and functional interfaces for Website and Mobile Applications. At&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.sagaratechnology.com\/en\" target=\"_blank\">Sagara Technology<\/a>&nbsp;we develop attractive, engaging, usable interface design that focuses on solving usability problems and producing outstanding results.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The user interface (UI) is a critical part of any software product. When it\u2019s done well, users don\u2019t even notice it. When it\u2019s done poorly, users can\u2019t get past it to efficiently use a product. To increase the chances of success when creating user interfaces, most designers follow interface design principles. Interface design principles represent&#8230;<\/p>\n","protected":false},"author":14,"featured_media":198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[82,31,29,81,24],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Golden Rules of User Interface Design - Sagara Asia Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"The Golden Rules of User Interface Design - Sagara Asia Blog\" \/>\n<meta name=\"twitter:description\" content=\"The user interface (UI) is a critical part of any software product. When it\u2019s done well, users don\u2019t even notice it. When it\u2019s done poorly, users can\u2019t get past it to efficiently use a product. To increase the chances of success when creating user interfaces, most designers follow interface design principles. Interface design principles represent...\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/1_un7XoeErnncyFpPM-KtH8w.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sagara Technology\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Golden Rules of User Interface Design - Sagara Asia Blog","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:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/","twitter_card":"summary_large_image","twitter_title":"The Golden Rules of User Interface Design - Sagara Asia Blog","twitter_description":"The user interface (UI) is a critical part of any software product. When it\u2019s done well, users don\u2019t even notice it. When it\u2019s done poorly, users can\u2019t get past it to efficiently use a product. To increase the chances of success when creating user interfaces, most designers follow interface design principles. Interface design principles represent...","twitter_image":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/1_un7XoeErnncyFpPM-KtH8w.gif","twitter_misc":{"Written by":"Sagara Technology","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#article","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/"},"author":{"name":"Sagara Technology","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/e25a7dce1900980898a69a7c63241723"},"headline":"The Golden Rules of User Interface Design","datePublished":"2020-09-02T05:56:31+00:00","dateModified":"2023-04-17T03:38:30+00:00","mainEntityOfPage":{"@id":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/"},"wordCount":860,"commentCount":0,"publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"keywords":["Golden Rule","UI","UI Design","User Interface Design","web development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/","url":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/","name":"The Golden Rules of User Interface Design - Sagara Asia Blog","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/#website"},"datePublished":"2020-09-02T05:56:31+00:00","dateModified":"2023-04-17T03:38:30+00:00","breadcrumb":{"@id":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sagaratechnology.com\/blog\/the-golden-rules-of-user-interface-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sagaratechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Uncategorized","item":"https:\/\/sagaratechnology.com\/blog\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"The Golden Rules of User Interface Design"}]},{"@type":"WebSite","@id":"https:\/\/sagaratechnology.com\/blog\/#website","url":"https:\/\/sagaratechnology.com\/blog\/","name":"Sagara Asia Blog","description":"Dapatkan Informasi Seputar Teknologi dan Bisnis","publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sagaratechnology.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sagaratechnology.com\/blog\/#organization","name":"Sagara Technology","url":"https:\/\/sagaratechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","contentUrl":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","width":200,"height":200,"caption":"Sagara Technology"},"image":{"@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/sagara-asia\/"]},{"@type":"Person","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/e25a7dce1900980898a69a7c63241723","name":"Sagara Technology","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/55085e31e9427bed3336eaea67c72b96?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/55085e31e9427bed3336eaea67c72b96?s=96&d=mm&r=g","caption":"Sagara Technology"},"sameAs":["https:\/\/sagaratechnology.com","https:\/\/www.facebook.com\/Sagaratechnology","https:\/\/www.linkedin.com\/company\/sagara-asia\/"]}]}},"_links":{"self":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/197"}],"collection":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":7,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":4075,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions\/4075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media\/198"}],"wp:attachment":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}