Creating Wire Frames

In this section, we are going to apply the principles of information architecture in defining the user interface of an application. The user interface, or UI for short, is very critical for an eCommerce application. It synthesizes different aspects of information architecture into a common view. The organization and navigation taxonomies are clearly articulated through mockup user interfaces called wire frames. Creating a mockup or a prototypical UI early in the process, for systems with significant UI, will clarify the interaction semantics that could potentially change the behavior and scope of the system. Sharing a prototypical UI will assist the users in identifying serious problems with navigating the workflow and processes that they are so familiar with. Many times, new requirements are discovered at this stage, and its impact could be significant. At this state, there is always a possibility that the end users will ask for a lot more than scoped by the use case summary. A scope creep will jeopardize the time and cost commitments made through a preliminary project plan created in conjunction with the use case summary. The information architect and the application architect must assess and document such changes, and involve the stakeholders and/or decision makers for making the final call.

Appendix B illustrates a storyboard for the sample application. It consists of a set of wire frames that, in conjunction with the site flow, help the users understand the workflow associated with accomplishing various tasks. Storyboards are void of graphics; their main purpose is to illustrate the content and navigation taxonomies exposed to a user and to show the various site traversal scenarios. Appendix C illustrates a site flow. The site flow is an important artifact for articulating the navigation semantics and provides a bird's-eye view of the site. Site flow does not encompass each and every navigational aspect because doing so will make it less readable. To avoid the clutter, a common technique used for creating site flows is to draw it like a tree structure where most nodes have only one parent. The site flow will complete the storyboarding effect by showing the transitions between various uniquely numbered wire frames according to the navigation semantics established for the functional web site.

A wire frame can be further augmented with additional documentation as stated here:

• Relationships between navigation elements and corresponding pages or secondary navigation elements can be explained using a side bar.

• Content mapping details can be added for identifying the content, the content's source, and the contributors.

• Callouts can be used to provide additional context for page elements.