Articles

According to Klipfolio research, users spend on average 52 seconds on a webpage. With minimal time to impress, you must consider how to best help your consumers understand what your product or service does and why they should care about it. It’s not enough to describe your value – great landing pages will go the extra step and show this as well.

One powerful method to do this is by providing a real-life, responsive teaser to show what your product looks like, how it works, and what value it can create. This means incorporating specific elements from your functional, responsive product into the landing page. However, this should be a “mini-product experience” that users can experiment with rather than a freemium version of your product. If done well, the dynamics will pay off in captivating users for longer, increasing their consideration time, and driving your conversion rate as a result.

Building more dynamic landing pages through product experience can change the game completely. These are some strategies to consider.

“Ask & Alter” for Greater Personalization

“Ask & alter” is valuable for services with multiple potential value propositions for different audiences. The simple fix here is to have a pop-up box that asks the visitor which profile they are (and alternatively a few more questions). You can then trigger the page to alter according to their input, ensuring a more customized experience and increasing their chance of conversion. By doing this, you’re taking the onus off the consumer to figure out what’s relevant to them, eliminating any potential confusion.

A great example of this is the Penn Foster University website. It has a developed UX optimized for organizations, high school degree seekers, and upskillers alike. Each has an entirely different, carefully designed interface, matching the diverse needs of visitors. For example, while a high schooler might enjoy browsing the career pathways section, an upskiller is likely to search specific career fields. Such distinction is key to consider, as intentional and strategic user experience can raise conversion rates by as much as 400%.

Real-Time Demos to Hook the User

Real-time demos mean that you take a full instance or version of your product that is clickable and responsive and embed it into the flow of your landing page. This way, the user can get a quick “test drive,” and you easily communicate the value that would otherwise be abstract or difficult for the user to imagine or even visualize. Additionally, users always want to know how a product could personally impact them, and live demos offer them a hands-on experience.

Companies incorporating live demos have proven the power to engage a user’s curiosity and create a strong link with their products or services. Notion, for instance, uses a “templates” section with pre-built pages that can be easily opened and browsed through without needing to register or download anything. This product’s beauty lies in the simplicity and efficiency it offers, rather than overwhelming a user with a self-promotional copy. Even a simple live demo like that can help build considerable trust in the product and encourage users to make a high-value purchase.

Calculators Provide Value

Despite their simplicity, calculators can increase audience engagement by 38%. Their main benefit is undoubtedly providing a personalized solution to users’ actual needs and expectations. ROI and savings calculators can be particularly interesting, especially when they speak of value that isn’t easy to calculate or when the user wouldn’t intuitively know that there are savings to be had by using a particular product.

Butter Payment, uses this tool very effectively. As its customers necessarily don’t know they have an involuntary churn problem that is worth solving for, it uses a calculator on its site to demonstrate the problem and enumerate the value-add to potential customers.

HubSpot, too, has mastered the tool: Its Ad ROI Calculator visually presents the results that its software can bring. Then, HubSpot’s interactive website grader directs the user towards its comprehensive marketing offerings. It is this graphic visualization that companies must adopt to communicate real value.

The Charm of Experiential Interaction

Interactive design is said to drive the responsiveness and real-time interaction of a site through the roof. By incorporating an interactive or experiential page, even if it’s not directly on your landing page, you can craft a unique experience aimed at leaving a lasting, meaningful impression of your product or service.

Calm’s “Do Nothing for two minutes” is a simple yet effective way to show users the value of meditation in their daily life and lead them to download the app.

But it works great for consumer products, too: Nike’s Digital Foot Measurement tool is another excellent feature, allowing users to “try shoes on” with their cameras and scan their feet for the right measurement through AR.

Videos are Attention Magnets

Considering that viewers absorb some 95% of the message while watching videos, compared to only 10% when reading text, there’s no reason why you should avoid incorporating videos into your landing pages. Beyond that, videos can be incredibly straightforward: Insert a graphic illustration or real imagery to explain the product, show the step-by-step process, and convey value with raw, unfiltered footage.

Calendly, for example, has various videos on its landing page, including a 56-second, upbeat, colorful clip showing how simple it is to get started with the product.

Guiding GIFs to Visualize Product Features

As small animations, GIFs represent the perfect middle ground between images and videos. They allow you to show users the value your product adds, providing an engaging glimpse into the actual interface. The small scope of GIFs is both a limitation and a benefit: You can only show a particular feature of your product but can also focus on triggering an exact user emotion.

Grammarly, a grammar correction tool, relies on GIFs to give users a taste of their UX. With a quick overview of the product’s functionality across popular platforms, including email and social media, users can see exactly how the product can make their everyday lives easier. And by incorporating GIFs into the right side of the landing page, the scrolling experience of the user isn’t disrupted.

Interactive product experiences can both entertain and tackle pain points, adding dynamics to an otherwise static page. Particularly when customizing based on user attributes, the key benefit of these features is that the users engaging with them are likely the same people interested in the paid product. To ensure that the product experience doesn’t directly compete with the primary offering, clearly differentiate it and guide the user towards a direct call to action.

Source

The post The Case for Building More Dynamic Landing Pages first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

2021 has been both memorable and instantly forgettable. Pop stars were freed from modern-day servitude, some people tried to overthrow democracy, and we all vacationed at home.

Despite the weirdness of the times, the web kept growing, kept changing, and kept on pushing boundaries. We saw a wealth of new sites launch or relaunch with significant updates.

Here are the 50 best sites launched on the web this year. Enjoy!

Crusta C

In April, seafood company Crusta C cleverly used the simple logomark ‘C’ to apply a cutout video effect.

