The Commercial Benefits of Optimised Website Information Architecture - Part 2
In part 1 we discussed a rudimentary appraisal of your website's information architecture so you could gauge whether it met some basic commercial requirements. In this part we will discuss issues relating to navigation and website structure.
What is so important about navigation and structure?
How do I get around?
Navigation - determines how easily people can find things and retrieve data from the website - a vital component of successful task completion activities that drives bottom line. Taking a user perspective - when they hit a page, will they know what's available and where can they go? Is the offering shown in the navigation elements?
Where am I?
Structure - determines the breadth and depth at which data is held at, and whether the user will know where they are relative to the rest of the data. Structure should provide context. Again, you need to see things from a user perspective.
- When they hit a page will they know where they are?
- How do they get to the bit they're interested in?
Website structure can essentially follow two models:-
- Taxonomy - traditional hierarchical classification e.g. Groceries > Fruit & Veg > Apples > Braeburn
- Faceted search - attribute-value data e.g. Apple, Fruit, Sweet, French, Eating, Green Skin, 0.5 kg Bag, £2.00 - £2.50
Planning your website structure is something that a good deal and time and effort needs to be taken on; re-structuring later because you did not anticipate the scalability or flexibility required can be very costly.
Navigation
Apologies - this is going to be a little long-winded but that's because there is a lot to touch on, and we're really only touching the surface here - so think of this navigation discussion as a round-up of things you'll want to consider that impact UX and commercial outcomes.
Link Types
Website navigation in its simplest sense is a link (hyperlink) to somewhere else (a web page, a file or document). Often links are grouped and placed in panels to create defined spaces for navigation (e.g. primary navigation, secondary/tertiary, administrative navigation in the header or footer). Let's look at the link types that go to make up navigation.
Hyperlink
This is the generic name for a link on the web and the thing that converts an index of documents into the hyperlinked web! A hyperlink works by requesting a new page/document from a server which is then delivered to the users browser (client side).
Text Link (Hypertext)
This is often called link text or anchor text (the HTML tag used to create links is called the anchor tag) and is the link type that is most accessible to humans and search engines as the words describing the link destination are there in the link itself as text.
This is the link type that provides the greatest commercial benefit as it affects search engine optimisation and link analysis most readily.
Image Link
This is why this type of link is less suited for search engine optimisation and accessibility as neither the spider or human using a screen reader genuinely knows what is in the image and are entirely reliant on the alt tag being accurate and meaningful.
Image Map Link
An image map is a plotted HTML link zone that can be superimposed on an image allowing the plotted zones to be used as links. Again, just like an image link because there is no inherent text within an image it is not ideal for SEO; you must also ensure that each plotted polygon has an appropriate alt tag to explain where the link is going.
JavaScript Links
This client-side scripting language is ubiquitous in web browsers and a driving force behind dynamic functions we tend to now take for granted. JavaScript links can be initiated from a variety of elements in the Document Object Model (DOM) and user interactions. The thing to remember about JavaScript navigation is that it is largely inaccessible to search engines and many users with accessibility issues (Google however, does now follow very basic JavaScript links) .
Therefore, it is strongly recommended that any JavaScript link functionality that you provide is backed-up with a more accessible HTML alternative to ensure humans and the search engine spiders can get to the same link destinations.
Form Submit Button
The submit element within a form is a link and makes an HTTP request when clicked. Example submit buttons from left to right Amazon, John Lewis and eBay are shown below.
Submit buttons are usually associated with important call-to-action functions - therefore, the copy used in the text will have an important influence on conversion rates and user response levels.
Form Elements
Other elements within a form such as an option-select drop down menu can be used as navigation elements, but these are not links in themselves, but merely ways of triggering JavaScript links or using JavaScript to initiate a hidden form submit button.
Flash/Silverlight/Apps
Web based applications such as Flash and Silverlight can deploy links in a whole range of ways; but in the simplest sense they still fire an HTTP request. Like images, which are not text based, Flash & Silverslight, and any other web apps need to consider accessibility for humans and search engines during development, and alternative functionality needs to be available if the app cannot meet this need!
Navigation Design Tips
Here's a quick list of consideration for any navigation design you do:-
Compact - screen real estate is at a premium - don't waste it on navigation if it can be made more compact
Logical menu structure - don't confuse users - keep it simple - don't create weird hierarchies or coin new words - don't display unusual relationship between topics/things (so displaying groceries by country of origin might be cool, but most shoppers are used to more traditional hierarchical groups in their supermarket).
Self evident labels - Definitely take the Ronseal stance with navigation menu labelling "It does exactly what it says on the tin". Make it no-nonsense plain language with clarity and context. What is the topic/thing - then call it that!
Intuitive functionality- the navigation must work in a manner that anyone can understand merely by using it.
Fast - the download and response times must be quick (almost instantaneous) - good lean coding and use of caching will ensuring this.
Browser compatible - your navigation must work in all the major browsers if you don't want to lose visitors or give them an awful user experience.
Scalable and future proof - your navigation has got to use technologies that will survive (HTML/CSS and JavaScript solutions are going to give you longevity). Likewise you need to consider how your business and website structure might change. Does your navigation provide scalability? If you needed to double the number of products you offer can you do this? If you stop offering something can it be extricated with out leaving a conspicuous hole?
Navigation Types & States
When considering navigation design you need to think about the navigation states you'll require; what needs to be shown everywhere (global navigation); will the navigation interact with the user (conditional navigation); what scalability is required and how will you sort topics/silos (secondary navigation and taxonomy/facets); lastly do any areas require access to be restricted to allow only certain types of users (logged-in/registered users)?
Lets take a quick look at navigation types/states:-
Global Navigation (Persistent) - As the name suggest global navigation appears on every page of a website and is the top level navigation's hierarchy.
It usually consists of the primary navigation (see Apple's example above), administrative header and footer navigation (see John Lewis's example below) , search and sometimes search widgets/guided search tools. The global navigation should be those links considered a sine qua non to commercial success and your users' needs.
Conditional Navigation (Persistent/Non-Persistent) - These are links that appear through interaction with the user (i.e. a conditional state has been met). Classic conditional navigation examples are roll-out/drop-down navigations (see Dell's example below), AJAX search widgets and links found on tabs when in-page tabs are clicked on the same page. When conditional navigation is constructed using HTML/CSS it can be entirely accessible to both humans and search engines.
However, care and consideration must be taken when deploying conditional navigation as:-
1) Links are often initially hidden (and therefore their presence must be signalled to users or inferred by users based on "convention")
2) It is all too easy to make conditional links inaccessible to humans and search engines if one does not consider how things work without JavaScript running the show. We'd strongly recommend having an HTML/CSS back-up methodology that works without JavaScript .
The main advantages of conditional navigation are:-
1) It does not use much screen real-estate until the users wants to navigate, at which point more options become available
2) Many levels of navigation can be shown to the user without the user having to navigate off the page they are on saving time and clicks when navigating
3) When built using flat HTML/CSS but driven with JavaScript it presents search engines with a flat-linear access to all your important links, often nicely categorised - in effect providing your website with a large global navigation inventory/site map of the important pages. Good search engine fodder!
Secondary Navigation (Non-Persistent) - These are links to sub-pages such as categories and subcategories or silos under the primary hierarchical tier (see John Lewis's example to the right). Traditionally these have been deployed in the left-hand or right-hand columns, although this is by no means universal. Secondary navigation can be deployed as a contextually persistent element (i.e. always visible within the relevant category) or in a non-persistent fashion (i.e. as conditional navigation).
The key to good secondary navigation design is clearly expressing the grandparent-parent-child page relationship and how the users navigates up or down the hierarchy. A user needs to know:-
- what is available on the current level (sibling pages)
- what is above the current level (parent and grand parent pages)
- what is available below the current level (child pages).
This needs be made obvious - use category indication (labels saying where you are e.g. "Men's Boots" if you in the men's boots section) with links to parent categories made clear and spatially relevant (e.g. the "Men's Footwear" parent category link needs to be near/adjacent to the link for the current "Men's Boots" page).
The current page should be indicated as being active with the link state indicating "this page" is active within the navigation panel.
Same level sibling navigation must be placed adjacent to the active page link.
Child level sub-navigation should be indicated visually using labels and/or visual communication techniques such as indentation, iconography and colour indication.
Breadcrumb Navigation - This is a classic example of secondary navigation providing a means of navigating up the hierarchy of a taxonomy and giving the user a sense of website geography/hierarchy:-
Great Grand Parent Page > Grand Parent Page > Parent Page > Current Page
Whilst providing a means of navigating up the hierarchy, breadcrumb navigation cannot help users find child or sibling pages, only parents and grand parents - so you can only go up, not down. Therefore, another means of navigation is obviously required to go down to lower level pages.
In-Page Tabs & Content Visibility Links - Many website use HTML/CSS to alter the CSS visibility/display states of HTML elements, thus either injecting/removing content or displaying alternative content in the same space. The advantages of this are:-
- More compact page layouts
- No need to refresh the page for additional content
- All the content can be seen for accessibility purposes (to humans and search engines alike)
The downsides to having variable display states are:-
- Users may not spot the hidden content - it needs to be signalled clearly with obvious visual communication
- It is technically spam (hidden content is frowned on by the search engines) - however, it has becomes so ubiquitous that it is unlikely this will cause an issues if implemented moderately.
Restricted Navigation (Non-Persistent) - There are often areas of a website you only want available to certain users (e.g. registered users) Generally any of the above types of navigation can be used in areas with a restricted view - so as a type of navigation "restricted navigation" does not really exist - it is merely a way describing access.
The reason for mentioning it is that it is "restricted"! Therefore you cannot have a login area (members zone or such like) and expected restricted data to be indexed by search engines/be publicly available. So you need to plan carefully what is fully accessible, and what is not.
Navigation Methodologies
So now we know what types of links are available, let's look at some methodologies used to deploy them and some of the ingenious solutions that have evolved to deploy navigation IA.
Horizontal Bar
This is a very common form of navigation, usually constructed using the
- HTML element with the list-items deployed side-to-side (controlled via the CSS).
This type of navigation is typically going to be used for the primary navigation.
Vertical Menu
This is also a very common form of navigation and in most cases will use almost identical HTML as found in the horizontal bar - with an unordered-list container holding the list-items which wrap around each of the links themselves.
This type of navigation is typically going to be used for either the primary or secondary navigation depending on the size of the offering /information resource that needs to be accessed. Bigger websites will tend to use this type of menu for secondary/tertiary navigation.
Dynamic Menus - Roll-out Menu
The roll-out menu uses HTML/CSS (sometimes with JavaScript) to display the menu on-hover (sometimes on-click) using either the anchor element's pseudo class a:hover or the DOM to enact the menu appearing.
Caution should be taken if considering nesting child sub-menus off the roll-out menu as these have proven to offer weaker usability performance. Also when adding additional sub-menus to a roll-out navigation you need to consider page width. There are many small screen resolutions form factors entering the market (hand-hand devices and smart phones) so overly wide navigation relying on hover-states to remain open can impair usability (fiddly stuff on a phone, netbook or tablet) so keep these menus as narrow as possible.
Dynamic Menus - Drop-down Menu
Like the roll-out menu, drop-down menus can use the same HTML/CSS and JavaScript techniques.
Caution should be taken not to make the menus to long/deep as this will also impair usability and prevent some users being able to navigate as desired.
Obviously you could make this a roll-up menu, but users might find this a bit confusing as it is a bit unconventional; and unconventionality usually means lower conversion rates - so it needs to be very intuitive if you plan on doing something original and innovative.
Dynamic Menus - Drop-down Panel
This is a variation on the drop-down menu theme. Instead of showing just the immediate child pages this technique will often show either categorised child pages with heading elements or grand-child pages with the child pages forming the categorised heading links in a large panel which can accommodate more links.
The advantages are:-
- You can show a lot of links in a organised fashion without the users having to navigate of the current page
- You can access these links from every page of the website when applied to the primary nav as in the example from John Lewis
- The links do not clutter the offering or take vital screen real-estate until needed.
The disadvantages are:-
- You need to be careful of the size of the panel and you users' screen resolutions
- The links are hidden unless the user interacts with the primary navigation.
Dynamic Menus - Scrolling Menus
Like most dynamic navigation, scrolling navigation can be made usable and accessible or not! However, the nots tend to be a bit more prevalent with this type of navigation. So double-check with your web development team that any deployment is fully accessible. If it does not work without JavaScript it is probably going to be inaccessible.
Horizontal and vertical scrolling navigation allow you to provide more links in a limited space which can be an advantage in many circumstances. However, be aware that unlike "hover state" type reveals for navigation elements, a scrolling navigation is much more difficult to interact with and a significant reduction in usability is consequent - so use judiciously and sparingly.
Dynamic Menus - Carousels
Carousels are innately inaccessible as they rely on either JavaScript (via libraries such as JQuery) or third party programmes such as Flash or Silverlight to provide the lateral flow function. So when you use a carousel you must either provide an alternate navigation methodology or build the element so it degrades elegantly into some form of HTML/CSS equivalent.
The advantage of a carousel is that they provide slick and high-gloss to the UI and a richer more engaging experience - so they certainly have their place and appropriate deployment - just make sure you provide an accessible alternative.
Dynamic Menus - Accordion Menus
Accordion menus dynamically open and reveal child links when the parent link is either clicked or hovered over. Again the advantage of this technique is that the "pancake" is more compact and parent-child relationships become more clear (as child pages only appear when you interact with the parent link). Below we can see an "accordion" on the Apple website opening and closing with three different categories as the active element with their child sub-links being displayed in each case.
Generally these menus will be built as a standard vertical menu, with the hiding of the appropriate child links being handled by JavaScript - consequently this usually means they are completely accessible unless implemented horribly!
Search Widgets / Search Tools
These are glorified pre-populated forms that help guide your user searches. They let users know what you've got from pre-defined list. You can jazz them up with client-side scripting and frameworks such as AJAX, but again remember they must work without the JavaScript/client-side scripting to be accessible.
The advantages of search widgets is that they allow users to quickly discover what's in your offering and get to what they want to find. Search widgets work best when all/most parameters are known in advance and the data is well structured based on the attributes used in the widget.
Faceted Search
Similar to search widgets, faceted search breaks down your offering into attribute silos. Most faceted search layouts will use either vertical or horizontal HTML links with the number of results associated with a facet indicated in the link text e.g. Apples (23) Oranges (4).
See John Lewis' example to the right for LCD TVs.
Some faceted search will dynamically update in-page without a refresh using AJAX/clinet-side scripting to give you a running tally of your selections. However, like everything else we've mentioned, to be accessible you'll need to be able execute HTTP requests for facet combinations without the use of client side scripting (i.e. a standard URL request to get the combination of facets desired).
Faceted search is ideal for complex offering with many possible choice combinations, allowing users to whittle down the results to just those elements they consider important to the purchase or information search and seeing all results that match their criteria (a key element in the purchase decision cycle - evaluation of the criteria).
Filters, Sort & Paging/View Functions
These elements allow users to make sense of category search results found on most ecommerce solutions.
Filters - These allow you to include or exclude results - generally this will be based on the "select" form element which appears as a drop-down menu, but sometimes a free-text input field can be used with include/exclude selection drown-down options or radio buttons. The similarities between filters and faceted search are largely semantic to many users - for them the end results are the same, namely keeping in or keeping out what they want or don't want respectively. Classic ecommerce filters include:-
- Brand/Manufacturer
- Price Range Brackets
- Size/Weight/Volume/Dimension Range
- Colour/Style/Finish
Sort functions - these allow you to order the results of a category page as you desire. Often these are just ascending/descending arrow links. Classic ecommerce sort functions include:-
- A-Z ascending/descending
- Price ascending/descending
- User Rating/Review/Satisfaction ascending/descending
How you implement your default view state can have a significant impact on commercial outcomes
Page view functions - these determine how many items appear in a category result set. How you implement your default view state can have a significant impact on commercial outcomes. Too many products/results will increase server load and increase the amount of data that must be downloaded.
However, many years of user testing by UX professionals and ecommerce retailers has shown that users prefer more rather than less results when they look at a category - they want to see what you've got! With the mouse-wheel being ubiquitous people intuitively scroll down - however, they're less likely to hunt for and click on the "next >" link.
So your default view state (the number of results shown on a category) is a significant commercial decision that you must finely balance between:-
- how many products/results you have in any category
- how many results can be displayed without slowing the page (to the point of UX impairment)
In addition to the default page view limit, it is strongly advised to offer users their own choice of items to be viewed on a page with a range of page view limit options in a select drop-down menu (e.g. "View 10, 20, 50" results or whatever ranges suit the offering best).
Consult your web analytics to see what users are doing and which view state is most popular - this might be the quickest and easiest way to determine what suits your website, offering and audience best when it comes to your default page view.
Paging functions - these are closely tied to page view functions as they determine how the user gets to the next page in a results set when the number of results is greater than the current page view number. These are generally simple links with Next>, , Last>>, < and numbered page links.
Filter, Sort & Page View Accessibility - Filters, sort and page view functions require a visible "submit" button when viewed without JavaScript/client-side scripting to ensure these form elements are fully accessible as the select drop-down and other form elements used to provide this functionality cannot directly submit data to the server. A visible submit button makes life easier for the user not able to use client-side scripts.
Filter, sort, page view and pagination functions are generally presented in a single bar across category results pages. It is strongly recommended that the bar is present at both the top and bottom of the results set as this improves usability.
Tags/Tag Clouds
Tag clouds are clusters of links based on keywords that have been tagged to data. One of the key advantages of tag clouds is that they generate an "organic" link architecture - i.e. this is a user/author generated link architecture that develops of its own accord as data is published with its associated tags.
Tag clouds often use variable font size to visual communicate relative importance/weight within the results set - the more articles/results that contain a tag for a keyword, the bigger that tag appears in the "cloud"
Tags and tag clouds are particularly useful when:-
- applied to user generate content (UGC)
- the primary data is non-textual (e.g. images, video, audio)
- the primary data is not self-contextual (data sets, non-prose textual data such as programming code)
By adopting users tagging large document sets can to some degree overcome metadata deficits and the expense of adding metadata post hoc within a formal schema.
So in short allowing data to be tagged by users makes the data more useful and accessible - which is good for everyone.
Structure
So we've taken a look at navigation (the means of getting around the website) but now we must turn to the structure of the website itself. This is a serious business, as structure affects everything in IA.
Types of Website Structure
There are two types of structure you can employ to present your data based on classification models used to order/sort stuff in all fields of life. These are:-
- Taxonomy
- Faceted Search
Taxonomy
A taxonomy is a pre-defined hierarchical order of things; so websites using a taxonomical structure have "Parent-Child" relationships between web pages. There is a family tree like structure with the home page as the eldest relative, under which are the first generation of children - the main categories, and under these sit the categories, the subcategories on so on, until you reach the end of the branch where document pages reside (content/product pages).
Because taxonomies rely on the grouping of related things within each branch it is necessary for the information architect to ensure that these groupings are logical to the user. The information architect must also be highly conscious of "branching" i.e. how many things are in each category.
Rule of 5+/- 2
Humans retrieve information best when there are between 3 and 7 items (know as the rule of 5 plus/minus 2 as the optimal number of items is 5) so the development of any "tree" needs to be mindful of this user requirement. Often you'll be faced with a reality that cannot be circumvented and more than 7 items will be required in a menu structure, so this is why clarity in the navigation design and layout becomes even more important.
Keyword Research & Search Engine Ontology
Keyword research to help define and populate your naming scheme (nomenclature) is one of those oft overlooked and undervalued things that needs doing to ensure better commercial outcomes.
Because taxonomies rely on a pre-defined nomenclature for branching elements (categories and subcategories) careful selection of keywords used for each element is recommended.
Search engine algorithms gain their understanding of data and what they're looking at (ontology) by looking at the linking relationship (link architecture or structure) between web pages and what those web pages contain in textual content. Therefore, a taxonomy and what you name things has two really important functions:-
- Taxonomy naming (nomenclature) using relevant keyword increases the likelihood of receiving increased levels of relevant search engine traffic for specific and related keyword terms
- Your taxonomy's nomenclature affects the semantics of other keywords within the "branch" (tiers below and above) as the search engine can better infer context and comprehension due to keyword relationships - which increases accuracy and therefore, relevance - improving search ranking.
You're looking to identify and use the most likely keywords your target audience will associate with the topic of the branch in the taxonomy. In do so you significantly increase the likelihood the search engine will find your offering relevant for the desired topic.
Maximising the benefits of organic search algorithms by using the most sensible keywords in your category naming is going to help drive more relevant "qualified" traffic to your website. As organic search traffic is free, this is going to create low-cost high-converting traffic opportunities that you're less likely to receive when keyword research is eschewed.
Website Scalability
As mentioned in the introduction, one of the biggest shortcomings in website IA design and schema is not anticipating growth or changes in the offering.
So be mindful of the need for a basic flexibility in your structure and the ability to generate new branches within any topic or remove existing branches without having to rebuild the website.
Any half-decent front-end templates of a content managed website should employ a basic level of flexibility and dexterity with regard to website structure. So if you're currently planning or preparing a website build project brief for an internal team or 3rd party developers/agency do make sure this is part of the conversation, because once something is hard coded (i.e.inflexible) it becomes a great deal more expensive and time consuming to put right what should have been there from day one.
Faceted search
Faceted search (faceted navigation/browsing) is a linear/flat structure with no real hierarchy. It is based on attributes associated with document pages so all structure is organic in the sense that your offering/inventory attributes define the criteria by which users can search.
Very few true faceted search websites exist; most are hybrids using a mix on traditionally taxonomies to handle the basics and faceted search to handle criteria selection in the offering/inventory.
The key to an effective faceted search implementation is it needs to be self evident how it works. So keep the user interface (UI) simple. Some basic advice would be:-
- Show available facets as links or check boxes + links as this make them crawlable by search engines - select menu items are not - so another route in is required if you want your facet combinations indexed by the search engine spiders
- Indicate how many results are associated with each facet
- Keep faceted search links/functionality in the same place
- Allow users to add/remove facets from the list
- Allow users to search on one facet or combination of facets and then refine their search further by adding more facets
- Allow results to be sorted using addition functions - i.e. not native to the facet logic as this will provide greater flexibility to the user to control the data - filtering will remain controlled through facet selection
We could discuss faceted search and navigation at length, but it is the initial planning phase where things can go awry with significant implications so let's take a quick delve into that and we'll look in depth a faceted search in general at a later date...
Data Structure & Keyword Manipulation
When planning your website architecture the key to successful and useful faceted search implementations is the granularity and consistency of your relational database's data set for each row item (product/offering).
You need to think of all the different attributes you can associate with an item and then define attribute-pair values for each (i.e. the attribute name and its value) consistently to all items. For example let think about a pair of Levi's® 501 Jeans. What attribute-value pairs would this item present?
Example Attribute-Value Pairs for Levi's ® 501 Jeans
- Gender: Men's
- Manufacturer: Levi's ®
- Style: 501
- Model: 005010460
- Fit: Standard Fit
- Fit Leg: Standard Leg
- Fit Fly: Fly Button
- Material: 100% Cotton
- Material Weight 13.5oz.
- Fabric: Denim
- Generic Type: Jeans
- Type Synonym: Trousers
- Colour Generic: Blue
- Colour Specific: Heavy Stuff
- Finish: Vintage/Distressed
- Retail Price: £60.00
- Size: 32/32
- Detail #1: 5 pocket
- Detail #2: rivetted
- Detail #3: rear pocket red tab
- Detail #4: brand logo /size patch
As we can see, a simple pair of jeans can have quite a few attribute value pairs, and most of these could conceivably be used within the context of faceted search. So the more granular you can make the data you hold for each product the more you can do with it.
Keyword String Concatenation
Likewise, granular data allows you to not only drive faceted search logic, but it also allows you to dynamically present textual-string data through concatenation in ways that offer optimal use of the code flow for search engine consumption.
In English, that means you can cut and re-cut the data to form sentence structures for things like the Title, Heading, Breadcrumb, Links, Unique Selling Points and Benefit Statements using different combinations of the data. So from the example above we can create many different concatenation from the array of data to describe the same product:-
- Levi's ® 501 Denim Jeans
- Levi's ® 501 Jeans 100% Cotton
- Levi's ® 501 Jeans 32/32
- Levi's ® 501 Jeans 32/32 £60.00
- Levi's ® 501 Jeans 32/32 Blue
- Levi's ® 501 Jeans 32/32 Heavy Stuff
- Levi's ® 501 Jeans 32/32 Vintage/Distressed
- Levi's ® 501 Jeans Fly Button
- Levi's ® 501 Jeans Standard Fit
- Men's Levi's ® 501 Blue Jeans
- Men's Levi's ® 501 Denim Jeans
- Men's Levi's ® 501 Jeans
- Men's Levi's ® 501 Jeans 100% Cotton
- Men's Levi's ® 501 Jeans Fly Button
- Men's Levi's ® 501 Jeans Standard Fit
How we use these data strings or any other conceivable concatenation to influence search engines and present the data in the most favourable light (i.e. where to put what data) is where IA structural design and search engine optimisation (SEO) come together. This is where some of the biggest commercial benefits with IA planning can be found.
If you're planning new ecommerce website we'd recommend you talk to an IA/SEO specialist as part of the process to outline where and how you can reap the most benefits from your "potential" data and the real opportunity cost associated with generating more granular data as part of the product database population process.
The key is to tie the concatenated strings (your optimised keyword combinations) into the HTML elements that directly support the faceted search combination page. So if the facet search combination page is a category for the following facets:-
- Men's
- Jeans
- Levi's ®
- 32"/32"
- 501
Then the category page itself and all the pages shown in the listing need to have relevant keywords in the right HTML elements that the search engine is going to evaluate.
A quick summary of those elements might be something like this:-
- Category Page HTML Title
- Category Page Meta Description
- Category Page H1 Heading
- Category Page Faceted Search Function Panel / Breadcrumb
- Category Page Link Text
- Category Page Thumbnail Image Alt Tag
- Category Page Listing Call-to-Action Button
- Product Pages HTML Titles
- Product Pages Meta Descriptions
- Product Pages H1 Headings
- Product Pages Summary / Description
- Product Pages Attributes / Specification Tables
- Product Pages Image Name, Alt Tag & Caption
- Product Pages Related Product Link Text
By having granular textual data you can ensure that the concatenated strings are grammatically correct and provide meaning and context (semantic optimisation) within each HTML element. That helps information retrieval systems such as search engines understand what a web page is about - any you'll be rewarded for making your offering clearer and easier for them to understand with increased relevance and search engine rankings.
Getting Around
Let's be clear about IA and user experience - many of your users are not going to browse and navigate their way down through your website hierarchy to a product page - they're going to use the internal search function.
However, and this is the really important commercial tip - you IA has a dual and equally important function of explaining your website and its data to the search engines - which will be your main source of traffic in any decent online marketing strategy.
Internal Search
The ultimate faceted search is the natural language internal search function and it is often going to be the preferred means of getting around a website for many users.
Some basic thing to consider with internal search:-
- Make it easy to find
- Make it part of the global navigation - i.e. on every page
- Make the call-to-action button say "search"
- Don't suck! - give relevant result
The last of these criteria is easier said than done. Often a commercial-off-the-shelf (COTS) ready made solution is going to get you the best results, so if developing your own website we'd recommend avoided tackling your own information retrieval development and simply plug a reliable third-party proprietary system that's within your budget into the website. This way your result might prove relevant to your users!
Where Am I? User Location Indication
Another function navigation performs is to let user know where they are. This function is two-fold:-
- For users browsing through the website
- For users landing on the website via deep linking such as from a search engine results page (SERP) or email campaign
It is important to provide a clear indication of where they are and where they can go. This is called providing "information scent" and it is key to tackling the bete noir of conversion - user uncertainty. So a little checklist for providing users with a sense of website geography would be:-
- Place navigation in conventional locations
- Make navigation obvious
- Make grandparent - parent - child page relationships clear
- Indicate active /current location links
- Use a breadcrumb
- Use a hierarchical HTML title structure
- Use a category indication subheading
What Next
Well, that's it for now. In the next part we'll discuss how humans and computer/machine systems retrieve data looking into things such as behavioural economics, persuasion and the limbic brain and search algorithms and how these all tie into IA design and UX planning.
Share this
Tweet