Defining the Layout – Information Architecture (IA)
IA Overview
What is Information Architecture (IA)? Information Architecture is the process web development companies use to create a “blueprint” for a website project. We say blueprint, as IA occurs prior to the website being “coded” and prior to the time design mock-ups (which agencies refer to as “concepts”) are made. Information Architecture entails different things, depending on the web shop one works with. But in general, Information Architecture includes the following:
Discovery:
Any website development shop worth its salt knows that each hour spent in discovery (and planning) saves multiple hours during the development phase. We always encourage, even for small website projects, that plenty of time be dedicated to discovery before one line of code is committed.
When we speak of discovery, we mean the process whereby an Interactive Project Manager asks a lot of questions, covering each detail relating to the project. For example: what is expected in terms of functionality, what was promised to the client, what was discussed between the client and the salesperson, and what was ultimately sold to the client, and making sure that all the necessary details are accounted for to ensure the project goes off without a hitch. It is impossible to produce a great product without “getting inside the head” of the client and “wrapping one’s arms around” the site to be developed.
Again, any web development team that’s on the level is going to be asking some fairly business-personal questions. Questions that probe to the heart of the business, not just what consumers see; questions that will make you explain the brand and what it stands for, how you’re viewed in the marketplace currently, how you think you should be viewed in the marketplace, how your products and services are organized, and of these products and services; which are more central to your success (profitability). Once your team knows where you are, and where you want to be, they can begin to work on the site map.
Site Map Development:
Once all the preliminary details are acquired, and the Interactive Project Manager has a handle on the entirety of the project at hand, a preliminary site map is generated. The site map will detail each page for a given site project and how each page relates (navigationally-speaking) to other site pages.
Site maps, as we’ve come to create them, typically look like flow-charts with the Homepage at the top of the tree and all sub-pages (Top Level Categories) and sub-sub-pages (Sub-Categories and Product Pages) extending from them with family tree-like relational lines. They should also include contact forms, privacy policies, about us page, and all other non-essential content pages. The industry calls these “Utility” pages. Unfortunately, these utility forms are sadly neglected as after-thoughts even though they are crucial to conversion success.
There are multiple tools to facilitate creating editable, useful website site maps:
Navigational Elements
A good site map delineates a solid navigation scheme and vice versa. Often times, what separates a good site from a great site is how thoughtful the navigational elements are. These include the main navigation (or “main nav”), which is typically a horizontal row of top-level tabs situated between the header of a site (the top-most area) and a given page’s “body” (in its broadest form, everything below the main navigation).
But when we speak of navigation elements, we mean far more than determining what tabs will comprise the main navigation. We also mean determining secondary navigations, sub-navigations, footer navigations, in-line navigations, etc. And not just for the public-facing pages either. Remember, in most cases, a website has two faces: the one seen by the general public and the one seen by administrators of a given site. A good site map will also help give your SEM team a head start in how they can start thinking about inter-linking website categories to create smooth indexing for search indexing spiders.
Content Guide
Although, the order of what is produced when can vary from shop to shop, in most cases a Content Guide is produced that adheres to the Site Map under consideration. By content, we mean everything from text and images to “rich media” (agency lingo for everything from video clips, to flash montages, to talking heads shot on blue-screen and overlaid onto a site, to slideshows, etc).
The Content Guide is crucial piece of the web development puzzle, as it normally entails assignments: who (which specified team member) is to supply or produce content that will live on the site when it goes live. In the case of catalog and e-Commerce sites, fulfilling the content necessary for go-live can be a serious undertaking; SKU numbers, product images, product specification, product values, parts numbers, schematics, downloads (such as PDFs or CAD files), and the like.
Database Schematics
If you ever dreamed of being a developer/programmer, we suggest that one day of database architecture planning should properly dissuade you of that dream! In most cases, creating database schematics is not a huge headache; in some cases (such as the aforementioned product catalog-type scenario) it can be grueling.
Imagine a having to map the database elements and relationships necessary to sustain a 30,000-item parts catalog with online product “configurator” applications that enable visitors to customize parts and dynamically generate down-loadable CAD drawings in user-defined file types. We think Dante’s Inferno only begins to approximate how much fun that might be. In any event, identifying the relational database structure is of course very crucial; it is a foundational piece of the blueprint developed during the Information Architecture phase.
Wireframes
“Wire-framing” entails creating very austere representation of specific pages or page-types (eg., a category page or product detail page). If we asked you to explain the layout of your current homepage on a piece of paper with a pen or pencil, it would likely look a great deal like a draft version of a homepage wireframe.
The value of wire-framing is the ability to visualize and begin to “lay out” (not in an artistic sense) where the page elements will be situated on a given page or page type on your site. We think it’s unnecessary to wireframe each individual page envisioned for a particular site; however, it can be a very helpful exercise for the project lead, the project team, and the client alike. Not to mention, when done properly, the coders charged with developing the site are likely to buy you beer for having made their lives considerably more tolerable.
Keep in mind, Information Architecture is about discovering needs and wants and for solving issues. The real goal of IA is to sort out the production objectives before any significant programming has begun. Ultimately, teams that have a robust discovery phase generate excellent Information Architecture documentation (which culminates into an executable Project Plan)–saving lots of money, saving lots of time. Most importantly, a great discovery phase will save tons of headaches, heartaches, and stress on both sides of the table.
Imitation is the sincerest flattery. What are the successful sites that you enjoy using most? How can you adapt their layouts and features to best effect on your site?
Interactive Prototypes
An Interactive Prototype is just that: a prototype that simulates the navigational experience of the eventual website, including values in list boxes, labels for input boxes, image placeholders, etc. The intent is to let project stakeholders interact with the prototype in such a manner that they can anticipate how the eventual site or a specific piece of a site will eventually function.
In most cases, relating to your typical website development project, interactive prototypes are unnecessary (bordering on overkill). That being said, when a website project has many moving parts, incorporates a lot data, and is generally complex, and interactive prototype is indispensible. For example, if you had a small boutique with one store where used books are sold, an interactive prototype would be overkill (and somewhat expensive to have created).
On the other hand, if you wanted some way for users to buy, sell, preview, exchange books, browse new arrivals via video cameras on mechanical arms within the store, and enable folks to scan their favorite passages and upload them to the site, attaching to their user profile and favorite books list . . . well you get the idea: Lots of complex, moving parts. In this case, the project could benefit from creating an interactive prototype before actual programming begins.
There are multiple tools to facilitate creating useful website prototypes:
Project Plan
The typical final product of thorough IA integrates all of the facets (1-6 above) of the Information Architecture exercise into a Project Plan or Development Plan. A solid Project Plan typically details production phases, dependencies, milestones, and action items (with attending dates and responsible parties) to some degree of the micro or macro (again, largely depending on the project and the best practices of the shop you are working with (and your budget).
In totality, then, it is this Project Plan and all of its appendices which comprise the “blueprint” of the website, portal, or tool to be built. If you prefer, it is a blueprint and a roadmap all in one. A reminder is in order here: different web development houses have different methodologies. In fact, different Interactive Project Managers (IPMs) usually have their own methodology. Some IPMs are more rote in their discovery. Others believe the best process is an organic process (re: SCRUM or Agile). Some live and die by what is and isn’t in the contract, while some are more flexible, preferring to prescribe their own remedy, as long as it fits within the budget and time frame allotted them.
Some spend more time in discovery than others. Some ask more questions than others. Some are incredibly detail-oriented, while others are more intuitive. And they all have varying levels of experience. So, the thing to keep in mind is that sometimes you may end up with a very detailed Project Plan, as if written by an electrical engineer with too much time on his hands. On the other hand, you may receive a simple Gantt Chart with a list of action items and dates. Some IPMs may identify the “critical path.” Some may not. Don’t feel frustrated if the Discovery & Information Architecture Phase seems arduous. Don’t feel cheated if it is painless. Don’t feel ripped off if you don’t get everything including an interactive prototype. If you have faith in the Project Lead and the team you hired, if you are a responsive client who makes decisions when asked, provides information and content in a timely fashion, and isn’t given to blowing out the scope of the project at hand, the project will go more or less according to plan.
IA Process Resources
For small websites, this will be a straightforward process. For bigger projects this can be a substantial undertaking. Regardless, it should be considered mission critical. Do not underestimate the importance of this step; its creation will literally save you dozens of hours in coding time, innumerable headaches and arguments (not to mention your sanity) through the development process.
Useful Resources for Information Architecture
- IAinstitute.org
- Information Architecture for the World Wide Web by Rosenfeld & Morville
Structure & Design with a Purpose
There is an inherent struggle in web design between those that would ‘push the envelope’ and those who stay with the ‘tried and true.’ The best is to find a happy medium, with a tendency towards the ‘tried and true’ side of the fence. All too often, especially in the agency world (a leftover from the creative drive of TV and radio), vendors will want something totally unique, rationalizing their avant garde (re: untested, unproven) suggestions as exciting and novel user experiences.
This has proven itself generally to be a great mistake, as we have seen time and time again in our experience. “Uniqueness” online is likely to produce confusion, misdirection, and abandonment of the brand. Creating a false excitement and all-sizzle web designs ≠ sales, revenue, or profitability!
As a book publisher, would you try to find new ways to print a book? Maybe mix up the chapters in a new and “exciting” order? Or print the text backwards so that readers have to use a mirror? No, obviously not, unless you goal is to destroy your author and your publishing company.
Then why do it online?
Performance is in consistency. Confusion is the enemy. Like it or not, user expectations have been set over the past decade and a half. It has been proven over and over again that users want websites to function like a phone book–obvious, simple, and easy to use. Users will respond to pretty pictures and stylish designs, as long as the rest of the site meets your users’ inherent expectations (learned behaviors and otherwise). Overly complicated websites confuse users and chase them away. The opposite can be true as well: it is possible to bore your audience to death, drubbing them with stale design elements and useless information. You don’t need to “reinvent the wheel”–all you need to do is make your site work for you! Remember, your website is your company’s face to the world, and in many cases your site is solely responsible for creating that ever-important “first impression.”
What does all this mean? It means stick to the standards, or if you prefer “Keep It Simple, Stupid.”
Speaking of the KISS approach to web development, we should mention Steve Krug’s Don’t Make Me Think. It is an incredible resource for anyone interested in website best practices. Distilled to its most basic premise, Krug’s book argues that web users will quickly abandon a site that is confusing or difficult to use. He rightly states that it is essential that everything of import be immediately accessible to the site visitor, and that the very best sites are obvious and self-explanatory. In short, if someone has to think, either to figure out where the information they need is hiding or to understand what you are trying to sell, they will abandon your site. This is not conjecture. Have you visited a government-run site recently? What is your first impulse? Likely, your first impulse is to turn and run away. Good thing the government has no competition! Just ‘keep it simple’ and you will have far greater success than most of your competitors.
- Site Usability Optimization – aka “User Paths”
- The purpose of the IA is not just to map content, it is to map your information in order to meet clear objectives. Again, keeping the Goal in mind, your website does not exist to educate the public, or provide pretty pictures, unless of course you have a Wikipedia model. Its sole purpose is to generate revenue and improve profitability.
- Enter “User Path Optimization”. UPO is the process of integrating your conversion objectives into the layout of the site. This is not just including your conversion opportunities in the sitemap – this is the process of building your entire site structure around the conversion events.
- Every page, every click, should be integrated with the intention of converting the user into a lead or a sale
User Path Optimization (UPO)
What are User Paths? User Paths are well-defined funnels on your site that guide users through the content of your site to predefined conversion goals, or “murder holes”–where visitors are converted into leads.
What is User Path Optimization (UPO)? UPO is the process of integrating your conversion objectives into every aspect of the Project Lifecycle: from discovery to information architecture. From the final Project Plan through the website development phase, quality assurance (QA) testing, and deployment phases. Without keeping the Goal in mind, you might forget it altogether. Keeping the profit motive in the forefront of your mind is the surest way to do what is best for your business. The Goal tells us that everything–including developing, maintaining, and/or improving your website–is and should be about profitability. Without being user path optimized, we guarantee your site will not be able to fulfill its potential.
Again, the objective of your site has nothing to do with Information Architecture (that is, how best to assign and present information pertaining to your company, personnel, products and services using web technology). The objective of your site is to wrench as much profit out of the marketplace as is technologically possible (with due regard given to all laws and business ethics of course). This is not to say that traditional Information Architecture and the disciplines it comprises are not exceedingly important. They are. But Information Architecture and the disciplines that comprise it are decidedly not the objective at all.
Hear us loud and clear: You can have an incredibly detailed, thorough, and even formidable Project Plan that everyone thinks is the be-all-end-all, with all manner of appendices and charts and tables and tech-speak. Congratulations (sarcasm intended)! Without keeping the Goal in the fore of your mind, all of the effort, while commendable, will amount to little more than a better-looking version of the online billboard you already have. That is to say, many a website has been “redesigned,” “re-architected,” “redeployed,” and otherwise revamped without having done a damn thing to improve profitability. And in some extreme cases, by sheer negligence and shoddy craftsmanship, some “new and improved” portals actually have the absolute reverse effect of what was imagined . . . that of making a company’s online presence even less profitable than it was before.
[Oh, and if you do deploy a new site, for God’s sake make sure your vendor has all applicable “301s” in place. This is most important and oft overlooked, costing companies real visibility in the SERPs.]
User Path Optimization vs. Information Architecture
How does User Path Optimization differ from traditional Information Architecture (i.e. conducting discovery, creating site maps, wireframes, prototypes, content guides, and database schematics)? This is a messy question. Nonetheless, it is an important one to spend some time on. Traditional Information Architecture is oriented toward information (or content) and how best to display it (the user-facing website), store it (behind the scenes database stuff), and make sense of it (reporting mechanisms). In this sense, Information Architecture is aptly named. It is concerned primarily with (you guessed it) information. Moreover, Information Architecture lays the foundation for search marketing efforts going forward.
UPO, on the other hand, is squarely focused on maximizing Lead Capture and Lead Conversion (sales) ratios. That is, moving users through the site to the desired transaction (lead submission and/or sales conversion) as efficiently as possible.
As such, User Path Optimization puts the Goal front and center at all times–dictating that all aspects of the information architecture serve to promote the Goal. The short answer is that User Path Optimization (UPO) is a more appropriate form of information architecture toward the end of eProfitability–one that approaches information architecture in a more profit-focused manner.
UPO is about building your entire site structure and content around desired conversion events. When determining the information presented on your site, and its structure, it is absolutely critical to define it within the scope of Lead Maximization. That is, providing the easiest path to the point of lead capture as is possible. Every page, every click, should be integrated with the intention of converting the user into a lead (capturing the lead) in order to convert the lead into a sale. In the eCommerce setting, capturing the lead and converting the lead can occur simultaneously.
User Path Optimization – Rules to Follow
Orientation: Where am I? What does this company do? How do I use this thing?
Like being dropped from the heavens onto an alien landscape, the first thing any visitor to any site wants to know is if they’ve arrived at the right place. They want to confirm that your company does and/or sells that thing they’re looking for. At the same time, synapses are firing behind the scenes either confirming the site is easy to use or informing them that the brain is likely to be overwhelmed by trying to figure it out.
Proposition: What’s the value proposition here – what’s in it for me?
Yep. Once the user is convinced he/she is in the right place, it is time to shake your tail feathers. Time to impress the object of your affections with your value proposition–state what they stand to gain from considering you above anyone else.
Suggestion: Next Steps / Calls-to-Action – What am I supposed to do now?
A site has mere seconds to engage a visitor, and this is no exaggeration. Now, if your site does its job, properly orienting the visitor and clearly stating your value proposition, you will have increased the likelihood of having an opportunity to induce the visitor to do what you want them to do. But this doesn’t mean your work is done: far from it, in fact. What separates solid sites from excellent sites is their ability to route visitors rapidly to the desired outcome, and making transactions simple. A huge part of that undertaking is making it abundantly clear to the visitor what it is they should do next.
Conversion
You’ve got their attention. You have them moving in the right direction. Now, like a jujitsu master, it is your job to use their own momentum in conjunction with your skills to convert the anonymous visitor into a lead. And, of course, there are many different ways to skin a cat, so to speak.
Applied User Path Optimization
Each site is different. As such, it is near impossible to say always do this, never do that. But there are some very basic best practices that all User Path Optimized sites employ to maximize their effectiveness. The following examples exemplify to one extent or another, what makes a solid, effective, User Path-Optimized landing page.
B2BCFO.com
The B2BCFO.com site is an excellent example of a site whose homepage is User Path Optimized. Within moments, a new visitor can answer the following properly:
1 – Where the am I? What does this company do? How do I use this thing? I am at B2BCFO.com, a site belonging to a company that is geared primarily to CEOs and Business Owners (the primary User Group or “audience”). The primary business this company appears to be in is related to securing cash and/or improving cash flow. The navigation appears very straightforward, very “user friendly.”
2 – What’s the value proposition here? What’s in it for me? Well, let’s see. There it is. If I self-identify as a member of the User Group “CEO or Business Owner,” B2BCFO can help me with my cash flow (or get more cash), exit strategies, and fraud investigation. If I self-identify with the “CFO” User Group, I can learn more about joining (and the benefits of joining) the B2BCFO Team. If I am looking for “vetted” and “recommended” service providers, I can click to find those on this site too. This company also appears to offer books and a directory of in-network CFOs.
3 – What am I supposed to do now? Again, this appears to be obvious. But, depending on the User Group I lump myself in with, I click on the appropriate “Click Here” button.
Analysis: Overall, this is an exemplary homepage. The only area we would suggest could use some additional work (in terms of clarity) is the bucket entitled “Service Providers.” At first blush, we were not able to discern whether this section was for “Service Providers” as a distinct User Group or for “CEOs or Business Owners” looking to locate approved service providers.
LinkedIn.com
A first time visitor to LinkedIn.com would have a hard time becoming confused as to what the site proposes and what the visitor is to do next. Pure perfection, really.
User Path Optimization – Things to Avoid
Speaking specifically in relation to User Path Optimization, let’s evaluate the following sites.
Park Bank
Yes. This is an unfortunate hangover from the late-90s. What in the world would possess a company–of all things, a financial institution–to have a “splash page” as the homepage of their site?
One does not know. So, don’t do this to people. Also, we’re not sure what the “Great Tree” refers to. Beyond just confusing the user with mysterious slogans, unless you happen to be a global Fortune 500 company, this is sure-fire way to severely hamper your search marketing efforts. Home pages are, in the overall majority, the most powerful webpage on a given site. Splash pages do not let that power, or trust, find its way down to other important pages on the website.
Vacu-Duct Cleaning Services Inc.
Vacu-Duct Cleaning Services, Inc. presents another lackluster site. In this case, the only calls to action are buried beneath the fold (two phone numbers for two distinct offices).
These phone numbers and locations should be moved to the top. Additional investigation of the existing site reveals a “quote” form.
But you should notice something a bit more disheartening than the fact that the site expects visitors to click through to a form with no real value proposition: namely, this company provides “Residential” and “Commercial” services. But the homepage is geared near entirely to the “residential” user group. So, what is someone belonging to the “looking for Commercial duct-cleaning services” user group likely to do? We can guess.
We could not discern why the “request a quote” form was buried on a sub-page and not integrated into the homepage. The following is a quick representation of how modest modifications can yield significant results (assuming, of course, there is some volume of traffic to the site to begin with).
At the other extreme is the following example of company that seems to believe aesthetic is the be-all, end-all; these are the worst. And, for some reason, they all seem to be ad agencies. We are guessing they are living the “Image is everything,” rock star lifestyle. Clearly, the absence of budget limitations does not translate into well-designed websites. That is all we can say about Young & Rubicam’s site.
It may be that old media agencies really are so flush with cash that they can afford to be all sizzle and no steak. Alternatively, it may be that there is some currency in egoism in the business they are in. But for most businesses, this type of silliness is imprudent and best left to the “visionaries” of the world.
Conversion Events
Simply put, the conversion event is the point in the user’s experience where your hard work pays off. You’ve optimized the architecture, the user path, have search engine optimized pages, and now you have the user right where you want them: on the edge of reaching out to you for more information, requesting a quote for services, or purchasing a cart-full of products. It’s do-or-die time for your site. Everything you’ve done up to this point is in preparation for this single event: the sale.
Clearly, there is not a single site on the planet that can, or will, convert 100% of the users. Unfortunately, life gets in the way of that. However, if your site is only converting 1% of the all visitors on the website, then there’s a little more than life stopping your users from converting. This would be a great time to look at your conversion event process.
Chances are you’ve never tried to buy anything from your own site, and you most certainly have never needed to contact someone in the company through one of your website forms. Well, now you get to. You should go through these forms as user and make sure the conversion event is as painless and efficient as possible. See the [Forms Optimization] Section for greater detail and explanation.
Strategic Content Development Constraints
Search Engines function through web-bots, or “spiders,” which are algorithmic-based complex data evaluation programs that build Search Engine Results Pages (SERPs) based on statistical analysis. Like mechanized armies of grand robot librarians, their job is to thoroughly catalog online information for the purpose of displaying highly-relevant and trustworthy results for any keyword search query performed through their sites. Google bots index information for Google. MSN bots for MSN (Bing), Yahoo! Bots for Yahoo!, and so on.
Search engines can only evaluate the content of your site based upon their limited quantification functions. They are not intelligent beings in and of themselves, and have no intuitive skills, like humans do (mostly), to connect disparate data sets that use variable linguistic descriptors (a.k.a. keywords). In addition, they can only make evaluations based on what, where, and how information is presented to them in the form of words: what words are used, where they are located, and how they are presented within the coding of your website. They are limited in:
- Quality – spiders, unlike people, cannot perceive the “quality” of writing of a given text. They will simply know whether or not the keywords on the page match a given query. Meaning, that a spider will not care whether Ernest Hemingway or Sam your next door neighbor wrote your content
- Intent – spiders cannot surmise the intent of a user. Again, they can only interpret the text on the page in relation to a query.
- Accessibility – spiders cannot access/process all forms of web content (eg., Flash content, AJAX content, multiple parameters (?= / id=) within URL strings ).
Search Engine Friendly (SEF) Coding: Rules to Follow
HTML – To maximize your search engine presence, use standard HTML-based coding whenever possible. The search engines have definitely made numerous indexing improvements in the past few years to handle content in variable formats (most recently, JavaScript). However, the preferred format, for SEO purposes, remains HTML.
PDFs – The “Big Three” search engines (Google, Yahoo, and Bing) can and do index text-based PDF files in the search engine results pages (Google Docs even does optical character recognition on PDF files). Think of PDFs as another form of HTML content and optimize it as you would any other page on the website. Additionally, as Adobe PDF software offers meta-data fields for the PDF document, be sure to fill these fields out before creating the PDF to post on your website. Finally, do not use Photoshop or other image creation/manipulation software. This will create, essentially, one large image of your content, which cannot be crawled by spiders. Use Microsoft Word or other word processing software to create the PDF content.
Non- SEF Coding: Things to Avoid
The stories we could tell about expensive, good-looking sites that ended up being coded in such a way as to be invisible to the search engines would make a good book. Suffice to say, your development team, from designers to coders need to understand how to build with search engines in mind. Unless of course you prefer to have a site with a Romulan Cloaking Device on it.
JavaScript – Please see Google’s guide to writing SEF-friendly JavaScript
JQUERY – You don’t have to avoid JQUERY all together (in fact it’s nearly impossible to avoid it these days), but again it’s important to make sure you have a coder that understands the implications of using it with regard to SEO.
Flash - Agency folks love the multimedia presentation options afforded by Flash. Flash does make great presentations and promo pieces, but not easily searchable websites (unless specific steps are taken to make is “legible” to the search engine spiders. The single most important factor in good web design is accessibility, not glitter. Moreover, Apple has moved from Flash to HTML 5.
Constraints of the Template – Standardized Layouts
The following information is presented in a list format for quick reading. We don’t want to get bogged down in the details, as this section alone could take a book in itself to thoroughly discuss. Nonetheless, it is crucial to familiarize yourself with following, as it should arm you with enough best practices to tell a well-crafted site from a poorly designed one.
Miscellaneous – Rules to Follow
- .com, .org, .net Extensions
- Concise URLs
- SEF URLs
- K.I.S.S.
- Clear Appeals to Primary Audience(s)
- Clear User Paths/Calls to Action
- Smiling People (women and men
Miscellaneous – Things to Avoid
- Frames
- Scrolling Tickers (Marquis)
- Terrible Color Schemes
- Animated GIFs
- “Glamorshot” images from the 80s
- Too Many Icons
- Misuse of Borders
- Really long links
- JavaScript Errors
- Giant Images
- Vanity Flash Intros
- Colloquialisms
- Poor Grammar/Typos/Broen Image Links
- Too Many Fonts/Exotic Fonts/Too Many Colors
- Too Large/Too Small Typeface
- Width of Page Induces Scroll Bars
- Dead Links/Missing Pages
- Pop-Up Ads
- Auto-translators
- Keyword Cramming/Stuffing in the footer
- No skip button on flash
- No mute option on audio
- Local Weather plug-ins
- Multiple versions of site
- .info, .us, .tv, etc Extensions
Navigation Menus – Rules to Follow
Corporate Info Links (eg., About Us, Contact Us, Testimonials, Careers, etc) – Typically, these are incorporated in the far upper right corner of the header. These should be simple, discreet links, separated in some way. We like using a “pipe delimiter” |, such as seen in the image here:
Primary (Main) Navigation – These “links/buttons” represent your primary user paths and should provide direct access to all top-level categories. Primary Navigation elements, whether displayed horizontally across the top of the site and/or to the left of the body content, should be grouped so as to be an easily understood hierarchy of all categories and sub-categories. Essentially, the main navigation should put “everything” at the user’s “fingertips.”
Accordion-Styled Navigation – These work like, well, accordions. On-click or hover over a top-level category, and the navigation expands to reveal sub-categories. These are most effective when applied to larger sites, as they expand/contract on-demand (on-click), displaying subcategories as needed while saving room for the category currently being accessed.
Footer (Bottom) Navigation – Footer navigations can include all corporate info links, but this is not the norm. We prefer to use this section to link to the privacy statement, site map, and terms of service. As for the type of separation elements used in footer navigation, we recommend simple, text-based, discreet links, separated by a pipe delimiter (example below), as we would use in the header.
Onsite Search – Most users are accustomed to seeing the internal site search located in the upper-right as well, but at the edge of the header and below the corporate information links. On-site search is a very useful tool for both user and web owner alike. For the user, it provides immediate access to the specific content they are looking for (assuming it has been set up correctly/effectively to find all your content). For website owners, it provides invaluable stats on what users are looking for when they actually engage with the site. It’s always a great thing to know what keyword from PPC or the SERPs drove them to the site in the first place, but learning how they interact with the site provides an entirely new level of knowledge.
Logins – this is going to depend primarily on the objective of the website. If the objective is to have people login to access content or use applications, then this may be a very prominent fixture in the header section of the website. In general the placement is for a logins is near/around the header region.
Navigation Menus – Things to Avoid
Convoluted Menus – Mixing different types of navigation into one; keep navigation types separate.
Right-Aligned Menus – Most people don’t even look on the right side, as it is usually the most popular placement of banner ads. Avoid using if possible.
Flash or Image-Only driven Elements – As we’ve stated in previous sections, these types of elements (in general) cannot be easily indexed by search engines. CSS (cascading style sheets) in conjunction with JavaScript is extremely versatile and can make the links in the menu crawl-able by search engines.
Tabs for the Primary Navigation – Tab-based menus usually require drop downs, which are confusing for users to navigate through.
Massive Corporate Logos – There is a bad tendency for companies that feel the need to call greater attention to their corporate image or logo, to create overly large headers. This is an unnecessary waste of space.
Body Content – Rules to Follow
First and foremost, if you can, seek out a web-savvy copywriter–preferably one with a few jobs under his/her belt. If that’s not in the cards, or budget for you, then consider all the content you write, for each webpage, as you would an essay, structuring each page as if you are defending a thesis with points of explanatory argument.
- Page Headline: This is what the page is about, as a whole. This is your argument, and should be the <h1> tag for the page
- Major Supporting Arguments: These are points that support your page headline, and should be the <h2> tags for the page
- Minor Supporting Arguments: These are points which supplement/support the major supporting arguments, and should be the <h3> for the page
Do use bold text, italics, and bullet points. These are indications to both the users and the search engine spiders that the text deserves special consideration. However, use them sparingly within the text; too much and you lessen the value of those special mentions and risk hurting the user’s eyes.
Do use hypertext links within the body content. Allow the users to move through the website freely, especially when the link you provide is a supplemental the subject. Moreover, this will “flatten” the architecture of the website for spiders; that is, it allows the spiders to find pages in the website without having to rely on the navigation. Additionally, hypertext links internally also clue in the spiders as to which pages are “important” on your website.
Body Content – Things to Avoid
- Too many typeface sizes
- Too many font colors
- Too many embedded links
- Absence of “space”
- Too many Elements
- Too much Text
- Mission Statements on Homepage
Constraints of the Users – Learned Conventions
Logos – Corporate logos should be situated in the upper left corner of the site’s header. On-click, user should be directed to the homepage.
Primary Phone Number – If this applies to your business, it should be located in the upper right hand corner of the header area. If possible, attempt to display a local number, as this can help local search rankings.
Logins – Whether a link or actual username and password fields, login call-to-action or form should be situated in the upper-right hand region of the site.
Order of Main Nav Elements – Should be listed left-to-right and/or top-to-bottom, running most important to least important.
Strategic Content Development
Now the “fun” starts. We have finally reached the point where we move from the planning to the building phase, utilizing the information collected and defined so far.
Overview:
- Keywords
- Product Descriptions
- Target Audience
- Sales Process Map
- IA Sitemap
- Conversion Goals
Create the Content for your Target Audience
Time and again, we see sites with content and information that fails to define clearly the product/service offering(s) of the site Publisher (the company to whom the site belongs). We also encounter sites that seem to have been produced in a vacuum by developers who seem to have no idea who the primary audience(s) may be, and were probably never asked to consider.
[Remember, a great coder may know very little of the intricacies of search marketing… because she doesn’t have to know more than how not to hurt the search specialist’s efforts. You wouldn’t expect a search marketing specialist to be an incredible coder . . . would you? Good. Because it is a rare pro who is a master of both disciplines. So, don’t assume anything.]
This is not just a matter of identifying whether your site is a “b2c” vs. a “b2b” portal. An effective website needs to go much deeper than that. Promote your offerings through content as if your ideal lead were standing in front of you engaged in a face-to-face conversation. Speak directly to their wants, needs, and desires. Tell them how your solution is the best available and what differentiates your products/services from the next guy. In essence, you have to tell your users what makes you special.
The average attention span of a web user is mapped out in fractions of seconds. You literally have 1-2 seconds to capture their attention. After that, you have less than a minute to prove your point. Prove your point and you can now engage the user with details, if necessary, or go straight for the conversion. Keep it simple: Remember, the objective is to convert a visitor into a lead (in order to eventually close them), not to overwhelm them with every detail of everything you can/will do for them.
Use scan-reading formatting. Few people will actually read the content of a web page word for word. They will scan it, so be sure your text is scan-friendly: use heading tags to call features out to users, use bolded text and bullet points. The bottom line is to make your content consumable in easily digestible chunks.
Content Layering
Landing Pages: The first page of entry. Ideally these will be all the primary pages of your site, as they will either be ranked organically for their keywords and acquiring direct traffic. These include:
- Homepage
- Top Level Category pages
- Landing pages created specifically for PPC campaigns and special offers






