Powerful tools for UX/UI research and better website design

Austin Walker Austin Walker
February 4, 2020   |   11 min read time



If you’re reading this, you probably already have a good idea in mind of what you’re looking for in your marketing.

Or, you’re looking to understand more about how to empower your website. One of the best ways to do this is by studying your user experience (UX) and gauging how the user interface (UI) is affecting your website’s visitors.

Ultimately, you can get these visitors to convert more by understanding how they are utilizing your website.

Make an adjustment, add new content, make sure that stale content is removed or updated. Then update.

The good news: it’s not extremely complicated. Simplicity is genius, right?

These two concepts are commonplace in the design industry. However, they don’t mean the same thing.

In this post, we’re going to help explain the difference between User Experience (UX) and User Interface (UI). Then, we’ll cover tools that we use to better these two concepts with our own clients (and you can use for yours as well).

Let’s go ahead and move right into it.

What is UX?

User experience is a measurement of how well a user interacts with the user interface.

Think of it like the buyer’s journey. A buyer moves through the purchase of a product by identifying they have a problem, researching how to solve their problem, identifying solutions to their problem, making a selection based on what fits their needs best, then makes a purchasing decision.

If there are sticky points, or a company is having difficulty being identified during the buyer’s journey, they won’t be a part of the selection process.

When it comes to UX, this can be the same. The moment that there is a point of stickiness on a website or within the user’s navigation, they could leave the site and be gone forever.

Here are some questions that are often asked when considering UX from the user’s perspective:

Can you use it? Can you find it? Does it serve a need that you have? Do you want to use it? Do you find it valuable? Do you trust it? Is it accessible? How accessible is it?

So, ultimately, why is all this so important?

First off, the better experience that your users or visitors have, the more likely they are to make a purchase, sign up, or take action in your company’s online goals.

Even more important, is the fact that Google algorithms are set to understand and measure user experience metrics as well, and it is a ranking factor that can be seen throughout Google’s search algorithm.

It makes sense for Google to do so, considering that their search rankings are showing the links to websites that should most easily answer the query that was input into the search bar.

Poor user experience on a website could look bad for both your company and for Google’s engine results.

At this point, you’re probably familiar with RankBrain, but if not you can check out the link. This is Google’s name for the engine that takes SEO factors into account when ranking your website. The ranking factors include behavior metrics like pages per session, bounce rate, dwell time and organic CTR.

Image Tags and Headings

Image tags will help determine what an image is for both a user as well as a crawler, even if the image fails to load.

Headers on a website help someone navigate throughout the site, as well as increase their ability to scroll through to important information that is relevant to them.

Content Size

At this point, there really isn’t a “golden” number, but having content that thoroughly and adequately answers the question a visitor is asking will probably need at least 600 words.

This will ensure a better experience since with a complete answer, visitors won’t have to struggle to find more, and it saves them time.

For instance, if you have an article listing the top 10 tools, consider expanding on that topic with another article with additional tools (also a really great way to conduct internal page linking - an SEO benefit!). 

Mobile Friendliness

This one is huge. If your website is not translating well onto a mobile device, you’re going to have issues ranking, as well as getting traffic.

Since October 2016, mobile and tablet traffic has taken over desktop traffic. So what this means for your company, as well as your users, is that mobile readiness has been important for at least the last 3 going on 4 years.

One of the more difficult things is to get your website to translate well onto a mobile device. Sometimes you’re able to just have it translate well through whichever company is hosting your website, but other times you need to have someone design it for you. At that point, it might make sense to understand how to translate a HubSpot website onto a mobile device.

Page Load Speed

Here is a great ranking factor from Google. This measures how quickly your page loads when a user clicks on it.

Why would this be important?

According to Kissmetrics, most web users expect a page to load in 2 seconds or less, and for 40% of users, if they have to wait 3 seconds, they’ll move onto another page.

Imagine losing 40% of your traffic overnight.