Slow

Slow is a collective of creatives aiming to implement slow movement principles. Its site reflects those aims, creating a sense of calm and deliberation.

hnst

2021 saw tons of brutalist-inspired design. hnst’s take on the style works thanks to the bright red in place of the standard black.

Marram

This site for boutique hotel Marram uses a soft color palette to create an impression of soft golden light and calm.

Levitate

In July, we loved this site for running-blade brand Levitate. The site is clean and light, with a sense of inherent motion in the photography.

Niarra Travel

There’s some beautiful photography on this site for eco-conscious, bespoke travel agency Niarra Travel.

Plunt.co

The core of this site for Plúnt is a combination chooser which feels pleasingly reminiscent of an animal flipbook.

Moth Drinks

Moth makes classic cocktails in a can. The striking black and white graphics and masking effects for its holding page stunned us back in March.

Seed

Selling supplements is hard; people are understandably skeptical. So this site for Seed packs in research and scientific information and avoids the hard-sell.

Wavemaker

Another excellent portfolio site in 2021, this time for creative media agency Wavemaker. The site is uber-confident while still being playful.

Wild Souls

Wild Souls makes nut butters, tahini, and other Greek delicacies. Its site is colorful and warm, and the site typography is soft and appealing.

JUST Egg

JUST Egg produces egg-like food from plant material. The huge photography and bold typography do a great job of making a new concept appealing.

Aalto University

One of the most popular designs of 2021 was Aalto University’s site with its in-depth campus tour. The simple navigation inspired several imitators.

Wisr

Scroll interactions were big in 2021, and Wisr features a Heath Robinson-style machine that ‘runs’ as the user scrolls down the page.

Cevitxef

This site for Cevitxef ceviche restaurant in Bilbao does a great job of making us hungry. Drama is created by oversized text, heavily-styled photography, and lots of movement.

On

The best digital agencies keep their own sites simple, like this site for On digital technology studio that uses black on light blue and adds infinite scrolling.

Acayaba + Rosenberg

We found Acayaba + Rosenberg’s use of architectural photography and subtle scrolling a pleasing browsing experience.

Madre

This site for home linen company Madre uses extraordinary fine-art style still-life photography to enrich a very simple site.

Hyperframe

“Show, don’t tell” is a well-worn mantra. Hyperframe’s site implements it by demonstrating the product’s major selling point on scroll.

Gemini

This exceptional WebGL experiment was built to show what’s possible in the technology. Have a play with the car; it’s a ground-breaking demo.

Felt

In 2021, collaborative mapping tool Felt launched in private beta. Its excellent site does a great job of creating interest while doubling as a recruitment notice.

imNativ

Not every project is exciting, but this excellent site for imNativ uses macro photography to great effect to promote upholstery fabric.

Websmith Studio

Excellently named Websmith Studio uses color to highlight, and the noise effect applied to the background adds subtle interest.

Singita

High-quality photography and a terracotta-based color scheme create an inviting ambiance for Singita, an African eco-tourism and conservation brand.

Fluff

A fullscreen background behind a mobile view for desktop? It sounds like a horrible idea, but this site for cosmetics brand Fluff pulls it off.

Chiwawa

This great site for Chiwawa cantina features wrestling masks, skeletons, and tone-on-tone color to create a lively and distinctly Mexican site.

Nothing

This site for Nothing’s ear(1) earbuds is packed with confidence. Appropriately, it looks even better on mobile.

Chérie Healey

Lots of experts have tried to tell us how to live our lives in the last couple of years, but Chérie Healey’s site manages to stay on the right side of positive without slipping into clichés.

Wayfinder

Wayfinder, a game about our connection to nature using generative code, AI, machine learning, and data mining, could not have been more 2021 if it tried.

Green Angel Syndicate

Not too many investment groups are thought of as ethical, but Green Angel Syndicate specializes in funding companies fighting climate change.

Tether

As the days got darker in the Northern hemisphere, we were wowed by this site for Tether, a cycle safety system using video and illustration to explain its clever approach to bike safety.

Patricia Urquiola

Back in January, we loved the new site for Patricia Urquiola design studio, thanks to its bright, bold colors that we thought inspired confidence.

Headup

Headup’s businesslike approach is created thanks to a pleasing color palette and geometric graphics.

Redwood Empire

For Earth Day on April 22nd, Redwood Empire Whiskey created a microsite promoting a competition styled to match their bottle labels.

GT Super

The one-pager for GT Super has a certain drama in keeping with the font itself and allows you to play around with the size, weight, and style.

Planet of Lana

Due for release in 2022, Planet of Lana is a game from Wishfully Studios, and its teaser page launched back in June has kept us intrigued ever since.

The Longest Road Out

This charming site for The Longest Road Out is a travel map and journal based on the creators’ road trip around Britain, Ireland, and the outlying islands.

Made Thought

Made Thought has a bold aesthetic and approach that explains its outstanding client list.

Miti Navi

Miti Navi makes extraordinary sailing boats. We were attracted to how its site presented a luxury product in an original way.

La Nouvelle

Another powerful digital design agency site was La Nouvelle’s, which used a combination of contrasting and complementary color combinations to catch the eye.

Caleño

Caleño makes non-alcoholic distilled spirits. They relaunched their website in March with bright, joyful colors that reflect the character of the brand.

Capsul’in — Aluminium

This demo site for a coffee pod manufacturer isn’t a site as such, but it demonstrates that even in 2022, there’s room for parallax scrolling.

How Many Plants

Everyone needs a few more houseplants, and How Many Plants is a great guide to how to own and look after them. The illustration style is friendly but efficient.

