BEST PRACTICES FOR COMMUNICATING ONLINE

WENDY KINCAID | CREATIVE PROFESSIONAL, EXECUTIVE

A former manager once told me, “All you need to do is pay attention.”

But, how do you know when you’re doing the right thing on your website, especially when you already pay attention and see so many sites doing things differently?

I once proposed some of these best practices to a marketing colleague. She rightfully and professionally came back to me with, “It seems there are many schools of thought.” To which I replied, “Anyone can have a website. It doesn’t mean they’re doing it right.”

But I had to confront the question: How do we know what’s right?

One important way to know what’s right is that we get to know our target audience. To do so, we must gather data, test, measure, and then continually improve.

But even before those essential steps, we have access to many excellent resources that help us learn more of the basics.

These best practices have evolved and been shared among web professionals for decades now. Most of these practices are common sense, and colleagues I share them with often understand them immediately.  

My goal with this chapter is to impart to anyone with a website – personal or organization-related – these simple principles that can help any website be more effective and ultimately, ongoingly, successful. 

BILL WAS RIGHT: CONTENT IS KING

In 1996, Bill Gates coined the phrase “Content is King” in his essay of the same name. Almost thirty years later, his words continue to ring true.

“One of the exciting things about the Internet is that anyone with a PC and a modem can publish whatever content they can create.”

But presenting content online is different – especially from a printed word perspective. It’s important to know that online users by and large scan instead of read, and part of that scanning is also looking for links and navigation to other areas of the website to find what they need.

Making your content clear and scannable and your navigation intuitive are imperative to a site’s success. For a quick example, use bulleted or numbered lists instead of compound sentences. The space a bulleted or numbered list allows really helps visually.

It’s okay to have a paragraph that’s one sentence in length; it’s easier to scan and consume.

WEBSITE ACCESSIBILITY IS THE FUTURE

Obviously, the shorter the content, the easier it is to scan. The appearance of content is important, too.

When I worked for a nonprofit, one of the board members called a meeting to show me the areas on our website that she had trouble reading. 

She was about as old as I am now at the publication of this book, and only now do I understand why she couldn’t read the online text – the font was too small and the color contrast between the gray font and the green background made it even harder to decipher.

These are both accessibility issues, and not because someone has a disability – unless being over sixty is a disability. (Personally, I am enjoying it.)

I also remember getting feedback from a customer at an earlier job who said, “Tell your designers not all users are in their twenties.” Point taken.