Google actually has a speed test tool in Google Search Console that you can utilize to measure your site’s performance. Many of the other tools we discuss in our final chapter also have applications to monitor page load speed and alert you if something is going wrong.

What is UI?

In simple words - User Interface

UI designers are people that are more concerned with how a product is laid out. So for user experience designers, they’re in charge of understanding how the product feels, while the user interface designer is going to be more concerned with how everything is laid out.

For example, if we’re thinking about site structure or organizing content within a website, then we’re thinking more user interface.

UI influences how you layout a page and place certain elements. Here's where "outside of the box" and "best practices" seem to clash. Clients want something new and different, but unless you make it fully clear how something functions or what the purpose is you may just be wasting space on your web page. For example, now a "hamburger menu" is fairly common in mobile design but there was a time where users had to "figure out" what those three lines meant.

There are certain expectations most users have when viewing a webpage - this is where UX and UI meet. Remember, clarity is more important for your website visitor than being unique. 

Common UX Research Tools

We already know that UX and UI are extremely important. But why?

The better that a company pays attention and makes adjustments to their user experience and user interface, the better that they cater to their users.

And that’s important for ranking factors, as we previously learned above, but it’s also important to the business as a whole. If your company is boasting customer-centricity, it’s not possible without paying to important factors in the user’s experience.

And that’s why there is UX research and tools to measure these important factors.

There are a lot of tools out there that some people might use to help manage their content and host their website. HubSpot is one of those sites, but what kind of tools do you use if you want to understand how the content is being utilized?

So you can get started in your own user experience research, we’ve provided a ton of tools that we use, as well as others that are popular in the UX research space. We hope that you can utilize them to get an understanding of what adjustments you need to make in your own new website design, as well

Hotjar

Hotjar is a service that helps to capture multiple types of user feedback so you can turn more of your visitors into customers.

Hojar will show the heatmaps across all devices, including tablets. With this awesome feature, you can monitor the success of click-throughs, movements, and scrolling throughout every device that your company has built your website on.

With heatmaps, visitor recordings, conversion funnels, form analysis, and a ton of ways to get personal feedback from your users, Hotjar works really well for your UX research.

Visitor Recordings

Visitor recordings can be viewed within all devices, so you can understand what types of actions are being taken more seriously through each of the devices, as well as what can be improved to help your visitors have a better experience.

Watching these recordings can give you a better idea of how you need to structure your website in an up-and-coming redesign. It may also clue you into what kinds of content your website needs to continue to produce in order to keep your users active and engaged across all devices.

Form Analysis

Ever wondered which parts of your form are turning the most users away?

With the form analysis in Hotjar you can determine different percentages through each of the fields in your forms to understand what may be keeping your visitor from following through completion.

What if you could increase your form conversions by even 5%? It could be huge for your business.

Feedback Polls

Feedback polls are designed to help understand what pain points your visitors are having while taking certain actions, so you can better understand how to improve their overall experience.

With Hotjar, you can even custom design the questions to get feedback from specific users or even very specific points within each of your website’s devices.

Incoming Feedback

With their incoming feedback tool, you can get instant visual feedback on what aspects of UI your visitors are most happy or most upset with at any given moment.

A/B testing certain designs can only take you so far. When it comes to understanding how a certain design is making your visitors feel, this is a great tool to get that feedback. Since you can make changes and get feedback almost instantly, it allows for you to be able to make changes, or even just better understand what type of interface your users are expecting from your website.

Surveys

With surveys, you can get feedback directly from your visitors. What better way to help understand what issues they have or even what aspects of the flow of your website they like?

In Hotjar, you can visualize each answer by the question. That gives you the power to get a quick understanding of what the answer to your hypothesis might be.

Second, with the ability to ask users for feedback easily across all your platforms, getting quick feedback from your visitors is simple.

Usertesting

Usertesting is a great resource to have real people give feedback on your website. This company has compiled a huge database of users that are paid to test out website changes, give feedback on design and all a variety of other tasks related to the UX/UI of your website.

