DESIGNi: a workbench for supporting interaction design

Short Papers

Proceedings: NordiCHI 2010, October 16–20, 2010

DESIGNi – A Workbench for Supporting Interaction Design

Claudia Nass1, Kerstin Klöckner1, Sarah Diefenbach2, Marc Hassenzahl2 2 Fraunhofer Institute for Experimental Folkwang University Software Engineering IESE Universitaetsstrasse 12, 45141 Essen, Germany Fraunhofer-Platz 1, 67663 Kaiserlautern, Germany sarah.diefenbach@folkwang-uni.de, nass@iese.fhg.de, kloeckner@iese.fhg.de marc.hassenzahl@folkwang-uni.de 1

describe interaction and sculpt it by using proper techniques and applicable principles of a good interaction gestalt [4].

With a sharp increase in available materials (screens, sensors, motors, buttons, speech recognition), the potential way of interacting with a device becomes less constrained by technology and, thus, needs to rely more on the skills and expressiveness of the interaction designer. One important contribution appears to be the development of a universal interaction vocabulary [2, 4] that enables designers to talk about their designs in terms of basic characteristics. Like a marble piece, which can be described as smooth, hard, big, rounded, or edged, interaction may be described as slow, direct, powerful, or discrete. Besides a proper language for communicating about interaction designs, designers need tools to support the specification of their designs.

ABSTRACT

New devices expand design possibilities, but also lead to more challenges in the creation of interaction forms. This article introduces DESIGNi, a workbench that supports designers in exploring interaction forms and their attributes in a structured and systematic way. We present the components of DESIGNi and its use in creating a business application. Moreover, a comparison of the interaction forms specified in the design process with DESIGNi and the perceived interaction characteristics in user studies revealed interesting insights and points for improvement in the interaction design itself.

Author Keywords

Interaction design, design workbench, interaction vocabulary.

ACM Classification Keywords

This paper reports on the construction of a workbench, DESIGNi (Designing Interaction), which supports the specification of interaction behavior. It enables designers to experiment with different interaction gestalts and their attributes, assess the proposed forms, and align human actions and system (re)actions. To get a better understanding of DESIGNi, we first give a brief overview of the concept of interaction and of approaches that try to support interaction design. We then lay out DESIGNi and its application and report a user study. We conclude with a discussion of the lessons learned so far and detail some suggestions for improving this approach.

H5.2. [Information Interfaces and Presentation]: User Interfaces - User-centered design; Theory and methods.

INTRODUCTION

A table that recognizes your drink and recommends related snacks; a faucet that changes the color of the water according to the water temperature chosen by the user; a cell phone that changes its shape to fit the emotional content of a message [1]. Recently, we have experienced a flood of electronic devices that employ a variety of novel, mainly gesture- and touch-based ways of interaction. This can be understood as a change in paradigm, enlarging the design space from designing system behavior to designing entire interaction behavior, i.e. human and system actions, and including new terms to describe the quality of those interactions – such as natural, surprising, or real [2, 6].

INTERACTION

The term interaction has its origins in physical science where it describes a reciprocal action or influence – e.g. electromagnetism; later this term was used in social science to mean an exchange between people; nowadays, its meaning has been broadened to include the exchange of information and action between people and machines [7].

Saffer [6], for example, defines interaction as “a transaction between two entities, typically an exchange of information” (p. 4). Similarly, Lim et al. [4] argue that interaction is an abstract entity between user and artifact. Both authors understand interaction as something happening between the user and the system, i.e., an entity that can be shaped and whose attributes can be manipulated. In his semantic analysis of Human Computer Interaction models, Dix [3] also presents interaction as something built by two states and an action that moves back and forth between the states.

Interaction design has become a major topic. The seemingly intangible concept of interaction has been concretized to facilitate the design activity. Like a sculptor working on a piece of marble, interaction designers need ways to properly Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

NordiCHI 2010, October 16–20, 2010, Reykjavik, Iceland.

Copyright 2010 ACM ISBN: 978-1-60558-934-3...$5.00.

747

Short Papers

Proceedings: NordiCHI 2010, October 16–20, 2010

els34.

Connect elements of type "process building block"

Reaction

hm1.1.Person holds sa1. Recognition of 1st 1 7 5 7 first element. element of connection Person is at sa2. Recognition of the desktop ha1.Person selected element hm1.2. Person taps in front of 7 7 7 7 connects element with which the elements 6 2 5 2 the first element has computer sa3. Connection is built to connect.

…

