Website Design

For Information Technology Professionals

Tom Worthington FACS

Visiting Fellow, Department of Computer Science, the Australian National University, and
Director, Tomw Communications Pty Ltd, Canberra

For Internet, Intranet, and Document Systems (COMP3400/COMP6340), May 2001 (Module M3)

---

Note: New Version now available

---

Contents

• Introduction
• The Discipline of Web Site Design
• Elements of Web Site Design
• Issues in Web Site Design
  • Worthington Methodology for Quick Web Site Design
  • WebML: modeling language for designing Web sites
  • SOCOG Olympic Web Site and the Disabled
  • WAP 2.0 and Wireless Web Design
• Postscript: A current Problem in Website design BEP Secure E-commerce Initiative
• References

Introduction

The World Wide Web (Web) is a computer system providing a network of information resources, with a uniform naming scheme for locating resources, protocols for accessing them and hypertext navigation among the resources. Information technology professionals have decades of experience in developing and applying computer and telecommunications technology to processing, presenting and managing data. That experience can be applied to the web. No one profession has a monopoly on the design of web sites. Graphic design, library science, journalism, usability engineering and marketing fields have a role in the design of material for the world wide web. However, as web sites become larger, more complex and more important to the community, IT professionals are uniquely placed to provide a deep understanding of how to build such systems well.

The Discipline of Web Site Design

The information architect of a large, complex web site should be two things: someone who can think as an outsider and be sensitive to the needs of the site's users, and at the same time is enough of an insider to understand the site's sponsoring organization, its mission, goals, content, audiences, and inner workings. In terms of disciplinary background, the information architect should combine the generalist's ability to understand the perspectives of other disciplines with specialized skills in visualizing, organizing, and labeling information.Rosenfeld & Morville (1998)

Rosenfeld & Morville (1998) argue that information architecture is a new field, not clearly part of an existing discipline.The Australian Computer Society defines Information Technology as: "the development and application of computers and communications-based technologies for processing, presenting and managing data and information" (ACS 1997).

Thinking about how a computer and telecommunications based information system can help an organisation is part of the core body of knowledge for Information Technology professionals. Looking at the big picture view of the organization, identifying duplicated processes and scheduling projects is what IT people do. However after being involved in pioneering many early web sites, IT professionals have tended to be relegated to a technical support role in web site development. This is starting to cause problems as the scale of web sites and their increasing functionality exceed the skills of graphic designers, librarians, journalists and marketers.

What is the World Wide Web?

There is no formal definition of what the World Wide Web (Web) is. However, the World Wide Web Consortium (W3C), which develops web specifications, describes it as:

... a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:

1. A uniform naming scheme for locating resources on the Web (e.g., URIs).
2. Protocols, for access to named resources over the Web (e.g., HTTP).
3. Hypertext, for easy navigation among resources (e.g., HTML).

W3C (1999)

The web can be summarized as:

Web Mechanisms

Locating	uniform naming scheme	URI
Accessing	Protocols	HTTP
Navigating	Hypertext	HTML

The web was built on the foundation of the pre-existing Internet, which was built on pre-existing information technologies. Many of the challenges which look new to web site developers were faced by IT developers decades before the Internet or the web existed. What are those challenges and how can that experience help now with the web?

The ACS Core Body of Knowledge for Information Technology Professionals

To make the discussion of the disciplines for web site design more concrete, the Australian Computer Society's Core Body of Knowledge for Information Technology Professionals(ACS 1997) will be used. Similar work by other professional IT associations, such as BCS and ACM, will be discussed.

Areas of Knowledge

1. Computer Organisation and Architecture
2. Conceptual Modelling
3. Database Management
4. Data Communications and Networks
5. Data Structures and Algorithms
6. Discrete Mathematics
7. Ethics/Social Implications/Professional Practice
8. Interpersonal Communications
9. Program Design and Implementation
10. Project Management and Quality assurance
11. Information Security
12. Software Engineering and Methodologies
13. Systems Analysis and Design
14. Systems Software

Selected areas will be examined in detail.

The major challenge in IT is to discover what the client wants, what might achieve that need, to reliably build a system to meet the need and then ensure the system operates into the future.Web sites are just the latest form of IT system to be designed to meet the needs. As they become larger and more complex they take on more of the characteristics of traditional IT systems and the methodologies developed can be applied. Some issues:

• Computer Organisation and Architecture: High volume web sites test the limits of available hardware. A study of the principle of operation of the various components of a computer system allow design to be optimized to meet performance requirements. Also small hand held wireless web devices and embedded systems in set-top boxes have limited processing capacity, memory and direct exposure to the underlying hardware, requiring an appreciation of how the hardware will affect the development of web systems.
• Conceptual Modelling: A major problem with the development of large web sites is the lack of tools to deal with the complexity of design. Conceptual modelling provides tools for abstraction to find patterns in the problem and simplify design. Entity relationship models and relational models can be applied to the design of the web site structure. Normalization can be used to remove redundant data from web pages.
• Database Management: Web sites increasingly involve organized sets of shared data requiring efficient query and update. Text and images of large web sites also need to be managed. There is also a need to define data needs and the management of data and information within the organisation.
• Data Communications and Networks: Large web sites impose significant loads on a network. A large site may need to be spread geographically to balance load and the different characteristics of internal LAN and wide area networks must be considered. The security requirements of the web site need to mesh with those of the underlying network.
• Data Structures and Algorithms: These topics are related to the storage, manipulation and retrieval of data for a web site. There are alternatives available for data storage, processing and retrieval.
• Ethics/Social Implications/Professional Practice: The design of web sites involves legal, social and ethical issues of a magnitude not seen before in IT. Whereas these issues might come up a few times in the career of an IT professional, with the web they will occur in almost every project. The newness of the Internet and the public visibility of web sites create major problems for web site design.

Elements of Web Site Design

The recommended book (Rosenfeld & Morville 1998) comes from the library studies discipline and attempts to apply those disciplines to web site design . Chapters referenced:

• 2. Introduction to Information Architecture
  
• 3. Organizing Information
  
• 4. Designing Navigation Systems
  
• 8. Conceptual Design
  
• 9. Production and Operations
  

Construction of information technology systems, including large web sites are a battle to handle complexity, uncertainty and change. Software Engineering involves the design of large systems which can have 100,000 lines of code, 20 people and take years to build (Petersen 2001). Large web sites have a similar level of complexity. As with program code, web sites need to be reliable, reusable and modifiable. However, unlike software engineering few specific methodologies have been developed to deal with these issues. IT professionals will need to adapt techniques developed for other parts of the discipline, as required, to fill the gap until specific tools are developed.

Introduction to Information Architecture

The Role of the Information Architect

• Mission and Vision of the site: What is the site for? Who is it for? Who sponsored it? Who are the intended users?
• Content and functionality:What will be the range of material? To what depth will it be provided? What can be done with the information?
• Navigation: How will users find their way around the site? How will information be categorized, indexed and searched?
• Change:What phases will there be in the development? How will changes to the organisation, the content or the users needs be accommodated?

Who Should Be the Information Architect?

The designers of web sites typically have backgrounds in graphic design, library studies, journalism marketing or computer science. Web design has not been existence long enough to create its own discipline and each designer beings their own biases as to what is needed to the job. An essential element is to recognize the need for other people to contribute to the design.

Collaboration and Communication

Small web sites can be designed by one individual. Large sites take on the character of the production of a publication or of an IT system and require a team of people using project management techniques, formal project documentation and communication.

See: Chapter 2 of Rosenfeld & Morville (1998)

Organizing Information

Organizational Challenges

Information technology is making the management of information a common corporate responsibility. Several information disciplines, including IT professionals, journalists, librarians and record managers are having their traditional separate domains challenged. Staff with a personal computer and an internet connection can create and disseminate electronic information. Professionals first reactions are to ignore or eliminate these as unauthorized amieture work, then engage in interdisciplinary debate as to who owns all corporate information. Such activities are of little value to the organisation. The professionals need to demonstrate how their skills can improve on what staff are attempting to do.

Organizing Web Sites and Intranets

Schemes:

• Organizational
• Topical
• Metaphor driven

Structures:

• Hierarchical
• Hypertext
• Database
• Programmatic

Schemes:

• Organizational: Based on the structure of the organisation. This approach was used for the original design of the Department of Defence home page and the same design was adopted for the Commonwealth Government's home page by the National Library of Australia:

  The Defence home page fits in a hierarchy below the Australian Commonwealth Government Entry Point (NLA 1998) and above the pages for Navy, Army, Air Force and other Defence programs. It should be possible to follow links from the entry point down to any Defence web page and from any leaf in the hierarchy back up the Commonwealth home page. (Worthington 1998)

  This approach allows a large web site, such as that for the Government of Australia, to be easily divided for technical and administrative purposes:

  Organizational Scheme: Australian Government

  Level	URL	Organisation
  Nation	www.gov.au	Australian Governments
  Federal	www.fed.gov.au	Commonwealth Government Entry Point
  Department	www.dod.gov.au	Department of Defence
  Agency	www.dsto.defence.gov.au	Defence Science and Technology Organisation

  It should be noted in this example that for historical reasons there are some inconsistencies in the hierarchy. See also: Guidance on Departmental and Ministerial Websites by The Department of the Prime Minister and Cabinet.

• Topical: This approach arranges content by topic or area of interest of the expected readers. It was used in the redesign of the Commonwealth Government's home page to create the Commonwealth Government Entry Point. This is being taken further in creating subject based "portals" for local, state and commonwealth government information as part of the Government On-line strategy. An example is the Australian Governments' Business Entry Point.
• Metaphor driven: The most commonly used metaphor for web sites is a click-able map. An example is the map of Australia on the www.gov.au web site. Readers can click on a state to select the web site for that state government. As with computer interface designs generally, metaphor can cause problems where there is a cultural difference between the designer and readers.

