# The Mondrian User Interface Pattern: Inspiring Eco-responsibility in Homes

Yann Laurillau, Joëlle L. Coutaz, Gaëlle Calvary, Van Bao Nguyen

► To cite this version:

Yann Laurillau, Joëlle L. Coutaz, Gaëlle Calvary, Van Bao Nguyen. The Mondrian User Interface Pattern: Inspiring Eco-responsibility in Homes. Stephane Ploix; Manar Amayri; Nizar Bouguila. Towards Energy Smart Homes, Springer International Publishing, pp.407-431, 2021, 978-3-030-76477-7. 10.1007/978-3-030-76477-7_13. hal-03428447

HAL Id: hal-03428447

https://hal.science/hal-03428447

Submitted on 27 Oct 2022

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# The Mondrian User Interface Pattern: Inspiring Eco-responsibility in Homes

Yann Laurillau, Joëlle Coutaz, Gaëlle Calvary, and Van Bao Nguyen
Université Grenoble Alpes, CNRS, Grenoble INP Institute of Engineering

**Abstract** The increase in energy demand has motivated a large body of research, using a diverse collection of approaches to reduce domestic energy use. One promising approach to this societal problem is the development of systems that cooperate with the residents combined with digital behavior changes interventions. In this chapter, we present the *Mondrian User Interface pattern* intended to help system developers to structure and populate the interactive components of their system in order to inspire eco-responsibility. The Mondrian UI serves as an ambient decorative display that supports different levels of users’ attention investment while sustaining daily use. Like Mondrian’s Collections, the Mondrian UI pattern divides the screen into rectangles of different sizes painted in primary colors. The rectangles contain information that can be zoomed-in and zoomed-out to support multi-level representations of the same semantic information while maintaining informational context accessible. In order to minimize attentional effort, the top-level content of a rectangle is intended to communicate information at-a-glance while the other levels provide analytic details on demand with minimalist one-click interaction. Each rectangle of the Mondrian UI is populated with eco-inspiring content such as spatio-temporal information about energy use, recommendations and explanations, and social incentives, or with utilitarian content, such as the weather forecast, that family members have the habit of consulting frequently. Utilitarian content along with the display located in a socializing place, are intended to enforce the daily use of eco-inspiring information. We have applied the Mondrian UI pattern to the design and implementation of the user interface of an e-coach electricity management system.

## Introduction

The increase in energy demand has motivated a large body of research, using a diverse collection of approaches to reduce domestic energy use. One possible approach is purely technical, as illustrated by autonomous smart energy management systems. For example, using sensing and machine learning, such systems can predict occupancy and adjust temperature accordingly [57]. At the other extreme, the task of reducing energy use is delegated to building occupants, by making them aware of the problem and providing them with quantitative information about their
consumption, or by using popular media hammering home the message that global warming is a critical societal challenge.

Between these two extremes –full machine autonomy vs. full human responsibility, the current popular approach is to support a strong positive collaboration between the system and residents. Typically, based on users’ preferences and the physical characteristics of the habitat, the system is able to optimize cost and comfort. This means that the system takes decisions on the users’ behalf and has control of the home, at least temporarily [26]. However, by recommending users to perform eco-responsible actions along with explanations, the system can improve the sense of agency [31]. In this case, the research question becomes "*How to support Human-System collaborative interaction in the context of eco-responsibility*"?

In this chapter, we present the *Mondrian User Interface (Mondrian UI) as a UI design pattern* that can help system developers to structure and populate the interactive components of their system in order to inspire eco-responsibility. In the following, we synthesize the key lessons drawn from the state of the art used to inform the design of the Mondrian UI pattern. This includes results from research on domestic environments, on properties of ambient displays as well as on informational representations relevant to eco-responsibility. We then give a detailed description of the design pattern followed by an illustrative example with the user interface of an e-coach smart energy management system [1].

## Domestic Environment and Design Implications

Previous research on domestic environments has been conducted for diverse purposes including household communication [9,33], time management and planning, technology control [10] as well as energy use in everyday life [42]. With regard to energy, it has been demonstrated that few people are aware of their consumption [8,41]. To address this problem, many forms of eco-feedback [20] as well as theoretical work on persuasive technologies have been developed [17,18,35,43,44,49], seeking to change human behavior without coercion or deception. However, as demonstrated by Erickson et al. in their longitudinal experiment with a web portal aimed at supporting reductions of electricity consumption, people “keep forgetting” or “do not have time” to use the system [12].

Thus, households need to be provided with “*a low-cost way to modify existing behaviors*” [10] that can be integrated in their life style and routines. In turn, routines evolve periodically and opportunistically, typically when an exception occurs [56]. In their ethnographic study, Davidoff et al. observe that ordinary life is punctuated by key moments, such as leaving for work, that require focusing attention on demanding activities. In addition, users’ knowledge about technical and persuasive systems improves over time, which in turn may result in loss of interest [7,51].
These observations call for a UI solution based on *calm technology*, notably the concept of *ambient display* that can support *different levels of users' attention investment* [31]. In particular, when users are in a hurry, it is essential that *information be glanceable*, possibly *catching the eye* in the case where an urgent decision is required. On the other hand, when people are willing to invest more attention in the system, a *zoomable UI* is more relevant provided that information is *"meaningful and contextually appropriate"* [47]. As interest and engagement have to be maintained, *aesthetics* has a role to play [21].

## Ambient Displays and Aesthetics

Ambient displays "move to the center of attention only when appropriate and desirable" [16], while the use of aesthetics and lifelike forms are promising techniques to inspire positive changes in human behavior [25]. The combination of ambient displays with aesthetics is believed to raise at-a-glance awareness [47], to increase inhabitants' engagement and to promote intrinsic motivations [15,25]. Figure 1 shows examples of ambient displays using aesthetic content for eco-feedback and eco-responsibility.

