Web Usability for Inspectors

What’s “web usability” and why should inspectors care?

Web usability is an approach to making websites successful by ensuring their ease of use so that a user’s actions have predictable consequences. Usability keeps potential clients who are visiting your site engaged, which leads to more business. It also ensures user satisfaction, which translates into trust and brand loyalty, along with repeat customers, positive press coverage, and reduced long-term development costs.

But, most of all, web usability:

• captures visitors quickly. Web users who don’t immediately get the information they want will become confused and frustrated and will soon hit their browser’s “back” button to check out your competition; and
• reflects positively on your organization. On the Internet, your webpage is your storefront. If your site is tidy, clear and intuitive, users will expect these qualities in your work.  However, if you cut corners on your site, your client may assume you’ll be sloppy on the job, too, and they probably won’t hire you.

Before we delve further into the concept of usability, let’s take a step back and examine competing approaches that, while not covered in this guide, are implemented by all successful websites:

• Graphic design invokes a positive emotion in users through custom colors, formatting and visuals. Aesthetics are viewed as an integral part of the user experience and not merely a trivial afterthought.
  
  
• Search-engine optimization (SEO) is a set of techniques designed to enhance the visibility of a website in search engines, such as Google and Yahoo.

Basically, SEO brings people to your website, graphic design impresses them once they’ve arrived, and usability ensures their ease and satisfaction while they navigate. No successful site neglects any one of these three approaches, but finding a balance can be difficult in situations where they’re mutually exclusive. For instance, excessive SEO keywords clutter the site and degrade its usability while highly usable sites that neglect design elements won’t engage the user, and overly stylized sites eat bandwidth and distract the user from the content they seek. A successful website includes SEO considerations that don’t dilute the site’s content, and an attractive user interface that isn’t gaudy or distracting.

THE HOMEPAGE

Users decide quickly (within 50 milliseconds or 10 seconds, depending on your source) whether to remain on a website or leave, which makes the introductory homepage the most critical page of your site. More specifically, the portion of the homepage above the fold (which is newspaper-speak borrowed for Internet use to describe content that is immediately viewable without scrolling) defines the user’s critical first impressions. Anything below the fold is of comparatively less value because users will see it only if they decide it’s worth their time to explore the site.

Your choice of what you place on your homepage depends on your company’s needs, but web conventions dictate that the following items should be included above the fold:

• The site ID is the name of your website or business, and it should always be in the top-left corner of every page of the website. Why? We read from the left to the right and top to bottom, so it follows that the broadest category should be the first encountered. More importantly, users expect the site ID to be in the top-left corner, and good websites conform to user expectations.
  
  
• The tagline is a catchy phrase that sums up the whole organization. A good tagline clearly conveys what your business does, so avoid lofty, vague taglines such as “Quality is Job One” (Ford’s corporate motto) in favor of inspection-oriented, realistic taglines, such as InterNACHI’s “Inspected Once. Inspected Right.” The tagline can appear above, below or on either side of the site ID.
  
  
• The welcome blurb is a short description of the site where you can expand upon the tagline, letting the user know more about what you do and where you operate. Avoid gimmicky buzzwords (such as “burgeoning,” “bring to the table,” “proactive,” “synergy,” etc.) and don’t waste space telling users about every great feature on the website.
  
  
• Navigation is related to the navigation bar and search box.

Tweak the user’s first impression through the following tips:

• Weigh the consequences of including third-party advertising on your site. No one likes ads (TV and radio subscribers pay to avoid them) because users know they’re designed for business objectives, not the needs of the consumer. Besides, ads take up space and distract users from the purpose of your site – to book a home inspection. Banner ads are especially annoying because they push down the start of the page, squeezing the critical area above the fold, and they take a long time to load.

