Recherche avancée

Sur d’autres sites (8654)

• How to cheat on video encoder comparisons

  21 juin 2010, par Dark Shikari — H.264, benchmark, stupidity, test sequences

  Over the past few years, practically everyone and their dog has published some sort of encoder comparison. Sometimes they’re actually intended to be something for the world to rely on, like the old Doom9 comparisons and the MSU comparisons. Other times, they’re just to scratch an itch — someone wants to decide for themselves what is better. And sometimes they’re just there to outright lie in favor of whatever encoder the author likes best. The latter is practically an expected feature on the websites of commercial encoder vendors.

  One thing almost all these comparisons have in common — particularly (but not limited to !) the ones done without consulting experts — is that they are horribly done. They’re usually easy to spot : for example, two videos at totally different bitrates are being compared, or the author complains about one of the videos being “washed out” (i.e. he screwed up his colorspace conversion). Or the results are simply nonsensical. Many of these problems result from the person running the test not “sanity checking” the results to catch mistakes that he made in his test. Others are just outright intentional.

  The result of all these mistakes, both intentional and accidental, is that the results of encoder comparisons tend to be all over the map, to the point of absurdity. For any pair of encoders, it’s practically a given that a comparison exists somewhere that will “prove” any result you want to claim, even if the result would be beyond impossible in any sane situation. This often results in the appearance of a “controversy” even if there isn’t any.

  Keep in mind that every single mistake I mention in this article has actually been done, usually in more than one comparison. And before I offend anyone, keep in mind that when I say “cheating”, I don’t mean to imply that everyone that makes the mistake is doing it intentionally. Especially among amateur comparisons, most of the mistakes are probably honest.

  So, without further ado, we will investigate a wide variety of ways, from the blatant to the subtle, with which you too can cheat on your encoder comparisons.

  Blatant cheating

  1. Screw up your colorspace conversions. A common misconception is that converting from YUV to RGB and back is a simple process where nothing can go wrong. This is quite untrue. There are two primary attributes of YUV : PC range (0-255) vs TV range (16-235) and BT.709 vs BT.601 conversion coefficients. That sums up to a total of 4 possible different types of YUV. When people compare encoders, they often use different frontends, some of which make incorrect assumptions about these attributes.

  Incorrect assumptions are so common that it’s often a matter of luck whether the tool gets it right or not. It doesn’t help that most videos don’t even properly signal which they are to begin with ! Often even the tool that the person running the comparison is using to view the source material gets the conversion wrong.

  Subsampling YUV (aka what everyone uses) adds yet another dimension to the problem : the locations which the chroma data represents (“chroma siting”) isn’t constant. For example, JPEG and MPEG-2 define different positions. This is even worse because almost nobody actually handles this correctly — the best approach is to simply make sure none of your software is doing any conversion. A mistake in chroma siting is what created that infamous PSNR graph showing Theora beating x264, which has been cited for ages since despite the developers themselves retracting it after realizing their mistake.

  Keep in mind that the video encoder is not responsible for colorspace conversion — almost all video encoders operate in the YUV domain (usually subsampled 4:2:0 YUV, aka YV12). Thus any problem in colorspace conversion is usually the fault of the tools used, not the actual encoder.

  How to spot it : “The color is a bit off” or “the contrast of the video is a bit duller”. There were a staggering number of “H.264 vs Theora” encoder comparisons which came out in favor of one or the other solely based on “how well the encoder kept the color” — making the results entirely bogus.

  2. Don’t compare at the same (or nearly the same) bitrate. I saw a VP8 vs x264 comparison the other day that gave VP8 30% more bitrate and then proceeded to demonstrate that it got better PSNR. You would think this is blindingly obvious, but people still make this mistake ! The most common cause of this is assuming that encoders will successfully reach the target bitrate you ask of them — particularly with very broken encoders that don’t. Always check the output filesizes of your encodes.

  How to spot it : The comparison lists perfectly round bitrates for every single test, as opposed to the actual bitrates achieved by the encoders, which will never be exactly matching in any real test.

  3. Use unfair encoding settings. This is a bit of a wide topic : there are many ways to do this. We’ll cover the more blatant ones in this part. Here’s some common ones :

  a. Simply cheat. Intentionally pick awful settings for the encoder you don’t like.

  b. Don’t consider performance. Pick encoding settings without any regard for some particular performance goal. For example, it’s perfectly reasonable to say “use the best settings possible, regardless of speed”. It’s also reasonable to look for a particular encoding speed target. But what isn’t reasonable is to pick extremely fast settings for one encoder and extremely slow settings for another encoder.

  c. Don’t attempt match compatibility options when it’s reasonable to do so. Keyframe interval is a classic one of these : shorter values reduce compression but improve seeking. An easy way to cheat is to simply not set them to the same value, biasing towards whatever encoder has the longer interval. This is most common as an accidental mistake with comparisons involving ffmpeg, where the default keyframe interval is an insanely low 12 frames.

  How to spot it : The comparison doesn’t document its approach regarding choice of encoding settings.

  4. Use ratecontrol methods unfairly. Constant bitrate is not the same as average bitrate — using one instead of the other is a great way to completely ruin a comparison. Another method is to use 1-pass bitrate mode for one encoder and 2-pass or constant quality for another. A good general approach is that, for any given encoder, one should use 2-pass if available and constant quality if not (it may take a few runs to get the bitrate you want, of course).

  Of course, it’s also fine to run a comparison with a particular mode in mind — for example, a comparison targeted at streaming applications might want to test using 1-pass CBR. Of course, in such a case, if CBR is not available in an encoder, you can’t compare to that encoder.

  How to spot it : It’s usually pretty obvious if the encoding settings are given.

  5. Use incredibly old versions of encoders. As it happens, Debian stable is not the best source for the most recent encoding software. Equally, using recent versions known to be buggy.

  6. Don’t distinguish between video formats and the software that encodes them. This is incredibly common : I’ve seen tests that claim to compare “H.264″ against something else while in fact actually comparing “Quicktime” against something else. It’s impossible to compare all H.264 encoders at once, so don’t even try — just call the comparison “Quicktime versus X” instead of “H.264 versus X”. Or better yet, use a good H.264 encoder, like x264 and don’t bother testing awful encoders to begin with.

  Less-obvious cheating

  1. Pick a bitrate that’s way too low. Low bitrate testing is very effective at making differences between encoders obvious, particularly if doing a visual comparison. But past a certain point, it becomes impossible for some encoders to keep up. This is usually an artifact of the video format itself — a scalability limitation. Practically all DCT-based formats have this kind of limitation (wavelets are mostly immune).

  In reality, this is rarely a problem, because one could merely downscale the video to resolve the problem — lower resolutions need fewer bits. But people rarely do this in comparisons (it’s hard to do it fairly), so the best approach is to simply not use absurdly low bitrates. What is “absurdly low” ? That’s a hard question — it ends up being a matter of using one’s best judgement.

  This tends to be less of a problem in larger-scale tests that use many different bitrates.

  How to spot it : At least one of the encoders being compared falls apart completely and utterly in the screenshots.

  Biases towards, a lot : Video formats with completely scalable coding methods (Dirac, Snow, JPEG-2000, SVC).

  Biases towards, a little : Video formats with coding methods that improve scalability, such as arithmetic coding, B-frames, and run-length coding. For example, H.264 and Theora tend to be more scalable than MPEG-4.

  2. Pick a bitrate that’s way too high. This is staggeringly common mistake : pick a bitrate so high that all of the resulting encodes look absolutely perfect. The claim is then made that “there’s no significant difference” between any of the encoders tested. This is surprisingly easy to do inadvertently on sources like Big Buck Bunny, which looks transparent at relatively low bitrates. An equally common but similar mistake is to test at a bitrate that isn’t so high that the videos look perfect, but high enough that they all look very good. The claim is then made that “the difference between these encoders is small”. Well, of course, if you give everything tons of bitrate, the difference between encoders is small.

  How to spot it : You can’t tell which image is the source and which is the encode.

  3. Making invalid comparisons using objective metrics. I explained this earlier in the linked blog post, but in short, if you’re going to measure PSNR, make sure all the encoders are optimized for PSNR. Equally, if you’re going to leave the encoder optimized for visual quality, don’t measure PSNR — post screenshots instead. Same with SSIM or any other objective metric. Furthermore, don’t blindly do metric comparisons — always at least look at the output as a sanity test. Finally, do not claim that PSNR is particularly representative of visual quality, because it isn’t.

  How to spot it : Encoders with psy optimizations, such as x264 or Theora 1.2, do considerably worse than expected in PSNR tests, but look much better in visual comparisons.

  4. Lying with graphs. Using misleading scales on graphs is a great way to make the differences between encoders seem larger or smaller than they actually are. A common mistake is to scale SSIM linearly : in fact, 0.99 is about twice as good as 0.98, not 1% better. One solution for this is to use db to compare SSIM values.

  5. Using lossy screenshots. Posting screenshots as JPEG is a silly, pointless way to worsen an encoder comparison.

  Subtle cheating

  1. Unfairly pick screenshots for comparison. Comparing based on stills is not ideal, but it’s often vastly easier than comparing videos in motion. But it also opens up the door to unfairness. One of the most common mistakes is to pick a frame immediately after (or on) a keyframe for one encoder, but which isn’t for the other encoder. Particularly in the case of encoders that massively boost keyframe quality, this will unfairly bias in favor of the one with the recent keyframe.

  How to spot it : It’s very difficult to tell, if not impossible, unless they provide the video files to inspect.

  2. Cherry-pick source videos. Good source videos are incredibly hard to come by — almost everything is already compressed and what’s left is usually a very poor example of real content. Here’s some common ways to bias unfairly using cherry-picking :

  a. Pick source videos that are already heavily compressed. Pre-compressed source isn’t much of an issue if your target quality level for testing is much lower than that of the source, since any compression artifacts in the source will be a lot smaller than those created by the encoders. But if the source is already very compressed, or you’re testing at a relatively high quality level, this becomes a significant issue.

  Biases towards : Anything that uses a similar transform to the source content. For MPEG-2 source material, this biases towards formats that use the 8x8dct or a very close approximation : MPEG-1/2/4, H.263, and Theora. For H.264 source material, this biases towards formats that use a 4×4 transform : H.264 and VP8.

  b. Pick standard test clips that were not intended for this purpose. There are a wide variety of uncompressed “standard test clips“. Some of these are not intended for general-purpose use, but rather exist to test specific encoder capabilities. For example, Mobile Calendar (“mobcal”) is extremely sharp and low motion, serving to test interpolation capabilities. It will bias incredibly heavily towards whatever encoder uses more B-frames and/or has higher-precision motion compensation. Other test clips are almost completely static, such as the classic “akiyo”. These are also not particularly representative of real content.

  c. Pick very noisy content. Noise is — by definition — not particularly compressible. Both in terms of PSNR and visual quality, a very noisy test clip will tend to reduce the differences between encoders dramatically.

  d. Pick a test clip to exercise a specific encoder feature. I’ve often used short clips from Touhou games to demonstrate the effectiveness of x264′s macroblock-tree algorithm. I’ve sometimes even used it to compare to other encoders as part of such a demonstration. I’ve also used the standard test clip “parkrun” as a demonstration of adaptive quantization. But claiming that either is representative of most real content — and thus can be used as a general determinant of how good encoders are — is of course insane.

  e. Simply encode a bunch of videos and pick the one your favorite encoder does best on.

  3. Preprocessing the source. A encoder test is a test of encoders, not preprocessing. Some encoding apps may add preprocessors to the source, such as noise reduction. This may make the video look better — possibly even better than the source — but it’s not a fair part of comparing the actual encoders.

  4. Screw up decoding. People often forget that in addition to encoding, a test also involves decoding — a step which is equally possible to do wrong. One common error caused by this is in tests of Theora on content whose resolution isn’t divisible by 16. Decoding is often done with ffmpeg — which doesn’t crop the edges properly in some cases. This isn’t really a big deal visually, but in a PSNR comparison, misaligning the entire frame by 4 or 8 pixels is a great way of completely invalidating the results.

  The greatest mistake of all

  Above all, the biggest and most common mistake — and the one that leads to many of the problems mentioned here – is the mistaken belief that one, or even a few tests can really represent all usage fairly. Any comparison has to have some specific goal — to compare something in some particular case, whether it be “maximum offline compression ignoring encoding speed” or “real-time high-speed video streaming” or whatnot. And even then, no comparison can represent all use-cases in that category alone. An encoder comparison can only be honest if it’s aware of its limitations.

