Content management systems combine content-focused and task-focused websites into one solution. It's important to understand the different natures of content-versus task-focused solutions so that we can be sure to cover the different needs of each solution. The following definitions are based on Jesse James Garrett's work on user-centered design in his book The Elements of User Experience. Later, we'll examine common types of solutions that combine hypertext and web applications.
A static website is actually a "hypertext system", i.e. a series of hypertext files connected to each other with links. Hypertext systems are content-focused and are about providing access to that information in an efficient manner via a web browser. If you break down a hypertext system into its different layers, you can see what's required to create one.
These will be derived from business needs to present information to meet specific objectives. Commonly, the objectives are marketing or communication goals. A good example is to promote a business through a corporate website.
This defines the content elements required to build the hypertext system in order to meet the business objectives. For example, a corporate site may wish to present case studies to illustrate what the company is capable of. The content requirements would outline the structure of the case studies and what information will be needed.
This defines how the site will be structured at a high level. How the content is to be organized in a logical fashion so that the users of the system will understand. It provides a context for the content elements.
This defines how the content is to be presented on each page and how users will navigate throughout the system. It's often missed or mixed in with the information architecture and visual design, but should be considered in its own right.
The visual design defines the visual treatment of the content, e.g., the text, graphics, and navigation. It's hard to separate information design from visual design and there is, in fact, some overlap between these elements of a hypertext system. Ideally, the visual design is the last element defined; but far too often, a design mock-up is done that actually mixes the information architecture, information and navigation design with the visual design and it's hard to then make changes without affecting all of these elements. It can be very confusing if there is not a clear understanding of the different elements and the role they play in a hypertext system.
There are only two things you can do with a website; communicate or interact. Web applications are about interacting with users, e.g., making a booking or submitting a request. A web application is no different to a traditional application except that it uses a web browser as the interface and the Internet for connectivity.
The objectives for a web application can be quite diverse, ranging from providing a simple feedback form through to automating business processes such as bank loan applications. The nature of the application will depend on the business needs but will either be focused on generating revenue e.g. online sales, or improving efficiency e.g. online business processes.
A functional specification defines the features that the application will deliver. The features may be grouped into feature sets. The specification will define how the application will deliver these features to the user. It will contain details of how business processes will be implemented. It is not a technical document as such—it doesn't contain database schemas and object models. It describes the functionality that the application will deliver.
The interaction design will most likely be captured in the functional specification but should be considered an element in its own right. Interaction design shows how the user will interact with the application, the flow of screens, and the options at each stage of the application.
Applications have interactions that follow a series of defined steps. Navigation is limited to the tasks the user can perform and is mostly defined by the interaction design. Basically, you don't want people to be jumping around a web application when they are in the middle of a task such as filling out a loan application. What is important is how the screen is laid out, how the buttons and form elements are arranged, what parts of the screen are dynamic, what changes when an action is performed. All of this is captured in the information and interface design.
As with hypertext systems, the visual design defines the appearance of text, graphics, and navigation. It is clearer with web applications to understand the role of the visual design. It is applied to the interface design to make it attractive and useable. By starting with the visual design, it's obvious that you are making decisions about the interface and interaction design, which may or may not be appropriate. Although the visual design is what we first notice, and is important, it should be the last element to be addressed in a web application.
If we compare the elements in hypertext systems and web applications, we can see there are some elements in common but the core elements differ.
|
Static Websites |
Web Applications |
|---|---|
|
Visual Design |
Visual Design |
|
Information & Navigation Design |
Information & Interface Design |
|
Information Architecture |
Interaction Design |
|
Content Requirements |
Functional Specification |
|
Objectives |
Objectives |
Given that the elements differ, it's obvious that, when building a web application, we need to take a different approach to building a hypertext system. The challenge with content management systems is that they are almost always a combination of the two, which means all the elements have to be considered. For some parts of the given solution, you'll be drafting interaction designs; for other parts you'll need navigation design. And then you'll have to work out what to do with navigation when the user is the middle of an interaction. This is why content management solutions have a greater level of complexity than a static website. There are more elements to consider and also how those elements interact in one solution.