<figure><img src="image_2.png" /><figcaption>Fig. 1. The use of ambient and artistic displays (with permission of Paay et al. [39]).</figcaption></figure>

## Design for the periphery

As a *calm technology*, ambient displays seamlessly provide information in a non-intrusive manner in the periphery of an occupant's attention [25,48]. According to [46], calm technology provides background information that does not continuously force the user to actively pay attention. Jafarinaimi [25] and Ferscha [16] observe that calm technology allows users to interact with the system when they desire, rather than passively receive pushed information from the system. Paay et al. [39] found that the "ambiency" of real-time eco-feedback keeps inhabitants in context, moving their attention from the periphery to focus, then possibly to ac-
tions aimed at reducing energy use. This focus change relates to Fogg's notion of
a trigger, an important factor of his theoretical model of behavior change [17].

Aesthetic representations

In Human-Computer Interaction, aesthetics and enjoyment are considered to be
essential to the user's experience [37]. Aesthetics provide motivational affordanc-
es and improves system attractiveness, and is a key dimension of several persuua-
sive design spaces [15,41] and design principles [19]. Aesthetic values inspire
positive emotions as well as intrinsic motivations [22,36], which in turn may fos-
ter sustainable behavior change. Artistic representations also avoid negative rein-
forcements that some pragmatic and metaphoric visualization techniques may
convey [15,36].

However, as discussed by Petersen et al., designing aesthetic interactive sys-
tems is not limited to providing users with pleasing visual effects [40]. Aesthetic
interaction should promote aesthetics of use as well as aesthetics of appearance.
"Aesthetic of use" is tightly connected to the context of use whereas "aesthetic of
appearance" is limited to superficial beauty. Aesthetic interaction "is about trig-
gering imagination, it is thought-provoking and encourages people to think differ-
ently about the encountered interactive systems, what they do and how they might
be used differently to serve differentiated goals." [40]. Finally, in the context of
domestic use, aesthetic displays participate to the personal decoration of the inte-
rior.

Aesthetic representations fall within three categories: abstract representations, metaphorical representations, and informative art.

Abstract representations

Abstract representations are intended to raise curiosity and, from there, to increase
awareness about the system behavior [25]. Abstraction can bundle large data sets
into synthetized at-a-glance information. For instance, in Figure 2, the particles
that fall from the top of the screen at different speeds, sizes and colors, express the
electricity consumption of an office building in real time [7]. On the other hand,
People Garden message board is a flower garden that informs users about their
social environment [55]: each user is represented by an abstract flower whose
shape, color, and position evolve according to time and the number of messages
posted by this person. Abstraction may also be used to hide personal information
[14].
<figure><img src="image_3.png" /><figcaption>**Fig. 2.** Particles as an abstract representation of electricity consumption (image taken from [7]).</figcaption></figure>

Rodgers & Bartram [47] consider abstraction as a suitable solution for designing in the periphery. They have explored different data representations via abstract geometric shapes for a variety of contexts of energy consumption (see Figure 3-top). Similarly, Nakajima & Lehdonvirta [34] present users’ activities as the transformation of globular objects (see Figure 3-bottom).

<figure><img src="image_4.png" /><figcaption>**Fig. 3.** (top) Energy consumption through pinwheels visualization (with permission of Rodgers et al.), (bottom) users’ activities reflected as globular objects (with permission of Nakajima et al. [34]).</figcaption></figure>

## Metaphorical representations

Metaphorical representations “*refer to the understanding of one idea, or conceptual domain, in terms of another*” [15]. They are often used to visualize data in a pro-environmental manner, using nature-inspired elements such as trees, animals, earth, and forest. For instance, Figure 4 (left) shows a landscape to reflect electricity usage in the home [36]. The more the appliances are turned on, the more nature-based elements (here, animals and flowers) appear in the landscape.
<figure><img src="image_5.png" /><figcaption>**Fig. 4.** (left) A Landscape metaphorical representation to illustrate household consumption (with permission of Nisi et al. [36]), (right) Nuage vert as a metaphorical representation of a city's energy consumption (with permission of Evans et al. [13]).</figcaption></figure>

## Informative art

Informative art consists of augmenting artworks, such as paintings and posters, with additional information [46,50]. For instance, in order to motivate users to walk more, the number of steps that users have walked is reflected on Mona Lisa's face [34]. As shown in Figure 5 (left), Mona Lisa looks older if the user has not walked enough. As another example, the representation of email traffic of Figure 5 (center) is inspired from the paintings of Dutch artist Piet Mondrian where each rectangle represents the email activity of a person [46]. With Stone Garden (Figure 5 right), earthquakes are represented as types of stone [23]. The size and position of a stone represent the magnitude as well as the latitude/longitude of an earthquake. This representation looks like the artwork of the famous English artist Richard Long.

<figure><img src="image_6.png" /><figcaption>**Fig. 5.** (left) Mona Lisa's face reflects user's walking activities (with permission of Nakajima et al. [34]), (middle) Mondrian-inspired prototype illustrates email-traffic (with permission of Redström et al. [46]), (right) earthquake activities inspired from Richard Long's artworks (with permission of Holmquist and Skog [23]).</figcaption></figure>

Although aesthetic representations play an important role in inspiring eco-responsibility, in some situations, users want to “*see the numbers*” [47]. The combination of aesthetics with pragmatic representations is one way to satisfy this need.

## Combining Aesthetics with Pragmatic Representations
Whereas aesthetic representations are primarily thought-provoking and support at-a-glance sense making, pragmatic representations provide “concrete quantitative information” using traditional scientific visualization techniques such as bar charts and scatter plots. By contrast with aesthetics representations, pragmatic representations are expected to be explicit and unambiguous. A number of studies have shown that, although occupants understand the mapping of their energy use into artistic illustrations, they also need clear quantitative information for a deeper understanding [36,47]. Spark [14] and PowerViz [39] illustrate the combined use of aesthetic and pragmatic representations.