• Homepage Design : Best Practices & Examples

  5 octobre 2022, par Erin

  Did you know users spend about 50 milliseconds deciding if they like your website’s homepage design or not ?

  With billions of websites and scrolling often done on the go, you have to make a strong first impression because the chances for a once-over are slim. 

  Learn how to design magnetically-appealing website homepages from this guide. 

  What is a homepage in web design ?

  Homepage is the front page of your website — a destination where users land when typing your website URL address. It’s located at the root of the website’s domain (e.g., matomo.org) or a subdomain (e.g., university.webflow.com).

  Design-wise a homepage has two goals :

  • Explain the purpose of the website and present overview information 
  • Provide top-level navigation to lower-level web pages (e.g., blog, sales pages, etc.) 

  Separately, a homepage is also the place where users will return each time they’ll feel stuck and want to start anew. Thus, your homepage website design should provide obvious navigation paths to other website areas.

  6 Must-Know Website Homepage Design Best Practices

  Behind every winning homepage design stands a detailed customer journey map. 

  A customer journey is a schematic representation of how site visitors will move around your website to accomplish various goals. 

  A good customer journey map lists different actions a user will take after landing on your website (e.g., browse product pages, save items to a wishlist, register an account, etc.) — and it does so for different audience segments. 

  

  Your homepage design should help users move from the first step on their journey (e.g., learning about your website) to the final one (e.g., converting to a paid customer). At the same time, your homepage should serve the needs of both new and returning visitors — prospects who may be at a different stage of their journey (e.g., consideration). 

  With the above in mind, let’s take a look at several website homepage design ideas and the reasons why they work. 

  1. Use Familiar Design Elements

  Whether you’re designing a new website or refreshing an old one, it’s always tempting to go “out of the box” — use horizontal scrolling, skip header navigation or include arty animations. 

  Bold design choices work for some brands, mainly those who aren’t using their website as a primary sales channel (e.g., luxury brands). 

  But unfamiliar design patterns can also intimidate a lot of shoppers. In one observational study, people were asked to guess where specific content (e.g., information on international calls) would be placed on a telecom website. 75% of users picked the same location. This means two things :

  • People already have expectations of where specific website information is typically placed 
  • Yet, one in four users struggles to identify the right areas even within standard website layouts

  So why make the job harder for them ? As UX consultant Peter Ramsey rightfully notes : 

  The truth is : designing the best experience isn’t about being unique, it’s about being easy. And guess what feels really easy to use ? Things that feel familiar.

  Therefore, analyse other homepage layout designs in your industry. Pay attention to the number and type of homepage screens and approaches to designing header/footer navigation. 

  Take some of those ideas as your “base”. Then make your homepage design on-brand with unique typography, icons, visuals and other graphic design elements.

  Take a cue from ICAM — a steel manufacturing company. Their niche isn’t typically exciting. Yet, their homepage design stops you in your tracks and tinkers your curiosity to discover more (even if you aren’t shopping for metalware). 

  

  The interesting part is that ICAM uses a rather standard homepage layout. You have a hero image in the first screen, followed by a multi-column layout of their industry expertise and an overview of manufacturers. 

  But this homepage design feels fresh because the company uses plenty of white space, bold typography and vibrant visuals. Also, they delay the creative twist (horizontal scrolling area) to the bottom of the homepage, meaning that it’s less likely to intimidate less confident web users. 

  2. Decide On The Optimal Homepage Layout 

  In web design, a homepage layout is your approach to visually organising different information on the screen. 

  Observant folks will notice that good homepage designs often have the same layout. For example, include a split-view “hero” screen with a call to action on the left and visuals (photo or video) on the left. 

  

  The reason for using similar layouts for website homepage design isn’t a lack of creativity. On the contrary, some layouts have become the “best practice” because they :

  • Offer a great user experience (UX) and don’t confuse first-time visitors 
  • Feel familiar and create a pleasurable sense of deja-vu among users 
  • Have proven to drive higher conversion rates through benchmarks and tests 

  Popular types of website homepage layouts : 

  • Single column – a classic option of presenting main content in a single, vertical column. Good choice for blogs, personal websites and simple corporate sites. 
  • Split screen layout divides the page in two equal areas with different information present. Works best for Ecommerce homepages (e.g., to separate different types of garments) or SaaS websites, offering two product types (e.g., a free personal product version and a business edition). 
  • Asymmetrical layout assumes dividing your homepage into areas of different size and styles. Asymmetry helps create specific focal points for users to draw their attention to the most prominent information. 
  • Grid of cards layout helps present a lot of information in a more digestible manner by breaking down bigger bulks of text into smaller cards — a graphic element, featuring an image and some texts. By tapping a card, users can then access extra content. 
  • Boxes are visually similar to cards, but can be of varying shape. For example, you can have a bigger header-width box area, followed by four smaller boxes within it. Both of these website layouts work well for Ecommerce. 
  • Featured image layout gives visuals (photos and videos) the most prominent placement on the homepage, with texts and other graphic design elements serving a secondary purpose. 
  • F-pattern layout is based on the standard eye movement most people have when reading content on the website. Eye tracking studies found that we usually pay the most attention to information atop of the page (header area), then scan horizontally before dripping down to the next vertical line until we find content that captures our attention. 

  User behaviour analytics (UBA) tools are the best way to determine what type of layout will work for your homepage. 

  For example, you can use Matomo Heatmaps and Session Recording to observe how users navigate your homepage, which areas or links they click and what blockers they face during navigation.

  

  Matomo can capture accurate behavioural insights because we track relative positions to elements within your websites. This approach allows us to provide accurate data for users with different browsers, operating systems, zoom-in levels and fonts. 

  The best part ? You can collect behavioural data from up to 100 different user segments to understand how different audience cohorts engage with your product.

  3. Include a One-Sentence Tagline

  A tagline is a one-line summary of what your company does and what its unique sales proposition (USP) is. It should be short, catchy and distinguish you from competitors.

  A modern homepage design practice is to include a call to action in the first screen. Why ? Because you then instantly communicate or remind of your value proposition to every user — and provide them with an easy way to convert whenever they are ready to do business with you. 

  Here’s how three companies with a similar product, a project management app, differentiate themselves through homepage taglines. 

  Monday.com positions itself as an operating system (OS) for work. 

  

  Basecamp emphasises its product simplicity and openly says that they are different from other overly-complex software. 

  

  Asana, in turn, addresses a familiar user pain point (siloed communication) that it attempts to fix with its product. 

  

  Coming up with the perfect homepage tagline is a big task. You may have plenty of ideas, but little confidence in what version will stick. 

  The best approach ? Let a series of A/B tests decide. You can test a roaster of homepage slogans on a rotating bi-weekly/monthly schedule and track how copy changes affect conversion rates. 

  With Matomo A/B test feature, you can create, track and manage all experiments straight from your web analytics app — and get consolidated reports on total page visitors and conversion rates per each tested variation. 

  

  Beyond slogans, you can also run A/B tests to validate submission form placements, button texts or the entire page layout. 

  For instance, you can benchmark how your new homepage design performs compared to the old version with a subset of users before making it publicly available. 

  4. Highlight The Main Tasks For The User

  Though casual browsing is a thing, most of us head to specific websites with a clear agenda — find information, compare prices, obtain services, etc. 

  Thus, your homepage should provide clear starting points for users’ main tasks (those you’ve also identified as conversion goals on your customer journey maps !).

  These tasks can include : 

  • Account registration 
  • Product demo request 
  • Newsletter sign-up 

  The best website homepage designs organically guide users through a set number of common tasks, one screen at a time. 

  Let’s analyse Sable homepage design. The company offers a no-fee bank account and a credit card product for soon-to-be US transplants. The main task a user has : Decide if they want to try Sable and hopefully open an account with them. 

  

  This mono-purpose page focuses on persuading a prospect that Sable is right for them. 

  The first screen hosts the main CTA with an animated drop-down arrow to keep scrolling. This is likely aimed at first-time visitors that just landed on the page from an online ad or social media post. 

  The second screen serves the main pitch — no-fee, no-hassle access to a US banking account that also helps you build your credit score. 

  The third screen encourages users to learn more about Sable Credit — the flagship product. For the sceptics, the fourth screen offers several more reasons to sign up for the credit product. 

  Then Sable moves on to pitching its second offering — a no-fee debit card with a cashback. Once again, the follow-up screen sweetens the deal by bringing up other perks (higher cashback for popular services like Amazon) and overcoming objections (no SSN required and multi-language support available). 

  The sequence ends with side-by-side product comparison and some extra social proof. 

  In Sable’s case, each homepage screen has a clear purpose and is designed to facilitate one specific user action — account opening. 

  For multi-product companies, the above strategy works great for designing individual landing pages. 

  5. Design Proper Navigation Paths

  All websites have two areas reserved for navigation : 

  • Header menu 
  • Footer menu 

  Designing an effective header menu is more important since it’s the primary tool visitors will use to discover other pages. 

  Your header menu can be :

  • Sticky — always visible as the person keeps scrolling. 
  • Static — e.g., a hidden drop-down menu. 

  If you go for a static header and have a longer homepage layout (e.g., 5+ screens), you also need to add extra navigation elements somewhere mid-page. Or else users might not figure out where to go next and merely bounce off. 

  You can do this by : 

  • Promoting other areas of your website (e.g., sub-category pages) by linking out to them 
  • Adding a carousel of “recent posts”, “recommended reads” and “latest products” 
  • Using buttons and CTAs to direct users towards specific actions (e.g., account registration) or assets (free eBook)

  For instance, cosmetics brand Typology doesn’t have a sticky header on the homepage. Instead, they prompt discovery by promoting different product categories (best sellers, bundles, latest arrivals) and their free skin diagnostic quiz — a great engagement mechanism to retain first time users.

  

  Once the user scrolls down to the bottom of the page, they should have an extra set of navigational options — aka footer links. 

  Again, these help steer the visitor towards discovering more content without scrolling back up to the top of your homepage. 

  Nielsen Norman Group says that people mostly use footers as :

  • A second chance to be convinced — after reading the entire homepage, the user is ready to give your product a go.
    
  • The last resort for hard-to-find content that’s not displayed in global header navigation (e.g., Terms and Conditions or shipping information pages).

  As a rule of thumb, you should designate the following information to the footer : 

  • Utility links (Contact page, Terms & Conditions, Privacy Policy, etc.) 
  • Secondary-task links (e.g., Career page, Investor Details, Media contacts, etc.) 
  • Brands within the organisation (if you operate several) 
  • Customer engagement link (email newsletters and social media buttons)

  The key is to keep the area compact — not more than one standard user screen resolution of 1280×720. 

  6. Show Users What’s Clickable (Or Not) 

  A homepage invites your site visitors on a journey. But if they don’t know which elements to click, they aren’t going to get anywhere.

  Good homepage design makes it obvious which page elements are clickable, i.e., can take the user to a new page or another segment of the homepage. 

  Here are several must-know homepage design tips for better on-page navigation : 

  • Use colour and underline or bold to highlight clickable words. Alternatively, you can change the browser cursor from a standard arrow into another element (e.g., a larger dot or a pointy finger) to indicate when the cursor hovers over a clickable website area. 
  • Make descriptive button texts that imply what will happen when a user clicks the page. Instead of using abstract and generic button texts like “see more” or “learn more”, try a more vibrant language like “dive in” for clicking through to a spa page. 
  • Use a unified hover area to show how different homepage design elements represent a single path or multiple navigation paths. When multiple items are encapsulated in one visual element (e.g., a box), users may be reluctant to click the image because they aren’t sure if it’s one large hit area leading to a single page or if there are multiple hit areas, leading to different pages. 

  Homepage of BEAUSiTE — a whimsical hotel in the Swiss Alps – embodies all of the above design principles. They change the cursor style whenever you scroll into a hit area, use emotive and creative micro-copy for all button texts and clearly distinguish between different homepage elements.

  

  How to Make Your Homepage Design Even More Impactful ? 

  Website homepage design is roughly 20% of pure design work and 80% of behind-the-scenes research. 

  To design a high-performing homepage you need to have data-backed answers to the following questions : 

  • Who are your primary and secondary target audiences ? 
  • Which tasks (1 to 4) you’d want to help them solve through your homepage ?

  You can get the answers to both questions from your web analytics data by using audience segmentation and page transition (behaviour flow) reports in Matomo. 

  Based on these, you can determine common user journeys and tasks people look to accomplish when visiting your website. Next, you can collect even more data with UBA tools  like heatmaps and user session recordings. Then translated the observed patterns into working homepage design ideas. 

  Improve your homepage design and conversion rates with Matomo. Start your free 21-day trial now ! 

  21 day free trial. No credit card required.

  Your email address
  

  Your website address
  

  Your Analytics subdomain will be .matomo.cloud (

• Marketing Touchpoints : Examples, KPIs, and Best Practices

  11 mars 2024, par Erin

  The customer journey is rarely straightforward. Rather, each stage comprises numerous points of contact with your brand, known as marketing touchpoints. And each touchpoint is equally important to the customer experience. 

  This article will explore marketing touchpoints in detail, including how to analyse them with attribution models and which KPIs to track. It will also share tips on incorporating these touchpoints into your marketing strategy. 

  What are marketing touchpoints ? 

  Marketing touchpoints are the interactions that take place between brands and customers throughout the latter’s journey, either online or in person. 

  

  By understanding how customers interact with your brand before, during and after a purchase, you can identify the channels that contribute to starting, driving and closing buyer journeys. Not only that, but you’ll also learn how to optimise the customer experience. This can also help you : 

  • Promote customer loyalty through increased customer satisfaction
  • Improve your brand reputation and foster a more positive perception of your brand, supported by social proof 
  • Build brand awareness among prospective customers 
  • Reconnect with current customers to drive repeat business

  According to a 2023 survey, social media and video-sharing platforms are the leading digital touchpoints among US consumers.

  

  With the customer journey divided into three stages — awareness, consideration, and decision — we can group these interactions into three touchpoint segments, depending on whether they occur before, during or after a purchase. 

  Touchpoints before a purchase

  Touchpoints before a purchase are those initial interactions between potential customers and brands that occur during the awareness stage — before they’ve made a purchase decision. 

  Here are some key touchpoints at the pre-purchase stage : 

  • Customer reviews, forums, and testimonials 
  • Social media posts
  • Online ads 
  • Company events and product demos
  • Other digital touchpoints, like video content, blog posts, or infographics
  • Peer referral 

  In PwC’s 2024 Global Consumer Insights Pulse Survey, 54% of consumers listed search engines as their primary source of pre-purchase information, followed by Amazon (35%) and retailer websites (33%). 

  Here are the survey’s findings in Western Europe, specifically : 

  

  Social channels are another major pre-purchase touchpoint ; 25% of social media users aged 18 to 44 have made a purchase through a social media app over the past three months. 

  Touchpoints during a purchase

  Touchpoints during a purchase occur when the prospective customer has made their purchase decision. It’s the beginning of a (hopefully) lasting relationship with them. 

  It’s important to involve both marketing and sales teams here — and to keep track of conversion metrics. 

  Here are the main touchpoints at this stage : 

  • Company website pages 
  • Product pages and catalogues 
  • Communication between customers and sales reps 
  • Product packaging and labelling 
  • Point-of-sale (POS) — the final touchpoint the prospective customer will reach before making the final purchasing decision 

  Touchpoints after a purchase

  You can use touchpoints after a purchase to maintain a positive relationship and keep current customers engaged. Examples of touchpoints that contribute to a good post-purchase experience for the customer include the following : 

  • Thank-you emails 
  • Email newsletters 
  • Customer satisfaction surveys 
  • Cross-selling emails 
  • Renewal options 
  • Customer loyalty programs

  Email marketing remains significant across all touchpoint segments, with 44% of CMOs agreeing that it’s essential to their marketing strategy — and it also plays a particularly important role in the post-purchase experience. For 61.1% of marketing teams, email open rates are higher than 20%.

  

  Sixty-nine percent of consumers say they’ve stopped doing business with a brand following a bad experience, so the importance of customer service touchpoints shouldn’t be overlooked. Live chat, chatbots, self-service resources, and customer service teams are integral to the post-purchase experience.

  Attribution models : Assigning value to marketing touchpoints 

  Determining the most effective touchpoints — those that directly contribute to conversions — is a process known as marketing attribution. The goal here is to identify the specific channels and points of contact with prospective customers that result in revenue for the company.

  

  You can use these insights to understand — and maximise — marketing return on investment (ROI). Otherwise, you risk allocating your budget to the wrong channels. 

  It’s possible to group attribution models into two categories — single-touch and multi-touch — depending on whether you assign value to one or more contributing touchpoints.

  Single-touch attribution models, where you’re giving credit for the conversion to a single touchpoint, include the following :

  • First-touch attribution : This assigns credit for the conversion to the first interaction a customer had with a brand ; however, it fails to consider lower-funnel touchpoints.
  • Last-click attribution : This focuses only on bottom-of-funnel marketing and credits the last interaction the customer had with a brand before completing a purchase.
  • Last non-direct : Credits the touchpoint immediately preceding a direct touchpoint with all the credit.

  Multi-touch attribution models are more complex and distribute the credit for conversion across multiple relevant touchpoints throughout the customer journey :

  • Linear attribution : The simplest multi-touch attribution model assigns equal values to all contributing touchpoints.
  • Position-based or U-shaped attribution : This assigns the greatest value to the first and last touchpoint — with 40% of the conversion credit each — and then divides the remaining 20% across all the other touchpoints.
  • Time-decay attribution : This model assigns the most credit to the customer’s most recent interactions with a brand, assuming that the touchpoints that occur later in the journey have a bigger impact on the conversion.

  Consider the following when choosing the most appropriate attribution model for your business :

  • The length of your typical sales cycle
  • Your marketing goals : increasing awareness, lead generation, driving revenue, etc.
  • How many stages and touchpoints make up your sales funnel

  Sometimes, it even makes sense to measure marketing performance using more than one attribution model.

  With the sheer volume of data that’s constantly generated across numerous online touchpoints, from your website to social media channels, it’s practically impossible to collect and analyse it manually.

  You’ll need an advanced web analytics platform to identify key touchpoints and assign value to them.

  Matomo’s Marketing Attribution feature can accurately measure the performance of different touchpoints to ensure that you’re allocating resources to the right channels. This is done in a compliant manner, without the need of data sampling or requiring cookie consent screens (excluding in Germany and the UK), ensuring both accuracy and privacy compliance.

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  Customer journey KPIs for measuring marketing campaign performance 

  Measuring the impact of different touchpoints on marketing campaign performance can help you understand how customer interactions drive conversions — and how to optimise your future efforts. 

  

  Clearly, this is not a one-time effort. You should continuously reevaluate the crucial touchpoints that drive the most engagement at different stages of the customer journey. 

  Web analytics platforms can provide valuable insights into ever-changing consumer behaviours and trends and help you make informed decisions. 

  At the moment, Google is the most popular solution in the web analytics industry, with a combined market share of more than 70%. 

  However, if privacy, data accuracy, and GDPR compliance are a priority for you, Matomo is an alternative worth considering. 

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  KPIs to track before a purchase 

  During the pre-purchase stage, focus on the KPIs that measure the effectiveness of marketing activities across various online touchpoints — landing pages, email campaigns, social channels and ad placement on SERPs, for instance. 

  KPIs to track during the consideration stage include the following : 

  • Cost-per-click (CPC) : The CPC, the total cost of paid online advertising divided by the number of clicks those ads get, indicates whether you’re getting a good ROI. In the UK, the average CPC for search advertising is $1.22. Globally, it averages $0.62.
  • Engagement rate : The engagement rate, which is the total number of interactions divided by the number of followers, is useful for measuring the performance of social media touchpoints. Customer engagement also applies to other channels, like tracking average time on-page, form conversions, bounce rates, and other website interactions. 
  • Click-through rate (CTR) : The CTR — or the number of clicks your ads receive compared to the number of times they’re shown — helps you measure the performance of CTAs, email newsletters and pay-per-click (PPC) advertising.

  KPIs to track during a purchase 

  As a potential customer moves further down the sales funnel and reaches the decision stage, where they’re ready to make the choice to purchase, you should be tracking the following : 

  • Conversion rate : This is the percentage of leads that convert into customers by completing the desired action relative to the total number of website visitors. It shows you whether you’re targeting the right people and providing a frictionless checkout experience.
  • Sales revenue : This refers to the quantity of products sold multiplied by the product’s price. It helps you track the company’s ability to generate profit. 
  • Cost per conversion : This KPI is the total cost of online advertising in relation to the number of conversions. It measures the effectiveness of different marketing channels and the costs of converting prospective customers into buyers. It also forecasts future ad spend.

  KPIs to track after purchase 

  At the post-purchase stage, your priority should be gathering feedback : 

  Customer feedback surveys are great for collecting insights into customers’ post-purchase experience, opinions about your brand, products and services, and needs and expectations. 

  In addition to measuring customer satisfaction, these insights can help you identify points of friction, forecast future growth and revenue and spot customers at risk of churning. 

  Focus on the following customer satisfaction and retention metrics : 

  • Customer Satisfaction Score (CSAT) : This metric, which is gathered through customer satisfaction surveys, helps you gauge satisfaction levels. After all, 77% of consumers consider great customer service an important driver of brand loyalty.
  • Net Promoter Score (NPS) : Based on single-question customer surveys, NPS indicates how likely a customer is to recommend your business.
  • Customer Lifetime Value (CLV) : The CLV is the profit you can expect to generate from one customer throughout their relationship with your company. 
  • Customer Health Score (CHS) : This score can assess how “healthy” the customer’s relationship with your brand is and identify at-risk customers.

  Marketing touchpoints : Tips and best practices 

  Customer experience is more important today than ever. 

  

  Salesforce’s 2022 State of the Connected Consumer report indicated that, for 88% of customers, the experience the brand provides is just as important as the product itself. 

  Here’s how you can build your customer touchpoint strategy and use effective touchpoints to improve customer satisfaction, build a loyal customer base, deliver better digital experiences and drive growth : 

  Understand the customer’s end-to-end experience 

  The typical customer’s journey follows a non-linear path of individual experiences that shape their awareness and brand preference. 

  Seventy-three percent of customers expect brands to understand their needs. So, personalising each interaction and delivering targeted content at different touchpoint segments — supported by customer segmentation and tools like Matomo — should be a priority. 

  Try to put yourself in the prospective customer’s shoes and understand their motivation and needs, focusing on their end-to-end experience rather than individual interactions. 

  Create a customer journey map 

  Once you understand how prospective customers interact with your brand, it becomes easier to map their journey from the pre-purchase stage to the actual purchase and beyond. 

  By creating these visual “roadmaps,” you make sure that you’re delivering the right content on the right channels at the right times and to the right audience — the key to successful marketing.

  Identify best-performing digital touchpoints 

  You can use insights from marketing attribution to pinpoint areas that are performing well. 

  By analysing the data provided by Matomo’s Marketing Attribution feature, you can determine which digital touchpoints are driving the most conversions or engagement, allowing you to focus your resources on optimising these channels for even greater success. 

  This targeted approach helps maximise the effectiveness of your marketing efforts and ensures a higher return on investment.

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  Discover key marketing touchpoints with Matomo 

  The customer’s journey rarely follows a direct route. If you hope to reach more customers and improve their experience, you’ll need to identify and manage individual marketing touchpoints every step of the way.

  While this process looks different for every business, it’s important to remember that your customers’ experience begins long before they interact with your brand for the first time — and carries on long after they complete the purchase. 

  In order to find these touchpoints and measure their effectiveness across multiple marketing channels, you’ll have to rely on accurate data — and a powerful web analytics tool like Matomo can provide those valuable marketing insights. 

  Try Matomo free for 21-days. No credit card required.

  Try Matomo for Free

  21 day free trial. No credit card required.

  
  

  Your email address
  

  Your website address
  

  Your Analytics subdomain will be .matomo.cloud (change)

  Choose your analytics subdomain
  

  .matomo.cloud

  I accept the terms and conditions and data processing agreement (DPA)

  
  Your information will be used to create an account on our cloud service. For more information please consult our privacy policy.
  
  
  

  Start improving your websites now