Complexity vs. Simplicity

The addition of databases and ColdFusion to the web development process does add an extra degree of complexity to the process. It is inevitable. Still, as we pointed out earlier in this chapter, the best way to deal with complexity is from a position of simplicity. The same goes for static versions of dynamic sites. They are extremely complex, requiring the developer to essentially anticipate how the user will interact with the static site and then build the pages that reflect all the permutations and computations of user interaction. To wrap your mind around that one, simply try to imagine or as a series of static pages. When you do that, a relatively simple site becomes extremely complex.

Adding the dynamic element actually introduces simplicity into the process. When that happens, the site "flattens" and the information becomes readily available. Not only that, the site can easily adapt to the user's needs, resulting in what Macromedia calls an improved "user experience."

What follows is a brief comparison between the complex static site and the flat dynamic site. This comparison is done from three very important perspectives: levels of information, interactivity, and navigation.

Complex Sites

A complex site, for the purpose of this section, is simply a large corporate site composed of a large number of HTML pages. In this case, there are a few hundred pages, as shown in Figure 2.12, that can be accessed from the home page and various other section home pages.

Figure 2.12. In the complex static site, information is distributed through hundreds of pages.


Levels of Information

The purpose of a visit to a web page is really simple?to obtain information. The assumption is the user knows exactly what information he or she needs. It is the developer's job to make that information both easy to find and understandable.

The problem with a complex static site is that quite often a fixed number of levels of information exists. These levels are developed simply to make the information easy to find. The most important information is closest to the home page, and the least important information is both quite a distance away from the home page and not very easy to access. On the surface, this makes sense, until you suddenly encounter the customer who really needs that information.

A great non-web example is the experience of one of the authors. He and his son entered a major department store to do some comparison shopping for a large flat screen TV. They had about 20 minutes of free time and spent a few minutes searching the main floor for the Store Directory. TVs were not listed. Electronics were on the top floor. Home Furnishings were two floors below the top floor. Appliances were on the same floor as Home Furnishings. After ten minutes of walking through the store, they discovered the TVs they were looking for were actually behind a wall at the end of the Home Furnishings area. They had the TV they were looking for, but it was over-priced compared to others shops, and they were both a little upset that it took so long to discover this information.

In this case, the levels of information were the six floors in the department store, and the location of the TVs?a sub level of Home Furnishings?indicates the store doesn't sell a lot of TVs. Still, in walk two potential customers, looking for precisely that information.

Complex static web sites are just like that store, but they require a store with multiples of the six floors for the information they contain. When that occurs, the information becomes layered, and proximity to the home page is more of an arbitrary decision than anything else. Now imagine the impact the discontinuance of one product line and the subsequent addition of yet another has upon the site. If it has many levels, those levels become a maintenance nightmare for the webmaster or web design team.

Interactivity Issues

Interactivity is not pop-down menus, buttons, Flash animations, or any other slick trick designed to engage the visitor. It is the ability of the user to interact with the information on a page and access precisely the information he or she seeks in as short a time as possible.

In the complex static site, interactivity is often "fixed" in place. The user essentially has to move through non-essential, fixed information as he or she gets closer to the required information. In this case, very little user interaction takes place with the information. When the user finally locates the information, it often just sits on the screen, waiting for the user to read it. In this case, the user is somewhat detached from the site because he or she simply moves through the irrelevant information in a quest to locate what is needed.

To use the department store visit as an example, the author had to move through perfumes, women's wear, couches, chairs, dining suites, and bedroom furniture before he found the information he was seeking?the TV. When it was finally located, the only interactivity presented was a card with the TV's features and price printed in large lettering.

Navigation Issues

Make no mistake about it, when it comes to the static complex site, the navigation is often fixed in place. In many respects, the only way the user can move through the site is to follow the linking lines between the pages on a site diagram.

In this case, the navigation is fixed in place and maintained by the webmaster or web design team. When things change or new relationships are established, so too must the navigation. The problem here is a high degree of complexity is introduced. Any new elements must be reflected throughout entire site. If the site was not created with a Dreamweaver template or Library item, then updating the site can be a lot of work.

Is it any wonder, then, that those visitors to the site must feel like they are trapped in M.C. Escher's painting named "Relativity"? In that painting, people walk up and down stairs that are, seemingly, connected in multiple dimensions of space. When first viewed, that painting is extremely disorienting, and one can only imagine what the people moving up and down the stairs must have felt the first time they encountered the stairs.

Flat Sites

When simplicity enters the equation, one or two pages can handle the job of a number of pages, as shown in Figure 2.13. The real benefit here is pages that quickly load so that information is readily accessible to the user. By adding that speed boost and rapid accessibility to information, you have an extremely positive user experience.