sm1.1. Element "process building block" pulses when selected sm2.1. Element "process building block" pulses once when tipped sm2.2. Haptic vibration on element "process building block" sm3.1. Arrow fligt from first to the next element sm3.2. Sound effect

attention

constancy

Attributes

System Manner

delay

System action

power

Human action

precision

Human Manner

power

precision

continuity

speed

evidence

purpose

proximity

Attributes

continuity

Action Attributes directness

…

Situation

speed

Interaction Elementary step

2 7 2 1 1 1 7 2 7 2 1 1 7 1 2 7 2 1 1 7 1 6 6 4 4 1 6 1 6 6 4 4 1 6 1

Table 1: Screenshot DESIGNi (Scale of attributes: 1=little to 7= extremely)

That means interaction is not a discrete entity, but something that moves or behaves in a special way between user and system.

This decomposition into actions and (re)action is not really novel, as discussed in the previous section, but helped us to establish an initially systematical description way.

Therefore, the benefit presented by DESIGNi is how these components are described in order to support the design process of the behavioral entity interaction [3]. With this approach, designers are able to describe systematically the transition or interplay between human and system, i.e., how “action and (re)action” behave during the interaction.

Saffer [6], in particular, argues that interaction designers need the capability to integrate different disciplines (e.g., visual design, sound design, information architecture, human factors, etc.) and to make sure that they are in harmony. On the other hand, Lim et al. [4] argue that “there is an observed lack of established design knowledge that may help designers thinking about concrete interaction design” (p. 239). Their effort in filling this gap is shown through their design language that includes terms like interaction gestalt, attributes, and shape, and also their collection of attributes that can be employed by designers in order to describe interaction gestalt [4]. However, many of these attributes relate to the question of how information is displayed on screen, rather than to the interplay between action and (re)action, i.e., the actual interaction.

Structure of the Workbench

The interaction is described by three different aspects, the elementary step, the situation, and the attributes. Many action theories, such as Norman's [5] human action cycle, assume a breakdown of higher-order intentions into actionable parts. In DESIGNi, designers can describe each of these actionable parts, which we call elementary steps, such as “picking up the phone”, “connecting to the other phone”, and “speaking to someone on the phone”. By doing these three elementary steps, one achieves the higher-order goal of “communicating with someone”. The situation describes context factors that are relevant in an elementary step. The lower levels of action, in particular, strongly depend on situation factors. These aspects have to be considered during the design of the actual interaction. The attributes of an interaction are described by the interaction vocabulary of Diefenbach et al. [2]. Attributes addressing the entire interaction are directness (mediated-direct), proximity (spatial separation-spatial proximity), purpose (incidental-purposeful), and visibility (hidden-visible).

In a recent study, Diefenbach et al. [2] propose an “interaction vocabulary”, a set of elementary attributes for describing an interaction, which is neither restricted to a certain product range nor grounded in a modality. Along the lines of basic product characteristics such as size, weight, or color, interaction is described by terms such as slow-fast, gentle-powerful, etc. In their study, a set of more than one hundred different ways of accomplishing the task “switching on a light” served as a basis. The rationale behind this approach was to identify a comprehensive set of relevant and discriminating dimensions that help to describe and differentiate the various possible forms of interaction.

Several validation studies done to date have shown the suggested vocabulary to support the description of similarities and differences in interaction designs.

Concrete interaction design requires the specification of actions on behalf of the human and a corresponding (re)action on behalf of the machine. Both together form the interaction. The particular actions embedded in an elementary step can be described by the actual action, its manner, and specific attributes. An action on the human side in the elementary step of "connecting to the other phone" is "inputting the number". Manner and attributes describe how a person executes this action, for example, “s/he types the numbers on the keyboard”, or “s/he whispers the number into the system”, or “s/he draws the numbers on a screen”. All these instances define different manners of executing the same action. Attributes, namely speed (slow-fast), continuity (stepped-continuous), precision (approximate-precise), and power (gentle-

DESIGNI

DESIGNi is a workbench that allows designers to describe an interaction and experiment with its attributes in a structured and explicit way by varying their values.

Roughly speaking, interaction is a behavioral entity that consists of two components, namely action and (re)action.

Action comprises the entire activity a human performs in order to transmit information to a system. (Re)action is the artifact’s response to the human’s action or an autonomous action pushed by the artifact.

748

Short Papers

Proceedings: NordiCHI 2010, October 16–20, 2010

powerful) help to further specify the action; “the user whispers the number to the system in a slow, continuous, precise, and gentle way”.

system reactions by completing the area manner, although no system action was available at that moment. As presented in Table 1 he defined that for the human action “person connects elements”, the user had to “hold the first element” (hm1.1) and to “tap the element with which the first one had to be connected” (hm1.2).

