Website Usability Checklist: 210 Points Testing

<!DOCTYPE html> <html class="no-js" dir="ltr" lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="facebook-domain-verification" content="zykscnfxq7fozc3u62oxsjhnv2a9kd" /> <meta name="apple-mobile-web-app-title" content="Plerdy"> <link rel="profile" href="https://gmpg.org/xfn/11"> <link rel="shortcut icon" href="/wp-content/themes/twentytwenty/images/favicon/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/wp-content/themes/twentytwenty/images/favicon/favicon.svg" /> <link rel="icon" type="image/png" href="/wp-content/themes/twentytwenty/images/favicon/favicon-96x96.png" sizes="96x96" /> <link rel="apple-touch-icon" sizes="180x180" href="/wp-content/themes/twentytwenty/images/favicon/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/wp-content/themes/twentytwenty/images/favicon/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="120x120" href="/wp-content/themes/twentytwenty/images/favicon/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="60x60" href="/wp-content/themes/twentytwenty/images/favicon/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="76x76" href="/wp-content/themes/twentytwenty/images/favicon/apple-touch-icon-76x76.png"> <link rel="manifest" href="/wp-content/themes/twentytwenty/images/favicon/site.webmanifest" /> <title>Website Usability Checklist: 210 Points Testing – Plerdy</title>  <meta name="description" content="Website Usability Checklist: 210 Points While building a website is difficult, maintaining user-friendliness is another and continuous responsibility...." /> <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1" /> <link rel="canonical" href="https://www.plerdy.com/usability-testing-website-checklist/" /> <meta name="generator" content="All in One SEO Pro (AIOSEO) 4.5.4" /> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="Plerdy – tools to improve conversions, usability analysis and SEO." /> <meta property="og:type" content="article" /> <meta property="og:title" content="Website Usability Checklist: 210 Points Testing – Plerdy" /> <meta property="og:description" content="Website Usability Checklist: 210 Points While building a website is difficult, maintaining user-friendliness is another and continuous responsibility...." /> <meta property="og:url" content="https://www.plerdy.com/usability-testing-website-checklist/" /> <meta property="article:published_time" content="2024-09-24T14:00:23+00:00" /> <meta property="article:modified_time" content="2024-09-24T14:26:50+00:00" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="Website Usability Checklist: 210 Points Testing – Plerdy" /> <meta name="twitter:description" content="Website Usability Checklist: 210 Points While building a website is difficult, maintaining user-friendliness is another and continuous responsibility...." /> <script type="application/ld+json" class="aioseo-schema"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.plerdy.com\/usability-testing-website-checklist\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.plerdy.com\/#listItem","position":1,"name":"Home","item":"https:\/\/www.plerdy.com\/","nextItem":"https:\/\/www.plerdy.com\/usability-testing-website-checklist\/#listItem"},{"@type":"ListItem","@id":"https:\/\/www.plerdy.com\/usability-testing-website-checklist\/#listItem","position":2,"name":"Website Usability Checklist: 210 Points Testing","previousItem":"https:\/\/www.plerdy.com\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/www.plerdy.com\/#organization","name":"Plerdy","url":"https:\/\/www.plerdy.com\/"},{"@type":"WebPage","@id":"https:\/\/www.plerdy.com\/usability-testing-website-checklist\/#webpage","url":"https:\/\/www.plerdy.com\/usability-testing-website-checklist\/","name":"Website Usability Checklist: 210 Points Testing \u2013 Plerdy","description":"Website Usability Checklist: 210 Points While building a website is difficult, maintaining user-friendliness is another and continuous responsibility....","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.plerdy.com\/#website"},"breadcrumb":{"@id":"https:\/\/www.plerdy.com\/usability-testing-website-checklist\/#breadcrumblist"},"datePublished":"2024-09-24T17:00:23+03:00","dateModified":"2024-09-24T17:26:50+03:00"},{"@type":"WebSite","@id":"https:\/\/www.plerdy.com\/#website","url":"https:\/\/www.plerdy.com\/","name":"Plerdy","description":"tools to improve conversions, usability analysis and SEO.","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.plerdy.com\/#organization"}}]} </script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="alternate" href="https://www.plerdy.com/usability-testing-website-checklist/" hreflang="en" /> <link rel="alternate" href="https://www.plerdy.com/es/usability-testing-website-checklist/" hreflang="es" /> <link rel="alternate" href="https://www.plerdy.com/ru/usability-testing-website-checklist/" hreflang="ru" /> <link rel="alternate" href="https://www.plerdy.com/ua/usability-testing-website-checklist/" hreflang="uk" /> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--accent: #0E77F1;--wp--preset--color--primary: #000000;--wp--preset--color--secondary: #6d6d6d;--wp--preset--color--subtle-background: #dcd7ca;--wp--preset--color--background: #f5efe0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 18px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 26.25px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--normal: 21px;--wp--preset--font-size--larger: 32px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <style id='rocket-lazyload-inline-css'> .rll-youtube-player{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;}.rll-youtube-player:focus-within{outline: 2px solid currentColor;outline-offset: 5px;}.rll-youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}.rll-youtube-player img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}.rll-youtube-player img:hover{-webkit-filter:brightness(75%)}.rll-youtube-player .play{height:100%;width:100%;left:0;top:0;position:absolute;background:url(https://www.plerdy.com/wp-content/plugins/rocket-lazy-load/assets/img/youtube.png) no-repeat center;background-color: transparent !important;cursor:pointer;border:none;}.wp-embed-responsive .wp-has-aspect-ratio .rll-youtube-player{position:absolute;padding-bottom:0;width:100%;height:100%;top:0;bottom:0;left:0;right:0} </style> <link rel='stylesheet' id='wpo_min-header-0-css' href='https://www.plerdy.com/wp-content/cache/wpo-minify/1742820775/assets/wpo-minify-header-3ad91afc.min.css' media='all' /> <script defer src="https://www.plerdy.com/wp-content/cache/wpo-minify/1742820775/assets/wpo-minify-header-7f750867.min.js" id="wpo_min-header-0-js"></script> <link rel="https://api.w.org/" href="https://www.plerdy.com/wp-json/" /><link rel="alternate" type="application/json" href="https://www.plerdy.com/wp-json/wp/v2/pages/300022684" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.plerdy.com/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.5.3" /> <link rel="alternate" type="application/json+oembed" href="https://www.plerdy.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.plerdy.com%2Fusability-testing-website-checklist%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://www.plerdy.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.plerdy.com%2Fusability-testing-website-checklist%2F&format=xml" /> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); </script> <link rel="alternate" hreflang="x-default" href="https://www.plerdy.com/usability-testing-website-checklist/" /><noscript><style id="rocket-lazyload-nojs-css">.rll-youtube-player, [data-lazy-src]{display:none !important;}</style></noscript> <script async src="https://www.googletagmanager.com/gtag/js?id=G-15X5JYHSHC"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-15X5JYHSHC', { 'send_page_view': false, 'custom_map': { 'dimension1': 'ga_session_id' } }); function setCustomPlerdyVisitorId() { gtag('get', 'G-15X5JYHSHC', 'session_id', function (sessionId) { if (sessionId) { // Send Session ID to GA4 gtag('event', 'set_session_id', { 'ga_session_id': sessionId }); // Send Session ID to Plerdy window.customPlerdyVisitorId = sessionId; console.log('Custom Plerdy Visitor ID:', customPlerdyVisitorId); // Send Page View event after Session ID is set gtag('event', 'page_view'); } else { setTimeout(setCustomPlerdyVisitorId, 500); } }); } setCustomPlerdyVisitorId(); </script> <script type="text/javascript"> var _suid = 278; </script> <script async type="text/javascript" src="https://a.plerdy.com/public/js/click/plerdy_ab.js?v=8bf933f"></script> </head> <body class="page-template page-template-template_checklist page-template-template_checklist-php page page-id-300022684 wp-embed-responsive singular enable-search-modal missing-post-thumbnail has-no-pagination not-showing-comments show-avatars template_checklist footer-top-visible" data-language="en" data-support="cookTrue"> <header id="site-header" class="header-footer-group" role="banner"> <span class="bg-scrol-js"></span> <div class="container"> <div class="row_header" id="layoutContainer"> <div class="col_left"> <div class="logo"> <a title="All-in-One Conversion Rate Optimization Platform" href="https://www.plerdy.com/"> <img alt="All-in-One Conversion Rate Optimization Platform" src="/wp-content/themes/twentytwenty/images/icons/plerdy-logo-black.svg"> </a> </div> </div> <div class="burger_menu"> <div class="tras"></div> <button class="burger_btn">Menu</button> <div class="col_center col_center_new--desk"> <div class="menu-%d0%bc%d0%b5%d0%bd%d1%8e-en-container"><ul id="menu-%d0%bc%d0%b5%d0%bd%d1%8e-en" class="menu"><li id="menu-item-70" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-70"><a href="#">Products</a><span class="icon"></span> <ul class="sub-menu"> <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="https://www.plerdy.com/heatmap/">Website Heatmap Tool</a></li> <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="https://www.plerdy.com/smart-forms/">Pop-Up Software</a></li> <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="https://www.plerdy.com/seo-alerts/">SEO Checker</a></li> <li id="menu-item-300052142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300052142"><a href="https://www.plerdy.com/serp-checker/">SERP Checker</a></li> <li id="menu-item-300055293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300055293"><a href="https://www.plerdy.com/ai-ux-assistant/">UX Assistant</a></li> <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="https://www.plerdy.com/user-session-recordings/">Session Replay Software</a></li> <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="https://www.plerdy.com/event-goals-tracking/">Event Tracking Tools</a></li> <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="https://www.plerdy.com/e-commerce-sales-performance/">Ecommerce Analytics</a></li> <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="https://www.plerdy.com/conversion-funnel/">Website Funnel Analysis</a></li> <li id="menu-item-300056841" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300056841"><a href="https://www.plerdy.com/ab-testing-tool/">A/B Testing Tool</a></li> <li id="menu-item-200017192" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200017192"><a href="https://www.plerdy.com/website-feedback-tool/">Website Feedback Tool</a></li> </ul> </li> <li id="menu-item-300043074" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300043074"><a href="https://www.plerdy.com/pricing/">Pricing & Plans</a></li> <li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-73"><a href="#">Learn</a><span class="icon"></span> <ul class="sub-menu"> <li id="menu-item-300029608" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029608"><a href="https://www.plerdy.com/blog/category/digital-marketing/">Digital marketing</a></li> <li id="menu-item-300055464" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300055464"><a href="https://www.plerdy.com/blog/category/content-marketing/">Content Marketing</a></li> <li id="menu-item-300029611" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029611"><a href="https://www.plerdy.com/blog/category/online-sales/">Ecommerce</a></li> <li id="menu-item-300029678" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029678"><a href="https://www.plerdy.com/blog/category/business/">Business</a></li> <li id="menu-item-300029610" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029610"><a href="https://www.plerdy.com/blog/category/seo-blog/">SEO</a></li> <li id="menu-item-300055463" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300055463"><a href="https://www.plerdy.com/blog/category/web-design/">Web Design</a></li> <li id="menu-item-300029679" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029679"><a href="https://www.plerdy.com/blog/category/seo_service/">Tools</a></li> <li id="menu-item-300029697" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029697"><a href="https://www.plerdy.com/blog/category/ebooks/">EBooks</a></li> <li id="menu-item-300029680" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029680"><a href="https://www.plerdy.com/blog/category/google-analytics/">Analytics</a></li> <li id="menu-item-300029612" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029612"><a href="https://www.plerdy.com/blog/category/guide/">Guide</a></li> <li id="menu-item-300029681" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029681"><a href="https://www.plerdy.com/blog/category/cases/">Cases</a></li> <li id="menu-item-300055466" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300055466"><a href="https://www.plerdy.com/blog/category/on-page-seo/">On-page SEO</a></li> <li id="menu-item-300029682" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029682"><a href="https://www.plerdy.com/blog/category/news/">News</a></li> <li id="menu-item-300029609" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300029609"><a href="https://www.plerdy.com/blog/category/usability/">User Experience (UX)</a></li> <li id="menu-item-300040157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300040157"><a href="https://www.plerdy.com/blog/">All Articles</a></li> <li id="menu-item-300022701" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-300022684 current_page_item menu-item-300022701"><a href="https://www.plerdy.com/usability-testing-website-checklist/" aria-current="page">Usability Testing Checklist</a></li> <li id="menu-item-300044672" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300044672"><a href="https://www.plerdy.com/shopify-checklist/">Shopify Launch Checklist</a></li> <li id="menu-item-300045664" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300045664"><a href="https://www.plerdy.com/seo-checklist/">SEO Checklist</a></li> <li id="menu-item-300052541" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300052541"><a href="https://www.plerdy.com/ecommerce-checklist/">Ecommerce Checklist</a></li> <li id="menu-item-300029250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300029250"><a href="https://www.plerdy.com/start-ux-game/">UX Game</a></li> <li id="menu-item-300035370" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300035370"><a href="https://www.plerdy.com/free-tools/">Free tools</a></li> <li id="menu-item-300057921" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300057921"><a href="https://www.plerdy.com/glossary/">Marketing Glossary</a></li> <li id="menu-item-300059692" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300059692"><a href="https://www.plerdy.com/google-analytics-4-course/">Google Analytics 4 Course</a></li> <li id="menu-item-300058273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300058273"><a href="https://www.plerdy.com/how-to-make-money-with-the-plerdy-affiliate-program/">Affiliate Program</a></li> <li id="menu-item-300040129" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300040129"><a href="https://www.plerdy.com/blog/full-page-screen-capture/">Take a Full-Page Screenshot in Chrome</a></li> <li id="menu-item-300040130" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300040130"><a href="https://www.plerdy.com/website-seo-checker-extension/">Free Chrome Extensions for SEO</a></li> </ul> </li> <li id="menu-item-300038035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300038035"><a href="https://www.plerdy.com/book-a-call/">Book a Demo</a></li> </ul></div> <div class="col_right col_right--mob"> <a class="btn btn_blue_txt" target="_blank" href="https://a.plerdy.com/auth/login"> Sign In </a> <a id="try_it_free" class="btn btn_blue" target="_blank" href="https://a.plerdy.com/auth/register"> Try It Free </a> </div> </div> <div class="col_right col_right--desk"> <a class="btn btn_blue_txt" target="_blank" href="https://a.plerdy.com/auth/login"> Sign In </a> <a id="try_it_free" class="btn btn_blue" target="_blank" href="https://a.plerdy.com/auth/register"> Try It Free </a> </div> </div> <script> document.addEventListener("DOMContentLoaded", function () { var burgerBtn = document.querySelector('.burger_btn'); var menuContent = document.querySelector('.burger_menu .col_center'); var body = document.body; if (burgerBtn && menuContent) { burgerBtn.addEventListener('click', function () { var isMenuOpen = burgerBtn.classList.contains('open'); var ancestorElement = document.querySelector(".current-menu-ancestor"); menuContent.style.display = isMenuOpen ? 'none' : 'block'; if (isMenuOpen) { burgerBtn.style.backgroundImage = 'url(/wp-content/themes/twentytwenty/images/menu/mobile_menu.svg)'; burgerBtn.classList.remove('open'); body.classList.remove('no-scroll'); } else { burgerBtn.style.backgroundImage = 'url(/wp-content/themes/twentytwenty/images/menu/Close.svg)'; burgerBtn.classList.add('open'); body.classList.add('no-scroll'); if (ancestorElement && ancestorElement.querySelector(".sub-menu") && !ancestorElement.classList.contains("sub_menu_open")) { ancestorElement.click(); } } }); } }); /* document.addEventListener("DOMContentLoaded", function () { var colRight = document.querySelector('.col_right'); var colCenter = document.querySelector('.col_center'); function moveButtons() { colRight.classList.remove('hidden'); if (window.innerWidth < 767) { if (colRight && colCenter && !colCenter.contains(colRight)) { colCenter.appendChild(colRight); } } else { if (colRight && colCenter.contains(colRight)) { document.querySelector('.burger_menu').appendChild(colRight); } } } moveButtons(); window.addEventListener('resize', moveButtons); }); */ </script> </div> </div> </header> <link rel='stylesheet' href='/wp-content/themes/twentytwenty/assets/css/style_checklist.css?ver=1.8' media='all' /> <div class="head-checklist smart-forms checklist_en"> <div class=""> <h1 class="big-h">Website Usability Checklist: 210 Points</h1> <div class="sub_container"> <p>While building a website is difficult, maintaining user-friendliness is another and continuous responsibility. Changing any one component can greatly affect the whole website. Look no further than this Website Usability Checklist to be sure your website is really usable. 210 Points Test!</p> </div> </div> </div> <div class="main-content"> <div class="progress"> <div class="chekcer_c"> <ul class="items items-social-buttons_blog share-list"> <li class="facebook_share share-list__item" style="margin-top: 0px;"> <a class="share-list__link social-fb" target="_blank" href='https://www.facebook.com/sharer.php?u=plerdy.com/usability-testing-website-checklist/' onclick="ga('send', 'event', 'social', 'fb_share', 'https://plerdy.com/usability-testing-website-checklist/');" rel="noopener"></a> </li> <li class="share-list__item twitter_share"> <a class="share-list__link social-tw" target="_blank" href='https://twitter.com/intent/tweet?url=plerdy.com/usability-testing-website-checklist/' data-counturl='https://dev.twitter.com/web/tweet-button' onclick="ga('send', 'event', 'social', 'twitter_share', 'https://plerdy.com/usability-testing-website-checklist/');" rel="noopener"></a> </li> <li class="share-list__item linkedin_share"> <a class="share-list__link social-li" target="_blank" href='https://www.linkedin.com/shareArticle?url=plerdy.com/usability-testing-website-checklist/' onclick="ga('send', 'event', 'social', 'LinkedIn_share', 'https://plerdy.com/usability-testing-website-checklist/');" rel="noopener"></a> </li> </ul> <span class="progress__count">0/X</span> <input class="progress__reset" type="reset" value="Reset" title="Reset Checkboxes" tabindex="0"> </div> <span class="progress__border"></span> <span class="progress__bar"></span> </div> <div class="container"> <div class="row_links"> <b>Articles on the topic of usability:</b> <a href="https://www.plerdy.com/blog/usability-testing-tools/">13 Best Usability Testing Tools</a> <a href="https://www.plerdy.com/blog/usability-audit-of-tools-shop/">Ecommerce UX Audit</a> <a href="https://www.plerdy.com/blog/usability-audit/">Website Usability Audit and Analytics</a> <a href="https://www.plerdy.com/blog/what-is-website-usability-testing/">Website Usability Testing</a> <a href="https://www.plerdy.com/blog/usability-online-store/">Ecommerce Usability</a> <a href="https://www.plerdy.com/blog/top-14-usability-testing-methods/">Top 14 Usability Testing Methods</a> </div> </div> <div class="container wrappChecklist"> <div> <section class="checklist"> <h2 class="checklist__title">💣 General recommendations for usability</h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Slogan describing the website next to the logo</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17092" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0005.png" alt="website-ux-design-mistakes-5" />Usability testing proves that the logo should briefly inform the user about the content and topics of the eCommerce website, thereby enhancing the user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Quality marks and Certifications</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17093" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0006.png" alt="website-ux-design-mistakes-6" />According to the usability testing on conversion, for good UX the website should contain quality certificates, if any.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title"> Information about the eCommerce website and the history of the brand </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17094" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0007.png" alt="website-ux-design-mistakes-7" />According to usability testing, this information is required to improve the confidence factor and user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Geo-targeting</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17095" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0008.png" alt="website-ux-design-mistakes-8" />An eCommerce website must be optimized for geo-targeting: information must be presented in the appropriate language (or offer a language selection). In addition, the data must be presented in the usual metric system.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Choosing a language on the website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17096" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0009.png" alt="website-ux-design-mistakes-9" />If the website involves several languages, then the language selection must be in a conspicuous place (in the header)</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Intuitive icons</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17097" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0010.png" alt="website-ux-design-mistakes-10" />Usability testing shows that all text items on the website should have icons if possible. It improves UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">eCommerce Website Interface uniformity</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16971" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0001.jpeg" alt="website-design-mistakes-1" />Usability testing indicates that a website's layout, including the header, footer, and main menu, should remain consistent across all pages, with possible exceptions for the basket and checkout pages.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Uniqueness and clarity of the eCommerce website design </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17098" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0011.png" alt="website-ux-design-mistakes-11" />Entering the website, the user understands the theme of a website in 3 seconds: the slogan and the images in the header, page title, etc.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ease of interaction with ecommerce website logo</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17099" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0012.png" alt="website-ux-design-mistakes-12" />The website logo should be clickable and display on the main page, but should not update it if it is already on it.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Unique favicon</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17100" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0013.png" alt="website-ux-design-mistakes-13" /> The website's favicon should align with the logo for easy recognition. Usability testing shows a distinctive favicon makes it quicker to locate the site among multiple open browser tabs.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Clear terminology</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17101" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0014.png" alt="website-ux-design-mistakes-14" />Menu items, buttons, and links should not use obscure terms or language.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ability to see a company representative</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17102" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0015.png" alt="website-ux-design-mistakes-15" /> Include an "About Us" page on the website, featuring detailed information about your company. This should encompass interior and exterior photos of the office, images of staff engaging with clients, and insights into the production or work processes.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The principle of nonviolence</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17103" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0016.png" alt="website-ux-design-mistakes-16" /> Media, such as music or video, should not autoplay on the website. Usability testing reveals that unsolicited media playback can annoy visitors, prompting them to leave the site, negatively affecting user experience. If you use this technique for whatever reason, make sure that the stop button of playback is in a prominent place. If the design of your website provides pop-up Windows, they must also have a visible close button (it was close, but not navigate to another page). Thus, the visitor will not waste time finding it. He will close the tab with your website.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">User-friendly design</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17104" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0017.png" alt="website-ux-design-mistakes-17" /> The design of an eCommerce website should present a minimum of difficulties. The visitor is invited to execute only needed steps: a. all that can be done in software is done programmatically (for example, populated with the delivery address, based on the user's location); b. the action queries of the visitor and choices change dynamically depending on the parameters of the product, the visitor data, etc. for example, if the dress is only available in one color, the user is not forced to choose the color.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The explanation for deactivated items</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17105" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0018.png" alt="website-ux-design-mistakes-18" />When you hover over an inactive button or link, a brief explanation should appear why the button/link is inactive.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Honest buttons</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17106" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0019.png" alt="website-ux-design-mistakes-19" />The standard functionality of any button is to launch an action, not go to another page unless the button clearly suggests this.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">User-friendly buttons</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16972" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0002.jpeg" alt="website-design-mistakes-2" />A button is clickable, not the text on it. You can also make a small space close to it clickable (but not if another button is located next to it).</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Thought-out delete buttons and clean forms</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17107" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0020.png" alt="website-ux-design-mistakes-20" /> Buttons that cancel actions, or clear completed data, are located at a sufficient distance from the Send or Confirm buttons, and differ from them. This is necessary so that the visitor does not click on them by mistake.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Standardization of interaction</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17108" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0021.png" alt="website-ux-design-mistakes-21" /> The design of all links should be familiar - blue, underlined, the cursor changes to clickable (hand icon) when hovering over the link. After a click, the link changes its color (the standard is purple).</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Clear and relevant H1</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17109" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0022.png" alt="website-ux-design-mistakes-22" /> According to usability testing, all pages of an eCommerce website should include a heading that is entirely consistent with its content for good UX. That is H1, not the title, because, with many open tabs in the browser, the title is not visible. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Standardization</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17110" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0023.png" alt="website-ux-design-mistakes-23" /> Following usability testing, the names of menu items should be familiar to the visitor ("don't make me think") – "Contacts," "About Us," "shipping," and so on, without much creativity. This provides a good UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Convenient posting search</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17111" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0024.png" alt="website-ux-design-mistakes-24" /> Usability testing proves that the design of the website must be familiar. For example, the search box should be in a conspicuous place – the top left or top center of the page. This provides good UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The ability to quickly and easily interact</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16973" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0003.jpeg" alt="website-design-mistakes-3" /> According to usability testing for better UX, a commercial website must provide the ability for users to leave feedback (comments) to the product, services, articles, best, without registration. In addition, the text is saved if the user incorrectly entered the captcha before sending it or accidentally close the page. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Authorization using social networks</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16974" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0004.jpeg" alt="website-design-mistakes-4" /> Those who would not register in a separate form will only encourage still to check in on your website. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Spam protection</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16975" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0005.jpeg" alt="website-design-mistakes-5" /> Protects automatic and manual spam comments and input (captcha, moderator pre - or postprimary reviews, check third-party links in comments, etc.). Otherwise, words can turn into a cesspool where the visitor will find it difficult to find helpful information. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">No empty sections in the website design</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info">For a good UX, if there are currently no products in the category, it is temporarily hidden.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Noticeable Apply button</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16976" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0006.jpeg" alt="website-design-mistakes-6" />" This is relevant when using a delayed filter when the visitor activates the filter only after selecting all the parameters he needs."</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Privacy policy</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16977" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0007.jpeg" alt="website-design-mistakes-7" /> The client notices that all personal data he enters in the and payment process is protected (icons of the applied security technologies, relevant explanations to the fields). At the same time, the process doesn't come into an examination, not to damage the user experience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Opening in a new tab</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16978" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0008.jpeg" alt="website-design-mistakes-8" /> Optional - the design of the current page provides detailed instructions for payment, and the page of the payment system opens in a new tab. Thus, the client has not been left alone with a possibly unfamiliar payment system, which positively affects the user experience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">No points in title and content</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16979" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0009.jpeg" alt="website-design-mistakes-9" />Question marks, exclamation points, and ellipsis are only allowed.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Images quality </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16980" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0010.jpeg" alt="website-design-mistakes-10" /> All images on the website are of high quality, clear, free of defects, and third-party watermarks. This contributes to a good user experience on the website. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Reason for the use of images</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16980" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0010.jpeg" alt="website-design-mistakes-10" />All images are informative, not just decorative, do not "overcolor" the website.</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">⚙️ Check the usability of the product page</h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Delivery information</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17147" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0060.png" alt="website-ux-design-mistakes-60" /> A detailed and precise description of delivery terms and conditions, which can be immediately found on the website, will help the buyer understand that the chosen product will be delivered at a specific time and for a specific price. This greatly enhances the user experience, especially when the goods are shipped only after prepayment.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Photo Zoom</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17148" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0061.png" alt="website-ux-design-mistakes-61" />Using the zoom function for photos improves product perception and UX according to usability testing.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Product Image Gallery</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17149" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0062.png" alt="website-ux-design-mistakes-62" />The product card provides gallery feature</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Return information on the product page for a better user experience</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17150" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0063.png" alt="website-ux-design-mistakes-63" />According to consumer law, the user has the right to return the goods within 14 days after purchase. Indicate this on the product page. This positively affects the user experience and increases conversion.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The optimal amount of goods </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17067" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0097.jpeg" alt="website-design-mistakes-97" />The category page of the eCommerce website displays 10-15 products by default.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ease of presentation</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17068" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0098.jpeg" alt="website-design-mistakes-98" /> The design of an eCommerce website should allow the user to change the number of displayed items on the page or show all items on one page. The category page should suggest a choice of presentation: advanced (showcase, table, tiles), optimal (list), and minimum (price list). The advanced option works for users who want to see as much information as possible about the product directly on the catalog page. The minimum option works for visitors who are interested in price and availability. The optimal is an average option. This contributes to a good user experience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Focus on the real situation</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17069" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0099.jpeg" alt="website-design-mistakes-99" /> If the visitor can search for any product in different categories, the website design should display various categories. For example, visitors often confuse the terms "access point" and "wifi router", so you can put the same model in both categories. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Full product information</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17070" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0100.jpeg" alt="website-design-mistakes-100" />"According to the results of usability testing, each product on the catalog page of an eCommerce website should contain the following information:<ul> <li>photo;</li> <li>name;</li> <li>price;</li> <li>promo, sale, new product, bestseller, etc. label - if it is included in these categories;</li> <li>buy button.</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">An extended list of characteristics</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17071" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0101.jpeg" alt="website-design-mistakes-101" /> Optional: the category page also provides information about the main characteristics in a pop-up window when the cursor is on the product, expanding by clicking on the "show more," etc. You can provide this functionality for the extended presentation of goods in the catalog (showcase). </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Actual quantity of goods</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17072" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0102.jpeg" alt="website-design-mistakes-102" />Optional: the category page shows the exact or approximate quantity of the product in stock.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Noticeable price tag</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17073" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0103.jpeg" alt="website-design-mistakes-103" />For good UX, the price is noticeable, written in large size, or marked differently.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Currency indication</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17073" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0103.jpeg" alt="website-design-mistakes-103" /> If the website accepts multiple currencies, for good UX, the currency switch must be placed in a conspicuous place (in the header) and on the category page </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Explanation of non-pricing</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17074" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0104.jpeg" alt="website-design-mistakes-104" /> If the price is not indicated, then the reason for non-pricing is reported ("The product is discontinued," "Unknown price") or a recommendation to clarify the value with the Manager. In this case, the Manager's contacts or a link to them are indicated. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Different angles</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17075" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0105.jpeg" alt="website-design-mistakes-105" /> An eCommerce website should provide several product photos on the product pages, from a different angle - so that a user can see all the features of the design (if it's hardware), tailoring (if its clothes), etc. Thus, it provides a good user experience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Examples of application/usage/serving</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17076" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0106.jpeg" alt="website-design-mistakes-106" /> In some cases, it makes sense to post a photo of the product in use, work, interior, etc. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Video unpacking / inspection</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17077" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0107.jpeg" alt="website-design-mistakes-107" />Detailed video; high resolution is desirable</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The relative uniformity of characteristics</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17055" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0085.jpeg" alt="website-design-mistakes-85" /> According to usability testing results, the same features in different products should be called and presented the same way – in the same units of measurement, metric system, etc. This will help the user compare other product models and provide a good user experience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Clues to non-obvious characteristics/terms, etc.</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17078" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0108.jpeg" alt="website-design-mistakes-108" /> When hovering over the parameter name or clicking on the question mark icon next to it, the pop-up window displays all the information. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Information about the warranty period for the product</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17079" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0109.jpeg" alt="website-design-mistakes-109" /> The eCommerce website should contain detailed information about the possibility of returning the product (optional). </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Information about the item package</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17080" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0110.jpeg" alt="website-design-mistakes-110" /> Usability testing proves that for good UX, you must specify all items of product that come standard in the package. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Information on the country of manufacturer</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17081" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0111.jpeg" alt="website-design-mistakes-111" />This feature is optional.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Important data only</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17082" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0112.jpeg" alt="website-design-mistakes-112" /> According to usability testing results, the product page (item card) must not contain information and advertisements that distract the visitor from exploring the product. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Additional information</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17083" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0113.jpeg" alt="website-design-mistakes-113" /> For good UX, the product page should contain a clear and useful product description - reviews, social networks (not for all topics), rating the product. Rating is possible in one click. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Viewing blocks of information</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17083" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0113.jpeg" alt="website-design-mistakes-113" /> The product description, specifications, reviews, and other information are placed horizontally on the page, in tabs, so that the visitor does not have to scroll down the page.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Similar suggestions</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17084" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0114.jpeg" alt="website-design-mistakes-114" />If the product is discontinued or not available, the website should offer links to the analogs. This provides good UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Uniform image galleries</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17085" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0115.jpeg" alt="website-design-mistakes-115" />Preview and large photos are the same for all product pages; The sizes of the preview in the catalog are the same for all catalogs/product categories</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ability to scale photos</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17086" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0116.jpeg" alt="website-design-mistakes-116" /> The user can view each of the product's photos in high resolution (for example, by clicking on the preview) to see all the details. In addition, an online magnifier can be used. This is especially true for images with delicate details - screenshots, etc. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ability to customize the video </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17087" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0117.jpeg" alt="website-design-mistakes-117" /> This includes scaling the video, adjusting or completely mute the sound, and pausing the video. </div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">🗂 Product filtering is an important influence on usability </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Advanced filter</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17038" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0068.jpeg" alt="website-design-mistakes-68" /> Suppose your customer's current choice of office not only by location but by other criteria – work schedule, range, work with legal entities or individuals. In that case, a commercial website must provide a possibility for such filtering. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Delayed filter</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17039" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0069.jpeg" alt="website-design-mistakes-69" />When a user is redirected to a page with filtered results immediately after selecting one filter, an instant filter is less preferable, because the visitor is forced to wait for the page to load and again set the next filter he needs on the page.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The minimum time to synchronize dependent filters</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info">Synchronization starts without reloading the page. If this requires some time, a message or a progress bar informing the user is displayed.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The required minimum values</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17040" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0070.jpeg" alt="website-design-mistakes-70" /> For good UX, the filter is not overloaded with choices. Instead, charges are standardized or, if there are too many options - combined into ranges. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The number of filtered items</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17041" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0071.jpeg" alt="website-design-mistakes-71" />The design of the selection filter displays the number of positions on the filter. The same message can be used as a button/link to use the filter.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ready URL for results</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17042" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0072.jpeg" alt="website-design-mistakes-72" />URL of the page changes when setting the filters, so the visitor can share the page with friends or keep it in bookmarks.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Quick filter cleaning</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"> For good UX, after resetting the filter, the catalog page returns to the initial state. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Clarity</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17043" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0073.jpeg" alt="website-design-mistakes-73" /> The user can see that a product is added to the comparison. For example, animation of the movement of goods to contrast can show the visitor where he can see the final comparison. It is proved to be good for UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Dynamic</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17044" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0074.jpeg" alt="website-design-mistakes-74" /> The link text changes after the product are added to comparison so that the visitor sees which products he has already selected for comparison. In addition, the ability to add a product to the comparison is available both on the catalog pages and on the product page, and you can remove the product from the comparison in the catalog. There is a quick button (link) to remove the product from the list on the product comparison page. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Visibility</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17045" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0075.jpeg" alt="website-design-mistakes-75" /> For a good UX, the link's location to compare products is conspicuous, for example, near the basket. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Adaptability</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17046" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0076.jpeg" alt="website-design-mistakes-76" />The design of the product comparison page is optimized for the maximum number of displayed products, in various browsers and at different display resolutions. If this amount is exceeded, the goods are not added to the comparison, and the corresponding message is issued to the visitor. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Focus on popular products</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17047" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0077.jpeg" alt="website-design-mistakes-77" /> Products in categories are sorted so that the most popular, best-selling products, products with high ratings, are placed first. This helps the user make a choice when he does not know precisely what he needs and prefers to focus on the choice of the majority. And the goods discontinued are at the very end of the list of goods in the category. This improves UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Custom sorting</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17048" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0078.jpeg" alt="website-design-mistakes-78" />"If necessary, the website design should provide sorting based on the needs of the target audience and the characteristics of the product. Standard options:<ul> <li>from cheap to expensive;</li> <li>from expensive to cheap;</li> <li>alphabetically;</li> <li>by rating;</li> <li>the availability of discounts;</li> <li>availability on stock.</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The selection of the applied filters</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17049" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0079.jpeg" alt="website-design-mistakes-79" /> For good UX, the user is provided with the information of what sorting criteria are currently applied. Thus, the sorting field contains the corresponding value next to the arrow or triangle field, indicating sorting from larger to smaller or from smaller to larger. </div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">💻 User registration </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Minimum of fields</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17023" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0053.jpeg" alt="website-design-mistakes-53" /> When registering and placing an order, the number of required fields must be minimal, name, and contact: email and/or phone. The design of each additional required field explains why we need this information. If there are many fields in the registration form, they should be visually grouped and have titles. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Required visibility to fill in the fields</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17024" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0054.jpeg" alt="website-design-mistakes-54" /> They are marked or highlighted in the usual way for the user (asterisk).</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The ability to see the password when entering</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17025" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0055.jpeg" alt="website-design-mistakes-55" /> This works for mobile devices, where many typos are made, but also suitable for PCs. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">One fields column</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17026" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0056.jpeg" alt="website-design-mistakes-56" />Users often do not notice the fields in the second column</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Easy form filling</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17027" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0057.jpeg" alt="website-design-mistakes-57" /> Page registration (or checkout) design provides that the user sees only the application form. If you place forms for multiple options on one screen – the user may not understand that they are different and fill out all forms. The transition between the registration fields is possible using a mouse or the Tab key. When the form opens, the cursor appears in the first field; then, the filling field is visually different from other fields. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Use of benefits and autocomplete</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17028" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0058.jpeg" alt="website-design-mistakes-58" />To improve user experience it is recommended to provide some instructions for filling forms and fields. Using AutoFill will also improve UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Simple validation of input data</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17029" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0059.jpeg" alt="website-design-mistakes-59" /> A website should provide a template of the correctly specified date of birth, email addresses, etc. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Help when entering the phone number</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17030" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0060.jpeg" alt="website-design-mistakes-60" /> The previous paragraph obliges us to help the user enter a phone number. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Instant check</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17031" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0061.jpeg" alt="website-design-mistakes-61" /> Each field is checked for correctness, and the page does not reload. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">User promotion</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info">A correctly filled field is highlighted, for example, in green.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Error notification</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17031" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0061.jpeg" alt="website-design-mistakes-61" /> If the visitor made a mistake in entering data, he receives a notification about which field he made a mistake in (this field is also highlighted in color), why this could happen, how to fix it. The notification is located next to the error field, directly on the page, not in a separate window, where you're going to need to click the "ok" button. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Minimum of trouble in case of error</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17032" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0062.jpeg" alt="website-design-mistakes-62" /> If one field is filled in incorrectly, correctly filled areas are not reset. Instead, the data entered by the visitor is remembered, so if the registration or placing an order was interrupted, he does not have to re-enter the information. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Convenient information correction</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17033" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0063.jpeg" alt="website-design-mistakes-63" /> In registering or placing an order, the visitor can always go back one step and correct the data. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Conviction to sign up</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17034" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0064.jpeg" alt="website-design-mistakes-64" />It gives the user some benefits, and information about this should be placed next to the registration button.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Minimum fields</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17035" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0065.jpeg" alt="website-design-mistakes-65" /> We use the email address as the login by default to breed users and remove the "login" field. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Registration process simplification</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17036" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0066.jpeg" alt="website-design-mistakes-66" />In addition to the standard registration, the user is offered authorization via social networks. It is proved to be good for UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Subscription to newsletter</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17037" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0067.jpeg" alt="website-design-mistakes-67" /> When registering, the visitor has the opportunity to refuse to receive the newsletter - uncheck the appropriate box. Or, which is more respectful to the client, he can check the box and subscribe to the newsletter.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Background check</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"> It is offered automatically. The client does not need to fill out anything for it: the data from the order (name, email) is used, and the password is generated automatically. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Registration confirmation</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"> After registration is completed, the visitor receives a letter with registration data. This also applies to “background” registration.</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">💸 Usability analysis of the buying process </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Credit Information</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17115" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0028.png" alt="website-ux-design-mistakes-28" />Informing the user about the possibility of credit card payments improves the user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Choice of currency</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17116" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0029.png" alt="website-ux-design-mistakes-29" /> Usability testing shows that if the company provides sales in different currencies, it is necessary to indicate this on the website.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The standard algorithm of sending to trash</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17000" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0030.jpeg" alt="website-design-mistakes-30" />"When adding goods to the basket:<ul> <li>the user receives a pop-up notification about adding the product to the basket;</li> <li>the user sees the animation of sending the goods to the basket (plus he understands where the basket is if he has not noticed it before);</li> <li>the basket icon changes visually, showing the number of items in it and the total amount.</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Fixed list of goods on the eCommerce website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17001" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0031.jpeg" alt="website-design-mistakes-31" />The list is visible at all stages of ordering. This contributes to a good user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Minimum actions</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17002" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0032.jpeg" alt="website-design-mistakes-32" /> If the user is registered, then the address, name, telephone, and other information fill out the order form automatically so that the client does not waste time on that again. In this case, the visitor can always return to the previous stages of placing an order and then continue without entering the data again. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Clarity</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17003" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0033.jpeg" alt="website-design-mistakes-33" />Usability testing proves that in cases where the order is made in several stages, it should be obvious to the user how many stages are left.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ability to order with our without registration</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"> Suppose the user started entering data without registration but then decided to register – no need to force him to enter it all over again. Instead, entered data is stored, including phone, city of delivery, and pulled up to the appropriate field after registration. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Order confirmation</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17004" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0034.jpeg" alt="website-design-mistakes-34" />After the completion of the order, the user sees thank you page and explanations for further action on both parts.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Personal account</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17005" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0035.jpeg" alt="website-design-mistakes-35" /> If the user is registered, all orders, including completed, are stored in his account, and he can view them at any time. This improves UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Dynamic modules of purchase</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17006" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0036.jpeg" alt="website-design-mistakes-36" /> If the website design involves payment and delivery options, payment options should vary depending on the chosen delivery method. For example, if pickup is selected, there's no need to offer a cash-on-delivery option. Thoughtless actions adversely affect UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Proof of payment</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17007" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0037.jpeg" alt="website-design-mistakes-37" /> If the payment was successful, the visitor receives a message and a link to return to the website.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Minimum of actions</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17008" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0038.jpeg" alt="website-design-mistakes-38" />Usability testing shows that the delivery data for the registered user must be saved so there was no need to re-enter it during the next purchase. This has a positive effect on UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Calculate the delivery cost</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17009" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0039.jpeg" alt="website-design-mistakes-39" />If the website doesn't provide such, connect the link to the calculator on the carrier's website.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Automatic calculation of the delivery cost</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17009" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0039.jpeg" alt="website-design-mistakes-39" />It is included in the total amount of the order.</div> </div> </li> </ul> </section> </div> <div> <section class="checklist"> <h2 class="checklist__title">📈 Additional elements that affect sales</h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Sales block on the website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17123" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0036.png" alt="website-ux-design-mistakes-36" />Usability tests show that a sales block enhances conversion rates and user experience on ecommerce sites.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Shares block on the website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17124" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0037.png" alt="website-ux-design-mistakes-37" />According to usability testing, the shares block on an eCommerce website improves the conversion rate and the rate of additional purchases, improving the user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Post-purchase review incentive functionality</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17125" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0038.png" alt="website-ux-design-mistakes-38" />Post-purchase reviews improve engagement with the audience and provide additional product information from real users.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Warranty </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17126" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0039.png" alt="website-ux-design-mistakes-39" />Offering a warranty enhances confidentiality and user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Section “Recently Viewed” on the website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17127" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0040.png" alt="website-ux-design-mistakes-40" /> According to the usability testing results, it should be available on any page of the website, so the user could easily find previously viewed products. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The ability to make a quick order</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17015" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0045.jpeg" alt="website-design-mistakes-45" />The design the website must provide an "order in 1 click" button, callback request, etc. According to usability testing, it is good for UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Interesting offers</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17016" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0046.jpeg" alt="website-design-mistakes-46" /> To optimize user experience, include categories like 'Sale,' 'Promotions,' 'New,' and 'Popular' in the eCommerce catalog. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Additional categories provided in the website design</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17017" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0047.jpeg" alt="website-design-mistakes-47" /> The categories of an eCommerce website should include links to popular goods that don't have their own category. For example, the routers' category refers to "Routers for home," "Routers Wi-Fi," Routers TP-Link," etc. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Label with interesting offers</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17018" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0048.jpeg" alt="website-design-mistakes-48" /> If the product comes at a discount or is included in the categories of "New”, "Top Sales," then the product image must have a corresponding label icon. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ease of calculation of the cost of delivery</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17019" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0049.jpeg" alt="website-design-mistakes-49" /> We can help with that if the product characteristics include information about its weight and dimensions, ideally about the size of the package. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Information about delivery and payment</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17020" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0050.jpeg" alt="website-design-mistakes-50" /> Usability testing proves that the website must contain methods of delivery, estimated cost, terms, or references to the relevant section for a good user experience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Wish list</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17021" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0051.jpeg" alt="website-design-mistakes-51" />This is an option.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Related products</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17022" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0052.jpeg" alt="website-design-mistakes-52" /> If the product has accessories, nozzles, components that can be purchased separately, they are displayed in the "Related products" or "Frequently bought together." </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">No contrivedness!</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17022" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0052.jpeg" alt="website-design-mistakes-52" />"Related products" and "Similar goods" blocks must contain actually related goods, not randomly selected.</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">🚀 The first touch of a potential customer </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">State Toll-Free Number</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17112" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0025.png" alt="website-ux-design-mistakes-25" />According to usability testing, a phone number starting at 0-800 increases call conversions. In addition, calling such a number is free for the client, which means that potential buyers are more likely to use it instead of paid numbers.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">FAQ </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17113" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0026.png" alt="website-ux-design-mistakes-26" />It helps to find answers to popular questions.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Minimum Contacts</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17114" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0027.png" alt="website-ux-design-mistakes-27" />Too many contact options may prevent a visitor from making this choice at all. This negatively affects UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Pinning contacts</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16981" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0011.jpeg" alt="website-design-mistakes-11" />Website design provides for the same positioning of primary contacts on all pages. This is good for UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Feedback form</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16982" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0012.jpeg" alt="website-design-mistakes-12" /> Replacement with the "Contact the Director" form is possible. That won't affect UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Separate display of contacts for each point</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16983" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0013.jpeg" alt="website-design-mistakes-13" /> If you have multiple offices, the website's design must provide information for each of them (use tabs, script loading after you select office from the list, etc.). Nobody wants to scroll through a huge list of addresses on a page (not all users are advanced enough to use Ctrl F). </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Point selection from both the list and the map</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16984" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0014.jpeg" alt="website-design-mistakes-14" /> The options map is particularly convenient for clients in a strange city and has no idea how one or the other street is close to their current location. But for a local, this feature is useful. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Feedback Form Standardization</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16985" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0015.jpeg" alt="website-design-mistakes-15" /> Ensure the contact page layout is intuitive, making feedback forms for questions, complaints, or orders easily accessible. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ease of use</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16985" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0015.jpeg" alt="website-design-mistakes-15" /> For good UX, the feedback form is available without registration. The visitor is only required to leave his contact information (email, phone). The message's text is not lost if the visitor has incorrectly entered the captcha or accidentally closed the page. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">LongMessages</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16986" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0016.jpeg" alt="website-design-mistakes-16" /> The form allows the visitor to leave a detailed message. When you enter a large text, the form design allows looking at all the entered text quickly – for example, a scrollbar appears on the right to scroll. It is proved to be good for UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Feedback</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16987" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0017.jpeg" alt="website-design-mistakes-17" /> After sending a message, the visitor receives an email stating that his message was received. The email must include information about approximate response time. For example, if the visitor left his contact phone – he gets a text message on his mobile. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Accessible location of consultant icon on the eCommerce website </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16988" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0018.jpeg" alt="website-design-mistakes-18" /> It is located in the obvious area of the website for better UX. However, it does not cover the content either on desktop or mobile devices, does not interfere with the visitor's interaction. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Available 24 hours a day</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16989" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0019.jpeg" alt="website-design-mistakes-19" />Usability testing shows that for good user experience the website must provide the opportunity to contact their support both in working hours and after hours. Chat must be provided for that purpose.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Response Timeout Information</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16989" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0019.jpeg" alt="website-design-mistakes-19" />For good UX, online consultant (chat support) informs the visitor about approximate response time.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Feedback if no operator</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16990" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0020.jpeg" alt="website-design-mistakes-20" />When sending a message, if the operator is offline, the visitor is suggested to leave his contact (email, social network, number of the messenger) so the company could contact him during working hours.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Real employee</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16991" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0021.jpeg" alt="website-design-mistakes-21" />In chat support, the visitor sees a real photo of the operator (not the standard image from the image Bank or the company logo), his name. Scripts (automatic responses) of the online consultant are well thought to avoid any awkward answers, unpleasant experience of communicating with the bot, etc.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Instant interaction with managers</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16992" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0022.jpeg" alt="website-design-mistakes-22" />The basket provides an opportunity to contact managers and get help if something is unclear during the purchase.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Quick help</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16993" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0023.jpeg" alt="website-design-mistakes-23" />"Based on the results of usability testing, the client is offered assistance in placing the order at all stages :<ul> <li>title chat support/online consultant changes its caption, for example, ""Need help with placing an order?"";</li> <li>Obvious location of the Manager's contacts and offer to call/contact for help.</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Help when error</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16994" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0024.jpeg" alt="website-design-mistakes-24" /> If an error occurred during payment, a possible reason for the failure is indicated, and a retry is offered. </div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">🧱 Website structure as part of usability </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The standard layout of the key elements</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17132" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0045.png" alt="website-ux-design-mistakes-45" />Usability testing shows that all of the standard elements should be at the usual places (the principle of "don't make me think"): a. company logo in the upper left, b. contacts – top right, c. the search bar at the top left or top center.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Tuning F Scanning Patterns</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17133" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0046.png" alt="website-ux-design-mistakes-46" />Our gaze slides from left to right therefore the most significant content must be placed on the left.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Compliance with the F-scan pattern</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17052" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0082.jpeg" alt="website-design-mistakes-82" /> A more advanced level is the location of the most important elements (USP, search bar, contacts, article headings) on the page in the letter F. This is how the user's view slides, according to usability testing. The most prominent place in the upper left corner.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Thoughtful arrangement of blocks on an eCommerce website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17134" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0047.png" alt="website-ux-design-mistakes-47" />We place them on the first screen so that the visitor sees that there is also something interesting below. In this case, the visitor will scroll down the page. If, for example, you place an empty strip along the edge of the first screen, the visitor will decide that there is nothing below.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">No wide horizontal scrolls</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17053" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0083.jpeg" alt="website-design-mistakes-83" />According to usability testing, they can be perceived as a barrier and the user will not scroll through the website page.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Clickable breadcrumbs</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17135" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0048.png" alt="website-ux-design-mistakes-48" /> They help the visitor to understand which subsection of the site he is in and how to go to the higher sections in one click. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title"> Well-thought-out internal link network </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info">To ensure a good user experience, all the pages of your website should have links to other pages – none of them should be "dead-end." </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">End-to-end website menu</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17136" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0049.png" alt="website-ux-design-mistakes-49" />For good UX, the main menu of an eCommerce website should include contacts, delivery, and payment, product catalog, services, or other main sections. So the visitor could find the basic required information. in 2 seconds.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Main Menu Availability</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17054" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0084.jpeg" alt="website-design-mistakes-84" /> Usability testing proves that the main menu of an eCommerce website must be in the header or just below it and duplicated in the footer. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Highlight the item on the website where the user is right now</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17137" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0050.png" alt="website-ux-design-mistakes-50" />This item must always be highlighted and disabled (not to reload the page when clicked). </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">User-friendly main menu of the eCommerce website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17138" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0051.png" alt="website-ux-design-mistakes-51" />According to usability testing, the main menu of an eCommerce website should have no more than 2 sublevels. This provides a good user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Visibility sublevels</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17139" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0052.png" alt="website-ux-design-mistakes-52" />The design of the menu items that have sub-levels must differ from other items.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Lists and tables</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17055" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0085.jpeg" alt="website-design-mistakes-85" />Characteristics that can be presented in a list or table should be formatted in this way.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Visual hierarchy of headings</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16979" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0009.jpeg" alt="website-design-mistakes-9" /> For example, using the font-size: heading 1 level is larger than running 2 levels, the heading of the last level is larger and/or fatter than the main text. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Categorization of articles according to topic</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17056" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0086.jpeg" alt="website-design-mistakes-86" /> Blog articles have categories that help the visitor find content on this topic. It is proved to be good for UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Placing thematic tags</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17057" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0087.jpeg" alt="website-design-mistakes-87" />Blog articles have tags that help the visitor find content on this topic.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Block on the website with links to articles</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17058" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0088.jpeg" alt="website-design-mistakes-88" /> For good UX, pages of products and product categories should have links to useful materials that will help the client choose goods. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Block on the website with links to the products</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17059" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0089.jpeg" alt="website-design-mistakes-89" />If an article mentions a product or service available on the website, it should include a direct link to that item. In this case, the client does not have to spend time searching it.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Use "see also"</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17060" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0090.jpeg" alt="website-design-mistakes-90" /> If the article covers other topics, an article covering this topic in more detail must be linked. </div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">🗝 Other usability design tips </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Well-designed functionality of the 404 error page</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17088" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0001.png" alt="website-ux-design-mistakes-1" />Ensure your website features a detailed 404 error page that explains the error and offers navigation aids like links to main sections, a search bar, and contact details including phone, instant messenger, and email.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Moderation</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17089" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0002.png" alt="website-ux-design-mistakes-2" />Usability tests recommend minimal use of bright colors, large colorful text, and animations in website design to enhance user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Considering the features of color perception when creating a website design</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17090" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0003.png" alt="website-ux-design-mistakes-3" /> Choose button and field colors based on common perceptions: red often suggests error, while gray can imply inactivity. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Minimize or completely avoid using JS in website design.</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info">Flash is minimally or not used at all.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">No accumulation of elements</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17089" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0002.png" alt="website-ux-design-mistakes-2" /> Balance website elements and blocks with empty spaces to prevent cluttered design.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">The optimal size of clickable elements</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17091" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0004.png" alt="website-ux-design-mistakes-4" />Include adequately sized buttons, links, and banners in your design, ensuring they're large enough for easy clicking without being unnecessarily oversized.</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">💡 Call to action is not an integral part of usability </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Quick access to the CTA buttons on the website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17128" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0041.png" alt="website-ux-design-mistakes-41" />The opportunity to buy a product/order a service/order a call back is on every page of an eCommerce website.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">High converting CTA </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17129" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0042.png" alt="website-ux-design-mistakes-42" /> The call-to-action design on the pages must be visually noticeable and obvious: the buttons are large and signed, links are highlighted. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">High converting main CTA </span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17130" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0043.png" alt="website-ux-design-mistakes-43" />The main call to action on each page of an eCommerce website (the Buy button, the button for moving to the next stage of placing an order, etc.) is always brighter than the others and is user-friendly. This greatly enhances the user experience on the website.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Clear, unambiguous CTA on an eCommerce website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17131" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0044.png" alt="website-ux-design-mistakes-44" /> Button text should clearly indicate the action it triggers, ideally using an infinitive verb like 'buy', 'order', 'download', or 'register'. Ensure it's specific and unambiguous:<ul> <li> Continue (What does it mean? What will happen when the button is pressed?);</li> <li> "Back" (Where to? The user may no longer remember what was on the previous page);</li> <li> "Continue," "Finish," and so on." </li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Noticeable CTA button</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17050" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0080.jpeg" alt="website-design-mistakes-80" /> For a good user experience, the design of the call-to-action button ("Buy," "Order," "Call me back") must contrast the primary colors of the website, be large and clickable, located on the first screen. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Dynamic CTA button</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17051" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0081.jpeg" alt="website-design-mistakes-81" /> Optional: call-to-action button is floating, remains in view when scrolling the page. The call-to-action button changes its color and shape when hovering, and when clicked, the user sees that he pushed the button. </div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">📝 Usability analysis of content </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Readable text</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17061" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0091.jpeg" alt="website-design-mistakes-91" />If SEO-optimized, a balance between ease of texts, consistency of content, and optimization is preserved.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Short text</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17061" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0091.jpeg" alt="website-design-mistakes-91" /> There is no "water," lengthy introductions, unnecessary information overloaded with offers. This has a positive effect on UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Focus on the target audience</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17061" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0091.jpeg" alt="website-design-mistakes-91" /> The text uses simple, familiar phrases and clear words to the target audience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Simple numbers</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17062" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0092.jpeg" alt="website-design-mistakes-92" /> They are represented by figures instead of words to facilitate perception of the text. The digits in the numbers are separated by spaces (example: 1 560 000). </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Monotone fonts</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17063" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0093.jpeg" alt="website-design-mistakes-93" />All of the pages use uniform fonts. Same font for elements (headers, etc) of one level.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Colors standardization</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17063" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0093.jpeg" alt="website-design-mistakes-93" />The design and style of the website require special attention: the font color and background color must be combined. The font and the background match for a comfortable perception and reading. Preferably dark font on a light background. The color of the links is not used for plain text.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Optimal typographic unit size</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17064" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0094.jpeg" alt="website-design-mistakes-94" /> The main text on the website uses a large font size to comfortable reading it. There are several opinions, but now the standard for plain text is 12 to 18 pixels, the larger font is the modern trend. Consider that different types of fonts may look differently in various sizes. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Font choice</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17065" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0095.jpeg" alt="website-design-mistakes-95" />When scaling the page in the browser, the font preserves its readability.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Informative content</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17066" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0096.jpeg" alt="website-design-mistakes-96" /> It makes it clear what the block of text is about. Even with a quick look at the text, the subheadings give the visitor information about the article's key points (product descriptions, news). .</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">🌐 A well-designed website is important for usability </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Page speed site</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17140" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0053.png" alt="website-ux-design-mistakes-53" />Studies show that approximately 75% of users close pages that load for more than 4 seconds. About 50% of users expect a page to load in less than 2 seconds. In addition, search engines also take into account the page load speed setting.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Responsive Web design</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17141" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0054.png" alt="website-ux-design-mistakes-54" /> On July 1, 2018, a website ranking mechanism was launched based on the Mobile-first design principle. This is an entirely new search algorithm from Google. In addition, the page design automatically adjusts to the resolution of the user's device. This eliminates the need to develop a new gadget on sale strategy.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Usability testing for each device</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17142" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0055.png" alt="website-ux-design-mistakes-55" /> A convenient design for mobile devices is not always good for the desktop version. For example, a hidden main menu, which is expanded by a button in the upper left corner: on the desktop, it forces the user to make an extra click.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Hide unwanted scroll bars</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17143" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0056.png" alt="website-ux-design-mistakes-56" /> At a resolution of 1024 × 768 in all standard browsers, the horizontal scroll bar does not appear on the website.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Ecommerce Website Map</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17144" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0057.png" alt="website-ux-design-mistakes-57" />The website must have a pass-through link to the website map (the optimal location is in the footer).</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Fast scrolling</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17145" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0058.png" alt="website-ux-design-mistakes-58" /> The design of long pages that take up several screens should provide a floating Back to Top button, which throws the user to the first screen.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Setting the cursor under “clickable / non-clickable”</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17146" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0059.png" alt="website-ux-design-mistakes-59" />When hovering over clickable elements, the arrow icon changes to the hand icon. When hovering over non-clickable elements - the icon does not change. This contributes to the user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Deactivate redundant items</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17105" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0018.png" alt="website-ux-design-mistakes-18" />Links and buttons that are currently unavailable to the user must be inactive. However, do not hide them - this will confuse the visitor and adversely affect UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Text format</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16981" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0011.jpeg" alt="website-design-mistakes-11" /> Usability testing proves that all the contacts on the website, including the header, are text, not pictures, so that the visitor can copy them for good UX.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">No copy protection</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info">On eCommerce websites, ensure contact details can be copied even if other content has copy protection.</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">🗑 Analysis of the basket in the online store </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Notification that the product is already in the basket</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16995" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0025.jpeg" alt="website-design-mistakes-25" /> After adding items to the basket, the design of the "Buy" button must change - the color and the inscription (e.g., "Product already in the basket" or "Buy more"), or information that the product is added to the basket must appear next to it. The goal is that the buyer could see that the product is already added to the basket and at the same time had the opportunity to add one or several units. This provides good UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Easy transition to checkout</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16996" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0026.jpeg" alt="website-design-mistakes-26" /> Option 1: after adding a product to the basket, a window pops up with two buttons (links): "Go to checkout" and "Continue shopping." This saves the user's time and provides a good user experience. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">No extra information</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16997" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0027.jpeg" alt="website-design-mistakes-27" />According to usability testing and to improve UX, the basket should not contain distracting elements: <ul> <li>catalog, shop windows;</li> <li>advertising, animation;</li> <li>news or links to blog articles.</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Full information on the order</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16998" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0028.jpeg" alt="website-design-mistakes-28" />"Based on the results of usability testing, the shopping basket shows::<ul> <li>a large image of products that the user understood what it is</li> <li>the name of the goods;</li> <li>optional – brief description of the goods;</li> <li>the number of items of each item;</li> <li>the total amount of the goods;</li> <li>the total amount including delivery (optional).""</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Click-through rate of the items</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16998" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0028.jpeg" alt="website-design-mistakes-28" />The image and product name is clickable to improve UX and lead to the product page. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Easy wholesale purchasing</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16998" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0028.jpeg" alt="website-design-mistakes-28" />When you add a product to the basket the user can immediately select the number of added products rather than clicking the " buy " button several times. This provides a good user experience.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Easy operation in the basket</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16998" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0028.jpeg" alt="website-design-mistakes-28" />"<ul> <li>Basket allows you to increase or decrease the quantity of the item and remove an item;</li> <li>When you remove the item from your cart page is not reloaded, but the order total is automatically recalculated; </li> <li>The visitor has the opportunity to add other goods at any stage of your order, with already filled fields are not cleared. This contributes to a good UX.</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Easy trash empty</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-16999" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0029.jpeg" alt="website-design-mistakes-29" />"<ul> <li>After removing all items from the basket, the user is notified that the basket is empty. This provides a good UX; </li> <li>After the completion of processing of the goods, the basket is emptied.</li> </ul>"</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">🔎 Search on the website </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Search on the eCommerce website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17121" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0034.png" alt="website-ux-design-mistakes-34" /> The website's design should include the Search bar but don't shift the navigation tasks. The search bar on an eCommerce website does not solve navigation problems. According to usability testing, users prefer to search for products on their own using sections and filters and only then use the search bar. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Single search field</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17011" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0041.jpeg" alt="website-design-mistakes-41" /> Don't make users think: "Why the second? Which one is more important?" and stuck at this moment. Usability testing shows that it is wrong for UX. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Convenient search interaction</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17122" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0035.png" alt="website-ux-design-mistakes-35" /> The search is started by pressing the button next to the query input field or Enter key. Automatic correction of types in user,” requests, spelling errors, incorrect keyboard layout (or corrections are offered). Search results are selected, including synonyms. Although the visual length of the search field is at least 30 characters, the actual length of the request is not limited. Simple editing of the request is provided (without going somewhere and additional clicks). </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Using Live Search</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17012" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0042.jpeg" alt="website-design-mistakes-42" /> Usability testing shows that when the user types the query in the search field, a relevant list of results must be displayed—the list changes as the user types. If a live search does not find suitable options when completing a query, the list is not cleared, and the last relevant values remain. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Detailed Search Results</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17122" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0035.png" alt="website-ux-design-mistakes-35" />"According to usability testing, for good user experience, the visitor should see:<ul> <li>number of results found;</li> <li>sorting of search results (with the ability to change this sorting);</li> <li>basic brief information about each product/article found.</li> </ul>"</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Help with no results</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17013" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0043.jpeg" alt="website-design-mistakes-43" /> If nothing is found, for good UX, we do not show the visitor "No results were found according to your request" page, instead: <ul> <li> the client is offered several options for products or sections of the site closest to his request, where, perhaps, there is what he is looking for;</li> <li>the client is advised how to edit the request so that it is more relevant;</li> <li> optional: it is suggested to use the advanced search.</li> </ul></div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Advanced Search (optional)</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17014" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0044.jpeg" alt="website-design-mistakes-44" />eCommerce websites should offer advanced search options, allowing users to refine their searches with multiple criteria.</div> </div> </li> </ul> </section> <section class="checklist"> <h2 class="checklist__title">📃 Internal linking on the website </h2> <span class="checklist__title-border"></span> <span class="checklist__percentage-border"></span> <ul class="checklist-container"> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Honest Links</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17117" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0030.png" alt="website-ux-design-mistakes-30" /> The standard functionality of a regular link is to go to another page or open another page in a new tab but not launch any action. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Noticeable differences in “special” links on an eCommerce website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17118" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0031.png" alt="website-ux-design-mistakes-31" /> If the link involves the unfolding, but not the transition to another page/reloading the existing one, it must be dotted underlined. Add a triangle icon next to it. The download link must be different from regular links. It should include the word "download,” file size, and format.</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Anchor or human-friendly link</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17119" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0032.png" alt="website-ux-design-mistakes-32" />Link text must clearly state where it leads (name of the article, product) so the user knows precisely what it opens. This contributes to a better user experience on your website. </div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">User-friendly links</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17120" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-ux-design-mistakes-0033.png" alt="website-ux-design-mistakes-33" />The link text must be long enough that the visitor could easily click on it (for example, a link with the anchor "here" is no good).</div> </div> </li> <li class="checklist-item"> <input id="" type="checkbox" /><label for="" class="checkbox"></label><span class="checklist-item__title">Return button on the website</span> <button class="checklist-item__expand" aria-label="Toggle Info" title="Toggle More Information"> <span class="line"></span> </button> <div class="info-container"> <div class="info"><img class="aligncenter size-large wp-image-17010" src="https://www.plerdy.com/wp-content/uploads/2020/07/website-design-mistakes-0040.jpeg" alt="website-design-mistakes-40" /> Browser's button "Back" should work on all pages of the eCommerce website. Item 38 b tells us there must be no such button on the website. However, the browser has it to interact with it correctly: to return the user to the previously viewed page, saving all custom settings, sorting, or filtering. This contributes to the user experience. </div> </div> </li> </ul> </section> </div> </div> </div> <div class="sub_container"> <h2>FAQs</h2> <h3>What is a Website Usability Checklist?</h3> A website usability checklist is a collection of standards applied to assess a website's accessibility, user experience, and simplicity of usage. <h3>Why is a Website Usability Checklist Important?</h3> This checklist guarantees that a website offers a good experience, which can raise visitor happiness and conversion rates by means of its user-friendliness and accessibility to all users. <h3>How Can I Conduct Usability Testing for My Website?</h3> Ask people to do particular tasks on your website under observation and feedback collection for usability testing. <h3>What are the Key Elements of Web Usability?</h3> Important components are easy navigation, quick loading times, mobile responsiveness, accessible design, and simple user interfaces. <h3>How Often Should I Update My Website Usability Checklist?</h3> Particularly when new features are added to your website or when web standards and user expectations change, regular upgrades are absolutely vital. <h3>Can Website Usability Affect SEO?</h3> Indeed, the SEO performance of your site can be much influenced by elements of website usability including page loading speed, mobile friendliness, and easy navigation. <h3>What are Common Mistakes in Website Usability?</h3> Typical errors include complicated navigation, slow load times, non-responsive design, poor color contrast, and unclear calls-to- action. <h3>How Do I Know if My Website Meets Usability Standards?</h3> Regular usability tests and cross-referencing against accepted usability principles will assist you ascertain whether your site satisfies current criteria. <h3>Why is User Feedback Important in Website Usability?</h3> Direct insight into the user experience made possible by user comments guarantees that the site satisfies user needs and helps to point up areas for development. <h3>What is the Difference Between Usability and Accessibility?</h3> While accessibility guarantees that the website is useable by persons with different disabilities, usability concentrates on how effortlessly users can traverse and use a website. <h2>At last</h2> <p>A complicated process, website usability calls both commitment and meticulous attention to detail. Creating a thorough checklist can enable website designers to guarantee they are creating a functional, easily navigable website. Starting with this post, you have a 210-point website usability checklist. What then are you expecting? Let us begin testing. Now go forth and enable everyone to use the web more easily!</p> </div> <script> const checkboxValuesEn = JSON.parse(localStorage.getItem("checkboxValuesEn")) || {}, buttons = Array.from(document.querySelectorAll(".checklist-item__expand")), labels = Array.from(document.querySelectorAll(".checklist-item__title")), checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]')), checkboxesLength = checkboxes.length, progress = document.querySelector(".progress__bar"), counter = document.querySelector(".progress__count"), reset = document.querySelector(".progress__reset"); function loadIds() { for (let a = 0; a < checkboxesLength; a += 1) { const b = a => a.replace(/[ ,.!?;:'-]/g, ""); (checkboxes[a].id = `${b( checkboxes[a].nextSibling.nextSibling.innerText ).toLowerCase()}`), checkboxes[a].nextSibling.setAttribute( "for", `${b(checkboxes[a].nextSibling.nextSibling.innerText).toLowerCase()}` ); } } function updateStorage(a) { (checkboxValuesEn[a.id] = a.checked), localStorage.setItem( "checkboxValuesEn", JSON.stringify(checkboxValuesEn) ); } function countChecked() { if ("checkbox" === this.type) { const a = this.parentNode.parentNode.parentNode, b = a.querySelectorAll("input:checked").length / a.querySelectorAll(".checklist-item").length; a.querySelector( ".checklist__percentage-border" ).style.transform = `scaleX(${b})`; } else Array.from(document.querySelectorAll(".checklist")).forEach(a => { const b = a.querySelectorAll("input:checked").length / a.querySelectorAll(".checklist-item").length; a.querySelector( ".checklist__percentage-border" ).style.transform = `scaleX(${b})`; }); let a = 0; Array.from(document.querySelectorAll("input:checked")).forEach(() => { a += 1; }), (counter.innerText = `${a}/${checkboxesLength}`), (progress.style.transform = `scaleX(${a / checkboxesLength})`), (checkboxValuesEn.globalCounter = a), updateStorage(this); } function loadValues() { const a = checkboxValuesEn.globalCounter || 0; (counter.innerText = `${a}/${checkboxesLength}`), Object.keys( checkboxValuesEn ).forEach(a => { "globalCounter" !== a && (document.getElementById(a).checked = checkboxValuesEn[a]); }), countChecked(); } function toggleExpand() { const item = this.parentNode; const allItems = Array.from(document.querySelectorAll('.checklist-item')); allItems.forEach((otherItem) => { if (otherItem !== item && otherItem.classList.contains('open')) { otherItem.querySelector('.line').classList.toggle('closed'); otherItem.classList.toggle('open'); } }); item.querySelector('.line').classList.toggle('closed'); item.classList.toggle('open'); } function resetCheckboxes() { this.classList.add("progress__reset--pressed"), checkboxes.forEach( a => (a.checked = !1) ), Object.keys(checkboxValuesEn).forEach( a => delete checkboxValuesEn[a] ), countChecked(); } setTimeout(() => { loadIds(), loadValues(), checkboxes.forEach(a => a.addEventListener("click", countChecked) ), buttons.forEach(a => a.addEventListener("click", toggleExpand) ), labels.forEach(a => a.addEventListener("click", toggleExpand) ), reset.addEventListener("click", resetCheckboxes), reset.addEventListener( "animationend", function() { this.classList.remove("progress__reset--pressed"); }, !1 ) },500); window.onload = function() { "serviceWorker" in navigator && navigator.serviceWorker.register("/sw.js", { scope: "/" }) } setTimeout(() => { $('img[data-lazy-src]').each(function() { var thisSrc = $(this).attr('data-lazy-src'); $(this).attr('src', thisSrc) }) },1000); </script> <footer> <div class="container"> <div class="footer-list"> <div class="footer-list-items"> <span class="footer-list-title">Company</span> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/about-us/">About Us</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/contact-form/">Contact</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/reviews/">Reviews</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/blog/category/cases/">Case Studies</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/blog/category/ebooks/">Ebooks</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/update/">Updates</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/faq/">FAQ</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/sitemap/">Sitemap</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/what-is-plerdy/">What is Plerdy</a> </p> </div> <div class="footer-list-items"> <span class="footer-list-title">Partner</span> <p class="footer-list-item"> <a class="footer-list-link accent-color-link" href="https://www.plerdy.com/how-to-make-money-with-the-plerdy-affiliate-program/">Affiliate Program</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/partners/">Partnership</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/member-perks/">Bonuses from partners</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/referral-program/">Referral program</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/blog/guest-posting/">Guest posting</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/plugins-for-cms/">CMS Plugins</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/non-profit/">Non-Profits</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/students/">Educators</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/startups/">Startups</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/free-premium-package/">Free Business Package</a> </p> </div> <div class="footer-list-items"> <span class="footer-list-title">Insights</span> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/user-experience-statistics/">User Experience (UX) Statistics</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/blog/ux-research-process/">UX Research Survey Report</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/website-audit/">How to do a Website Audit</a> </p> </div> <div class="footer-list-items footer-list-items-big"> <span class="footer-list-title">Best of the Best</span> <p class="footer-list-item" style="width: 80%;"> <a class="footer-list-link" href="https://www.plerdy.com/experts/">Top Marketing Experts in the World</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/google-ads-experts/">Google Ads Experts</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/marketing-copywriters/">Marketing Copywriters</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/cmo-experts/">CMO experts</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/cro-experts/">CRO Experts</a> </p> <p class="footer-list-item"> <a class="footer-list-link" href="https://www.plerdy.com/usability-experts/">Usability experts</a> </p> </div> <div class="foot_line"></div> <div class="footer-list-items row_bg_app"> <span class="footer-list-title">Free Tools</span> <a class="footer-list-link g-f" target="_blank" href="https://www.plerdy.com/blog/full-page-screen-capture/">Take a Full-Page Screenshot in Chrome</a> <a class="footer-list-link" target="_blank" href="https://www.plerdy.com/website-seo-checker-extension/">Free Chrome Extensions for SEO</a> </div> <a class="col_support" href="https://war.ukraine.ua/donate/" rel="nofollow"> <i></i> <div> <span>We stand for 🇺🇦 Ukraine.</span> <span>You can find more information and donate here</span> </div> </a> <a class="btn_shopify btn_shopify_centr" href="https://apps.shopify.com/plerdy" target="_blank" rel="nofollow"><span>Find it on the</span>Shopify App Store</a> </div> <div class="foot_lang_soc_pk"> <div class="col_center"> <span class="footer-list-title visib-block">Follow Us:</span> <a class="footer-list-link" href="https://www.youtube.com/channel/UCYA8QdYL8Dsk7xyOso6zxLg" target="_blank"></a> <a class="footer-list-link" href="https://www.linkedin.com/company/plerdy/" target="_blank"></a> <a class="footer-list-link" href="https://www.instagram.com/plerdy_cro_tools/" target="_blank"></a> </div> <div class="wrap_lang"> <ul id="lang"> <li class="lang-item lang-item-2 lang-item-en current-lang lang-item-first"><a lang="en-US" hreflang="en-US" href="https://www.plerdy.com/usability-testing-website-checklist/">USA</a></li> <li class="lang-item lang-item-13 lang-item-es"><a lang="es-ES" hreflang="es-ES" href="https://www.plerdy.com/es/usability-testing-website-checklist/">España</a></li> <li class="lang-item lang-item-5 lang-item-ru"><a lang="ru-RU" hreflang="ru-RU" href="https://www.plerdy.com/ru/usability-testing-website-checklist/">Казахстан</a></li> <li class="lang-item lang-item-17 lang-item-pl no-translation"><a lang="pl-PL" hreflang="pl-PL" href="https://www.plerdy.com/pl/">Polska</a></li> <li class="lang-item lang-item-21 lang-item-pt no-translation"><a lang="pt-PT" hreflang="pt-PT" href="https://www.plerdy.com/pt/">Portugal</a></li> <li class="lang-item lang-item-9 lang-item-ua"><a lang="uk" hreflang="uk" href="https://www.plerdy.com/ua/usability-testing-website-checklist/">Україна</a></li> <li class="lang-item lang-item-256632566326231 lang-item-fr no-translation"><a lang="fr-FR" hreflang="fr-FR" href="https://www.plerdy.com/fr/">Français</a></li> </ul> </div> </div> </div> <div class="footer-bottom"> <div class="footer-bottom-content"> <div class="col_right"> <div class="copy" style="line-height: 28px;"> Copyright © 2025. Plerdy. All rights reserved </div> </div> <div class="col_left"> <a class="footer-list-link" href="https://www.plerdy.com/gdpr-plerdy/">GDPR</a> <a class="footer-list-link" href="https://www.plerdy.com/terms-of-service/">Terms of Service</a> <a class="footer-list-link" href="https://www.plerdy.com/do-not-track/">Do Not Track</a> <a class="footer-list-link" href="https://www.plerdy.com/privacy-policy/">Privacy Policy</a> <a class="footer-list-link" href="https://www.plerdy.com/security-policy/">Security Policy</a> </div> </div> </div> </div> <div class="gallery"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="popup-gallery mfp-hide popup-gallery-video"></div> </div> </div> </div> </div> <div class="foot_btns_pl foot_btns--mob-post" style="display: none;"> <div class="mob-bootom-links mob-bootom-links--post"> <span class="scroll-top" style="display:inline-block; !important"></span> </div> </div> <script> (function() { var expirationDate = new Date(); expirationDate.setTime( expirationDate.getTime() + 31536000 * 1000 ); document.cookie = "pll_language=en; expires=" + expirationDate.toUTCString() + "; path=/; secure; SameSite=Lax"; }()); </script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script>window.lazyLoadOptions = { elements_selector: "iframe[data-lazy-src]", data_src: "lazy-src", data_srcset: "lazy-srcset", data_sizes: "lazy-sizes", class_loading: "lazyloading", class_loaded: "lazyloaded", threshold: 300, callback_loaded: function(element) { if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) { if (element.classList.contains("lazyloaded") ) { if (typeof window.jQuery != "undefined") { if (jQuery.fn.fitVids) { jQuery(element).parent().fitVids(); } } } } }}; window.addEventListener('LazyLoad::Initialized', function (e) { var lazyLoadInstance = e.detail.instance; if (window.MutationObserver) { var observer = new MutationObserver(function(mutations) { var image_count = 0; var iframe_count = 0; var rocketlazy_count = 0; mutations.forEach(function(mutation) { for (var i = 0; i < mutation.addedNodes.length; i++) { if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') { continue; } if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') { continue; } images = mutation.addedNodes[i].getElementsByTagName('img'); is_image = mutation.addedNodes[i].tagName == "IMG"; iframes = mutation.addedNodes[i].getElementsByTagName('iframe'); is_iframe = mutation.addedNodes[i].tagName == "IFRAME"; rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload'); image_count += images.length; iframe_count += iframes.length; rocketlazy_count += rocket_lazy.length; if(is_image){ image_count += 1; } if(is_iframe){ iframe_count += 1; } } } ); if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){ lazyLoadInstance.update(); } } ); var b = document.getElementsByTagName("body")[0]; var config = { childList: true, subtree: true }; observer.observe(b, config); } }, false);</script><script data-no-minify="1" async src="https://www.plerdy.com/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt){var t='<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">',a='<button class="play" aria-label="play Youtube video"></button>';t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script> </footer> <div class="row_cookie-bubble"> <div class="cookie-bubble bottom-right"> <div class="cb-wrapper"> <div class="cb-row"> <div class="cb-image true"></div> <div class="cb-row-content"> <span class="message">We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies.</span> <div class="cb-controls"> <button class="agreement-btn">Got It</button> <a class="cookie-policy-btn" href="https://www.plerdy.com/privacy-policy/#cookie" target="_blank">Read our cookie Policy</a> </div> </div> </div> </div> </div> </div> <link rel='stylesheet' href='/wp-content/themes/twentytwenty/assets/css/slick.css' media='all' /> <script src="/wp-content/themes/twentytwenty/assets/js/jquery-3.6.0.min.js" defer></script> <script src="/wp-content/themes/twentytwenty/assets/js/slick.js" defer></script> <link rel='stylesheet' href='/wp-content/themes/twentytwenty/assets/css/magnific-popup.css' media='all' /> <script src="/wp-content/themes/twentytwenty/assets/js/magnific-popup.js" defer></script> <script src="/wp-content/themes/twentytwenty/assets/js/script.js" defer></script> <script src="https://www.plerdy.com/wp-content/themes/twentytwenty/assets/js/plerdy.js?v=1"></script> <script src="/wp-content/themes/twentytwenty/assets/js/use_cases_script.js"></script> </body> </html>

CINXE.COM

Website Usability Checklist: 210 Points Testing – Plerdy