1. Website Identity
Describe to users who you are
Other than telling users what you do and what you offer, transmitting the culture, values and personality of your website to users is vital as well. Explain the rationale of why your website exists, and how it builds value for your site users.
Use of tagline
Consider having a catchy tagline. It might catch the attention of your users.
Availability of contact information
Let users know that you are real and can be contactable.
2. Accessbility
Availability of mobile website
This mobile website caters to display and work on various mobile browsers across mobile platforms – Android, iPhone, iPad, Blackberry, Windows Phone 7.
Availability of multi-language sites
Multi-language websites offer the opportunity to expand internationally, targeting the demographics across the globe. Tools, i.e. Google Translate, are alternatives to save on resources maintaining the contents; however such tools do have risks such as not providing translated copies in the correct grammar or syntax.
3. Navigability
Navigation labels easily identified by user
It’s easy to notice from the eye, either at the top or the sides of the screen first fold.
Navigation labels are conventional, clear and concise
Users will be hesitant to click the link if it does not tell them what they are in for. Card sorting tools, i.e. WebSort will be useful to determine the website information hierarchy.
Site logo with active link to homepage
This has been a wide-spread practice for many sites since the beginning of Internet time.
No “Home” link on navigation
Consider this as a redundant link when your website logo is already doing the job of taking users back to the homepage.
Use of breadcrumb trails
Users appreciate these useful signals to let them know where they are, especially when they are lost in your web labyrinth.
Navigational links are consistent
Constantly display the navigational links to show users where they have been on all pages of your website.
Back button on browser takes user back to the previous page
Users are found to invoke the back button frequently. Many websites employ AJAX or Javascript functions to ensure that the user experience with the back button is not forsaken.
Information hierarchy is not deep, and user takes less mouse clicks to reach the page
Website users are satisfied to find what they are looking for within a few mouse clicks away. Related cross-linking of the web pages will provide a better user experience by attracting users to stay on your website longer. Well-planned information hierarchy facilitates the search engine robots to crawl through and index your web pages.
Availability of sitemap directory page
The sitemap directory page is a helpful guide for users if they ever get lost on your website. Many websites own a sitemap page for the sake of having one, and webmasters jam-pack the page full with text links. Users will thereby have a hard time to decide which link to click, having no idea where they will be led to as well. Make this page more intuitive by having a few short descriptive paragraphs to guide and lead the users to their destination.
4. Aesthetic Look & Feel
Colors
Use of clean (i.e. white, light colors) instead of noisy (i.e. black, dark colors) background color
Reading yellow-colored text content over a black-colored background actually ‘burns’ the users’ eyes, which should be avoided.
Use of appropriate font color that contrasts with background color
Yellow-colored text content over a white background ‘burns’ the users’ eyes even more, and makes it much more difficult for reading.
Use of alternate colors for links, hovered (mouseover) links, and visited links
If the text color is black, employ a separate color for the links. This facilitates users in knowing where to click, and where to view the history of visited pages.
Font Use
Use of appropriate font typeface
Despite the controversy in preferring san-serif fonts (i.e. Arial, Verdana, and Lucida Grande) over serif fonts (i.e. Times New Roman, Georgia) for the web,there are no clear guidelines to specify a “must-use” for san-serif fonts. Use of font typeface for the website should be appropriate and fused with existing corporate imaging and design.
Use of appropriate font size
Users should not be squinting their eyes to read your web copy, and neither should they be using a magnifying glass to do so.
Sparingly use of bold/italic typeface
Bold/italic typeface is great for headers, or emphasis in short web copy. For a full running web copy with many bold/italic emphasized text, users will have difficulty in reading it, and tend to skip long sentences or paragraphs written in bold/italic typeface.
Sparingly use of capitalised text/title
Capitalised text are text is hard to read, and users tend to skip reading the entire web copy if the fonts are capitalised excessively.
Use of short paragraphs
A good rule of thumb is having 3 – 5 sentences in a paragraph, which is helpful in organizing content for presentation to users.
Use of appropriate spacing between paragraph lines
Paragraph line spacing affects readability significantly, in which a good rule of thumb is to set the line-height of your web copy between 135% – 145%.
5. Consistency
Color scheme remain consistent
Similar to any brand message,the color scheme of your site should remain consistent.
No distortion for website on different browser types
Your website should function and display without distortion across various browser types. Common browsers include but are not limited to Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera. Web analytics tools should provide information pertaining to the common browsers used by site users who view your website.
No distortion for website on different screen resolution
Your website should function and display without distortion across various screen resolutions. Common screen resolutions include but are not limited to 1024 X 768, 1440 X 900 widescreen. Similarly, web analytics tools should provide information of the common screen resolution that your users are viewing with their monitors.
6. Website Content
Headings are clear and descriptive; content is relevant to the page headings
Page content and title/headings should speak the same topic. Write-up content is in a simple and understandable language. Avoid the use of industry/technical jargon or acronyms.
Use of pagination
Long content requires users to continuously scroll down, therefore use of pagination aids organizing content. Keep in mind to maintain the ease of navigating through the paginated pages. Users should be able to navigate to the first or last page at any point of time.
Use of suitable and recognisable web icon metaphors
Web icons are useful for users to recognize links or functions. A PDF icon beside the text link lets users know that the link is pointing to a PDF file. A cart icon is often associated with shopping cart function, while the mail icon is associated with inquiry or email functions.
Availability of FAQ/Help section
Relevant information of your site’s offered product, services and policies is publicly available. This will lower the number of email inquiries sent by users.
7. Multimedia Content
No splash entrance page
Flash introductory movie, with whooshing graphics and heart throbbing music, as splash entrance page is obsolete. Slow loading flash will deter more users from visiting again.
No excess use of flashing/blinking animated images
Flashing/blinking images distract users’ attention on your website.
ALT/TITLE attribute on graphics and images
Enhance the browsing experience of users with disabilities. Providing useful, accurate information in the ALT/TITLE attributes can make your graphics and images more discoverable on the web. Example of ALT/TITLE attribute in an image file:
<img src=”LOGO.JPG” alt=”XXX” title=”XXX” />
Use of infographics
Infographics depict colorful, easy-to-read illustrations and important data points to users. Companies are publishing infographics as a new style of white papers. It is also easily made available for users to share among the community.
Use of streaming media
Video clips are more interactive and capture attention of the users, compared to chunks of paragraph text. Embedded video clips in web pages using tools, i.e. Vimeo, Youtube allows community sharing too. Use of transcripts in your video page facilitates search engine optimization.
Use of map images for contact location
Embed map images by using tools, i.e. Google Maps, Bing Maps to display your business’s physical location.
8. Advertisements
No use of pop-up window or obstructive ads
Pop-up window ads are extremely distracting and irritating for users;, avoid them totally. Ensure that the displayed ads are non-obstructive to users when accessing content from your website. Best practice of serving 3 – 4 ads on page is encouraged.
9. Functionality
Availability of search capabilities
It should facilitate the ease for users to search for content or information on the website, especially for sites that are huge and with deep informational hierarchy.
Use of contact forms for users to fill in and email queries directly
Many websites with contact form are found to be malfunctioning. Check frequently to ensure that voices of your site visitors or customers is being heard.
No auto-playing music/video
Users shall always have the control over the usage of the website. A control to stop/pause the music/video is highly desirable.
Short forms to fill up
Forms should be concise and easily filled up within a short time. Lengthy forms deter users.
Landing pages after form is filled up
Users feel frustrated and lost when they land back onto the same form page after clicking the �Send’ button. Take the user to a landing page, and display an assuring message. A simple acknowledgement to represent the message “Hey, we hear you!” would do the trick.
10. Robustness
Availability of not-found page
A default not-found page: “404 – Page Not Found” is generated when users click on a broken or dead link. Ensure that the not-found page is setup for your website, and that it provides useful guides for users to navigate back to the homepage.
Availability of error-check on forms
Ensure that there is validation to spot errors when users fill up forms on your website. Forms include but are not limited to inquiry forms, sign-up forms, order forms, and many more. Display clear error messages and instructions to guide users in filling up the form successfully.
Usage of web analytics, i.e. Google Analytics to track the form error events will provide an insight of how the form on your website is performing. Users should be led to a landing page upon submitting the filled-up form.
11. Trust
Display policy information
Privacy Notice, Terms of Use policies clearly specify what kind of information is being collected upon usage of your site. It also prevents any repercussion against you by your website users.
Display “No spam” message upon collecting email addresses from users
Building up trust with users, will provide the latter with confidence to provide their email addresses to you.
12. Web Measurement
Use of web analytics tools
Measurementis vitalto provide insights in orderto plan the next success for your site. Common web analytics features are tracking visitor usage of website, conversions, user behaviors and many more. A dollar value is tagged on every user to effectively calculate the ROI of your online marketing efforts.
There are free web analytics tools, i.e. Google Analytics; and there are premium ones that require pricing, i.e. Google Analytics Premium, Omniture, WebTrends.
Data collection methodology of each web analytics tool is generally classified either the page tagging type or logfile analysis type. Be sure to know what features each of these tools offer, and evaluate whether the tool is suitable for your online business functions.
13. E-Commerce (Optional) Skip this section if your website is not e-commerce
Call-to-action buttons/links are easily recognizable
These are vital “show-me” directions to bring your users closer to the site conversion funnels. Small changes or enhancements to the call-to-action buttons/links can have exponential impact on your website’s revenue.
Not requiring users to register first before making purchases on the website
Allow your users to experience the conversion flow and feel comfortable before handing their credit card number to your website. Many users are not comfortable to provide their information upfront upon arriving at your website for the first time. Furthermore, having a registration at the start of the conversion flow builds up barriers and deters users from taking the next step to purchase from your website.
Show progress indicators when users go through payment process
Let this be a guide for your users to know how fast they can finish with their purchase.
Prices are displayed correctly to users
You do not want the shown price tag to be different from what the user is actually paying for.
No hidden shipping and/or handling charges
Display any shipping and/or handling charges to users upfront, or face the consequences of more shopping cart abandonment at the last step of the conversion funnel.
Accept various currency transactions
Accepting a single local currency is appropriate for a local business e-commerce website. If your website allows cross-boundary purchases, ensure that your site accepts transactions in common currencies, i.e. USD, EUR, GBP.
Display the available stock inventory
Put the “out-of-stock” tag for unavailable items on your website, and inform the users of when the stocks are going to be replenished. This can greatly enhance their online shopping experience.
Diversify payment options
Other than accepting generic MasterCard, Visa, AMEX credit cards for payment, you might want to consider payment gateways, i.e. Paypal, Google Checkout, Amazon Payments.
Reassure users with trust sign or logos
Paying for a VeriSign trust seal on your website is inevitable to enforce the trust between you and your users.
Availability of shopping cart saving function
This function helps remember the previously chosen options for returning users who abandoned the shopping cart at an earlier time.
14. Web 2.0 & Social Media
Use of blog to engage site audience
A blog is a powerful avenue to engage and build up the community for your site or online business. Allowing guest posting helps to build up content for your blog. Note that maintaining a blog consumes a lot of effort and time. Think twice before jumping onto the idea.
Use of social networks to engage website audience
Usage of social networks, i.e. Facebook, Twitter, Google+ is on an up-trend for many online and offline businesses. Other than sharing the latest news or promotions, social network platforms serves as a live helpdesk connecting your site and community of users. Similar to a blog, it requires you to be actively involved in the social arena.
Respond and moderate the comments on blog/social media platform
Responding to comments or complaints can strengthen your business presence in your users’ mind. Ignoring this channel of communication is detrimental.
Allow users to social-bookmark pages from your site and/or share/post content onto social networks easily
Social bookmarking/media button plug-ins are available to be implemented on your site with ease. Social media success can be tracked and measured with many web analytics tools.
If you have Facebook’s Like Button, optimize your website with the Open Graph metadata.
For Google +1 Button, optimize your website with schema.org attributes.
15. Search Engine Optimization (SEO)
Keyword Targeting
SEO is user driven; for which websites are optimized for search engines based on the users’ intentions. Keyword research tools, i.e. Google Adwords Keyword Planner are useful to understand what are the common keyword terms being searched, and thereby aligns the keyword targeting strategies accordingly. Using of short tail keyword terms (2 – 3 words) and/or long tail keyword terms (3 – 4 words and above) in your strategy returns varied results.
Common SEO keyword targeting strategies are (but not limited to):
- targeting keywords that are relevant to the web copy content and headings
- includes targeted keywords in URL structure of web page
Example – http://www.example.com/XXX.html
On-Page Elements
Ensure the Title Tag on web page
- is up to 55 characters (include spaces)
- has targeted keyword(s) included preferably at the beginning of Title Tag
- is able to entice users to click-through from search engine result pages
- is unique and relevant to page content
Example of Title Tag: <title>XXX</title>
Ensure the Meta Description Tag on web page
- is up to 155 characters (include spaces)
- has targeted keyword(s) included preferably at the beginning of Meta Description Tag
- is able to entice users to click-through from search engine result pages
- is unique and relevant to page content
Example of Meta Description Tag: <metaname=”description” content=”XXX”>
Ensure the Meta Keywords Tag on web page is relevant to page content and not spamming
Example of Meta Keywords Tag: <meta name=”keywords” content=”XXX”>
Google SERP Snippet Tool: generate a sample search result listing based on your content input for Title & Meta Description Tags.
Duplicate content
Use of canonical tag
Web pages often have affiliates or tracking codes in their URL structure, for example:
http://www.example.com/page1.html
http://www.example.com/page1.html?source=abc
http://www.example.com/page1.html?source=xyz
Search engines treat the above example as 3 separate URLs, and therefore induce duplicate content. This may lead to inefficient crawling of pages, which means search engine robots will be spending most of time crawling duplicate web pages instead of discovering new published web pages.
Inserting canonical tags ensures search engine robotsare able to recognize that the web page URL, without any affiliates and tracking codes (http://www.example.com/page1.html), is the original web page URL, and resolves the duplicate content issue. It is important to ensure that the canonical URL is pointing correctly back to the web page URL.
Example of Canonical Tag: <link rel=”canonical” href=”XXX” />
Use of HTTP 301 Redirects
Applicable for
- migrating from old website URL to new website URL (i.e. http://www.oldsite.com/ to http://www.newsite.com/)
- redirecting from a non-existence page URL to an existing page URL (i.e. http://www.example.com/no-longer-exist.html to http://www.newsite.com/exist-page.html)
- redirecting “www” to “non-www” or vice-versa for domains (i.e. http://example.com/ to http://www.example.com/)
Why perform HTTP 301 redirect?
A web page that has been published for years usually accumulates value, with many other websites linking to it. HTTP 301 Redirect ensures that the backlinks of the page are not broken if your website has been migrated to a new URL.
Search engines consider “www” and “non-www” version of domain URLs as 2 separate URLs. Choose either domain URL version or implement HTTP 301 Redirect to resolve duplicate content problems.
Use of Meta Robots Tag
This is usually implemented on web pages that are of less importance to avoid them showing up as results on search engine result pages. Examples of such pages are (but not limited to): a 404 error (not-found) page, privacy notice page, terms of use policy page, interim notice landing page.
Example of Meta Robots Tag: <meta name=”robots” content=”noindex, follow”>
Avoid black hat techniques
- No keyword stuffing on page
- No cloaking on web page. Do not show different content to user and to search engine spiders/robots
- No manipulative linking, i.e. link farms, spamming of links on web page
Webmaster activity
Search engines offer tools, i.e. Google Webmaster Tool, Bing Webmaster Tool to provide reports of your website’s visibility on search engine result pages. Performance of your website on the search engines can be diagnosed. These tools provide diagnostics of your website’s performance on the search engines, and offer many resources to improve your website.
Use of robots.txt
Create the robots.txt file and store it in the root directory of your web server (i.e. http://www.example.com/robots.txt) if the file does not exist. The purpose of this file is to provide necessary instructions about your website to search engine robots.
Why is there a need for robots.txt?
- To block search engine spiders from crawling specific folders of the website, especially web pages or content not to be made available to the public.
- To block potential bad robots or spam robots from overloading your web server.
16. Page Speed
Minify CSS and Javascript files
Tools, i.e. Minify are available to remove unnecessary characters from the codes to reduce file size, thus improving on page load performance.
Use Gzip Components to reduce size of files
This requires configuration of your web server. Files that can be compressed are (but not limited to) text, HTML, CSS, Javascripts. The downside is that it consumes more server processing time, and older browsers may have difficulties with compressed content.
Avoid unnecessary multiple HTTP 301 Redirects
Multiple HTTP redirects for a single page affects your web server loading and slows down the user experience. Search engine robots may choose not to follow multiple HTTP redirects to the new web page, and will thereby impact SEO.
Asynchronous loading of Javascript files or call functions
A typical scenario of asynchronous loading is that the whole web page loads first on the browser, followed by the desired Javascript files or call functions. Third party scripts not hosted on your web server are risk-prone for availability or performance issues, and asynchronous loading helps minimize the risk impacting your website.
Minimize HTTP Requests
Common methods (but not limited to):
- Use of CSS sprites — Combine all the frequent used images into 1 single image file and use CSS background-image and background-position properties to display the desired image segment. This reduces the number of image requests. However, the CSS sprite technique may not be suitable for combining images that are replaced frequently.
- Combining CSS and/or Javascript files — This method reduces the number of HTTP requests when commonly used Javascripts and/or CSS are combined into 1 single file respectively. Impact may be plateaued if these files are maintained by separate developer teams for huge websites; or varied CSS and Javascript functions are employed in different areas of your website.
Use of Content Delivery Network (CDN)
CDNs are third party tools to aid in the distribution of digital content assets, i.e. downloadable files, images, streaming multimedia, across geographical region. Advantages of CDNs are to ease the load of your web server, and increase the capacity to cater for more potential users of your website. CDNs require less resources to acquire and maintain any infrastructure.
Applicable for huge websites serving large amount of users across the globe or fast growing websites. Example of free CDNs – CloudFlare; and premium ones – Akamai Technologies, Amazon CloudFront.