Web Design Usability Considerations
What usability and A/B testing practices should your agency apply to optimize your custom web design?
By Meredith Dunn
Meredith is a BECK Digital enthusiast with a weak spot for business planning, full cycle digital marketing and killer content.
Web Design Usability and Testing Considerations
Often advertising agencies are motivated by designing sexy, flashy websites. While they provide beautiful fodder for their portfolios and social accounts, these bleeding-edge designs can lead to poor user adoption rates and high abandonment. Simply having a trendy website design does not mean an optimal user experience or online success.
You must always think about the user: How savvy are they with technology? How difficult is it to navigate your site? What page elements help or hurt the user experience? What calls to action generate the most clicks? Do your site colors make reading difficult? Can users with visual or audio handicaps easily use your site?
Each of these factors should be considered when designing a new website or when trying to optimize one. And the best way to determine what works on a website is to test and analyze your pages, content and design. This can be accomplished with thorough usability and A/B testing.
Usability testing should be part of any standard web development plan, usually occurring after the creation of high-fidelity design prototypes or when troubleshooting an existing website. A/B testing generally comes during the marketing and site optimization phase, after successful website launch. In both instances, your web development agency should be applying the following usability and A/B practices to help you implement smart web choices.
Usability testing consists of real users evaluating and interacting with a website or web page (or product) to help companies assess user experience and satisfaction. Typically, participants are given a set of tasks to complete on a website to determine how long and how easily a task can be executed. The goal with usability testing is to identify user problems and frustrations, and fix said issues to optimize the overall user experience.
Usability testing before launching a new web design is smart, and the benefits are numerous. The data collected and analyzed during testing helps information architects and designers identify and correct any structural, design, user flow and navigation issues before the programming phase. Usability testing can also be helpful for assessing an existing site for a baseline understanding of current user issues. This feedback can be extremely helpful in guiding new web direction and designs.
Usability tasks and goals
Before testing begins, it's essential to set goals and objectives for testing. Clearly define the purpose of the test and what you hope to gain from it: Are you aiming to assess how users tackle specific actions on your site? Are you trying to gauge new elements or design choices? Are you curious to see if a certain page layout or structure is conducive to smooth navigation? Are you measuring effectiveness of copy or imagery?
Once you and your agency have set testing goals, together you can begin generating user tasks, as well as assumptions for what may work and why. You’ll want to get into the nitty-gritty with specific usability tasks that represent common user or conversion goals. For example, ask participants to successfully find a page, submit a form, or navigate your site. Even the smallest of tasks can be helpful to measure, as not all users naturally follow the same user path when using a site. Participants unfamiliar with your site will often use and navigate quite differently than an experienced user.
Testing in a formal lab isn’t mandatory for usability tests. If you have a private room, and a moderator to lead participant tasks (without guidance) and record notes, then you can complete usability testing nearly anywhere. Just be sure you’ve identified target user groups, and your moderators follow the same script for each test, presenting tasks in a counterbalanced method. Here’s more on setting up a thorough usability test and avoiding common mistakes.
To take it a step further, recording programs like Morae (PC) or Silverback (Mac) can enhance usability testing by tracking participant behavior, like mouse clicks and keystrokes, and recording facial expressions and voice during testing. This can help you assess minute user actions and the most frustrating steps of a task.
During the study, track how participants complete tasks, the length of time to execute, where they encounter issues, with what and why. For example, a high number of mouse clicks and a prolonged navigational path likely means user confusion and poor navigational structure. Specifics like these help designers and developers identify difficult tasks, and how best to support the user in future designs. After the study, data should be carefully analyzed, assigned a severity level, then sent back to information architects and designers for updating and implementing.
As with any study, be sure to conduct numerous usability tests throughout the design process to ensure all requirements and issues are addressed in the final design. The more data you can collect on user experience, the better.
A/B testing is a method of comparing two versions of a product or webpage against each other to determine which one performs best. For example, an existing web page (A) is modified slightly to create a second variation of that page (B). Engagement with each page is then measured and analyzed statistically to determine which variation was most successful, and whether the changes had a positive, negative or neutral effect on user experience. A/B testing provides helpful data to companies when trying to understand user behavior and experience, the impact of new features, and how to optimize online campaigns.
Analyze user data and set goals
It’s always smart to begin with baseline information and data on your users and their behavior on your site. Platforms like Google Analytics are incredibly helpful when seeking stats on site or page performance. Pay attention to user metrics like page views, average time on pages, bounce rates, and abandonment rates, as well as where and what users are clicking. With these points of reference, you can begin identifying gaps and issues on your current site, and what needs improvement.
It can also be useful to understand your user demographics to further target your key audience. Is your website currently reaching users with ages, genders, devices, and interests that align with your ideal consumers? These data points can be instrumental in learning how and what to modify on your page variations to capture your ideal consumers. For example, if your site tends to reach older female users, and your ideal users are young males, how can you improve the user experience for your target demographic? A possible testing variation could include designs, copy and imagery specifically tailored to young men.
Armed with solid data on site performance, you can begin setting development and site optimization goals. With A/B testing, it’s best to use actual conversion goals to determine which variation is more successful – in other words, real actions you want users to take on your site. These goals can as simple as clicking a link or button, or signing up for an email. By assessing the metrics for these actions, you can determine whether a variation is more successful than the original.
Create hypothesis and variations
After goal setting, your agency, or an experimentation platform like Optimizely, should begin generating variation ideas for A/B testing, as well as assumptions for what may work and why. An example of an A/B variation could simply be taking a current webpage, or control page (A), and modifying the page elements slightly to create a second page variation (B). Changes made to variation B can be anything from varying colors, imagery or calls to action, to altering headlines and layout. Generally, variations should address issues with site performance or user behaviors – i.e., if you notice high abandonment rates on a web page, perhaps you should alter the imagery or call to action to increase page engagement. With a hypothesis and variation ideas, your agency can prioritize options and help you understand expected impact, as well as feasibility for creating the variation page.
Test, analyze and repeat
To begin the test, publish your variation pages, then randomly serve web visitors either the control page (A) or the variation page (B) upon visiting your site. From there, measure, compare and analyze user data, and see if there is a statistically significant difference in page performance.
If your variation generates a negative result or no result, keep at it. Continue refining your hypothesis and work on better variation ideas. A/B testing is a process, and each iteration provides useful research on user behavior, even when experiments aren’t successful. Should your variation prove successful, congrats! Apply the process to other pages and experiment with more variations. With repeated testing and new ideas, you’ll quickly become a pro at optimizing your site.
A/B Testing Considerations
Google allows A/B testing and states that these tests pose no threat to your search rank. However, your search rank could still be at risk if you don’t follow Google best practices for testing. Developers at your agency can help you understand and apply these practices; a few such suggestions include no cloaking, use of 302 redirects (instead of 301s), limited experiment length, and use of the rel=“canonical” attribute.
Finding the Right Development Partner
If your business needs help executing usability or A/B testing, optimizing your site, or improving your search rank, we encourage you to talk with us. BECK Digital is comprised of experts in digital marketing, SEO/SEM practices and website development. We specialize in developing custom digital solutions to improve your ROI and generate online success.
What's Up Next?