Skip to main content link. Accesskey S
  • Anonymous
  • Log on
  • Help
  • IBM logo
  • WebSphere Portal Family wiki
  • All Wikis
  • Home
  • Community Articles
  • Product Documentation
  • Learning Center


Search

Advanced Search

Categories

Tag Cloud

  • 6.0
  • 6.1
  • 6.1.0.1
  • 6.1.5
  • 7.0
  • 7.0.0.2
  • 8.0
  • actions
  • administrator
  • authoring
  • Banking template
  • best practices
  • blogs
  • builder
  • building a site
  • caching
  • catalog
  • Clickstream Engine
  • clusters
  • ConfigEngine tasks
  • content
  • customizing
  • databases
  • demo
  • deployment
  • deployment scenario
  • developer
  • developing
  • device class
  • elements
  • examples
  • Express
  • feature set
  • fix pack 2
  • Government to Business template
  • info center
  • information center
  • installation
  • installing
  • LDAP
  • Learning
  • libraries
  • LikeMinds Recommendation Engines
  • logging
  • mentors
  • message catalog
  • messages
  • migration
  • mobile
  • mobile devices
  • mobile experience
  • mobile experience 8.0
  • mobile theme
  • mobile webkit
  • MPA
  • multiplatform
  • pages
  • performance
  • personalization
  • planning
  • portal
  • Portal 6.1
  • Portal 8 theme
  • portlets
  • product doc
  • product documentation
  • projects
  • properties
  • Redbooks
  • Redbooks Wiki
  • remember me cookie
  • resources
  • REST
  • Retail Vendor template
  • rules
  • samples
  • search
  • security
  • sifters
  • sites
  • solutions catalog
  • syndication
  • test infrastructure
  • theme
  • theme optimization
  • topologies
  • troubleshooting
  • tutorials on personalization
  • video
  • wcm
  • web content
  • webkit
  • WebSphere Portal
  • WebSphere Portlet Factory
  • wikis
  • workflows
  • worksheet
  • XML configuration interface
  • z/os
  • zos
InformationInformation
You are currently viewing machine translated content. IBM translation might be available. Click IBM Translated Product Documentation to see what is available.X


Home > IBM Redbooks: Building a Sample Website Using IBM Web Content Manager 7.0 > 2.3.1 Defining information architecture
Rate this article 1 starRate this article 2 starsRate this article 3 starsRate this article 4 starsRate this article 5 stars

2.3.1 Defining information architecture 

expanded Abstract
collapsed Abstract
This section describes the concept of information architecture and provides an example of a good information architecture for reference.
ShowTable of Contents
HideTable of Contents
  • 1 Defining information architecture
  • 2 Basic examples of a good information architecture
    • 2.1 Hierarchical structure of the River Bend website
    • 2.2 Page layout
  • 3 Results of an inadequate information architecture
This section describes the concept of information architecture and provides an example of a good information architecture for reference.

Defining information architecture


Easy access to the right content on an intranet can have a direct impact on an organization's overall productivity. If users can find the information they are looking for almost before they are even aware that they are searching for the information, then you have accomplished the goal of organizing the information correctly and effectively for users. The primary reason for sharing information on a web site is to make it available for users. However, it is often the central reason why websites fail, which may also include the following reasons:
  • Information is often voluminous and widespread over different divisions within an organization, making it difficult to maintain a consistent oversight of the structure of information and to determine a structure that is easy to understand and to use.
  • There is rarely a single person or department with a consistent oversight of all the information that an organization wants to share.
  • Information is used everyday, and as a result, it is often not obvious which pieces of information are most valuable or how they should be structured.
  • By using a content management system, content providers can share more information and gain more experience, which can result in a strain on the original organization of the content.

The information architecture defines how the information on a web site should be organized and linked so that users can access content. An organization should investigate, analyze, design, and implement the information architecture for a site. Then, it must face the challenge of presenting an image that enhances the way in which the user experiences the information.

