Basic functionality

When you consider what’s at stake with your business when you design your own site, you have to figure out how to use function to influence customer decisions. We suggest attacking function at three levels.

At the first level are basic functions. Customers expect this lowest, or base, level of functionality. Basic functions include these features:

• Quick-loading pages: Customers don’t have the patience to wait for pages to load. Even if they’re still using slower dial-up connections (yes, there are still people who do!), you’re expected to ease that problem for them. If you don’t anticipate customers having varying speeds of Internet access and account for that difference in your web design, you just missed a potential sale.

  To decrease the need to load new pages in the site, consider using overlays or pop-up content boxes. These elements display additional information without the need to leave the page.

• Ease of navigation: When customers go from page to page in your site, the navigation tools you provide should allow customers to
  • Readily find and identify navigational buttons and links.
  • Immediately return to the home page, regardless of what page they’re on.
  • Return to the preceding or last-visited page by clicking a link.
  • See pages and sections they have visited on the site by using a link history, usually found at the top of the page.
• Working links: All internal and external links to pages on your site should be valid and working. In other words, customers don’t want to click a link only to find a Page Not Found message. Broken links that go nowhere also diminish the credibility of your site and indicate that you don’t update or maintain it.
• Viewable images: When you include photos and graphics on your site, be sure that the images — especially product images — load correctly and quickly. Additionally, avoid using grainy pictures or tiny images that are difficult for customers to see. When shopping online, customers increasingly expect to see multiple views of a product, or have the ability to manipulate the image for a closer view (we discuss this more in Book 7).
• Shopping carts: Yes, this is a category unto itself (and we discuss it in detail in Book 4, Chapter 5). We list it as an interactive function because all too often small websites continue to make the mistake of not even using shopping carts on their sites. Instead, customers are asked to call the company to place orders, or to print, fill out, and fax order forms to the website owner. That’s a fatal mistake! You must provide a method for shopping and paying for items over the Internet.
• Mobile-ready: Today, more websites are viewed on a mobile device than on a desktop computer! That may not come as a surprise to you if you are as attached to your smartphone as we are, but it does come with special considerations when designing your website. In addition to customers using mobile devices to research, compare, and buy products, mobility is also increasingly important in search results. Google penalizes your site’s rankings if it does not meet its mobile-friendly requirements! As a result of this changing emphasis on mobile from search engines and consumers, your website must look good and function well on all types of mobile devices, including tablets and smartphones. The best way to approach this is to make sure your website is mobile responsive, which means your site automatically (with the use of the right code) resizes itself to fit the type and size of screen your customer is on — whether that’s a desktop, a laptop, a small smartphone, a large smartphone, or a tablet. As a part of responsive design, for example, the site’s navigation bar may shift from running across the top of the page when viewed on a desktop to being viewed as a drop-down menu on a phone; or images may appear smaller; or the text may be repositioned to make it easier to read on a smaller screen by scrolling vertically verses horizontally. The take-away is that a poor mobile experience can send customers to a competitor’s site faster than you can say, “mobile responsive design!”

Interactive functionality

At the second level of site functionality are interactive functions, which actively engage customers with your site. Although this type of functionality isn’t necessary to place an order, it can increase value and sales for your site. Samples of interactive functions include

• Site search: Give customers a tool that enables them to quickly search for information on your site. This function might not be as useful if your site is small. However, if you have a site filled with products or layers of data, customers appreciate having search capability.
• Reviews: Consider offering your visitors the option to review or rate the products and services you offer. This feature is particularly helpful, and almost expected, if you have an e-commerce site. Research shows that customers’ buying decisions are heavily influenced by online reviews.
• Community forums: Forums (or types of discussion areas) provide options that let visitors interact with you and with one another. Many people consider forums a free form of technical support; if your community area or forum boards stay active and updated, this added function might keep customers coming back to your site.
• Blogs: These extremely popular online journals provide another opportunity for customers to interact with you and others.
• Member registration: You can make registration free or make it a condition of accessing certain sections of your site. In return for signing up as members, visitors can receive newsletters, site updates, or e-mail messages announcing new products. Registration provides members with benefits and provides you with customer contact information — a win-win situation for both parties.

Enhanced functionality

The third level of site functionality is reserved for tools and features that offer customers an enhanced experience on your site. Items of enhanced functionality often include

• Video, online demonstrations, and tutorials: Depending on the complexity of the products or services you sell, online demos and web-based tutorials can be useful. Customers receive the value of trying out the product or discovering how it’s used, which often increases the likelihood of a purchase. Offering online learning options is easy and affordable by using videos (especially through YouTube). And videos of any type, from customer testimonials to interviews with employees, can be a simple way to add value and increase visitor engagement on your site.

  Google Hangouts and Google Hangouts on Air are easy ways to create online tutorials or demos to share with your visitors. Hangouts enables you to do video calls and chats from your computer, and Hangouts on Air lets you broadcast to a wider audience and record directly to your YouTube account. Use both as quick methods for providing helpful, interactive components to your site. You can also use Facebook Live to produce live video, but currently the video must reside on your company’s Facebook page only.