The machine (re)actions are also described by the actual action, the manner, and the attributes. The (re)action manner describes the system’s outputs using one ore more media to trigger a human’s perception. It is the perceptible part of the system (re)action and can be influenced by a designer, e.g., “connection sound”. The following attributes are means for specifying the (re)action of a system: speed (slow-fast), continuity (stepped-continuous), precision (approximate-precise), power (gentle-powerful), delay (instant-delayed), constancy (changing-constant), and demand for attention (independent-needs attention).

After that, the designer was able to define adequate system reactions for each step of the human action and describe its manner and quality. The next steps were characterized these reaction manners, e.g., the manner “element ‘process building block’ pulses when selected” (sm2.1) was classified by the designer as a rather slow, continuous, rather approximate, gentle, instant, changing, and attentionneeding reaction. The characterization was realized via the scale of the “interaction vocabulary” (1=little to 7= extremely) [2].

Currently these elements are allocated in a simple table, inspired by the interaction analytical framework presented

by Suchman [7]. She used a table where action and (re)action of a system were shown side by side in order to allow experts to visualize the shared understanding between a person and a machine. Based on this, we also built our workbench as a table, where designers can describe the different aspects of interaction, concretize the interaction, and visualize the sequence of interactions. Table 1 shows DESIGNi specifying an interaction. The first part consists of the elements that describe the interaction, namely elementary step, situation, and attributes. In the second part, designers have elements related to the action – action, manner, and attributes; and the third part presents elements related to the (re)action. So, we tried to preserve the idea of visualization presented by Suchman [7] in her framework.

When some parts of the interactions had already been placed in the table, the designer could assess them.

Designers gain a better understanding of the whole because interactions are described in these coherent parts. By analyzing the design at hand, for example, the designer decided upon changes and improved the system reaction “element ‘process building block’ pulses when selected” by including a haptic vibration in the specification (sm2.2).

This procedure was executed for each elementary step of the activities in GKE. The designer worked on different elementary steps simultaneously because no sequence was predetermined. He compared individual interaction steps with the entire sequence and reflected on whether the interaction was meaningful and appropriate. Based on the specification of DESIGNi, the system was implemented for evaluation as a high-fidelity fully interactive prototype1.

APPLICATION OF DESIGNI IN THE DESIGN PROCESS

This section illustrates the use of DESIGNi for an application in a business context. It involves a so-called "graphical knowledge editor" (GKE), which is used to model processes and workflows. A typical, recurring task is to build new processes by combining already existing process building blocks. The current prototype employs the multi-touch technology as an input device, because it allows designers to manipulate the action part of an interaction as well as its (re)action part.

USER STUDY

We explored three issues in the user study: (1) the relationship between intended and perceived interaction attributes; (2) the effect of interaction forms on the user‘s assessment of the system’s qualities; and (3) the existence of some relationship between interaction attributes and a higher level evaluation concept, such as goodness (goodbad). For this purpose, we conducted a study with 12 participants (1 female, mean age=36 years, min=29, max=43) who used GKE as part of their daily work, the newly designed form of interaction was compared to the commercial application (conceived without DESIGNi) used by the users in their every day work by means of a classical computer mouse. The participants had to perform a representative work task with both systems.

At the beginning, designers have to enter the known information into the table; in this case, the elementary steps and the situation had already been specified in an earlier requirement phase. With these data, the designers begin to build the puzzle of what an interaction would look like by filling in the other cells of the table. They complete the table in the order that ideas appear in their mind; it is not important to follow any special sequence. Typically, the conception phase is unstructured, because abstract concepts do not necessarily appear to the mind as a complete image.

A comparison of the designer's specification of the interaction and the participants' ratings on how they perceived the interaction in terms of the interaction vocabulary's attributes reveals a relatively high congruence

In our example, the designer conceived an interaction for the elementary step “connect elements ‘process building block’”. He described in the table the human action followed by how users should execute it. Then, the designer defined the human manner; he began to identify different

1

Screenshots of the prototype can be visualized in http://www.fun-ni.org/gke.

749

Short Papers

Proceedings: NordiCHI 2010, October 16–20, 2010

of ratings; the mean correlation between specified and measured attributes is r = .67. Figure 1 shows that for all except one dimension, the designers’ and the participants' judgments are at least in the same direction.

Presently, DESIGNi is still a conceptual tool, but to facilitate its use by designers, this approach has to enable a productive work process. During the use of DESIGNi, designers experienced some limitations given by fulfilling the table with textual descriptions. For this, we are improving the specification form of the different disciplines that are involved in designing interaction. We want to go beyond textual descriptions and integrate other specification forms, such as quick sketching, use of videos, pictures, etc.

