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

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 Yann Laurillau, Joëlle Coutaz, Gaëlle Calvary, and Van Bao Nguyen Université Grenoble Alpes, CNRS, Grenoble INP Institute of Engineering 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 ecofeedback and eco-responsibility.

Design for the periphery
As a calm technology, ambient displays seamlessly provide information in a nonintrusive 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 affordances and improves system attractiveness, and is a key dimension of several persuasive design spaces [15,41] and design principles [19].Aesthetic values inspire positive emotions as well as intrinsic motivations [22,36], which in turn may foster sustainable behavior change.Artistic representations also avoid negative reinforcements that some pragmatic and metaphoric visualization techniques may convey [15,36].
However, as discussed by Petersen et al., designing aesthetic interactive systems 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 triggering imagination, it is thought-provoking and encourages people to think differently 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 interior.
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].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 3top).Similarly, Nakajima & Lehdonvirta [34] present users' activities as the transformation of globular objects (see Figure 3-bottom).

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.

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.  [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]).
Although aesthetic representations play an important role in inspiring ecoresponsibility, 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 ata-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.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 following question: "How to provide an easy transition between the representations?"In PowerViz, switching from the metaphorical view to the pragmatic views is performed 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 techniques.

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] Fig. 8. Datelens [2] explores the Focus+Context approach for a calendar display (with permission of Cockburn et al. [6]).
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.Each tile of the Mondrian UI is populated with a specific type of content: ecoinspiring content and/or utilitarian content.Eco-inspiring content includes spatiotemporal 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.

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.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.

Transitioning between the Mondrian's tiles
Some tiles, such as Tile 1 in Figure 11-b, may offer more than one level of fo-cus+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 ecoach 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 ata-glance.
In the following, we describe the content of the tiles as users move their focus of interest.

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 habitat.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 problem.
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.

At-one-click Spatial Eco-representation
Tapping the spatial eco-information tile of Figure 13 results in the display presented in Figure 14.The inhabitant has now access to additional information to analyze 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 exterior 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.

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.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 CO2 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-oneclick" 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-aglance 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.So far, we have described the tiles of the Mondrian UI with examples of ecoinformation 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.

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 ecoresponsibility.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 usabil-ity, are described in [30].Once the user has found the best compromise, the ecoach 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 ecoresponsibility".

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.

Fig. 4 .
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]).

Fig. 6 .
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 barchart (with permission of Fan et al. [14]).

Fig. 7 .
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]).

Fig. 9 .
Fig. 9.The overall structure and interactive principles of the Mondrian UI pattern.

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

Fig. 12 .
Fig.12.The home screen of the e-coach is an "at-a-glance ambient display" that applies the Mondrian UI pattern.

Fig. 13 .
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).

Fig. 14 .
Fig. 14.One-click access to spatial eco-information of the home.Arrows show how airflows circulate within the habitat.

Fig. 15 .
Fig. 15.Additional zoom-in of the office to support analytic tasks.The tiles of the other rooms display overview indicators.

Fig. 16 .
Fig. 16.(left) Social eco-information as goal setting and social comparison, (right) The corresponding at-one-click view.

Fig. 17 .
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.

Fig. 18 .
Fig. 18.The TOP-Sliders allow users to find the best tradeoff between conflicting criteria, financial cost, thermal comfort, and air quality.