• Don’t cram the upper section. It’s tempting to put a lot of content above the fold, but excessive information looks busy and inaccessible. You can “cheat” by hiding content with rollover text and popups, but usability expert Steve Krug advises against them because users have to seek them out, they aren’t printable, and they’re only effective if they appear next to the user’s cursor.
  
  
• Test your site in different browsers and at varying screen resolutions. Its appearance will vary based on the browser you’re using, so ensure that the vital information is in position on popular viewed using the most popular browsers:  Firefox, Chrome, Internet Explorer and Safari. Also, users with poor eyesight sometimes increase their screen resolution to make it more readable, which comes at the expense of above-the-fold content.
  
  
• Beware of wasted space at the margins, where a blank background surrounds the page content. Items below the fold could be brought up to fill this prime real estate or the existing items could be enlarged to enhance their visibility. Generic website templates often suffer from this aesthetic defect.
  
  

NAVIGATION

Internet users feel like they’re moving through physical space because talented web designers have replicated this sensation through effortless and intuitive navigation controls. But poor navigation makes users feel lost, as they would in a department store that lacks aisle signs or a book without chapters. To keep users surfing forward, follow these navigation guidelines:

Primary Navigation

Navigation that’s on every page is known as primary (or global, persistent, or top-level) navigation.

The navigation bar consists of the sections that comprise your website. Limit it to the essentials so it’s easy to scan, but try to include the following standard sections:

• “Home” permits users who have ventured deep into your site to get back to the homepage without needing to circle back through additional links. Also, users can use the Home icon (along with the company logo) if they arrive at an internal page through a search engine. 
   
• Use the “About Us” section to display your core values, experience, and the things that set you apart from other home inspectors in the area. Mention your years of experience, InterNACHI membership, and any accreditations and certifications.
  
  
• A “List of Services” page impresses visitors by listing the scope of your services, which may include a Seller’s Pre-Listing Inspection, environmental testing, energy audits, and commercial inspections. You may also include this information in the “About Us” page.
  
  
• A “Book an Inspection” tab removes any obstacles to the user’s attempt to purchase your services, so put a payment link prominently in the navigation bar.
  
  
• “Testimonials” from former clients are used by prospective clients to gauge the quality of your service. Sure, some users will wonder whether these positive reviews are representative of your typical work, or even if you just made them up yourself, but they’re usually good marketing material.
  
  
• A “Contact Us” or “Feedback” tab loads your contact email and/or phone number in order for visitors to submit testimonials, ask questions, or alert you to problems with your website.

• placement. Place the box where users will expect to find it – in the top-right part of the page. You can get away with moving it to the top center, like Amazon.com does, but only when you’re as big as Amazon.com;
  
  
• wide. According to usability expert Jakob Nielson, the search box should be wider than you might expect – 27 characters, to be exact – to accommodate a lengthy search phrase without obscuring any of it;
  
  
• simple. Users are expecting search boxes to be labeled “Search,” so avoid fancy wording such as “Query,” “Submit,” or “Quick Search”;
  
  
• limited to your site. Design the box to search your site, not the whole Internet! Never encourage users to leave your website; and
  
  
• forgiving of mistakes. Use a search function that is forgiving of spelling errors and informs users when they have entered nothing into the search field.
  
  

Secondary Navigation

Where the navigation bar and search box don’t meet the user’s needs, secondary navigation tools should be available as a last resort.

Two popular such tools include the following.

• Breadcrumbs are a single line of text that displays the user’s location within a site’s hierarchy, as illustrated below. The term comes from the trail of breadcrumbs left by Hansel and Gretel, but, in this case, breadcrumbs do not show you where you’ve been, as do the web browser’s “back” button and browser history log.

Follow these tips for breadcrumbs:

• marginalize. Make it clear that breadcrumbs are an accessory to the site’s primary navigation by using small type and placing them in the very top of the page, like page numbers in a book;
  
  
• progress from general to specific. Start the sequence with “Home” and end it with a bold-face current page name. Separate each breadcrumb with the “greater than” symbol (>) to indicate advancement through the site’s hierarchy; and
  
  
• contain a text link for each breadcrumb, except for the current page.
  
  
• The site map is a visual representation of the entire site. Although it’s one of the oldest web-usability conventions, studies confirm that the use of site maps is becoming increasingly uncommon, and a large percentage of websites lack them entirely. Still, Steve Krug recommends site maps because they incur little cost to the site owner and they’re very helpful for the people who do need them. Like the aforementioned navigation tools, the site map should be static and simple.

