Tips and Tools For Improving Your Website UX
November 11, 2019
You want your website to provide a user experience (UX) that is intuitive, reliable, fast, and engaging, but in order to provide that experience, you’ll need to have a deep understanding of users, what they need, what they value, their abilities, and their limitations—while taking into account your business goals and objectives.
UX best practices promote improving the quality of the users’ interactions with and perceptions of your product or service, and there are many things you can do to improve the UX of your website, such as:
- Utilize white space effectively
- Optimize your page speed
- Use attractive calls to action and hyperlink differentiation
- Segment key information with bullet points
- Use images wisely
- Include well-designed and well-written headlines
- Keep webpages consistent
- Catch all of your 404 errors
- Make sure your website is responsive and mobile-friendly
Other UX Considerations
Make Them Feel Something: You want a design that focuses on the user experience, knowing that users often forget the data and salient points of content but will remember how a website made them feel. Synergize graphics, layout, and text along with your information in order to provide an experience, rather than just dumping a bunch of data into a user’s lap. Modern websites contain more visual and interactive qualities in order to spark that emotional response and stand out from all other websites.
Scannable Website: No website is read thoroughly from top to bottom. Folks scan the content for the information they’re looking for and dive deeper once they find what appeals to them. Breaking up text with headers, bullet points, visuals, or graphics makes for better UX.
Simplicity and Clarity: Keep your website simple and make clear what you want folks to do. Utilize the same color patterns for clickable buttons and links and limit the “ask” for each page.
Don’t Reinvent the Wheel: There are many common design elements that are standard across websites. The menu is up top, login on the top right, contact information at the bottom, and so forth. Don’t make your users learn a brand-new user interface. Instead, keep the interface familiar and save your creativity for the other elements.
Know Your Audience: You’ll want to know exactly who your audience is and what their needs and wants are in order to develop a UX that will provide them with exceptional value.
Visual Hierarchy: If you’re looking to call out important elements on your website, utilize visual hierarchy to highlight what’s most important. This can be done with colors, size, images, graphics, video, and buttons.
Now you may be reading all this and thinking: “Yes, yes, yes, totally agree—but I don’t have the time or resources for all that. Isn’t there an app or something I can use that will do all this for me?”
The short answer is no. There isn’t an app that will help you audit and improve your UX, but there are several tools you can utilize to help you substantially improve your UX. Although these tools have different learning curves and will provide a little or a lot of information depending on your capabilities, all of them are good starting points.
One more thing before we jump into the available tools: Prior to improving your UX, you need to take stock of where your website stands today. Where are people finding your website? What pages are viewed the most? What’s your bounce rate? What sorts of devices are used to view your website?
Understanding the current health of your website will give you a good baseline and ability to measure your progress. (If you don't already have a web analytics tool or ability to track your performance in your marketing automation/CMS, that is first on the list.)
UX Improvement Tools: All-In-One
When it comes to capabilities, in an all-encompassing tool you should generally expect:
- Heatmaps: Graphic representation of user behavior utilizing color to indicate the intensity of visitor engagement on various sections of your website. This can include clicks, taps, and scrolling.
- Visitor recordings: Recordings of visitors browsing your website.
- Conversion funnels: A clear picture of the pages and page locations where most visitors are choosing to leave your site.
- Form analysis: Extensive analysis of your online forms, identifying parts of the form that are too long, which answers are left blank, and where exactly folks abandon your form and page.
- Feedback polls and surveys: A set of targeted and customized questions and polls for users of your website.
But there are a few key differences to consider with the following tools.
Lucky Orange offers a full suite of services to give you the big picture of your website UX. Some of these include heatmaps, visitor recordings, polls, and conversion funnels, which tell you where exactly people are entering and leaving your website. Outside of that, one of the major benefits of Lucky Orange is the ability to chat live with website visitors. (What better way to improve your UX than to get instant feedback?)
If you’re looking for an all-in-one solution that combines analysis and feedback to give you the big picture on the behavior of your online users, Hotjar is a good option. (Although it lacks a few key features such as chat and video recording.)
Another contender for the all-in-one UX improvement tool is FullStory. It offers a host of capabilities similar to HotJar and Lucky Orange. A key differentiator is that video recordings are indexed and organized to create a comprehensive database of how folks browse your site, giving you the ability to search your own database for specific pages, links, and resources to track activity.
UX Improvement Tools: Usability Testing Platforms
UserTesting provides you with the ability to see, hear, and talk to your customers as they engage with your website.
You’ll be provided with videos of your customers interacting with your website (which will give you real-time information on where they get stuck or confused), transcripts of those interactions, a set of metrics to review, and the answers to customized multiple choice, rating scale, and open-ended written questions.
Like UserTesting, UsabilityHub offers the ability to get feedback from real-life users and fine-tune websites, messaging, and creative to optimize conversion rates. You can determine the effectiveness of your links and content hierarchy by mapping out how folks navigate your website, developing customized surveys for users, and giving preference tests (e.g., choosing from one of five landing page designs) and five-second tests (testing memorability of a webpage with just a five-second look).
Userlytics is a platform designed to allow you to record the interaction of users on your website, utilizing picture-in-picture remote testing software to capture their audio commentary and facial expressions, giving you a full picture of their reactions in real time. See where users have difficulty achieving specific goals, and benchmark against different design iterations.
Use rapid iterative insights to make better design and UX decisions and improve conversions and customer satisfaction. With Userlytics, you can use their worldwide panel (with demographic filters); define goals, tasks, and questions; and receive qualitative and quantitative data and insights within minutes with their time-stamped, searchable transcription service to identify key events and comments.
Lookback is another platform that allows you to record the interaction of your users with your website, and it offers many of the same features as Userlytics, UsabilityHub, and UserTesting. What sets Lookback apart from these other platforms is that it allows you to change tests in real time and follow up with users to gather their response to the changes. For example: If a user says they find the color palette glaring, you can change the color palette and see if they approve or not.
TryMyUI is another usability testing service that focuses on helping you improve the UX of your website. It allows you to set up your own custom tests with particular tasks for users to carry out, find your ideal user base with demographic filters, and view recordings of users carrying out your tasks in the usability tests.
What sets TryMyUI apart is the TryMyUI Stream service, which is placed on the backend of your website to gather information about user behavior. This nifty capability allows you to spot flaws quickly with the Stream’s AI “frustration finder.” You’ll be able to identify the paths users are taking, how they’re making their choices, and what leads them to success or failure.
Inspectlet, like the other platforms mentioned here, also records your website visitors and monitors their activity, allowing you to know what they click on, their mouse movements, their key presses, and their scrolling activity. Inspectlet's heatmaps help identify the sections of your website that visitors are most interested in, which includes eye tracking, details about what has been clicked on the most, and how far down the page visitors scrolled. In addition, Inspectlet also provides form analytics giving you detailed information about what parts of your forms are left incomplete and why.
UX Improvement Tools: A/B Testing
Crazy Egg provides user testing heatmap software so you can understand how visitors interact with your website, learn about their activities, and figure out why your conversion rates are low. It allows you to see exactly how far down the page users scrolled before abandoning the page completely, how many times they clicked on various elements of your page, and gives you the ability to conduct A/B testing of various website elements.
Google Optimize's A/B testing natively integrates with Google Ads and Google Analytics to help improve your site and campaigns against your business goals. While the free version does offer some targeting capabilities, if you want to run more than five tests at at time or get assistance with implementation, you'll need to upgrade to their paid Optimize 360 version.
Optimizely provides a full suite of tools to easily A/B test your website. These include the ability to perform multivariate testing (a technique to test several variables on one particular webpage) and create personalized experiences when unveiling new designs through the use of concise demographic targeting (e.g., different URLs, browsers, and geographic regions).
UX Improvement Tools: General
Lighthouse is an open source, automated tool that gives you personalized advice on how to improve the performance, accessibility, progressive web apps (PWA), and SEO of your website. When you run an audit on each page of your website, you’ll be provided with a detailed report on how well each page did, areas that could use improvement, best practices, and a specific course of action you can take to make those improvements. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node Module.
If you’re one of the lucky ones with a full-fledged web development team, then you’ll definitely want to check out MockPlus iDoc, an incredible collaboration tool. Whether you’re starting from scratch or revamping your existing website, MockPlus iDoc is ideal for optimizing the UX of websites and is a handy tool for developers to collaborate with designers and product managers to upload, comment, prototype, test, share, and hand off designs, specs, assets, and code snippets. Users can sync their designs, create a user interface flow, and gather feedback.
From usability testing to A/B testing to simple heatmaps to complex analytic reports, the right tool for you will depend on your business needs. Any others to add to this list? Tweet us at @SmartBugMedia.
About the author
Evan Futterman was formerly the Director of Development at SmartBug. With a Business degree in Computer Information Systems, Evan has both the technical and business knowledge to deliver the quality SmartBug Media clients expect. When not doing web development he can usually be found outside exploring the outdoors. Read more articles by Evan Futterman.