Web Development Fallacies, Part 2

The amount of hype surrounding the web has created many unrealistic and exaggerated expectations in the minds of our clients. When reality sets in and these expectations are not met, disappointment can quickly turn to resentment. Given the common negative experiences related to the web development process, and also the tendency for budgets to get out of control, clients can be left with an poor view of how the web has impacted their business.

One of the ways to overcome these challenges is to recognize and contend with these common fallacies and misconceptions before entering into the web development project. When we are aware of these tendencies we can counter them and work through them before they become problems.

Although clients may often think that creating, collecting, and editing website content will be easy, it is actually quite difficult to provide content that fits well into a new site. It is commonly believed that content can be reused from other sources. However, because the format of the web is so different from other media, rarely does existing content fit naturally into a website. At the very least, the content needs to be heavily edited. This can create a real "chicken and the egg" dilemma regarding the issue of content creation. On the one hand, designers and developers want to see as much content as possible before designing and constructing a site. Knowing exactly how long and complex a certain form is, how many product sheets there are, or what the charts, graphs and tables look like, can give them good clues for visual design, information design, and page structure. The clients, on the other hand, need to know what they are providing content for, how long it should be, and the basic purpose for its use. They might assume that certain existing brochures or information sheets might simply drop into place. This dilemma sets the stage for many small miscommunications that cause changes and delays to the project.

Working through a grayscreen prototype prior to design and development allows for effective communication with clients thereby overcoming the many barriers inherent to web development. This approach takes problematic dynamics in web development such as these and turns them into positive dynamics. Prototyping allows the client and development team to mock up the content of the site with "dummy" information, but structure it in a way that matches the final product. This allows the designers to do a good job designing appropriately to the content while giving enough clues to the content provider to submit content in a form that will fit the site as it has been structured. For example, the prototype might contain "dummy" copy on a main section page. It might be a paragraph long with the first sentence reading, "Introductory paragraph for the general product page, should highlight major benefits of the product line." Or, on a complex page, the prototype might show the general layout of a form and what the pull-down choices might be. Although this "dummy" information might not be exhaustive, it gives both the developers and the client a good idea of what kind of information is expected for the various areas of the site.

This approach to mocking up content in a prototype also helps root out any miscommunications about scope, or complexity of content. If the developer, anticipating what a client might need on a particular page, mocks up the content as they think it should be, the client can then react to it. If the client expected more detail than is represented in the prototype they can alert the developer and work it out. If there is less detail, the prototype can be adjusted as well. Making adjustments to the prototype is much easier at this early stage of development and can save incredible amounts of time and money later.

Creating appropriate content is one area of difficulty and potential confusion, actually delivering the content is also a frequent problem. Clients consistently underestimate the amount of time necessary for content creation and collection. Once a prototype is in place it becomes not only an aid in content creation, but also a means of coordinating and delivering content. The specifics of how the prototype can be used in this way are discussed in our book Client vs. Developer Wars.

Using site prototypes to aid in content creation and collection helps the client to know roughly what the content should be like which facilitates the process of content integration. Newfangled has also developed a whitescreen process that solves the problematic area of content collection and creation.

One of the best aspects of a website is its flexibility. Being able to make changes in one place where the whole world can access that new information is very freeing. Sometimes however, clients can get fooled into thinking that a website is more flexible than it really is. Due to this notion of flexibility there is a sense that major site elements and features can just be "dropped in" when needed. While this may true technically, there are important information design issues that constrain the technical possibilities.

The importance of working out information design issues before designing and programming a site grows in proportion to the depth and breadth of the site. A large site (hundreds of pages or more) with a breadth of content for a diverse audience has a great need for carefully thought out information design. Problems inherent in large sites multiply over time. The initial investment made in information organization, navigational systems, and user interface become increasingly valuable as the complexity of the site grows.

The Big Dig
Information design is the most beneficial when engaged in at the outset of a project. It is much more difficult to fix information design problems after a site has grown to include hundreds or thousands of pages than it is to structure it properly at the outset. Take a non-internet example like the "Big Dig." Anyone traveling through the Boston area is aware of the massive engineering project known as "The Big Dig." A tunnel was constructed to run completely under the city. This project was one of the greatest civil engineering projects ever undertaken. At every stage of the project an incredible amount of work had to be done re-routing traffic and utility systems, building temporary structures, destroying old structures, and finally constructing sections of the new tunnel. The complexity of this project was due to the complexity of the existing city that has grown slowly over time, bit by bit.

Information should be structured in ways that assume growth. The more flexible and well thought out the initial design, the less work (destroying and rebuilding existing pages and structures) will need to be done in the future.

