Your Complete Guide to UX with Free UX Checklist Download

buttons

User Experience (UX) is all about understanding how users interact with a piece of content to improve their experience. In order to determine how easily people can engage with a website or app, UX focuses more on qualitative measurements—like the thought and rationale—rather than quantitative, like stats, numbers and figures.

The goal of auditing the UX is to ensure consumers have a favorable experience that pushes them in the direction to take the desired action(s). Conducting a UX audit is incredibly important if you want users to engage, connect, learn and purchase what you present to them in a happy and logical way. You don’t want to deliver a website or a piece of content that leaves them frustrated, mad or questions their intelligence.

Creating the best possible user experience will help increase brand loyalty, user efficiencies, conversions and, of course, customer satisfaction. This post outlines three parts of UX: visual design, functionality and site performance. To help you perform your own UX audit, be sure to download the free UX checklist featured below.

Before you begin evaluating your site or app, you need to have answers to two questions that will help you get your mindset for your audit:

  1. Who is your audience?
  2. How web-savvy is your audience?

Part 1: Visual Design

Homepage

The homepage should paint a quick but very clear picture of the content, products or services the site provides. Sufficient whitespace should be provided so users don’t feel overwhelmed by the information. Clear, visible paths should be evident to allow users to flow through the site to obtain information or complete a purchase, for example. These paths can be presented through an obvious navigation function, images and/or links that can lead users deeper within the site, to a footer with anchor text and to an internal site search that allows users to quickly find what they’re looking for.

Interior pages

Most people don’t come across the homepage of your site through search and social. Instead, they’ll likely first land on interior pages, which is why it’s important to pay attention to that area. Each page should have a primary goal for a user. On pages that are deeper than the homepage, displaying linkable breadcrumbs at the top of the page will help users move through your site.

Another helpful tip: Make sure your site’s logo links back to the homepage, since this is a best practice today that many users are familiar with.

Calls to action (CTAs)

Whether the CTA is a button or simply an in-body link within the text, it should always be clearly labeled so users know exactly what they’ll be doing or where they’ll be going. It’s OK for pages to contain more than one CTA, but each page should have a primary CTA that is super-obvious for users. These primary CTAs are usually: submit, check out, register, download and add to cart, and they should be clearly labeled as such. You can test softer messaging like “start shopping” against more aggressive “shop now” language, but regardless of how strong you want to come across, it’s imperative that users understand what will happen if they click.

The CTA buttons themselves should be created using CSS instead of images so they render properly on mobile devices. It’s also important to make sure CTAs that function in a similar way are all displayed in a similar way. For example, all buttons on category pages that lead to product detail pages should match to say “Shop now.” Varying the verbiage when the end result is the same will only cause confusion.

For text links (hyperlinks), be sure they’re styled and clearly marked in a different color or are underlined.

Images

The sizing of images is critical. For example, images featured in an article that are too large require the user to wait longer for the content to load. If the images are too small, it may be hard for the user to see what makes the content within the image so important. Save all images that are created for your site with a screen-optimized resolution. Text should be removed from images and portrayed as text overlaying the image to help with readability, and so search engines can better understand the content that exists on the page.

If an image is accompanied with a CTA button or text, make certain the image also links to the destination URL or action of the CTA to aid usability. If a page is slower to load, be sure all images are accompanied by alt tags. This will not only help users, but also search engines since they’re “blind.” Alt tags should match the name of the image, and the page keywords are used within the image name to further assist search engines.

If you feature an image carousel on any pages, be sure it’s swipe-able for smaller devices where touch targets easy to click with a mouse can’t be used. Being able to swipe back and forth through the gallery will greatly improve usability and engagement. 

Formatting and orientation

Just as important as what you’re saying is how you’re coding it. Using a tool like CSS Lint will allow you to copy and paste your style sheet to make sure you’re streamlining your code. This handy tool will highlight errors, such as using problematic patterns, or if you’ve accidently omitted a closing tag. This validation to ensure your code is as clean as possible helps leverage your site’s authority with search engines because they see you’re following proper code standards.

Leverage style sheets as much as possible to reduce the amount of in-line coding you’re using on a page. Including lots of in-line coding on individual pages will reduce load time and increase styling errors if you revise your CSS.

If you plan to syndicate your content, be aware that most of these syndication platforms don’t like in-line styling to be used, since it disrupts the look and feel when they pull your content into their site. Having an incorrect font size or weight will create readability issues.

Your site or app must look sharp and adapt in both portrait and landscape orientations to be easy to use on a mobile or tablet device. When testing and reviewing, remember to rotate smaller devices to see the content from different perspectives.

Part 2: Functionality

Navigation

Ensure that the terminology used to classify the content or products within your site navigation makes sense to users. Being cute or clever is OK when done right, but it’s much more important that it’s obvious so visitors can make the connection. The navigation itself should exist in an ever-present location; I strongly recommend it appear at the top of the website. The text links within the navigation should have a decent font size with good spacing between the words to reduce accidental clicks (this is extremely important for mobile navigation).