Figure 2.13. Flattening the architecture of a site by introducing dynamic data results in a more positive user experience.


The most interesting aspect of this positive experience is, from the perspective of someone new to the game, that the experience is programmatically driven, not design-driven. By letting the software do the work, the computer is free to do what it does best: crunch code. The end result is quicker load and search times, coupled with a site that has the capability, through code, to mold the page to the viewer's, not the designer's, choices.

Levels of Information

When a site is driven by server-side code, a lot of action goes on behind the scenes. The main activity is a lot of code (that the user never sees) is busy composing and displaying the pages the user does see. Thus, the hallmark of a flat dynamic site is few HTML pages, but a lot of coded pages that give the illusion of hundreds of HTML pages.

Even more important is the disappearance of the information hierarchy. In a flat dynamic site, all information is given equal importance and accessibility. This is due to the fact that the information is moved from an HTML-based paradigm to a database. When that happens, the information is essentially hidden from the user until it is needed.

The excursion to the department store is a good example of this. If the store was "flat," it essentially would be composed of a sign, a door, and one room. When the author opens the door, he is asked what he is looking for. He selects TVs, and the room configures immediately to the layout of the TV department. By simply saying he is looking for a TV, the store heads to the storeroom (database) where it keeps the TVs and lays out the display (the Dreamweaver template) by the time the author crosses the threshold of the room. When he leaves, everything is put back into the storeroom.

How does the store determine what information he sees in the display? This is governed by the rules that are set in the database and the programming. The display can be one level?show all TVs?or many levels deep?Portable TVs, Color TVs, Flat screen TVs, HDTV, and so on.

This is how the information in dynamic sites can expand and contract to adapt to changes. A new product line is really nothing more than an addition to a database. A price change doesn't require the webmaster or designer to hunt through dozens, if not hundreds, of pages to make the change because it can be done in one field of a database, and it is instantly reflected throughout the site.

Interactivity Issues

When the user controls the information flow, his or her interactions with the information become more relevant, and the site takes on a life of its own. This is because there is more user input required. This way, the site often brings itself to the user, rather than the other way around.

When that happens, the user is inevitably drawn into the site. Instead of hunting for the information on a fixed page, users may actually be doing something, such as purchasing an item or posting to an online community bulletin board. This way, they are primarily in control of the information and the site. The site becomes a guide to information and changes to reflect the information requested by the user. The end result is the user is not frustrated and comes away from his experience with that site with a positive opinion and a desire to return and perhaps even buy something.

One of the side benefits of writing books is a number of requests to attend conferences and user group meetings. One of the authors makes extensive use of his Frequent Flyer points to book his trips. When he hits the airline site, because he is Canadian, his first information request is language choice. After selecting English, he is directed to the login page, where he enters his Frequent Flyer number and password. The next page immediately shows him the number of points currently credited to his account. Not only that, the page, as shown in Figure 2.14, is personalized.

Figure 2.14. A simple task, such as checking Frequent Flyer points, becomes a personal and positive interaction with a dynamic site.


From there, he can book flights, buy extra points, change his profile, or perform a number of other tasks related to his account. Were these to be offered to him through a static series of pages, the process would be tedious, at best, and the opportunities to interact with the information would be limited.

Navigation Issues

As we have been pointing out throughout this section, flat dynamic sites are driven by code. When it comes to planning and creating the navigation through the site, it is rare to encounter navigation that is "hard-wired" or fixed in place. This way, certain navigation elements can be turned on and off.

Another side benefit to the developer is navigation can be easily maintained throughout the entire site. Adding a new navigation element, in many respects, is as easy as adding a new record to the database. If navigation is driven from the page and not a database through the use of a single server-side template, you only have to place a navigation item, such as button, on one page because that template is used throughout the entire site.

When the navigation is moved off of the connector lines between the pages on a site map, a whole new set of unfamiliar problems is presented to you. For example, a navigation system should be aware of its environment and change accordingly. When the author visits the airline site, the first navigation choice involves language. Clicking the language choice radio button takes him to the Frequent Flyer login page, which is displayed in English. If he enters the wrong PIN, he stays put until he gets it right. When the database confirms his identity, he is then able to move to his personal page to check his account. When he enters his PIN, he clicks a submit button. When he wants to move elsewhere on the site, he is presented with an HTML solution.

The bottom line here is, when planning the navigation through a dynamic site, never lose sight of the fact there is a living, breathing human being doing the clicking. If a navigation element is not available or appropriate, then don't put it on the page. If you give them a button, they will most likely press it.