Recherche avancée

Sur d’autres sites (7238)

• 10 Proven Ways Heatmap Software Improves Website Conversions

  20 septembre 2021, par Ben Erskine — Analytics Tips, Plugins, Heatmap
  

  Heatmap software is critical in improving website conversions. Why ? Because it provides customer-centric insights. 

  In the online market, businesses that are customer-centric are 60% more profitable than businesses that are not.

  Using heatmaps to track factors such as usability, compare A/B landing pages and content engagement across channels optimises online conversions by addressing issues faced by real users. 

  How heatmaps benefit your customers

  Customer experience is one of the most important factors in business success. 

  Website heatmap software like Matomo offers unique insights into customer behaviour that is then used to improve their experience, usability and engagement. 

  Data analysis captures information on how many people complete a sales funnel or bounce from a website. Behavioural analytics like heatmaps can show you why they bounce.

  This benefits your customers (and therefore your bottom line) because it puts the focus on them and their needs.

  10 ways heatmap software helps increase website conversions

  #1. Improve UX/Usability 

  Heatmap analytics improve usability by identifying where you are losing customers on your website.

  Forrester research indicates that improving user experience can improve conversions by up to 400%, and on average every $1 spent on UX has a return of $100. 

  For example, you may have a CTA button but customers never click it to reach the payment page. 

  Heatmaps show you how customers interact with your website naturally so that you can adjust it according to their needs.

  Using heatmap analytics to improve usability boosts conversions because it improves customer experiences. 88% of online consumers say that they wouldn’t even bother returning to a website after a bad experience. 

  #2. Website design and content structure 

  Another way that heatmaps can improve conversions is to analyse your website design and content structure. 

  You might be wondering how often a specific ad or a banner was displayed and viewed by your visitors on any of your pages and how often a visitor actually interacted with them. These two parts of the analysis are called content impression and content interaction.

  Ideally, your website elements such as banners, listings, buttons and thumbnails will entice customers to click and find out more. 

  Heatmaps and click maps analyse

  1. How many impressions the content has (e.g. a banner), and
  2. What percent of users that see the content click on it 

  For example, you may have a banner with high impressions but low click-through rates. Tracking content interactions optimises your website by showing which elements or CTAs need more visibility. 

  #3. A/B testing

  Heatmaps provide invaluable data on which landing pages are converting the best. Not only that, but session recordings and heatmap data can show you exactly why one is converting better so that you can replicate the results to increase conversions on other landing pages.

  Tracking heatmap updates on different versions of the same sales page will help confirm creative solutions faster than feedback alone. 

  Ultimately this kind of comparison increases your ROI faster because you are not guessing why some customers are converting and others are not. 

  #4. Conversion Funnel

  Using heatmap software in sales funnels lets you visualise user behaviour at each stage of the conversion process. 

  For example, if many customers are dropping off a payment page, heatmaps can indicate whether it is a usability issue such as pop ups, lack of clarity with payment buttons or something web developers haven’t seen from the back end. 

  These analytics improve conversions by reducing friction in sales funnels as much as possible. 

  #5. Content engagement across channels 

  Optimising websites across all channels is now expected for online businesses. 

  Bad mobile optimisation annoys 48% of online shoppers, and if your web page takes longer than 3 seconds to load, 53% of visitors will simply click away. 

  You can use heatmaps to improve engagement by tracking mouse activity, clicks and scrolling. This helps improve conversions by confirming 

  • How invested a user is in the page 
  • How easy it is to navigate your website and content on different devices 
  • What is your most viewed content and what to push more of 
  • How users generally move through your website on different devices 
  • How clear your messaging is (e.g. high click through rate but low engagement could indicate they aren’t finding what they’re looking for once they click on a CTA)

  #6. Above the fold analysis 

  Although a well-used web development term, above the fold is still one of the most important factors in heatmap analysis. 

  Above the fold analysis gives you insight into a customer’s first impression of a page. 

  An example of above-the-fold heatmaps in action could be a page with a video explanation. Say you have a landing page with a video below the fold that explains why someone should buy and has a CTA button underneath. If there are a lot of page visitors but very few people scrolling below the fold, you can see why hardly any visitors are watching the video or engaging with the CTA button. 

  Insights like this would inform further development such as including important video content above the fold or updating header copy to encourage visitors to scroll down the page more often.

  

  #7. Session recording

  Recording features go hand in hand with heatmap visualisations. Recording features like Session Recording shows the flow of each user’s time on your website. 

  For example, a session recording replays all clicks, mouse movements, scrolls, window resizes, form interactions, and page changes (e.g. when a popup appears).

  #8. Scroll heatmap 

  A scroll heatmap shows the percentage of people that have seen a part of the page. 

  For example, the top of a website page will be the “hottest” in a scroll heatmap, and it naturally gets “colder” further down.

  Tracking this shows whether customers are staying on the page, whether they are only seeing information above the fold, and whether sales pages are engaging. 

  It is an effective strategy for improving sales pages because it shows where customers are losing interest and which elements receive the most engagement.

  

  #9. Records clicks 

  With a click heatmap, you can find out what your visitors think is clickable on a webpage.

  This improves conversions in two ways. 

  Firstly, it shows whether customers are clicking where you expect them to. For example, if you create a “buy now” or “free trial” button but nobody ever pushes it, it informs your back end developers that it needs an upgrade. 

  Secondly, it indicates any user experience issues. If there are a lot of clicks on an element that doesn’t link anywhere, it shows that it either needs to be changed or have a link included because customers are trying to engage with it. 

  For even more accurate data, combine click maps with hover maps. This shows where users are paying attention but not clicking through. 

  #10. Records mouse movement/hovering

  Is your website distracting users from the ultimate goal of converting ? Does your website have a logical flow and next step ? Recording mouse movement and attention will help you answer questions like these. 

  Mouse move and hover heatmaps identify where your website visitors engage on the page. Are they naturally drawn to your CTAs ? Is the sidebar taking their attention away from the primary content ? 

  This data increases the likelihood of conversions because it shows where you need to remove distractions or draw their attention in. 

  

  Final thoughts on heatmap analytics 

  Heatmap analytics benefit both you and your customers. By identifying issues that stop them from buying and optimise their engagement, you’ll have happy customers and happy stakeholders. 

  Next, check out these guides on heatmap software and using user behaviour analytics to increase conversions and improve customer experience !

  The Ultimate Guide to Heatmap Software

  How to use Behavioural Analytics to Improve Website Performance

  Heatmap Video

  Session Recording Video