Today, I test using the WebAIM.org color contrast checker to ensure we’re meeting the Web Content Accessibility Guidelines (WCAG).  (Go to  https://www.w3.org/WAI/standards-guidelines/wcag/ to view all the guidelines.)

WCAG is an excellent resource for all things accessibility, albeit lengthy and fairly technical in parts. WebAIM.org does a great job boiling WCAG down to – dare I say it – content that is more easily consumed.

WCAG takes into account all disabilities that could pose challenges accessing content online; this includes, of course, people who are hard of seeing and hearing, as well as people prone to seizures and other visual and audio challenges.

CLEAR AND PRESENT CONTENT

Clarity of content is vital to your site’s success. That very much includes links and navigation. We used to say WYCIWYG – What You Click is What You Get.

There is never a reason for a link to be called “click here” or just “here.” When you do that, you’re making the user read the context around it so they know if they want to select it.

Instead, the link should tell the user exactly what they will see when they select it. Remember, people scan, often looking for links in their quest for specific content. 

People who are hard of seeing may use a screen reader and ask the tool for only the links on the page to be read. “Click here” clearly doesn’t help them at all.

CONFIDENCE IN NAVIGATING

Over the years, I’ve heard an adage about all content being three clicks down from your homepage. 

This is not what I’ve observed in any usability testing I’ve been part of. What I see is that if the scent of information is prominent and the experience is intuitive enough to get people to the content they need, they have confidence in the user experience.

This is important because confidence in the user experience directly translates to confidence in the person or company behind the website. A positive user experience reflects on your brand.

A link that says, “View our Annual Report” is pretty clear if your report is online. If it’s a PDF, it’s important to say, “Download our Annual Report.” That way, there are no surprises for the user.

Links can also be longer than navigation or graphics and buttons. “Learn how to make your website accessible” is a very clear link – well, as long as it takes the user to a page that does just that! 

Ideally, the title of the page they link to will be a repeat of the link, which adds to the confidence of the experience. For that previous example, a title would look something like, “How To Make Your Website Accessible.” Any user would have that click rewarded there.

SEARCH ENGINES AND YOU

There are more reasons than clarity for having content repeated in this manner. Even though there are paid ads on Google, the best traffic to your website is always organic traffic, where the user types in something like, “organization culture consultant.” And you’ll want your website to rise to the top of the list, or at least be near the top.

This is called Search Engine Optimization (SEO) and is based on keywords. If you are an “organization culture consultant,” you’ll want to make sure what you do is described in the variety of ways you may hear it used. For example, working the word pairing “company culture” into the content in case someone searches for “company culture consultant.”

The most important keywords should be reflected in the page titles, and then again in the content for emphasis. Subheadings should also be taken into account. It may seem redundant but it’s very important to rinse and repeat here.

There are many tools that can help you know which keywords are going to pop more. I’ve used a variety to be sure to incorporate multiple results. The two I’ve mostly used are KeywordsEverywhere.com and Moz.com.

The page title, which is the main head on a page, is the most powerful, so be sure to get your keywords throughout your site in your page titles. Then utilize subheadings. Keep in mind that the content on the page should contain those keywords as well, in varying combinations for full coverage.

CODING (NOT-HACKS)

Another two places to use keywords to optimize your site for search are the HTML title and the meta data.

The HTML title is what you see in the tabs of your browser. For example, on Amazon it says, “Amazon.com. Spend less. Smile more.” Okay, so the “Smile more” can be lost in certain tab sizes, but getting the keyword Amazon in there is obviously crucial.

If your website represents you as a brand, your HTML title should certainly reflect your name and what you do. Like, “Josephine Huntington | Private Chef and Creole Master” Even if the end gets cut off in the tab, Google and other search engines are reading those keywords as important parts of your content.

Even more crucial, the HTML title is the main link that displays in search results. As does the meta description.

The meta description is in the code of the page, so not visible on your site and behind the scenes, except when you come up in the search results. Then, the search engine goes and grabs your meta description and in the background, leans in on the keywords there.

For example, The New York Times search results display:

HTML title: The New York Times – Breaking News, US News, World News and Videos.

Meta description: Live news, investigations, opinion, photos and video by the journalists of The New York Times from more than 150 countries around the world.

The HTML title gets cut off on the tab, as well as the search results, but they at least get those juicy keywords in. It’s interesting to note that “US News” is read as “us news” in an accessibility screen reader. Punctuation is important.

The meta description should be between 140 and 160 characters. That includes character spaces. If it’s any longer, Google will truncate it in the search results display. This is not your largest problem, especially if you went a little long to get more keywords in the background there.

VISUAL AND TEXTUAL CLARITY 

Back to clarity of content. It can be tempting to be clever, enticing people to select a not-clear link and go to a page to find out what the content is about. Like a direct mail envelope you want people to open and engage with. 

When I was at the nonprofit, we launched the capability for our customers to enable friends and family to give to favorite charities from their accounts. We used a homepage link, “Giving Just Got Easier,” but the traffic to the page wasn’t as high as we hoped. We changed it to “Give the Gift of Giving” and the traffic increased to our expectations. “Just Got Easier” was too vague.

This is a great example of why you want that clarity. It is not just for a confidence-building user experience. You want that clarity to maximize traffic to what you’re selling and making available. But never fear: cleverness and clarity can (and should) coexist. Just make sure the clarity quotient is always there.

Web coding can also achieve interesting link effects. This could be features like a different font color on mouseover or the underline showing up on mouseover. Google does this – displaying a previously visited link in a magenta instead of their link blue. That may not be desirable for the aesthetic of your site, but it is possible and can be helpful if your site is content heavy.

You just want to make sure your links are visible and easy to interact with. The standard HTML blue was selected because it pops. In hexadecimal, it’s #0000FF.

Remember that: the popping. Some sites have their links and text the same color with the link underlined. Where that still makes sense and is usable, the links do not pop as much as a colored link does. 

Again, always check your color contrast. An orange link on a white background may “fail” in the tools until you make it almost rust. I’ve had to adjust many style guides to “pass” online color contrast standards.

UNIFORM RESOURCE LOCATORS – OR, URLS

Another part of the content that will be picked up for SEO purposes is the URL. 

URLs are easy if you’re aiming for consistency. If the displayed page title is “The Top 10 Restaurants in Poughkeepsie,” the URL can easily be “/the-top-10-restaurants-in-Poughkeepsie.” Again, repetition with the keywords is always good.

(Note that Poughkeepsie doesn’t need to be capitalized. Capitals aren’t recognized beyond the first slash. It’s Unix.)

It’s important to note you should use hyphens between words, not underscores. Google parses the hyphens, but not underscores, as they look for those precious keywords.

You may be wondering now, where is the place I can go to see how Google’s algorithm works? The real answer is, work at Google. 

It’s a jet fighter engine that’s being tweaked and adjusted all the time. Keeping up on changes that others are monitoring is important if organic search is where most of your traffic is coming from. But don’t worry. There are many sites out there, like Knucklepuckmedia.com, that attempt to dissect Google’s secret sauce for you.

BUILDING YOUR WEBSITE 

Let’s step back and say you’re looking to launch a website or redo an existing site. You might find yourself just a tad overwhelmed. Where does one start?

Everything really begins with your target audience:

• Who are they?

• What do they want? 

• What makes them engage? 

• What would make them come to your site?

It’s easy to do a competitive analysis online. Pick a company like yours or a site with similar services offered and see how they’re presenting their value proposition. 

You may like some and not others, which is a good comparison to help you get where you’d like your site to be. Remember to pay attention. As you encounter sites you don’t like, note what you didn’t engage with or found off putting so as not to repeat it.

In the same vein, if you like aspects of a site, note those and why you liked them. Don’t worry about creativity plagiarism out there. It’s the World Wide Web. Everyone’s doing just this, looking at sites they like and “leveraging” ideas.

At the very beginning, and in a perfect world, you’ll have the time and contacts to meet directly with your target audience in a design thinking or focus group kind of way. 

If you’re building a personal brand site, this might be as easy as asking a few people you know from your network and the industry you’re in. You can even show them some of the competitive sites to see how they react, if they liked the same things or not.

This is all before content is written, design has begun, or coding has started.

FUN DESIGNING WITH CUSTOMERS

In the last ten years, design thinking has become a practice that is taught as a business course in schools. The approach makes perfect sense: before you formulate your website strategy and roadmap, get your target audience to tell you what they want.

I’ve seen this exercise done in person many times, bringing in customers and working with low-fidelity materials, like sketching, to help the customers express what they’re looking for and help you confirm and validate what you’re hearing from them.

Another exercise, whether with customers or just internal stakeholders, is card sorting, which I do with Post-It notes. A content topic, no matter how big or small, on each Post-It. The biggest ones will likely become your navigation and the smaller ones will eventually tuck underneath those.

If you feel like you’re trying to force a topic into a larger category, you probably are. 

It might make sense for a smaller, more singular topic to be on its own in a “utility” navigation – a smaller menu than your primary navigation. Utility navigation can often include pages like Contact Us, Log In, About, Cart, Account, and Profile.

Your footer links at the bottom should always reflect all the pages on your site in a sitemap fashion. Most sites do that these days, but it’s also important to have a separate page as a sitemap. Yes, it’s all about the keywords again, but Google also rewards sites that have sitemaps in their search results.

TESTING AND LEARNING

Once you’ve taken all the input from customers and internal stakeholders and have a proposed sitemap, it’s best to test that one more time. In testing, focus on any doubts you already have. 

If your testers validate a content topic or placement, move on. If they have hesitations with their confidence in the navigation, that’s a good sign you haven’t solved it quite yet. Back to the drawing board.

Once you have a near-final sitemap, content development and design can begin, with coding as a fast follow. Often, this stage is assembling content from existing sources, but remember that print is different from web and will likely need to be edited and translated to more scannable content. This can include features like shorter paragraphs and bulleted lists.

At the most, the design can be reviewed by customers for their input, and at the least should be reviewed by stakeholders. 

Here is where subjectivity comes into play. A lot. Once people see a design that looks thought-through and professionally done, they will have varied reactions. Some might reference other sites they like – “PayPal does this…” – and others might just say, “I love orange.”

It’s up to you to sift through the feedback and take what you think will fulfill the majority of the customers’ expectations, as well as company goals.

Once you have all the input you can fit in and afford to get, it’s time to build the site. (And it’s never time to stop getting feedback.)

If the site’s purpose, schedule, and funding can afford usability testing, that would be highly recommended. 

EMBRACING USABILITY AND ANALYTICS

Usability testing comes in different forms, from task-based where you tell someone to register for an account or purchase a specific item, to a “passion quest” where you watch how someone organically engages with your website, going to the content they’re interested in, and navigating the site from their perspective.

Note: it’s always beneficial when the testers are interacting with the site to have them speak their thoughts out loud. It’s remarkably interesting when you hear someone describe why they’re going where they’re going. You learn much more that way.

After you launch a site, it’s important to continue to get feedback. It could be given through a widget, like OpinionLab or ForeSee, or through online surveys, like Qualtrics or Survey Monkey.

But these are all subsets of your customers providing feedback. You’re also going to want the macro approach – the data from web analytics that tell you how many people are clicking where, when, and for how long they stay on a page. 

I always caution against overanalyzing the latter because people can easily go to a site and leave it up, opening another tab or making lunch. But even with the necessary inferences, web analytics are gold.

If you see most people going to a lower-level page and staying for five to ten seconds then abandoning, it warrants some analysis as to why. Maybe the link wasn’t clear and they didn’t find what they wanted or the page wasn’t engaging to them. 

Either way, that analysis can be internal guessing or looping in customers if internal is hindering you from getting a solid answer. I always say, “Let your audience tell you whenever you can.”

With all data, analysis, and test results, it will be up to you to determine what needs to be changed and in what priority.

MINIMIZING BROKEN EXPERIENCES

Other monitoring you should do regularly is broken link checks, especially if you’re linking to other websites. URLs can always change. Many of these tools, like BrokenLinkCheck.com, are free. 

Obviously, broken links on a website erode confidence in the user experience, which translates into lower confidence in the brand as well.

About error pages – this is my preference and may not be right for you or your site and/or target audience, but I really enjoy the humor-infused error pages. 

Instead of “Page not found,” it’s just more fun as a user to read something like, “This is embarrassing! I can’t find that page. It may be my fault. You can try again.” 

The “try again” can be a link to the homepage if you don’t have a site search and it’s a “retired” link/page. The user will know what to do – navigate to what currently exists.

INTUITIVELY INPUTTING

Lastly, I want to cover webforms – which are any inputs a user needs to do to submit information to a database, like register, create an account, log in, or perform a search.

We all experience frustration using webforms. Some auto tab, others you have to tab yourself. It’s like every webform is a different experience that has to be learned.

I’m a huge proponent of auto everything. Don’t make the user figure it out. Let them just keep typing and see their cursor automatically progress to the next input field. 

For example, data and phone number formats: let the users input anything they want – hyphens or no hyphens, periods if they want – and in the background wipe away the symbols they used to get the pure numbers, then translate them into the database. 

Error messages and display placement here are also critical. How many times have you filled in what you thought was a complete and accurate webform, only for the submit button to seem to do nothing or is grayed out and you can’t proceed? Then, if the “error” isn’t clear, on to problem solving. 

Like everything, the user needs to know what to do – not what they did “wrong,” because if they didn’t do it “right,” that may be due to an unclear user experience. (Keep tabs on that data and you will know if it is or not.)

Asterisks have been commonly used to denote required fields, but that doesn’t work in an accessibility scenario with people who are hard of seeing. The clearer words “required” or “optional” are better used for screen readers, for example, than “asterisk.”

An ideal would be as the user goes to submit, they are taken to the section on the page where the (first, then second, etc.) error occurred and prompt them to do exactly what is required – in red font. 

Of course, whatever terms are used to describe how the error can be fixed should be straightforward and non-penalizing. Like, “Your birthdate is a required field,” rather than a more robotic, “Birthdate required.”

Also, the “submit” action is different on so many devices and sites. It would be great if we all agreed that the submit is green and on the right and cancel is gray and on the left. Personal preference, I know, but an accepted system would be helpful here.

SEARCHING FOR SOMETHING?

As for site searches, they all seem to have their flaws. However, there are still things usability-wise that can make the experience better, especially autocomplete, also known as predictive text. 

Simply put, this is when you type something into an input field and the database has one or many options that display in a dropdown as you input more characters, so the user can link to an offered-up result.

Site searches can be tricky to maintain in a content-heavy site where you really need to have a synonym database and keep on top of the analytics to tweak as needed. If you think your website goals don’t require one, I heartily support not over-engineering here.

AUTHENTICALLY USABLE AUTHENTICATION

Logins are of particular wonder to me. If anything should have reached a common ground by now, one would think it would be logins. Similarly, gas station pumps are almost exactly the same interface on every one of them these days.

Puzzlingly, this is not so with the internet. Every company seems to have its own way of doing the account log in, which is unfortunate for us end users.

I can unequivocally say two-factor identification is the way to go. Maybe not as much as the financial services company that has my 401(k) – required every time! – but certainly a preference to lockouts. No question. Especially with archaic companies that you need to call to get unlocked.

Two-factor authentication features a text message to a separate device to input a code that validates, “It’s me.”

There are other user experience benefits you can implement in the login process. Of course, an explanation of the username or password formats accepted. (Again, wouldn’t it be great if these were universal and uniform? But, alas, there is not.)

The ability to hide and show inputs is also a great benefit, with an eye icon or the actual words Hide / Show (which are better for accessibility). 

Most people input their data fairly regularly on many sites at this time, and I hesitate to endorse the double entry of email address when registering since we all type ours all the time. Just give me the option to show it once so I can check it, and we’re good.

WEBSITES NEVER SLEEP

I hope this information has helped you approach your own websites, either new creation or updating, with more confidence in making the user experience work for your audience as well as your goals.

It’s definitely an always-learning situation, not only for any new technologies out there, but as audiences age and morph, so should your online offering.

All you need to do is pay attention.