All text that’s linked should be clearly marked so users don’t become frustrated when they can’t click through to what they think will be a category page, for example.

On mobile, consider using the word “menu” instead of displaying what is commonly called the hamburger navigation icon, to help users clearly identify how they can migrate to the information or products they’re looking for. Many studies have shown this actually increases the click rate of the navigation.

If your audience is older or not especially web-savvy, and if space permits, consider including the word “home” within the top navigation to provide a bit of help.

If your site has a lot of content, you’ll get bonus points (from me, at least) if you include a link to a user-friendly sitemap within your global footer to help users accelerate to the content they’re seeking.

If a user is on your site, can’t find what they need and they want to put in the effort to locate the info or products they’re searching for, let them! The internal site search should be in a clearly visible, consistent, ever-present location. This is where functionality should trump fashion. Put it front and center, perhaps in the global header or footer. If an abundance of content exists on your site and it’s possible for many results to be served during a search, be sure there’s a way for users to filter the results or at the very least, navigate through the results with clear “next” buttons or search result page numbers.

You should also ensure it accounts for misspellings, abbreviations and synonyms (like sweatshirt and hoodie). To improve usability and reduce bounce and exit rates within search, always serve a result—even if the search comes back empty. In this case, consider providing links to top content or popular products, as well as to the homepage.

Contact / Help

I once heard a speaker at a UX conference say that in order to increase call conversions, you simply had to “make the phone number bigger on your site.” While not entirely true, having a visible way for users to get in touch is necessary to provide the appearance of strong customer service. Make sure the phone number and address are legible and appear in a way that mobile users can easily click them to make a call or get driving directions.

If your site is complicated and a help section is required to fill out forms, navigate or obtain measurements, the info should be provided in an easy-to-digest form. Avoid jargon or complicated terminology when possible, and if necessary, include an image to show how a measurement should be obtained.

Sometimes I see designers try to reinvent the wheel and make super-cool Q&A sections that often leave users frustrated by the functionality. If people have questions, the answers should be easy to view and easy to comprehend.

Forms / Checkouts

Whether a user is completing a site registration, contact form or cart checkout, the process must be easily understood and categorized. While we as marketers are always striving to obtain as much information as possible, for a user, simple is always best.

The steps should be broken into clusters like name, address, billing, etc. If the process is longer because it requires more actions or information to complete, clearly display the numbers or stages the user is in throughout the process if the forms exist on more than one page.

If specific forms require a bit of thought or need some explanation, this should be included either beside the form or delivered through a pop-up box or link to another page opening in a new window. When in doubt, assume your audience needs a bit of help to understand.

To boost conversions, review all form sections to determine which fields are necessary and which should be optional. This will help accelerate the process and facilitate completion. If a form field is mandatory, clearly mark it as such with an asterisk or bolded font in the beginning of the section/category where it lives. Allowing the user to auto-populate info is another tactic that helps make the user experience even easier.

Errors

Your site will never be perfect and should always be measured and tested to identify areas that require improvements. In the meantime, create a plan to help a user stay engaged when an error occurs. This can be done through easy-to-read error messages when an incorrect password is used or a necessary step is missed. The text should be placed close to the problem/error.

Broken links will occasionally occur, so it’s important to have an active 404 page. A custom 404 page is preferable, since it will help move users back into your site through navigation or by suggesting they return to the homepage to start over.

Part 3: Site Performance

Browser compatibility

Your website should be tested on all web browsers and versions. There are many great cross browser testing sites, like BrowserStackCrossBrowserTestingLitmus and Browserling, that let you see how your site looks and performs in different versions of the most common browsers. Another tip: Be sure you’re using the most recent browser versions on your device(s) at all times. To find out if that’s the case, simply go to a site like What Browser.

Screen resolutions

Take the time to ensure that your website looks its best in all the various screen sizes and resolutions your visitors will be viewing—desktop, tablet, mobile, watch, etc. A great site to reference if you want to know the active screen size by viewport is mydevice.io. This will help you and your developers troubleshoot for a specific screen—especially helpful since all of the many Android phones coming out make it hard to keep up. For a quick test to see if your site is mobile-friendly, Google’s test is great.

Below is a chart from Hobo showing the most popular screen resolutions in the U.S. from November 2015 through January 2016:

Load times

The No. 1 reason a user bounces is slow load time. If your pages take longer than five seconds to appear, Houston, we have a problem. When it comes to user interactions, like clicking a link, opening an application or submitting a form, it shouldn’t take any longer than one to two seconds. I recommend Pingdom for testing speed, or to check pages on all devices, use Google’s speed insights test.

Search engine performance

Designing for users is key for improving online metrics and conversions, but don’t forget about your SEO best practices. Your site must be compatible for search engines to increase your online visibility and domain authority.


Sign up for our monthly newsletter to get more content like this.