In Figure 6, the Spark system uses shapes of different colors and sizes to represent users’ daily activities complemented with a quantitative chart-based representation.

<figure><img src="image_7.png" /><figcaption>**Fig. 6.** Spark: Art-based visualizations of people activities using various types of shapes (top, left to right): Spiral, Rings, Bucket, Pollock, (bottom) users can also track their activities as a bar-chart (with permission of Fan et al. [14]).</figcaption></figure>

<figure><img src="image_8.png" /></figure>

<figure><img src="image_9.png" /><figcaption>**Fig. 7.** (left) PowerViz: light bulbs metaphorical real time representation of the domestic power usage at the appliance level, (right) screens for in-depth analysis: (from top to bottom) Usage History and Appliance usage (with permission of Paay et al. [39]).</figcaption></figure>

Similarly, PowerViz combines a metaphorical representation with analytic tools to help inhabitants to understand their domestic consumption at the appliance level [39]. As shown in Figure 7, PowerViz consists of a *screen saver*, a *usage*
history and an *appliance usage*. The screen saver uses a metaphorical visualization to “*create ongoing engagement with the system while giving a playful overview of total household energy consumption*” [39]. The other two displays are intended for in-depth analysis of energy consumption over time as well as for comparing the energy consumption of individual appliances. Comparative analysis may allow the detection of “greedy” appliances whose usage may then be reduced.

The combined use of aesthetic and pragmatic representations raises the follow-
ing question: “*How to provide an easy transition between the representations?*” In
PowerViz, switching from the metaphorical view to the pragmatic views is per-
formed by touching the screen. Although touching involves minimal motor effort,
it is not sufficient to support the change at the cognitive level. We address this
question with the concept of Zoomable UI coupled with Focus+context tech-
niques.

Zoomable User Interface and Focus+Context Techniques

Zoomable user interfaces allow users to change the scale of graphical contents in order to see more or less details. Zoomable user interfaces are known to provide an easy transition between multiple levels of details. They are therefore good candidates to satisfy “*easy transition to more in-depth information*”, a criterion that Mankoff at al. recommend for evaluating the usability and effectiveness of ambient information systems [32].

However, zooming introduces a temporal separation, leaving the user to assimilate and remember the relations between views [6]. Zooming is thus not sufficient to support smooth transitions between radically distinct representations as exemplified by PowerViz when it comes to switching between the metaphorical and the pragmatic representations. Focus+context techniques, on the other hand, suppress temporal separation.

Focus + Context Techniques

Focus+Context “integrates the [visual] focus and its [visual] context into a single display where all parts are concurrently visible: The focus is displayed seamlessly within its surrounding context.” [6]. This technique eliminates the temporal separation used by zooming and, at the same time, minimizes the spatial separation by displaying the focused item within its context. “By presenting all regions in a single coherent display, focus+context systems aim to decrease the short term memory load associated with assimilating distinct views of a system, and thus potentially improve user ability to comprehend and manipulate the information.” [6]
<figure><img src="image_10.png" /><figcaption>**Fig. 8.** Datelens [2] explores the Focus+Context approach for a calendar display (with permission of Cockburn et al. [6]).</figcaption></figure>

*Fisheye lens*, a popular focus+context technique, combines entirety and details in a single view using various forms of visual distortion. Visual distortion must be designed carefully as it may impede legibility and interpretation [6]. Tablelens [29] and DateLens [2] illustrated in Figure 8, both use a fisheye geometric transformation that preserves the rectangular format of all the regions of the display.

TableLens provides a condensed overview of large datasets by displaying rows and columns as rectangular bars. Users can expand a specific block of information based on the selected row and column. The zoomed block reveals additional data values. Similarly, Datelens (Figure 8-right) uses a fisheye Focus+Context approach for displaying calendars on small-size screens.

## Semantic Zoom

Focus+Context results in magnifying the focused region while shrinking the other areas. Semantic zoom is generally used to adapt the presentation of data items at different scale levels based on the available space. DateLens, for example, uses three zoom factors simultaneously: information for the day of interest is fully available as text in a focused large rectangular area. The days of the week that form the close temporal context of the day of interest, show the number of meetings as colored vertical bars displayed in smaller vertical rectangles, while the other days, further away from the temporal context, are denoted as a day number in even smaller rectangles (See Figure 8). A major difficulty for system designers is first to identify the information users need at each level of details, and then to decide how this information is represented at different scales.

The Mondrian UI pattern, presented next, brings together the key results discussed above into a holistic interaction framework that system developers can use to integrate multiple forms of eco-responsibility techniques.
# The Mondrian User Interface Pattern

In this section, we provide the overall description of the Mondrian UI pattern. We explain the benefits provided by the artistic style that Mondrian developed for his Compositions, and explain how we have augmented Mondrian’s Compositions with interactive capabilities.

## Overall Description

As Figure 9 shows, the Mondrian UI pattern organizes the user interface of a system as a focus+context tiled display, where each tile can be zoomed-in and zoomed-out to support multi-level representations of the same semantic information while maintaining informational context accessible. In order to minimize attentional effort, the top-level content of a tile is intended to communicate information at-a-glance while the other levels provide analytic details on demand with minimalist one-click interaction.

<figure><img src="image_11.png" /><figcaption>**Fig. 9.** The overall structure and interactive principles of the Mondrian UI pattern.</figcaption></figure>

Each tile of the Mondrian UI is populated with a specific type of content: eco-inspiring content and/or utilitarian content. Eco-inspiring content includes spatio-temporal information about energy use, recommendations and explanations, social incentives such as intra- and inter-social comparisons and gaming. Utilities are
services that family members have the habit of consulting frequently such as the weather forecast, stock market, time, or the local traffic conditions. In addition to semantic zoom, tiles may include horizontal scrolling as a mechanism to switch between sets of multi-level representations. This can be used to switch from a set of pragmatic representations to a set of artistic and metaphoric expressions of the same semantic information.