There may be reasons why a specific path to information supports your business needs. The experience that a user has can be the key to success and often reflects the organization’s philosophy. Frequently, an organization builds its success on a unique customer experience that cannot be ignored when architecting a web site. In addition, the audience can vary such that it becomes necessary to separate users into categories to provide a tailored experience for different types of users. For example, consider the following diverse offerings:
  • A food company might offer both traditional, home style food and more contemporary fast food.
  • A vehicle manufacturing company might have diverse offerings that range from passenger cars, to industrial trucks, to motorcycles, such as BMW.
  • A technology company might offer a range of products and services, from technical consulting services to consumer electronics, such as Hewlett-Packard.

Because of this diverse range of products, brands may require their own web sites with a specific information architecture and web address (URL). In this case, a master (parent) web site, which includes links to seperate web sites to represent the specific branding, is the best choice. Defining the information architecture is often the most underestimated part of a content management project. Organizations frequently spend more time finding the right content management system than on developing the right information architecture for that system.

When planning the information architecture, an organization must determine the following information:
  • The hierarchical structure of the site
  • The functionality that is required on the site
  • The look of individual pages
  • How to classify the content
  • The flexibility of the architecture to allow the business to evolve

The information architecture determines the structure of the site, how navigation is derived, and therefore the ease of navigating the site. The following aspects of information architecture are considered when designing the content management system:
  • Site framework
  • Category hierarchy
  • Document type hierarchy

Defining the information architecture lays much of the groundwork for how content is organized on a site. Regardless of where the content resides, you need a good understanding of what content needs to be presented.

Tip: A good information architecture team includes representatives of all content areas that are included on the web site. It is also beneficial to have a single person lead the team who is willing to take a leadership role and to make the required decisions.

Basic examples of a good information architecture


When considering the information to share on a web site, we recommend providing direct access to the top levels of content. The top levels are the logical entrance to information and build the foundation of the information architecture. There are no strict rules governing what these top levels should be.

Here, we present an example of a good information architecture and discuss the features that make these examples special. The examples discussed in this section include the sample River Bend Tea and Coffee website.

The River Bend Coffee and Tea Company (River Bend) is a virtual company that we use for this wiki to give a simple example of a basic information architecture. This fictitious company sells coffee and tea in different locations around the world. They have a public Internet site to share information with their customers. These customers include both individuals and businesses.

River Bend wants to provide each user a personalized experience of content based on their user profile. After each user registers on the site, they will have a profile that includes demographic and personal information that will allow the company to generate and display targeted campaigns specific to them.

For example, three levels of customers have been defined:
  • Tea Leaves for tea interested customers
  • Beans for occasional coffee drinkers
  • Big Beans for coffee connoisseurs

By using the profile information provided, along with additional personal information such as region, age, sex, and buying and viewing trends of the site, River Bend hopes to be able to increase revenues by making recommendations and posting custom campaigns on their site.

River Bend has identified the following top levels of site areas or containers for content that are directly accessible from the home page:
  • Products
  • Company
  • Locations
  • News
  • Contact

From these top levels, a secondary site area allows users to specify the topic that they are looking for within that area. For example, the secondary site area for products includes coffee or tea. This architecture provides an obvious separation that users can comprehend that leads them to the information they want to find.

The third level site area offers more content on the chosen topic. For example, under tea, users can find black tea, green tea, and herbal tea.

From both levels 2 and 3, the site offers detailed search capabilities for specific items that the user might be looking for and tailored campaign content based on the site area and user profile information.

Hierarchical structure of the River Bend website


The following figure illustrates the complete hierarchical structure of the River Bend website.



Page layout


To determine the structure and layout of the site it is important to create basic diagrams to help users to better understand how content will be structured. Likewise, it is important to agree on a navigational model. One method of building a website is to create basic wireframe diagrams.

Wireframes are like blueprints for a website page layout. They show how the framwork of a website look like. You can use drawing, graphics, or presentation tools to draw the wireframe diagrams. Wireframes connect the underlying information architecture.

In a wireframe, it shows where the content or navigational item lay on a page and the functions that the page provides. For example, in the following figure, it shows where the content item, content menu, and link menu will be placed on a page. It also shows where the navigations and search capability will be provided on the page.




