Calls to action Use the right imagery that works for your audience. Create mobile-friendly. Can your visitors determine what your business does? If necessary, could users easily access the blog? Is it simple to comprehend your pricing layout? Do you have a low bounce rate on your website?
If you say “no” to any of these questions, it might be time to reevaluate how your website has been designed and optimized.
When a website’s design integrates with your website’s user experience, functionality, and content, it truly shines.
Even a professional website designer can easily overlook these updates, believing they are the lowest priority on your list of website priorities. On the other hand, a successful website has content that performs well and a great user experience, so your design should go above and beyond.
When you spend time writing great content for your blog or service pages, the last thing you want is to be noticed because of design flaws, navigation issues, confusing layouts or missed conversion opportunities.
However, numerous subtopics fall under the umbrella of website user experience, and it can take time to comprehend all of them while determining the most pressing issues to address.
Here are 12 website tips to ensure your redesign goes in the right direction and won’t turn visitors away.
Join the IMPACT coaches in our monthly, free virtual event series for a comprehensive look at a brand-new subject.
1. Have a plan. Now that you know that your website needs some changes, it’s time to work backwards and plan how to fix them.
The first step is to outline your customer journey, which spans the initial visit to your website through the time they become customers.
Think about the pages they will view, the content they will read, and the offers they will take advantage of when you do this. You can design a website that helps nurture leads through the sales funnel if you know this.
Lead feeder’s customer journey map has always impressed me as an excellent illustration. Of course, you don’t have to be as graphic as they were, but it conveys the message. It shows what users do when they visit their website and what similarities exist between those who buy from them and those who don’t.
Lead feeder infographic You always have the option of interviewing your customers if you need help compiling this data or if you do not have a CRM that would make researching this easier.
The next step is to create a strategy using this data. This will assist you in determining the most critical areas of your website where users interact.
You should be able to sketch out the feelings, thoughts, objectives, difficulties, and opportunities that each touchpoint elicits.
Your responses to these questions will guide your design. For example, is the imagery the most effective way to address these issues? What about a specific colour scheme? Starting work on your customer journey map will help you answer these questions and make your design stick out more.
2. Reduce friction and eliminate distractions. Some aspects of your website will hinder your efforts to convey the value and message. Examples include complicated animations, lengthy content, and “stocky” website images.
With an audience that only has an eight-second attention span,
This starts with ensuring that your brand guidelines are consistent and can be used as a basis.
Your imagery, iconography, logo usage, font styles, and colours should all be described here. When designing pages, brands can easily struggle without this. You will likely see arbitrary colours and various font styles and sizes. This, in turn, has the potential to visually confuse people trying to convert or distract them from your message.
Additionally, limiting the number of on-page animations or interactions is essential. It can be overwhelming and distracting for people to read a page when they see every button pulsing or section of icons with distinct animations.
Let’s take the website below as an illustration. Note that because I intend to use this more as a criticism, I have removed the brand’s logo from the image so that they can maintain their anonymity.
Eliminate friction and distractions 1 When I first looked at this website, the colours were the first thing I noticed.
One reason is that the way they are used makes it difficult for the user to determine where their eye should be directed. For example, should one of the two red buttons be the one? What does the hello bar entail? Or the navigation’s top?
When visitors arrive at the page, you must decide in what order you want their attention to flow naturally and where it should go. To accomplish this, the current colour arrangement causes friction.
Second, there are some places where the spacing is off. For example, the “you!” hanger in the hello bar creates a second line that could be easily fixed by increasing the container’s width around the text. Additionally, the H1 is not precisely vertically centred in the white space, directing your attention away from the main message and toward the word “issue.”
They begin with a button that lacks many contexts and appears sandwiched between an image and a grey section below the header. As a user, I wonder if it’s supposed to be directly related to the image or if it’s supposed to have space below. Did the site not load properly? This internal debate causes conflict and ambiguity.
Let’s look at a page that adheres to brand guidelines and provides a better user experience.
Reduce friction and eliminate distractions 2 Communication Square is a different IT company that can be found atop this page. At first glance, this website has a much simpler design, with fewer bright colours and white space.
I like that Communication Square has two button colours: one for lower-priority actions at the top or middle of the funnel (blue) and one for lower-priority actions at the bottom (orange). Consequently, I immediately focus on the orange, representing the more urgent action they want me to take.
Additionally, their fonts seem much more cohesive. There appears to be only one font family, which can be used in bolded, medium, or light weights. This makes everything work well together and creates uniformity.
In general, there is little room for distraction in the hero image. In addition, the content can stand out rather than blend into the hero image because it is masked with a white overlay and is not overly detailed.
This detail can make or break your website as a whole. It helps users understand what you want them to do and leaves less room for confusion like Aimsolutions.
3. Add social proof. If you shop on Amazon, like most people, you prefer products with mainly four- to five-star reviews from people who have used the product.
When we read these reviews, we have more faith in the product’s ability to fulfil our needs and promises, prompting us to purchase it.
Your website and your product or service both have the same effect. According to studies, your prospects are 58% more likely to purchase your product if they view persuasive testimonials written by real people.
However, how should your testimonials appear visually to instil trust in your customers when they see them effectively?
Well, you can use a few different tactics. But first, you must decide whether you want a video or text testimonial. Video testimonials have historically been found to be the most effective. This is because the medium naturally holds the user’s attention for a longer time and fosters a more robust human connection by allowing them to hear voices and see the faces of real people.
However, you can also use text testimonials, which, if designed and incorporated correctly, will still assist in establishing trust with your customers.
Upland Adestra is a UK-based provider of enterprise email and marketing automation software. Their testimonial page has four videos, each with its section.
Video social proof Upland separated the videos and accompanied each one with a header and a sentence outlining the client’s outcome or benefit from working with Upland rather than randomly placing them next to each other. Users now have context for the topics covered in the videos.
Additionally, some videos feature thumbnails of people speaking, which visually reassures users that they will likely hear directly from the client rather than watching a text-based video.
If you don’t yet have video testimonials like Upland, you already have a case studies page where you can explain everything you did to help your customers in detail.
On its website, Zenefits has done a great job of this.
Benefits case studies Rather than using stock photos or just a picture of their logo, each card is designed with an image highlighting company employees.
Additionally, because they have five testimonial pages, they have added a filter at the page’s top that lets users filter by industry or solution type. As a result, users can now find the case studies they want more quickly.
Zenefits filtering Lastly, if your website only has text testimonials and no case studies, you must be careful when designing them.
For instance, you cannot simply include a name and a collection of text testimonials. Because of what this person looks like (for visual confirmation that this person is likely natural), these will be less likely to be taken as true.
On Drift’s website, take a look at this testimonial section.
Consider including testimonials on your website’s homepage, service pages, or a dedicated testimonial page that is part of your navigation. Each of these pages is the best point of contact for people interested in learning more about your company or considering purchasing.
Testimonials will improve the user experience of your website and build trust with potential customers before they become customers, provided that they are genuine.
4. Adopt calls-to-action After your visitors arrive on your website, most likely via the blog or home page, you must direct them to areas of the site that will assist in converting them. Make this easy for people because they are lazy. Help them find what they’re looking for by pointing them in the right direction.
Utilizing requiring action and at the bottom of your website
However, keep your buyer’s journey in mind. On your website, it’s simple to bombard; however, if a person isn’t ready to buy, they probably won’t do anything at all.
Instead, it would be best if you adapted to the user’s current location based on the page they’re viewing.
For instance, if people read about the materials used to build a custom closet on a website, they are probably still learning about their issue. Give them a link to a comprehensive guide on custom closet building materials instead of a “contact us” call to action. Because it’s their current concern, they’ll be more likely to convert.
Consider an actual illustration of this.
It is its title. If you’re reading this, consider redesigning your website and figuring out if it’s the best option. Therefore, it makes perfect sense to demonstrate a call to action that will assist them in learning more about it.
Our offer to them is a comprehensive guide to redesigning your website in which they can locate nearly all of their questions.
Cta Offering deals of this kind also helps you build customer trust. They will begin to see your company as a thought leader if these efforts are made to educate them, making them feel more at ease researching your services.
5. Utilize the appropriate stock images. We always advise using original photography for your website; however, if that is not an option, some strategies can assist you in selecting the appropriate stock photo.
Although using stock photos saves you time over creating your own, many websites offer cliched imagery. You’ll also find numerous other websites displaying the same images, which certainly hurts your credibility.
when converting, reducing trust and adding friction.”
Therefore, steer clear of these cheesy images when selecting stock photos. Instead, these are the pictures of people giving high fives and smiling too much, looking at the camera, groups of executives dressed as superheroes, and groups of suits jumping in the air.
When was the most recent time you saw people in these situations?
Instead, look for pictures that show well-lit, realistic scenes. Examples are overhead shots of people typing on a laptop, drawing on a whiteboard in an open room, or business-casual office workers conversing over a meeting table. Other people will begin to recognize these scenes as legitimate. Instead of studio shots, look for candid ones and ones taken in real-world settings.
Therefore, instead of using images like these:
Bad stock image-min Bad stock photo-min Bad stock photo 2-min For images that, for the reasons mentioned above, seem too good to be true, try looking at photos like these:
Good stock photo number three excellent stock image or this:
Good stock image 2: Once you find a photo like this that you like, you should run it through TinEye to see how many websites are using it. If the number is in the thousands, it might be best to use a more unusual photo.
This will help your brand become more realistic and ensure that the images match who you are and what your content explains.
If you need help producing more realistic photographs for your website, you can also check out this article for some fantastic suggestions for stock photo websites.
Your brand and how you want others to perceive it will be better represented by your photography if you are more mindful.
6. Organized navigation Navigation is essential when designing your website. It is the map that shows the most critical places that users can go. It’s how visitors quickly delve deeper into your blog, products, services, and other areas.
A website with a straightforward and organized navigation interface is better. However, it can be difficult for your visitors to find where they want to go if you use poor design practices like overstuffing your navigation, using hypertext that needs to be more straightforward or more transparent and not being organized.
Users will only stay on your site if they can find what they’re looking for. Instead, they will almost certainly leave and look for a rival that provides a more satisfying user experience.
It’s essential to ensure your visitors can easily find what they’re looking for when you improve your website’s navigation. This would include responsive design, simplified content, a hierarchy of navigation options, and minimal mobile experience changes.
Take, for instance, Zendesk’s navigation, which includes the most crucial information on its website. Services, resources, prices (which must be included), and products.
Zendesk navigation Every nav item has plenty of space, making it easy to see where the separation is.
In some instances, like the one in the image above, the menu item will even include a descriptive line to explain the page’s purpose better. The hover effect also makes the user aware that these links will take them to a different page.
Users can easily access these locations with just one click, so ensure that you employ a similar strategy (without overwhelming your navigation).
This transparent and well-organized navigation shows the user that there is nothing to hide and that you want them to move around your website quickly. As a result, your users are more likely to visit more pages during their session, which increases the time spent on your website.
7. Allow your visitors to scroll on your homepage. We used to be wary of making our website pages, especially your homepage, too long. Because of this, people were forced to try to fit as much as possible into the screen size most people use to view their websites because they were afraid people wouldn’t scroll.
However, those times have passed. According to the Nielsen Norman Group’s most recent study, 74% of people spend most of their time viewing a website page in the first two screenfuls, up to 2160 pixels horizontally. Therefore, creating a more robust experience below the fold need not be feared.
Make use of the space on your homepage to your advantage.
A good guideline is to have three to five sections that help point new and returning visitors to the essential parts of your website.
How should these sections be structured? This list could go on forever, but here are some quick highlights of some of the most important aspects:
Video introduction to the value proposition, a look at the services and features of the product, information about your company, testimonials, case studies, and success stories. Content Zenefits hits many of these points very well.
Benefits 2’s homepage features a user experience that provides a brief overview of the tool, testimonials, platform features, and a call to action for a demonstration.
Users understand what Zenefits can do for them and how clients have enjoyed using the platform by the page’s conclusion.
If you want to learn more about the structure of the best homepage, check out this awesome infographic or this in-depth article that explains other important homepage features that need to be covered here.