In order to be unavoidable without being intrusive, the Mondrian UI pattern has been devised as an always-on ambient display running on tablets located in a socializing space of the home such as the kitchen or the entrance hall [9]. As an element of the interior decoration, the ambient display has to be aesthetically pleasing and attractive. This requirement for aesthetics has motivated the use of Mondrian's abstract Compositions to structure the display.

## Mondrian's Abstract Compositions and their Benefits

As illustrated by the Composition shown in Figure 10 (left), Mondrian uses black, or grey lines, to divide the canvas into rectangles of different sizes, and paints the rectangles in primary colors. For the De Stijl avant-garde movement, Mondrian's Compositions define a new aesthetic language. From our perspective, the Compositions bring additional benefits:

* Familiarity with tiled screens as used by popular systems such as Windows applications (see illustration in Figure 10, right),

* Easy mapping between the rectangles and information: rectangles can be populated with specific types of content and primary colors can serve to convey content types,

* Direct application of the focus+context technique, as Mondrian's rectangles are of different sizes,

* Extensibility and support for iterative and incremental development: rectangles can be added or removed in phase with the development process of the system. Alternatively, some rectangles can be populated with content while others can be left as empty "pure Mondrian" tiles for further increments. In addition, the design of the content of a particular rectangle can be modified iteratively without affecting the others.

The next paragraph shows how Mondrian's Compositions can be augmented with interactive capabilities.
<figure><img src="image_12.png" /><figcaption>**Fig. 10.** (left) An example of Mondrian's composition, (right) Windows 8 screen consists of tiles, each tile refering to one block of functions ((c) Microsoft).</figcaption></figure>

## Mondrian's Compositions Augmented with Multi-level Interaction

As discussed above, people's attention investment depends on the context of use [3]. Users may feel too busy to interact with the system, they may forget to use it, or may have lost interest. On the other hand, when mentally available, they may want to explore the system in depth, to learn and understand, or to find the cause of some unexpected system behavior. We propose to augment Mondrian's Compositions with multi-level interaction that enables users to transition freely between their levels of attention. Multi-level interaction combines focus+context and semantic zoom techniques with several levels of physical involvement.

### Three levels of interaction: at-a-glance, at-one-click, at-additional zoom

*At-a-glance UI.* This level of interaction does not require any physical contact with the display, except looking at the screen. Utilitarian content of daily interest along with a well-thought out location of the display in the home, for example the kitchen, make the display physically unavoidable, thus “glanceable”. At this level, eco-inspiring content is represented in a way that makes sense at-a-glance, typically using metaphorical representations.

*At-One-click UI.* This level of interaction implies direct and short interaction with the system, typically accepting an eco-challenge from the system or selecting another tile related to eco-information. This class of interaction aims at involving the user in a more complex process beyond glancing at the display.

*At-Additional-zoom UI.* At the next level of interaction, the UI enables the user to explore the system facilities in depth by zooming-in and out while supporting transitioning between the Mondrian's tiles.
Transitioning between the Mondrian's tiles

Figure 11 illustrates the two types of transition: (a) transitions from ambient to focus, and (b) transitions within a focused view.

<figure><img src="image_13.png" /><figcaption>**Fig. 11.** (a) Transitions from the ambient screen (left) to focused Tile 1 (center) and from Tile 1 (center) to Tile 3 (right), (b) Transitions within focused Tile 1 (left) to focused Tile 1-a (center) and from Tile 1-a (center) to Tile 1-b (left).</figcaption></figure>

Figure 11-a-left shows an ambient screen composed of 6 tiles. By tapping a tile — in this example Tile 1, the tile of interest is magnified while the other tiles are shrunk (cf. 11-a-center). Focus is now on Tile 1 and its content is semantically zoomed-in while the content of the other tiles are zoomed-out. As illustrated in Figure 11-a-right, moving the focus from Tile 1 to Tile 3 is performed in one single action by tapping the “shrunk Tile 3” shown in 11-a-center. As the focus migrates from tile to tile, the geometric reconfiguration of the tiles as well as the coloring used by the focus+context technique preserves the Mondrian’s style. By doing so, we support both *aesthetics of use* and *aesthetics of appearance*.

Some tiles, such as Tile 1 in Figure 11-b, may offer more than one level of focus+context interaction. Within such tiles, the same interactive behavior applies as described above. For example, focused Tile 1 is zoomed-in as 4 sub-tiles denoted as *a*, *b*, *c*, *d*. Tapping Sub-tile *a* brings the focus on *1-a* (center) and from there, tapping *b* brings the focus to *1-b* (right).

We now illustrate the application of the Mondrian UI pattern with the user interface of an e-coach system.
# The E-coach Mondrian User Interface

The user interface described in this section is the front-end of a cooperative e-coach management system for domestic use. At the time of this writing, this user interface serves as a proof-of-concept for the Mondrian UI pattern. Some tiles have been implemented and validated with end-users in controlled experiments [30], but deployment in real world settings has yet to be performed.

## Overall Structure of the e-coach UI

As Figure 12 shows, the overall structure of the e-coach UI is a combination of utilitarian and eco-inspiring tiles whose colors and interactive behavior comply with the Mondrian UI pattern. Utilities include the weather forecast and the current date. Eco-information is expressed as spatial, temporal, or social incentives, as well as in terms of explainable recommendations and human control. To serve as an ambient display, the tiles of the home screen are intended to make sense at-a-glance.

In the following, we describe the content of the tiles as users move their focus of interest.

<figure><img src="image_14.png" /><figcaption>**Fig. 12.** The home screen of the e-coach is an “at-a-glance ambient display” that applies the Mondrian UI pattern.</figcaption></figure>
Spatial Eco-information

