{"id":7265,"date":"2021-04-15T14:30:21","date_gmt":"2021-04-15T14:30:21","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=7265"},"modified":"2021-05-26T08:23:22","modified_gmt":"2021-05-26T08:23:22","slug":"ux-web-design","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/ux-web-design\/","title":{"rendered":"UX Web Design Stories: the Role of UX and Its 5 Principles"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Website design is not static, it is everchanging.\u00a0 Innovations happen often, but not every innovation is well received. The judge here is the end-user of a website. UX designers should be aware of the recent advancements, but shouldn&#8217;t take them for granted. Lots of testing needs to be done in order to provide the best user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Behind every advancement, some things are still yet ever-green: <strong>the design principles<\/strong>. The design principles dig deep into human psychology and the way human brains are bound to respond to certain visual stimuli. This is why every <a href=\"https:\/\/penji.co\/hire-web-designer\/\">web designer<\/a> (amateur or professional) should know them and apply them.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This means that a web designer&#8217;s job can be quite daunting: how can he balance remarkable design and proper user experience (UX).<\/span><a href=\"https:\/\/www.smallbizgenius.net\/by-the-numbers\/ux-statistics\/#gref\"> <span style=\"font-weight: 400;\">More than 88% of online shoppers<\/span><\/a><span style=\"font-weight: 400;\"> don&#8217;t return to a website after having a bad user experience. So, to get them to return, you need to enhance the UX.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let&#8217;s understand how you can leverage UX design principles on your website.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">What role does UX play in your website?\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">User experience essentially connects the dots between a person and a product, digital or not. The primary goal of any website or business is to attract potential leads and increase its sales. And there is no doubt UX design plays an essential role in achieving these goals.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Good UX design helps <\/span><a href=\"https:\/\/spdload.com\/blog\/how-much-does-it-cost-to-build-a-website-for-a-small-business\/\"><span style=\"font-weight: 400;\">corporate websites<\/span><\/a>,<span style=\"font-weight: 400;\"> online stores, blogs, online newspapers, to perform well. But, let&#8217;s go a bit deeper into the role UX plays on a website.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Understanding user behavior<\/span><\/h3>\n<p><img loading=\"lazy\" class=\"wp-image-7272 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/5593.jpg\" alt=\"Understanding user behavior with UX\" width=\"890\" height=\"556\" \/><\/p>\n<p><span style=\"font-weight: 400;\">To thoroughly understand what drives users to specific products, it is necessary to dig into <\/span><a href=\"https:\/\/onepageexpress.com\/2020\/02\/27\/5-cognitive-psychology-rules-every-ux-designer-should-know\/\"><span style=\"font-weight: 400;\">human psychology. <\/span><\/a><span style=\"font-weight: 400;\">Persuading people to perform a suitable action like signing up or buying a product can be quite challenging in every industry.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But how can you persuade them?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, Robert Cialdini figured it out in his book called&#8230;&#8221;Persuasion&#8221;. In his research, he realized that in a chaotic world, full of information, our brains just love shortcuts. He managed to identify 6 universal shortcuts that guide our behavior. They can be applied to any aspect of our lives&#8230;thus, to website design as well. These shortcuts are: <\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"><strong>Reciprocity<\/strong> &#8211; meaning that we feel obliged something in return when a gift is received. But this can go far beyond gifts. For example, on a website, you might be willing to exchange your email address for an interesting ebook.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Scarcity<\/strong> &#8211; people want to have more of the things that seem few. Let&#8217;s see if you recognize this tactic: &#8220;Only 2 tickets left&#8221;. Seems familiar? Would you hurry into buying the ticket having this information?<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Authority<\/strong> &#8211; people trust authority figures. When a dentist comes along and recommends a certain toothpaste, you&#8217;re more like it to buy it, right?<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Consistency<\/strong> &#8211; people tend to stick to commitments. But this can go beyond this, it can expand to consistent communication is social media, on your website, etc.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Liking<\/strong> &#8211; it&#8217;s hard to say &#8220;no&#8221; to people we like. This is why, before starting a negotiation, it might be better to exchange some personal information with the person in front of you. It will break the ice a bit, create familiarity, thus increase the chances of a fruitful outcome.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Consensus<\/strong> &#8211; people are paying attention to the behavior of similar people, people from the same tribe. This is why recommendations work so well. This is why you will see reviews and testimonials on a website. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now, UX researchers, UX designers, and marketers should always collaborate on applying these principles when designing a website. <\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Boosting conversions<\/span><\/h3>\n<div id=\"attachment_7276\" style=\"width: 900px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-7276\" loading=\"lazy\" class=\"wp-image-7276\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/3665.jpg\" alt=\"UX helps boost conversions\" width=\"890\" height=\"592\" \/><p id=\"caption-attachment-7276\" class=\"wp-caption-text\">Accountant concept in flat style. Financial balance calculation scene. Business accounting and audit, annual statement and taxes banner. Vector illustration with people characters in work situation.<\/p><\/div>\n<p><span style=\"font-weight: 400;\">Conversions are actions that users take on your website that you consider valuable: from newsletter subscriptions, seeing a demo, filling up a form, getting into a free trial, to buying a product or a service.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to <\/span><a href=\"https:\/\/www.theguardian.com\/science\/2006\/aug\/23\/usnews.internationalnews\"><span style=\"font-weight: 400;\">The Guardian Report<\/span><\/a><span style=\"font-weight: 400;\">, it only takes 0.1 seconds to form a person&#8217;s first impression. Now, to make that 0.1-second count, you need to power your website with a marvelous user experience that will further enhance conversions. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let me give you just two examples of how certain website elements can help you\u00a0<\/span><span style=\"font-weight: 400;\">boost conversions.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Adding images of real people might lead to an increase in conversions. For instance, Medalia Art saw a <\/span><a href=\"https:\/\/neilpatel.com\/blog\/boost-conversions-using-images\/\"><span style=\"font-weight: 400;\">95% boost in conversions<\/span><\/a><span style=\"font-weight: 400;\"> when they replaced painting images with pictures of artists.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7268\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/people-faces-test.jpg\" alt=\"people faces test\" width=\"573\" height=\"789\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: neilpatel.com<\/span><\/em><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Making changes to the position of the CTA or its copy can also lead to a boost in conversions. Matchoffice.com changed the copy of their CTA and saw a boost of <\/span><a href=\"https:\/\/beemdigital.com\/10-call-to-action-case-studies-examples-from-button-tests\/\"><span style=\"font-weight: 400;\">14.79% in conversions<\/span><\/a><span style=\"font-weight: 400;\">. Switching from &#8220;order&#8221; to &#8220;get&#8221;, made users see more value in what they will receive. Also, &#8220;order&#8221; can have some negative connotations, &#8220;get&#8221; seems more friendly and mild. See? It&#8217;s all about psychology.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7269\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/CTA-test.jpg\" alt=\"CTA test\" width=\"600\" height=\"417\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: beemdigital.com<\/span><\/em><\/p>\n<p>The folks a CXL have <a href=\"https:\/\/cxl.com\/blog\/ab-testing-guide\/\">great resources<\/a> on how to design such tests. How to formulate a hypothesis, and how to make sure you draw the right conclusion using the right statistical tools.<\/p>\n<p><span style=\"font-weight: 400;\">UX design of your website is a critical element that defines the whole of your sales, visitor, and customers&#8217; experience as they navigate and interact with your site on each page and its element.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Improving SEO<\/span><\/h3>\n<div id=\"attachment_7278\" style=\"width: 900px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-7278\" loading=\"lazy\" class=\"wp-image-7278\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/8601-1.jpg\" alt=\"UX helps with SEO\" width=\"890\" height=\"685\" \/><p id=\"caption-attachment-7278\" class=\"wp-caption-text\">Team of happy employees winning award and celebrating success. Business people enjoying victory, getting gold cup trophy. Vector illustration for reward, prize, champions concepts<\/p><\/div>\n<p><span style=\"font-weight: 400;\">Way back, the main SEO strategy meant stuffing keywords on each page of your website and getting the number one rank in search engines. But the scenario has changed, and now search engines consider UX data-driven factors for ranking. Here are some of them:<\/span><\/p>\n<ol>\n<li><strong>Mobile responsiveness<\/strong> &#8211; in case you didn&#8217;t know by now, Google established mobile-first indexing as a default for all websites back in 2019. This means that Google predominantly uses the mobile version of the content for ranking. If you do not provide a good mobile experience for your users, your chances of showing up in the search results will go down.<\/li>\n<li><strong>Bounce rate<\/strong> &#8211; it is a measure of website engagement, it shows the percentage of web users that exit your website after only viewing only one page. If users don&#8217;t visit more pages, this is a bad signal for the search engines. This means that the users haven&#8217;t found what they need on your site. There might be tons of reasons here: bad design, poor navigability, slow website speed, etc. In the end, there&#8217;s a correlation between high bounce rates and bad UX. There can also be another reason, maybe your marketing efforts are not driving the right traffic on your site, so beware!<\/li>\n<li><strong>Page dwell time<\/strong> &#8211; this is a metric that reveals time spent on site by your users. The longer <a href=\"https:\/\/onepageexpress.com\/2020\/05\/07\/why-you-should-measure-and-increase-dwell-time-on-your-wordpress-website\/\">the dwell time<\/a>, the longer the user engagement or at least this is how search engines perceive it.<\/li>\n<li><strong>Page speed<\/strong> &#8211; with each second that passes and your site does not load, users will abandon your site. There are some things that you can do in order to improve these metrics such as: using minified versions of various libraries, optimizing your images and videos, etc.<\/li>\n<li><strong>Navigability<\/strong> &#8211; having a proper site structure with clean URLs helps SEO a lot. Users should be able to find the answer to a question in a matter of 4-5 clicks. If you own a large site, filters and site search options will help navigation, as well as a clear menu.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">5 Principles of UX web design<\/span><\/h2>\n<p>Great design is a combination of function and aesthetics. In order to nail the proper combination and create a\u00a0<span style=\"background-color: transparent;\">UX- first website<\/span><span style=\"background-color: transparent;\">, you will need to follow these 5 principles:<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">1. Focus on the user<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">How can you do this? Via proper user research. Your design will need to meet the users&#8217; needs. If you have the budget you can hire a UX researcher to help you with insights, or, you can set up a proper user feedback loop.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">User research will help you get insight into shaping your products and defining proper guidelines for delivering a good experience for your users. If you are not spending time on research, you will make a blunder for yourself and your users.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are two types of research you can conduct to know your users:<\/span><\/p>\n<p><b>Qualitative Research: <\/b><span style=\"font-weight: 400;\">This research is used to understand the underlying reasons, opinions, and motivations of your users. It offers insights into the problem or helps to develop ideas or outlines for potential quantitative research.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/colibriwp.com\/blog\/learn-from-usabilityhub\/\">User interviews<\/a>, surveys, website heatmaps, and usability tests are examples of qualitative research.\u00a0<\/span><\/p>\n<p><b>Quantitative Research: <\/b><span style=\"font-weight: 400;\">It is mainly used to quantify the problem by way of creating or generating numerical data that can be transferred into usable statistics. Mostly qualitative research is used to quantify attitudes, behaviors, opinions, and other defined variables and generalize results for a wide range of the population.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0A powerful quantitative research tool is Google Analytics, which can help you identify how visitors are navigating your site, how much time they spend on it, which are their exit points, etc. But the answer to &#8220;why&#8221; they are navigating as they do, why do they spend so much time, is brought by qualitative tools.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">2. Use well-established patterns<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">UX design is actually a work of art. You need to have a perfect blend of efficient content structure and logical navigation while also managing looks for the website. Design patterns allow the designers to create every single piece of functionality effectively, whether it is a shopping cart or a sign-in form.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The main categories of design patterns include data input, content structure, navigation, and hierarchy. During the UX designing process, pay attention while placing each element and section on your website pages. It should not confuse your users to find a particular section like FAQs, eCommerce filters, Contact, etc.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some of the most used UX design patterns are:\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Logo:<\/b><span style=\"font-weight: 400;\"> it is usually shown top left or top-center. Clicking on the logo always takes the user to the homepage. Use this as well.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Breadcrumbs:<\/b><span style=\"font-weight: 400;\"> use linked labels to provide secondary navigation that shows the way from the beginning to the current site pages in the hierarchy.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-7281\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/Breadcrumbs.jpg\" alt=\"website breadcrumbs used for good UX\" width=\"863\" height=\"360\" \/><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lazy registration: <\/b>this pattern allows users to access a limited set of features, functionality, or content before or without registering. This something that you can use on sitesLet users interact enough with your system so that an actual registration is just another small step in a larger process: a small step, not an obligation.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Forgiving format:<\/b><span style=\"font-weight: 400;\"> users are only human are prone to making mistakes. Mistakes might lead to a bad user experience, even if it might be the website&#8217;s fault. Now, in order to prevent such errors from happening, designers can have a proactive approach. such an example would be making suggestions in the site search when someone is looking starting to type a query. Just look at Google autosuggest.<\/span><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7284\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/Google-autosuggest.jpg\" alt=\"Google autosuggest\" width=\"728\" height=\"596\" \/><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7283\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/Forgiving-formats.jpg\" alt=\"Forgiving formats in UX\" width=\"911\" height=\"281\" \/><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Clear primary actions:<\/b><span style=\"font-weight: 400;\"> make buttons stand out with colors, so users know what to do. You have to decide which actions take priority.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Progressive disclosure: s<\/b><span style=\"font-weight: 400;\">how only relevant features for the users to reduce confusion.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Navigation patterns: <\/b>such examples can be <span style=\"font-weight: 400;\">drop-down menus, mobile hamburger menus, etc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To make the <\/span><b>eCommerce website design<\/b><span style=\"font-weight: 400;\"> better, do add filters in it. You can go truncated filters, scroll features in the filter, filter headers, etc. You can also include batch filtering and allow multiple selections to make UX better.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">3. Stick to hierarchy principles<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">For a great UX design, website hierarchy matters a lot, which is a great way to be successful in terms of SEO. People take hierarchy for granted, but it is an essential UX principle that ensures smooth navigation throughout a design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the most superficial level, a hierarchical method to design involves thinking through all of your website&#8217;s functionality and data and then mapping this into a tree-like structure. You should make sure that every section of your website flows naturally throughout the end.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are two types of hierarchies in a UX design; first, hierarchy is associated with how the content or information is organized throughout the design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The second hierarchy is a Visual hierarchy. This hierarchy makes it easy for your site users to navigate your website. Also, this refers to how you arrange and present various design elements on a web page. It is necessary to choose the right size and scale of the icons and images. Also, make the color contrast of the website stand out and keep in mind the viewing patterns such as Z-pattern and an F-pattern. <\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">4. Use a mobile-first approach<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mobile responsive design has become necessary for usability and SEO because more than<\/span><a href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/#:~:text=In%20the%20third%20quarter%20of,since%20the%20beginning%20of%202017.\"><span style=\"font-weight: 400;\"> 50% of traffic <\/span><\/a><span style=\"font-weight: 400;\">is now driven by mobile search. Sites that don&#8217;t use a mobile-first approach hardly achieve the desired goals. And, as mentioned before, this is an important ranking factor as well.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep this UX principle in mind because if your website is less mobile-friendly, you will likely see your users&#8217; engagement metric performing poorly for these devices.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">5. Be consistent<\/span><\/h3>\n<p>This principle overlaps a bit with our second principle on pattern-using.<\/p>\n<p>Consistency means that designs and functionality remain unchanged across all of your web pages. Users land on your site having some pre-existing design biases on how a menu should like, where the sidebar should lay, where can he find the filter. This reminds you of the patterns we talked about a bit earlier, doesn&#8217;t it?<\/p>\n<p>However, it\u2019s also important to be consistent in the font and color choices, in the tone of the copy, you see where I&#8217;m going, right?<\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Good UX web design has an essential role in developing a long-lasting relationship with prospects and customers. It needs to connect the dots between an aesthetically pleasing, financially rewarding, and useful website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can connect the dots applying these UX design principles:<\/span><\/p>\n<ol>\n<li>Focus on the user<\/li>\n<li>Use well-established patterns<\/li>\n<li>Stick to hierarchy principles<\/li>\n<li>Use a mobile-first approach<\/li>\n<li>Be consistent<\/li>\n<\/ol>\n<p>Now, in order to verify that you got it right, user research and AB testing can come in handy.<\/p>\n<p><span style=\"font-weight: 400;\">If you liked this article, and you want to learn more about<\/span><a href=\"https:\/\/colibriwp.com\/blog\/how-to-build-a-wordpress-website-in-2021\/\"> <span style=\"font-weight: 400;\">how to build a WordPress website<\/span><\/a><span style=\"font-weight: 400;\">, make sure to subscribe to our<\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"> <span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and<\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"> <span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0[sibwp_form id=1]<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Website design is not static, it is everchanging.\u00a0 Innovations happen often, but not every innovation is well received. The judge here is the end-user of a website. UX designers should be aware of the recent advancements, but shouldn&#8217;t take them for granted. Lots of testing needs to be done in order to provide the best&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/ux-web-design\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":7286,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[260],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UX Web Design Stories: the Role of UX and Its 5 Principles<\/title>\n<meta name=\"description\" content=\"Good UX web design can help you develop long-lasting relationships with prospects and customers, but can also help you rank. Find out how!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/ux-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Web Design Stories: the Role of UX and Its 5 Principles\" \/>\n<meta property=\"og:description\" content=\"Good UX web design can help you develop long-lasting relationships with prospects and customers, but can also help you rank. Find out how!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/ux-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-15T14:30:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-26T08:23:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/web-design-computer-concept.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"571\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/ux-web-design\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/web-design-computer-concept.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/web-design-computer-concept.jpg\",\"width\":1000,\"height\":571,\"caption\":\"Web design computer concept 3d rendering\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/ux-web-design\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/ux-web-design\/\",\"name\":\"UX Web Design Stories: the Role of UX and Its 5 Principles\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/ux-web-design\/#primaryimage\"},\"datePublished\":\"2021-04-15T14:30:21+00:00\",\"dateModified\":\"2021-05-26T08:23:22+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"Good UX web design can help you develop long-lasting relationships with prospects and customers, but can also help you rank. Find out how!\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/ux-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/ux-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/ux-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Web Design Stories: the Role of UX and Its 5 Principles\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX Web Design Stories: the Role of UX and Its 5 Principles","description":"Good UX web design can help you develop long-lasting relationships with prospects and customers, but can also help you rank. Find out how!","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:\/\/colibriwp.com\/blog\/ux-web-design\/","og_locale":"en_US","og_type":"article","og_title":"UX Web Design Stories: the Role of UX and Its 5 Principles","og_description":"Good UX web design can help you develop long-lasting relationships with prospects and customers, but can also help you rank. Find out how!","og_url":"https:\/\/colibriwp.com\/blog\/ux-web-design\/","og_site_name":"ColibriWP Blog","article_published_time":"2021-04-15T14:30:21+00:00","article_modified_time":"2021-05-26T08:23:22+00:00","og_image":[{"width":1000,"height":571,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/web-design-computer-concept.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/ux-web-design\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/web-design-computer-concept.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/03\/web-design-computer-concept.jpg","width":1000,"height":571,"caption":"Web design computer concept 3d rendering"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/ux-web-design\/#webpage","url":"https:\/\/colibriwp.com\/blog\/ux-web-design\/","name":"UX Web Design Stories: the Role of UX and Its 5 Principles","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/ux-web-design\/#primaryimage"},"datePublished":"2021-04-15T14:30:21+00:00","dateModified":"2021-05-26T08:23:22+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"Good UX web design can help you develop long-lasting relationships with prospects and customers, but can also help you rank. Find out how!","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/ux-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/ux-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/ux-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UX Web Design Stories: the Role of UX and Its 5 Principles"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7265"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=7265"}],"version-history":[{"count":12,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7265\/revisions"}],"predecessor-version":[{"id":7712,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7265\/revisions\/7712"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/7286"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=7265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=7265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=7265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}