Your website’s vital first impression will be guided by its design, which includes where you place items and how they appear. Effective use of color, typography and layout will impress the user in those critical first moments when they decide whether to stay on your site or hit the “back” button.

Consider these strategies:

• Scroll vertically. Vertical scrolling is sufficient to reveal page content. Horizontal scrolling not only offers no advantage, but it creates an additional and unnecessary fold line that chops sentences and makes content unreadable without scrolling to the right. Also, older mice can’t scroll sideways and some users won’t even notice the unorthodox scroll bar. Horizontal scroll bars often arise when the site is a few pixels too wide for the user’s monitor, prompting the browser to cue up a barely functional scroll bar that wastes valuable real estate.
• Keep colors and styles consistent. You want your user to know they’re still on your site when they click an internal link, so keep colors, layouts and headings consistent for every page of your site. Also, avoid using one color for multiple uses, such as making both your links and headings blue.
  
  
• Make use of contrast. Your text should contrast with its background color and graphics to ensure readability. Users will not appreciate your stylish coloring if they have to strain their eyes to read it.
  
  
• Use only meaningful, well-placed graphics. Graphics should convey real content, not merely decorate your page or convey a feeling. A photo of moldy wallpaper can assist an adjacent explanation of your mold inspection services, for instance, but what value is an oversized stock photo of a smiling couple? Use photos that you took yourself rather than stock photos or clip art you found online, and crop them so the user knows exactly what they should be looking at.
  
  
• Implement white space. The empty space between pictures, paragraphs and other items can be used to define categories of items and make the page seem less cluttered and more readable. Too much white space will backfire, however – especially above the fold on the homepage – so try a variety of white space arrangements to find the proper visual balance.

WEB WRITING

Graphics and design influence the user’s immediate impression of your website, but quality content – namely, text that markets your services – convinces them to navigate your site further. When writing web content, consider that web users only skim text for important information and links, which is why Krug recommends, “Get rid of half of the words on each page, then get rid of half of what’s left.”

Sound excessive? Try muddling through the following 200-word manifesto:

A thorough home inspection of all major systems and components prior to buying any house is the best prevention against being stuck with major repairs after the purchase, give you leverage to negotiate home repairs and/or repair costs with the seller, and can potentially save you thousands of dollars. Here at InspectRight, we employ Certified Master Inspectors to provide you with an in-depth home inspection report on your home, looking closely at every aspect of a house, from its plumbing and electrical systems to things as simple as the correct operation for kitchen appliances, in order to be sure everything is working properly. Customer service is our highest priority and we really enjoy helping our clients in this process in order to make the home-buying process as stress-free as possible. Any problems that the home inspector finds can then be dealt with before the purchase of the home, saving the home buyer hundreds, if not thousands, of dollars later on. We have been performing home inspections in the area for over 25 years and have a trained eye for detecting defects and potential problems. We are InterNACHI-certified home inspectors and perform mold inspections, radon inspections, commercial inspections, and various other inspection services.

How much of that was obvious?  Redundant?  Rambling?  Cluttered?

Can it be re-stated in fewer words? Let’s try this:

At InspectRight, our Certified Master Inspectors know just how critical a thorough inspection is to the home-buying process, which is why we offer several inspection service options to suit your every need. Save money and gain leverage by booking an inspection today!

So you’ve eliminated the fluff and self-promotion, but you can still drive away your audience if you aren’t careful about the following:

• bad spelling:  Misspelled words reflect on your professionalism and intelligence, and they’re easily avoidable. Your potential clients might rightfully wonder how you’d fare using an infrared camera if you can’t even use your spell-check function;
  
  
• tiny text:  It’s tempting to reduce font size to cram content above the fold, but small type can be unreadable. A lot of your clients are older people with poor eyesight. Also, section headings should be larger than body text;
  
  
• *EMPHASES!:  Occasional use of emphasis, such as bold and italics, will make key text easier to scan, but the over-use of different styles and fonts will dilute their effectiveness and make the content unappealing. ALL CAPS should never be used because the user will feel like they’re being shouted at. Websites often violate this principle by writing “NEW” all over the site;
  
  
• technical jargon:  Write content that is significant for homeowners and other potential clients, not fellow inspectors or contractors. For instance, most potential clients have never heard of arc-fault circuit interrupters, ghosting, perlite, lolly columns, or receptacles (they call them outlets). For the same reason, abbreviations and acronyms, such as EIFS, should be spelled out;
  
  
• excessive formatting: Over-using different font styles, colors and other formatting options will make items look like ads. Animation is even worse, as moving text is difficult to read and will hypnotize the user. Many users don’t have the patience or bandwidth to sit through animated site introductions, so provide an easy way to skip over it to the homepage;
  
  
• text within images is hard to read and will be unavailable if the user has disabled images in their browser. And from an SEO standpoint, this text is invisible to search engines;
  
  
• digits rather than text for numbers: Write “34” instead of “thirty-four.” Use digits for measurements and currency, but remember that not all of the standard conventions for print apply when it comes to spelling out numbers online. But don’t crowd different numbers together; and
  
  
• outdated information: Time references will eventually be invalid and create the appearance that you don’t update your site or are behind the times. Phrases such as, “By 2010, all widgets we will phased out” or “Current subsidies for roof solar collectors are…” will eventually expire.
  
  

LINKS

Non-navigational, in-text links have their own set of rules:

• Links, and only links, are blue and underlined. Blue links have been the web convention for many years because blue (aside from the black used for ordinary text) was the darkest color available for web designers in the early 1990s. While users expect blue links, they can readjust to a different link color on your website as long as the color is used consistently. Further accentuate links by underlining them. To avoid confusion, never underline or make ordinary text blue.
• Use a different color to mark visited links. Program your links to change color after they’ve been clicked so that users can differentiate where they’ve already been from new site content they have yet to explore. Websites commonly use a dimmer, duller shade of the color used for the unclicked link (usually bright blue). Avoid black, which will be hard to discern from neighboring text.  Also avoid grey, which is associated with unavailable functions.
  
  
• Choose meaningful link text.  Follow these principles:
  • Use unambiguous text. Users scanning for links will barely see the surrounding sentences, so links should be understandable on their own. For instance, a user will more quickly decipher the meaning of “Get a free price quote” than “Click here to get a free price quote.”
    
    
  • Use the most relevant word first. While scanning for links, readers concentrate on the beginning of words and phrases, so use the most important word for the first part in the linked phrase. Thus, the link in “We offer quality radon testing at competitive rates” is easier to locate than “We offer quality radon testing at competitive rates.” Websites commonly violate this principle by placing their company name at the beginning of every link, such as InspectorJoe’s Services, InspectorJoe’s certifications, etc.
    
    
• Links should open a new page, and nothing more. Links can be programmed to launch programs or open PDFs, which is probably unwanted and can cause the user’s browser to crash. Even information boxes prompted by hovering the cursor over the link will obscure nearby content. Don’t startle your visitor – ordinary links should do nothing more than open a new page.
  
  
• Dead links load a custom error page. Create a custom error page that guides users back to your homepage when the user clicks on a broken link or types a URL incorrectly. The standard “Not Found/404” page is unattractive and can lose you potential clients.

Usability testing is the science of simulating the user’s experience to find and correct problems before they hinder real users. The website owner will also learn whether users enjoy using the site, if they understood its purpose, and the likelihood that they will return in the future. Testing usually involves monitoring or recording the efforts of individual participants as they attempt to perform tasks on the website.