How & How

One of the most approachable design agency sites of 2021 was How & How’s. It keeps things light and clean, and effective.

The Hiring Chain

Part of a campaign encouraging businesses to employ talented people with Down Syndrome, The Hiring Chain website dispels myths with clearly presented facts.

Virgile Guinard

Back in February, we couldn’t get enough of photographer Virgile Guinard’s portfolio site. Blocks of color pulled from each image hide the image allowing you to focus on one image at a time.

Studio Nanna Lagerman

Studio Nanna Lagermann’s site excels at creating a sense of space and calm. The color palette is soft and neutral. The type is large but clean and sophisticated.

GOOD Meat

Veganism is a growing trend, and one of the sites promoting it with gorgeous colors is this site for lab ‘grown’ meat.

Mama Joyce Peppa Sauce

This one-page site for Mama Joyce Peppa Sauce is big and bold. Click almost anywhere, and two bottles of sauce go into your cart.

Ebb Dunedin

The site bucks the trend for luxury hotel design and instead is styled to complement its interiors. We could have done with time at this boutique hotel in 2021, maybe next year…

Source

The post 50 Best Websites of 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

User experience is one of the most important principles of web design. There’s no doubt that you focus on UX with every page you design on the web, whether it’s a portfolio, a profile page, or an entire website. 

Unfortunately, what many experts forget is that UX doesn’t just apply to digital pages. That means that you need to discover the right UX strategies for everything from your website homepages to your email marketing messages and even your listings on Google. 

Today, we’re going to explore ways you can apply UX principles to your client’s image on search engines. 

Why Your Search Engine Listing Matters

Let’s start with the basics…

89% of customers start their purchasing process with a search engine. 

That means that whether you’re creating a portfolio to sell your services or building a website for a client, the first connection a customer has with your design isn’t on the homepage.

Developers and designers know that first impressions count when it comes to succeeding online. However, they assume that those first impressions happen on a social media channel, a landing page, or a home page. 

The truth is that most of the time, you’re driving a specific experience for an end-user before you even realize it. Before you can wow an audience with a beautiful site design or a fantastic CTA offer, you need to convince them to click on your Google link.

Just as UX on a website is all about giving your audience what they need in an informed and strategic manner, UX in search engine results works the same way. 

How to Make Your Search Listing Stand Out with UX

So, how do you begin to apply the principles of UX to your Google Search results?

It’s much easier than you’d think. 

Step 1: Show Immediate Value 

Delivering an excellent experience on a website often means providing end-users with the information they need as quickly as possible. Imagine designing a landing page; you wouldn’t want your audience to scroll forever to find what they need. Instead, you’d make sure that the value of the page was immediately apparent. 

When creating an image for your search engine listing, you’ll need to take the same approach. This often means thinking carefully about two things:

  • Your headline
  • Your meta description

Around 8 out of 10 users say that they’ll click a title if it’s compelling. That means that before you do anything else to improve your SEO strategy, you need to make sure that the title of your web page is going to grab the audience’s attention. 

The best titles deliver instant value.

Immediately, these titles tell the audience exactly what they’re going to get when they click onto the page. The promise drives action, while clarity highlights the informed nature of the brand. 

The great thing about using an excellent title for a page is that it doesn’t matter where you’re ranked on the search results. Whether you’re number 2 or number 5, your customers will click if they find something they want. 

It’s just like using a CTA on a landing page. Make sure your titles are:

  • Informative: Show your audience value immediately
  • Optimized for mobile: Remember, your audience might not see your full title on some screens. That means that you need to make the initial words count.
  • Easy to read: Keep it short, simple, and straightforward. Speak the end-user’s language

Step 2: Build Trust with Your URLs

Trust factors are another essential part of good UX

When designing a website for a new brand, you know that it’s your job to make visitors feel at ease. Even in today’s digital world, many customers won’t feel comfortable giving their money or details to a new company. 

Within the website that you design, you can implement things like trust symbols, reviews, and testimonials to enhance brand credibility. In the search engines, it all starts with your URL. 

Search-friendly URLs that highlight the nature of the page will put your audience’s mind at ease. When they click on a page about “What is SEO” in the SERPs, they want to see an URL that matches, not a bunch of numbers and symbols

Use search-friendly permalink structures to make your listing seem more authoritative. This will increase the chances of your customer clicking through to a page and make them more likely to share the link with friends. 

Once you decide on a link structure, make sure that it stays consistent throughout the entire site. If a link doesn’t appear to match the rest of the URLs that your audience sees for your website, they may think they’re on the wrong page. That increases your bounce rate. 

Step 3: Be Informative with Your Meta Description

To deliver excellent UX on a website, you ensure that your visitor can find all the answers to their most pressing questions as quickly as possible. This includes providing the right information on each page and using the correct navigational structure to support a visitor’s journey. 

In the SERPs, you can deliver that same informative experience with a meta description. Although meta descriptions often get ignored, they can provide a lot of value and help you or your client make the right first impression. 

To master your meta descriptions:

  • Use the full 160 characters: Make the most of your meta description by providing as much useful information as you can within that small space. 
  • Include a CTA: Just as CTAs help guide customers through the pages on a website, they can assist with pulling in clicks on the SERPs. A call to action like “read about the” or “click here” makes sense when you’re boosting your search image. 
  • Focus on value: Concentrate on providing your customers with an insight into what’s in it for them if they click on your listing.

Don’t forget that adding keywords to your meta description is often helpful too. Keywords will boost your chances of a higher ranking, but they’ll also show your audience that they’re looking at the right result. 

