1 Web Design Guidelines Web Design Guidelines For Advertisers Listing with Yahoo! Search Marketing Copyright © 2008 Yahoo!. All rights reserved. 2 Web Design Guidelines If you market products, services or content online, one of the best ways to improve your results (traffic, sales leads, conversions) is to improve the experience of the people who visit your web site. It may sound obvious, but the easier you make it for customers to find the products or information they?re looking for, the more likely they are to make transactions. Yahoo! Search Marketing has developed the following set of guidelines to help you maximise the effectiveness of your web site. Contents General suggestions Including a call to action Making your site easy to navigate Simple page layouts Incorporating search on your site Writing for the Web The purchase process: browsing, buying, checkout Creating a search engine-friendly web site What to avoid Provide alternative content for images Copyright © 2008 Yahoo!. All rights reserved. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 3 Web Design Guidelines 1. General suggestions There are a few helpful things you can do to evaluate the effectiveness of your web site: ? Ask people to look at your site and tell you what they think. ? Go through the experience of trying to buy something on your site, and ask friends and family to do the same. Note the ways the customer experience can be streamlined. ? Set target dates for improvements and stay on track. ? Test your site with different browsers, such as Internet Explorer, Safari and Firefox. ? Know your visitors and your target audience. ? Survey customers shortly after you launch so you can make improvements right away. 2. Including a call to action The ?call to action? is the primary action you want customers to take when they visit your web site. For example, if you want someone to add items to a shopping cart, or even just go deeper into your site to learn more, you might put ?Add to cart? or ?Learn More? buttons at the top of the page, in a place that stands out from other content. ? Focus on one primary action per screen. Don?t clutter too many products on one screen. ? Make the call to action button clearly visible. ? Make sure visitors can see the call to action button without having to scroll. Don?t bury the call to action under pages of information. If you have a lot of information, consider using a pop-up box with additional info or tabs to consolidate. Headline text Article supporting photo Section Article headline and opening Section headline and description Article headline and opening Section headline and description more info... more info... more info... more info... call to action logo bread crumb ? bread crumb ? navigation navigation navigation navigation navigation navigation navigation Headline text Article supporting photo Section Article headline and opening Section headline and description Article headline and opening Section headline and description call to action call to action call to action call to action call to action call to action logo bread crumb ? bread crumb ? navigation navigation navigation navigation navigation navigation navigation clear call to action too many calls to action = confusing Copyright © 2008 Yahoo!. All rights reserved. 4 Web Design Guidelines 3. Making your site easy to navigate Help potential customers find what they are looking for as quickly and easily as possible. ? Design your site with a clear hierarchy. ? Use descriptive categories. ? Maintain consistent navigation. ? Use breadcrumbs to let visitors know where they are. ? Use colour to distinguish between visited and unvisited links. ? Use local navigation to link to related content. Guide visitors to similar products, related products, background information, author biographies, product reviews, customer testimonials, etc. ? Provide multiple ways to find products. These can include browse, search, wizard, featured products, top-sellers, related products, etc. ? Make sure your logo is clickable and takes the user to your home page. ? Make sure each page is an effective landing page. Visitors should know exactly where they are in the site and what they are looking at. If your site promotes different items in the same category, visitors should be able to view other items easily. Remember, most visitors will not start out on your homepage. Consequently, each keyword landing page needs to function like a homepage?the user should easily figure out where they are on the site. clickable logo clear hierarchy breadcrumb consistent navigation descriptive categories consistent layout and structure, clean visual design related products and information colour distinction between visited and unvisited links efficient design to keep info on the same page no need to scroll 1 2 3 4 5 6 7 8 9 10 Product Title and Model # add to cart buy Related Products home ? products ? specific product product description product info Section logo navigation navigation navigation navigation navigation navigation navigation view cart 1 2 3 8 4 9 10 5 6 7 Copyright © 2008 Yahoo!. All rights reserved. 5 Web Design Guidelines 4. Simple page layouts Improve the user experience with a good layout that employs a clean visual design and straightforward text. ? Use a consistent layout. Define global and individual page templates. ? Use a clean visual design?don?t clutter a page with images. ? Use colour and contrast to guide a user through the web site. ? Use headings, lists and consistent structure to increase legibility. ? Make sure pages can be seen on lower resolution screens (800x600). ? Keep calls to action at the top of the page, so the user does not have to scroll to find them. 5. Incorporating search on your site Include search if necessary to help visitors find relevant content. ? Keep search features simple and visible. ? On homepages, search should be a type-in field and not a link. ? Keep the search input field wide enough to contain a typical query. ? Try to keep search results useful. People rarely look beyond the first page of results. ? To increase sales, make sure your search results link to product pages. key message first simple search feature tab structure to keep info on the same page printable, legible, one-column summary descriptions high quality graphics Product Title and Model # product description add to cart buy Related Products home ? products ? specific product Section logo navigation navigation navigation navigation navigation navigation navigation view cart product info 1 2 3 4 5 Copyright © 2008 Yahoo!. All rights reserved. 6 Web Design Guidelines 6. Writing for the Web Typically, visitors scan content on the Web instead of reading it. Keep your information as clear and concise as possible. ? Use summary descriptions, subheadings, bulleted lists and short paragraphs. ? Use keywords you?ve selected for your search marketing campaign in your web page content, so the pages will appear in an organic search. ? Put your key message first. ? Include one idea per paragraph. Highlight keywords. ? Make your points on each page clearly but quickly, using as few words as possible. ? Don?t provide a PDF for online viewing. Convert everything to HTML if possible. ? Design printable versions of pages. ? Use a standard one-column format for easy reading. ? Use high contrast for easily legible text. A familiar example is black text on white background. ? High-quality graphics, good writing, and use of outbound hypertext links increase credibility. 7. The purchase process: browsing, buying, checkout Make it easy for visitors to browse and buy the products they?re looking for, and give them a smooth, reassuring checkout experience. Tips for an easy browsing and buying experience ? Make sure your product detail page includes all the relevant information a typical user needs to make a purchase decision. ? Add related content to cross-sell and up-sell. ? If you have additional information, provide buttons so the user can access that information without leaving the page. ? Don?t discourage visitors with required registration and poor shipping charge policies. ? Provide easy access to your shopping cart. Give customers the option to continue shopping or proceed to checkout. ? Include all necessary features in the shopping cart process. Provide product details in the cart, including the image of the product, and a link back to the product page. Make it easy for visitors to edit the shopping cart (change quantities or options, delete an item, etc). ? Reassure customers at the right time and place. Provide links to product warranties, shipping costs, return policies, testimonials, even optional extended service plans. Copyright © 2008 Yahoo!. All rights reserved. 7 Web Design Guidelines ? Add trustworthy third-party icons. Logos for credit cards and services increase customer confidence. Tips for an easy checkout ? Provide shipping costs as early as possible in the checkout process. Buyers don?t want to be surprised by a cost after going through a long checkout. ? Include a progress indicator on each checkout page. Give shoppers an opportunity to review what they did in previous steps and a way to return to their current step if they go back. ? Ask only for required data and provide examples for its use. Save and auto fill previously supplied info. ? Validate fields. ? Use clear labels and reasonable sizes for input fields. ? Differentiate shipping and billing addresses. Also, if the shipping information is the same as the billing information, include a checkbox to automatically fill in the same information. ? Provide clear explanation after errors. ? Provide customer support. Offer alternate ways to place the order (e.g. a free phone number). 8. Creating a search engine-friendly web site Make it easy for search engines to find and list your site. ? Use page titles. Make your titles unique to each page, and use relevant keywords on each page. ? Add a site map. ? Use meta tags. Only use relevant keywords in your meta-description. differentiate ship-to and bill-to info progress indicator view cart customer support reassure customers 1 2 3 4 5 Gift certificate redemption at payment. checkout shipping & payment gift-wrap place order Full Name: Address 1: Address 2: City: State: Zip: Tel: Want to place this order offline? Call customer support at 1-800-123-4567 for phone orders. Or download the order form (pdf) and fax your order. Next screen: shipping method ship to: logo Next screen: shipping method continue view cart 2 3 4 5 1 Copyright © 2008 Yahoo!. All rights reserved. 8 Web Design Guidelines ? Be aware that your content is constantly crawled by search engines. Keep your content original, update it frequently, and vary keywords and phrases to try different ways to attract customers. ? Develop simple, logical internal navigation. Make sure it?s easy for visitors to link between related sections and pages in your site. 9. What to avoid Don?t clutter your pages with unnecessary details. ? Avoid frames. They make it difficult for visitors to bookmark your site. ? Avoid horizontal scrolling. ? Avoid splash pages or animated content. ? Avoid new browser windows. ? Avoid flash-based content unless required. ? Use meaningful graphics to show real content. 10. Provide alternative content for images Provide alternative content in case active features are inaccessible or unsupported. ? Use Alt Text for images and animations. This way, if images don?t load, the user will still see some messaging. ? Make flash content available in another format. Not all visitors have flash downloaded to their computer. These guidelines can help you provide a streamlined experience for the customers that come to your web site. And that, in turn, can lead to sales and repeat customers. Copyright © 2008 Yahoo!. All rights reserved.