Boston vs. Indianapolis
Think about how hard it is to get from one end of Boston to the other (especially during the Dig), imagine having to give someone directions who is not already familiar with the city. Now think about doing the same thing for a more modern city such as Indianapolis. Because of the opportunity to do proactive city planning in a city like Indianapolis (not to mention the lack of geographic limitations like oceans), the structure of Indianapolis is more consistently based on a grid. Terms like "West North Street" and "East North Street" actually have some relationship to where you are in the city. Compared with Boston, it is much easier to figure out your way around the city, even if you've never been there before. Information design needs to establish a clear structure that allows users to "get around" intuitively especially over time as more and more "streets and buildings" are added to the site.

Website sprawl – the university website
A good example of a website that has grown over time into a convoluted structure is the typical university website. Because of the "grass roots" approach to most university sites, content that is "owned" by a particular department, will often get "cross-linked" from one main area to another. These frequent cross-linking occurrences cause the structure to become so jumbled that a visitor doesn't know whether they are coming or going.

At other times content gets duplicated in multiple areas of the site. Aside from the obvious inefficiency of this approach, it causes data to become out of date, more broken links, and confusing search engine results. This approach compounds problems by establishing pages with incorrect information that not only misinform the viewer but conflict with correct information elsewhere on the site.

Sites do grow over time. New sections and features will be added. But if we want to avoid the problems of websites that are structured like Boston, we need work through all the information design issues at the outset. While we may not build every feature from the start, we do want to have a solid plan for how new content and features will be added later. Working through a grayscreen prototype prior to design and development allows for effective communication with clients thereby overcoming the many barriers inherent to web development. This approach offers a way to work through the information design process in a comprehensive way without incurring the expense of actually building out the final content and functionality of a site.

A major difficulty in trying to implement marketing strategies on the web is the lack of focus when establishing the main "message" of the site. A company's home page needs to address several groups of people, each with their own set of needs and expectations. Additionally, a company will want to communicate information this is important to its own branding and positioning. The attempt to address all of these needs on one home page ultimately decreases the effectiveness of any of the messages to make an impact.

In contrast, when utilizing other forms of marketing media, the audience and purpose for a particular marketing piece is narrower. For example, a brochure may be developed to respond to inquiries for product information. An advertisement may be created to appeal to a specific niche in a trade publication. A pamphlet may be designed for use in recruiting staff. In each of these examples the focus and content of the piece is specific to its intended purpose.

On the web all of these purposes and more need to be addressed with a single site. This causes struggles and confusion most clearly seen on the home page. Every department has its own purposes and desires attention on the home page. Deciding what is of most importance and how to weigh and position all of the information is both a political struggle and an information design struggle. Unfortunately many of these struggles don't manifest themselves until after much of the design and programming of a website has been completed. When the "beta site" is released to the company, many managers and department heads weigh in on what they feel is most important and what they want on the homepage. Of course changes in focus and weight at this stage will cause significant changes to the site. These changes can impact the budget, and launch date of the site. They also tend to dilute the overall message of the site and the integrity of the original design.

While there are some technical approaches to web development that can help focus the message of a website to various audiences, a website still has to address many more concerns than other forms of marketing media. When developing a website, the team needs to give attention to defining and "weighting" all of the site's goals and purposes from the beginning.

Again, grayscreen prototyping allows for effective communication with clients thereby overcoming the many barriers inherent to web development. This method helps identify the relationships between the various types of content assigning each the appropriate weight and position. Because the grayscreen prototype is an inclusive, team-centered process, many people can have input at the early stages of development. Political struggles can be overcome and diverse needs can be addressed through this process.

When developing with grayscreen the first round of prototyping might focus on the overall information architecture, namely the main-site categories and subcategories. Other site features, functions, or special sections are identified. This process is similar to developing a well worked-out site map, but the HTML prototype is more explicit and presents the ideas in more detail, in relationship to how other types of content would be handled. For example, the main sections of a site might be represented as "about us," "our products," "news," "partnerships," and "investors." A different navigation section containing site utilities such as "home," "contact," "search," and "site map" can be distinguished from the main site categories.

There might be other distinct content on the site, such as a special offer for signing up for a newsletter. This offer, though it might be important to the goals of the site, might not need to be included as a main category in the navigation bar. Instead we might call attention to it in the prototype on the home page. The prototype would represent this intention by showing the offer in a simple table cell box near the body copy on the home page. The categorization and prioritization of these items represents the information in a way that allows the client to see and react to the "weight" assigned them and the relationships between them. The client can then provide input, correction, or approval.

Because a website addresses the needs of so many audiences, it must be developed in an environment of careful communication. Grayscreen prototyping provides the opportunity to communicate about these subtleties early on in the development process when changes and adjustments can most easily be made.

Conclusion
Being aware of some of the potential problems when developing a web site is the first step in avoiding them. By using a process like grayscreen prototyping, that overcomes these barriers, we can turn potential negative experiences into positive ones. The results will be successful websites that meet and exceed the needs of our clients.