{"id":213749,"date":"2021-03-29T15:20:02","date_gmt":"2021-03-29T12:20:02","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-design-a-stellar-ux-for-long-form-articles\/"},"modified":"2021-03-29T15:20:02","modified_gmt":"2021-03-29T12:20:02","slug":"how-to-design-a-stellar-ux-for-long-form-articles","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/","title":{"rendered":"#How to Design a Stellar UX for Long-form Articles"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a25702b9f365\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a25702b9f365\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Keep_your_website_technically_robust\" >Keep your website technically robust<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#No_dead_clicks_and_errors\" >No dead clicks and errors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Enough_of_those_intrusive_interstitials\" >Enough of those intrusive interstitials<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Keep_it_safe_and_mobile-friendly\" >Keep it safe and mobile-friendly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Choose_big_and_readable_font_combinations\" >Choose big and readable font combinations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Embrace_whitespace\" >Embrace whitespace<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Break_down_the_article_into_easily_scannable_and_readable_chunks\" >Break down the article into easily scannable and readable chunks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Use_short_sentences_paragraphs_and_subheadings\" >Use short sentences, paragraphs, and subheadings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Leverage_special_elements\" >Leverage special elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Help_readers_navigate_through_a_table_of_contents\" >Help readers navigate through a table of contents<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Integrate_multimedia\" >Integrate multimedia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Include_a_progress_bar\" >Include a progress bar<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Cut_unnecessary_elements_affecting_the_sites_performance\" >Cut unnecessary elements affecting the site\u2019s performance<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Compress_your_images\" >Compress your images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Watch_those_video_and_external_embed_scripts\" >Watch those video and external embed scripts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Shift_to_a_high-performance_hosting\" >Shift to a high-performance hosting<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-design-a-stellar-ux-for-long-form-articles\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#How to Design a Stellar UX for Long-form Articles<\/strong>&#8221;<\/p>\n<div class=\"entry-inner\">\n<p class=\"opener\">After putting in multiple hours on researching, outlining, writing, and editing the first draft of your article, you\u2019re eager to press the publish button. You want to share it with your audience, and earn some <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>reciation.<\/p>\n<p>But guess what?<\/p>\n<p>Your audience won\u2019t bother reading your article unless they find its packaging appealing. You need to ensure a robust user experience (UX) on your website for your prospective visitors.\u00a0<\/p>\n<p>For one, Google is rolling out a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\">page experience update<\/a> factoring the metrics below in its algorithm starting May 2021.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image3-6.png\" class=\"wp-image-115870 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image3-6.png\" alt=\"\" class=\"wp-image-115870\"><\/noscript><\/figure>\n<p>But page experience is merely a subset of overall UX. You can think of it in the form of the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/semanticstudios.com\/user_experience_design\/\">honeycomb by Semantic Studios<\/a> below:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image2-8.png\" class=\"wp-image-115871 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image2-8.png\" alt=\"\" class=\"wp-image-115871\"><\/noscript><\/figure>\n<p>A sophisticated design establishes your brand\u2019s credibility and makes it more likely for a user to return to your website. Called \u201c<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.usability.gov\/get-involved\/blog\/2009\/10\/credibility.html\">preconscious judgments<\/a>\u201d, these aesthetical cues happen even \u201cbefore any reading or other cognitive processes.\u201d Here are some of the UX elements you need to take care of for your long form content pieces:<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Keep_your_website_technically_robust\"><\/span>Keep your website technically robust<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let\u2019s look at the basic technical operations where your website mustn\u2019t falter.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"No_dead_clicks_and_errors\"><\/span>No dead clicks and errors<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Is the navigational menu at the top of your article responding properly on clicking? Is your email opt-in form free of errors? The mismatch of expectations results in a frustrating experience for users.\u00a0<\/p>\n<p>You can monitor some of these errors through Google Analytics but it helps to get some feedback from users every time you implement changes on your site.<\/p>\n<p>Now, if you mess with the URLs while moving around your website\u2019s pages, then you can end up creating a lot of 404 errors. Besides fixing these errors, you can also get creative and use a customized 404 page to re-engage a visitor.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image4-10.png\" class=\"wp-image-115872 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image4-10.png\" alt=\"\" class=\"wp-image-115872\"><\/noscript><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Enough_of_those_intrusive_interstitials\"><\/span>Enough of those intrusive interstitials<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When Interstitials obstruct content on a page, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/search\/blog\/2016\/08\/helping-users-easily-access-content-on\">Google can penalize a site<\/a> for making their content difficult to access.<\/p>\n<p>Go ahead, and minimize the usage of other aggressive tactics, such as those popup opt-in forms. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/waitbutwhy.com\/\">Wait But Why<\/a> is one of the internet\u2019s favorite places for 10,000-word articles. They boast an email list of 615,000+ humans. But besides the sidebar opt-in form, they only use the following humorous \u201cscroll bar\u201d that appears after you engage with their articles for a bit:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image7-5-1024x402.png\" class=\"wp-image-115873 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image7-5-1024x402.png\" alt=\"\" class=\"wp-image-115873\"><\/noscript><\/figure>\n<p>You can also attempt other locations and less intrusive kinds of opt ins like a floating bar.\u00a0<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Keep_it_safe_and_mobile-friendly\"><\/span>Keep it safe and mobile-friendly<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"blob:https:\/\/www.noupe.com\/6fd37456-40b0-4aac-af78-bf0e344abaf5\" alt=\"\"><\/figure>\n<p>Security and privacy have become increasingly important for consumers today. Google already uses HTTPS as a ranking signal. So ensure that your site uses secure, encrypted connections. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/letsencrypt.org\/\">Let\u2019s Encrypt<\/a> allows you to create a free SSL certificate for your site:<\/p>\n<p>Given that <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/\">mobile-traffic is approximately equivalent to<\/a> half of the total web traffic, having a mobile-friendly website for your business is a no-brainer. If you\u2019re using WordPress (or any other modern CMS), you typically have numerous responsive theme options to choose from.<\/p>\n<p>Take the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/search.google.com\/test\/mobile-friendly\">mobile-friendly test<\/a> to identify pages that are not responsive. Then use the Noupe tutorials and mobile web design tips here to fix those pages.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Choose_big_and_readable_font_combinations\"><\/span>Choose big and readable font combinations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Small font sizes and low contrast between the text and the background are <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/top-ten-web-design-mistakes-of-2005\/\">among the most common legibility problems for web users<\/a>.<\/p>\n<p>What font sizes and combinations should you choose? Well, here are a few tips to help you:<\/p>\n<ul>\n<li>Each font has a character and impacts the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/journals.plos.org\/plosone\/article?id=10.1371\/journal.pone.0036042\">viewer\u2019s emotional state<\/a>. You can get creative while choosing fonts aiming to show your brand personality, but readability comes first.<\/li>\n<li><a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">General<\/a>ly, bigger font sizes help speed and comprehension of text and improve your readability. With long-form articles containing a lot of text, it makes sense to test 12-point size for body copy and even bigger sizes for headlines.<\/li>\n<li>If you\u2019re targeting 40+ men with visual impairments, your font selection and size needs more care. Older adults <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.stjohnprovidence.org\/documents\/BernardLiaoMillsfonttypesizeaffectreadingtime.pdf\">prefer 14-point fonts<\/a>.<\/li>\n<li>As per psychographics of reading, an increase in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.archive.org\/web\/20151017211339\/http:\/\/gandalf.psych.umn.edu:80\/users\/legge\/series.html\">line spacing to 1.5<\/a> can help the reading speed and comprehension.<\/li>\n<li>High contrast between your text and the background aids readability.<\/li>\n<li>Research and choose <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.creativebloq.com\/typography\/20-perfect-type-pairings-3132120\">font pairings<\/a> that seem to \u201cbelong to each other\u201d, find the appropriate font size for your audience by running a test and noting the change in your performance.<\/li>\n<li><em>If your fonts don\u2019t specifically draw any attention of the readers, they are likely doing a decent job.<\/em><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Embrace_whitespace\"><\/span>Embrace whitespace<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you cram your blog with a colorful sidebar, five fancy fonts, and lousy color combinations, you set yourself up for failure. Instead, provide breathing space for your audience. Take inspiration from the good folks at Medium (where the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/medium.com\/data-lab\/the-optimal-post-is-7-minutes-74b9f41509b\">optimal reading is around 7 minutes<\/a> \u2014 which can mean a long-form article of up to 2000 words).<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image8-3-1024x549.png\" class=\"wp-image-115875 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image8-3-1024x549.png\" alt=\"\" class=\"wp-image-115875\"><\/noscript><\/figure>\n<p>On Medium, you always get a slick and distraction-free reading experience. So use some more of that white space, will you?<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Break_down_the_article_into_easily_scannable_and_readable_chunks\"><\/span>Break down the article into easily scannable and readable chunks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Web users are habitual of scanning and skimming the content \u2014 only <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/how-users-read-on-the-web\/#:~:text=Summary%3A%20They%20don't.,out%20individual%20words%20and%20sentences.&amp;text=Share%20this%20article%3A,read%20word%2Dby%2Dword.\">16% of users read word-for-word<\/a>. So your long-form article faces an upheaval battle for attention. Here\u2019s how you can aid the scanning behavior:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Use_short_sentences_paragraphs_and_subheadings\"><\/span>Use short sentences, paragraphs, and subheadings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Breaking your article down into easily digestible chunks of easily understandable sentences and paragraphs saves effort for the readers. Top it up with meaningful subheadings that coherently organize your ideas and make for a seamless reading experience.<\/p>\n<p>A Medium study found that <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/medium.com\/the-mission\/after-10-000-data-points-we-figured-out-how-to-write-a-perfect-medium-post-58c41c314f6a\">easy-to-read sentences<\/a> helped an article get more recommendations on the platform.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image1-7.png\" class=\"wp-image-115876 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image1-7.png\" alt=\"\" class=\"wp-image-115876\"><\/noscript><\/figure>\n<p>Indeed you can use an app like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hemingwayapp.com\/\">Hemingway<\/a> to ensure an eighth grade (or below) reading level for your articles \u2014 unless you work in a specialized industry where jargon is essential. It makes your article accessible to a wider audience and can lead to a higher engagement.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image13-1.png\" class=\"wp-image-115877 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image13-1.png\" alt=\"\" class=\"wp-image-115877\"><\/noscript><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Leverage_special_elements\"><\/span>Leverage special elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Can your article use a special summary box, a \u201cpro and cons\u201d table, a quote pull out, or the like? Generally, such elements provide the most important information from the article to the user. If they are interested, they can continue to read from there.<\/p>\n<p>For example, in my article discussing top online course software at <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/elitecontentmarketer.com\/best-online-course-platforms\/\">Elite Content Marketer<\/a>, I\u2019ve discussed fifteen of these platforms. But I\u2019ve used a summary of the top three in a table as visible below:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image9-3-531x1024.png\" class=\"wp-image-115878 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image9-3-531x1024.png\" alt=\"\" class=\"wp-image-115878\"><\/noscript><\/figure>\n<p>These elements are to help you take the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/EricSchulman\/status\/768425201570836480\/photo\/1\">bite, snack, meal approach<\/a> in your long-form article:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image12-1-1024x768.png\" class=\"wp-image-115879 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image12-1-1024x768.png\" alt=\"\" class=\"wp-image-115879\"><\/noscript><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Help_readers_navigate_through_a_table_of_contents\"><\/span>Help readers navigate through a table of contents<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In longer articles, most readers would like to read a section relevant to them right now and walk away from your site. You should help users do that by using a table of contents (TOC) at the top of your article. Here\u2019s an example from an article at <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thecreativeshour.com\/adobe-portfolio-vs-squarespace\/\">The Creatives Hour<\/a>:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image5-7-824x1024.png\" class=\"wp-image-115880 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image5-7-824x1024.png\" alt=\"\" class=\"wp-image-115880\"><\/noscript><\/figure>\n<p>Indeed such a TOC can result in snagging additional sitelinks in SERPs for your article. It increases your CTR for the organic listing and makes your long-form article more accessible:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image14-1-1024x250.png\" class=\"wp-image-115881 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image14-1-1024x250.png\" alt=\"\" class=\"wp-image-115881\"><\/noscript><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Integrate_multimedia\"><\/span>Integrate multimedia<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Visuals can increase the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.brainrules.net\/vision\">retention of information from 10% to 65%<\/a>. Further, adding images in your articles at regular intervals is considered an SEO best practice \u2014 given they are relevant to the subject matter of the article. Here\u2019s a video discussing SEO for Google Images:<br \/>\n<iframe loading=\"lazy\" title=\"SEO for Google Images\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/SfC27XgelgE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><br \/>\nSimilarly, videos relevant to your articles (like the one above) could engage readers for a longer time as they are easier to consume than text alone.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Include_a_progress_bar\"><\/span>Include a progress bar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Using a progress bar is a handy feature that sets expectations on the amount of time required for reading an article. You can use a horizontal thin line indicator like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.strongerbyscience.com\/\">Stronger by Science<\/a> does below:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image10-3-1024x781.png\" class=\"wp-image-115882 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image10-3-1024x781.png\" alt=\"\" class=\"wp-image-115882\"><\/noscript><\/figure>\n<p>Or you could even mention an estimated reading time at the top of your articles like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/longreads.com\/2020\/10\/27\/an-atlas-of-the-cosmos\/\">Longreads<\/a> does at the top of their articles:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image11-1024x569.png\" class=\"wp-image-115883 lazyload\"><noscript><img decoding=\"async\" src=\"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/image11-1024x569.png\" alt=\"\" class=\"wp-image-115883\"><\/noscript><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"Cut_unnecessary_elements_affecting_the_sites_performance\"><\/span>Cut unnecessary elements affecting the site\u2019s performance<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Your website loading speed is an important attribute that can directly affect your conversions. It\u2019s also a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/search-ads-speed\">ranking factor in search<\/a>. Here\u2019s how to improve your performance:\u00a0<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Compress_your_images\"><\/span>Compress your images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sure having an image for every 100 to 150 words is great for visual engagement. But too many images can slow down a web page. The solution is to compress images without compromising quality.\u00a0<\/p>\n<p>My <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/elitecontentmarketer.com\/best-podcast-hosting-platforms\/\">article on podcast hosting<\/a> had 31 images leading to a drop in the page\u2019s performance. On installing the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\">ShortPixel Image Optimizer plugin<\/a> and compressing these images. I noticed a considerable improvement in its loading speed \u2014 without any noticeable drop in quality. You can use a tool such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tinypng.com\/\">TinyPNG<\/a> if you\u2019re not using WordPress.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Watch_those_video_and_external_embed_scripts\"><\/span>Watch those video and external embed scripts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Besides images, video and other embedded scripts from third-party websites also lead to a drop in performance. You can either directly link to the videos or elements you mention in your article or use their screenshots to point them.<\/p>\n<p>You can also lazy load all the iframe videos. On WordPress, these settings could be managed by a plugin such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Shift_to_a_high-performance_hosting\"><\/span>Shift to a high-performance hosting<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ultimately, improvement in your performance won\u2019t happen on the top of the average infrastructure \u2014 because you get what you pay for. I use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wpengine.com\/\">WPEngine<\/a> to host my site as they offer top-notch performance. What\u2019s more? Caching, speed optimization, daily backups, and security are also taken care of in their managed hosting services.<\/p>\n<p>You can learn more about improving site speed here. If you\u2019re on WordPress, this guide could be even more helpful.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span>Final Thoughts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Throughout the article, I talked about Google search rankings because the main use of long-form content is getting organic traffic. But the UX implications mentioned in the article not only optimize your performance on Google but also help your bottom line. After all, a satisfied user is the most likely to convert into a paying customer.<\/p>\n<p>If you want to further understand the consumer sentiment and engagement with your long-form landing pages, consider putting them through a user experience test with a session replay software (such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hotjar.com\/\">Hotjar<\/a>). It can reveal interesting insights about your prospects.<\/p>\n<p><em>What other tips do you have for ensuring a stellar user experience in your long-form articles? Let me know in the comments below.<\/em><\/p>\n<hr class=\"wp-block-separator\"><em>Photo by <\/em><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@glenncarstenspeters?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\"><em>Glenn Carstens-Peters<\/em><\/a><em> on <\/em><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/unsplash.com\/s\/photos\/writing?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\"><em>Unsplash<\/em><\/a>\n<\/div>\n<p><\/p>\n<div class=\"author-inner\">\n<p class=\"bio-name\">Chintan Zalani<\/p>\n<div class=\"bio-desc\">\nChintan specializes in content marketing for SaaS businesses. He also helps creators build sustainable businesses from their crafts at Elite Content Marketer.<\/div>\n<p><!-- social-link --><\/p>\n<div class=\"clear\"><\/div>\n<\/div>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">News<\/a> articles, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/general\/\" target=\"_blank\" rel=\"noopener\">General <\/a><\/span>category.<\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.noupe.com\/design\/how-to-design-ux-for-long-form-articles.html\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Design a Stellar UX for Long-form Articles&#8221; After putting in multiple hours on researching, outlining, writing, and editing the first draft of your article, you\u2019re eager to press the publish button. You want to share it with your audience, and earn some appreciation. But guess what? Your audience won\u2019t bother reading your article&#8230;<\/p>\n","protected":false},"author":1,"featured_media":213750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.noupe.com\/wp-content\/uploads\/2021\/03\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash.jpg","fifu_image_alt":"","footnotes":""},"categories":[1],"tags":[78072,78049,76732,91263,99960,99961,71820],"class_list":["post-213749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-content","tag-content-marketing","tag-design","tag-ui","tag-ui-ux","tag-ux","tag-ux-design"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/213749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=213749"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/213749\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/213750"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=213749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=213749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=213749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}