Steps to a More Engaging Website

The internet has become a very interactive environment for users. Websites need to be specifically built in a way that captures the attention of visitors and keeps them coming back, or they will quickly leave to go somewhere else. Here are 5 steps to creating a website that will effectively engage your visitors and tips on how to improve your UX design with a/b testing.

1. Avoid Clutter

By keeping your design free of clutter, you will make it easier for visitors to know what is most important, and there will be nothing else to distract them. Clutter can be excessive advertisements, images that don’t add anything to the page, text that is crammed in with very little white space, or anything else that unnecessarily causes a distraction for visitors.

Without clutter, what’s left is the real content of the page that is worthy of the visitors’ attention. When pages are cluttered, visitors can go in any number of directions and there is no way to know that they will be focused on the most important parts of your pages. In order to engage visitors you must be able to have better control of their attention.

I’m not a huge fan of long sales pages, but this is something that they do very well. A good sales page will have nothing on the page that does not contribute to helping with the sale. Typically there aren’t even links to any other pages. Of course, this is an extreme example, but it shows how removing unnecessary options can keep the attention on what’s most important.

2. Provide Focused Content

Now that the clutter is gone and the visitors’ attention is completely on the primary content of the page, that content has to be worthy of their attention. By creating quality, interesting content that is focused you will be more effective at keeping their attention.

In order to engage visitors and to get them involved in the ways that you desire, the content should be focused on communicating the message that you want visitors to receive. Blogs accomplish this by continually publishing information that focuses on one, or a few, key topic.

3. Give Visitors a Way to Get Involved

Truly engaging visitors is much easier when they can get involved. Today’s internet users are much more interested in participating in some way as opposed to simply reading a page. They may be interested in leaving comments and feedback, participating in a poll or quiz, playing a game, communicating on a forum, or even just by watching a video.

When visitors are involved in one way or another, they will typically develop more of a connection to the website. It is more and more common for visitors to want to be involved and feel like they are a part of something. By providing easy ways for visitors to get involved you are giving them an opportunity to become part of the community that exists around your website.

4. Let Visitors Know How You Want them to Be Involved

Simply giving visitors a way to get involved is good, but encouraging them to do so is even better. Make it clear to your visitors specifically how they can get involved and give them no excuse not to do so. Sometimes it is amazing how much better of a response you can get just by asking for some involvement.

If you read a lot of blogs, you’ll notice that those who typically receive the most comments will also be the bloggers who clearly encourage readers to voice their opinions. It’s amazing that by simply reminding readers that you value their feedback can produce such results.

5. Focus On Building Repeat Traffic

Engaging visitors and building repeat traffic go hand-in-hand, in my opinion. Visitors that get involved and enjoy their experience on you website will want to come back, and visitors that come back frequently will be more likely to get involved.

Some visitors may not want to get involved at your website on their first visit, but if you can just get them to come back again they will be a little bit more likely to get involved. Repeat visitors will typically be the most responsive, regardless of how you are hoping to get them involved.

How to Improve UX Design with A/B Testing

If you’ve kept up with design news the past 5-6 years then you should know about A/B testing. This is where two or more page designs are created and offered to a split percentage of visitors. Various metrics are tracked and designers can select a design style based on which features perform the best. It’s a wonderful technique for designers but does require some practice to fully understand.

These tips are geared towards designers who want to learn more about A/B testing as it relates to web design. Every designer is constantly trying to better himself or herself, but self-betterment takes work. You need to be confident with your existing skills and push forward to learn more about user experience design. A/B testing is just one of these skillsets which can improve your value as a web designer.

Layout Design for A/B Tests

Website design is always focused on the user. Interactive layouts are meant to be used, so the interaction should be swift and expectational.

After completing a new mockup design you’ll probably have doubts about certain areas. This is common and should be resolved through user testing – the most useful of which is A/B testing.

You can start by analyzing the layout for anything that doesn’t exactly serve its purpose. For example, take a look at individual buttons or input fields meant to drive attention. What can be done to increase visibility? What can be changed to get more people to interact with these elements?

ab split results graphic

Illustration by: Philip Clark

It helps to understand some marketing techniques to combine with your keen sense of design. Elements that need to “pop” should stand out while others need to quietly blend in.

Figure out a couple different solutions to these individual problems and think about how to best fix them. You probably won’t come up with the perfect answer right away but you can at least put together a small list of possibilities.

How To Read Measurements

Each test will return different measurements based on how many changes were made. This also means the total number of days required for accurate tests results can vary wildly.

But in general, A/B tests are simply counting the percentage of certain actions taken by visitors. Two(or more) different layouts are presented at random to your regular audience. These people don’t know about the test since they’re only seeing one type of page.

Your goal is to witness an increase in the number of visitors who perform a certain action. This action could be anything from more user registrations, to reading for 5+ minutes, or increasing product sales.