Similar to Hotjar, you can see your visitor’s experiences through screen recordings. The benefit of using Usertesting is you can not only test your existing site but can also test wireframes and prototypes even before the code phase.

With a lot of development, one of the big things that can really go wrong is you end up building a site that no one wants to use or doesn't connect with your ideal audience. Test your copy and test your functionality - be sure what you envision is really what your audience needs.

By utilizing the paid testers within Usertesting, you can ask questions to understand what your potential audience is facing before you even make a decision to put your developers to the task. This provides you the opportunity to address what solutions your users are looking for and whether or not your concept is driving the value of your solution home. This saves time, money, and a lot of unnecessary failures.

Use Response

One element of user experience is your customer support. Providing lightning-fast customer service not only provides a better experience but is also a fantastic way to collect data on the challenges you may not even realize your website (or even your product!) may be experiencing.

Use Response has several types of solutions for upping your customer service game and gathering data for fixing the most crucial elements.

Feedback Software

With feedback software, users can anonymously give feedback or suggestions to a company about how to improve their products or service.

The feedback is added into a project management portal so that certain stakeholders can be involved in what to do with the new information. The projects can also be hidden if it's not fully ready for those same stakeholders' eyes.

It's a great way to keep the entire team on task with what they need to do to help improve visitor satisfaction, as well as keep your inbound users happy.

Help Desk Software

Help Centers have been behind part of the automation aspect of customer support software. Think of it as a huge FAQ center. For the concerns and questions about how to use your products or services, pricing, or even just what others are saying, the help center helps keep your phone lines mostly open for what's important: sales.

For any of the concerns that aren't being fulfilled by the automated side of the help desk, the company's AI will help direct an inbound concern to a help agent to get more immediate help.

Live Chat with Messengers

Facebook Messenger and Skype have been effective communication methods for years. And that's why it's important to have them, as well as many other communication platforms, available for potential customers to reach out on.

Software provided by Use Response includes the ability to have a platform that will translate conversations from all of the different services regardless of the device that a user is on, as well as the operating system that it uses such as iOS or Android.

The software also provides canned responses to some of your potential customers' questions, as well, so that you can keep your agents open for leads that are ready to close, as well as put more people into the pipeline who are interested in using your products.

Google Forms

Google Forms allows you to create and manage surveys for customer responses or even employee responses for free. All you need is a Google account. Whether you're asking for feedback about certain tools that you provide or you have questions regarding how the service you provide is doing, these forms work pretty well.

The interface is pretty easy to use. You can certainly customize one of the forms to receive feedback, or even just use one of the WYSIWYG forms if you're looking to just get it done quickly.

One of the best things about this service is that the data collected in the responses is stored in the cloud, so you can access and analyze the data in detail from anywhere in the world. Since the forms are a Google product, they easily integrate with Google Sheets, allowing for mass amounts of data to be downloaded and utilized within the spreadsheet program.

There are a lot of services that do the same thing. However, with Google Forms, you'll find that there is no charge for a specific amount of questions or how many respondents are in the survey. It continues to remain free.

Typeform

Another way to collect feedback via a form survey is through Typeform.

A more visually appealing form provider, Typeform can provide a more “conversational” style to collecting feedback. With conditional logic, you can create a way to segment your data collection.

With Typeform, there is more freedom to design a really great experience for the user, but also provides a really great experience for your business by seamlessly integrating with other apps such as Slack, HubSpot, Google Sheets, and a host of other applications.

Conclusion

The tools noted here are really just the tip of the iceberg. Gathering feedback, both quantitative and qualitative, will help increase both your UX and UI experience. Better data provides a better way to strategize and make intelligent decisions for a website redesign or your ongoing website growth.

Ready for your own website design? We can help you create a website strategy that gives your website a boost not only with your user experience but optimizing your site for better performance.


Website Content Planner Guide

Download our Website Content Planner Guide to help kick off your HubSpot website redesign project!

Download Now ›

HubSpot Website Content Planner

Want more? Subscribe Now!

Free Design Assessment