• Live or 24/7 customer support: The Internet never sleeps, and neither do some of your customers. Your customer service is greatly enhanced if you can offer unlimited support. Although it isn’t necessarily technical support, your customer might need to ask a question before making a decision to buy your service or product. Some research indicates that offering live support can increase online sales by as much as 20 percent.

  You don’t have to set up a full customer call center to offer live or 24/7 support. Several companies have developed the service for even the smallest online retailers. Try LiveEngage from LivePerson (www.liveperson.com/liveengage) to add live customer support to your website. This tool offers various pricing plans based on the features you choose and the size of your business, including a pricing plan that charges only when someone uses the chat function on your site.

• Geographic locators: Okay, if you have physical locations in addition to your web presence, geography-related tools are a plus. Your customers appreciate access to maps and driving directions, store locators using interactive maps of the United States (or other countries), and even product-locator searches based on zip codes.

  Customizing a map for your site is easy with the Google Maps API. Visit https://developers.google.com/maps to get started. This free tool lets you create maps and driving routes that you can add to your site immediately. Another free Google resource, Google Places (www.google.com/business/placesforbusiness), allows your offline store to be found more readily by customers searching on Google. Of course, this is useful only if you also have a physical location.

• Second-language viewing options: Not all your customers speak fluent English. Savvy website owners offer customers the option to view sites in other languages. (For example, Spanish is one of the most popular alternatives in the United States.)
• Podcasts: Giving access to information by using several different forms of media is much more common than ever before, yet it is still considered an unexpected bonus. Try adding podcasts (self-published broadcasts over the Internet). Similar to video or Hangouts, podcasts are helpful ways to share more information about your products or services. You can also use podcasts to conduct short interviews with authors, designers, trend watchers, analysts, or anyone else your site visitors might find interesting (as they relate to your site). Because podcasts are available through third-party providers, such as Apple iTunes, Google Play, Spotify, and others, you have a chance to reach visitors through your podcast who might not otherwise know about your website.

As you see, understanding the value of functionality and the subsequent choices you make regarding function are major parts of developing a customer-friendly site. Building off functionality is also an opportunity to set yourself apart from your competition. You just need to take the time to plan.

Following basic design principles

When you’re thinking about site design, consider the following major elements that contribute to a winning look:

• Structure: The foundation of your site’s design is its structure, or layout. Determining the layout of your site requires that you make decisions about these elements:
  • Number of pages: Consider the depth of the site (the number of pages that are necessary).
  • Placement of the navigational toolbar: The series of buttons or links that people use to visit different areas of your site — referred to as a toolbar, navigation bar, or menu bar — is commonly placed along the left (or right) side of the site, along the top, or in in both places. Making your site responsive, or adaptive to viewing on mobile devices, is a critical part of site design today. Simple, fixed menu bars or drop-down menu bars are popular style choices when building a responsive website. Figures 2-2 and 2-3 show one of the ways to use a simple navigational bar that expands to reveal multiple levels of navigation.
  • Buttons, tabs, and links: Buttons you can use on the navigation bar come in unlimited designs, shapes, and colors (depending on the software you use). Additionally, you can use text, rather than a button, as a link. TravelOregon, shown in Figure 2-4, uses a different style approach to a navigation bar. You might also want to repeat a navigational bar in the form of links at the bottom of the page.
• Color: An influential design element is the color scheme for your site. Do you go bold and bright or soft and understated, or do you stick to plain white or neutral colors? Another consideration is how to incorporate those colors (or lack thereof) into the site. You can use a color as a background for your entire site, to highlight sections of text, or to separate segments within your site.

• Font: The font type and size you use throughout your site makes a statement. And with thousands of font styles to select from, you can send a variety of messages to your customers in the blink of an eye. Additionally, the text size you use contributes to not only the look of the site but also its readability. For example, text that’s too small might not be easy to read. Serif fonts, which have hooks and loops on the letters, are also difficult to view when used online. Sans serif fonts remove the extra detail and can be more easily viewed online.

  Font type is an element of web design that changes often, based on current design trends. For example, using creative, artistic, or graphical fonts became popular in 2014. In previous years, a simpler font style was preferred by most designers. The popularity of mobile devices is influencing font styles today. For readability with mobile responsive design, we’ve seen a return to simple, easy-to-read fonts. No matter which style you choose, it’s important to find a design that works for your brand and to be consistent across the site. To stick to the basics, see the following table for a list of some basic web fonts.

