Presentation Design
5.3 Presentation Design
In a presentation design, “media designers” (see section 5.1) define the look and – to some extent – the structure of how multimedia contents are presented. Based on the original idea that
96 Technology-aware Web Application Design
content is king, classic HTML specified contents together with format instructions, links, and programs (scripts). In contrast, modern presentation design follows the conceptual separation of a Web application’s content and its presentation. The content of a Web application results from the composition of explicitly developed multimedia contents on the component side and implicitly defined contents on the mesh side. This means that a good presentation design allows us to flexibly adapt the presentation to various cultural, technological, and contextual requirements.
In addition, many Web pages, Web applications and entire Web sites are restructured or fitted with a new visual design (see Chapter 1) during their lifecycles. In traditional Web development, this often means that hundreds or even thousands of HTML documents have to be adapted manually. The people involved in this HTML document modification process normally need to have sound HTML knowledge. Though suitable tools can be used to some extent, often a considerable part remains to be modified manually. This means that it is either impossible or very costly to consistently model all contents in a larger development team.
Tools available to create Web applications can be grouped into two categories by how they support the presentation design: conventional page editors and more advanced content management systems.
Page editors are generally used to create smaller ad-hoc Internet presences. Their major benefits are that they are similar to standard software, which lets users work in a familiar environment, and that they allow to directly format contents. Their major drawbacks are that HTML knowledge is necessary for non-trivial tasks, and that developers work on page level, which means that they can easily lose the bigger conceptual picture. Moreover, layout, navigation, and interaction are mixed, which can be considered a simplification for trivial applications only.
In contrast to page editors, content management systems allow separating the editorial activities from the layout, facilitating the maintenance of an Internet presence. This means, however, that the structure of an Internet presentation has to be mapped. The specifics of content management systems are that special tools for various participating roles, e.g., graphic artists or editors, are available, while HTML knowledge is normally not required. Another benefit is that content, layout, and navigation are separate, the contents of single information units are specified, and workflows can be mapped. The differentiation between page editors and content management systems introduced here blurs continually, because in recent versions many page editors integrate simple content management system functions.
5.3.1 Presentation of Nodes and Meshes
A Web page’s content results from the composition of explicitly developed multimedia contents on the component side and implicitly defined contents on the mesh side (e.g., navigation options). When creating multimedia contents, developers have a large number of design options at their disposal. With regard to the desired concept of separation of content and presentation, these design options are often competing. For example, it generally happens that the flexibility to adapt the content to a presentation context decreases as the number of formatting options increases. For a simple example, let’s assume that the HTML elements <b> and <strong> were specified to format text in bold. The <b> format is normally lost on devices that do not support bold presentation, because no alternative was specified. XHTML 2.0 replaces the <b> element by the <strong> element. The presentation of this element is controlled in the presentation design, so that it can be adapted to the technical capabilities of a device, e.g., by using underline if bold is not supported.
5.3 Presentation Design 97 While the developer specifies the fundamental look of multimedia contents on the component
side, on the mesh side the interaction and functional design implicitly result in unformatted contents.
As an example of tasks involved in the navigation design, let’s look at a presentation design for navigation interfaces. Navigation interfaces should help to find answers to three important navigational questions: (1) Where am I? (2) Where was I? and (3) Where can I go?
A presentation design is a typical example of tasks for which experienced knowledge is more important and more feasible than formal methods. Design patterns are suitable for such tasks (Rossi et al. 1999). For example, we could fall back on the Use pattern to find answers to the above questions.
The question “Where am I?” can often be answered by using the “breadcrumbs” navigational scheme, based on the Hansel and Gretel fairytale. In a user interface involving navigation through data or pages, breadcrumbs can be a useful mechanism for retracing steps, leaving a visual trail of the path taken. At any point, the user can retrace his or her steps to any previous point visited.
Finding an answer to the question “Where was I?” is not that easy, because HTTP as a core Web technology is a stateless protocol, and linking techniques are primitive. The “Back” button and lists of pages previously visited are generally used in browsers. This simple example shows that there is a need to coordinate the presentation and interaction design. When buying articles on the Web, for example, a user cannot use the “Back” button to undo a purchase, and the corresponding confusion among users is normally avoided only in a few well-designed Web applications. Another important example is consistency, ideally across the entire Web. Different presentations of previously visited links and links not yet visited are a common concept for presentation designs. Jakob Nielsen recommends not changing the usual link colors because, in this respect, consistency should have priority over aesthetics (Nielsen 1997a).
A popular approach to answer the question “Where can I go?” consists in listing all top levels of a Web site. In connection with the “breadcrumbs” navigation scheme and suitable marking of the destinations that can be reached from within the current page, the user basically obtains sufficient information about his or her position within the mesh. As a minimum, this marking should emphasize links in the text (or in another medium); in addition, marking in the navigation bar is recommended. The graphical representation of the mesh and the current position within it is desirable, but it is rarely used in practice due to a lack of standards or generally accepted methods and presentations.
5.3.2 Device-independent Development Approaches Enhanced requirements on the presentation design result from an increasing demand to consider
the trend towards a large number of different Web-enabled devices in the design of Web applications.
The spectrum of these Web-enabled devices includes almost all conceivable classes of mobile devices, from very small mobile phones with WAP browsers over smart phones and organizers to tablet PCs with touch-sensitive displays. Cooperative and very large devices are currently not relevant in practice. When looking at the technical features of mobile devices, a very different set of presentation and interaction options results for use in Web applications.
The presentation design considers these requirements within the scope of special activities to support the device-independent development of applications. For example, the Device
98 Technology-aware Web Application Design
Independent Working Group (DIWG) (W3C 2001c) of the W3C is currently working on this issue. The tasks of the DIWG include aspects from the field of application development, the adaptation of applications to the user’s context, and different representations of information. Section 5.6.1 discusses relevant approaches in more detail.