Multi-channel Design Techniques for a Successful User Experience

Davide Bolchini, University of Lugano, Paolo Paolini, Politecnico di Milano, Italy, and Marco Speroni, University of Lugano, Switzerland

Abstract

This paper explains and discusses IDM (Interactive Dialogue Model), a novel design technique specifically tailored for multi-channel applications. The background research, moving from linguistic theories and practices, has led us to the development of a "channel-independent" or "conceptual" design model (based on dialogue primitives), which can then proceed into a further "logical" design oriented toward specific channels. Designing an interactive application in two steps (channel-independent first, and channel-dependent later) allows a number of advantages without making more cumbersome the overall design process.

Keywords: dialogue models, conceptual design, multi-channel design.

Introduction

The museum on-line experience is becoming more and more multi-channel, and user needs are becoming increasingly sophisticated. Different applications to deliver the same content and a "similar interactive experience" use different devices and different technologies (e.g. Web sites, palm held devices, smart kiosks, interactive TVs). Various channels imply a number of differences: screen (size), keyboard (size), pointing devices, output devices, performances, etc. Special channels tailored for users with disabilities: blind users of the Web, for example, through screen readers, make use of an "oral version" of a Web site. In most cases today, applications for different channels are designed and implemented almost "independently", with ineffectiveness for the developers (high costs) and ineffectiveness for the users (loss of consistency across the different channels).

This paper explains and discusses IDM (Interactive Dialogue Model), a novel design technique specifically tailored for multi-channel applications. The background research, moving from linguistic theories and practices, has led us to the development of a "channel-independent" or "conceptual" design model (based on dialogue primitives), which can then proceed into a further "logical" design oriented toward specific channels. Designing an interactive application in two steps (channel-independent first, and channel-dependent later) allows a number of advantages without making more cumbersome the overall design process.

Beside the emphasis on multi-channel, IDM has two powerful features: it is highly expressive but lightweight (easy to learn and to teach), suitable for brainstorming at an early stage during design (or during the shift from requirements to design), and it is cost-effective (it requires little effort from designers) and modular (designers can take the part they wish, not being forced to "all or nothing").

Designing a Dialogic User Experience

In spite of the technical (minor) differences which distinguish between current design models, they all share a common feature: they are based upon an information-navigation paradigm to describe the user interaction. This legacy is simply due to the conceptual background underlying the origins of the World Wide Web, which is derived from the Hypertext and the Database field: a network of links interconnects pieces of information (nodes). In this scenario, it is not surprising that the nature of the technology available strongly influenced (if not determined) the concepts used to describe, design and evaluate the applications (such as nodes, units, information pieces, entities, slot, links, classes, etc.).

Detaching for a moment from the technological mechanisms underlying the application, we argue that it is possible to express the features of the communication between the user and an interactive application in terms of dialogue, not in terms of data structures. If this interaction is a sort of dialogue, designers should conceive and craft dialogues and dialogue strategies, and only then derive a sound information architecture.

Assuming that designers should be concerned about the effectiveness of the interaction with the user, a dialogue-based approach to interactive application design is far more natural than an information/navigation-based approach. A comparison can help clarify the difference: if we want to prepare ourselves for a job interview (which is a special kind of dialogue), we likely start thinking of interesting things that we can talk about, topics of interest to the addressee. All our design effort would focus on possible topics of conversations that we can easily master. Nobody would concentrate on the structure of the sentences for the dialogue: this will be formulated later.

The idea of describing man-machine communication as a dialogue is not new. Human-Computer Interaction research has long assumed that using an interactive application establishes a sort of dialogue between the user and the application (Andersen 1997). But what sort of dialogue is it? What are the rules of this dialogue? How does it relate to human-human dialogues? How can existing linguistic (rhetoric) theories and methods help us in shaping more effective designs? How can dialogue-based methods help us improve the quality of interactive application design?

