WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES phần 4 doc

Like the search field, the button label should be explicit. Log In is ideal, but since users should theoretically know what they’re doing when they fill out those fields, getting cre- ative with the title is not going to harm the usability of the page by any measurable amount. 1 However, it is important that a label exists; loading the page with ambiguous but- tons invites uncertainty, as in Figure 5-7. Figure 5-7. While this site uses clear labels for its fields, the login button is only a small arrow, which invites uncertainty regarding the functionality. Using an explicit label on the button, like “Log In,” better defines the action. A survey of company sites Since the bulk of business websites are small and do not require the incalculable amount of content juggling that corporations like IBM manage on a daily basis, the majority of this book’s audience is comprised of small to medium-sized businesses. While general con- cepts and development practices are applicable to just about anyone, working through the detailed nuances of a site design requires particular attention to the unique ways a com- pany markets itself in its sector. This is particularly true in regard to the homepage design. To offer a broad overview of how small and medium-sized businesses present themselves, part of this book’s research involved studying the homepages of 200 small companies. These companies represent a diverse set of industries, from staffing services to coffee shops to technology consultancies. Most were purely brochure sites, although a few incor- porated e-commerce. The selection was deliberately random; the only discriminating cri- terion was the exclusion of pure e-commerce sites. 2 THE HOMEPAGE 103 5 1. Keep in mind that the button label should be “Log In,” not “Login.” When used as a verb, it is two words; when used as a noun, it’s only one word. There is never a hyphen. “Log in” and “log on” are interchangeable. 2. This is an admittedly subjective filter. As an example, one of the initial candidates was Zappos (www.zappos.com), a shoe retailer. The site had very little corporate information, and was focused almost exclusively on the shopping cart. By contrast, method (www.methodhome.com) had e-commerce, but contained a considerable amount of information about the company— an overview, career opportunities, and so forth. 8393CH05.qxd 8/2/07 1:55 PM Page 103 Figure 5-8 shows the survey results. There is also a short description for each aspect of the analysis to better explain what was required for a website to qualify for particular items. Figure 5-8. The results of the company site survey Global navigation [98.5%]: The criterion was simple—does the homepage use the same global navigation as the rest of the site, or is it inconsistent? The audience should always be presented with a comprehensive menu that accurately reflects the content, and they should not be surprised by a different menu when they actu- ally click beyond the homepage. Logo links to homepage [74.5%]: This criterion is fairly self-explanatory, and the results were very encouraging to see. On most sites, the logo link was universal, including the homepage; on some, the functionality was just internal and the homepage logo did nothing. Design above the fold [51%]: This was met if the homepage did not produce verti- cal or horizontal scrollbars when viewed in the Firefox browser on a PC, in its default state, at a resolution of 1024 ✕768. Company description [67.5%]: For businesses, it’s very important to include a short, accurate description that encapsulates exactly what the company does. This num- ber was disappointingly low; there were many sites that simply left the visitor scratching their heads. Billboard [60%]: The requirements of this item are a bit soft as well, but the defini- tion of a billboard is some type of compelling graphic that incites a click. Large, nonfunctional photographs do not count—the graphic or animated piece had to drive traffic to the interior of the site. Testimonial [11%]: A testimonial was defined as an actual quote provided by a customer, represented as a complete sentence, with proper attribution (name, company, and sometimes position) present. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 104 8393CH05.qxd 8/2/07 1:55 PM Page 104 Featured product [28.5%]: If any typeof product or service received a special high- light, it was included. This was especially popular for sites that had e-commerce functionality, as they were trying to advertise specific products. News/press releases [51%]: This did not include full press releases, but rather head- lines linked to the News section. Search field [21.5%]/Login fields [8%]/Newsletter subscription [10%]: Websites only met these criteria if the actual field and button were present. Many sites, for instance, had a Login link going to a separate page, but since this is really just another item in the navigation, it did not count as homepage content. Properly written copyright [80.5%]: Many websites did not have any copyright at all; others were technically incomplete. Out-of-date copyright [32%]: Too many copyright notices were painfully outdated, some going back to 2001 and 2002. (Keep in mind that this survey was conducted in May of 2007, so these companies had months to update this to the current year.) While the 32 percent represents all of the companies surveyed, a more pertinent statistic is that of the 161 companies that did include a copyright, almost 40 per- cent were out of date. Design considerations for usability It cannot be restated enough that all sites are different. A designer’s personal taste— filtered through the content requirements of the corporation, often soured by the fickle whims of a marketing team, and occasionally upturned by the CEO’s wife—contributes deeply to how a website homepage is ultimately designed. Every business sells something different. Every business has its own unique target market. Every business has its brand equity and market share aspirations. But in the end, all businesses exist on the Web in some form, and that means they have a homepage. The homepage has been subjected to countless usability studies by a legion of design pro- fessionals, hobbyists, academics, accessibility watchdogs, and web nerds. Very few things are agreed on within a granular scope, but the sum of their findings—which are often dif- ficult to qualify individually—can be distilled into a few general guidelines applicable to just about any domain out there. The fold Much has been studied and written about the proverbial fold, the magic line that sepa- rates the content visible when first loading the page from the content only accessible by scrolling downward. For years, the eternal marketing mantra brainwashed designers into thinking everything must be above the fold. Different studies support and argue this; one study argues that designing exclusively above the fold is obsolete, 3 and another maintains that the fold continues to present a barrier to information. 4 THE HOMEPAGE 105 5 3. Jared M. Spool, Christine Perfetti, and David Brittan, “Designing for the Scent of Information,” User Interface Engineering (www.uie.com/reports/scent_of_information/). 4. Jakob Nielsen and Hoa Loranger, Prioritizing Web Usability (Berkeley, CA: New Riders, 2006). 8393CH05.qxd 8/2/07 1:55 PM Page 105 At one point, the fold was pretty well defined. For years, 800✕600 resolution was the gold standard, with well over two-thirds of Internet users working within that window. At the time of this writing, 1024 ✕768 accounts for more than half of the Web’s traffic, but the landscape is significantly more complex, with the vast range of monitor resolutions (including nontraditional wide-screen ratios) blurring the mathematical definition of the fold and creating a moving target for designers. For instance, a 760 ✕400 pixel design fits comfortably within a browser set at 800 ✕600 resolution, but as you can see in Figure 5-9, it’s completely dwarfed in a monitor running 1600 ✕1200. Figure 5-9. A typical homepage optimized for 800✕600 shown at different resolutions. Optimizing designs for 1024✕768 resolution creates a design that survives much better in higher-resolution monitors. The crowd wisdom—which is supported through plenty of anecdotal evidence around the Web—is that the fold is a very real information speed bump. This is not because users are technically inept, as Jakob Nielsen’s first usability studies from 1996 claim, 5 but because they simply do not bother to look. They assume that the most important content will be presented first. And the voracious speed at which readers consume sites—anywhere between 5 and 15 seconds to make a judgment on the relevancy of the content—does not help matters. Going forward, it is safe to design for 1024 ✕768 resolution. The number of old monitors is dwindling, and new laptops and flat-screens support a much richer pixel depth. Despite this larger canvas and the increased savviness of the Internet community, material above the fold—at any resolution—gets far more attention than material requiring a scroll downward. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 106 5. www.useit.com/alertbox/9605a.html 8393CH05.qxd 8/2/07 1:55 PM Page 106 The F pattern Recent technology has allowed companies to perform eye-tracking studies on the reading patterns of web users. These tests are usually performed by a company called EyeTracking, who outfits people with a large helmet of wires and lasers, not unlike the 1950’s version of Doc in Back to the Future. The subjects are then instructed to navigate and use a specific web page, and the contraptions precisely follow their eye movements as they scan infor- mation. The aggregate data is then shown as a heatmap layered over a screenshot of the page. This ultimately illustrates where users focus their attention, and the patterns in which they consume content. This heatmap commonly comes up as a large F-shaped pattern, with the upper-left corner comprising the densest activity, coupled with a long tail down the left side and two hori- zontal tails reaching right, the first at the top of the page (usually where the navigation is) and another a few inches below (right in the middle of the content). The coolest activity is in the bottom right corner. These results have captured the attention of the web commu- nity because they present the first empirical evidence of physical reading habits. This reinforces to designers that the upper left is the golden corner of the page. This is most likely fallout from millions of sites placing their logo in that spot—the corner has become synonymous with the site’s identifying mark, and the primary means of returning to the homepage. The left and top edges are also high-traffic areas with people looking for the navigation. The top-right corner is very cold and the bottom-right even colder; neither would be optimal for content that requires high visibility. These heatmaps also show that people ignore overdesigned graphics. Heatmap after heatmap reveals eye movement actively avoiding any type of flashy graphics, even when they are legitimately tied directly to the surrounding content, because they look like advertisements. If you need to call attention to a very specific piece of content, make sure the visual design does not jar too heavily with rest of the homepage. The introduction page In the Neanderthal age of the Internet, gratuitous introduction pages were common on business sites. While they were intended to pump users up with flying text and zooming images, they accomplished little more than frustrating people who just wanted to get to the homepage. These were commonly done in Flash, and when a “skip intro” link wasn’t present, forced readers to suffer an inexcusable download time (remember, this was the age of dial-up) and an even more inexcusable self-serving propaganda piece that rarely— if ever—had any content of value. Thankfully, designers and (most) businesses have come to their senses about splash pages, and they are rare today. However, because of their legacy—and because some naive peo- ple still insist on having them—it must be reiterated that splash pages present one of the biggest usability blunders of the Internet age, and justification for their existence resides tenuously in two narrow exceptions: THE HOMEPAGE 107 5 8393CH05.qxd 8/2/07 1:55 PM Page 107 1. A site with content specifically targeted toward a minimum age group. Alcohol- related sites are an example, where sites ask readers to verify they are 21. There are also certain sites needing kids to verify that they are 13 or 18, depending on the content. 2. Truly international business sites asking users to choose a language before pro- ceeding. This functionality can be accomplished different ways. For instance, all users will land on the default page written in the most common language (for instance, English, German, or Spanish), and then provide alternate versions in the navigation. Some companies, like Jaguar (shown in Figure 5-10), prefer to lay out international options in the very beginning, and then maintain subsidiary country- or language-specific sites for the brand (in this case, clicking United States would take you to www.jaguarusa.com). Figure 5-10. Jaguar uses a landing page as a portal for customers to choose their location. While these reasons are somewhat acceptable, they still present a barrier before the user even reaches content. In 99.9 percent of cases where the question of introductory splash pages even comes up, there is no good reason to develop them. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 108 8393CH05.qxd 8/2/07 1:55 PM Page 108 Summary Your homepage is one of the most critical pages in your website, whether it be a million- page labyrinth or a six-page brochure site. It must communicate the brand value, concisely describe what your business does, and then lead the user deeper into the site. The content that gets included can dramatically affect whether a user makes the effort to explore the site further, so choose wisely and adhere to the few basic usability guidelines on which the general web community agrees. When done right, your homepage can be the perfect wel- come sign for an Internet-weary traveler, and by saying the right things tempered with an appropriate design, it can make them feel right at home. THE HOMEPAGE 109 5 8393CH05.qxd 8/2/07 1:55 PM Page 109 6 THE ABOUT SECTION 8393CH06.qxd 8/2/07 2:05 PM Page 111 Every business has a story. It might take only 15 seconds to tell (“I quit my job at Kinko’s to start a new business fixing large businesses’ copiers”), or it might comprise epic sagas involving industry pioneers, hair-brained inventors, stock market fluctuations, and mergers and acquisitions. Whatever the case, every company wants to tell their story—it offers a common rallying point for employees and company leaders, and the historic foundation provides context to the current incarnation of the business. It’s always nice to see “where we came from.” The About section of a corporate website offers an avenue for businesses to tell their tale. In fact, the section can and should be used for far more than a history lesson—it is the perfect platform for educating the visitor on all aspects of the company itself, from listing current job openings to profiling the board of directors, and from broadcasting the latest corporate news to offering comprehensive contact information. The bulk of any company website should be focused on marketing products and services and driving relationships with customers, but most people seeking to do business with you are going to do their homework and read your About pages so they can understand the philosophy and per- sonality of the business they are about to give their money to. Because of this, maintaining a strong, accurate statement about your company is important. This is where public rela- tions intersects with marketing. These days, almost all websites have at least one page about the company. Even e-commerce domains contain a small About Us link with some fundamental information about the vendor. Some businesses that cannot feasibly sell their product online and require human interaction to conduct a transaction (like a law firm or enterprise-level software purchase) rely heavily on the About section to help build their case as a rep- utable company. In these instances, profiling corporate principals, well-known customers, previous successes, and more can heavily influence whether a person browsing your site for information makes that critical step toward contacting you. This chapter is going to explore the About section in depth. We’ll discuss the architecture of the pages, suggested terminology, and content that will benefit your business and your customers. All about the About pages The About section is all about your company. Any content related to the organization itself should be relegated to this corner of the site. The phrase “about page” is a common piece of terminology among developers, designers, and most clients, but it is a little misleading— most of the time, the material sprawls across several individual web pages to comprise a greater About section. Linking to the About material Years of development and the generation of millions of corporate websites have distilled the actual link name into three common options: WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 112 8393CH06.qxd 8/2/07 2:05 PM Page 112 About About Us About [ company name] The differences are subtle, but the nomenclature should reflect the rest of the site. For instance, if most links are phrased with single words (“services,” “products,” “contact,” etc.), then the first choice makes the most sense. The second two add a bit more informa- tion about where the user is clicking, but differ in their point of view. “About Us” is written in second-person point of view (writing from an “us and you” perspective, like this book); “About XYZ” is third person. Again, this should mirror whatever point-of-view style is employed on the rest of the site. Deviating from this established language runs the same risks as breaking any best practice or usability recommendation. If it’s done, it needs to be done well, and needs to clearly communicate its function to users. The reality is that people look for the word about. It may not be the best word for the job, and certainly falls painfully short in literary elegance, but zillions of sites have thrown those five letters into their menus and the greater web populace has grown comfortable with the term. Unless you have a clearer, easier phrase, stick to what people know. Placement of the link should reflect the weight it’s given on the overall site. For instance, if your primary focus is driving customers to your sale pages where widgets are marked down 50 percent, you’re probably not as interested in creating a long-lasting customer experience as making a sale to clear inventory. However, if your business relies on the influence and credibility of its leaders (for instance, a well-connected politician, or a highly respected engineer), or likes to parade past client success, then prominently displaying the link is critical to the marketing success of the site. Depending on the menu structure, these links may appear in different places. For the first example, relegating the link to the footer makes sense; for the second example, keeping it in the primary navigation will give it maximum visibility. Always keep in mind the market- ing angle you want to take with visitors. The About section either needs to get out of the way of more important messaging, or needs to play a lead role in speaking to customers about your product or service. Content options When building any section of a website, there is always the process of selecting what to include. Some designers and marketers subscribe to the “content bomb” methodology, smothering readers with a blitzkrieg of text, photos, illustrations, links, and testimonials; others scale back to a minimalist “less is more” way of thinking, where the content is stripped to a few essential facts on a single page. Most companies wisely arrive at a com- fortable middle ground. An About section can contain any number of topics, from mission-critical messages to superfluous bits of incidental information. Let’s explore a few options before digging deeper into a select few later in the chapter. THE ABOUT SECTION 113 6 8393CH06.qxd 8/2/07 2:05 PM Page 113 [...]... reinforcement of an attractive corporate culture for potential candidates (see Figure 6-3) 119 8393CH06.qxd 8/2/07 2:05 PM Page 120 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Figure 6-3 Many companies large and small like to promote their philanthropic activity Career opportunities The Web has revolutionized the job market, from niche job boards to large-scale job sites like Monster and. .. 1 14 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES The company overview: This is usually the page most people are looking for, and is usually the first one people get when they click into the section It’s not a history of the company, nor a philosophy statement, although it could briefly mention select milestones and highlights of each It’s simply a fact-based statement summarizing the business, ... shown when the user lands on the page, but buttons labeled with previous years are in plain view in case someone wants to do some snooping around 127 8393CH06.qxd 8/2/07 2:05 PM Page 128 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES When designing the press release listing, keep usability and easy navigation in the forefront of your process People will come here to research and read, not mess... from the minute before, rejoicing when it ticked another penny higher So ingrained was that point of focus in the corporate culture that campus elevators all contained screens that showed the current value of the stock 129 8393CH06.qxd 8/2/07 2:05 PM Page 130 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES It’s hard to believe that fortunes are won and lost and economies grown and leveled by... applicants a step as well as established the format of how the e-mail subjects appear in your inbox (which can be a productivity boon when collecting resumes for multiple open positions) 123 8393CH06.qxd 8/2/07 2:05 PM Page 1 24 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Obfuscate the actual e-mail address: Spammers regularly send out spiders across the Web to harvest “naked” e-mail addresses... 138 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Figure 6-11 Data Synapse employs several filters for its contact information, and organizes by physical location as well as department Contact via the Web Providing detailed information about your address and phone numbers is important, but providing the ability for visitors to immediately contact you through the Web is just as crucial Today,... helpful hints: 125 8393CH06.qxd 8/2/07 2:05 PM Page 126 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Make the URL short and easy to remember: For instance, www.acme.com/jobs, or www.acme.com/careers It should be a snap to type in Promote it from the site’s main navigation: The current job listing is commonly a function of the About section and is thus buried among other pages within that section... 121 8393CH06.qxd 8/2/07 2:05 PM Page 122 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES The job entry Once the user scans through the job listing and clicks on a position of interest, they are whisked to the full description of the opening This is where they can read about the appointment in detail, learn more about the company and its hiring policy, and (hopefully) apply directly There are... stock information are daunting— you cannot very well update the number by hand every 20 minutes Thankfully for web developers, there are several services that offer automated stock quote displays, from basic ticker price to complex charts and a wealth of information, like the example from QuoteMedia shown in Figure 6-7.2 Figure 6-7 QuoteMedia produces plug -and- play stock ticker graphics for business websites. .. to only Forms 3, 4, and 5 in the EDGAR database, allowing people to easily find documentation exclusively focused on insider trading 2 A link directing people to all filings (everything in the preceding list), or to a list of 6 filings sans Forms 3, 4, and 5 For some, those two links are the alpha and omega of their SEC filings section It represents the bare minimum of design and information architecture . two forms: a plain e-mail link or a link to a more formal contact form. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 122 8393CH06.qxd 8/2/07 2:05 PM Page 122 Choosing the format Before. of development and the generation of millions of corporate websites have distilled the actual link name into three common options: WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 112 8393CH06.qxd. date and optimizing the site (and specifically the careers section) for search engines can push the company toward the top of the results. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 120 8393CH06.qxd