{"id":5133,"date":"2019-06-05T00:00:00","date_gmt":"2019-06-04T22:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/5-key-principles-for-new-ux-designers\/"},"modified":"2021-08-05T11:10:50","modified_gmt":"2021-08-05T09:10:50","slug":"5-key-principles-for-new-ux-designers","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/5-key-principles-for-new-ux-designers\/","title":{"rendered":"The 5 Key UX Design Principles You Need to Know"},"content":{"rendered":"

When entering a new field, it\u2019s super helpful to find resources that give an overview of key concepts and techniques. When I became a UX designer<\/a>, one of my guiding resources was Universal Principles of Design<\/a>, a book that provides 125 principles of all types of design.<\/p>\n

But 125 is a lot of principles (don\u2019t worry, I won\u2019t list them all here!). I generally think less is more, and if you can internalize a handful of key ideas and understand how to apply them, you\u2019ll have a good foundation to build from.<\/p>\n

With that in mind, here are five principles that I think are key for any new or aspiring UX designer<\/a> to know\u2014if one of them is of immediate interest, you can simply select it from the menu below and jump straight to it.<\/p>\n

After you finish, grab your phone and check out some of your favorite apps to see how well they apply these principles. Or explore our 1 month UX Fundamentals course<\/a> if you want to try your hand at putting these principles<\/a> into practice yourself!<\/p>\n

The 5 Key Principles Of User Experience Design<\/h4>\n
    \n
  1. Hierarchy<\/a><\/li>\n
  2. Consistency<\/a><\/li>\n
  3. Confirmation<\/a><\/li>\n
  4. User Control<\/a><\/li>\n
  5. Accessibility<\/a><\/li>\n<\/ol>\n

    1. Hierarchy<\/h2>\n

    Hierarchy is one of designers\u2019 best tools to help users move through a product easily. There are two important hierarchies I\u2019ll discuss here.<\/p>\n

    Information architecture<\/h3>\n

    The first hierarchy relates to information architecture<\/a>, which is how content is organized across<\/strong> the app or site. The top level of the hierarchy is usually a primary navigation menu that includes the main sections. This is usually the menu you notice when you first open an app or arrive on a site.<\/p>\n

    As you click on or hover over each item in the menu, you might see secondary menus that let you get more specific, moving you down the information hierarchy. Individual pieces of content, like an image or a card, will be near the bottom of the hierarchy. As users, we often take this hierarchy for granted because it feels so natural, but it\u2019s essential for a smooth navigation experience.<\/p>\n

    If you’d like to learn more, check out this beginner\u2019s guide to information architecture<\/a>. If you want to become the Frank Lloyd Wright of information architecture, I can also highly recommend Information Architecture<\/a> by O\u2019Reilly Media.<\/p>\n

    Visual hierarchy<\/h3>\n

    A visual hierarchy<\/a> is a way that designers help users navigate more easily within<\/strong> a section or page. To create a visual hierarchy, more important content should stand out.<\/p>\n

    For instance, headings are typically larger than body text and frequently use a different font and weight (like bold). Similarly, interactive elements like links and buttons use different colors to draw attention to their interactiveness.<\/p>\n

    \"A<\/p>\n

    A site map like the one above (left) shows the hierarchical organization of content in the information architecture. On the right, BestBuy.com uses visual hierarchy to put major categories in the primary navigation menu and subcategories in a secondary navigation menu when you hover.<\/p>\n

    2. Consistency<\/h2>\n

    Users expect products to be consistent with similar products they\u2019ve used in the past. The more familiar your product is, the more easily users will learn it and the better their experience will be.<\/p>\n

    This is great news for designers because it means you don\u2019t have to reinvent the wheel for every part of your design. While it might be tempting to try something crazy and new, the principle of consistency<\/a> (and tons of research!) tells us you\u2019re better off sticking to standard patterns for most things.<\/p>\n

    \"A<\/p>\n

    These three apps all use a Floating Action Button (FAB) at the bottom right corner of the app to make it easy for users to accomplish the most important action available on this screen.<\/em><\/p>\n

    More on Consistency\u2026<\/strong>
    \nSo how do you make your product consistent with other products? Do you call up other designers and coordinate your designs? Well, you could try, but since consistency is so important, designers typically turn to design languages. A design language is a formal set of guidelines for how to design products for a particular device or format. For instance, if you\u2019re designing apps for iOS, you\u2019ll want to follow Apple\u2019s     Human Interface Guidelines<\/a>. If you\u2019re designing apps for Android, you might want to refer to Google\u2019s Material Design guidelines<\/a> (as in the example above) or Android\u2019s guidelines.<\/p>\n

    3. Confirmation<\/h2>\n

    Preventing errors is one of our key goals as designers. When users accidentally delete an item or make an unintended payment, their experience falls apart. Requiring confirmation for any important or irreversible action is one of the best ways to prevent these errors. This type of confirmation gives users an opportunity to reverse an unintentional action or to rethink something they\u2019re not sure of. One common example is an order confirmation screen that lets you review the complete details of an order immediately prior to making an online purchase. Another familiar example is an \u2018Are you sure you want to permanently delete this?\u2019 message. Since confirmation actions do require extra effort, they should only be used for actions that will have a significant effect.<\/p>\n

    \"A<\/p>\n

    Gmail requires users to confirm before taking the irreversible action of bulk deleting emails.<\/em><\/p>\n

    More on Confirmation\u2026<\/strong>
    \nCheck out this     Nielsen Norman Group article<\/a> for guidelines on how to create a good confirmation dialog box.<\/p>\n

    4. User Control<\/h2>\n

    User control comes into play in a few ways in UX, but generally users have a better experience if you give them control over where they are in the product and what they\u2019re doing. An essential part of user control is helping users easily backpedal or recover from errors. For instance, whenever a user has clicked more than one level down in the hierarchy (remember hierarchy?), they should have a button that can take them back up. Similarly, when a user starts creating a new item like an email or event, a Cancel button should let them abandon the task. An Undo button is also a lifesaver for reversing an unintended or undesired action.<\/p>\n

    Another way to enhance control is by giving more advanced users (power users) ways to improve their efficiency. Keyboard shortcuts are a great way to do this, as well as templates and macros that let users accomplish repetitive functions more efficiently. Integrations between features and products can help users transfer content, and advanced searching helps users find what they\u2019re looking for more efficiently.<\/p>\n

    \"Two<\/p>\n

    Advanced search options let power users have more direct control over their search experience, helping them find exactly what they need more efficiently.<\/em><\/p>\n

    More on User Control\u2026<\/strong>
    \nCheck out     this really awesome UX Planet article<\/a> for more on user control and correcting errors. UX Review addresses designing for power users<\/a> as well.<\/p>\n

    5. Accessibility<\/h2>\n

    In digital product design, accessibility typically means designing products so they\u2019re easy for users with disabilities to use. Since we design products for people, it\u2019s crucial that our products can be used by as many people as possible. A unique part of the UX designer role is the focus on removing obstacles<\/a> for people when they use the product, whether those obstacles are temporary or more permanent. A great bonus is that following accessibility guidelines often improves the experience for all users, since it steers us toward the most usable design.<\/p>\n

    One great example of how accessible design helps everyone is placing labels outside text entry fields instead of inside them. This lets screen readers read them for visually impaired users, while it reminds all users what information goes in each text field. Similarly, using a high contrast between text and background colors helps both users with visual impairments and users in low-light settings read text on the screen.<\/p>\n

    \"\"
    \nBoth Squarespace and Amazon place labels above form fields so they\u2019re permanently visible and accessible to screen readers.<\/em><\/p>\n

    More on Accessibility\u2026<\/strong>
    \nFor more on accessibility guidelines, check out     w3c\u2019s accessibility on the web<\/a> and mobile accessibility guidelines<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    What are some of the most important principles for budding UX designers to follow? Jonny Grass shares his top 5 here.<\/p>\n","protected":false},"author":25,"featured_media":424,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-5133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design"],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=5133"}],"version-history":[{"count":0,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5133\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/424"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=5133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=5133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=5133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}