The following figure illustrates a sample home page also known as the landing page. This page is the starting point for site visitors. The page contains the following items:
  1. Offers Menu - To tempt visitors into navigating to new product offerings such as a new coffee blend.
  2. Four link images - To help users to quickly access to the important information (Content item A, B, C, and D). This can be for example, Coffee, Tea, News, and Company information.
  3. Footer with short links - To provide contact, policy and site map information.




    The following figure shows the main or general page which provides access to all parts of the site:
  4. Navigational elements expanded - To show sub areas of the site - one parent and one child node deep.
  5. Offers Menu re-used - Perhaps slightly re-arranged (by date).
  6. Main part of the page - Used as the primary content delivery area, with inline editing tools when available. A Rate button is shown which uses an API function.
  7. Search bar - To allow users to perform search in the website.
  8. Campaign area - To deliver targeted information depending upon season or date (for example, eggnog or cinnamon coffee at Christmas, iced teas and coffee in the summer).
  9. Links Menu - To show links to other content with a suggest button.
  10. Foot - Re-used footer to display contact, policy, and site map information.





Note: The wireframe diagrams listed above are for illustrative purposes only. They do not represent the actual wireframes for the River Bend site.

Results of an inadequate information architecture


We have discussed some examples of good information architecture, in this section we discuss the consequences of an inadequate information architecture.

Any web content management project should highlight the consequences of poor information architecture. For example, an inadequate information architecture may show up as inconsistent website structures and a poor user experience. Websites that spread information over several areas do not follow a consequent architecture. In these cases, users lose themselves in the site, be unable to navigate back to the home page and be unable to easily find the information they seek.. An inadequate information architecture may mean the website does not consider the needs of first-time and occasional users as well as regular, experienced users.

Another easily overlooked aspect is that of the overall experience of the user, considering not just the content and page layout but also the potential screen resolution, browser type, mobile access from smart phones, tablets and other devices as well as language and any accessibility and disability considerations. You should ensure that all of the relevant aspects are reflected in the user scenarios you develop. We'll talk more about this later in this chapter.

Whilst we have stressed the importance of considering and developing the information architecture for your site as early as possible you may find that changes need to be made later in the process. This can be due to changes in the project scope or feedback from usability testing. Ensure that due consideration is given to the existing IA, any decisions based from this and the impact of the proposed changes by someone familiar with the architecture before any fundamental changes are made.

Consideration should also be given to whether the site will be delivered through a portal or traditional website as these will likely drive differences in the information architecture as a portal site will need to consider what other tools, applications and capabilities are to be delivered alongside the web content.

Sometimes an organization will implement an information architecture that may appear not to meet some users requirements. For example, a car manufacturer's web site will likely use an information architecture that provides good, easily found information for users looking for information about the latest models and launches. However, if users want information about specific supplies such as winter type, the information may be less easily found. The car manufacturer has fundamental business motive behind this strategy if for example the car manufacturer wants users to contact a local dealer instead of using the web to gain this type of information. In this example, the information architecture forces users to follow the preferred distribution channel and, in turn, helps the car manufacturer’s business. In this case an alternative would be to make the type information easily found but for the content to refer the car owner to the dealer and provide tools to easily find and contact their nearest dealership.

expanded Article information
collapsed Article information
Category:
IBM Redbooks: Building a Sample Website Using IBM Web Content Manager 7.0
Tags:
Redbooks

This Version: Version 2 December 13, 2011 2:58:28 PM by Amanda J Bauman  IBMer

expanded Attachments (0)
collapsed Attachments (0)

 


expanded Versions (2)
collapsed Versions (2)
Version Comparison     
Version Date Changed by               Summary of changes
This version (2) Dec 13, 2011 2:58:28 PM Amanda J Bauman  
1 Dec 13, 2011 1:31:24 PM Amanda J Bauman  
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedSubscribe to RSSHelpAbout
  • All Lotus and WebSphere Portal wikis
  • IBM developerWorks
  • IBM Software support
  • IBM Social Business User Experience Blog
  • IBMSocialBizUX on Twitter
  • IBMSocialBizUX on Facebook
  • Lotus product forums
  • IBM Social Business UX blog
  • IBM Collaboration Solutions
  • Recently added feedRecently added
  • Recently edited feedRecently edited
  • Recently added comments feedRecently Added Comments
  • Wiki Help
  • Forgot user name/password
  • Wiki design feedback
  • Content feedback
  • About the wiki
  • About IBM
  • Privacy
  • Contact IBM
  • IBM Terms of use
  • Wiki terms of use