split testing flasks science

Illustration by: Daniel Máslo

Take a look at this free duration calculator to get an idea of how long your test should run. This amount will vary based on how many differences are used in your design. Each platform will display results differently, but you should mostly be concerned with percent-based increases.

Debug and Solve UX Problems

The whole purpose of A/B testing is to debug potential issues within a design. You’ll want to determine which changes could be made to the interface to improve retention rate, or to increase clicks on a call-to-action button.

Before getting into split tests it’s a good idea to analyze the design in private. Consider which features may not work in legacy browsers, or which features may require backwards compatibility. Could these features affect retention rates?

A/B tests should be used when you’ve exhausted a design mockup and don’t know what else could be done to improve performance.

form metrics ui design tests

 Illustration by: Aaron White

Aside from the actual split test results you might also try sharing your website with a small group of people to gather their opinions. This is a great strategy because you can walk away with some newfound info from a person(or people) who didn’t plan on sharing their ideas.

Debugging a design is not an easy task. It requires patience and continual feedback. When you’ve been designing something for days or weeks it can be hard to see the flaws for what they are. Take a break from your design and step away for a couple days to refresh your eyes.

Also don’t be afraid to check out what other websites are doing. You can learn a lot by studying UX techniques running on other websites in a similar niche.

Tips for Coaxing User Interaction

Some of the most common layouts for A/B testing are landing pages. These designs are meant to coax action from a visitor whether that means downloading an application or signing up for a newsletter.

It’s not easy to draw attention to certain areas of a page. This often requires some finesse and clever design ideas like icons, new flashy colors, larger text, or in rare cases rearranging the whole page. But don’t let design ideas cloud the main goal. Stay focused on what you want users to do and let the website’s design guide the user.

landing page analyzer webapp website

Visual Website Optimizer has a landing page analyzer built for this exact situation. You can gather some basic results for CTA buttons, banners, and important links.

But also keep in mind that not every user is expected to follow a marketing funnel. Social networks and forums may want users to post and reply more frequently. A/B testing can present two alternate designs and see if either one increases user activity.

The best tip for gathering helpful results is to know what you want. Understand the goals of each project and use well-crafted design to increase those goals. Numbers don’t lie so if you’re tracking A/B funnels then you’ll end up with verifiable data proving which design ideas are more practical.

Best Tools & Resources

Along with the previous tips I’d also like to share a small collection of tools for A/B testing. These tools are perfect even for designers unfamiliar with the process. A/B split testing gets a lot easier the more you spend practicing and researching.

Check out each of these suggested sites to see if their features match up with your goals. A/B testing can be great for client projects and even your own personal work. Just remember that in order to gather results you need to actually test valuable metrics.

Visual Website Optimizer

vwo visual website optimizer homepage

Designers and developers looking for a split testing platform should look no further than Visual Website Optimizer. Their website is full of case studies, how-tos, and intro guides for those just getting started. VWO has been online for years and provides an exceptionally high-quality service.

Dig into their features page which covers everything from A/B test integration to tracking statistics in the user dashboard. You’ll be able to check out which designs perform better based on your own custom metrics and even view the data in graphs or heatmaps.

Optimizely

optimizely homepage ab testing

Another credible online solution is Optimizely. Their platform is a little more complicated as it doesn’t just specialize in A/B split testing. You’ll be able to track analytics from any website or mobile app to see which areas pull the highest user interaction. You can also test how long visitors stay on each page and check to see if different interfaces alter these results.

Optimizely actually has a free plan with limited testing features. This could be a reasonable starting point for anyone who just wants to break into the world of UX tracking & analytics.

Unbounce

unbounce landing page ab testing tool

Unbounce is used much more by marketers and webmasters who don’t have a lot of technical knowledge. The platform isn’t just made for split testing, but also for launching websites and custom templates. You can build a simple landing page from scratch without any code and still gauge user reactions from different design traits.

This probably won’t be as useful to a professional designer but it’s still an option. Take a look at their A/B Testing page which includes more specific information regarding how the Unbounce platform works.

Google Experiments

google experiments overview page

Perhaps the quickest and cheapest solution for a newcomer would be Google Experiments. This is a free built-in split testing feature which runs through Google’s Analytics platform. You can find a lot of great info regarding the benefits of testing and how the results tie into your website.

You’ll want to have some familiarity with Google Analytics before jumping into Content Experiments. If you’ve never used their platform before this may present a steep learning curve, but it’s well worth the effort if you’ll need A/B testing in the future. Those who want to get started might try following along with this tutorial covering Google’s Experiments platform in great detail.

Final Thoughts

Web designers have also been pushed towards the role of developer and now even marketer. But this isn’t necessarily a bad thing because A/B testing can help you improve your design techniques. If you follow along with these tips and resources you’ll be running influential split tests in no time.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.