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 Web site using Lotus Web Content Management 6.1 > 2.2.3 Information Design
Rate this article 1 starRate this article 2 starsRate this article 3 starsRate this article 4 starsRate this article 5 stars

2.2.3 Information Design 

expanded Abstract
collapsed Abstract
No abstract provided.
Table of contents Next Previous

Information Design

A critical component of information architecture is its design, which addresses content accessibility as it pertains to the site interface. Page layout, links, menus, navigators, taxonomy, site breadcrumbs, search, identity standards, graphics, and site metaphor are all components of Web information design. Different users have different preferred means for accessing information. Thus, an effective information design provides users with multiple means for accessing information. The most common means are:

  • Site navigators
  • Direct feature links
  • Embedded hyperlinks
  • Site menus
  • Search

All means are valid, and we recommend that you leverage all site components from Lotus Web Content Management when designing and building a site to enhance user experience. To provide a relevant context for these components and to illustrate specific examples, we draw upon examples from River Bend sample site referred to throughout this wiki, and the IBM developerWorks sites. We use these throughout this wiki, because we believe that they represent good information architecture and good site design. Other than River Bend, which is a fictional company, you can access these company Web sites as follows:

IBM developerWorks


Using presentation templates

One of the features of Lotus Web Content Management is that you can separate the creation of content from the presentation of content using presentation templates. When using presentation templates, the content creator is freed from having to worry about the page design that will ultimately display their content document. The presentation template is determined by a relationship in the site between a page design and content authoring template. It is recommended that you avoid a large number of slightly different presentation templates and instead, use one that covers all authoring template features.

It is possible to pair different page designs (presentation templates) with one authoring template in different site areas. This design means that one piece of content can be displayed in multiple ways depending on the site area that is currently displaying -- called multipublishing. Different uses of multipublishing can be helpful. You should create one content that includes a full set of information, for example, product information. This content can contain confidential material that is published in an intranet or extranet. If the same content is taken and published in the Internet, different presentation templates allow you not only to have a different design but also to share a subset of the original content securely. You can create content with the same type of authoring template but publish it with different presentation templates, depending on the department, brand, location, or language.

To increase the reuse and to decrease the maintenance effort, you can use components. Presentation templates can contain different kinds of components that are used depending on the site area on which the content is published. Thus, when news is separated into categories, depending on the site area, a different title logo (component) is chosen instead of creating a presentation template for every news category. Components are very helpful in customizing presentation templates but should be used reasonably.

Using site navigators

The information design of navigators is a profound part of the user's Web experience. Some users prefer to drill down through navigation levels with the site stru cture being as big a part of the user experience as the content itself. When it becomes necessary to include a high rank of navigation levels, it is crucial to choose an information design that stays straightforward and intuitive. A very powerful feature is highlighting the selected navigation path. Users easily get confused when the navigation does not follow a logical structure or changes its design.

Related to the usability considerations, you should also consider the performance of navigation. To save space or because it might seem more high tech, navigators are used that enfold all available navigation levels by clicking or mouse over. This kind of navigation is accomplish often through complex handling and cannot be easily overlooked when Web accessibility is a big issue ( ). Public Web sites should support Web accessibility, which is at times required by law.

Because Lotus Web Content Management is a dynamic process that lives over years, navigation should allow the site to expand dynamically as well.

    NOTE: Navigators are not menus. Menus are a list of hyperlinks that take you to specific pages can also be hyperlinks that can take you to specific pages, but navigators are organized differently. Navigators present the logical arrangement of a Web site, while menus are a list of related Web pages that might appear anywhere in your site and follow search criteria.

IBM developerWorks also splits their navigation into different parts. As shown in , the first-level navigation is horizontal on the top of the page similar to a toolbar. The main navigation of the site area is the vertical-level navigation that expands downward. This navigation includes level two and three of the Web site area.


IBM developerWorks navigation - example 1

When the second level is selected, the user gets a content navigation that offers more detailed information about the navigation topics (). This kind of information design gives the audience a more detailed navigation experience but also leads to a change in the navigation design. For IBM developerWorks, a technical audience is expected, and that audience is not confused by this design break. However, other audiences might prefer to be guided through the Web site using a single navigation.


IBM developerWorks fourth-level navigation

Example - Swift Trucking

In the example below, Swift Trucking hired Alacrinet Consulting Services to create a unique site navigation experience for their intranet employee portal.. The images below demonstrate how flexible the Web Content Management framework can be tuned in order to address the end user navigation experience. The initial goal of the site was to make the navigation as intuitive as possible for the truck drivers who would be accessing the site for benefits, payroll and driving schedules.


The second goal was to create an intuitive menuing system that would display relevant web content and then allow one-click access to get more information around that content.


Yet another goal was to have suggestive grouping of relevant content types so that when the end user went looking for a specific item, that item as well as oth er related content items were also made readily available.

Using menus

A menu is ultimately a search mechanism that groups together lists and related documents based on specific criteria, such as categories, site areas, or keywords for display and access to users. The image below displays links as images, icons with text, links with a summary, or many other combinations. These menus combine elements based on documents from more than one site area, where it is not possible to use site navigators. To users, menus and navigators provide the same functionality in that they allow a user to navigate around the site or to locate particular content.


Menu construction from various selection criteria

In the example below, the site for WebSphere Portal Experts offers menus for all its content pages, as shown in the example below. Thus, menus are embedded as rich text components and are managed centrally. This solution enables WebSphere Portal Experts to re-use the same links wherever they are applicable, thus limiting the maintenance effort significantly.


Other examples:

Below is an example of "Fisheye" navigation that is now supported by the dojo capabilites of IBM WebSphere Portal and WCM. The illustration below shows how a "lazy Susan" type of selection menu can be implemented within a fairly small area on the page however expands outward, over the page, as the user mouses over the items.




Using direct feature links

Of all the methods to access content, direct feature links is the most direct and provides the most premium. This method enables one-click access from a top-level site location, which is almost always the home page, to any content that is embedded a few layers down in the site structure. These types of links are reserved for the most timely and relevant news or information. However, they can also be used to provide additional information that is related to the current content.

Through the use of menus, and leveraging categories, parameters can be set to bring the timeliest content to the home page. In addition, individual pieces of content can be categorized, or a category can be associated with a specific content template so that all content created with that template has the specified category. Content can have one or more categories. These categories then can be presented dynamically by direct feature links such as News, Products, Events, or Promotions.

Below is an example of "Fisheye" navigation that is now supported by the dojo capabilites of IBM WebSphere Portal and WCM. The illustration below shows how a "lazy Susan" type of selection menu can be implemented within a fairly small area on the page however expands outward, over the page, as the user mouses over the items. These direct feature links are embedded as rich text components and are central managed. This solution would enable any site developer to re-use the same links wherever they are applicable.

We recommend that every site include the Search, Contact, and About us direct feature links to provide the user with a good Web experience.

In the example below, we look at how the company Alacrinet Consulting Services uses different aspects of Web Content Management to make a unified, cohesive, and personalized end user customer experience.

The site is made up o f the following areas.

1) There is MacroMedia Flash content

2) There is a content spot that has daily announcements and company news

3) There are specific content areas to make site navigation easier.

4) There is a content spot where new offerings from Alacrient are showcased.

5) There are registration links where new users can create a user specific profile by which Alacrinet can create more targeted marketing campaigns.



One such offering that Alacrinet offers is a WCM implementation from within a kiosk environment.



The kiosk environment is an excellent example of how the specifications of different end user devices will have an impact on how content is displayed. In the example below, Alacrinet renders content in a touch screen environment using finger scrolling menus.


Using embedded hyperlinks

Embedded text hyperlinks provide users with one-click access to content that i s related to the article that they are reading but that is location perhaps in a different area of the Web site. The only way for users to return from embedded hyperlinks is to use the browser Back button. Navigators and breadcrumbs cannot do not work here. When pages include links to pages outside of the Web site, you should replace the current Web site when contacting the new link or open the new site in a separate window. Often, embedded hyperlinks are used to define a word or phrase that is mentioned (much like a cross reference in a book).


Example - embedded hyperlinks

Another usage of embedded hyperlinks is in WebSphere Portals where they can be used to reference corresponding content or applications, depending or related information. This WebSphere Portal feature is called . Click-to-action capability lets you send information from one portlet to another so that you do not have to enter cross-portlet information manually. This capability leverages the way that Web content and Web applications interact and leads to more powerful dynamic workplaces. For example, if a user clicks on a specific topic in a Topic List portlet, click-to-action allows an adjacent portlet to limit the postings shown to just those in the specified topic, based on the criteria selected in the Topics portlet.

Using search

The search of a Web site is one of the most used features and is particularly useful to users who are pressed for time and who do not care to invest time in learning about the site structure. Visitors expect the search to return exactly what they are looking for, especially when they know that the information is there. Because of this high expectation, search results need to be high quality. To return effective search results, it is critical that content categories and keywords are defined and applied to each page prior to publication. See for information related to the search setup and configuration.

So, how should a search work from an information design perspective? There are two options possible. First, the search function should be a simple search that is intuitive to use. The user can enter words in an input field, and the results deliver all contents that include the searched parameters, sorted by relevance. Relevance does mean it starts with the content that includes all words searched for and continues with single words found.

RiverBend General Search

The second option includes a search function that offers an advanced search feature. The advanced search depends on exactly the needs of the offered content. Details could differ from a search combination linked by AND , OR , or NOT operations up to very specific needs of an application.


RiverBend Advanced search

Search results can also have a different approach. Search results should generally offer a URL to the Web page that includes the cited content. To enhance the user's experience, a short abstract can also be part of the result. This abstract offers a specified number of words from the content or especially for the search result added content fields. In particular, when searching databases, results should use the advantage the structured content offers in an informative way. Details of the results can be saved for download or can be printed.

There is one topic that is often forgotten when it comes to search results. If the Web site contains multilanguage content, would the visitor expect to find results in a language other then the language searched from when entering a keyword? The answer is most likely no. Language is also a search topic that should be taken into account.


expanded Article information
collapsed Article information
Category:
IBM Redbooks: Building a Web site using Lotus Web Content Management 6.1
Tags:
Redbooks Wiki, 6.1, Architecture

This Version: Version 13 June 23, 2010 5:04:12 PM by Craig Lordan  IBMer

expanded Attachments (0)
collapsed Attachments (0)

 


expanded Versions (7)
collapsed Versions (7)
Version Comparison     
Version Date Changed by               Summary of changes
This version (13) Jun 23, 2010 5:04:12 PM Craig Lordan  
12 Oct 21, 2009 4:08:15 PM Amanda J Bauman  
11 May 4, 2009 4:44:14 PM Alex Balk  
10 Nov 10, 2008 11:39:32 PM John Bergland  
9 Oct 1, 2008 8:48:07 PM John Bergland  
8 Oct 1, 2008 2:01:01 PM John Bergland  
6 Sep 30, 2008 6:37:12 PM John Bergland  
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