Favicons are those little icons you see in your browser tabs. When you have many open tabs in your browser, they help you recognize and find the page you were looking for. They are important for your branding because Google shows them in the mobile and desktop search results. So, let’s take a closer look at those little icons and your branding here!
What is a favicon?
A favicon is a tiny, square image that represents a website. You see it in your browser’s address bar, open tabs, and bookmarks. Its main job is to help users quickly identify and find a site among many open tabs or results. Often, these match a website’s logo or theme, making it instantly recognizable. For consistency, favicons follow certain size and format rules to look good on different devices and platforms.
Favicon in your browser bar
The above example is in a browser bar, but we also see these in the search results. For some time, Google has shown them in its search results.
The Yoast logo is an example of a favicon in Google search
If your favicon represents a trustworthy brand, it can help people recognize your brand through this little icon, boosting your site’s click-through rate. After all, a picture says more than a thousand words!
Make your favicon stand out
You should make sure your favicon stands out, whether from that long list of tabs or the search results. Check if it matches your logo and website well. Especially when you are not one of the big brands and want people to recognize this little icon. Some tips directly related to that are:
Avoid too many details in your icon;
Please use the right colors so the favicon doesn’t blend in with the gray of your browser tab;
Test it at various sizes to ensure it remains clear and recognizable.
Everything is about branding. Your brand should be recognizable. Proper branding ensures that people will immediately relate your favicon to your website.
Follow Google’s guidelines regarding which format and size to use for your favicon. Google’s latest guidelines require favicons to maintain a 1:1 aspect ratio and a minimum size of 8×8 pixels. While the minimum size offers a baseline, Google strongly recommends using a resolution of at least 48×48 pixels to ensure clarity and visual appeal across various devices.
You should review and adjust your favicons to align with these guidelines. Make sure that your brand remains effectively represented in search results.
Yoast SEO shows your favicon in the Search Appearance section
Do these have SEO benefits?
Are there real SEO benefits? The importance of these icons certainly increased since they are present in the search results. While adding a favicon won’t directly make your page rank higher, it might increase the click-through rate to your page when it is shown next to your URL in the search results. It adds professionalism to your site, enhancing user perception and trust. This might indirectly contribute to better engagement metrics.
Of course, this only works if people feel positively about your brand or website. In practice, you should invest time in holistic SEO: making your website (and product/service) awesome in every way!
Favicons in WordPress
If you use WordPress, you might know that there’s a favicon functionality in WordPress. You can use this default functionality without hassle. It’s located in the General Settings and is called Site Icon. Here, you can read step-by-step instructions on how to change your site’s favicon in WordPress.
Set your favicon in the WordPress General Settings
These icons are small powerhouses
Favicons might be small, but they impact how people see your website. Your favicon can represent your brand by keeping your design simple and following the latest guidelines. It helps attract attention and makes your site look more professional. While they don’t directly boost search rankings, they can lead to higher click-through rates and better brand recognition. These benefits can support your overall SEO strategy. Spending a little time on a great icon can strengthen your connection with visitors.
Edwin is an experienced strategic content specialist. Before joining Yoast, he worked for a top-tier web design magazine, where he developed a keen understanding of how to create great content.
As webshop owners, we continuously refine our checkout process by monitoring shopping cart abandonment and running A/B tests. Why do some users fail to make purchases even after adding products to their carts? This article explores that question while considering diverse perspectives about abandoned shopping carts.
Table of contents
Shopping cart abandonment occurs when online shoppers add items to their virtual cart but leave the site without completing the purchase. This often results from unexpected costs, complex checkout processes, or limited payment options. Addressing these issues is vital for ecommerce businesses to boost sales and improve customer satisfaction. Optimizing this is a huge part of ecommerce SEO and Shopify SEO.
Shopping cart abandonment continues to challenge ecommerce businesses, with statistics showing that nearly 70% of potential purchases are left incomplete. This is a huge annual loss. While this represents a significant economic issue, exploring it unveils a complex mix of cultural, technological, and behavioral factors.
Economic and behavioral insights
The many abandoned shopping carts may reflect broader consumer behavior trends, especially in a cautious post-pandemic environment. Consumers are increasingly deliberate about spending, influenced by economic factors like inflation and financial uncertainty. This trend aligns with the behavioral economic principle of loss aversion, where the fear of making a poor purchase decision outweighs the potential benefits.
Cultural variations in shopping behavior
Cultural influences profoundly affect shopping behaviors, with some cultures prioritizing the experience over the transaction. In regions where shopping is viewed as a social activity, higher abandoned shopping cart rates might occur as consumers enjoy browsing without the intent to purchase immediately. This cultural perspective invites businesses to consider localized strategies that respect and leverage these social shopping practices.
For some, shopping isn’t just a functional task; it’s an enjoyable activity akin to window shopping. These users may add items to carts for fun rather than purchase. Online window shopping could explain some cart abandonment, as users may use carts as temporary wish lists, planning to revisit them later.
Technological and psychological dimensions
Technological advancements, such as predictive AI, offer promising solutions to reduce abandoned shopping carts by addressing consumer hesitations. However, this raises privacy concerns, prompting the need for transparent data practices. Psychologically, shoppers may experience decision fatigue or become overwhelmed by choice, leading to abandonment. Simplifying choices and providing clear, concise information can alleviate these issues.
Ethical and environmental considerations
The rise of sustainability and ethical consumption reshapes consumer expectations. As environmental concerns become more prominent, consumers demand transparency and ethical practices from retailers. Businesses that fail to meet these expectations risk losing customers who prioritize these values, highlighting the need for authentic corporate responsibility.
Alternative shopping models
Community-based buying and cooperatives represent alternative shopping models emphasizing collective purchasing power and shared values. These models can reduce abandonment by fostering community and commitment among consumers. Additionally, they challenge traditional capitalist paradigms, offering a collaborative approach to consumption.
Nike has a nice and clean shopping cart with options to save favorite items quickly
Causes of cart abandonment
The reasons for cart abandonment can be surprisingly straightforward, often overlooked during checkout optimization. While many focus on preventing abandonment, it’s crucial to understand why users utilize shopping carts initially. As we discussed, could cultural practices or economic conditions influence shopping behavior, leading to varying patterns of cart usage across different regions?
Research by Close and Kukar-Kinney (2010) highlights that the primary focus shouldn’t solely be on abandonment but also the initial use of shopping carts. Many assume users add products to carts to buy them, but this isn’t always true. A significant portion of users treat shopping carts as wish lists or use them to calculate total costs, including potential hidden fees.
This raises the question: How do digital shopping habits compare to traditional in-store shopping, and what lessons can be drawn from other industries, such as hospitality or travel, where reservations and bookings often follow similar patterns?
Kaufman-Scarborough and Lindquist (2002) also note that shopping carts serve purposes beyond immediate purchases. This implies that “abandonment” might be an oversimplification. Some users explore and tally future purchases without intending to buy immediately.
Session time-out concerns
Session time-out refers to the automatic expiration of a user’s shopping session on an ecommerce website after a period of inactivity. When a session times out, the items in the user’s shopping cart may be lost or require re-addition, leading to frustration and potential abandonment. This technical limitation can significantly impact the shopping experience, particularly for users who take longer to make purchase decisions or are interrupted during the process.
To mitigate abandonment caused by session timeouts, you can extend session durations. You can also implement persistent shopping carts or reminders to encourage users to complete their purchases before the session expires.
Challenges in understanding cart usage
Determining why users abandon carts and how they use them is challenging but possible. Studies and enhanced ecommerce analytics in tools like Google Analytics can provide insights. Exit intent surveys, which appear when users attempt to leave, can offer valuable feedback on abandonment reasons.
The famous Baymard Institute statistics show an average cart abandonment rate of 70.19% (as of September 2024), highlighting the need for comprehensive analysis. Comparative studies across different retail sectors or geographic markets reveal unique patterns or universal truths about consumer behavior.
The Baymard Institute identified several causes of cart abandonment. Here are the main ones:
48% Extra costs too high (shipping, tax, fees)
26% The site wanted me to create an account
25% I didn’t trust the site with my credit card information
23% Delivery was too slow
22% Too long/complicated checkout process
21% I couldn’t see/calculate the total order cost up-front
18% Returns policy wasn’t satisfactory
17% Website had errors/crashed
13% There weren’t enough payment methods
9% The credit card was declined
There are many opportunities to apply insights from mobile app user experience research to improve mobile shopping cart processes. Technological advancements, such as AI and machine learning, can also personalize and streamline the shopping experience on mobile devices.
Suggestions for improvement
To effectively address cart abandonment and its alternative uses, we must consider a range of strategies that incorporate diverse perspectives and innovative thinking. Here are some suggestions that help improve the shopping cart experience.
1. Transparent pricing and costs
While clearly displaying prices and additional costs like shipping is fundamental, consider how cultural perceptions of pricing transparency might vary. In some regions, consumers expect negotiation, while others value fixed, upfront pricing. Brands can experiment with dynamic pricing models or offer region-specific promotions to align with local expectations.
2. Diverse and flexible payment options
Beyond merely outlining payment methods, consider integrating payment innovations such as digital wallets or microfinancing options. These can cater to tech-savvy consumers and those with limited access to traditional banking. Offering payment flexibility reduces barriers and aligns with the growing trend toward financial inclusivity.
3. Streamlined checkout process
Defining checkout steps is crucial, but personalizing the process is equally important. Use data analytics to tailor the checkout experience based on user behavior, such as pre-filling information for returning customers or offering fast-track options for those in a hurry. To minimize friction, consider implementing one-click checkouts, similar to Amazon’s model.
4. Wish lists and alternative engagements
Implementing wish lists is a practical way to differentiate between genuine abandonments and alternative cart uses. However, expanding beyond traditional wish lists to include social commerce features — like sharing wish lists with friends or integrating with social media platforms — can enhance the shopping experience. This builds community and taps into the influence of peer recommendations. Retargeting and cart recovery email campaigns are also valid options.
5. Social commerce and community-driven experiences
Social commerce and community-driven shopping are reshaping how consumers interact with brands. By creating platforms where users can collaborate, share reviews, or engage in group buying, businesses can foster a sense of community that reduces shopping cart abandonment. These experiences transform shopping from a solitary activity to a shared journey, increasing consumer commitment.
6. Ethical and sustainable practices
Aligning with consumer values on sustainability and ethics can mitigate cart abandonment. Clearly communicate how products meet ethical standards, whether through sustainable sourcing or fair trade certification. Transparency can reassure consumers and reduce shopping cart abandonment driven by ethical concerns.
7. Technological integration and innovation
Explore technologies like augmented reality to offer virtual try-ons or 3D product visualizations. These innovations can reduce uncertainty and enhance consumer confidence, particularly in fashion and home furnishings, where physical interaction with products is traditionally valued.
8. Feedback and iterative improvement
Encourage consumer feedback at various shopping journeys to identify pain points leading to abandonment. Based on this feedback, implement iterative improvements, ensuring the shopping experience evolves in line with consumer expectations and technological advancements.
These strategies give businesses insight into the issues and solutions that reduce shopping cart abandonment rates. As a business owner, you want to improve the overall shopping experience for your customers. This comprehensive approach addresses practical and emotional aspects of consumer behaviors. The goal should be to foster loyalty and encourage conversion in a difficult ecommerce environment.
Stumptown Coffee Roasters offers different ways to shop, including a subscription and an option to donate part of the purchase
How do you handle shopping cart abandonment on your site? Do you provide wish lists? Consider these insights to optimize your website’s shopping experience. Maybe you borrowed other innovative strategies from other industries or cultures for your approach to reducing cart abandonment? If not, take a look around and get inspired!
Edwin is an experienced strategic content specialist. Before joining Yoast, he worked for a top-tier web design magazine, where he developed a keen understanding of how to create great content.
Online retailers work hard to make their stores stand out from the competition. One of the main points they should focus on is offering the best user experience. Combined with a proper SEO strategy, this can lead to great results. Search engines like Google prioritize user satisfaction, so integrating UX and ecommerce SEO helps improve search rankings and build a long-term relationship with your customers.
UX is the underrated SEO powerhouse
Traditionally, SEO focused on keywords, backlinks, and technical factors. However, Google’s algorithms also focus on user engagement and satisfaction. A great UX is not simply an add-on but the foundation of your SEO efforts.
As Steve Jobs famously said, “Design isn’t just what it looks like and feels like — design is how it works.” High-quality UX/UI design can increase visitors’ time on a website and lead to better conversion rates. Such metrics indicate to search engines that the site effectively addresses user needs, which could warrant higher rankings.
Customers seek a seamless experience when buying something. A great UX can influence those purchasing decisions and set your brand apart from competitors in a market with similar products and services.
As another business leader, Dr. Ralf Speth, ex-CEO of Jaguar Land Rover, famously said: “If you think good design is expensive, you should look at the cost of bad design.”
Improving conversion rates through UX
A website’s design, performance, and functionality directly impact its conversion rates. A well-executed user interface can boost conversions. Such enhancements attract more visitors and convert them into loyal customers. There are many sections on your online store that could benefit from UX improvements.
For example, abandonment of shopping carts is a big issue in ecommerce. There are many reasons why users leave their carts without buying. Most of these are tied to the buyer journey, but many customers also leave their carts due to issues with the store or the buying process UX. In numbers: the Baymard Institute found “that 22% of US online shoppers have abandoned an order in the past quarter solely due to a “too long/complicated checkout process,” while 17% left because of technical issues on the site.”
Improving page speed is also one of the pillars of UX. Portent found “that the difference in ecommerce conversion rate between blazing-fast and modestly quick sites is sizable. A site that loads in 1 second has an ecommerce conversion rate 2.5x higher than a site that loads in 5 seconds.”
These are all things you can fix in your UX strategy. In a well-known study, Forester Research showed that businesses can expect up to $100 in return for every dollar spent on UX. For many retailers, investing in UX and ecommerce SEO can drive business growth.
The importance of mobile optimization
Since mobile has far eclipsed desktop traffic in market share, optimizing for mobile is more important than ever. At the start of 2024, Statista calculated that smartphones were responsible for 77 percent of retail site traffic globally and for generating two-thirds of online shopping orders.
First impressions matter
Creating a positive first impression is critical for ecommerce businesses. Research suggests that users form an opinion about a website in just 50 milliseconds. Key factors influencing these lightning-fast judgments include visual complexity, prototypicality, and exposure time. Prototypicality refers to how closely a website aligns with users’ expectations based on familiar design patterns. Exposure time is the brief period visitors initially see and evaluate a site.
Websites that are visually simple yet stick to common conventions are perceived as more appealing, even within this short exposure time. As visitors spend more time on a site, the familiar structure becomes as influential as its simplicity. Focus on these design elements to make visitors happy and improve engagement.
Google NavBoost and user trust
Recent insights into Google’s NavBoost highlight the role of user behavior in search rankings. NavBoost analyzes user interactions, particularly click patterns, to refine search results based on user satisfaction. Metrics such as “good clicks” (indicating user satisfaction) and “last longest click” (where users spend the most time) directly correlate with UX.
A positive user experience leads to higher rates of good clicks and lower bounce rates. This shows that UX is important in establishing trust and credibility through Google’s E-E-A-T framework (Expertise, Experience, Authoritativeness, Trustworthiness).
The symbiosis of UX and SEO
UX and SEO are one. You might even call it SXO: Search Experience Optimization. Search engines prioritize websites that offer good user experiences. That makes sense because it aligns with their goal of delivering valuable content to users. A focus on UX boosts user satisfaction and could enhance search engine rankings. Those rankings could help drive traffic and improve conversions.
Strategic initiatives for UX and SEO
There are many things to do if you want to enhance both UX and ecommerce SEO, here are just a couple of them:
Responsive design: Make your website mobile-friendly, as mobile devices account for over half of global web traffic. Responsive design improves user satisfaction by providing a seamless experience across devices. As a result, it might positively influence search engine rankings. For example, eCommerce giants like Amazon excel in responsive design. These stores make sure that users have a consistent and user-friendly experience whether they are browsing on a desktop, tablet, or smartphone. This adaptability helps capture and retain mobile users.
Clear navigation and structure: Develop intuitive site architecture that facilitates easy navigation. This not only enhances the user experience but also aids search engines in understanding and indexing content effectively. A well-designed navigation system with a robust site search option can improve user satisfaction. For instance, ASOS, a popular online fashion retailer, offers a well-organized navigation menu with clear categories, making it easy for users to quickly find what they’re looking for.
Improve performance:Optimize page speed to reduce bounce rates and improve user engagement. Google’s Core Web Vitals highlight the importance of fast, stable, and interactive pages. Practical steps include compressing images, leveraging browser caching, and using content delivery networks (CDNs). Research shows that a site that loads in one second can have a conversion rate 2.5 times higher than one that takes five seconds.
Engaging content: Create informative, relevant, and engaging content. High-quality content draws users in and sends positive signals to search engines. For example, incorporating detailed product descriptions, customer reviews, and engaging blog posts can enrich the user experience and encourage visitors to spend more time on your site.
Accessibility: Incorporate accessibility features to accommodate all users, including those with disabilities. This aligns with UX best practices and ecommerce SEO requirements. Following the Web Content Accessibility Guidelines (WCAG) ensures your site is usable for a diverse audience, enhancing user satisfaction and search visibility.
A/B testing: Implement A/B testing to refine your UX and conversion strategies. This involves comparing two versions of a webpage to see which performs better. For example, testing different CTAs, headlines, or images can provide insights into what resonates most with your audience. Businesses can continuously optimize their site for better engagement and conversion rates by iterating based on real user feedback.
A strategy for success with UX and SEO
Today, it would be foolish not to integrate UX into your SEO strategy. Focus on user experience design and combine it with proven SEO strategies. This helps ecommerce businesses improve search visibility, engage users, and support long-term growth. This approach helps customers find and appreciate online stores, which leads to loyal customers and increased revenue.
Edwin is an experienced strategic content specialist. Before joining Yoast, he worked for a top-tier web design magazine, where he developed a keen understanding of how to create great content.
Beyond getting visitors to your site, you have the crucial task of converting them into engaged customers—whether they sign up for a newsletter, complete a contact form, or make a purchase. A/B testing, also called experimentation, is an important tool to maximize the value of your organic (and paid) traffic and grow your business. But do it wrong, and you’ll hurt your conversions and SEO. Let’s avoid that!
Table of contents
What is A/B testing?
In short, A/B testing helps you find the truth of whether you made the correct decisions. It gives you certainty and can verify you’re a smart person making smart decisions. A is your baseline, or in other words, what your website looks like before you change anything. And B is your variation to A, so a changed button, text, or anything. You will then test to see which one works best.
So it’s about the truth, and it’s dangerous to do it wrong. Oh, and I forgot that it’s easy to make mistakes. This all sounds very vague. Let’s start with an example of an experiment:
A/B test example
“Let’s say you have an online store selling flip-flops. Your product page gets 1000 monthly visits, but only 50 persons buy a pair (5% conversion rate). That needs to be improved! You read online that adding reviews is a best practice, so you decide to add one. Although a review can improve conversion, it may not be so in this case. Do you take a chance or test? Test, of course! So what happens next?
There are two groups:
Control group: the original checkout without the review (5% conversion rate).
Variant group: the modified checkout with the review.
With an A/B testing tool, you randomly show half your website visitors the original checkout and the other half the variant with the review. With the same A/B tool, you track the number of visitors and flip-flops you sell for each group. You will find the following:
Control group: 50 purchases out of 1000 visitors (5% conversion rate)
Variant: 70 purchases out of 1000 visitors (7% conversion rate).
You check if the increased conversion rate happened because of the change or if it was chance by using an A/B test calculator (more about this later). Based on these results, you can declare your variant a winner. Hooray! You can safely implement the review to improve the conversion rate on the checkout.”
Example showing product page A with a 5% conversion rate and product page B with a 7% conversion rate.
The benefits of A/B testing
Now that you know what A/B testing is, why would you jump through hoops and spend time and money on it? Isn’t making decisions based on expertise or a gut feeling easier?
Reducing risk
A/B testing is like a safety net for your business decisions. Instead of relying on gut feelings or assumptions, it gives evidence of what resonates with your audience, allowing you to move forward confidently and minimize the risk of negative outcomes.
Learning
Every experiment you run teaches you something about your audience’s preferences and behaviors. In the example above (adding a review on the checkout), you learned that this review increases conversion. But why does this review convince users? Can you use that message on product pages? Your socials? Testing is a continuous learning process that empowers you to make better, more informed decisions. You learn what works best for your audience and business.
Money!
If you have stocks or a savings account, you might’ve heard of the term ‘compound interest.’ As explained by Online Dialogue compound interest is like a snowball running downhill. Every time your conversion rate increases after an experiment, it adds extra revenue. More importantly, you’re not decreasing your conversion rate and slowing down your business. You get your business rolling like that snowball by repeatedly making the right decisions.
Here’s an example:
Your current conversion rate is 5% (50 purchases from 1000 site visitors)
With an increase of 10% conversion rate, you add 5 purchases.
Another increase of 10%, you add 5.5 purchases.
Another increase of 10%, you add 6.05 purchases.
And so on.
You’re benefiting more and more from the same conversion rate uplift.
Compound interest example visualizing a stronger growth over time for companies running experiments
Can I run A/B tests on my website?
Not everyone can run A/B tests on their websites, or at least not on all pages. There are three key elements you need for testing:
Enough site visitors (either organic and/or paid).
Enough conversions (in the broadest sense, i.e., purchases, signups, form completions, clicks).
Clean data: you need to know that your tracking tool is correct. If your tracking tool shows fifty purchases while, in reality, it was forty, you will draw the wrong conclusions.
So, what is ‘enough’ regarding site visitors or conversions? That depends. If you only have a few site visitors but many purchase flip-flops, you might be able to run tests and vice versa. You can check this by measuring the ‘Minimum Detectable Effect’ (MDE).
This is the minimum conversion rate change to prove that your adjustment caused the increase or decrease.
Follow these steps:
Look up your current page visitors and conversions and add these to the “Visitors A” and “Conversions A” fields in the A/B test calculator. (Example: 1000 visitors and 50 conversions).
Add the same number of visitors in the “Visitors B” field and play around with the number of conversions. Is it significant for 60 conversions? 70? 65?
Find the minimum conversion rate increase and assess whether that is realistic. The benchmark is 10% or lower. Experience shows that achieving a more than 10% increase is very difficult.
Which type of conversions to measure the Minimum Detectable Effect (MDE)?
What should you use to determine the Minimum Detectable Effect (MDE)? Always use your primary business conversion first, like purchases, form completions, or meetings booked. If you don’t have enough of those, you can also test with secondary conversions, like clicks to checkout.
Important: Don’t use ‘hacks’ to get users from one page to another when testing to increase clicks. You’ll get visitors to the checkout with the promise your flip-flops allow people to fly, but it leads to frustration, returning products, and won’t grow your business in the long run.
What should you know about A/B testing before starting?
Your data is clean, and your flip-flop shop gets enough visitors and conversions to conclude from. But hold on a second. Let’s go over a couple of basics you need to know before starting.
Always start your A/B tests with a hypothesis
You need to know what you’re testing. Your hypothesis is your idea. Having one is like having a plan before trying something new. Besides that, it helps you learn from the results.
A basic template for hypotheses is:
Because [the reason for the change, preferably based on research or data], we expect that [the change you make], will result in [change in behavior of site visitor]. We measure by [KPI you aim to influence].
So:
“Because in ecommerce, adding reviews on the product page is a best practice. We expect that adding a review about the quality of the flip-flops above the fold on the product page will result in more trust in the product. We measure by an increase in purchases.”
Basic understanding of statistics
There are tons of tools that evaluate the results of A/B tests, like the A/B Test Calculator. Even with these tools, it’s important to understand what you’re measuring to know when your data looks off. We’re not going to dive into statistics here, but it’s important to understand two main concepts:
Statistical significance: This indicates whether the conversion rate changed due to your doing or is a random chance. If an experiment is significant, you can assume your change affected the conversion rate. Significance is reflected by the ‘p-value.’ You don’t need to know how this is calculated, but remember that the advised benchmark for this number is 0.1 or lower. In most A/B testing tools, the p-value is reflected as the ‘confidence rate,’ which should be 90% or higher.
Observed power: Power tells if a test correctly identifies the change in conversion, giving you confidence in the results. It’s like a radar scanning the data landscape, ensuring that significant findings are not missed due to small sample sizes or other limitations. The power must be at least 80%+.
You can calculate the p-value and observed power with an A/B Test Calculator.
Observed power of 85.85% and p-value of 0.0297 based on variant a (1000 visits and 50 purchases) and variant b (1000 visits and 70 purchases
As mentioned before, there are a lot of tools out there. We’re using Convert at Yoast, which we’re quite happy with. But it starts at $350 per month, which might not fit your budget. I won’t recommend a specific tool, but keep these four points in mind when choosing:
Ease of use: If you don’t have (many) developers, choose a tool that is easy to implement and has a visual editor.
Reliable data: Cheap tools are available, but make sure the way they track your data is reliable. You can find this in the reviews of Trustpilot, Capterra, or G2.
Support: It’s easy to break your website when you’re experimenting. Knowledgeable support has often saved my life, especially since I’m not a developer. Good support helps troubleshoot, pick the right testing method, and set up the experiment.
Integrations: good integrations make your life easier. For instance, Convert integrates with Hotjar and GA4, which makes it easy to segment data on those platforms and evaluate your experiments.
Security: Verify that the tool adheres to industry data privacy and security standards, especially if you collect sensitive user information during experiments.
Assure you have clean data
As mentioned, you must have clean data to evaluate your experiments. If you’re collecting faulty data and it’s reporting more purchases than you’re getting, you can make the wrong decisions. Here are a couple of tips:
Cross-check the number of purchases from your data tools with your actual conversions from your CRM system.
Don’t use GA4 data to calculate whether your experiment is a winner. You need the exact numbers and as GA4 samples all data, it’s unreliable.
Check if you can set up your A/B testing tool to track all the main metrics, such as site visitors, signups, form completions, and purchases.
Don’t run tests longer than four weeks
Tests shouldn’t run longer than four weeks because of the potential expiration of cookies. The most popular browsers reset cookies after four weeks, which could lead to inconsistencies in data collection and potentially skew the results. Keeping tests within a shorter timeframe helps ensure the reliability and accuracy of the data you collect.
Pitfalls of A/B testing for SEO
At Yoast, we advise looking holistically at your website. When optimizing for conversion, you should also keep SEO in mind. Let’s go over a couple of pitfalls:
Hindering site performance
If your A/B testing tool is not optimized or tests are not properly configured, they can introduce latency and slow the overall site speed. Therefore, it’s crucial to carefully manage scripts, prioritize performance, and regularly monitor site speed metrics during A/B testing to mitigate these risks.
Forget to look at search intent
It’s essential to understand the search intent of your users before optimizing your website. Pushing users towards the wrong actions, like purchasing, when seeking informational content leads to a disjointed user experience. You can use Semrush to explore the search intent of keywords and ensure your content stays relevant to your audience’s needs. Align your optimization efforts with user intent. This ensures a smoother user journey and increases the relevance of your content to your target audience’s needs.
Over-optimize for conversion rate
One common pitfall is over-optimizing for conversion rate at the expense of user experience. Focusing solely on driving users towards conversions bypasses the primary goal: having high-quality content and helping users. Tunnel vision on conversion rate optimization can lead to a poor user experience, ultimately harming your website’s rankings and credibility.
Alternatives to A/B testing
So, what do you do if you don’t have enough traffic to experiment? Are you obligated to do everything by gut feeling? Luckily not. There are multiple things you can do.
Invest in SEO
The most sustainable approach is to invest in Search Engine Optimization (SEO). By optimizing your website for search engines, you can increase organic traffic over time. With more visitors to your site, you’ll have a larger pool of users to conduct A/B tests, allowing for more reliable results and informed decision-making. Prioritizing SEO enhances visibility and lays a solid foundation for future experimentation and growth. If you want to learn how to effectively increase your organic traffic, sign up and get our weekly SEO tips.
Use paid traffic
The quickest — but most expensive — way to start with A/B testing is to boost your traffic with advertisement. I wouldn’t recommend this for a longer period, but it can help validate a hypothesis more quickly. Keep in mind that it’s not the same audience. What works for paid doesn’t necessarily work for organic traffic.
Use different validation methods
There are other ways to improve conversion when you can’t get enough traffic, but these only have a slightly higher decision risk. This can be best explained based on the pyramid of evidence. This model comes from science and was introduced to conversion rate optimization by Ton Wesseling, founder of Online Dialogue.
The higher the pyramid, the less bias and the lower the risk of decision. A/B testing is high up there, as making decisions based on A/B tests poses a low risk. Still, if you don’t have the data for the A/B test, it is better to use data (like GA4) or user research (surveys). It’s not as waterproof, but it beats that gut feeling.
Pyramide of evidence
The important thing is to start with A/B testing
I’m going to quote Nike here: Just do it! Like with SEO, you need to start small. Yes, your data needs to be clean. Yes, you need enough conversions. But you also need to start and learn from your mistakes. Let Yoast SEO help you get enough organic site traffic to test and start A/B testing. You’ll grow your business and/or show your manager you’re as smart as you think.
Good luck!
Nino van Tour
Nino van Tour is the Conversion Marketing Manager. His goal is to generate growth by looking at data, spot opportunities and improve user experience.
Google’s Core Web Vitals have emerged as critical metrics for SEO. These metrics help you optimize your websites for a superior user experience. A new player is making headlines among these vital metrics: Interaction to Next Paint (INP). This one replaces the First Input Delay (FID). This post will explain what INP entails, its significance, and how to improve your site’s performance for SEO.
Essence of Interaction to Next Paint (INP)
Interaction to Next Paint measures the responsiveness of a web page to user inputs, such as clicks, taps, and keypresses. It represents the time from when a user interacts with your page to when they see a response on the screen. Unlike its predecessor, First Input Delay, which only accounted for the first input, INP provides a broader view by capturing the responsiveness throughout the life of the page.
Google is very dedicated to enhance the user experiences offered by sites. To validate these, it introduces a more nuanced and comprehensive metrics. It now introducesInteraction to Next Paint into the Core Web Vitals. INP measures a critical aspect of the user’s experience — the responsiveness of a page to user interaction.
By integrating INP into Core Web Vitals, Google aims to provide developers with a complete picture of their page’s performance. In addition, it encourages improvements that genuinely enhance the user experience.
Why INP matters
A seamless user experience is the cornerstone of successful SEO. Interaction to Next Paint directly influences how users perceive the efficiency and usability of a webpage. Pages that respond swiftly to user interactions are more likely to engage visitors. Better performance can reduce bounce rates, and, ultimately, higher rankings in search results.
As the transition from FID to INP unfolds, webmasters and SEO experts must embrace this broader metric. Understanding and optimizing for INP will be crucial for maintaining and improving search rankings.
Real-world improvements for yoast.com
Despite the challenges in optimizing for INP, our team at Yoast has remarkably improved responsiveness. By focusing on efficient code execution and minimizing render-blocking resources, we have significantly enhanced our site’s performance.
Google Search Console already provides INP reports, splitting into mobile and desktop issues. At Yoast, we’ve used these to guide our optimizations. In addition, Screaming Frog now includes INP pass/fail within their crawl reports, which helps as well.
Below shows how the work we did in December and January has reduced the number of issues dramatically:
INP score on desktopINP score on mobile
But remember, while it’s always great to have zero errors, don’t obsess about cutting off milliseconds to get there. If there are significant performance issues, then solve these as soon as you can. Always keep in mind, though, don’t spend dollars to save pennies! Focus on the general page experience; things will naturally progress from there.
Improving Interaction to Next Paint
The shift to INP necessitates a fresh approach to measuring and enhancing web performance. Tools like Google’s Lighthouse, PageSpeed Insights, and the Chrome User Experience Report offer valuable insights into INP scores and opportunities for optimization.
Practical strategies to enhance your INP score
Improving your Interaction to Next Paint INP score benefits your site’s user experience. It’s an important part of staying competitive in SEO. Here are actionable tips to help you enhance your INP score:
1. Optimize event callbacks
Event callbacks are at the heart of user interactions. Reducing the time these callbacks take to process can significantly improve your INP score. Assess the complexity of your event handlers and streamline their code to ensure quick execution.
2. Avoid blocking the main thread
The main thread is where the browser processes user events, executes JavaScript, and renders updates to the screen. Keeping it unblocked ensures that the page can respond to user inputs promptly. Avoid heavy computations or long-running tasks on the main thread to prevent delays in responsiveness.
3. Break up long tasks
Tasks taking more than 50 milliseconds can interfere with the page’s ability to respond to user inputs effectively. Breaking these long tasks into smaller chunks allows the browser to intersperse input handling between these tasks, improving the overall responsiveness.
4. Optimize JavaScript execution
JavaScript can significantly impact your page’s responsiveness. Optimizing how JavaScript is loaded and executed on your page can improve INP scores. Techniques include deferring non-critical JavaScript, using async scripts, and removing unused code.
5. Minimize unnecessary tasks
Evaluate the tasks on your page and identify any that are not essential to the immediate user experience. Postponing or eliminating unnecessary tasks can free up resources, allowing the browser to prioritize user interactions.
6. Prioritize important actions
Not all tasks are created equal. By prioritizing important actions — such as those directly related to user interactions — you ensure that these tasks are executed first, leading to a smoother and more responsive experience.
7. Leverage requestIdleCallback
The requestIdleCallback API allows you to schedule background tasks to run when the browser is idle. This is particularly useful for tasks not critical to the immediate user experience. By using requestIdleCallback, you ensure these tasks do not interfere with the page’s responsiveness to user inputs.
Continuous improvements
Implementing these strategies requires a thoughtful approach to web development and an understanding of how user interactions are processed. Tools like Lighthouse and PageSpeed Insights can provide insights into your Interaction to Next Paint score. In addition, these can identify specific areas for improvement.
You can significantly enhance your site’s responsiveness by optimizing event callbacks, minimizing main thread blockage, breaking up long tasks, and prioritizing user-centric actions. This leads to a better user experience. It also aligns with Google’s emphasis on page responsiveness as a critical SEO component in the Core Web Vitals era.
Improving INP is a continuous process that can lead to substantial gains in user satisfaction and engagement. As you implement these changes, monitor your site’s performance. Check the impact on your INP scores and refine your strategies for even better results.
Looking ahead
The introduction of INP signals Google’s ongoing commitment to refining its page experience signals. Staying informed and proactive in optimizing for INP and other Core Web Vitals is imperative for you to excel in SEO.
Interaction to Next Paint is a pivotal metric for assessing and enhancing web page responsiveness. Understand its nuances, embrace the available tools, and implement data-driven optimization strategies. Esure that your website meets the ever-changing standards of user experience and SEO.
Let’s continue the conversation in the comments below. Share your experiences, challenges, and successes in working to improve INP. Together, let’s prepare those sites for lift-off!
“Always be available”. That’s common advice for online businesses. After all, you don’t know who might be awake and browsing your site. Having a website makes this easy, and using automated bots for your customer service makes it even easier. That’s why conversational commerce has grown so popular. But is this a good development? Or better yet: is it even required?
What is conversational commerce?
Before we dive deeper into the topic, let’s cover the basics. Conversational commerce is when your customers can contact you through a messenger channel of their choice, and finish their purchase within the same channel.
In other words: if you start a conversation with a business via Facebook Messenger, then purchase the product via the chat, you’ve engaged in conversational commerce.
That sounds useful!
It is. You’ll have 24/7 customer support. Not to mention, customers will get an answer within seconds. That’s important, because 73% of people consider good customer experience an important part of their buying decision. And 65% of customers say a positive experience is more influential than advertising.
So, it’s clear that customer service is an important part of the customer journey. Then why are you leaving it up to bots? Because of the 24/7 availability? That’s valid. But if you’re doing it because it’s cheap and easy, you might need to reconsider. Think about it: if all your competitors are doing the same thing, then your human-driven customer service will stand out in the bot crowd.
Remember work-life balance?
As we said before, the current expectation is that businesses always need to be available. There’s no denying that. However, we can question if that’s a healthy mindset. And before you scoff and say that ‘lazy gen-zers just don’t want to work’, studies have shown that work has actually become more intense over the years. Which has a huge negative impact on our mental health.
Perhaps this is part of the reason why 52% of American millennials (and 48% of German millennials) would rather earn 20% less money than have a shitty work-life balance. So, it’s clear that people nowadays don’t want to work, work, work. So why is this expected of businesses?
How can small businesses keep up?
This 24/7 expectation isn’t just bad for our mental health. It also makes it tough for small businesses to keep up. Think about an illustrator selling their own art, or two friends selling handmade clothes. They probably can’t afford the shiny CRM tools or AI chatbots. And with 24/7 customer service being so important, these small businesses should be dying out.
#support small businesses
But they’re not. In fact, while 20% of businesses fail in the first year, that means a whopping 80% survives. Which makes sense when you consider that 91% of consumers prefer to support small businesses when convenient, and 74% will even actively seek them out!
Interestingly enough, 71% of consumers also expect better support from small businesses. So, why do they have this expectation? It might be because small businesses have humans doing their customer service, since they (usually) don’t have enough money for conversational commerce tools. Which begs the question: Do people prefer talking to other people?
Humans prefer humans
The answer is yes. People seem to generally prefer talking to other humans. But why? A study found that users believe that “chatbots are incapable of providing high-quality communication”, which can lead to people no longer being as loyal to platforms after chatting with a chatbot. In some cases, it even led to a staggering 79.7% reduction of sales.
Is conversational commerce useless then?
It’s not. You can still set up live chats with real people, or allow people to send a message via WhatsApp. Depending on your business’s budget, you’ll be able to provide 24/7 service. But judging by people’s unwavering support for small businesses, it doesn’t seem to matter as much if you can’t.
Disclaimer: of course, it’s still important for small businesses to reply quickly to their consumers. While consumers might not expect an immediate response, they also don’t want to wait for weeks.
Best of both worlds
However, we can’t ignore the current situation. If lots of businesses offer 24/7 service, you’ll feel pressure to do the same. Besides, it would be silly to completely ignore all the amazing technology that’s available. You don’t want to make your life harder than it needs to be. So, what should you do?
Well, why not use both? Implement technology strategically. For example, by using AI in the background to help your customer service employees quickly find information. You’ll honor people’s preference for human interaction, while also empowering your employees with AI tools. You’ll have the best of both worlds.
Cindy is a content manager at Yoast. She writes and optimizes blog posts, and enjoys writing content that will help people create better content for their site and users.
WordPress and the community around it are very committed to making websites as accessible as possible. Websites should be accessible to every visitor and anyone should be able to use WordPress to create their website or application. To keep accessibility top of mind, there’s a dedicated Accessibility Team that provides expertise and further improves WordPress in this regard. Let’s dive into what accessibility means in the world of WordPress and what you can do to contribute to a more accessible web.
One of the cool things about WordPress is that it’s an open source project. One that invites people from all over the world to work on it. Behind it is a very diverse community of people that works towards creating a platform that anyone can use. So naturally, accessibility is a big theme in WordPress.
Accessibility Coding Standards
So how can you keep an eye on the accessibility of WordPress with so many different people contributing to the platform? This is where the Accessibility Coding Standards come in. Since 2016, these have been added to the Core Handbook as a part of the code standards for WordPress developers. This resource helps contributors make sure their code conforms to the Web Content Accessibility Guidelines (WCAG) 2.1, at level AA. This means WordPress will be making the product more accessible with every new update.
A short explanation of WCAG 2.1, level AA
The Web Content Accessibility Guidelines (WCAG) 2.1 cover a wide range of recommendations to make online content more accessible. Accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these. And some accommodations for learning disabilities and cognitive limitations.
The Level AA is used as a reference for a legal standard in many countries worldwide. Level AA success criteria address concerns that are more complicated to address and impact smaller groups of people, but are still common needs with broad reach.
The next step: ATAG compliance
Right now, any new WordPress code needs to meet the WCAG 2.1, level AA. An additional goal that the community is working towards is ATAG compliance. ATAG stands for Authoring Tool Accessibility Guidelines, guidelines on how to create a tool for creating web pages that are both accessible and encourage the creation of accessible content. At the moment, WordPress is not ATAG compliant yet. However, the community has pledged to pursue features that are in line with achieving this goal.
Check the accessibility of your site
If you think your audience doesn’t profit from accessibility, think again. Not only does an accessible website grow your audience, but following these guidelines often makes your website more usable for all users. Talk to your developers. Check the accessibility of your site. If you’re using an old version of WordPress update to a newer version to benefit from the latest developments in accessibility.
Free accessibility tools for your site
Running your code through the W3C Validator every once in a while helps you determine if you’re using clean code. Usually, the recommendations this validator gives you, are easy to fix. And they might already make a huge difference in terms of accessibility.
Another great and very easy-to-use tool is WAVE. Just install the browser extension and see for yourself:
The WAVE extension analyses a variety of possible accessibility issues. In the screenshot above, you can see things like missing form labels and contrast issues. This WAVE analysis is done in seconds, it shows you where the problems are on your page and it tells you where your website can be improved for accessibility.
After running your website through the accessibility checker or reading through all the guidelines, you might wonder whether it’s even worth the effort. But remember, every change to your website makes it a bit more accessible. Makes your potential audience bigger and your user experience better. It’s about taking accessibility seriously and handling the main issues first. Nobody’s perfect, but it is important to keep an open mind and be willing to improve your website.
Website menus are one of those things you take for granted — until you encounter a really bad one. In the ideal scenario, users get an instant overview of what a site has to offer, and they can reach all the important stuff with just one or two clicks. In the worst case, users end up frustrated and unable to find what they’re looking for. This post will walk you through the basics of menu design and help you understand which options will work best for your site.
Your website’s menu is important because it helps users navigate your site. Sure, sometimes a user will arrive on the page they were looking for straight from Google. But usually, your visitors will want to look at various pages on your site. Or they land on your homepage and will need to navigate to the right page from there. That’s why your menu should be available on every page, and ideally, you would even have a sticky menu. Meaning that it scrolls down with the content to make sure it’s always in view. That way it doesn’t matter where your users are: they’ll always be able to find what they need.
Besides the essential navigation function of a menu, it’s also a neat way of letting users know what your site has to offer. You can think of it like a banner on each page, saying “This is what we do”. Make the most of that opportunity!
A great site menu should include links to the most important parts of your website. So it’s up to you to figure out what to put in it. But whatever content you decide to include, it’s essential to keep your menu usable.
One of the worst things you can do is overload your menu with too many links. This will make it look cluttered, and users will need to work hard to find what they need. Depending on your choice of menu design, some of the links could end up inaccessible if you have too many. For instance, if you’re using a drop-down menu, users might struggle to access links that appear off-screen.
Do: be selective or use alternative navigation options
The best option is to be selective about what you include in your menu, but for larger or more complex sites this won’t be possible. Luckily, there are lots of other solutions to a crowded menu. One solution is to create hub pages or categories, and add these to your menu instead. Then users can navigate to the relevant category or hub, and find their way to more specific content from there.
A second solution is to add sub-menus; these are additional menu options which only appear when the user hovers or clicks on a particular menu area. Sub-menus can be handy, but they can also become cluttered and difficult to use. So if you do use sub-menus, do so in moderation.
The third option is to include a search bar as part of your navigation menu. That way, if a user can’t see what they’re looking for in your menu, they can search your site for what they need. A search bar is a great feature to include, whether your menu is too cluttered or not. But do take some time to configure your search function well, because otherwise it won’t really help.
Tip:Yoast SEO Premium includes an Algolia integration you can use to improve your site search results. Using it will help push your most important content to the top of the results. Give it a go!
It’s easy to forget about mobile users when you’re using a desktop computer to build your website. But that’s the last thing you want to do, especially when it comes to your site menu design. A menu that looks good and works well on desktop might be completely unusable on a phone or tablet. Now that more and more people are using mobile devices to go online, it’s really important to consider menu design for both desktop and mobile.
There are two options for creating a menu that works on both desktop and mobile. You could add a responsive menu with a layout that adapts to the screen size being used. Alternatively, you can create a specific menu for the mobile version of your site. Whichever solution you choose, test it out on a few different screen sizes to make sure the end result is user-friendly.
There are loads of different menu styles to choose from. Hamburger menus, drop-down menus, and sidebar menus are a few well-known examples. There are also some very abstract and creative menus out there. However, the way that you implement these styles has a big impact on the overall impression and usability.
Here are some of the more standard options:
If you have a simple website and only one or two online goals, it makes sense to opt for a minimalist menu design. For example, Behance is a ‘network for showcasing and discovering creative work’, so it doesn’t need a complicated menu. They only include 3 menu options: ‘Discover’, ‘Livestreams’, and ‘Jobs’. This lets the user focus on the search field and the creative works being displayed instead.
Some sites use a more minimalist menu style to cater to their mobile users. A hamburger menu (which looks like this: ☰) is a popular minimalist choice for mobile sites as it takes up a very small amount of screen space. For instance, on the mobile version of Joolz.com there are three simple icons to help users navigate: search, shopping cart, and a hamburger menu. Clicking on the hamburger menu expands it to show a list of their product categories. Solutions like this work really well on mobile devices.
Classic menus are probably the simplest to work with. These focus on selecting the main categories or areas of the site and use buttons with text labels to guide users to the right place. A horizontal navigation bar is the most common type of classic menu. Sometimes menus like this have a few drop-down options below the main menu items, too. WordPress.org uses a classic menu design on its desktop site. Two of the menu items have a drop-down button to show more options: ‘Support’ and ‘Get Involved’.
Another classic menu style is the sidebar. You can see this kind of menu in action on Google Maps. Usually, these kinds of menus can be opened using a hamburger menu button and closed again using the ×-button. This is a great way to offer full-screen content, as the menu is hidden most of the time.
Mega menus are a kind of drop-down menu, but instead of having a single column of links under each main menu item, there is space for multiple columns. These menus are popular with larger and more complex sites, as they offer space for many more links than other menu styles. So in theory, you can be less picky about which links to include. Right?
Well actually, this supposed benefit can be the downfall of mega menus. Even though all the links can fit in there, including too much content in your menu can be overwhelming for users. That being said, if you limit yourself to a moderate amount of menu links, a mega menu can be a great option for your site.
On asana.com you can see they’re using a mega menu with a manageable number of links below each main menu item:
An example of a very full mega menu can be found on the World Food Program desktop site. In this case, the drop-down menu shows a list of countries, so users will still be able to navigate this menu quite easily. But just imagine if all these links were about different topics. Then users would struggle to find what they need, as if they were rummaging around in a messy drawer.
Other navigation options
You can do a lot with your site menu, but it’s not the only navigation option. Many sites add extra navigation links to their site header or footer. You’ll often see options to log in or change the site language in these spaces. However, if you do choose to add footer links you must disable infinite scrolling, or your users will never be able to reach the footer.
Another possibility is to create a sitemap page that users can access. This shows a structured list of all your site’s pages. These are becoming less popular than they once were, but they can still be a powerful tool for site navigation.
Site menus and SEO
Does your site menu influence SEO? Sure it does! You’re unlikely to get a lot of internal linking benefit from adding items to your menu. But there are other ways your menu can benefit your SEO, and that benefit has to do with how users experience your site.
If users can’t find what they’re looking for, they’re likely to leave more quickly and not come back to your site again. Google can pick up on those kinds of signals. So a great menu can help your SEO, albeit in an indirect way.
As a general rule, it’s a good idea to keep your menu as simple as possible. Especially for smaller sites and those just starting up, a classic or minimalist-style menu should work great for you. If you have an enormous site you’ll need to think harder about what your users need to see, and how best to display that content.
Once you have a design you’re happy with, it won’t hurt to ask a few people to try it out and give you their feedback. If you’re really serious about making your site menu usable, you could carry out task-based user testing. Either way, make sure your website menu works for your users and provides them with a great experience!
Accessibility helps you open up your content to a wider audience, so more people are able to access your site. A great resource to help get you started is this list of accessibility checks made by the World Wide Web Consortium (W3C). In this post, we’ll highlight a few important checks, so make sure you read the rest of the checklist as well. Let’s optimize your website for every visitor!
What is accessibility and why is it important?
Accessibility is making sure as many people as possible can use your site. Makes sense, right? After all, you’ve created a website because you want to reach your audience. And by following the checklist, you make sure you’re reaching everyone.
If you don’t, there might be people who can’t access information on your site. You’d be neglecting a huge part of your audience and in turn, missing out on a bunch of engagement and SEO opportunities. So, let’s get to work and check off these accessibility checks!
Provide a text equivalent
For every non-text element, you should provide a textual equivalent. That goes for things like images, but also for everything ranging from image map regions and animated GIFs to stand-alone audio files and video. This can be done with alt or longdesc tags, for instance.
For videos, it can be done by adding closed captions to your videos. If you upload your videos to YouTube, you can let YouTube automatically generate closed captions. Still, it’s good to run through them and check if they’re correct.
Same goes for TikTok and Instagram reels. Most social media provide automatic captioning, so be sure to use them! And don’t forget to change the alt tags or closed captions when the non-textual part changes.
Mind your colors and contrast
For people who are colorblind or have a visual impairment, certain color combinations and contrast simply don’t work. They won’t be able to read your text. That’s why you should always check if your website’s contrast and colors work together.
Did you know that if content flashes more than three times per second, it’s potentially dangerous? It might cause photo-epileptic seizures for some people. But it’s also straining on the eyes in general. That’s why you should avoid using flickering like this with animated gifs, blinking text, etc. And if you must use it, make sure that users can disable the flickering.
Make sure your website can be used with a keyboard interface
This accessibility check is especially important for people who have little or no use of their hands, or who don’t have hands at all. They’ll rely on a keyboard to navigate your website.
Keyboard users generally use the tab key to navigate through interactive elements like links, buttons, and fields for putting in text. A sighted keyboard user (someone who can see) must be able to see that they’ve focused on something with the tab key. This focus is typically indicated by a border or highlight around the element. So make sure that your site clearly shows this too!
When you use the tab key on our site, a black outline shows what you’ve focused on
Try and use your site with tab only! See if it’s easy, and if it’s not, please make sure you fix it.
Allow users to control time limits
You can probably imagine that navigating a website with a keyboard instead of a cursor isn’t always as fast. So, tasks with a time limit can be stressful for keyboard users. And not just them, but people with motor disabilities or generalized anxiety disorder, and people who take longer to read or have low vision may also find time limits hard to navigate.
That’s why you should allow users to control the time limits, or at the very least give them a warning at least 20 seconds before their time expires. If possible, allow them to get an extension.
Use clear and simple language
The checklist says: use the clearest and simplest language appropriate for a site’s content. Don’t try to make it overly complicated. And be mindful of abbreviations (screen readers can’t understand those) and idioms! While it might make sense for you as a native speaker, it doesn’t always translate well. For example, if we were to write “now comes the monkey out of the sleeve”, which is a Dutch idiom, you probably have no idea that we mean someone finally shows what they are truly like.
Image from stuffdutchpeoplelike.com
Writing clearly is obviously not just good for your site’s accessibility, but also for your SEO and user experience in general. To help you, we’ve created the readability analysis in our plugin. This analysis will help you write better texts. It scans your text and tells you for example if your paragraphs are too long, or you’re using the passive voice too much.
Help your users to avoid mistakes
Let’s say you offer a service where people need to fill in their personal information, or people can take a quiz on your site to find out what product suits their wishes. It doesn’t matter how great your explanation beforehand is, people will still make mistakes. What matters is what you tell people when they’ve made a mistake.
Tell your users what they did wrong and give them an easy-to-understand suggestion on how to do it correctly. Don’t use difficult language. What if someone chose the wrong option? If possible, make sure users can reverse their actions. Otherwise, give them the opportunity at the end of the survey/quiz/etc. to review and confirm or correct their answers.
To put it bluntly: most of the accessibility checks mentioned in this post are not difficult. And luckily, most of the WordPress themes and other website builders are focused more on accessibility. Still, if your theme or site doesn’t cooperate while you’re implementing these awesome accessibility changes, then you should probably find a better theme for your site.
Conclusion: let’s get to work!
By thinking about accessibility, you’re actually thinking about design, the use of textual and multimedia content, and the structure of your site. So look at your colors and contrast, your alt tags and closed captions. And try to use your site with just your tab key! Let’s make sure that your website is accessible for everyone.
Cindy is a content manager at Yoast. She writes and optimizes blog posts, and enjoys writing content that will help people create better content for their site and users.
Nowadays, it’s easy to run a blog. Simply head to your generative AI tool of choice, insert a prompt, and you’re good to go. But is it really that simple? Spoiler: no. Generated content isn’t as original as something you’ve written yourself. And there’s another thing AI doesn’t take into account: accessibility.
With over 100 million users, ChatGPT is an AI tool that most people know and use. And it’s easy to see why: within seconds, you can be a content writer too. No need to hire other people, which means you can spend your valuable money on other aspects of your business.
Except that’s not really how it works. A computer isn’t human. It doesn’t know your audience the way you do. You might prompt it to sound hip and relatable for people between 18 and 25 who are interested in gaming, but how nuanced will that text be?
Besides, there’s one thing generative AI tools can’t help you with: accessibility.
Know your audience – no, really
Did you know that 1.3 billion people have a disability? That’s 16% of the global population. Chances are at least some of your audience has a disability, too. So have you taken them into account?
Because, let’s face it, AI tools haven’t. ChatGPT is a known perpetrator of biases, and other tools are no exception. They don’t concern themselves with diversity, because they’re not human. But you are. So, tell me: How many people in your audience have a visual impairment? How many are colorblind? Do you know? And, perhaps more importantly, do you care?
Why accessibility matters
An alternative title would be ‘why you should care about other people’, because that’s what it boils down to. Do you want other people to have access to the same information that you do? Then, you’ll want to put in an effort into making your site, blog, and product accessible for everyone.
If that’s not enough reason, then think about your profits. Your clicks. Your traffic. If you haven’t catered to people with disabilities or visual impairment before, they’re essentially an untapped market. Consider people who are colorblind and can’t use your product, for example. By focusing on accessibility, you’ll create an app or product everyone can use. Isn’t that wonderful?
Can’t you have both?
I get it. Time is money, and by using generative tools, you’re saving both. So, is there no hope at all? If we’re looking at content, the answer is: yes, but. You can use AI tools to make it easier to write content. But you should use them as just that: tools.
Let’s look at it this way: by writing content, generative AI will save you time. You won’t have to come up with blog post topics or struggle to write a single paragraph. Instead, you’ll have more time to review and edit and to ensure your content is easy to read for people with disabilities. That’s a win-win, isn’t it?
A few quick tips
Let’s say you’ve generated a blog post. Now, you want to make sure it’s easy to read for people who use a screen reader, for example. Here’s a couple of things you should look out for:
Keep your sentences short. It’s easier to keep track of the point you’re trying to make if your sentences are short. Between 20 and 25 words is perfect.
Don’t use acronymsor abbreviations. Screen readers won’t read those like a human would. They spell them out, letter by letter. If you’re writing for your business, this might not be a problem, because it looks more professional if you write it out.
Make sure images have Alt-Text or Alt Tags. Because that’s what screen readers will read aloud. So, use factually correct and accurate information to describe the images on your blog and site.
If you need more tips, we’ve got a post that discusses how to write good alt texts. The post is about social media, but the information is useful for your site and blog as well.
Conclusion: don’t give AI too much power
Truth be told, the problem with AI tools is how much power people give them. We’ve said it before, and we’ll say it again: they’re tools. You’re meant to use them to your advantage, not let them run wild like a Roomba and trust that they’ll keep your house clean.
Because just like a Roomba isn’t good at cleaning corners (because it’s a circle), generative AI tools can’t create diverse, personal, and accessible content. You’ve got to do at least some of the work yourself. And trust us, it’s worth it!
Cindy is a content manager at Yoast. She writes and optimizes blog posts, and enjoys writing content that will help people create better content for their site and users.