• Images: The use of photos and graphics (animated or otherwise) can complement your site if they’re used correctly. Images draw readers’ eyes to specific areas of your site and can help illustrate information and ideas. High-quality images have always been a necessity if you’re selling products. But now images are must-have elements for all types of sites — not just e-commerce. When you’re designing your site, think about how many images you’ll use, their size, and which location will produce the best effect.
• Social media: Unless you’ve been in a cave for the past few years, you know that social media sites such as Facebook, Twitter, Pinterest, Instagram, and LinkedIn continue to increase in popularity and that businesses of all types are expected to embrace them. (You discover more about social media and how to use it in your online business in Book 7.) Social media gets your customers more involved with your brand by encouraging them to comment and share information, which in turn could lead to more customers and more sales. To promote this type of activity, a decent amount of space throughout the website is used to persuade customers to “like” you on Facebook or “follow” you on Twitter. Other common social media tactics include offering customers the ability to pin, or share, images and product pictures from your website on social media sites such as Pinterest or Instagram. You need to consider where and how you place these opportunities on your site.
• Media: Video has become a common element that you should consider in the design of your website. The soaring popularity of YouTube, its influence in search engine rankings, and the amount of times it is shared through social media have contributed to the widespread acceptance and use of online video for all sorts of purposes. For some sites, this capability becomes an intricate design element. For others, it may be considered only as a marketing tool. Research supports the idea that video increases customer engagement (how the customer interacts with your site and brand) and can increase product sales (when using video for product reviews or testimonials, for example). You must weigh the pros and cons of video and decide where and when it will be used across your site, along with how to use it in a way that supports, rather than detracts, from your site’s usability.

Making design choices

You must make a number of decisions when you develop the look and feel of your site. How do you choose which options make the most sense for you? Generally, one or more of these characteristics dictate a site’s look:

• Your industry or line of business: If you’re in a conservative industry, such as accounting or financial services, consider that subdued colors with a simple layout might appear to be more professional. Alternatively, if a potential customer is searching for a graphic designer, the customer might expect to see a bright, funky design with lots of colorful images.
• The types of products or services you offer: Selling products or services that have a serious message (such as medical equipment) begs for a low-key design approach. And the information your site contains might require many layers of pages to provide research or product information. On the other hand, products that are fun or made for recreational purposes might sell better if the site is light and whimsical and filled with product images rather than with product data.
• An existing brand: Particularly if you have an established business, your site’s style or look might be predetermined by your company’s store or product base. You want your site’s image to be consistent with your established brand. In that case, you should pull design elements for your website from a logo, marketing materials, or the design of the existing bricks-and-mortar location.
• Your customers’ demographics and psychographics: Age, gender, education, and geographic location are examples of demographics. Attitudes, opinions, and values are considered psychographics. In general, the more you know about your customers, the more likely you are to create the appropriate feel for your site. Consider designing your site to fit the image of your target customer, especially with niche (or highly specialized) markets.
• Your personal preferences: Sometimes, your choice of design elements depends on which ones most appeal to your taste. (You get a say in this process, after all.) Okay, you shouldn’t design a site based entirely on personal preference, but nothing is wrong with throwing in a few elements that make your heart sing.

The final consideration in designing your website is to create a timeless look — but we don’t mean that you design a site once and never touch it again. A common pet peeve is a site on the Internet that’s outdated and looks like an early-generation “brochure” site. We instantly feel as though the company doesn’t care about its business or its customers. The company probably has a website only because someone told the company’s owner that one was needed, so he or she turned a sales brochure into a basic three-page site, launched it on the web, and never thought about it again.

If you want to create a website that’s considered timeless, keep these three suggestions in mind:

• Keep it simple. Whether a site was developed in 2001 or 2017, trends change. Trust us when we say that trying to keep up with every new web design feature becomes expensive and time consuming. By keeping your design elements simple and by using only one or two trendy features, however, you increase the design lifespan of your site.
• Keep the information updated and relevant. This advice includes everything from text and photos to hypertext links and copyright dates. Keeping the substance of your site current offers value. Also, you can easily overlook a graphical design that might make a site seem dated, but having incorrect or outdated content is an e-commerce sin.
• Avoid images or graphics that visually date the site. For instance, if you use seasonal or current event photos, your site can quickly become dated. (However, these types of images are suitable in a blog or an area of the site that you plan on updating frequently.) Similarly, photos of people can be telltale signs of an outdated site because of clothing and hair. The exception is if you intentionally use graphics or photos that evoke a retro feel or provide relevant historical information.

Before designing your site, do your homework. Search the Internet for competitors’ sites, and evaluate which design elements work and which don’t. You can even gather a small group of prospective customers and ask them which sites they respond to most.