{"id":2687,"date":"2019-06-07T16:08:39","date_gmt":"2019-06-07T14:08:39","guid":{"rendered":"https:\/\/capturly.com\/blog\/?p=2687"},"modified":"2023-09-26T11:07:19","modified_gmt":"2023-09-26T09:07:19","slug":"user-experience-guide-what-makes-a-good-website","status":"publish","type":"post","link":"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/","title":{"rendered":"User Experience Guide: What Makes a Good Website"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_53 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<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:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#UX_Guide\" title=\"UX Guide\">UX Guide<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#UX_Planning\" title=\"UX Planning\">UX Planning<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#What_Makes_a_Good_UX\" title=\"What Makes a Good UX?\">What Makes a Good UX?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#Wrapping_up\" title=\"Wrapping up:\">Wrapping up:<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"UX_Guide\"><\/span>UX Guide<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><i>The best thing about web design is that you always have a little extra to add to your website in order to enrich your user experience.<\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"UX_Planning\"><\/span>UX Planning<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>UX planning is a process that has three main phases:<\/p>\n\n\n\n<p><i>Phase I. &#8211; <strong>The research phase:<\/strong><\/i><\/p>\n\n\n\n<p>I like to call it a tutorial scenario since at this point the only goal is to learn as much as possible about potential users and competition.<\/p>\n\n\n\n<p><i>Phase II. &#8211; <strong>The design phase:<\/strong><\/i><\/p>\n\n\n\n<p>This phase provides a framework, defines the core functionality of the website.<\/p>\n\n\n\n<p><i>Phase III. &#8211; <strong>The validation phase<\/strong><\/i><strong>:<\/strong><\/p>\n\n\n\n<p>Here you check how well the design of the second phase matches the expectations of the target group.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Makes_a_Good_UX\"><\/span>What Makes a Good UX?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Exceptional navigation<\/h3>\n\n\n\n<p>Excellent navigation is one of the most important aspects of website usability. Simple HTML or JavaScript menus tend to work better and are essential building blocks for platform and browser-independent UX design. It is equally important to <a href=\"https:\/\/www.orbitmedia.com\/blog\/website-navigation\/\">ensure the smooth flow of navigation<\/a>. It is good practice to <b>limit the number of menu items<\/b> as much as possible. A drop-down menu or a <b>single sub-menu may work better<\/b> on a website, for many sections and pages.<\/p>\n\n\n\n<p>The progress of DHTML and JavaScript libraries, such as React, jQuery, has revealed many new opportunities for creating innovative navigation systems.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"550\" height=\"198\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-menu.gif\" alt=\"capturly ux menu\" class=\"wp-image-2690\"\/><\/figure><\/div>\n\n\n<p>It is worth noting that navigation is <b>more than just menus stacked together<\/b>. Here are a few more points to consider:<\/p>\n\n\n\n<ul>\n<li><i>supporting effective search functionality &#8211; <\/i>a typical UX convention might be when we search at the very beginning of the page<\/li>\n\n\n\n<li><i>provide several ways to discover content <\/i>&#8211; categorization and the use of filters are indispensable for websites that provide more information than usual<\/li>\n\n\n\n<li><i>information-rich footer section<\/i><\/li>\n<\/ul>\n\n\n\n<p>Bad navigation on your website can cause frustration in your visitors and lead to a high exit rate or even bounce rate.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p><strong>88%<\/strong> of online <a href=\"https:\/\/www.smallbizgenius.net\/by-the-numbers\/ux-statistics\/#gref\">shoppers say<\/a> they <strong>wouldn\u2019t return to a website after having a bad user experience<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p>To avoid that, there are great <a href=\"https:\/\/capturly.com\">web analytics tools<\/a> to discover and analyze navigation issues, they are called <a href=\"https:\/\/capturly.com\/features\/session-recording\">session recording<\/a>.&nbsp;Session replays enable you to track every visitor engagement on your website. With the help of session recording, you are able to analyze every mouse movement on your website. Which means that you can optimize your navigation to be as smooth as possible with real user-data. It&nbsp;is a quick, safe tool that supports all devices and screen sizes, logged-in pages, and dynamic pages.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"421\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/09\/ezgif.com-video-to-gif.gif\" alt=\"session replay video\" class=\"wp-image-4051\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">2. Responsivity<\/h3>\n\n\n\n<p>A responsive website adjusts the content to the browser interface. If you open a responsive page on a desktop computer and then change the browser size, the content will dynamically rearrange, scale itself. In the case of mobile interfaces, this happens automatically. In order for users to benefit from a seamless experience, <b>careful planning of the content of the website is required<\/b>.<\/p>\n\n\n\n<p>The screen resolution continues to grow on the &#8220;typical&#8221; displays. Today, the average web session is at a <a href=\"https:\/\/www.w3schools.com\/browsers\/browsers_Display.asp\">resolution of at least 1024 x 768 pixels<\/a>. However, you need to make sure that what looks acceptable in this setting, it is also decent when it comes to other solutions.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"760\" height=\"438\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/Capturly-responsive-layout-e1602849264523.png\" alt=\"Capturly responsive layout\" class=\"wp-image-2768\"\/><\/figure><\/div>\n\n\n<p>Screen resolution is a factor that needs to be adopted when designing your website. It&#8217;s a very good tactic to figure out your visitors&#8217; preferences, experience the most commonly used screen resolution, and <a href=\"https:\/\/capturly.com\">see how visitors behave on your website<\/a>.<\/p>\n\n\n\n<p>There are <a href=\"https:\/\/capturly.com\">web analytics tools<\/a> that draw <a href=\"https:\/\/capturly.com\/features\/heatmaps\">click heatmaps<\/a> or scroll heatmaps in addition to quantitative data and create snapshots in the form of session recordings of your site. It&#8217;s similar to like having your own tester team, the only difference is that you get feedback from visitors firsthand. <b>UX design is a data-demanding process<\/b>, so analytics and a good UX walk hand-in-hand.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"461\" height=\"1024\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/capturly_scroll-heatmap-461x1024.jpg\" alt=\"capturly_scroll heatmap\" class=\"wp-image-2704\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/capturly_scroll-heatmap-461x1024.jpg 461w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/capturly_scroll-heatmap-135x300.jpg 135w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/capturly_scroll-heatmap-768x1705.jpg 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/capturly_scroll-heatmap.jpg 1588w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure><\/div>\n\n\n<p>Browser <a href=\"https:\/\/www.conversioner.com\/glossary\/browser-compatibility\">compatibility is easy to ignore<\/a>. Often even the websites of the most well-known companies neglect this problem. This undoubtedly has a negative impact on the usability of the webpage, which can especially be felt on mobile devices.<\/p>\n\n\n\n<p>Although modern browsers have evolved and become more efficient, there are still inconsistencies on websites interpreted by different browsers. It is important to ensure that your site appears and behaves consistently with popular browsers, such as Chrome, Firefox, Safari, and Opera. Such simple things distinguish the professionally designed website from the rest.<\/p>\n\n\n<div class=\"su-button-center\"><a href=\"https:\/\/capturly.com\/\" class=\"su-button su-button-style-default\" style=\"color:#FFFFFF;background-color:#25b2fa;border-color:#1e8fc8;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#FFFFFF;padding:0px 24px;font-size:18px;line-height:36px;border-color:#67cafc;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;text-shadow:none;-moz-text-shadow:none;-webkit-text-shadow:none\"> Check out Heatmaps &gt;<\/span><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. Website localization<\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Website localization is the process of tailoring your website to a target audience based on their native language or cultural background. It\u2019s a complex process that requires a lot of research and understanding regarding the coding and culture of your users. You might be saying to yourself, \u201cDo I need to localize my website?\u201d <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">According to CSA Research, 40% of internet users will not buy products from websites that are not in their native language. Many studies show that users interact more on a website that caters to their language or region. And so, when you\u2019re creating a website, maybe you should consider looking into website localization services that will <\/span><a href=\"https:\/\/www.tomedes.com\/localization-services.php\"><span style=\"font-weight: 400;\">help your website cater to a more diverse audience<\/span><\/a><span style=\"font-weight: 400;\"> without compromising your vision.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Efficient error handling<\/h3>\n\n\n\n<p>It doesn\u2019t matter how hard you try to plan ahead, even if you think of a thousand variables, there will always be one that you didn&#8217;t count on. What exactly does this mean? It\u2019s impossible to prepare in advance for every situation arising from the continuous development of the online world.<\/p>\n\n\n\n<p>Thus, there can be <a href=\"https:\/\/brightskywebdesign.com\/theres-thing-perfect-lakeland-web-design\/\">no such thing as a perfect product\/web design<\/a>. What has been good practice for the last couple of years it is not guaranteed to stand up to today\u2019s standards and vice-versa.<\/p>\n\n\n\n<p>You can&#8217;t measure everything in advance so you have to test! That&#8217;s why good troubleshooting and description of on-screen messages are very important for creating a pleasant UX.<\/p>\n\n\n\n<p>The correct handling of errors at the code level <a href=\"https:\/\/www.guru99.com\/component-testing.html\">with the help of component testing<\/a> ensures that the website is robust and error-free. Displaying <a href=\"https:\/\/uxdesign.cc\/creating-error-messages-best-practice-in-ux-design-cda3be0f5e16\">the correct error message<\/a> improves user experience and overall usability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Valid marking and clean code<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/clean-code-user-experience-1024x768.jpg\" alt=\"clean code user experience\" class=\"wp-image-2691\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/clean-code-user-experience-1024x768.jpg 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/clean-code-user-experience-300x225.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/clean-code-user-experience-768x576.jpg 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/clean-code-user-experience.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<p>A website that meets modern web design practices and standards is often <b>more powerful and reliable<\/b>. This also ensures that the webpage loads faster and is more <b>consistent between browsers<\/b> and devices. By <a href=\"https:\/\/medium.com\/mindorks\/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c\">ensuring that the code is clean<\/a>, it is easier to identify and troubleshoot any problems.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;6. Contrasts<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"684\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-contrasts-1024x684.jpg\" alt=\"ux contrasts\" class=\"wp-image-2692\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-contrasts-1024x684.jpg 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-contrasts-300x200.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-contrasts-768x513.jpg 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-contrasts-760x507.jpg 760w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-contrasts.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Choosing the right contrast for your website and its content is one of the most important design principles that you should never overlook. You can use contrast in many ways.<\/p>\n\n\n\n<p>A popular example could be when using a darker font on a brighter background or the other way around.<\/p>\n\n\n\n<p>The lack of contrast, on the other hand, <b>makes it very difficult for visitors<\/b> to consume the content. Therefore in the case of the visually impaired applying the proper amount of contrast is a must. In addition to readability, <a href=\"https:\/\/digital-photography-school.com\/use-shadow-contrast-create-dramatic-images\/\">contrast used along with shadows<\/a> <b>helps to create a hierarchy<\/b> by making the elements pop out. The connection between the two is well known in photography.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\f7. User-friendly forms<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-forms-1024x576.png\" alt=\"capturly form ux\" class=\"wp-image-2693\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-forms-1024x576.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-forms-300x169.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-forms-768x432.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-forms.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Visitors <a href=\"https:\/\/www.emailmeform.com\/blog\/why-users-hate-web-forms.html\">expressly hate forms<\/a>. The importance of forms, however, is unquestionable when it comes to websites. Without them, <b>registration would be impossible<\/b> and in addition, they provide valuable leads to the business.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>50% of <a href=\"https:\/\/wpforms.com\/online-form-statistics-facts\/\">marketers state that<\/a> onsite forms are their <strong>primary source of leads<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p>In order to get the most out of web design, it is important to build forms that are easy to use and are accessible to everyone.<\/p>\n\n\n\n<p>When designing the user experience, keep these important aspects of \u201cserving\u201d forms in mind:<\/p>\n\n\n\n<p><b>Label arrangement<\/b> &#8211; when compared to the input fields, a label can be placed above the field, inside the input field itself to the left or to the right of the input field. The registration form of Amazon and eBay is a perfect illustration of the common layout of labels. For example, if our goal is to save space on a given surface, instead of reducing the white-space between the input fields of the form (thereby creating a sense of congestion), we can place the labels in the fields themselves.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"386\" height=\"380\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ebay-reg-form.png\" alt=\"ebay reg form\" class=\"wp-image-2695\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ebay-reg-form.png 386w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ebay-reg-form-300x295.png 300w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/><\/figure><\/div>\n\n\n<p><b>Multi-step process &#8211;<\/b> it could be ideal to present a form in this format if you want to give the user immediate feedback on the process in which they are currently participating. Great for presenting a way of a shopping process.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"770\" height=\"384\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/multi-step-reg.jpg\" alt=\"multi-step reg\" class=\"wp-image-2694\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/multi-step-reg.jpg 770w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/multi-step-reg-300x150.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/multi-step-reg-768x383.jpg 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure><\/div>\n\n\n<p><b>White space<\/b> \u2013 it is customary to think of white space as some kind of &#8220;negative&#8221;, unused space, but this is a misconception! White-space segments the form and makes it transparent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. Visual hierarchy in web design<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"734\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-visual-hierarchy-1-1024x734.jpg\" alt=\"ux visual hierarchy\" class=\"wp-image-2716\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-visual-hierarchy-1-1024x734.jpg 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-visual-hierarchy-1-300x215.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-visual-hierarchy-1-768x551.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Remember, when it comes to usability and user experience optimization, <b>the goal is to encourage visitors to perform the desired action<\/b>, but in a way that is natural and enjoyable. The web designer can guide the visitor&#8217;s view in a predefined way by determining the position, color, and size of each item. In a nutshell, the visitor first sees what the web designer wants to show. The white space referred to in the previous paragraph, ie the white medium plays a significant role not only in the case of shapes but is also <a href=\"https:\/\/uxplanet.org\/the-power-of-whitespace-a1a95e45f82b?gi=889540a3c699\">a fundamental element of the hierarchy<\/a>. Visual hierarchy is closely related to the principle of simplicity. It offers the organization of website elements in a way that visitors are first oriented towards the most important parts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. Credibility<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-credibility-1024x768.jpg\" alt=\"ux credibility\" class=\"wp-image-2697\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-credibility-1024x768.jpg 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-credibility-300x225.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-credibility-768x576.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p><a href=\"https:\/\/www.smallbizgenius.net\/by-the-numbers\/ux-statistics\/#gref\">75%<\/a> of visitors judge a website\u2019s credibility <strong>only on its aesthetics<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p>Yes, that&#8217;s a big number.<\/p>\n\n\n\n<p>In order to provide the best possible user experience on a website, credibility is a key pillar of long-term success. In practice, this means to <b>spare the visitor from the unpleasant experience<\/b> of having to browse dozens of pages just to make sure your product or service is valuable. The footer section is perfect for informing the visitor about the people and contacts behind the website. Credibility is equally important on pricing pages. There are many ways to represent prices in a comprehensive way.<\/p>\n\n\n\n<p>If your prices can be viewed from the beginning and you let the user make a price comparison &#8211; that he\u2019ll do anyway one way or another &#8211; you have already taken a big step towards gaining your trust.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><div class=\"su-quote su-quote-style-default\"><div class=\"su-quote-inner su-u-clearfix su-u-trim\">Anyone who hides something is suspicious. Anyone who is suspicious is not authentic.<\/div><\/div>\n\n\n\n<p>Testimonials are also <b>very strong incentives<\/b>, as what could be more convincing than another user who has experienced your product or service?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">10. User Experience based on user expectations<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"527\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-user-expectation-1024x527.jpg\" alt=\"ux user expectation\" class=\"wp-image-2717\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-user-expectation-1024x527.jpg 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-user-expectation-300x154.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/ux-user-expectation-768x395.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><em>What is website UX?<\/em><br>A good UX builds on user groups and personas. An important aspect is <b>exploring the user&#8217;s expectations and pain-points<\/b>. The user experience so designed allows us to tailor content and experience to the specific needs of the user.<\/p>\n\n\n\n<p>According to a study by Janrain &amp; Harris Interactive, over 70% of online consumers are negatively affected when faced with promotional content on a particular website, <b>especially if it does not affect their interests<\/b>. The most important element of websites that provide a user experience that fits well with expectations is that they can typically adapt to the interests and needs of users without having to do anything to the users.<\/p>\n\n\n\n<p><i>How do you know what a user wants?<\/i><\/p>\n\n\n\n<p>You can choose from several methods depending on the amount of time, human and financial resources you can allocate for the purpose. What\u2019s really important is that you can do this kind of research yourself:<\/p>\n\n\n\n<ul>\n<li><i>User Interviews<\/i> &#8211;<br>Not only they reveal the real problems of the users, but you\u2019ll also have first-hand information about your users\u2019 expectations towards your website.<\/li>\n\n\n\n<li><i>Competitor Analysis<\/i> &#8211;<br>If you notice that your website is not converting properly, chances are that your competitors have already faced this problem. What is the structure of their side? What feedback do you get from users?<\/li>\n\n\n\n<li><i>Questionnaire<\/i> &#8211;<br>What&#8217;re the preferred devices of your visitors? What do they want to accomplish while visiting your website, ie. they want to get informed, or have specific purchasing intentions? How smooth is the overall user experience flow? Is there something that might disturb them causing drops in the conversion rates?<\/li>\n\n\n\n<li><i>Session replay and heatmap software<\/i> &#8211;<br>The qualitative analytical methods mentioned previously are excellent for exploring the motives of the users and the pain factors for them on your website.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wrapping_up\"><\/span>Wrapping up:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>What is website UX? What is a good UX? What makes a good website? Well in this article you can find answers for all your questions.<\/p>\n\n\n\n<p>User needs are constantly changing and you need to adapt to them. What has proven to be good practice for a few years now may be outdated, and which did not exist, maybe necessary today. One of the pillars of compliance in web design is the creation of a website that meets the expectations of users. Many factors define this concept, such as responsiveness, credibility, navigability, and the overall quality of the website code. Creating an effective web design is a long process. If you want to ensure a positive user experience on your site, make sure that the experience is personalized. This is the only way you can <a href=\"https:\/\/www.cloudtalk.io\/blog\/5-ways-to-turn-customers-into-your-biggest-advocates\">establish long-term relationships with your customers<\/a> and skyrocket your conversion rates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UX Guide The best thing about web design is that you always have a little extra to add to your website in order to enrich your user experience. UX Planning UX planning is a process that has three main phases: Phase I. &#8211; The research phase: I like to call it a tutorial scenario since<\/p>\n","protected":false},"author":28,"featured_media":2714,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>User Experience Guide: What Makes a Good Website - Capturly Blog<\/title>\n<meta name=\"description\" content=\"Main phases of the UX planning process. Make sure that the experience is personalized. Learn what makes the user experience attractive to your visitors.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"User Experience Guide: What Makes a Good Website - Capturly Blog\" \/>\n<meta property=\"og:description\" content=\"Main phases of the UX planning process. Make sure that the experience is personalized. Learn what makes the user experience attractive to your visitors.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Capturly Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-07T14:08:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-26T09:07:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/9-criteria-of-user-experience-illustration-1024x683.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gabriella\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriella\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/\",\"url\":\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/\",\"name\":\"User Experience Guide: What Makes a Good Website - Capturly Blog\",\"isPartOf\":{\"@id\":\"https:\/\/capturly.com\/blog\/#website\"},\"datePublished\":\"2019-06-07T14:08:39+00:00\",\"dateModified\":\"2023-09-26T09:07:19+00:00\",\"author\":{\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c\"},\"description\":\"Main phases of the UX planning process. Make sure that the experience is personalized. Learn what makes the user experience attractive to your visitors.\",\"breadcrumb\":{\"@id\":\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/capturly.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Experience Guide: What Makes a Good Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/capturly.com\/blog\/#website\",\"url\":\"https:\/\/capturly.com\/blog\/\",\"name\":\"Capturly Blog\",\"description\":\"Optimize your website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/capturly.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c\",\"name\":\"Gabriella\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g\",\"caption\":\"Gabriella\"},\"url\":\"https:\/\/capturly.com\/blog\/author\/gabriella\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"User Experience Guide: What Makes a Good Website - Capturly Blog","description":"Main phases of the UX planning process. Make sure that the experience is personalized. Learn what makes the user experience attractive to your visitors.","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:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/","og_locale":"en_US","og_type":"article","og_title":"User Experience Guide: What Makes a Good Website - Capturly Blog","og_description":"Main phases of the UX planning process. Make sure that the experience is personalized. Learn what makes the user experience attractive to your visitors.","og_url":"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/","og_site_name":"Capturly Blog","article_published_time":"2019-06-07T14:08:39+00:00","article_modified_time":"2023-09-26T09:07:19+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/06\/9-criteria-of-user-experience-illustration-1024x683.jpg","type":"image\/jpeg"}],"author":"Gabriella","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gabriella","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/","url":"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/","name":"User Experience Guide: What Makes a Good Website - Capturly Blog","isPartOf":{"@id":"https:\/\/capturly.com\/blog\/#website"},"datePublished":"2019-06-07T14:08:39+00:00","dateModified":"2023-09-26T09:07:19+00:00","author":{"@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c"},"description":"Main phases of the UX planning process. Make sure that the experience is personalized. Learn what makes the user experience attractive to your visitors.","breadcrumb":{"@id":"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/capturly.com\/blog\/user-experience-guide-what-makes-a-good-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/capturly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"User Experience Guide: What Makes a Good Website"}]},{"@type":"WebSite","@id":"https:\/\/capturly.com\/blog\/#website","url":"https:\/\/capturly.com\/blog\/","name":"Capturly Blog","description":"Optimize your website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/capturly.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c","name":"Gabriella","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g","caption":"Gabriella"},"url":"https:\/\/capturly.com\/blog\/author\/gabriella\/"}]}},"_links":{"self":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/2687"}],"collection":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/comments?post=2687"}],"version-history":[{"count":26,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/2687\/revisions"}],"predecessor-version":[{"id":9764,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/2687\/revisions\/9764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media\/2714"}],"wp:attachment":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media?parent=2687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/categories?post=2687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/tags?post=2687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}