Structures:

• Hierarchical: Most web sites are arranged as hierarchies of menu and information web pages. The design is based on that of a paper book, with:

  Hierarchical Structure

  Book	Web Site
  Cover	Splash Page
  Front Matter, Foreword, Preface	Home Page, About Page, FAQs, Contacts
  Table of Contents	Main Menu
  Chapters	Pages
  Back Matter, Bibliography, Index	Other Sites, Index Search

  A balance is needed between the depth and width of the web site. A deep web site has many levels of sub menus, requiring the user to click many times to reach a page. A wide web site has only a few levels, but each level has a large number of choices.

• Hypertext: The use of a hierarchy of web links is a convention imposed by the designer for the convenience of the reader. Links can be from anywhere in and web page to any other. In practice this freedom can lead to confusion for the reader and is generally used for supplementary links. An example of good use of hypertext is in the introduction to the Government Online Strategy.
• Database: Rather than use web pages and links which are statically created, much as paper documents, web pages can be generated from a database. Relational databases are generally used to hold the web site content. Templates with the structure of standard page designs are used to give the design for a particular site. Content is then filled into the templates in response to user requests. While in theory each page could look radically different (and different each time read), in pratice a structure similar to statics pages is used to avoid confusing the reader. An example of a database generated web site is the Australian Governments' Business Entry Point.
• Programmatic:Advanced web features, such as XML and cascading style sheets, can be used to provide a look more like that of a computer application than a document. Programming languages, such as Java, can be used to provide an interface similar to a computer game. JPEG 4 can be used to provide a 3d interface with animation, live video and sound. However, such interfaces are not in common use. In most cases the advanced features are used to supplement a conventional design. An example is the St George Java based Internet banking system.

See: Chapter 3 of Rosenfeld & Morville (1998)

Designing Navigation Systems

• Browser Navigation Features
• Building Context:Examples Commonwealth Government Entry Point and Department of Defence.
• Remote Navigation Elements:EdNA site map, search facility and browse map.

Browser Navigation Features

Commonly used conventions for web navigation have been established by popular browser programs. Some applications, such as micro-browsers embedded in appliances, may justify not using these navigation conventions. Also it is possible to switch off or override some browser controls for some applications, such as public web kiosks. However, for most web site design it should be assumed that the conventions will be worked with.This also assists where additional hardware or software is used to provide access for the disabled.

Building Context

Readers can get lost as to which web site they are in and where they are. The navigation system can provide clues as to where the user is and was. Examples are a navigation bar across all web pages or a fixed menu frame in a multi-frame site. Examples are the fixed top and bottom menus on the the Commonwealth Government Entry Point. and the fixed left frame on the Department of Defence home page.

Remote Navigation Elements

With most web sites based on a paper book model, it is natural to include a title page (or "splash page"), table of contents, a site map (detailed table of contents) and an index. In some designs the site map doubles as a more accessible table of contents. Few sites have an Index, but instead have a search facility. This provides less context for the reader.

EdNA (The Education Network Australia) has a "splash page" which appears for a few seconds before the contents page loads. The site map uses a simple design with headings from the contents page and then one level of details. A confusingly powerful search facility is provided. An index called a "browse map" is provided.

See: Chapter 4 of Rosenfeld & Morville (1998)

Conceptual Design

Brainstorming with White Boards and Flip Chart: Design of web sites, particularly large ones, is a similar collaborative process to the design of other IT systems. While complex automated tools may be used, a lot of the work involves communication within a group of multi-disciplinary people for which simple white boards may make a better tool.
High-Level Architecture Blueprints: No widely accepted modelling or diagramming techniques exist for web site design. IT professionals may be able to adapt Conceptual Modelling methods, such as those used for relational data and Software Engineering Methodologies used for requirements analysis functional and technical specifications process, data and object orientation models.

An example of an attempt to develop web site modelling is WebML (Ceri et al 2000).

See: Chapter 8 of Rosenfeld & Morville (1998)

Production and Operations

• Detailed Architecture Blueprints: modelling or diagramming techniques used to identify local and remote pages, content chunks, local and global navigation systems.
•  Content Mapping: Translating content from a print form to web pages or creation of new information structures.
       Web Page Inventory: Identifying pages, or collections of pages to be created.
• Point-of-Production Architecture: Planning production of the site.
• Architecture Style Guides: Describing how and why the site is arranged.
• Learning from Users: Focus groups, User Testing, Questions and suggestions, Usage Tracking.

While Rosenfeld & Morville (1998) describe design and production techniques similar to those advocated for software development, in pratice these tend to be used with differing levels of enthusiasm, as with software development.

See: Basic interface design from Guidelines for Commonwealth information published in electronic formats

See: Chapter 9 of Rosenfeld & Morville (1998)

Next: Issues in Web Site Design

See also:

• Laboratory 4 - Website Design
• Author's home page

This document is Version 3.0 - 16 May 2001: http://www.tomw.net.au/2001/dw.html

Comments and corrections to: webmaster@tomw.net.au