{"id":6118,"date":"2019-02-05T13:10:59","date_gmt":"2019-02-05T21:10:59","guid":{"rendered":"https:\/\/www.springboard.com\/?p=6118"},"modified":"2023-08-16T14:07:33","modified_gmt":"2023-08-16T21:07:33","slug":"ux-design-principles","status":"publish","type":"post","link":"https:\/\/www.springboard.com\/blog\/design\/ux-design-principles\/","title":{"rendered":"16 Important UX Design Principles for Newcomers"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">UX design is a creative and ever-changing field that welcomes fresh ideas from new practitioners, but there are some foundational <\/span><span style=\"font-weight: 400;\">UX design principles<\/span><span style=\"font-weight: 400;\"> that every new designer should understand. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The Interaction Design Foundation&nbsp;defines<\/span> <span style=\"font-weight: 400;\">UX principles as \u201cfundamental points of advice for making easy-to-use, pleasurable designs as we select, create and organize elements and features in our work.\u201d Design principles, therefore, form the heart and soul of UX design. Consequently, as new designers, it is essential that you learn these guidelines and consider aligning your design practice with them.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Let\u2019s walk through these user experience design principles so that you\u2019re prepared to launch a fulfilling career.<\/span><\/p>\n\n\n\n<p><em>Want to know more about how to become a UI\/UX designer? <a href=\"https:\/\/www.springboard.com\/blog\/design\/how-to-become-ui-ux-designer\/\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/how-to-become-ui-ux-designer\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our comprehensive job guide to UI\/UX design here<\/a>!<\/em><\/p>\n\n\n<style>.blog-cta-salsey-01 {\toverflow: hidden;\t}\t.blog-cta-salsey-01-img {\tmax-width: 160px !important;\t}\t@media (min-width: 768px) {\t.blog-cta-salsey-01-content {\tmax-width: calc(100% - 281px);\t}\t.blog-cta-salsey-01-img {\tposition: absolute;\tmax-width: 100% !important;\tright: -10px;\tbottom: -10px;\t}\t}<\/style><div class=\"blog-cta-salsey-01 bg-blue-50 p-3 my-5 position-relative\"><div class=\"d-block d-md-flex\"><img decoding=\"async\" loading=\"lazy\" width=\"212\" height=\"232\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2023\/05\/ui-ux-design-student.png\" alt=\"UI\/UX design student\" class=\"blog-cta-salsey-01-img mb-3 mb-md-0\" \/><div class=\"blog-cta-salsey-01-content\"><div class=\"d-flex align-items-center mb-2\"><img decoding=\"async\" class=\"pe-2\" width=\"86\" height=\"71\" loading=\"lazy\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2023\/04\/job-guarantee-heading-badge.png\" alt=\"Job Guarantee\" style=\"mix-blend-mode: multiply\"><h4 class=\"fw-bold mb-0\">Become A UX Designer. Land a Job or Your Money Back.<\/h4><\/div><p>Master Adobe XD, Figma, and Sketch. Work 1:1 with an industry mentor. Build a portfolio. Land a job \u2014 or your money back.<\/p><p class=\"mb-sm-0\"><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.springboard.com\/courses\/ui-ux-design-career-track\/#job-guarantee\">Start designing<\/a><\/p><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">UX Principles<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">1. Meet the users\u2019 needs<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">The foremost of all UX design principles is to focus on users throughout the <\/span><a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-design-process\/\" target=\"_blank\" data-type=\"post\" data-id=\"3640\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">design process<\/span><\/a><span style=\"font-weight: 400;\">. The term user experience itself makes it clear that your work needs to center on improving your users\u2019 experience with your product or service.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Thus, you need to learn what users are looking for in a design (through user testing and other methods). It is possible that a design may seem brilliant to you, but remember that you are not the user.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Springboard alum and UX designer Jeremy Nigh <\/span><a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-lessons-learned\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/ux-lessons-learned\/\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">put it this way<\/span><\/a><span style=\"font-weight: 400;\">: <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u201c<\/span><i><span style=\"font-weight: 400;\">All too often I have designed on an island by making assumptions based on what I think an end user needs, crafting pixel-perfect mockups based on my assumptions. I\u2019ve learned that the \u2018U\u2019 in UX does not stand for \u2018you\u2019! It\u2019s all about the user, so getting outside of my head and engaging with the user is an important step in the design process.<\/span><\/i><span style=\"font-weight: 400;\">\u201d<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"252\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image2.gif\" alt=\"user testing\" class=\"wp-image-6129\"\/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.i3lance.co.uk\/\" data-type=\"URL\" data-id=\"https:\/\/www.i3lance.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">i3lance<\/span><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">2. Know where you are in the design process<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">For new <a href=\"https:\/\/www.springboard.com\/blog\/design\/what-does-a-ux-designer-do\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX designers<\/a> who are only just&nbsp;<\/span><a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-design-internship\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/ux-design-internship\/\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">testing the internship<\/span><\/a><span style=\"font-weight: 400;\"> waters or are in junior positions, the design process can be overwhelming. A lot of work goes into designing, so knowing your place in the process is significant in several ways.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Firstly, you\u2019ll need to use different <a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX tools<\/a> for each phase, as demonstrated in the graph below. Secondly, knowing your design phase also helps you ask the right questions for user research. For instance, there\u2019s is no point testing the color of a button if you are still figuring out where it should be placed in the design.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image8-1024x711.png\" alt=\"know where you are\" class=\"wp-image-6130\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.dreamerux.com\/articles\/8f9f7dppgy2k46pf367n7tt8fayf2k\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">d<\/span><\/a><a href=\"https:\/\/www.dreamerux.com\/articles\/8f9f7dppgy2k46pf367n7tt8fayf2k\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">reamerux<\/span><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">3. Have a clear hierarchy<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">It is easy to take hierarchy for granted, but it is a UX principle that ensures smooth navigation throughout a design. There are two chief hierarchies that you need to note. First comes the hierarchy that is associated with how content or information is organized throughout the design.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For example, when you open a website or app, you will note the navigation bar that includes the main sections. This is the primary hierarchy<\/span><b>.<\/b><span style=\"font-weight: 400;\"> When you click or hover over this bar, you will note further sub-categories of content open up, taking you deeper into the app or site. These are the secondary menus.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">This site map shows primary and secondary menus:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"533\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image12.png\" alt=\"site map\" class=\"wp-image-6131\" srcset=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image12.png 700w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image12-400x305.png 400w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image12-380x289.png 380w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image12-380x289.png 420w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.lucidchart.com\/blog\/how-to-make-a-sitemap-using-lucidchart\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Lucidchart<\/span><\/a><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Now take a real example from the&nbsp;<\/span><a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WooCommerce site<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image4-1024x454.png\" alt=\"woocommerce\" class=\"wp-image-6132\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">There also is a visual hierarchy, which allows users to navigate easily within a page or section. Therefore, to create an easy flowing design for users, you need to place the important content prominently.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The WooCommerce site uses a large font and weight for the main message so that it stands out. The design also uses a different colored button to put emphasis on \u201cGet Started\u201d and encourage action.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">4. Keep it consistent<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Users expect products to share some similarities with other products they regularly use. This makes it easy for them to become familiar with the new product without any additional learning costs. It may sound a little counterintuitive, but the more familiar your design is to others, the faster users can learn to use it, which enhances their experience.<\/span><\/p>\n\n\n<div class=\"bg-leaf-50 p-4 my-3\"><h4 class=\"fw-bold text-center\">Get To Know Other\tDesign Students<\/h4><div class=\"row row-cols-1 row-cols-lg-3\"><div class=\"col\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/jeffrey-surban\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1629203191\/Student%20Success\/Jeffrey_Surban_125x125.png\" alt=\"Jeffrey Surban\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Jeffrey Surban<\/p><p class=\"text-muted lh-1\">UX Designer at Citi<\/p><\/div><div class=\"w-100 d-block d-md-none mt-3\"><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/jeffrey-surban\">Read Story<\/a><\/p><\/div><\/div><div class=\"col d-none d-md-block\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/diego-encarnacion\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1655146293\/Student%20Success\/Diego_Encarnacion.jpg\" alt=\"Diego Encarnacion\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Diego Encarnacion<\/p><p class=\"text-muted lh-1\">Design Researcher And UX Designer at IBM<\/p><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/diego-encarnacion\">Read Story<\/a><\/p><\/div><\/div><div class=\"col d-none d-md-block\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/arin-soukoule\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1640121553\/Student%20Success\/Arin_Soukoule_125x125.png\" alt=\"Arin Soukoule\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Arin Soukoule<\/p><p class=\"text-muted lh-1\">Design Experience Analyst at Accenture Interactive<\/p><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/arin-soukoule\">Read Story<\/a><\/p><\/div><\/div><\/div><\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Such consistency also makes the design process easier for the designers, as they don\u2019t have to reinvent the wheel every time they take on a new project. A case in point is the floating action button that has become common among apps, as seen in the Twitter and Google Docs apps below:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image3.jpg\" alt=\"floating buttons\" class=\"wp-image-6133\" srcset=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image3.jpg 800w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image3-400x400.jpg 400w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image3-768x768.jpg 768w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image3-380x380.jpg 380w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image3-700x700.jpg 700w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image3-380x380.jpg 420w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">5. Understand accessibility<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">An increasingly important rule from among the UX design basics is <a href=\"https:\/\/www.springboard.com\/blog\/design\/accessible-design\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/accessible-design\/\" rel=\"noreferrer noopener\">designing with accessibility<\/a> in mind. In simple words, a designer\u2019s responsibility is to make sure their design is usable for as many people as possible. This means that your design needs to be accessible to people with disabilities too.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">To this end, you should remove obstacles from the design layout for problem-free navigation. For example, you can use contrasting colors for the text on the background. This helps visually impaired users (as well as users in low-light settings) read the content on the screen more easily. <\/span><a href=\"https:\/\/slackhq.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Slack<\/span><\/a><span style=\"font-weight: 400;\"> excels at this on its blog:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image9-1024x577.png\" alt=\"Slack's website\" class=\"wp-image-6134\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">6. Context is key<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">When designing, you need to take into account the <\/span><a href=\"https:\/\/www.shopify.com\/partners\/blog\/97802374-designing-with-the-users-context-in-mind\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">user\u2019s context<\/span><\/a><span style=\"font-weight: 400;\">. Location is a commonly understood contextual factor\u2014are you designing for someone on the go or for someone sitting at a desk? But there are other things to consider, including the time available with the user, their emotional state, the device they are using, the people who influence them, and more. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">All these factors help you understand the user\u2019s behavior. Once you have insight into that, you can prepare a design that maximizes user experience. For example, the emotional state of a user would impact how patient or impatient they might be when interacting with the user interface of your product or service, so you\u2019d want to design with that in mind. <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"828\" height=\"360\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image7.jpg\" alt=\"mobile vs. desktop\" class=\"wp-image-6135\" srcset=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image7.jpg 828w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image7-400x174.jpg 400w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image7-768x334.jpg 768w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image7-380x165.jpg 380w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image7-700x304.jpg 700w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image7-380x165.jpg 420w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.appticles.com\/blog\/2016\/03\/mobile-vs-desktop-13-essential-user-behaviors\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">app ticles<\/span><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">7. Usability first<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.springboard.com\/blog\/design\/what-is-ux-design\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/what-is-ux-design\/\" rel=\"noreferrer noopener\">UX design<\/a> is entirely focused on solving the users\u2019 problems, which makes <\/span><a href=\"https:\/\/uxplanet.org\/usability-first-why-usability-design-matters-to-ui-ux-designers-9dfb5580116a\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">usability<\/span><\/a><span style=\"font-weight: 400;\"> of the design one of the most crucial user experience design principles.<\/span> <span style=\"font-weight: 400;\">No matter how aesthetically pleasing your work may be, it won\u2019t strike a chord with the user unless it is safe and easy to use. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A case in point here is <a href=\"https:\/\/www.crowdspring.com\/website-design\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.crowdspring.com\/website-design\/\" rel=\"noreferrer noopener\">website design<\/a>. Any site that is cluttered is bound to lose visitors. As a designer, your job is to make sure that each icon, button, and snippet of information that is present within the design has a purpose. Concentrate on clarity by bringing only useful features to the user\u2019s attention.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Usability is the reason why prominent buttons and a minimalist design with few elements increase the click-through rate (CTR). <\/span><span style=\"font-weight: 400;\">Precision Marketing Group <\/span><a href=\"https:\/\/www.precisionmarketinggroup.com\/blog\/how-to-improve-your-click-through-rate-with-better-cta-design\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">doubled the CTR<\/span><\/a><span style=\"font-weight: 400;\"> on their call-to-action button by changing the shape and size of the button.<\/span><\/p>\n\n\n\n<p><a href=\"https:\/\/www.experienceux.co.uk\/faqs\/what-is-usability-testing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Usability testing<\/span><\/a><span style=\"font-weight: 400;\"> asks users to interact with the design. Meanwhile, you take notes to see whether they encounter any problems.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">If many people experience similar problems, you will have to make changes to the design to sort out the usability issue. Keep in mind that design is an iterative process and it demands improvements in all stages.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Hence, you should conduct usability tests throughout the <a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-design-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX design process<\/a>, including before you start your initial design, during the prototyping phases, and at the end of the process. &nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image13-1024x572.png\" alt=\"usability testing\" class=\"wp-image-6136\"\/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.smashingmagazine.com\/2018\/03\/guide-user-testing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Smashing Magazine<\/span><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">8. Less is more<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">The less-is-more design principle was originally proposed by the architect <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Ludwig_Mies_van_der_Rohe\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Ludwig Mies van der Rohe<\/span><\/a><span style=\"font-weight: 400;\">. For UX, the underlying aim of this is simple: reducing the operational and cognitive costs of the users. In placing value on this, the design\u2019s usability and consistency improve.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The less-is-more approach emphasizes simplicity as opposed to clutter or over-decoration in design. Several celebrated designs have surfaced as a result of this UX design principle, including the iPhone and iPod. In 2007, Apple streamlined the phone\u2019s keyboard in pursuit of the less-is-more philosophy and the iPhone was birthed. Apple\u2019s website also follows the same design principle.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image11-1024x556.png\" alt=\"Apple design\" class=\"wp-image-6137\"\/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.apple.com\/mac\/\" target=\"_blank\" rel=\"noopener\">Apple<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">9. Use simple language<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Just as simplicity has become a best practice in visual design, UX-focused copywriting should avoid technical terms and opt for simple language. Users are busy, they\u2019re on the go, they\u2019re multi-tasking, so use words in your design that are closest to the user\u2019s thoughts.<\/span><\/p>\n\n\n\n<p><a href=\"https:\/\/plainlanguagenetwork.org\/plain-language\/what-is-plain-language\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Simple language<\/span><\/a><span style=\"font-weight: 400;\"> is easy to understand, which enhances your design\u2019s user-friendliness. <\/span><span style=\"font-weight: 400;\">\f<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">You need to factor in five points as you choose simple words for your design. These are: <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Audience and purpose of the design: question who your audience is, what information they have, what they need, and what they will want to achieve with your communication<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Structure: ask about the common structures for your communication, what structures your readers are familiar with, and what sequence will be easy to read<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Design layout: focus on the typography, layout, and information graphics<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Expression: consider the tone, verbs, sentence length, jargon, and choice of words your communication will adopt<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Evaluation: have someone review the text you finalize and conduct a usability test<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Put simply: use clear and consistent words throughout your design to reduce ambiguity. In this example, the \u201cOK\u201d is unclear. \u201cYes\u201d is a more logical choice. Got it? (OK!)<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"256\" height=\"256\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image5.png\" alt=\"simple language\" class=\"wp-image-6138\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">10. Typography is powerful<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Equally important to the words you use in your design is typography. The author of &#8220;<\/span><a href=\"http:\/\/www.amazon.co.uk\/exec\/obidos\/ASIN\/0881792128\/monographic-21\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">The Elements of Typographic Style<\/span><\/a><span style=\"font-weight: 400;\">,\u201d Robert Bringhurst, highlights the role of this UX design principle well. He writes, \u201cTypography is the craft of endowing human language with a durable visual form.\u201d<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Typographic choices can significantly impact the way users interpret the language you use, helping enhance or suppress the message. Moreover,&nbsp;typography can improve UX in multiple ways.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For instance, it can improve accessibility and make the design more user-friendly as you consider a typographic hierarchy. You can take a page from the online publishing platform Medium\u2019s design.&nbsp;<\/span><a href=\"https:\/\/medium.design\/project-tnt-4b9b4ea97cda\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Medium<\/span><\/a><span style=\"font-weight: 400;\"> uses specific typography to make its content more readable.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image17-1024x654.png\" alt=\"Medium's typography\" class=\"wp-image-6139\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">11. Feedback matters<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Design should be interactive by nature. So, when a user clicks on something, they will need a response from the product to understand that their command has been received. Feedback is a crucial way to encourage communication between humans and machines.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Your design may respond in various ways. The clicked icon may change shape, vibrate, discolor, emit light, and so on. Notice how the color reacts as you click a link on the <\/span><a href=\"https:\/\/zapier.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Zapier<\/span><\/a><span style=\"font-weight: 400;\"> website:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image6-1024x411.png\" alt=\"Zapier's website\" class=\"wp-image-6140\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">12. Confirm before you commit<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Accidents happen all the time. One common digital example: a person may unintentionally place an order. (How many parents have had to ask for refunds after their <\/span><a href=\"https:\/\/www.npr.org\/sections\/alltechconsidered\/2013\/07\/11\/201196049\/a-quick-history-of-accidental-online-purchases-by-kids\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">young kids<\/span><\/a><span style=\"font-weight: 400;\"> accidentally made a purchase on Amazon or iTunes?) Your design should help correct this, though, because you don\u2019t want to give the user a poor experience. This makes confirmation another one of the essential <\/span><span style=\"font-weight: 400;\">UX design principles.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Apple asking for confirmation when you empty the trash is one important way this principle is put into use.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image1-1024x366.png\" alt=\"confirmation\" class=\"wp-image-6141\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">13. The user is in control<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">User control focuses on greater flexibility of use and better control of where a user is within a design or product, enhancing user experience. Furthermore, it allows users to backpedal and recover from errors.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The \u201cupward\u201d icon on a webpage, which allows you to get to the top of the page, is a good example (see below). Similarly, the \u201ccancel\u201d button that allows users to abandon the task they were doing also empowers them. As does the \u201cundo\u201d button, which saves a user from making an unintended action.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image16-1024x604.png\" alt=\"user control\" class=\"wp-image-6142\"\/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/design-search-mobile-app\/\" target=\"_blank\" rel=\"noopener\">Smashing Magazine<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">14. Design with personality<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Your design can attract more users if it showcases a character that interests the user persona you are designing for. Users find it hard to connect with a lifeless design, device, or code.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Adding personality to your design gives it the human touch that makes it more attractive and usable (like the&nbsp;<\/span><a href=\"https:\/\/blog.trello.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Trello<\/span><\/a><span style=\"font-weight: 400;\"> blog).&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image15-1024x497.png\" alt=\"design personality\" class=\"wp-image-6143\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">15. Visual grammar<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Visual grammar has its roots in graphic design, but it sits at the helm of all visual communication, which plays a significant role in user experience. Visual grammar consists of everything that makes up the visual elements of a design: icons, illustrations, patterns, and more.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Break these down and you will get the core elements of planes, points, and lines, as shown below. Your job as a new designer is to ensure that you understand these elements better for improved visual grammar.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Focus on one point at a time, starting from points, then lines, and finally planes. As you improve on this user experience design principle, you will be able to improve your overall UX design skill set.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image10-1024x572.png\" alt=\"visual grammar\" class=\"wp-image-6144\"\/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.smashingmagazine.com\/2018\/01\/universal-principles-ux-design\/#top\" target=\"_blank\" rel=\"noopener\">Smashing Magazine<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">16. Narrative design <\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Another one of the most important <\/span><span style=\"font-weight: 400;\">user experience design principles <\/span><span style=\"font-weight: 400;\">is narrative design, or telling a story with your design. Two critical storytelling elements are time and rhythm. Time is the pacing your design adopts<\/span><span style=\"font-weight: 400;\">\u2014<\/span><span style=\"font-weight: 400;\">for example, how slowly or quickly your narrative is unveiled.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Similarly, rhythm is the pattern of unfolding that your narrative adopts<\/span><span style=\"font-weight: 400;\">\u2014<\/span><span style=\"font-weight: 400;\">for instance, the pattern of the series of screens through which the entire design opens up. Too slow a pace can bore your user, not giving them adequate information to hold their interest.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">On the flip side, a fast pace can inundate the user with information, which can confuse them. Therefore, you need to balance pace and rhythm. Check out the <\/span><a href=\"http:\/\/www.bigapplehotdogs.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Big Apple Hot Dogs<\/span><\/a><span style=\"font-weight: 400;\"> website to note how the design uses narrative storytelling:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/02\/image14-1024x737.png\" alt=\"Narrative design\" class=\"wp-image-6145\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><span style=\"font-weight: 400;\">As you step further along the path to a career in UX design, you\u2019ll want to acquaint yourself with the <\/span><a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-terms\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/ux-terms\/\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">common UX terms<\/span><\/a><span style=\"font-weight: 400;\"> and UX design basics. <\/span>Aligning your work with these UX design principles will improve your output and set you up for success as a UX designer.<\/p>\n\n\n\n<p class=\"rm has-background\" style=\"background-color:#efeff6\"><strong>Since you&#8217;re here&#8230;<br><\/strong>Are you a future UX designer? Enroll in our <a href=\"https:\/\/www.springboard.com\/courses\/ui-ux-design-career-track\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI\/UX Bootcamp<\/a> and join over <a href=\"https:\/\/www.springboard.com\/success\/\" target=\"_blank\" rel=\"noreferrer noopener\">10,000 students<\/a> who have successfully changed careers with us. Want to get wireframing right this second? Check out our <a href=\"https:\/\/www.springboard.com\/resources\/learning-paths\/user-experience-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">free UX design course<\/a> today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UX design is a creative and ever-changing field that welcomes fresh ideas from new practitioners, but there are some foundational UX design principles that every new designer should understand. The Interaction Design Foundation&nbsp;defines UX principles as \u201cfundamental points of advice for making easy-to-use, pleasurable designs as we select, create and organize elements and features in [&hellip;]<\/p>\n","protected":false},"author":58,"featured_media":6151,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_eb_data_table":"","footnotes":""},"categories":[123],"tags":[],"marketing_tags":[],"class_list":{"0":"post-6118","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/6118"}],"collection":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/comments?post=6118"}],"version-history":[{"count":4,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/6118\/revisions"}],"predecessor-version":[{"id":49110,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/6118\/revisions\/49110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media\/6151"}],"wp:attachment":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media?parent=6118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/categories?post=6118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/tags?post=6118"},{"taxonomy":"marketing_tags","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/marketing_tags?post=6118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}