Spatial eco-information relates to the home as a set of places. A place is a space where specific types of activities and interactions take place. As an initial prototype design, we have assimilated places to rooms, although in real world settings, a physical room may include distinct places. Spatial eco-information is displayed on the representation of an abstracted floor plan whose rectangles comply with the Mondrian style.

At-a-glance Spatial Eco-information

As shown in Figure 13, a circle is used to represent the overall status of the habi-
tat. The color and animation of the circle are inspired from the semantics of traffic
lights: green when everything is fine (Go! You can leave for work, as illustrated in
Figure 12), yellow as a warning signal (there may be something to check before
leaving for work), or, as illustrated in Figure 13, blinking red to force attention
(Stop! Action is required). The rooms/places of the floor plan that need to be
checked display an icon that denotes the level of urgency and cause of the prob-
lem.

Note that the tile of the weather forecast is purposefully close to the spatial
representation of the habitat to augment the chance that people check the overall
status of their home frequently.

<figure><img src="image_15.png" /><figcaption>**Fig. 13.** The blinking red circle denotes the existence of problem(s): icons represent the issues that need human attention (e.g. water is running in the kitchen where no one is present).</figcaption></figure>
At-one-click Spatial Eco-representation

Tapping the spatial eco-information tile of Figure 13 results in the display present-
ed in Figure 14. The inhabitant has now access to additional information to ana-
lyze the situation, to understand the impact of the household behavior, and from
there, to decide to behave differently. In this example, the outdoor of the office is
opened. Although it is currently 1:35 pm and sunny, the outside temperature is
8°C, while that of the office is 22°C. Consequently, the air flows towards the exte-
rior resulting in energy loss. If we refer to the Habit Alteration Model [43] and to
the Dual Process theory, the repetition of this situation should break the habit of
leaving doors inadvertently opened, and to form new eco-responsible habits.

<figure><img src="image_16.png" /><figcaption>**Fig. 14.** One-click access to spatial eco-information of the home. Arrows show how airflows circulate within the habitat.</figcaption></figure>

Additional Zoom-in of Spatial Eco-information

By zooming the tile of a room/place one level down, the inhabitant obtains the
temporal evolution of the ambient conditions of the room. Figure 15 shows the
display that results when tapping the office tile of Figure 14.
<figure><img src="image_17.png" /><figcaption>**Fig. 15.** Additional zoom-in of the office to support analytic tasks. The tiles of the other rooms display overview indicators.</figcaption></figure>

Whereas “one-click eco-visualization” shows the value of the key indicators in real time, additional zoom-in allows inhabitants to monitor the indicators of a room through time. In this situation, a chronogram shows the “heart beat” of the room at the top of the zoomed-in tile. In the example of Figure 15, the chronogram shows that state changes are concentrated in the morning. The red vertical ruler allows the exploration of the states across the time lines so that causalities between the states can be detected. In the example, at 8:05 am, the temperature in the office was 22°C, the office was occupied by 2 persons, and the level of CO₂ was fine as the window was left opened ajar for a while early in the morning.

Whereas “additional zoom-in of room tiles” allows access to information that is primarily space-based, eco-information discussed next is primarily time-based.

Temporal Eco-information Combined with Utilitarian Information

Our representation of temporal eco-information is based on the popular clock metaphor. Clock-based visualizations are often used in persuasive interactive systems such as eForecast [27] and Clock Cast [45] to indicate when energy price is cheap. Similarly, EnergyAwareClock [4] uses a clock to display domestic 24-hour electricity consumption. The utilitarian function of a clock is also a key factor for using this metaphor.
## At-a-glance Temporal Eco-information

As shown in Figure 12, the clock tile occupies most of the screen real estate to promote its utilitarian function. An analog clock is augmented with an abstract representation of the hourly consumptions of the household on a 24-hour time period. We have used a spiral-based layout, as this technique is appropriate for the analysis of cyclic data [11,52].

The spiral-based visualization presented in Figure 12 shows both real-time and past consumptions of electricity, water and heater, each one associated with a colored circle. For ambient purpose, this visualization provides an at-a-glance overview and progress of the consumptions in a way that does not overload the interface and that keeps the aesthetics pleasant.

## At-one-click and At-additional-zoom Temporal Eco-information

Our contribution is limited to the “at-a-glance” level of interaction. For “at-one-click” and “additional zoom-in”, we recommend drawing from the research developed on interactive visualizations of temporal data. For example, Activelec is an interactive visualization system that helps households to analyze their consumption [54].

## Social Eco-information

At the time of this writing, the prototype covers social eco-information in a very limited way. This is illustrated in Figure 12 with the tiles at the top-right corner of the display. These tiles include a combination of goal setting, challenges, and social comparison. In most theories of behavior change, goal setting and challenges are effective incentives for triggering eco-responsibility [20]. In addition, it is believed that goal setting is even more effective when coupled with feedback about self-monitoring as well as related to social and normative comparisons [5,28,38].

As illustrated in Figure 16-left, occupants can track their progression at-a-glance and have an idea about how their goal compares with that of others. Figure 16-right shows an example of “at-one-click” social eco-information.
<figure><img src="image_18.png" /><figcaption>**Fig. 16.** (left) Social eco-information as goal setting and social comparison, (right) The corresponding at-one-click view.</figcaption></figure>

So far, we have described the tiles of the Mondrian UI with examples of eco-information that mainly serves as eco-feedback. We need now to address human control and collaboration with the e-coach.

## Human Control and Collaboration

Informed by users' preferences in terms of thermal comfort, air quality and cost, the e-coach system generates recommendations along with their explanations. The tile with a black background at the bottom center of the Mondrian UI is dedicated to this human-system collaboration.

### At-a-glance Human Control and Recommendations

