Best practices are starting points: if you have no data, start with these. They are not what you should end up with, but it’s where you start (the optimization). That’s an important distinction.
Here are some ideas about of how you can apply 10 Jakob Nielsen Usability Heuristics to lead generation websites in the B2B or high consideration B2C realm, where there isn’t necessarily any transactional functionality, e.g. e-commerce, user registrations, etc.
Usability heuristics are considered “rules of thumb” (or best practices) for user interface design. When applied to your site, these will help reduce friction and keep your buyers focused on the message you are trying to convey, as opposed to getting distracted or confused by a deficient or incomplete interface.
Image Credit
In the realm of B2B or high consideration B2C, likely you are going to face the challenge of having to explain a lot to get your buyers to convert on your offers. Remember the higher the value of what you are selling, the higher the inherent friction, therefore the more questions you will need to answer throughout your site. In these situations, information architecture is a much more complex task. Some B2B firms are notorious for ignoring these facts with the argument that “it’s not important for us, because we do not actually sell anything in our website…”
In their “B2B Website Usability for Converting Users into Leads and Customers” report, Hoa Loranger, Chris Nodder, and Jakob Nielsen say:
“B2B sites ought to emphasize usability more, not less, because they must help users accomplish more advanced tasks and research more specialized products.”
When designing a new website, specially if a radical redesign approach has been chosen, keeping these heuristics in mind really do serve as a north star, or as a reliable criteria that can be used to to decide between different different alternatives of page designs, functions, or ways to layer your information.
Here we will comment and provide examples that demonstrate how relevant these heuristics are while redesigning a lead gen website.
Heuristic #1: Make Your System Status Highly Visible
Jakob Nielsen Says: “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
Translation for lead gen web design: Always tell your buyers where they are when navigating your site. You can achieve this through the use of:
Breadcrumbs - Breadcrumb navigation works like a GPS, telling your buyers where they are on your website at all times. Plus, with breadcrumb navigation your buyers will have a path laid out that tells them how they got there. So… please use breadcrumb navigation on your site, whether that’s location-, attribution- or path-based.
Page headers - The header of the page should also resemble the copy of the navigation items or links that your buyer clicked. This is not only SEO good practice, it is also a good user experience practice. Chances are that if the page header of the page matches what the user clicked on, the buyer will be reassured of his choices.
Highlighting selected menu options - When you click on a navigation item, keep it highlighted, bolded or underlined, so that your buyer gets instant feedback about the menu options where he is.
Show progress bars - page-load indicators during page load time. If your buyers are trying to do something on your site, such as loading a calculator widget, or processing a request, then it’s good practice to display a progress bar or notification of some sort, so they know what’s happening.
Thank you pages – are also great indicators of current status. If your buyer downloads an eBook, or subscribes to a webinar, for instance, it is important that the Thank You page confirms the action that was just taken.
If you skip these elements, your site will be confusing and your buyers will start to wonder where they are, which is a completely unnecessary friction point. Make your navigation very clear.
The Berkshire company does it right, providing their buyers feedback about exactly where they are while navigating their site, and the breadcrumbs tell them how they got there.
In the case of MSC Industrial Supply Company, buyers who want to view their specialty brochures see a rotating progress “wheel” that indicates what percentage of the whole brochure is loaded.
Above all, remember that good websites must answer your buyer’s questions before they think of asking them. But if your buyers are getting distracted trying to figure out your website site, or are left wondering if something is happening after clicking, they will be confused and frustrated.-
Take this homepage as an example:
…all good there right?
Well, now look at this other page and see if you can guess which section of the site was clicked or if you can tell where in the site you are:
… nope, you have no idea where you are… and actually the user clicked somewhere in the homepage.
Here is an example of how a thank you page should act also as a system status confirmation: “Hey you have downloaded this report…”
Pro tip: Make sure to use breadcrumbs and clearly indicate the navigation active links.
Heuristic #2: Match Your System to the Real World
Jakob Nielsen says: “The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”
Translation for lead gen web design: use phrases and words that your buyers are already thinking about and eliminate jargon. Your buyers must come across words, phrases and concepts that are familiar to them, as opposed to terms that are far too technical. In fact, the best language and tone of voice should come directly from your buyers mouths. Thus, spend time talking to your customers, ask them to tell you what your product means to them, what problem it solves, and how was their life before using it. Any information you put on your site should be completely jargonless, and appear in both a natural and logical way.
Think of the way iTunes’ user interface looks, and you’ll appreciate how real-word labels give users a comfortable user experience. iTunes is essentially a giant digital library that stores favorite media items, be it music, movies or TV shows. It’s clear that using these real-world labels helps users consume all their favorite media items on their iMacs by keeping language relatable.
Techport 13 does it right. Their value proposition explains in very simple language what they do:
Their buyers literally used terms like:
“roll out new software”
“train the team”
“do system customizations and enhancements”
“make IT run smoothly”
And this was considered successfully in their homepage.
Now look in sharp contrast at the language they in their homepage before their website redesign:
Image courtesy of webarchive.org
Certainly their clients didn’t use terms such as:
“Our resources, products and proven strategies”
“attain the most of”
“…our employees have been expertly applying their wealth of experience to our clients”
“a diverse set of client experiences…”
You get my point.
Pro tip: Your website must absolutely speak to your buyers’ real world language.
Heuristic #3: Allow User Control and Freedom
Jakob Nielsen says: “Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.”
Translation for lead gen web design: Simple; eliminate anything that takes control of the user out of his hands. Here are three examples in which this heuristic is commonly violated in web design: Pop-up offers (some), automatic actions such as auto-play videos, and automatic carousels.
Pop-up offers: We’ve all visited websites where a popup window suddenly appeared and asked us to join a site panel or take a feedback survey. While intrusive popup windows like these are annoying on their own (although pop-ups actually work when done right), they’d be worse if your buyer couldn’t reject such an intrusive offer. If you want to collect feedback by asking your buyers to join a panel or take a survey, then be sure to give them 100% control and freedom by letting them reject your offer when the popup window appears. Believe it or not, this will increase the quality of your surveys since those who opt in are more likely to be honest and genuine anyway.
On Grainger’s website, a industrial supply company, buyers clearly see the helpful “no thanks” microcopy, right underneath the big, red “join” call to action button in the pop-up window. Your buyers will appreciate this thoughtful feature because it will add to their user experience (not take away). Of course, those who want to give feedback can easily go ahead and click the “join” call to action button.
Another example is here in this blog. At the point when this article was written there was a slide-in call-to-action that showed up at 50% scroll on the page; It had the nice feature of a collapsing control so the buyer can come back to it later if the buyer does not want to take action immediately:
Autoplay videos: Another pet peeve for buyers is that some websites automatically play a video as soon as buyers land on the site. This can be frustrating because some users may see that as a nuisance when they land on your site. It’s important not to assume what you’re buyers want to do, so let your buyers play the video only if they want to, and let it be supplemental to the information presented in written form.
Here’s how Square does it:
Autoplay salespeople: If you thought autoplay videos were annoying, you haven’t experience autoplay salespeople. Believe it or not, there are still websites out there that have someone selling something the second you land on their site. Not only is this unexpected and fake, it turns buyers off BIG time, so avoid these lousy moves at all costs. There is even a w3c.org guideline for this.
Automatic Carousels: Another example of loss of control that causes anxiety and frustration in your buyers is automatic sliding banners, besides it’s been demonstrated over and over that automatic carousels don’t work. Instead of using this distracting element in your website, you need to layer the information for your website in a way that makes it easy for your buyers to discover and explore, fully controlling their experience.
Here is a better way, for example; WSI franchise uses tabs to walk the user through related content:
ProTip: Allow your buyer to easily discover and control where they want to do or where they want to go. Eliminate anything that moves, or is activated automatically, including carousels, auto-play video, and semantic animations.
Heuristic #4: Use Consistency and Standards
Jakob Nielsen says: “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”
Translation for lead gen web design: The last thing you should subject your buyers to is a sense of confusion on your website. They shouldn’t be put in a position where they’re wondering if various words, situations or actions really mean the same thing or not. Websites should not be puzzles. Instead, you should create fluid experiences that eliminate any guesswork.
Massey Ferguson’s website, a leader in tractors and the global harvesting business, exemplifies a good use of consistency on a website. On every page, whether it’s the homepage or a product page, buyers will see the same use of white space, a clean layout and a well-organized information hierarchy. This keeps buyers calm and capable of scanning quickly for important areas throughout the site. Keeping consistency and conventions simple makes your website “learnable,” and that’s a good thing because it will appear easier to use to your buyers.
There are many examples of good standard navigation styles. Here’s one by Sprint Business’ website. Throughout the site, no matter where you navigate to, you’ll always see the same elements in the navigation bar that make it easy for buyers to know where they are at all times. In addition, the same dropdown-menu scheme appears in the layered navigation from whichever page you access the navigation bar.
Now look for example at Georgia Pacific Corporation. They are a huge corporation, yet the experience throughout different related brands is very different, with different navigation styles and different standards. This is certainly not a unified experience and may cause confusion to some buyers.
Now, one could argue that because the company is so large and the markets so varied, this is a lesser issue than if you were to force your buyers through a different experience while navigating different areas of your site. You have to consider that doing this would:
force buyers to adapt to different interfaces when they stumble across that differentiated area or microsite, or
cause confusion in some buyers that actually may think they left your main site.
Pro tip: Follow a standard look and navigation style across different sections of your website.
Heuristic #5: Prevent Errors
Jakob Nielsen says: “Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.”
Translation for lead gen web design: The best defense against any errors is to do whatever in your power to avoid them in the first place. When you design carefully and mindfully for the user experience, then errors don’t pop up much at all. This may require several iterations of usability testing and improvements on your site.
Here are some errors that are easily preventable:
Typing the wrong info in a web form: this is accentuated when, in an effort to make the forms clean and sleek, the field names are placed inside the fields themselves, and once the buyer clicks on the field itself, he is forced to remember what was he supposed to write in there.
Make it easy on your buyers, don’t stretch short term memory and just lay out the field names outside of the form. You’ll thank me later.
User thinking it clicked on the wrong place (when in fact didn’t). When a call-to-action button does not resemble landing page language that it directs to, it causes your buyer to doubt or feel frustrated and anxious. Take this example:
The landing page has nothing to do with the expectation built; hence it’s easy for the buyer to feel frustrated, confused, and in belief he made an error.
Let’s look at Simply Business’ flow to invite users to request insurance quotes. First, this is the call-to-action in their homepage:
And this is the landing page where you land; good things and bad things in there:
Search boxes are other places where users make common mistakes. That’s why using the auto recommendations feature can work wonders for each user. Take, for example, Google’s auto recommend feature. Every time you enter a short- or long-tail keyword into the search engine, a list of possible, exact matches will drop down from the search box, thereby avoiding typos. These are the kind of best practices that make a difference on websites.
Driving your buyer out of your site – Ok, when your buyers are in the pages of your website, learning about your products and services, or in the middle of a critical page in your conversion funnel, try to keep your buyer on task and in your website by eliminating external links. If you must place an external link in these pages because it points to a valuable resource, it’s a good practice to show a “you’re leaving our site” warning. This will prevent unintended leaks from your site. You can be more relaxed about this in your blog, but not in your website pages.
Clear distinction between primary and secondary calls to action: In any conversion oriented page, there should be always a most wanted next step. This doesn’t mean that there you should lock your buyer to only one possible action, but it does mean that you need to establish a clear hierarchy and make sure that the primary call to action is clearly bigger & bolder than the secondary ones. Here is an example of the last 2 points:
Pro Tip: Shoot for clarity everywhere: if something isn’t clear, buyers will make mistakes, and it’s not because they are stupid; it’s because you didn’t do your homework.
Heuristic #6: Base Everything on Recognition Instead of Recall
Jakob Nielsen says: “Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another.”
Translation for lead gen web design: Your buyers need to be able to quickly recognize where to go or what to do next when exploring your website. There are a few UX features that can help you achieve this, but still be careful to use them properly:
Accordions – Accordions stretch short term memory quite a bit, so they work best if the wording in the question is the same kind of wording he has top of mind already.
Wealthfront does it right. It presents an enormous amount of information through accordions, however the questions are categorized in sections with clear headers, are written using language that is very easy to understand, and placed in a logical order.
Sticky menus – For long pages, a common problem is letting your buyers know how deep in the page they are. sticky menus are a sleek solution for this, because no matter how deep in the page the buyer is, he always will have access to the menu navigation options.
Atlassian does a pretty amazing job at letting their buyers immediately recognize which section they are in, and what information has been explored. They are able to explain their entire software solution Jira for development ops (which is a pretty complex software solution) in a single page using a combination of sticky menus and tabbed content.
Change the colors of visited links – this is a very often overlooked principle by modern designers and developers, but a very simple way of improving on the recognition heuristic.
Pro tip: Don’t stretch your buyers’ memory when they’re navigating your site. Don’t force them to remember anything. Indicate where they are, where they are going and where they have been clearly.
Heuristic #7: Encourage Efficiency and Flexibility of Use
Jakob Nielsen says: “Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”
Translation for lead gen web design: make the most frequent tasks in your site, the easiest ones to find.
Limited (but relevant) user flow options: Pipedrive’s possible actions, above the fold are limited to 4 options: sign up, sign in, start a free trial, or learn more about the software.
Courtesy Call-to-Action for returning visitors. Another important thing to keep in mind for lead generation websites, is to place an always-accessible call-to-action shortcut at the top of the site. This becomes important because your buyers will tend to come very frequently to your site during the evaluation stage of their buying process, and this call-to-action makes it easy for them to act on the ultimate call to action in your website.
Pro Tip: You can use shortcuts to drastically lessen the number of mouse clicks users need to perform a task.
Heuristic #8: Keep Your Design Aesthetically Minimalist
Jakob Nielsen says: “Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.”
Translation for lead gen web design: This is one that does not need much convincing; there seems to be an instant appeal to minimalism, and in fact, simpler designs are scientifically proven to be more appealing to buyers, and the trends reflect that.
Here are a couple of examples of designs that keep it simple, while providing sufficient information to the buyer:
Another website that uses minimalism to its advantage in web design is Reuters. Its homepage features a minimalistic use of color contrast, just enough to guide the buyers’ eyes to the action area. Note the generous use of white space in order to guide what we want our buyers to look at and to clearly set off the important sections of copy from the background.
Basecamp is another good example; one most prominent call-to-action for existing users (at the top), and one most prominent call-to-action for new buyers.
Now take Apple’s interface to “choose your country or region” (this is probably the one time that Apple is being used as a bad example). They obviously sell their products to businesses and users from countries all over the world. With that in mind, you’d think the company would ease the cognitive load on its buyers when prompting them to choose their country on their “choose your country” page.
Unfortunately, Apple makes its buyers individually locate their respective countries from a giant list of them on the page. This forces buyers to have to think and identify the names and flags of their countries instead of having a smart recognition feature simply offer match suggestions after they’ve typed in a few characters into a dropdown menu. You’d think that Apple—a mighty proponent of giving its buyers a great user experience—would have thought about its “choose your country” page better…but it didn’t.
Pro Tip: When in doubt, err on the side of simpler.
Heuristic #9: Allow Users to Recognize, Diagnose, and Recover From Errors
Jakob Nielsen says: “Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.”
Translation for lead gen web design: No web design, no matter how sound, is immune from errors. When errors happen, they’re frustrating enough, so your buyer needs a fast way to recover..
Digital agency Bluegg epitomizes how to mitigate the frustration of not finding a page by way of its very humorous and highly effective error page. Sure, the page is unexpected in both its humor and appearance, but it also provides a functional benefit to the user: The user is given the option to go back to Bluegg’s homepage by teasing the visitor in a way that’s jovial.
Here’s another take on the classic 404 page; this one is from TechCrunch. This one provides more of the functional solutions that are meant to really help the user along. Not only does the error page provide suggest search feature to get users on the right track, but it also offers users latest content they might be interested in.
Pro tip: Any error messages on your website need to be displayed in plain, everyday language, so that your buyers know exactly what happened. Error messages must specifically divulge what the problem is and also suggest a helpful solution.
Heuristic #10: Offer Help and Documentation
Jakob Nielsen says: “Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.”
Translation for lead gen web design: well, it is imperative that your website does not require any instructions on how to use it. Keep it simple, but do offer help. Here are a couple of ways in which you can do this:
Live chat pop ups: The best time to get your buyer to ask a question is exactly when he is researching information and the doubt arises. There are tools such as LiveChat that you can use to interact with your buyers exactly when they are browsing your site.
FAQ’s are very useful, specially when they are used to respond to common questions or hesitations in areas of the site where you are asking for an action to be taken. And the bigger the commitment you are asking for, the more questions you will have to answer. This is why FAQ’s are important to have in pricing tables, or in relatively high-commitment landing pages, such as “Get Started”, or “Sign Up”.
Pricing tables on websites can sometimes be an area that’s potentially rife with a good amount of confusion. It’s a good practice to split the overview of the different pricing plans from the complete features table. This will make it very easy for your buyers to understand at a high-level first the different pricing points, and still allow them to dive into the features included.
Here is an example, first the summary, then the features comparison table.
Another great example of help and documentation on a website can be found on the pricing tables of Zendesk, the customer service platform. Zendesk utilizes pop-up explanations to ensure their buyers understand clearly every feature included, eliminating possible doubts.
Microcopy – this is the little text that is used just at the point of conversion that either: alleviates that one hesitation that the buyer has before converting (you have to find out what that is through research), or prevents the most common mistake. This can act as a small, but very effective help/documentation.
Conclusion
Whether you are redesigning your website or going through an optimization journey, following these heuristics is simply an act of sanity. Even though these heuristics aren’t ironclad laws of web design, it’s a good place to start.
The post 10 Best Practices for Better B2B Website Experience appeared first on ConversionXL.