Step 4: Draw the Eye with Rich Snippets

You’ve probably noticed that the search engine result pages have changed quite a bit in the last couple of years. As Google strives to make results more relevant and informative, we’ve seen the rise of things like rich snippets. Rich snippets are excellent for telling your audience where to look. 

On a website, you would use design elements, like contrasting colors and animation, to pull your audience’s attention to a specific space. In search engines, rich snippets can drive the same outcomes. The difference is that instead of telling a visitor what to do next on a page, you’re telling them to click on your site, not a competitor’s. 

When Google introduced rich snippets, it wanted to provide administrators with a way of showcasing their best content. Rich snippets are most commonly used today on product and contact pages because they can show off reviews. 

Install a rich snippet plugin into your site if you’re a WordPress user or your client is. When you enter the content that you need into the website, use the drop-down menu in your Rich snippet tool to configure the snippet.

Ideally, you’ll want to aim for the full, rich snippet if you want to stand out at the top of the search results. Most featured snippets have both text and an image. You need to access both of these by writing great content and combining it with a relevant image. 

Step 5: Provide Diversity (Take Up More of the Results)

As a website designer or developer, you’ll know that different people will often be drawn to different things. Some of your visitors might immediately see a set of bullet-points and use them to search for the answer to their question. Other visitors will want pictures or videos to guide them. So, how do you deliver that kind of diversity in the SERPS?

The easiest option is to aim to take up more of the search result pages. Google now delivers a bunch of different ways for customers to get the answers they crave. When you search for “How to use Google my Business” on Google, you’ll see links to blogs, as well as a list of YouTube Videos and the “People Also Ask” section. 

Making sure that you or a client has different content rankings for the same keywords can significantly improve any customer’s experience on the search engines. Often, the process of spreading your image out across the SERPs is as simple as creating some different kinds of content. 

To access the benefits of video, ask your client to create YouTube videos for some of their most commonly asked questions or most covered topics. If you’re helping with SEO marketing for your client, then make sure they have an FAQ page or a way of answering questions quickly and concisely on articles, so they’re more likely to appear in “People Also Ask”.

Step 6: Add Authority with Google My Business

Speaking of Google My Business, that’s another excellent tool for improving UX in the search results. It allows business owners to manage how information appears in the search results. 

With this service, you can manage a company’s position on Google maps, the Knowledge Graph, and any online reviews. Establishing a company’s location is one of the most important things you can do to help audiences find a business quickly. Remember, half of the customers that do a local search on a smartphone end up visiting the store within the same day. 

Start by setting up the Google Business listing for yourself or your client. All you need to do is hit the “Start Now” button and fill out every relevant field offered by Google. The more information you can add to Google My Business, the more your listing will stand out. Make sure you:

  • Choose a category for a business, like “Grocery store.”
  • Load up high-quality and high-resolution images
  • Ensure your information matches on every platform
  • Use a local number for contact
  • Encourage reviews to give your listing a five-star rating

Taking advantage of a Google My Business listing will ensure that your audience has all the information they need to make an informed decision about your company before they click through to the site. This means that you or your client gets more warm leads and fewer people stumbling onto your website that might not want to buy from you. 

Step 7: Use Structured Data Markup to Answer Questions

If you’re already using rich snippets in your Google listings, you should also have a plan for structured schema markup. Schema markup on Google tells the search engines what your data means. This means that you can add extra information to your listings that will more accurately guide your customers to the support they need. 

Providing additional schema markup information to your listings gives them an extra finishing touch to ensure that they stand out from the competition. For example, you might add something like a “product price” to a product page or information about the product’s availability.

Alternatively, you could provide the people who see a search result with other options. This could be an excellent option if you’re concerned that some of the people who might come across your listing might need slightly different information. 

For instance, you can ask Google to list other pages along with your search results that customers can “jump to” if they need additional insights.

Baking structured data into your design process when you’re working on a website does many positive things. First, it makes the search engine’s job easier so that you can ensure that you or your client ranks higher. Additionally, it means that your web listings will be more thorough and valuable.

Since UX is all about giving your audience the best possible experience with a brand, that starts with making sure they get the information they need in the search results. 

Constantly Improve and Experiment

Remember, as you begin to embed elements of UX into your search engine listings, it’s essential to be aware of relevant evolutions. Ultimately, the needs of any audience can change very rapidly. Paying attention to your customers and what kind of links they click on the most will provide you with lots of valuable data. You can use Google analytics to A/B test things like titles, pictures, featured snippets, and other things that may affect UX. 

At the same time, it’s worth noting that the Google search algorithms are constantly changing too. Running split tests on different pages will give you an insight into what your customers want. However, you’ll need to keep an eye on the latest documentation about Google Search if you want to avoid falling behind the competition. 

Like most aspects of exceptional UX, mastering your SERP position isn’t a “set it and forget it” strategy. Instead, you’ll need to work on constantly expanding your knowledge if you want to show clients that you can combine UX and SEO effectively. 

Make sure you have plenty of tools set up to offer reports and insights into the kind of changes that you may need to make to align with search engine expectations. 

Making the Most of UX in the SERPS

It’s easy to forget that there’s more to UX than making your buttons clickable on mobile devices or ensuring that scrolling feels smooth. For a designer or developer to deliver excellent UX for a brand, they need to consider every interaction that a company and customer has. 

This means starting with the way a website appears when it’s listed on the search engines most of the time. Getting your SEO listing right doesn’t just boost your chances of a good ranking. This strategy also improves your reputation with your audience and delivers more meaningful moments in the buyer journey. 

Don’t underestimate the power of UX in SERPs. 

 