7 6 5 4 3 2

So far, only experienced designers have used DESIGNi for the conception of systems in order to experiment if the actual components of the workbench are appropriate for designing interaction. However, next evaluations should explore using DESIGNi versus its not using it for creating the same system. Then, we can compare the conception process and the products obtained from using DESIGNi.

1

) ) ) y n e t ) e) y s ty t) ty t) t) ac (r e ac (r e (ac it y (r (ac n (re entio rpos ximi tnes sibili dela tanc s t c vi d ( ed r ( er t y on ee spe powe pow tinui ntinu ision cisio or at pu pro dir e c p s n co rec pre d f co n p specified perceived ma de

Figure 1: Compliance of specified and perceived attributes of the new form of interaction (Scale: 1=little to 7= extremely)

All in all, the new form of interaction was very appealing: the participants liked it better (M=6.08 vs. 4.50, t(11)=2.71, p=.020), had more fun (M=6.08 vs. 4.25, t(11)=3.74, p=.003) and, most significantly, perceived the new form of interaction as more intuitive (M=6.67 vs. 3.83, t(11)=5.04, p<.001). All ratings were surveyed on a seven-point scale from 1=little to 7=extremely.

Furthermore, the use of the interaction vocabulary on the design process and on the evaluation offers designers a way for exploring potential relationships between the attributes (speed, precision, power, etc) and the higher-level qualities (goodness, fun, intuitiveness, etc) of an interaction. By analyzing those links, designers can distinguish those parts of interaction that should be rethought or redesigned in the specific interaction scenario under contemplation.

A bivariate correlation analysis was used to explore the relationship between the perceived attributes and goodness.

Three attributes presented a moderate correlation with this concept, namely directness (r=.519, p=.084), power (r=.643, p=.024), and precision (r=.681, p=.015). This effect cannot be generalized, but the integration of the interaction vocabulary on the design process and also on the evaluation can, under proper circumstances, help designers to better understand, e.g., why people like or dislike a certain form of interaction.

ACKNOWLEDGMENTS

This work was supported by the projects FUN-NI (Grant: 01 IS 09007) and Digitaler Warenfluss – ADiWa (Grant: 01 IA 08006). Both projects were funded by the German Federal Ministry of Education and Research (BMBF).

REFERENCES

1. Admin. 2008. 20 Cool Interaction Design Concepts (URL).

Retrieved April 16, 2010 from http://www.interactiondesignblog.com

DISCUSSION AND CONCLUSION

2. Diefenbach, S., Hassenzahl, M., Klöckner, K., Nass, C., and Maier, A. (in press). Ein Interaktionsvokabular: Dimensionen zur Beschreibung der Ästhetik von Interaktion. In Proc. of the Usability Professionals 2010.

DESIGNi is a workbench that helps designers to envision and describe interaction behavior in a systematic way. It fosters a more intensive and conscious exploration of interaction designs and enables the designer to do a better job because it supports a systematic design of interaction.

3. Dix, A. 2002. Towards a Ubiquitous Semantics of Interaction: phenomenology, scenarios and traces. In Proc.

DVS-IS 2002. Rostock, Germany, 238-252.

Per se, each interaction design demands from the designers an intensive analysis of an interaction and its components in order to conceive coherent and innovative concepts. In this sense, the role of DESIGNi is to be a workbench in which this activity is realized in a methodological way by using this concrete description mode. We experienced this structure as helpful for two major reasons. The first one is the inclusion of the human action in the design space. It makes the design of new human action manners explicit and so brings designers to define new system reaction forms unknown in the traditional desktop metaphor where, for example, the manner of human action cannot be designed so freely. The second reason is that each detail of an interaction gains in importance and can be thoroughly analyzed and widely manipulated by the designers, since small details make the difference in designing.

4. Lim, Y., Stolterman, E., Jung, H., and Donaldson, J. 2007.

Interaction gestalt and the design of aesthetic interactions.

In Proc. Conference on Designing Pleasurable Products and interfaces. DPPI '07. ACM, New York, NY, 239-254.

5. Norman, D. A. 1988. The Psychology of Everyday Things, Basic Books, New York, NY. 6. Saffer, D. 2006. Designing for Interaction: Creating Smart Applications and Clever Devices. First. Peachpit Press.

7. Suchman, L. A. 2006.

Human-Machine Reconfigurations: Plans and Situated Actions.

Cambridge University Press.

750