Is it cost-effective for small businesses like yours to try usability testing? Absolutely! You can learn a tremendous amount through even a small, bare-bones process.  Recruit participants with a simple invitation, such as: “Can you come over and play around with our website tomorrow and tell us what you think of it? You’ll be paid and it won’t take long.” Don’t be afraid to approach friends or neighbors, as long as they don’t know anything about the site before they begin. Take the participants individually into a quiet room and ask them to perform rudimentary website tasks. Take notes on problems they encounter, as well as whether the subject enjoyed the website and understood its purpose. After testing, ask the participant what they remember about the site, as poor recollection indicates that your site is not structured logically. Finally, ask them for suggestions about how to make the site better. Their suggestions and your observations, as well as optional video footage, can be viewed later and used to make changes to the website. Subsequent testing can be performed to ensure the effectiveness of the changes and find ways to further enhance the site’s usability.

Also, consider the following tips:

• Test yourself first. Ensure that the tasks can be completed in a reasonable amount of time by first performing the tasks yourself.
  
  
• Choose a facilitator who is calm and empathetic. They need to be able to convey to the participant that the website – not them – is being tested, and that failure to complete a task provides valuable information for the site developers.
  
  
• Tasks should be essential to the website’s success.  Use realistic scenarios rather than instructions. For instance, ask “How much does an inspection cost?” rather than “Find and click the rates and services link.” You want to simulate real-world scenarios that would motivate someone to use your site.
  
  
• Have a second observer take notes, if possible. The participant may feel uneasy if you’re taking notes in front of them, so have a note-taker observe from a distance. You can then devote yourself to facilitating the test rather than quickly scribbling notes.
  
  
• Test early. It’s easier to fix problems early on than to throw together a last-minute solution that may affect other site elements in unpredictable ways. Participants will give you more honest feedback if they feel like you’re still in the design stage and you don’t have much invested in the site. Also, web users resist changes once they’ve become used to a site, so it’s better to perfect the site before it goes live.
  
  
• Test other websites, if time permits. Learn what makes other websites successful and gain an edge on your competition by evaluating their websites.

Most of all, don’t overdo participant recruitment! Small businesses sometimes skip usability testing because they think they need large numbers of only their target demographic, but this simply isn’t the case. 

Here are some tips for recruiting test participants:

• Accept (almost) anyone. The effort required to recruit and test perfectly representative subjects outweighs the benefit of obtaining useful feedback. Steve Krug recommends not getting hung up on finding users who reflect your audience, and advises instead to “take anyone you can get (within limits)” and “make allowances between the people you test and your audience.”
  
  
• Test a few subjects at once. Jacob Nielson recommends testing just five participants, Steve Krug says only three or four. Even a single test subject is worth testing, if that’s all you can afford. Later participants become redundant and wasteful after the first few participants discover most of the website’s major problems. If you can afford a huge number of participants, it’s better to test half of them, make changes to the website, and then test the remainder, than to test the whole group at once.
  
  
  

Once the content is in place, consider the following tips before your website goes live:

• Register a user-friendly domain name. Web users dislike adjusting to new domain names, so get it right the first time by foreseeing some common usability issues.

Choose a URL that is:

• easy to type. Keep it short, as URLs are often typed manually, and lengthy ones are more likely to be entered incorrectly. Short domain names are also more memorable;
  
  
• easy to spell. Avoid words that are commonly misspelled (such as “grateful,” “license,” “questionnaire,” etc.) for all pages on your site. You can even purchase domain names that may be confused with yours (for instance, Phoenixinspection.com, Phenixinsoection.com, and even Fenixinspection.com). Use a misspelled domain name-generator to discover common ways users may misspell your URL; and
  
  
• guessable. Web users commonly find websites by correctly guessing the URL based on the name of the business, so secure your company’s domain name as your URL. Guessable URLs are also more memorable.
  
  
• Use meaningful page titles. Page titles (in the <TITLE> tag) are the first items displayed in search engine results, so use descriptive, clear words.
  
  
• Don’t require user registration. Don’t require visitors to register or enter personal information in order to access your website, unless it’s necessary. Web users don’t even like sharing their email addresses to avoid receiving spam.