Featured image via Pexels.

Source

The post 7 UX Principles to Boost SERPs first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Landing pages are crucial for conversions. User-friendly landing pages rank higher in the search engines and generate the maximum leads.

Interestingly, user behavior changes every year, and new website design trends should be kept in mind to continue acquiring sales from your existing landing pages.

If your high-performing landing pages in 2019 have suddenly started underperforming in 2021, then it is a clear indication that your landing pages need a strategic revamp to record higher conversions.

Landing page revisions are necessary for reduced bounce rate, more visitor time on the page, and better user actions.

This article will discuss some of the top web design trends of 2021 that brands have adopted to revamp their landing page designs. You can learn from the trends and apply your own custom design intelligence to redesign your landing pages for 2022 and convert the maximum number of visitors.

Let’s begin…

Why Landing Page Design Is Crucial For Conversions

Landing pages are the first stop on your consumers’ online buying journey and the first chance to put an impression.

People on the internet are becoming less patient. It takes only about 50 milliseconds for a visitor to form an opinion about a brand and decide whether they want to stay or leave the website.

Convincing modern customers to buy products or fill up query forms on a landing page is not easy with traditional website elements.

In 2021, it is now harder to impress visitors landing on your website than in 2019. Keeping in mind the audience of 2021 and beyond, an ideal landing page should be user-friendly, engaging, innovative and should encourage users to take action.

Here are some of the top reasons why landing page design is so crucial for conversions:

  • You get barely 7 seconds to create a strong impression. It is a time span in which visitors roughly scan the page and make their decisions.
  • Publishing 40+ effective landing pages at regular intervals can generate 12X more leads.
  • The average conversion rate from the landing page across all industries is only 2.35%.
  • Using the right types of targeting and testing can boost landing page conversion rates by up to 300%.

Considering the above stats, it can be easily said that a landing page has to be impressive and quick enough to impact the visitors positively.

7 High Converting Landing Pages & Lessons You Can Learn From Each

Below are some of the best high-converting landing pages, which were just updated recently in 2021. For each page, we list a lesson you can learn to inspire your next design revision in 2021 and ahead:

Example #1 – Replace Boring Customer Info Forms With An Interactive Quiz

Landing Page: Nextiva’s Unified Communications Readiness Quiz Landing Page

Industry: Voice Over IP software

Conversion Measured By: Leads fill out a form if they are interested

Redesign focus: Improve the quantity and quality of leads

Solution: Substitute online form with an interactive quiz

In 2019 and even 2020, many businesses were practicing the trend of including a customer form on their landing pages as a call to action to initiate a quick customer action.

The customer information form was useful for businesses because it helped them generate quick leads. However, at the same time, there was no real reason pushing the customer to fill in the lead forms especially if it consisted of more than 2-3 fields.

Nextiva used its creativity to replace boring lead forms with interactive quizzes. In its 2021 page design, the company added a quiz for visitors to participate in.

The aim is to have interactive pages to keep visitors engaged and persuade them to stay on the page.

Here are the comparisons of both the designs:

2019

2021

Key Takeaways:

  • The 2021 landing page now has a free Unified Communications Readiness Quiz that allows business owners to fill the form interactively. Adding a quiz with the number of pages mentioned at the top tells the user how many steps are left to complete the quiz, making their waiting time easier.
  • The background image is replaced with communication icons to simplify the message of the kind of services they offer.
  • The page looks neater and appears to be easier to scan at a glance.

Example #2 – Emphasize Strong Visuals and Copy that Stresses on Product Details

Landing Page: Western Rise Homepage Variation

Industry: Ecommerce

Conversion Measured By: Apparel purchase

Major redesign focus: Improve the number of leads

Solution: Improve the copy and visuals

Western Rise, a clothing eCommerce company, realized the importance of having impressive images and detailed product information on its landing page.

The 2021 page replaced ordinary product images with strong visuals of the models wearing Western Rise clothing. Also, the product image includes extensive product details, which were missing on the older page.

Here is a clear comparison of the 2019 vs. 2021 landing pages of Western Rise:

2019

2021

Key Takeaways:

  • The new landing page has a powerful headline – Performance Clothing for Travel, Work, and Play. In just a couple of words, the brand tells everything about itself. ‘Performance Clothing’ is their unique selling proposition (USP) that tells the customers that their product is durable. Besides, the caption ‘Travel, Work, and Play’ tells what the product is about. Modern customers like products that fulfill a particular need, and Western Rise made it easier for the users to realize the importance of their products which fulfilled their specific needs.
  • The bold visuals in the new page capture contemporary shots of the models that put a strong impression on the audience. Every image is clicked mindfully to explain the style and quality of the Western Rise clothing line.
  • The products displayed on the new page include every minor detail and feature that often other clothing brands ignore, such as the specialty of the product, occasions to wear, and weight other than colors, fabric, fitting, etc.

Example #3 – Use Strong Social Proof To Increase Conversions

Page: Aura Save 50% Landing Page

Industry: Identity Theft Software

Conversion Measured By: Online registration or an inbound call

Major redesign focus: Improve the number of signups

Solution: Add strong social proof

It is a known fact that social proof on sales pages is essential for increased conversions. But in 2021, the importance of social proof has gone too far.

Aura is an identity theft protection service that aims to build trust with its prospective customers when they first browse their landing page. Take a look at how Aura displays customer reviews above the fold to catch user’s attention.

Unlike others, Aura combined the rating stars and the review to prove customer satisfaction and emphasize their expertise in the field.

BONUS:

Another example of using strong social proof is the Exploding Topics newsletter landing page.

