A great user experience is necessary for whomever the target audience for your website is. However, a B2B UX comes with its own set of best practices distinct from a B2C website. After all, the way you market to a business differs from the way you market to a consumer.
For example, B2C websites usually are aimed at just one buyer per visitor; B2B customers often involve a variety of people in different roles working together to make a decision to buy your product. Moreover, research on B2B products and services might take weeks before an actual purchase, whereas the goal of a B2C website usually is to complete a sale in as short a time as possible. Trying to plug a B2C UX peg into a B2B hole simply won’t deliver the results you seek, because B2B users may not find what they are looking for when visiting your site and instead may turn to a competitor.
So what are some B2B strategies you should consider when building your UX? Here are a few:
- Because B2B websites must communicate their products and services to different types of users, you might need more content than usual. However, take care not to go overboard with this extra content, which can overwhelm visitors and drive them off.
- Main B2B website content should be to the point and allow for additional content to be linked under blogs and resources.
- Because of the various audiences and buying stages inherent to B2B marketing, websites typically should include large amounts of content in the form of webinars, e-books, white papers, and comparison charts. This helps visitors identify their problem and find a solution. To facilitate the downloading of these resources, an easy user experience should be present for the visitor from the moment a page is loaded all the way through to the filling out of a form.
- Social proof provides trustworthiness and helps persuade visitors.
- B2B UX elements should be incorporated on mobile. Make sure the experience is clear and free of extra distractions.
Many B2B companies are rocking UX on their websites and are effectively capturing the attention of visitors. Here are some examples of this excellence:
The main point of this page is to sign the visitor up for an account. There are many elements in play that encourage the user to take action, including:
- A clearly defined value prop.
- A bright CTA that calls for attention and is contrasted with a neutral background; just including one form field is less intimidating than long forms with several questions.
- Simplicity: It’s a short page, and visitors have everything they need in the hero image and the main navigation.
- Does not use a busy hero image; incorporates color illustrations and the brand’s fun personality.
- Large fonts with a subtle burst of color in the asterisk. The asterisks in the headline and subhead are a playful way to introduce the value prop.
- By placing this social proof (e.g., customers, experts, leaders in the industry) near converting CTAs and forms, visitors will more likely fill out the form or click on the CTA. According to Nielsen, 70 percent of people trust a recommendation from someone they don’t even know.
- When it comes to the form, PeopleHR placed the fields in a single vertical row for easy scanning.
- Best practices include keeping labels on top of the form field rather than in the form field. This way, visitors don’t lose track of what they are filling out.
- Easy access to log-in if a user already has an account.
- Super short and simple headline; no buzzwords or fancy industry jargon.
- Important stats near the CTAs.
- Happy, smiling picture of a potential customer—not a typical stock photo.
- The navigation is sticky. By using sticky nav, as visitors scroll down the page, they will always have access to every critical page within the site.
- A brightly colored CTA has been added on the right—most users are accustomed to having a CTA on the top right of the nav bar. Keeping this in the sticky nav is critical. This way, users don’t have to go on a hunt looking for critical pages or where to sign up or log in. The constant visible logo increases brand value.
- Another example of applying social proof near CTAs.
This looks like a simply designed product page, but there are several good practices in place:
- Balanced white space so that visitors can focus on content and clearly read CTAs. This includes line spacing between bulleted lists, headlines, and body copy.
- Continu added white space around content. Rather than adding several paragraphs, it broke out the content into one paragraph and four bullet points. This way, the content is easily scannable.
- Sticky nav is used on this site. The current selected page link includes a different style so that visitors can easily know what page they are on.
- Since Google changed its algorithms, it now considers how responsive your overall website is when ranking websites in search. Websites that aren’t responsive will rate low on search engine results. Recurly’s mobile experience includes buttons large enough to be clickable, which means they might scale from desktop to mobile. The button also animates while being clicked as an indicator to users that they have clicked it.
- It uses scalable vector graphics (SVGs) on the site that change size based on screen size. Unlike raster graphics, which can become pixelated based on size change, SVGs will remain the same size and include the same clarity.
- On mobile view, a few elements are hidden but not that much, because the website is streamlined. Typically, on mobile, essential elements such as critical information and answers to questions will remain, and the secondary elements will be hidden. This is why the mobile-first approach is popular: It’s a content-focused approach to design. Visual hierarchy is important with content, placing the most important content near the top.
What other examples of UX on B2B websites impress you?