The 7 UX Rules for Small Business Websites
Rule No. 1: Make It Fast
Just enter in your URL and Google will giving a speed ranking for mobile (default) and for desktop with 100 being the top. Google will also give you suggestions for areas that are causing the slowness, and typically you can hand this off to your developers to have them try to fix most of the issues. If you don’t want to use Google, other tools developers use include GTMetrix: https://gtmetrix.com/ and Yahoo’s YSlow browser extension: http://yslow.org/
Rule No. 2: ‘Skinny’ Navigation and User-Focused Labels
Two big mistakes we see small businesses make with navigation: a. Labels that don’t mean much to their customers and; b. Navigation and a header that take up way too much space. Let’s take each separately. First, navigation should be customer-focused. What we mean by that is that it should have user-friendly labels that resonate with how the customer wants to drill down into the site to find information. The mistake many businesses still make with navigation is that it can reflect the company’s focus (perhaps the name of the division or company jargon) but not always helpful to the way a customer looks at finding his or her way around the site. Many great websites will now purposely employ more action-oriented labels for this reason. “I want to: Take a Course | Make a Payment | Explore Content” rather than having more traditional labels such “Education Courses | Finance | Content & Tools,” etc. There’s no right way or wrong way, but it’s again important to put yourself in the customer’s shoes – make sure the focus of the action/label is about what they want to look for, not about what you simply want to call it.
Second, we often see websites take up way too much real estate for the navigation and the header. Remember, the point of navigation is to help people move through the site quickly. And on any page, the quicker you can help people get to content, the better. So, choose a template (theme in WordPress) that keeps the website navigation “thin” taking up no more than 15 percent of the viewable window on a standard desktop browser. (Note: Most WordPress themes are responsively designed, which means, typically your navigation will resolve to a “hamburger menu” – the three horizontal lines usually in the top part of the page on a mobile device.)
Rule No. 3: Make it ‘Responsive’ in Mobile
One of the reasons we recommend WordPress is that most of its theme templates come responsively designed. That is, the pages will respond to the device that’s being used. So, if someone comes from a desktop, it will provide a desktop layout. If someone comes from a tablet, it will show a tablet layout. And, if someone comes from a mobile phone, it will similarly show a mobile layout. Templates can do this because they have built-in break points at which content is programmed to appear. Be warned, however, some website templates aren’t actually responsive. So, make sure to choose one that is.
The other thing to watch out for as you’re building out your website or building new pages is to make sure to ALWAYS check your published pages in mobile. With some sites, more than half the traffic comes from mobile devices. That means, regardless of whether your business is B2B or B2C, your mobile experience is just as important (if not more) than your desktop experience. Many people also use mobile to do research and it’s now become standard for purchases. A few areas to consider:
- Take a look at how headers and text on “hero” (top of page) images appear in mobile. Make sure both are legible and clearly visible.
- Test any entry forms in mobile. Make sure the forms have the same fields and a consistent labeling that is clear and not overwriting the entry field itself.
- Go through a mobile purchase. Similar to the above, it’s important to test forms and checkouts in the process of using a mobile device.
- Thoroughly review landing pages. Oftentimes, landing pages (such as your home pages or section pages) don’t always translate well into mobile. Make sure the core elements appear the way you want and in an order that makes sense to the customer.
Rule No. 4: Use Personalization
For many small businesses, integrating more personalized experiences into a website can be challenging, particularly those that don’t have development resources at their disposal.
That said, if you can muster some resources for the effort, it’s most certainly worth it. Here are a few ways you can approach a more personalized experience for your website visitors:
- Personalization Based on Geography: Let’s say you have a few brick-and-mortar retail stores in a local area and you sell goods both online and in the store. One easy thing you can do is provide the nearest store to that individual based on the geographic location of that website visitor’s IP address. It’s an easy reminder of a place they can shop. Most all web developers can easily help you execute this function. Knowing that IP address will also give you the ability to personalize deals to particular geographies. So, if in the winter time, you want to provide winter boots to the northeast but sun tan lotion to Arizona, you can do that pretty easily by building a module that changes based on various states and ZIP codes.
- Personalization Based on User Choice on Input: Let’s say you sell a particular set of products or services, each with a distinct set of audiences (in other words, not much crossover audiences who might be interested in one solution and another). One thing you can do for those website visitors is have them take a quick upfront survey or have them select particular preferences when they visit the site for the first time. Those selections and interests then determine the experience they receive. One example might be a wine shop that asks website visitors what their taste profile is like: Do they like California fruit-forward wine? More European style? And then, based on the outcome, personalize the offering to show the customer those choices that fit their preferences first on a home page. Make sure to encourage the visitor to create an account profile and sign in so they receive the personalized experience and save their settings to the site. It will take some development effort to customize this but, in the end, you’ll find it’s worth it.
- Personalization Based on User Behavior: As stated earlier, if you have given thought about the systems that you can connect to together (especially your CRM and the website, or the e-commerce platform and the website), you can certainly begin executing this aspect of personalization. For example, if you can store data within your CRM or e-commerce platform for signed-in visitors such as pages they visited or items they’ve put in a cart, you can easily carve out a space in the home page or header to show them the pages they’ve viewed (so they can easily navigate back) or the abandoned cart items. Also, if you have a shopping cart function, it’s pretty easy for a developer to display a return visitor a site alert saying they should “check out now” with the products they were intending to buy.
Rule No. 5: Enhance Your Search
There are really only two ways that website visitors find the content and products/services they are looking for on a website. They navigate to it or they search for it. And the latter plays a huge role in the overall website user experience. If you’re using a WordPress theme, your site will simply come pre-loaded with basic search that will primarily find only exact word matches as part of it. If you don’t have a lot of pages, that’s OK. But if you have lots of products and services, a store, or other pages where your visitors might need to drill down a little deeper, you’ll definitely want to think about a few options.
First and foremost, you can certainly work with a developer to replace the search on your website with another search appliance. Pre-2019, many sites turned to the Google Search Appliance, given its notable capabilities in its own search realm. However, Google phased out the platform in 2019, leaving many companies to scramble for an equivalent search engine. For small companies, it was likely a bit on the expensive side regardless. Other options for smaller companies include:
- Amazon Cloud Search
- Sharepoint Search
- Oracle Endeca
If you have a WordPress site, you can also enhance your search with plugins. Among those that are quite highly rated include:
- Search & Filter: If you have a site that requires “facets” – drilldown filters to help narrow the search for a website visitor, this plugin is generally pretty feature rich. It includes a combination of categories, tags, taxonomies, post-types, and can be displayed with checkboxes, radio buttons, range sliders and other functions.
- FacetWP: Another cool plugin that can do “facets,” this add-on uses shortcodes to determine the placement of search control features and results. It includes custom fields, tags, and categories.
- Advanced Search: This isn’t a plugin but a PHP framework that can be used by developers to create an advanced faceted search experience. Not a great option if you don’t have WordPress developers but it’s pretty straight-forward for them if you do.
- Solr Search for WordPress: With features similar to the Solr search appliance, this is certainly a good option in that its good enough for Netflix, Ticketmaster, and Instagram to use on their websites. The plugin features the ability to do facets by category, page type, author, and custom fields.
Every search engine appliance or plugin is slightly different and allows for different experiences. We would suggest investigating a few key areas of functionality:
- Autocomplete. When a visitor types in a search, it’s important to help them by giving suggestions for what others have looked for as they type in their query. Google has clearly set the standard for this. It saves website users time to find exactly what they’re looking for.
- Non-Exact Jargon. Let’s say you’re a toy store and the customer types in “action toys” when the known exact name/jargon is “action figures.” Does the search still turn up a useful result with action figures being displayed? Great search engines will understand and help the user out. They might even suggest more accurate terms.
- Faceted Search. As mentioned above, it’s the ability to drilldown by category, or other tags, page types, or fields so the website user can find exactly what they’re looking for.
- Contextual Snippets. Does the website return a small description (typically the meta description) on what the page is about? That short description helps website visitors decide if this is indeed a relevant page.
Rule No. 6: Keep an ‘Airy’ Visual Design
One of the most critical areas of the website involves the visual design and user experience of a visitor. We see a lot mistakes that small businesses tend to make here. Mostly, this is due to the fact that they don’t use a good WordPress theme or template. We’ll walk through several key areas below:
- Simple, ‘airy’ design: One mistake that we see websites make too often is that they pack information into a small viewing window and cram call-to-action buttons everywhere. Best practice would dictate that landing pages only have 4 to 5 separate items in each viewing window on a desktop browser. That means more “air” and fewer choices to make the viewing experience less chaotic.
- Using visually compelling images: Images need to be both fast-loading and high resolution to meet core SEO criteria. They also need to be contextually relevant. If you don’t have access to good stock photos or in-house photography, you can get high-quality, copyright-free images at sites such as Unsplash.com or Pexels.com. Just credit the photographer and you’ll be ready to go.
- Clear hierarchy of promotion. The key element here is don’t bury the lead. For landing pages or article pages, make sure to highlight the most important information at the top of the page, starting from left to right. The top left is the most important real estate followed by the top right on a desktop. Obviously, on a mobile device, make sure your responsive website focuses on the most important content at the top.
Rule No. 7: Limit Colors and Fonts
Too often we see small business websites use a barrage of colors and varying fonts, which do nothing but create a chaotic visitor experience. If you think about a company such as Apple, which is known for its stalwart brand consistency, it uses a single font (SF Pro) with varying sizes. It also defines a more limited number of colors in its CSS (cascading style sheet) and all within a single-color palette. Sites that use too many colors will create an un-focused experience, where the eye may be drawn to different colors on the page but not actual content. Two tools you can download to your Chrome browser as a extension: WhatFont?, which provides information about any site’s fonts, and ColorZilla, which has a webpage color analyzer. There’s no hard and fast rule, but you should only use one type of font on your site. And you should generally try to limit your color usage to under 20 defined in your CSS.
We hope these 7 rules have been helpful. Even if you can’t take on all these at once, try addressing these as you go. Implementation of little details can make a big difference in outcomes. We wish you the best of luck in all your digital marketing endeavors!