Exploding Topics is a newsletter with a pro subscription for content marketers and anyone interested in trending topics about any topic. It’s an excellent example that uses a lot of social proof on landing pages that give something away for free, like a weekly newsletter or an eBook.

If you could notice, the latest landing page below has multiple forms of social proof on a single page. First, they feature a list of brands that trust Exploding Topics. Secondly, they quote Wired Magazine founder Kevin Kelly’s feedback, followed by the logos and tweets praising the newsletter.

Key Takeaways:

  • Exploding Topics uses several different types of social proof that appeal to different demographics.
  • Their “trusted by” logos of world-renowned companies stand out to potential B2B subscribers.
  • Kevin Kelly’s quote is catching the attention of tech-savvy readers.
  • Despite packing the page with social proof, the opt-in form is still well above the fold. It is the best landing page practice that applies to nearly all pages.
  • The landing page uses actually embedded tweets (not screenshots), which help demonstrate that the tweets are legit.

While Exploding Topics have smartly used social proof on its page, the ideas of leveraging social proof are not limited to this only.

Example #4 – Focus On Visually Appealing Above the Fold Content

Landing Page: Perfect Keto Homepage Variation

Industry: Supplements

Conversion Measured By: Online purchase

Major redesign focus: Improve the number of purchases

Solution: Improve Above The Fold Content

Above the fold content greatly impacts customer’s decision-making. Perfect Keto lacked that appeal on its 2019 landing page design.

Hence, the 2021 design was revamped with better visuals and more professional looks.

The 2021 page received major changes in above-the-fold content, such as the top menu bar with the brand name not losing the user’s attention anymore and an additional menu bar giving a quick overview of what the brand offers.

The older page did have many social proofs, but those were limited to customers only. The 2021 design also highlighted the publications where the brand appeared, which proved exceptional in building customer trust.

Take a look at the two landing pages of Perfect Keto in 2019 and 2021:

2019

2021

Key Takeaways:

  • The 2021 landing page heading is more compelling because it clearly conveys what their product is all about. The older page was missing the actual purpose of the product.
  • An additional section on the new page to educate customers about the Keto diet and how to start it helps visitors understand the product even better.
  • The inclusion of a product image above the fold attracts user attention and makes the product trustworthy. People now know what they will be buying right at first sight of the page.
  • The new page proudly displays the products featured in the publications, such as Women’s Health, Healthline, Reader’s Digest, and Popsugar, which again helped customers trust the brand.
  • The page also features a video of the Perfect Keto founder that is brilliantly working in gaining visitor’s attention and faith.

Example #5 – Make The Call to Action More Compelling

Landing Page: Zendesk HelpDesk Softwage Landing Page

Industry: SaaS

Conversion Measured By: Online registration

Major redesign focus: Improve the number of registrations through the website

Solution: Make The CTA More Compelling

Zendesk did a clever job by replacing the sign-up form with a single button. On the older page, it was unclear to the user if the company has a trial option for free unless they move to linked pages. Such confusions often resulted in traffic bounces.

Adding the start free trial button on the 2021 page makes it easier for the users to understand that the product comes with a free trial. At the time, it helps the user take quick action.

Similarly, the ‘Get started’ button at the top was replaced with ‘Free trial’ with the same intention.

Moreover, chat support was added to guide users at any stage of the buyer journey. Live chats are vital to help visitors better understand the product and move a step ahead in the customer journey.

Take a look at below two images:

2019

2021

Key Takeaways

  • The CTA buttons have more actionable text and look more prominent.
  • The color choice for the button is in contrast with the background but matches the page theme.
  • The older page missed sales support, which is included in the new page for a better customer experience.
  • The tabs in the menu bar were reduced to four to make the page simple to use for users.

Example #6 – Use Contrast To Highlight Specific Copy On The Page

Landing Page: GetResponse Website Building Landing Page

Industry: Online Software

Conversion Measured By: Online signup

Major redesign focus: Improve the number of signups

Solution: Use contrast around important copy on the page

GetResponse focuses on attracting visitors’ attention towards the offerings from their business. Starting from above the fold section, the landing page highlights the texts that are important and need the visitors’ attention.

The infographic on the landing page is the next thing that promises to grab user attention while beautifully describing how this website builder works and is useful to the user.

Key Takeaways:

  • The text highlighted on the landing page draws the user’s attention towards what the business has to offer or unique selling points.
  • The infographics briefly explain the working of the tool in an easy-to-understand manner.
  • The Yellow color is used prominently on the landing page to attract user attention and persuades users to try the tool by listing its advantages.

Summary

Landing pages provide the first opportunity to create an impression in the minds of the consumers. A well-structured and mindfully designed page sets the right tone for your brand message and encourages users to choose your business.

However, the strategy for landing pages needs innovations from time to time for better results. The examples and tips shared above prove how landing pages in 2019 have seen significant improvement in 2021.

In the coming year, use these ideas to create landing pages that influence customer decisions and encourage them to take quick actions.

Source

The post 7 Landing Pages Comparisons To Improve Your Conversions in 2022 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

The user interface, or UI for short, is the aspect of an app or website that users interact with naturally. Since the UI is the part that is most commonly used, it leaves a lasting impression on users that can either be positive or negative.

The design of the user interface and it’s functionality are what can make or break programs. That’s why UI testing has become integral in the world of software and web development.

Source de l’article sur DZONE

Looking to give your homepage a well-needed design update in late 2021 or 2022? Not a bad idea; first impressions are crucial when it comes to business websites. But, fixing your homepage and website design is no easy feat.