The WED research project (Web As Dialogue, Swiss National Research Fund - FNSRS 105211-102061/1), being conducted at the University of Lugano with the technological support of Politecnico di Milano, focuses on these and other issues which have both practical and theoretical implications. The general background for WED is the combination of long-term experience in design (from Milano) with linguistic theoretical background (from the group of linguistic and communication researchers in Lugano). Some of the theoretical questions being addressed concern semantic modeling (from a linguistic point of view), quality of dialogues, "phoric moves" (how the different parts of a dialogue refer to each other; "anaphora", (reference to previous parts of a dialogue - very important for Web applications, given the relevance of going "back" to previously visited pages), and semiotics of dialogue interaction (Bolchini & Paolini, May 2004). For the purpose of this paper we focus only on the pragmatic goals of WED:

a) improving the quality and effectiveness of Web applications by "importing" dialogue techniques and patterns that have been proved to be effective for human-to-human communication;

b) improving the efficiency of the Web design process by borrowing dialogue-based structuring techniques;

c) creating methodologies for Web design based upon linguistic-terminology, in order to make them more suitable for designers with non technical backgrounds (i.e. graduates in classics, art, literature, philosophy, etc.);

d) paving the way for a better understanding of the issues related to transferring a "visually supported dialogue" (as it is the Web) to an "oral dialogue" (as for visually impaired users).

In the following sections of the paper we will focus on issues from "a" to "c", referring the reader to relevant references (Di Blas, Paolini, Speroni 2004) for "d".

C-IDM: Conceptual, Channel-Independent Design

IDM (Interactive Dialogue Model) is a suite of dialogue-based primitives useful for designing interactive multi-channel applications. IDM is comprised of three sub-models: conceptual IDM (C-IDM), logical IDM (L-IDM) and page IDM (P-IDM).

To illustrate IDM, we will show examples from the design of a running Web application which we developed. The Web site Munch und Berlin (www.munchundberlin.org) was realized within the HELP EU-funded project with the aim of providing to the general public (including users with visual disabilities) a Web site promoting the temporary exhibition of Edvard Munch's prints at the State Museum in Berlin. Besides a variety of innovative accessibility design features specifically tailored for blind users (which are not the central theme of this paper), the site was designed using the technique presented in this work and represents the first successful case of IDM multi-channel design.

Having a design model closer to the nature of the dialogue between the user and the system meets our aim of keeping the design process "light" and effective. In fact, the conceptual model of an "information intensive" dialogue to be supported through an interactive application (neglecting the problem of performing operations - that is outside our scope for the time being) must consider the following aspects:

A. What is the overall content?

B. What is the overall organization of the content?

C. How can the user access the content and browse through the fragments of the dialogue?

While precise answers can be provided only when a specific channel of delivery has been chosen (determining factors like screen size, pointing mechanisms, available media, etc.), important decisions can be taken in advance. What we call the "conceptual model" of an interactive application is the possibility of defining the "communication strategy" and the overall interaction pattern of the potential dialogues with the user, before digging into details depending on technical issues.

In essence C-IDM, starting from a linguistic analysis of dialogues, is based on a few simple ideas. In a dialogue we can have three basic situations: the machine is illustrating a "topic" to the user (e.g. a "print", or a "technique"); the user asks to switch to a "related topic" (e.g. switching from a print to the technique used for it); and the user starts a dialogue from a selected "group of topics" (e.g. "the masterpieces", or "the prints dealing with sickness") to browse within the group.

With the above simple dialoguing concepts we are able to explain what happens in most information intensive Web (or interactive in general) applications, with operational services not being considered for the time being. The above simple ideas have been translated into the C-IDM design primitives that we list below.

Topic: something that can be the subject of conversation between the user and the interactive application. "DRYPOINT" (a technique for prints), "THE SICK AND THE CHILD" (a print by Munch), "INTRODUCTION TO MUNCH" are example of topics, i.e. possible subjects of a dialogue between the user and the application.

Kind of Topic: the category of possible subjects of conversation. ";TECHNIQUE";, "PRINT" are kinds of topic. "DRYPOINT" is an example of "TECHNIQUE".

