27 UX Principles
27 UX Principles
Principles
and Psychological
Concepts to Improve
Your B2B Website
MU
SIC
List of chapters
Introduction 03
Final Thoughts 36
Is your website costing you customers? Nearly half of all consumers switch brands
due to a frustrating user experience. UX goes beyond simple usability; here are
48 %
of visitors determine the
web design.
Source
57%
of visitors won’t recommend a
designed website.
Source
49 %
of consumers have left a brand in
experience.
Source
52 %
of US consumers sometimes or
Source
This ebook discusses 27 UX concepts and psychological principles with tips and
examples that could be used to enhance the experience on B2B websites. Grouped
into the following five clusters, each of these focuses on a different aspect of user
experience:
Picture yourself strolling through a lively marketplace, trying to make sense of the
maze of stalls. That mental effort you're putting in! It’s akin to cognitive load in UX
terms – the mental power visitors need to process information and navigate a
website smoothly.
How to leverage it
A smaller cognitive load means a seamless experience for a website visitor that
doesn't require mental gymnastics. To reduce cognitive load, employ crystal clear
copy, vibrant color cues for key elements, and simple navigation structures.
Example
One great example of lesser cognitive load is the homepage of Semrush, a well-
known online marketing tool. Their clear and concise headings tell visitors exactly
what the platform offers, ditching the jargon and fluff. The contrasting colors of the
background and the key CTAs make the first impression a breeze to process. They
even throw a slider showcasing established clients, subtly conveying the platform's
authority. This is one great example of ensuring visitors get the crucial information
they need, all without a mental sweat.
You probably must have flipped through a magazine, gliding past ads without truly
registering them. It's akin to banner blindness on a webpage – visitors either
consciously or subconsciously ignore the information in banners as they scroll.
How to leverage it
On your B2B website, you might have banners promoting new eBooks or free trials.
To sidestep banner blindness, consider placing them strategically where visitors
have completed their intended task, and reading the banner is the next natural
step.
Example
HubSpot, the famous CRM platform, cleverly positions an eBook download banner
at the end of a blog post, all related to the same topic. It blends seamlessly into the
content flow, feeling like a natural extension. Plus, the banner provides concise info,
making it easy for visitors to understand the offering at a glance.
When someone visits your website, they often have their own set of beliefs and
preferences. Confirmation bias kicks in, leading them to focus on info that aligns
with what they already believe or like, while possibly overlooking other content.
How to leverage it
You can tweak the website copy to match users' opinions and pain points to
Example
confirmation bias. If you visit their homepage, you'll notice the copy resonates with
the mindset of their target audience: small businesses. These folks often find
content creation and distribution to be a real time drain. Buffer cleverly confirms
this sentiment right off the bat. Then, as you scroll down, they showcase how their
platform can help alleviate these pain points. It's a brilliant strategy to affirm
visitors' opinions and entice them to keep scrolling for more info on their features.
When visitors land on your website, they respond to information or follow steps
they're already familiar with, which is called familiarity bias. It's like sticking to the
How to leverage it
You can harness familiarity bias when designing website layouts, setting up
navigation systems, placing CTAs, adding standard industry jargon, and choosing
icons. On top of this, a brand with good outreach can even use brand color, fonts,
and logos to create familiarity bias. It helps visitors grasp things easily and
Example
Check out the homepage of Surfer, an SEO tool. When it comes to B2B tool
research, most people head to review platforms like G2. They tend to favor tools
with high G2 ratings. That's why Surfer smartly placed the G2 logo at the top, along
with their ratings and number of reviews. It's a quick way to leverage familiarity bias
It’s a cognitive bias where visitors remember the exceptionally great or bad
moments they've encountered on your website, along with the final moments
before they leave. It's as if those moments stick with them, coloring their overall
How to leverage it
Make sure to mark out the high points in your website journey, like the moment
users fill out a form – that's your "Peak" – and the final step, such as the thank-you
page, which marks the end of their journey. Spruce them up with lively illustrations,
animations, vibrant colors, cheerful victory images/text, and widgets to make them
Example
Check out Mailchimp, the famous marketing platform: When existing users are
crafting an email campaign and crafting the subject line (peak), a handy pop-up
appears on the side with a checklist of best practices. It ensures the copy ticks all
the boxes, giving visitors peace of mind that they're on the right track, and making
the whole experience a delight. In the end, users do get a positive heading of “Nice
You're packing for a trip, and the items you packed last are the ones you remember
most vividly. That's like recency bias – our tendency to have a bias towards things
that happened or were seen most recently, almost as if they're shining brighter in
our memory.
How to leverage it
In UX terms, you can make the most of it by placing important info just as visitors
are about to leave your site. Start by adding promo codes, the latest product
updates, and client quotes on the thank-you pages. It's a great way to make sure
they remember a piece of crucial information.
Example
Rocket Agency, a digital marketing firm from Sydney, knows how to leave a positive
memory. They feature client quotes on their thank-you page, showcasing their
stellar track record and giving new leads a confidence boost. It's a smart move that
sets the stage for the next step and keeps the momentum going.
When you meet someone new, your first impression counts, right? Well, the same
goes for your company's website. The anchor effect is about visitors making
judgments based on their initial interactions, even if it's not the whole story. This
initial judgment can stick with them and influence their decisions down the line.
How to leverage it
Designs can leverage this by showcasing unique selling points, pricing advantages,
customer base, or best-selling products right in the first fold of the website.
Example
Take the example of Intercom, the well-known customer service solution platform.
Its first-fold copy makes it clear that the product is AI-powered, promising to
enhance and automate customer service. This initial impression showcases
Intercom's unique selling proposition: using cutting-edge technology to improve
customer service. Such details can significantly shape leads' perceptions as they
explore solutions and consider the product.
It's that moment when visitors realize your software or product's value and go, "Oh!
So this is how it works to solve my problem."
How to leverage it
For your B2B landing page, you can create an Aha! Moment by embedding a live
playground to explore the product and videos showing the product in action in real
situations.
Example
VWO Rollout - Web is a website editor that lets you tweak website experiences
without diving into a single line of code. On its landing page, there's a live
playground where visitors can effortlessly explore all the editor's features. This
triggers an Aha! moment for them, helping them grasp the tool's value and how it
can streamline processes by eliminating coding dependencies.
Think of it like a journey from what visitors already understand to what they're
itching to discover. It's that gap where curiosity sparks and drives them forward.
How to leverage it
You can harness this on your B2B website by crafting the copy or website
experience in a way that leaves visitors intrigued, eager to learn more, and
compelled to keep scrolling down or click CTA out of curiosity.
Example
Brian Dean from Backlinko is a pro at using the curiosity gap to reel in leads. In his
gated content, he hints at revealing the exact strategy to rank #1 on Google, and
even throws in a success story about a competitive keyword like "list building." By
dropping phrases like "exactly" and "step-by-step," he suggests a detailed,
actionable guide, sparking readers' interest and nudging them to share their email
for more insights.
Think of it as bringing home a souvenir from a memorable trip. When web users
have something tangible from your website, it's like holding onto a piece of that
experience. They're more likely to see value in it and be willing to invest in keeping
or expanding on that connection.
How to leverage it
There are various ways to leverage the endowment effect, and one of them is by
offering free courses on industry best practices, tool usage, etc., and providing
certificates upon completion.
Example
Canva's Design School is a creative hub offering a variety of courses in design.
Here, learners can grasp design concepts and put their lessons into practice
directly on Canva. This hands-on approach means that those initial designs created
on Canva hold a special place for visitors. Moreover, it honed their skills with the
tool, paving the way for its continued use in future projects.
Imagine it's the start of a new year, and you're at the gym, feeling energized and
ready to tackle your fitness goals, despite past attempts that didn't quite stick.
That's the fresh start effect in action. It's like a wave of motivation that washes over
visitors, propelling them toward their goals whenever there's an event like the dawn
of a new week, month, or year.
How to leverage it
Adjust the landing page copy or visuals to encourage users to take the first step
with a fresh start. This messaging can be done for periodic campaigns for events
like the New Year or the start of a new week.
Example
Coschedule, a marketing planning platform, subtly leveraged the fresh start effect
with its email subject line tester. The hint text in the field "Start off your new year
right" gently encouraged users to test their subject lines for upcoming campaigns
on New Year's Eve, allowing them to make improvements and kick off the new year
on the right foot.
Think back to when you were a kid, and your parents got you to eat veggies by
turning it into a game. It's kind of like that with websites. By adding interactive
elements and animations, you're bringing a gaming vibe to your site, nudging
visitors to take action and reach their goals.
How to leverage it
You can do this by adding leaderboards, badges based on usage, quizzes, or a
scratch card in return for email input. These elements not only guide visitors toward
their goals but also make the experience fun and rewarding.
Example
Trailhead by Salesforce is a prime example of gamification done right. It rewards
users with points, badges, and leaderboard rankings as they progress through
courses. What's more, course takers can flaunt these badges on social media and
resumes, adding to their professional credibility. This approach not only boosts
course completion rates but also expands Salesforce's pool of skilled professionals.
Finding a $20 bill as a gift—sure, it makes you feel a bit brighter. But losing a $20
bill from your wallet feels far worse. Likewise, Loss Aversion in UX explains that
website visitors feel more upset about losing something than they do about the joy
of gaining something.
How to leverage it
This concept can be leveraged on a website by highlighting scarcity like “Only 1 left
in stock”, offering a full-featured trial, negative framed copy, or incorporating
features like a daily streak bar for specific tasks. This approach motivates visitors to
take action, as they don't want to miss out on something valuable.
Example
LeetCode, a programming learning platform, cleverly taps into the concept of loss
aversion with its streak bar feature. When users log in, they can see how many
consecutive days they've been active—like a streak of 157 days. This visual
reminder motivates them to keep learning and practicing to avoid losing their
streak.
It is like walking into a coffee shop, where the cozy atmosphere and friendly service
make you smile. This concept is about creating that same delightful feeling for
visitors through their website experience, leaving them with a positive image of
your brand.
How to leverage it
Visitor delight can be achieved on different levels. On a visceral level, visitors feel
joy from engaging animations and images in the interface. On a deeper level, delight
comes from the ease of completing tasks on the website, such as filling out a form.
Example
Asana, the project management tool, delights users with charming creature
animations. Every time a user marks a task as complete, one of Asana's five
adorable creatures appears, flying across the dashboard in celebration. This small
touch of joy makes users feel delighted each time they complete a task.
A visitor reward is enticing visitors to explore and take certain actions. The trigger,
or clue, is the promise of a reward waiting to be discovered. It's about motivating
visitors to engage by offering them something special in return for their actions.
How to leverage it
Rewards can come into play at critical conversion moments like sign-up, the first
use of a service or product, and even during the retention phase when visitors
might not use the product as often after onboarding.
Example
Postfity, a social media scheduler, tapped into the user rewards concept to lure
website visitors into signing up. They crafted a checklist of steps for sign-up
completion, promising a reward of "50% off" once finished. Additionally, you can
also see the application of the law of minimal effort concept, which we will discuss
in the upcoming section.
Imagine it's a busy morning commute, and you're navigating through traffic, always
opting for the quickest route to get to work on time. Similarly, the concept suggests
that visitors to your website naturally gravitate towards the easiest route to
accomplish their tasks. It's like finding the shortest, smoothest pathway through a
maze, minimizing the number of keystrokes or clicks needed to reach their destination.
How to leverage it
For a B2B website, you can make the most of this idea by simplifying text-heavy
sections, blending in light text with icons, and ensuring seamless sign-up with a single-
sign-in option via existing Google or any social media account. Additionally, providing
multiple options for a field instead of a text field in a form can enhance user experience.
Example
SurveyMonkey, the famous survey tool, exemplifies this perfectly. From sign-up to
creating your first survey, it minimizes user effort. For instance, during sign-up, you
can choose any SSO option, avoiding the hassle of manual entry, making the
process effortless, and boosting overall visitor motivation and engagement.
Much like climbers gaining momentum and determination as they ascend, the goal
gradient effect shows that people exert more effort as they near their goal.
How to leverage it
You can make the most of it by adding a progress bar to your lead sign-up form or
setting up milestones that users can achieve by completing specific tasks.
Example
Neil Patel's website skillfully employs the goal gradient effect. He kicked off by
presenting visitors with a clear objective: a "7-week action plan to increase traffic."
As visitors start filling out the form, a progress bar indicates how much more they
need to complete, spurring them on to finish the form and unlock the full action
plan.
Imagine starting a jigsaw puzzle and then leaving it incomplete on the table. That
unfinished puzzle sticks in your mind more than a completed one. This concept is
about how we tend to remember unfinished tasks better than the ones we've
already completed. It's like the incomplete pieces keep nagging at our memory.
How to leverage it
The Zeigarnik effect can be harnessed during the sign-up process by alerting
visitors to unfinished tasks using widgets like checklists or circular progress
indicators. You can also use an enticing CTA, such as downloading an ebook, which
then reveals a lead capture form.
Example
Costar Video Systems, an electronic surveillance provider, effectively leveraged the
Zeigarnik effect on its software page. Instead of overwhelming visitors with a direct
lead form, they invite them to click a download request button. This simple action
initiates the task, leading to a lead form to download the software. Here, a task gets
initiated with minimal effort, making visitors feel more obligated to complete the
form because it's now unfinished.
Think of it like standing in front of an ice cream counter with dozens of flavors. The
more choices you have, the longer it takes to decide. This psychological concept
explains that when visitors are given more options, they spend more time making a
decision.
How to leverage it
During onboarding, it's essential to streamline the process by reducing the number
of CTAs, grouping options into clear categories, and minimizing form fields.
Example
Notion, a productivity software, cleverly uses Hick's Law in its onboarding process.
After signing up via SSO, you're presented with a simple question and just three
options, all within a minimalist design. Once you make your choice, you're taken to a
page with multiple ways to use the tool. From there, you're directed to a
personalized dashboard. This streamlined approach makes the onboarding process
smooth and user-friendly.
At some point, you must have got a new gadget and skipped the instruction manual
to start using it right away. On similar lines, this concept suggests that visitors
prefer to dive in and use the product immediately rather than reading a manual or
taking a product tour.
How to leverage it
Instead of using a product tour, you can opt for alternatives like tooltips, chatbots,
or a get-started checklist. These options let visitors explore the product at their
own pace and provide answers when needed in a non-intrusive way.
Example
Shopify, the well-known e-commerce platform, has a seamless onboarding
process. Once visitors sign in via SSO, they're asked a few questions about why
they're using Shopify. Based on their responses, Shopify provides a personalized
checklist to help them get started. This way, visitors get a product tour that's
smartly integrated and non-intrusive.
Imagine you're walking through a forest and come to a fork in the trail. One path is
clear and well-trodden, while the other is shrouded in fog. Most people would
choose the clear path where the outcome is known. This cognitive bias means
visitors tend to avoid ambiguous paths, preferring those with predictable results.
How to leverage it
It's crucial to let visitors know upfront what to expect after they follow a certain
process, like user onboarding. This can be done through clear text or visual cues,
helping them understand the outcome of their activity and reducing any uncertainty.
Example
Here's how Drift, a conversational marketing platform, reduces ambiguity during
user onboarding. At each step, users can see on the right side what will happen
after they fill out the fields on the left. Additionally, the subtext of each heading
clearly explains the expected outcome. This approach minimizes confusion and
gives users a clear idea of how the product will function in practice.
You're at a restaurant and you see many people ordering the same dish. You're
likely to think it must be good, so you order it too. Social proof is like that—it
influences visitors' decisions by showing them what others have chosen or
recommended.
How to leverage it
You can showcase your client base and prominent brand logos on your B2B
website, or you can use social proof to address product misconceptions.
Example
WordPress.com cleverly uses social proof to dispel common misconceptions that
it’s not suitable for enterprises. This section features logos of prominent brands and
provides detailed explanations of why these enterprises chose WordPress.com,
effectively addressing potential leads' concerns.
This concept means visitors are more willing to comply with a small request, and if
they feel good about it, they'll be more likely to trust you and agree to a larger
request later on.
How to leverage it
You should ease visitors into making small commitments to build trust. Start by
asking them to watch a quick two-minute video or sign up without requiring credit
card details. This way, you won't overwhelm them by asking for a larger
commitment right away.
Example
SparkToro, an audience research tool, smartly offers visitors five free searches just
by signing in with SSO, without asking for credit card details. This small
commitment lets visitors explore the tool, and if they’re satisfied, they can opt for a
bigger commitment with paid plans.
When you're choosing a new book and see a glowing review from your favorite
author, you trust their opinion and are more likely to pick that book. In the same
way, visitors often rely on recommendations and advice from authoritative,
knowledgeable sources when making decisions.
How to leverage it
You can leverage the authority principle by featuring quotes from industry experts
about your product or service in the first fold of your landing page. Another
effective approach is to include badges and awards from authoritative market
research companies.
Example
The Interaction Design Foundation (IxDF), an online design school, leverages the
authority principle by showcasing quotes from Don Norman, one of the most
influential figures in the design field. This strategy helps visitors assess the
credibility and quality of IxDF courses, making it easier for them to decide to enroll.
When you're in a store and notice a security camera overhead, you might straighten
up and act more carefully. Similarly, visitors change their behavior when they know
someone is watching them.
How to leverage it
When gauging user experience through methods like surveys, it's crucial to craft
questions that subtly extract insights. For instance, instead of bluntly asking, "How
was your experience?" you could inquire, "Could you share any thoughts about your
recent encounter?" Similarly, when conducting A/B testing to test user experience,
it's essential to minimize the chances of users seeing the original version before the
variation. This can be achieved by implementing an anti-flickering snippet or opting
for server-side testing.
Example
Human Interest, a 401(k) provider catering to medium and small businesses, opted for
server-side testing on a paid campaign landing page to mitigate the Hawthorne effect's
influence. This approach ensured more accurate results in their A/B testing efforts.
Control
Variation
Think of it like a challenging puzzle hidden within a treasure hunt. This concept
involves strategically placing obstacles in the visitor's path, not to frustrate them,
but to enhance their overall experience. It's like adding twists and turns to a thrilling
adventure, making the journey more engaging and rewarding.
How to leverage it
Intentional friction can be strategically applied through pop-ups to double-check
actions like profile deletion, sending campaigns, or sharing sensitive information.
Another effective tactic is to incorporate exit-intent pop-ups, encouraging
departing visitors to reconsider their decision before leaving.
Example
Picreel, a pop-up builder tool, incorporated an exit-intent pop-up that urges users
to pause and explore how they can achieve impressive growth with the tool. The
catchy headline, coupled with a results-driven subtext, can effectively prompt
visitors to reconsider before exiting.
But to choose the right UX concept, you must first practice behavior analytics. It
involves tracking visitors' scroll movements, click patterns, and mouse flow, which
helps you understand areas of pain and opportunity.
For instance, click patterns and mouse flow might reveal visitors ignoring the form
field on your landing page. In response, you could create a campaign using the
Zeigarnik effect to hide the form field behind a download CTA button, just like
Costar Video Systems did.
Even after optimization, you should conduct behavior analysis to check if the
changes have improved the user experience. This approach ensures that your user
experience optimization process is strategic rather than random.
When it comes to behavior analysis, VWO Insights is the right tool for the job.
Heatmap
Surveys
Form analytics
Scrollmap
6% 34% 90%
Revenue Form Submissions Purchases
34% 43%
Purchases Bounce Rate