• What is White Label Analytics ? Everything You Need to Know

  6 février 2024, par Erin

  Reports are a core part of a marketing agency’s offering. It’s how you build trust with clients by highlighting your efforts and demonstrating your results. 

  But all too often, those reports deliver a jarring and incohesive experience. The culprit ? The logos, colours and names of third-party brands your agency uses to deliver work and create the reports. 

  Luckily, there’s a way to make sure your reports elevate your agency’s stature ; not undermine it. 

  By white labelling your tools, you can deliver a clear and cohesive brand experience — one that strengthens the client relationship rather than diminishing it. 

  In this article, we explain what white label analytics tools are, why it’s important to white label your analytics solution and how you can do it using Matomo. 

  What is white label analytics ?

  White labelling is the process of redesigning a product or service using your company’s brand. The term comes from the act of putting a white label on a product that covers the original branding and allows the reseller to personalise the product.

  White label analytics, then, is a way to customise your analytics software with your agency’s logo and colours. When you white label your analytics, you ensure your reports, dashboards and interface provide a consistent and familiar user experience.

  

  The alternative is to provide your clients with an analytics report containing the logo and branding of your analytics software provider — whether that’s Google Analytics, Matomo, or another tool. 

  For some clients, it can create a confusing experience that takes attention away from your agency’s results.

  Why white label analytics is important

  There are plenty of reasons to white label your analytics tool, from improving your client’s experience to generating additional revenue. Here are four of the most important benefits to know :

  

  Improve the client experience

  You want your clients to have a seamless user experience with your agency’s brand, whether they visit your website, log into their client portal, or read one of your reports. 

  By white labelling your analytics platform, you can give your clients a visually appealing experience that stays in line with the rest of your branding and doesn’t leave them confused about who they are interacting with or which company is providing the service they pay for. 

  This is especially important if your agency uses other third-party tools like a client portal or productivity platform that also allows for custom branding. 

  Strengthen client relationships

  When you use white labelling to remove solution providers’ logos, you ensure your brand gets all of the credit for the hard work you’ve been doing. This can strengthen the agency-client relationship and reaffirm the importance of your agency. 

  But, white labelling allows you to tell a better story through your reports and increases the perceived value you offer. There are no other brands, logos, or names to confuse the narrative or detract from your key points — or to stop the client from understanding just how much value you provide. 

  Save time and increase productivity 

  White labelling your analytics platform can save your team a significant amount of time when creating client reports. 

  There’s no need to carefully screenshot graphs to add them to your own branded report. You can simply email clients a report using your white labelled analytics platform, assuring them of a seamlessly branded experience.

  The upshot is that your team can spend more time on billable work, improving the value they deliver to existing clients or opening up capacity to take on even more work. 

  Increase monetisation opportunities

  Whether you are an agency or consultant, white labelling an analytics solution gives you the opportunity to package and sell analytics as part of your own services. This can open up new revenue streams, help you to diversify your income, and reach a wider audience.

  The beauty of a white label offering is that there is no allusion to the company providing the underlying service.

  The most important elements of an analytics platform to white label 

  A white label analytics solution should offer a broad range of customisation options that range from surface-level branding to functional elements like tracking codes. 

  Below we take a look at the top components you should be able to customise with your chosen platform. 

  Logo and Favicon

  The logo is the first thing clients will see when they open up their analytics platform or look at your reports. It should make your services instantly recognisable, which is why it’s so jarring when clients read a report with another company’s brand slapped on every chart. 

  This should be the very first thing you change since it will be on almost every page and report your client views. Don’t stop there, however. If you send clients web-based reports, you’ll also want to change the platform’s favicon — the small logo you see next to your website in a browser. 

  Customising both your logo and favicon is easy with Matomo. 

  Just head to Administration, then General Settings and click Use a custom Logo under Brand settings.

  

  Upload your brand, click Save, and it will automatically populate your brand in place of the Matomo logo across the platform, just like in the image above.

  Brand name

  Most analytics platforms will mention their brand names repeatedly across the site, so it’s important to change these, too.

  Otherwise, you risk clients reading your analytics reports in detail or playing around with your platform’s settings and getting confused when another seemingly unrelated name keeps popping up. 

  Again, this is easily done with Matomo’s White Label plugin. 

  Head to Administration, then General Settings. Scroll to the bottom of the page to find WhiteLabel settings.

  Enter your brand or product name in the first box and click Save. 

  

  Just like your logo, this will replace every instance of Matomo’s brand name with your own.

  Brand colours

  Changing your analytics platform’s colours to match your own is almost as important as swapping out the logo. 

  Failure to do so could mean the charts and graphs you add to your client reports could cause confusion. 

  You can also use Matomo’s WhiteLabel settings to change the platform’s background and font colours. 

  Just enter a new header background and font colour using hexadecimal values.

  

  This change will also apply to automated email reports. 

  Custom tracking

  Tracking requests and links are an overlooked element of analytics when it comes to white labelling. Most people wouldn’t think twice about them, but they are an easy way for someone in the know to identify which platform you are using. 

  With Matomo’s White Label plugin, it’s possible to customise every request Matomo makes to your clients’ websites. 

  If left unbranded, tracking requests contain the following references : matomo.js and matomo.php. 

  By clicking the Whitelabel tracking endpoint box on the WhiteLabel settings page, those references will be replaced with js/tracker.js and js/tracker.php

  You’ll need to update your tracking code to reflect these changes, otherwise, requests will still contain Matomo branding. 

  Try Matomo for Free

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

  Start for free

  No credit card required

  Links

  Finally, you’ll want to remove any links to any additional content offered by the analytics company. These are usually included to improve the user experience, but they are best removed if you are letting clients access your platform. 

  With Matomo, you can remove all links by clicking the relevant box in WhiteLabel settings. 

  You can also use the Show Marketplace only to Super Users checkbox to limit the visibility of Matomo’s Marketplace to everyone bar Super Users.

  Can you white label Google Analytics ?

  In a word : no. 

  Google Analytics might be the most popular analytics platform, but it comes up short if you want to customise its appearance. 

  This can be a particular problem for agencies that need to stand out from competitors offering the same generic reports. You can add more context, detail and graphs to your analytics reports, of course. But you’ll never be able to create completely custom, brand-cohesive reports using Google Analytics. 

  3 analytics platforms you can white label

  While you can’t white label Google Analytics, there are several web analytics providers that do offer a white labelling service. Here are three of the best :

  Matomo

  As you’ve already seen, Matomo is the ideal web analytics platform if you want to let your own brand shine through. Matomo lets you personalise the entire dashboard and all of your reports. That includes :

  • Adding your brand logo and favicon
  • Changing the font and background colours 
  • Removing third-party links
  • Tracking using custom URLs 
  • Develop your own custom theme

  Matomo offers a 21-day free trial (no credit card required). If you want to get remove the Matomo branding, you need the White Label plugin, which starts at just $179 per year after a free trial.

  Try Matomo for Free

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

  Start for free

  No credit card required

  Clicky

  Clicky is a simple, privacy-focused web analytics platform with a white label offering. Like Matomo, you can add your logo and change the platform’s colours. 

  Clicky offers a seven-day free trial and charges a $99 setup fee, with prices starting from $49 and rising to $399. 

  Plausible 

  Plausible is another privacy-focused Google Analytics alternative that offers white labelling. The difference here is that it’s pretty complex to set up. 

  Rather than customising Plausible’s platform, for instance, you need to embed its dashboard into your own user interface. If you want to create your own custom dashboard, you’ll need to use an API. 

  Plausible offers a 30-day free trial.

  Leverage white label analytics today with Matomo

  Don’t put up with confusing unbranded clients a moment longer. White label your analytics platform so the next time you sit down to share insights with your clients, they’ll only see one brand : yours.

  Matomo makes it quick and easy to customise the look of your analytics platform and all of the reports you generate. If you already use Matomo, try the White Label plugin free for 30 days.

  If not, try Matomo with a free 21-day trial. 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

  

• 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 (