As shown in Figure 12, the collaboration tile tells the occupant which action to perform next so that the ambient comfort of the home can be maintained in accordance with the household preferences. In this example, the e-coach recommends to open the door of the office for one hour between 14:00 and 15:00. If needed, a “See why” button tells why this action is appropriate. The green happy status-man indicates that, so far, all recommended actions have been performed and that the system can maintain the ambient comfort as requested.

### At-one-click Human Control and Recommendations

Figure 17 shows the display when the focus moves to the “Human control and Recommendations” tile. Recommendations are presented as a sequence of actions, such as opening and closing windows, that the system is unable to perform on human’s behalf, but that should be performed so that ambient comfort is maintained in conformity with the users’ preferences. This action plan, however, is not
coercive: it is browsable and editable (recommended actions can be suppressed and the system will note this); the plan may be executed partially by the users, or even completely ignored. The status man is updated accordingly to show how far the occupant is, or will be, from optimal behavior.

<figure><img src="image_19.png" /><figcaption>**Fig. 17.** At-one-click human control and recommendations. The action plan consists of a sequence of actions recommended to users in order to maintain comfort in conformity with their preferences.</figcaption></figure>

## Additional zoom-in of the Human Control and Recommendations

Additional zooming allows users to express their preferences in terms of cost, thermal comfort, and air quality, using the TOP-sliders shown in Figure 18. Many studies show that people want to stay in control and be involved in the housing management process. Giving the control to occupants is key to inspire eco-responsibility.

<figure><img src="image_20.png" /><figcaption>**Fig. 18.** The TOP-Sliders allow users to find the best tradeoff between conflicting criteria, financial cost, thermal comfort, and air quality.</figcaption></figure>

The TOP-Sliders help occupants to find optimal compromises between tightly coupled and conflicting criteria such as cost, temperature and air quality. The precise details of the interactive behavior of the TOP-sliders, along with their usability guidelines are discussed in [18].
ity, are described in [30]. Once the user has found the best compromise, the e-coach generates the appropriate action plan, which in turn can be edited, possibly leading users to modify their preferences (or just leave things as they are), and with time, learn and move towards eco-responsible behavior.

The combined and simultaneous availability of eco-information, TOP-Sliders and explainable and editable action plan at multiple levels of interaction, is one way “*to support Human-System collaborative interaction in the context of eco-responsibility*”.

## Conclusion

Our contribution is the conceptual Mondrian user interface aiming at supporting long-term user interaction to accompany a behavior change and supporting multiple contexts of use. The design rationale relies on applying ambient/artistic approaches in an always-on display, on the combination of pragmatic and artistic representations, and on semantic zoom techniques to provide a multi-level user interaction. As a proof-of-concept, we instantiated this concept for INVOLVED project’s e-coach engine [1], aiming at supporting end-users in promoting sustainable behavior in energy in residential context. Household contexts introduce various constraints such as appliance placement, visibility, aesthetic choices, and interactive affordances [47]. Besides, home settings include issues related to how occupants are willing to interact with the smart system, and how to effectively design user interface that adapt to these constraints and complexities.

We emphasize that the purpose of this study is an exploration of practical design approaches and the identification of very basic interactional bricks rather than an evaluative study. We conducted a literature review about current persuasive system for energy in household. We present our design solution and some interactional bricks with justification of chosen approaches. However, there exist some aspects that could be improved.

## Personalization

As an e-coach system for household, it needs to adapt to different contexts, purposes and especially people. It is relevant to one criticism of persuasive technology about how designers define what is ‘good’ or ‘bad’ for users [5]. Because there is no “one-size-fit-all” solution, hence the needs to personalize the system in terms of functionalities, design elements are obvious. For instance, in our case, rather than Mondrian style, alternative modes could be given for customization purpose. Besides, we could imagine artistic styles as items that can only be unlocked for usage when occupants accomplished certain tasks and challenges.
## Long-term study

As behavior change is a long-term and complex process, the study must involve a longitudinal evaluation in order to measure the persuasive aspect and more importantly in our case, how chosen design elements affects the change. Therefore, future works includes a longitudinal study of whether persuasive interaction respecting on user values actually promoted desired change in energy consuming behaviors. Currently, a long-term evaluation is out of the scope of this work but constitutes a mandatory perspective.

## Bibliography

1. Alyafi, A.A. et al. 2018. From Usable to Incentive-Building Energy Management Systems. Modélisation et utilisation du contexte. 2, 1 (2018). DOI:https://doi.org/10.21494/ISTE.OP.2018.0302.

2. Bederson, B.B. et al. 2004. DateLens: A Fisheye Calendar Interface for PDAs. ACM Trans. Comput.-Human Interaction. 11, 1 (Mar. 2004), 90–119. DOI:https://doi.org/10.1145/972648.972652.

3. Blackwell, A. and Green, T.R.G. Investment of Attention as an Analytic Approach to Cognitive Dimensions. In 11th Annual Workshop of the Psychology of Programming Interst Group (PPIG-11), 1999, 24-35

4. Broms, L. et al. 2009. The Energy AWARE Clock: Incorporating Electricity Use in the Social Interactions of Everyday Life. (2009).

5. Brynjarsdottir, H. et al. 2012. Sustainably Unpersuaded: How Persuasion Narrows our Vision of Sustainability. Proceedings of the 2012 ACM annual conference on Human Factors in Computing Systems - CHI '12 (Austin, Texas, USA, 2012), 947.

6. Cockburn, A. et al. 2008. A review of overview+detail, zooming, and focus+context interfaces. ACM Computing Surveys. 41, 1 (Dec. 2008), 1–31. DOI:https://doi.org/10.1145/1456650.1456652.

7. Coutaz, J. et al. 2018. "Will the Last One Out, Please Turn off the Lights": Promoting Energy Awareness in Public Areas of Office Buildings. Ambient Intelligence. A. Kameas and K. Stathis, eds. Springer International Publishing. 20–36.

8. Crabb, P.B. 1992. Effective control of energy-depleting behavior. American Psychologist. 47, 6 (1992), 815–816. DOI:https://doi.org/10.1037/0003-066X.47.6.815.