Change of Subject (or Relevant Relation): it determines how the dialogue can switch from one kind of topic to another one. "MADE WITH" is a possible change of subject relating any PRINT to one TECHNIQUE.

Group of Topics: determines a specific group of topics, possible subjects of conversation. MASTERPIECES is a specific group of PRINTS, while ALL_PRINTS is another, larger, group.

Multiple Group of Topics: determines a family or group of topics. It could be nice, for example, to group the prints according to the themes, sources of inspiration for Munch. All the prints of the same theme are a group of topics; "PRINTS BY THEME", overall, is a family of groups of topics (as many as there are themes). Each multiple group of topics has a corresponding "higher-level" group of topics (e.g. "all themes"), which allows selection of the specific group of topics of interest (e.g. "prints about the theme "sickness").

The above list of terms and concepts has a number of advantages over most of the current design models and methods. The list of concepts is short, and therefore easy to teach. Moreover, C-IDM primitives relate to dialogues more than to informatics; therefore they can be more effectively conveyed to people without a computer science background. Finally, despite its shortness, the list of primitives is quite "expressive", in the sense that the core ideas of most interactive (information intensive) applications can be described using those few concepts.

Figure 1 shows the complete schema for the Munch Exhibition mentioned above. The reader should notice how the schema conveys in a simple and effective manner the basic ideas underlying the application.

As we said in the introduction, design documents, we believe, do not need to be always complete. Designers often want to negotiate strategic decisions and document those decisions without being forced to commit to premature details early in the development. In many situations, design documents can be left "unfinished", still fulfilling their role of conveying most of the ideas about the application. As shown in Figure 1, a conceptual design document can be kept very simple, easy to write and effective for the reader.

Figure 1. C-IDM map for Munch exhibition application.

The schema is quite simple, and it does not take much time to write it down (any common editing tool may do). However, it expresses all the most relevant aspects of a "real life" interactive application. Moreover, the schema conveys the basic interaction ideas without commitment to a specific "channel" of delivery. Finally, the schema can be very easily used to brainstorm, debate alternatives, and discuss the macro-content pieces of the application-to-be.

As we will see in the next section, the conceptual schema can be translated into one or more logical schemas, according to the choices made for a specific channel of interaction.

L-IDM: Logical, Channel-Dependent Design

Unlike conceptual design, logical design starts taking decisions which are typically dependent on a specific fruition channel through which the application may be conveyed (being it the traditional Web, an oral channel, an interactive TV or a mobile channel).

Whereas C-IDM schema defines the overall interaction strategy to be supported during the dialogue with the user, the logical design can be seen as a detailed version of the conceptual design. Details are decided on the basis of a variety of channel-dependent factors, such as the constraints imposed by the type of device available on a given channel (e.g. screen size), the pointing devices (e.g. keyboard, smart pen, mouse, scroll bar, audio input, touch pointers, eye-tracking pointers), the media which can be used (e.g. audio, visual text, images, graphics, or video), the expected performance, and the typical scenarios of use (e.g. home or office desktop use, walking or standing contexts, mobile use on car, etc.).

All these "technicalities" may influence key decisions for the user experience. They concern at the logical level the ways detailed pieces of content are split and structured, how and when navigation possibilities are made available and may be traversed. In particular, starting from C-IDM, logical design for a specific channel may be defined by exploring the following lines of inquiries:

1. What is the detailed dialogue strategy for communicating the detailed content about a topic or a kind of topic?
2. How and when should a change of subject happen within a dialogue?
3. How does a group of topics enable access to the topics of the conversation?

Answers to these questions may lead to design decisions which can be expressed by the following L-IDM design primitives:

Dialogue Act: a unit of the dialogue within a topic. The content of a topic is split into dialogue acts, each one containing a meaningful piece of content. For the Web channel, the content of the kind of topic "Print" could be split into the dialogue acts such as "introduction", "big image", and "description". A dialogue act is basically the turn of the dialogue on behalf of the application.

Structural Strategy: the way in which the user may browse the dialogue acts of a topic. For topic and kind of topic, the designer has to decide which dialogue act has to be told first (Default Act), and which is the interaction pattern by which the others may be accessed.

Transition Act: in case of change of subject where the target topics of the dialogue are more than one, an intermediate transition act should be defined to allow the user to select the destination topic of interest among the ones proposed. For example, from "Technique" - Used for: List of Prints of the same technique.

Transition Strategy: the way in which the user may browse the target topics after a change of subject. After having been told about the transition act "list of prints made by technique X", the user selects one print, and then gets the list of prints again to select another print, and so on. This is a possible transition strategy.

Introductory Act: a group of topics should have a way to introduce the user to the topics belonging the group and permit dialogue about these topics. To this end, each group of topics has an associated introductory act which serves two main goals: to introduce the user to the topics of the group (e.g. an introduction to Munch's masterpieces selection for the group of topics "masterpieces") and to provide pointers to masterpieces for the user to select. Introductory acts are the unique starting points for the dialogue.

Subject Strategy: the way in which the user may browse within topics of a group. After having been told about the introductory act "masterpieces", the user selects one print, and then can go directly to the next masterpiece of the group and then to the next, and so on. This is a possible subject strategy.

Multiple Introductory Act: an introductory act corresponding to a "Multiple Group of Topics".

Figure 2. L-IDM design for Munch exhibition application (Web channel).

On the basis of the C-IDM schema, the L-IDM design for the Munch Exhibition Web site is shown in Figure 2. Comparing it with the L-IDM design for the palm-held device (see Figure 3), we can notice a number of design differences.

For the palm-held design, the C-IDM map has been tailored by keeping most of the kinds of topic but providing only key information, mainly communicated "orally" supported by a few lines of text: an explanation for the techniques, an intro dialogue act for the print and a description of the theme; photo gallery and description of relevant life periods, essential information for artist and artistic movements. Changes of topics have been reduced to simplify the navigation architecture, whereas all the strategies for grouping topics have been kept to enable effective selection of the content anywhere in the application.

Figure 3. L-IDM design (palm-held channel).

On the basis of our project experience, the general activities which can be done to convert the conceptual map into a "channel-dependent" version are the following:

1. dialogue acts or topics may be removed or added;
2. relevant relations may be removed or added;
3. groups of topics may be removed or added.

Based on the results of these decisions, the design should be refined without totally changing the overall dialogue pattern. In fact, users should perceive that they are dealing with the same application across different channels. We should in fact solve the trade-off between a unifying user experience and the constraints imposed by each specific channel.

P-IDM: From Logical Design to Pages

Page design (P-IDM) means defining the elements to be communicated to the user in a single dialogue act. With respect to previous decisions (see L-IDM map), designers have now to craft the actual pages containing the necessary elements to sustain the dialogue. P-IDM should provide the proper input to the detailed design of the actual pages by specifying the important elements to be present in the pages. There are simple guidelines for transiting from L-IDM (channel design) to P-IDM (page design):

• Each dialogue act becomes a page type
• Each introductory act becomes a page type
• Each transition act becomes a page type
• Relevant topics become landmarks (i.e. links present in any page)
• Relevant groups of topics become landmarks

Different page types can be easily derived from dialogue acts, introductory acts, and transitions acts. We have a set of specific guidelines for page derivation. Let us consider an excerpt of the guidelines, namely those specific to the page type deriving from dialogue acts (Table 1).

Table 1. Description of page elements for a dialogue act.

The page elements in Table 1 serve as a reminder for the designer about the components to consider when building a page. Visual communication designers can then make layout and graphic decisions to create mock-up prototypes or the finally rendered page (see Figure 4).

The page in Figure 4a shows the page version for sighted users. Activate a common screen-reader (e.g. jaws) on http://www.munchundberlin.org and you can listen to the corresponding oral version for visually-impaired users. The palm-held version is currently under implementation.

Figure 4a. Web site "Introduction" dialogue act of an exemplar of the topic Print. http://www.munchundberlin.org

Figure 4b shows the same dialogue act on the palm-held version developed according to the PDA L-IDM design.

Figure 4b. PDA "Introduction" dialogue act of an exemplar of the topic Print.

Conclusions and Future Work

IDM is a simple and usable model for designing interactive applications. In fact, its simplicity is one of its strengths. First of all, designers may use dialogue-level abstractions to focus first on the dialogue design and its strategies, rather than on the technological features to be implemented. This higher-level of abstraction towards dialogue design makes IDM lightweight and powerful at the same time with respect to current design methodologies.

Moreover, IDM is both channel-dependent and channel-independent. In fact, the overall dialogue pattern (C-IDM) may be defined independently by the specific channel of fruition; a further design activity towards a specific channel will refine the dialogue dynamics and its implications for the application logic (L-IDM). The simple notation corralling the model produces readable but expressive documentation, assuming that the high-level design is mainly used to brainstorm and discuss ideas rather than to specify fully developed solutions.

IDM has been already extensively tested with beginners, especially in professional courses addressed to people with no computer science background, but with degrees and/or industrial experience in cultural-heritage, media communication, marketing, furniture design and industrial design. These novice designers appreciated the simplicity and the expressiveness of the model and used it effectively for their own design projects.

Despite these validated advantages of the model, IDM has limitations worth noting. Operations, transactions and services must be added. So far, we have only considered information-intensive dialogues (corresponding to hypermedia-intensive applications). More task-oriented dialogues involving transaction support and operational capabilities should be smoothly integrated into the model, still keeping it lightweight and usable.

Figure 5. IDM Legenda.

References

Andersen, P.B. A Theory of Computer Semiotics, Cambridge University Press, 1997.

Bolchini, D., P. Paolini. Goal-driven requirements analysis for hypermedia-intensive Web applications. Requirements Engineering Journal, Springer, RE03 Special Issue 9 2004: 85-103.

Ceri, S., P. Fraternali, A.Bongio et al. Designing Data-intensive Web Web Applications, Morgan Kaufmann, 2002.

Conallen, J. Building Web Applications with UML (second edition), Addison-Wesley, 2003.

Di Blas, Paolini, Speroni (2004). Web Accessibility for Blind Users Towards Advanced Guidelines. UI4ALL Conference (User Interfaces for All), Wien.

Garzotto, F., P. Paolini. HDM- A Model-Based Approach to Hypertext Application Design. In ACM Transactions on Information Systems, Vol. 11, No1 January 1993 pp 1-26.

Gómez, J., C. Cachero, O. Pastor. Conceptual Modeling of Device-Independent Web Applications, IEEE Multimedia, April-June 2001 Vol. 8, No. 2.

Isakowitz T, E.A. Stohr, P. Balasubramanian. RMM: A design Methodology for Structured Hypermedia Design. In Communications of the ACM Vol.38 No.8, August 1995 pp 34-44.

Nanard, M., J. Nanard, P. King. IUHM, A Hypermedia-Based Model for Integrating Open Services, Data and Metadata, in Proc. Hypertext '03 Conference, 2003.

Rossi, G., D. Schwabe, R. Guimaraes. Designing Personalized Web Applications. In proceedings WWW10, Hong-Kong, May 2001.

UWA consortium, Hypermedia and Operation Design: Model, Notation, and Tool Architecture, UWA Project, IST-2000-25131, Deliverable D7, http://www.uwaproject.org, 2001.

Cite as:

Bolchini, D. et al., Multi-channel Design Techniques for a Successful User Experience , in J. Trant and D. Bearman (eds.). Museums and the Web 2005: Proceedings, Toronto: Archives & Museum Informatics, published March 31, 2005 at http://www.archimuse.com/mw2005/papers/bolchini/bolchini.html