Web design trends are evolving faster. Blame the ever-decreasing user’s attention span. The average visitor now spends just 0.5 seconds scanning your homepage to form an opinion about your brand and decide whether to click through or bounce.

Increased user expectations and uncertainty in the user’s response, which is highly impacted by the site’s first impression, are other reasons to consider. This is why the designs which were trending in 2019 are no longer viable in 2021 or 2022.

We have curated the ten best examples of homepage designs to inspire your business in 2022, including a rundown of the best strategies and tips.

Let’s start by highlighting why homepage optimization is necessary for 2022:

Why Your Homepage Will Be So Important in 2022

Your website — especially your homepage — is your brand’s first chance to attract, build trust with, and connect with visitors.

According to recent statistics on why website design is important:

  1. 38% of visitors will stop interacting with a website if they think the layout isn’t visually appealing or intuitive. This creates a higher bounce rate and fewer conversions.
  2. 94% of a visitor’s first impression is based on website design (including colors, fonts, layout, navigation menus, etc.).
  3. 46% of people base a business’s credibility on the aesthetics of its website. Brands with less-than-stellar homepage designs are seen as less trustworthy than companies investing in the visitor experience.

Think of it the same way as walking into a brick-and-mortar store. Visitors are more enticed by a carefully curated ambiance of neatly stocked shelves and welcoming employees than a store that’s dark, messy, or seemingly unfriendly.

Using this logic, your homepage’s above-the-fold section is where you’ll greet visitors and reel them in for more.

10 Homepage Design Comparisons (2019 vs. 2021) To Inspire Your Business Website Design in 2022

Homepage design has come a long way since 2019. In this section, you will explore how.

These homepage designs crush it above the fold. Take just a few of these tips to heart, and your website will be poised to attract leads and conversions — no matter which industry you’re in.

1. Netflix – Crafting The Perfect Call To Action That Reduces Friction With An Additional FAQs Section

Most businesses make the mistake of adding a CTA button that first persuades the user to click on it and then asks for the visitor’s email address.

Netflix also did the same in its 2019 design.

However, Netflix combined both steps in its 2021 homepage design.

The new, improved 2021 homepage design asks for the user email address right up front along with the CTA button.

Here is a good comparison of both the designs:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The design encourages visitors to enter their email address right when they land on the homepage. As a result, form submission is much easier when the user has started the process. Hence, Netflix makes it easier for visitors to move along their conversion funnel nicely by reducing the friction.
  • The 2021 design also has a nice FAQ section that provides quick information about the company’s services and improves the overall user experience.
  • FAQs also help increase the organic presence of the website in the search engines because Google presents snippets from the FAQ section in the form of an answer box in the search results.

2. Spotify – Revamped Color Combinations For Improved CTA Visibility And Using The ‘Rule of Three’ For Heading Text

The older 2019 Spotify homepage design used light pink and orange colors in its home page main area. The CTA color was green, but if you look closely, the CTA lacks visibility.

The new 2021 design uses blue and green colors with a much larger font size for the main heading. The colors are attractive, and the CTA is visible clearly.

Here is the comparison of the Spotify homepage 2019 design vs. 2020 design:

2019 homepage design

Vs.

2021 homepage design

Key Takeaways:

  • Blue is the most versatile color, and green is the perfect choice for the CTA button. Spotify used universally accepted color combinations to redesign its homepage and made the CTA more visible.
  • The main heading is also made larger than it was in the 2019 design, and it follows the rule of three in writing which is effective and satisfying. It uses just three words in the main heading to allow the human brain to process information as a pattern that is more memorable.

3. Hulu – Give Priority To Your Brand Name And Hide Pricing

If you compare the Hulu 2019 vs. 2021 Hulu homepage, the brand name has been prioritized and shown as the main heading.

Moreover, the older homepage had pricing information everywhere, which has been reduced intelligently in the new design.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The brand name ‘Hulu’ is displayed as the main heading of the homepage, which helps to build audience trust.
  • The older design persuaded the users to pick a paid plan even though they had a free trial option—this discouraged users from trying their service. The new 2021 design encourages users to try the platform for free. In addition, the packages have prominent CTAs that mention “try for $0”. This design move improves conversions on the website.
  • The new design makes it easier for the visitors to select a viewing plan with easy comparison of the three available plans. The best part is, customers can start all the plans for $0. It’s a win-win situation for the users, and they can quickly pick a plan to start watching Hulu.

4. Nextiva – Reduce Visual Noise And Add Pictures In Menu To Improve UX

Nextiva realized the importance of reducing visual noise in its newly designed 2021 homepage. Visual noise happens when you use too many colors to attract user attention. Different colors compete with each other resulting in diluted customer observation.

In the old 2019 homepage, Nextiva used orange, blue, and green as the primary colors, while in the 2021 revamped design, they have used blue as the main color.

Here is a comparison of the two designs:

2019 homepage design

vs.

2021 homepage design

Moreover, the older homepage didn’t have an image in the product menu, but the new 2021 homepage improves the UX further.

Below is a comparison:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Nextiva used blue as their base color for the homepage design and removed orange and green colors to reduce visual complexity. This is an excellent change to keep the user’s attention focused. Notice the green colored bar at the top of the homepage in the 2019 version now replaced with blue.
  • The 2021 design has a clean look compared to the 2019 design, which looks scattered with too many different elements, including CTAs that confuse the users.
  • The product menu does an excellent job of linking intelligently to service pages such as phone systems and video meetings. The image of a smiling lady attracts users to click on Nextiva’s products to learn more about them. Improving UX is an impressive way to reduce bounce rates and increase time on site.