9. Crabtree, A. The social Organization of Communication in Domestic Settings. Proceedings of the 8th Conference of the International Institute of Ethnomethodology and Conversation Analysis, 2003, Manchester.

10. Davidoff, S., Lee M.K, Yiu, C., Zimmerman, J. and Anind, D. Principles of Smart Home Control. In Proceedings of the 8th international conference on Ubiquitous Computing (Ubicomp'06), September 2006, 19–34, https://doi.org/10.1007/11853565_2

11. Dragicevic, P., and Huot, S. SpiraClock: a continuous and non-intrusive display for upcoming events. In CHI '02 extended abstracts on Human factors in computer systems, pages 604–605, Minneapolis, MN, United States, 2002. ACM Press. doi:10.1145/506443.506505

12. Erickson, T., Li, M., Kim, Y., Deshpande, A., Sahu, S., Chao, T., Sukaviriya, P. and Naphade, M. The Dubuque Electricity Portal: Evaluation of a City-scale Residential Electricity Consumption Feedback System. Proceedings of the SIGCHI Conference on
Human Factors in Computing Systems (CHI'13), April 2013, 1203-1212,
https://doi.org/10.1145/2470654.2466155

13. Evans, H. et al. 2009. Nuage Vert. July-September 2009, pp. 13-15, vol. 16 IEEE MultiMedia.XX

14. Fan, C. et al. 2012. A spark of activity: exploring informative art as visualization for physical activity. Proceedings of the 2012 ACM Conference on Ubiquitous Computing - UbiComp'12 (Pittsburgh, Pennsylvania, 2012), 81.

15. Fang, W.-C. and Hsu, J.Y.-J. 2010. Design Concerns of Persuasive Feedback System. Proceedings of the 7th AAAI Conference on Visual Representations and Reasoning (2010), 20-25.

16. Ferscha, A. 2007. Informative Art Display Metaphors. Universal Access in Human-Computer Interaction. Ambient Interaction. C. Stephanidis, ed. Springer Berlin Heidelberg. 82-92.

17. Fogg, B. 2009. A behavior model for persuasive design. Proceedings of the 4th International Conference on Persuasive Technology - Persuasive '09 (Claremont, California, 2009), 1.

18. Fogg, B. 1997. Captology: The Study of Computers As Persuasive Technologies. CHI '97 Extended Abstracts on Human Factors in Computing Systems (New York, NY, USA, 1997), 129-129.

19. Fogg, B.J. 2002. Persuasive Technology: Using Computers to Change What We Think and Do. Ubiquity. 2002, December (Dec. 2002). DOI:https://doi.org/10.1145/764008.763957.

20. Froehlich, J. et al. 2010. The design of eco-feedback technology. Proceedings of the 28th international conference on Human factors in computing systems - CHI '10 (Atlanta, Georgia, USA, 2010), 1999.

21. Hallnäs, L. and Redström, J. 2002. From use to presence: on the expressions and aesthetics of everyday computational things. ACM Trans. Comput.-Hum. Interact. 9, 2 (Jul. 2002), 106-124. DOI:https://doi.org/10.1145/543434.543441.

22. Holmes, T.G. 2007. Eco-visualization: combining art and technology to reduce energy consumption. Proceedings of the 6th ACM SIGCHI conference on Creativity & cognition - C&C '07 (Washington, DC, USA, 2007), 153.

23. Holmquist, L.E. and Skog, T. 2003. Informative Art: Information Visualization in Everyday Environments. Proceedings of the 1st International Conference on Computer Graphics and Interactive Techniques in Australasia and South East Asia (2003), 229-235.

24. Hornbæk, K. et al. 2002. Navigation patterns and usability of zoomable user interfaces with and without an overview. ACM Transactions on Computer-Human Interaction. 9, 4 (Dec. 2002), 362-389. DOI:https://doi.org/10.1145/586081.586086.

25. Jafarinaimi, N. et al. 2005. Breakaway: an ambient display designed to change human behavior. CHI '05 extended abstracts on Human factors in computing systems - CHI '05 (Portland, OR, USA, 2005), 1945.

26. Jensen, R.H. et al. 2016. HeatDial: Beyond User Scheduling in Eco-Interaction. Proceedings of the 9th Nordic Conference on Human-Computer Interaction - NordiCHI '16 (Gothenburg, Sweden, 2016), 1-10.

27. Kjeldskov, J. et al. 2015. Eco-Forecasting for Domestic Electricity Use. Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems - CHI '15 (Seoul, Republic of Korea, 2015), 1985-1988.

28. Kuznetsov, S. and Paulos, E. 2010. UpStream: motivating water conservation with low-cost water flow sensing and persuasive displays. Proceedings of the 28th international conference on Human factors in computing systems - CHI '10 (Atlanta, Georgia, USA, 2010), 1851.

29. Lamping, J. et al. 1995. A focus+context technique based on hyperbolic geometry for visualising large hierarchies. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (New York, NY, USA, 1995), 401-408.

30. Laurillau, Y. et al. 2018. The TOP-Slider for Multi-criteria Decision Making by Non-Specialists. Proceedings of NordiCHI'18 (Oslo), 169-176.
https://doi.org/10.1145/3240167.3240185
31. Limerick, H., Coyle, D., and Moore, J. W. (2014). The experience of agency in human-computer interactions: a review. *Frontiers in human neuroscience*, *8*, 643. doi:10.3389/fnhum.2014.00643

32. Mankoff, J. et al. 2003. Heuristic evaluation of ambient displays. *Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (New York, NY, USA, 2003)*, 169–176.

33. Mynatt, E.D., Rowan, J., Jacobs, A. and Graighill, S. Digital Family Portraits: Supporting Peace of Mind for Extended Family Members. *Proceedings of the SIGCHI Conference on Human Factors in Computing Systems* March 2001 (CHI’01), 333–340, https://doi.org/10.1145/365024.365126

34. Nakajima, T. and Lehdonvirta, V. 2013. Designing motivation using persuasive ambient mirrors. *Personal and Ubiquitous Computing*, *17*, 1 (Jan. 2013), 107–126. DOI:https://doi.org/10.1007/s00779-011-0469-y.

35. Nguyen, V.B. 2019. Designing Persuasive Interactive Systems: energy as an application domain. *PhD thesis* Grenoble-Alpes University.

36. Nisi, V. et al. 2013. SINAIS from Fanal: design and evaluation of an art-inspired eco-feedback system. *Proceedings of the Biannual Conference of the Italian Chapter of SIGCHI on - CHItaly ’13 (Trento, Italy, 2013)*, 1–10.

37. Norman, D.A. 2002. *The Design of Everyday Things*. Basic Books, Inc.

38. Orji, R. et al. 2017. Towards Personality-driven Persuasive Health Games and Gamified Systems. *Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems - CHI ’17 (Denver, Colorado, USA, 2017)*, 1015–1027.

39. Paay, J. et al. 2014. Design of an appliance level eco-feedback display for domestic electricity consumption. *Proceedings of the 26th Australian Computer-Human Interaction Conference on Designing Futures the Future of Design - OzCHI ’14 (Sydney, New South Wales, Australia, 2014)*, 332–341.

40. Petersen, M.G. et al. 2004. Aesthetic Interaction: A Pragmatist’s Aesthetics of Interactive Systems. *Proceedings of the 5th Conference on Designing Interactive Systems: Processes, Practices, Methods, and Techniques (New York, NY, USA, 2004).*

41. Pierce, J. et al. 2008. Energy aware dwelling: a critical survey of interaction design for eco-visualizations. *Proceedings of the 20th Australasian Conference on Computer-Human Interaction Designing for Habitus and Habitat - OZCHI ’08 (Cairns, Australia, 2008)*, 1.

42. Pierce, J. et al. 2010. Home, Habits, and Energy: Examining Domestic Interactions and Energy Consumption. *Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (New York, NY, USA, 2010)*, 1985–1994.

43. Pinder, C. et al. 2018. Digital Behaviour Change Interventions to Break and Form Habits. *ACM Transactions on Computer-Human Interaction*. 25, 3 (Jun. 2018), 1–66. DOI:https://doi.org/10.1145/3196830.

44. Prochaska, J.O. and Velicer, W.F. 1997. The transtheoretical model of health behavior change. *American journal of health promotion*: AJHP. 12, 1 (Oct. 1997), 38–48. DOI:https://doi.org/10.4278/0890-1171-12.1.38.

45. Rasmussen, M.K. et al. 2017. Exploring the flexibility of everyday practices for shifting energy consumption through clockcast. *Proceedings of the 29th Australian Conference on Computer-Human Interaction - OZCHI ’17 (Brisbane, Queensland, Australia, 2017)*, 296–306.

46. Redström, J. et al. 2000. Informative art: using amplified artworks as information displays. *Proceedings of DARE 2000 on Designing augmented reality environments - DARE ’00 (Elsinore, Denmark, 2000)*, 103–114.

47. Rodgers, J. and Bartram, L. 2011. Exploring Ambient and Artistic Visualization for Residential Energy Use Feedback. *IEEE Transactions on Visualization and Computer Graphics*. 17, 12 (Dec. 2011), 2489–2497. DOI:https://doi.org/10.1109/TVCG.2011.196.

48. Shipworth, M. 2000. Motivating Home Energy Action: A handbook of what works. Australian Greenhouse Office.
49. Shove, E. 2004. Changing human behaviour and lifestyle: A challenge for sustainable consumption? The Ecological Economics of Consumption. Edward Elgar Publishing.

50. Skog, T. et al. 2002. Bringing computer graphics to everyday environments with informative art. ACM SIGGRAPH 2002 conference abstracts and applications on XX - SIGGRAPH '02 (San Antonio, Texas, 2002), 153.

51. Schwartz, T., Stevens, G., Jakobi, T., Denef, S., Ramirez, L., Wulf, V. and randall, D. What People Do with Consumption Feedback: a Long-Term Living Lab Study of a Home Energy Management System. Interacting with Computers, Volume 27, Issue 6, November 2015, 551-576, https://doi.org/10.1093/iwc/iwu009

52. C. Tominski and H. Schumann. Enhanced interactive spiral display. Proceedings of the annual SIGRAD conference, special theme: interactivity, pages 53–56, 2008

53. U.S. Energy Information Administration. International Energy Outlook 2013. https://www.eia.gov/pressroom/presentations/sieminski_07252013.pdf

54. Wambecke, J., Bonneau, G-P, Blanch, R. and Vergne, R. Activelec: an Interaction-Based Visualization System to Analyze Household Electrivity Consumption. In Workshop Vis in Practice - Visualization Solutions in the Wild, IEEE VIS 2017, Oct 2017, Phoenix, United States. 4 pages, 2017.

55. Xiong, R. and Donath, J. 1999. PeopleGarden: Creating Data Portraits for Users. Proceedings of the 12th Annual ACM Symposium on User Interface Software and Technology (New York, NY, USA, 1999), 37–4

56. Yang, R. and Newman, M.W. Learning from a Learning Thermostat: Lessons for Intelligent Systems in the Home. Proceedings of the 2013 ACM international joint conference on Pervasive and ubiquitous computing (UbiComp 2013), ACM, 93–102, DOI: 10.1145/2493432.2493489

57. Yang, R., Newman, M.W. and Forlizzi, J. Making Sustainability Sustainable: Challenges in the Design of Eco-Interaction Technologies. Proceedings of the SIGCHI Conference on Human Factors in Computing System (CHI 2014), April 2014, ACM, 823–832