• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Custom Website Designs
Information Architecture

Information Design

This web design lesson provides explanation and steps on transforming ideas into information architecture. The main emphasis is on developing a framework of content that focuses on priority, simplicity, and organization. Priority and simplicity are terms that become synonymous with good informa- tion design. By priority, I refer to prioritizing the information into a structure that will enable the user to gain access, interaction, entertainment, value, and connection with your Web portfolio. Prioritizing information relies on information design.


You have already taken steps to begin the process of information design and organization has occurred. By creating a content outline, you organized the proposed content that will be presented in your Web portfolio. Refinement of the organized content relies upon navigation and usability to be thoughtful to the audience requirements. Simplicity refers to keeping navigation and usability simple and organized so that no mistakes can be made when traveling throughout the Web portfolio. Confusion in the Web portfolio cannot be tolerated by the user. He or she will not stand for not getting what they want, which is content. If the need for content discovery is not met, the connection and the communication have failed.


The scary part is that we may never know if the user has had a bad experience. Later on in this web design tutorial, we talk more deeply about usability from the viewpoint of Jakob Nielsen, the usability guru of the Web. We will also examine usability testing for our own Web portfolios to see how the user might feel when they hit our URL. One thing that we want to keep in the forefront of our navigation and usability design is that users need to get to where they’re going through navigation as simply as possible. This is nonnegotiable. Therefore, creating an easy to navigate, usable site is more difficult and then dumping loads of unorganized materials on the user. Let us examine the components that help insure usability and good design in the Web portfolio.


The guidelines in the next sections can help you develop an organized structure that will help you in the rest of the Web portfolio develop- ment steps. Remember, the development of the Web portfolio is an individual, subjective experience that provides a structured narrative in Web form.


Kristoff and Satran state: “As an information designer, you are a gatekeeper. Even though users make their own choices, it’s up to you what choices they have; what they see first, where they can go, and what they don’t see at all” (1995, p. 31). The idea of gate keeping presents an interesting metaphor when we talk about Web portfolio design.


As the author of the Web portf olio and as an information designer in the process we are gatekeepers to our own cyber appearance, credentials list, and identity. More importantly, however, we are gatekeepers to effective communication with the user. We must understand the responsibility we have to be conduits in getting the user to learn about us and to persuade the user to recognize our skills and abilities. We are gatekeepers to success with the user.


Web Portfolio Information Organization Organizing information that we put into the Web portfolio gets done on several levels. We completed one of those levels when we conceptualized and created the scope documents. Using the scope documents as a basis for further refinement of the Web portfolio content information, we now must add structure and organization to the accumulated information. The structure and organization in the next steps will be more rigid than the loosely developed concept and content documents created in the previous web design lesson. In the next phase of Web portfolio development, the technical aspects will require you to organize the content into a visual diagram.


You have done much of the technical work of organizing information by creating a content outline; now you will refine the content outline into a flowchart. Before you do that, let us talk a little bit about how the flowchart as a metaphor for a skeleton. The skeleton is a frame. The flowchart is the frame of the Web portfolio site.

Flowcharts as Skeletons

Hierarchical presentation and organization of information are the most impor- tant aspects of Web portfolio and all Web design structure. To develop information in organized, hierarchal form we must build a skeleton for the Web portfolio. The flowchart is the skeleton. Just as a programmer uses pseudo- code, a filmmaker writes a storyboard and shot list, and a painter makes a rough paper sketch, we too as Web portfolio authors, must map out our project. Information design provides a data structure that is crucial to Web develop- ment. Navigation, usability and organization are connected components in creating a successful Web portfolio site structure. The creation of the flowchart is based on the content outline. However, this is the time when you can evaluate the relationships between the navigation and sub-navigation to determine if the best choice of structure and organization are being used for the site.


Remember the process we went through. We listed categories of content. Under these categories were listed subcategories of the types of assets that would reside to represent these categories. When organiz- ing information, you will need to try some different arrangements to see how things fit under categories.


As I mentioned earlier in this text, this process of information gathering and categorization is dynamic and requires several passes through examination to validate and refine the structure. Sometimes it is difficult to figure out how to arrange information. By using categories and subcategories, you can begin to arrange information into a visible structure. By creating a visible structure on paper, you allow the final design to have an effective invisible structure. This invisible structure has to work in a positive way. Kristof and Satran (1995) explained that as an information designer you can impose a point of view that makes the product interesting. The advantage to creating a visual structure document is that we do not sacrifice our goals to persuade the user and impress them by inadvertently structuring the information of our Web portfolio site in an indirect way. The site structure documents such as flowcharts give illustration to the guts of the user options when traveling the site. The flowchart becomes important in getting an overall sense of how this information product will work. The flowchart gives a clear picture of navigation during the planning and development stages.


Navigation is steering for the user. Just as a captain guides a ship, the user will navigate your Web portfolio in search of content and a positive experience. Navigation should be simplified to provide seamless usability and serve to communicate a functional hierarchy. It is your job to provide clear, direct navigation to all your Web portfolio offers. The navigation you provide will be in the form of hyperlinks. The structure of the site dictates the navigation elements. Structure and navigation work hand-in-hand in providing pathways for the user to access information in the most direct way. Navigation that has indirect access to assets should be eliminated or never conceptualized. Some- times novice developers and novice designers waste precious time on making extravagant navigation that does not serve the purpose of helping the user access information. We must take care to fight the urge to make navigation overwhelming to the site and to the content. Navigation needs to be transparent in existence but evident when needed.

Navigation Guidelines

Navigation systems are essential components to visual representation of information on a Web site. Better known as buttons or links, navigation allows the user accessibility to the site content. The design of the navigation requires an understanding of the structure of the site.


By creating a comprehensive content outline, you should have a pretty good understanding of the basic site structure. An information flowchart defines a product’s structure. Once a flowchart exists, a lot of the navigation design work has already been done (Kristoff & Satran, 1995). In their web design tutorial Interactivity by Design, Kristoff and S atran (1995) offer three main thoughts to good navigation design. Minimize travel: create the simplest and shortest path between two points, minimize depth: create a hierarchy with the fewest possible levels (extra levels mean extra travel steps), minimize redundancy: avoid creating multiple paths to the same place from the same screen, this causes confusion about which to use. (Kristoff & Satran, 1995, p.42) Navigation relies on access. According to Kristoff and Satran (1995), there are two levels of access:

• Access to a new topic (category)

• Access within a topic (sub category) In this web design tutorial, I refer to topics as headers or categories — main navigation, specifically.


Sub topics are sub navigation and are placed under main navigation items. Keeping the user occupied is easy if you provide them access that is obstacle free. The clarity of access and navigation is something that tends to get lost in modern Web designs that overdo navigation. Navigation should not be inconspicuous to the user. It should not be so blatant that it distracts the user from the content. We will now look at the factors which affect usability.


to Top