5. GoToMeeting – Avoid Lengthy Sign Up Form, Educate Users About Your Products, and Add Images That Depict The Current Needs of The Audience

GoToMeeting does a great job educating the users about their product by adding more content on the homepage that comprehensively explains their product features.

Moreover, they have replaced the older hero image with a new picture that portrays the changing needs of their audiences. Nowadays, there is a rise in work from home culture due to Covid-19. Hence, the photo and the heading text clearly target the needs of their users.

Here is a comparison of the 2019 vs. 2020 homepage of GoToMeeting:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The 2019 homepage design had a sign-up form on the homepage, which GoToMeeting removed in the 2021 design. People hate to fill in so much information right when they land on the home page. Hence, GoToMeeting did the right thing by removing the signup form from their homepage.
  • The hero image steals the show of the 2021 redesign because the picture of a working mom with her kid playing studying in front of her is a great way to portray the current needs of the society when over 60% of the employees are working from home. Audiences can quickly relate their working environment with the hero image leading to more sign-ups.
  • The older 2019 design was confusing, and it made little effort to help the users understand the different features of the product. The new 2021 homepage design has a product features section that explains the different features of the software. When users are educated about the product, they earn the confidence to try the product.

6. Zillow – Apply Hick’s Law To Allow Visitors To Take Faster Decisions

Zillow does an impressive job of applying Hick’s Law in allowing visitors to make faster decisions. Hick’s law states that the more options you present to the users, the faster they will decide. Therefore, it is a major factor in improving website usability.

The old 2019 homepage design of Zillow offered too many options to the users, like they want to buy, rent, or sell a property. The users first select either one of the three options and then enter the zip code to start their search.

The new 2021 homepage design changed that. Now, Zillow offers users a single option. They only need to enter the zip code to get started.

By reducing the number of actions that users need to take to just one, the homepage design eases the overall decision-making process of the site visitors.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The new homepage design has a simple search bar that persuades visitors to take prompt action.
  • The Hero image is placed smartly behind the search bar to depict the needs of the users accurately.
  • The homepage does have three different panels for buying, renting, or selling a home when the users scroll below. The old design is missing that. The new design removed so many options above the fold and kept just a single option for the users to encourage more users to search properties on the site.

7. Plex – Placement of Prominent Calls-to-Action On Homepage

The CTA is a key element of every website. It helps the users decide on their next action and helps to convert the visitors into leads.

Plex lacked an optimized CTA placement in its 2019 home page design. Hence, the 2021 design received an uplift to better place the CTA for increased visitor engagement.

Take a look at the home page designs of Plex from two different years. If you compare the two home pages of 2019 vs. 2021, the primary difference that will grab your attention is the CTA.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The call-to-action buttons are more prominent and have actionable texts.
  • The number of CTA buttons is increased to two to encourage users to take action.
  • The additional CTA button is wisely placed at the center to get immediate attention.
  • Note that the color choice for the button is also bright and highly contrasts with the background yet matches the color theme.
  • The old heading text ‘Stream Smarter’ was confusing because it didn’t help the users understand what Plex does. Hence it is now revised to ‘Watch Free Movies and TV on Plex.’ The new text is easy to understand and has the word ‘Free’ to increase the number of visitors clicking on the CTA.

8. Dropbox – More Above The Fold Content And Change of Fonts

Dropbox has significantly worked on its main content, which is clearly visible in the comparison homepage design images of 2019 vs. 2021.

The 2021 homepage is seen fixing faded, minimalistic, and less engaging content in the older homepage.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Sans serifs, with their clean readability, are included for longer bouts of the homepage.
  • Bold sans text is doing the job of drawing user attention effortlessly.
  • The color contrast of the text with the background is increased, which improves the visibility.
  • The right side image of a laptop is replaced with a screenshot of the software, which intrigues users to know more.

9. Cisco – Moving Blocks To Outsmart Competitor Websites

The homepage design of American technology company Cisco has seen a drastic change in 2021; it deserves to appear on this list. The company website smartly represents an appeal for future development through its killer homepage design.

Here is a comparison of the old 2019 homepage design vs. the new moving block design of 2021:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The home page contains moving blocks with news from the blog. As you hover over the image, it widens up, and a CTA button appears. The blocks represent a design of the future which the competitors might find hard to replicate.
  • Every block has a CTA, which was missing in the 2019 design. Each block represents a specific Cisco service and caters to the different needs of the visitors.
  • The new design is elegant and cleaner with lots of information.

10. Slack – Product Video On Home Page For More Conversions

Slack has made it easier for the users to understand the product well by using a video on the homepage.

The 2019 design has an image, while the 2021 design has a video that helps the visitors understand how the product works.

Here is a comparison of the 2019 design vs. 2021 design:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The inclusion of a product video leaves a great impression in the minds of the visitors and shows them what your product does.
  • Video helps Slack to make its value proposition clear and super fast.
  • Video has a strong correlation to conversions, and they work well as compared to hero images. Slack used a hero image on the homepage in 2019, but they replaced it with a video in 2021.

Final Thoughts on Using These Homepage Designs for Inspiration in 2021

By making it to this point in our guide, you now have plenty of inspiration to run with when upgrading your homepage. You should also have a better understanding of how powerful this tool may become for your brand.

So now it’s time to brainstorm how to use these ideas for your own 2021 homepage design. First, jot down the key points from this guide and honestly assess how your website currently compares.

Accomplish this task, and your brand might see an uptick in website traffic and conversions. It may even earn a spot in a roundup of killer website designs just like this one.

Source

The post 10 Homepage Design Comparisons to Inspire Your Business in 2022 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot