C. Stephanidis (Ed.): Posters, Part I, HCII 2011, CCIS 173, pp. 58–62, 2011. © Springer-Verlag Berlin Heidelberg 2011

Designing Interfaces for Home Energy Users: A Preference Study

Janelle LaMarche and Olga Sachs

Fraunhofer Center for Sustainable Energy Systems 25 First Street, Cambridge, Massachusetts 02141

JLaMarche@fraunhofer.org

Abstract. The current study compared user-generated preferences of energy management visualizations to established principles of dashboard design and visual perception. Twenty subjects rated paper prototypes of seven energy web portals according to aesthetic and usability parameters and completed a forced-choice task on six visual pairs contrasting elements of feedback design. Questions addressed the look of the interface, understanding, usefulness, friendliness, level of visual clutter, and desire to explore. Results revealed robust differences between mean interface ratings across questions, and follow-up pairwise comparisons further revealed user data was found to be in line with a predetermined pattern of rankings. These results suggest that user-centered design is critical to the implementation and functionality of energy saving visual technologies and can inform future prototypes that maintain effective aesthetics as well as realistic cognition.

Keywords: User Experience, Home Energy Management, Feedback, Interface Design, Psychology.

1 Introduction

The fields of sustainable energy and media design are becoming increasingly interconnected. Moreover, the success of new home energy technologies depends heavily on usability, consumer acceptance, and participation. How can visual information be used to foster ideas and generate action within the field of energy efficiency?

The interactions involved at the human-computer interface may influence both cognitive and behavioral factors involved in the decision-making process [1]. Therefore, when successfully implemented, the visual design and content of an energy web portal may influence a user’s experience and later outcome in terms of energy consumption.

The focus of this study was to uncover user preferences for visually presented, energy-based data. Six pairs of visualizations were constructed that contrasted dimensions of feedback design [2]. These contrasted both visual elements (1. Bar vs. pie chart, 2. Horizontal vs. vertical display; data granularity, 3. Ambient vs.technical

Designing Interfaces for Home Energy Users: A Preference Study 59

displays) as well as conceptual elements (4. Projected cost vs. savings, 5. Passive vs. motivational energy tips, 6. Social normative vs. personal goal setting).

To investigate the effect of interface design on usability, seven home energy dashboards were amassed from current market or proof of concept products. A dashboard is a display of information needed to achieve one or more objectives and arranged on a single screen so the information can be monitored at a glance [3]. In the energy field, dashboards are becoming increasingly relevant to consumers for real-time feedback on their home energy use.

Importantly, all dashboards were analyzed and ranked by the lead researcher according to principles of dashboard design [3], and pre-attentive attributes of visual perception [4]. Thumbnail images of the dashboards, pre-study design notes, and expected pattern of rankings are shown in the Appendix.

2 Method

Materials. Materials included laminated pictures of the six visualization pairs as well as paper prototypes of the seven dashboards. For the visual pairs, a forced-choice task was administered (although an answer of ‘both’ was accepted). For the dashboards, subjects completed an aesthetic and usability ratings task assessing the following parameters: Is it nice to look at? Is it easy to understand? Is all of the information provided useful? Would it be useful for you personally? Does it seem friendly? Does it seem cluttered? Does it make you want to explore more? All questions employed a 5-point scale with the anchors ‘Not at all, Slightly, Quite a bit, Very, Extremely.’

Procedure. A total of twenty subjects (Mage 39.5, 10f) were recruited and compensated for their time. All subjects provided informed consent and were instructed to a) choose the visualization from each pair that they liked better and b) rate each of the dashboards according to the questions provided by circling a number on the scale. Participants saw all visual pairs and rated all dashboards.

2.1 Analysis

For each visual pair, percentages of choice were calculated. For each question in the ratings task, interfaces were ranked according to their mean ratings across subjects.

Table 1. Overall feedback design preferences for the six visual pairs across subjects

Pair 1 Pair 2 Pair 3 Pair 4 Pair 5 Pair 6 Pie 65% Horizontal 60% Function 75% Cost 60% Passive tip 50% Social goal 50% Bar 30% Vertical 40% Aesthetic 15% Savings 35% Active tip 35% Self goal 40% Both 5% Monthly 40% Both 10% Both 5% Both 15% Both 10% Weekly 25% Daily 20%

All times 15%

60 J. LaMarche and O. Sachs

Once preliminary analyses were completed, a 7*7 multivariate ANOVA was run with main variables of interest including question (7 levels) and interface (7 levels).

Table 2. Interface ranks by question, calculated according to the mean usability ratings across subjects. In addition, the overall expected rank and overall actual rank by mode is also shown.

Question N.E.M. EMonitor SaveEnergi Agilewaves Tendril TED Gridpoint Look? 1 2 5 4 2 6 7 Understand? 3 1 2 4 5 6 7 All useful? 1 1 3 4 6 5 7 Useful for you? 1 2 3 4 6 5 7 Friendly? 2 1 4 3 5 6 7 Cluttered? 4 5 6 6 3 2 1 Want to explore? 1 3 2 4 4 6 7 Overall Expected Rank 1 2 4 3 5 6 7 Overall Rank by Mode 1 2 3 4 5 6 7

2.2 Results

Main effects within subjects revealed a significant effect of question (F(3.02)=4.04, p=.01, Greenhouse-Geisser corrected), interface (F(6)=9.48, p<.001), and a question by interface interaction (F(8.19)=9.01, p<.001, Greenhouse-Geisser corrected).

Pairwise comparisons were run to examine the interaction in more detail. For each question, the top rated and bottom rated interface was compared to all others. As shown in Table 3, interfaces that scored relatively high or low along a question’s dimension were significantly different from their counterparts, respectively. Critically, this overall pattern of results across questions falls in line with the pattern estimates in the Appendix.

Table 3. Shown are mean difference and p-values of Fisher’s Least Significant Differences for the highest and lowest rated interfaces relative to the other six interfaces. Pairs with a p-value < .05 were considered significantly different from one another along that question’s dimension, and pairs with a p-value > .05 were considered not significantly different from one another along that question’s dimension (i.e. The N.E.M interface is considered better looking than all other interfaces except the EMonitor and only the TED interface is as poor looking as Gridpoint). A score of 1.000 indicates an exact tie.

vs. M diff p-value vs. M diff p-value vs. M diff p-value vs. M diff p-value

Highest EMonitor .60 .110 Highest N.E.M .25 .549 Highest EMonitor .00 1.000 Highest EMonitor .15 .748SaveEnergi 1.30 .003 SaveEnergi .05 .886 SaveEnergi .20 .494 SaveEnergi .50 .086

N.E.M Agilewaves .70 .005 EMonitor Agilewaves .85 .011 N.E.M Agilewaves .65 .015 N.E.M Agilewaves .90 .009Tendril .60 .004 Tendril 1.10 .007 Tendril .95 .003 Tendril 1.15 .001TED 1.90 <.001 TED 1.20 <.001 TED .90 .010 TED .95 .024

Gridpoint 2.05 <.001 Gridpoint 1.55 <.001 Gridpoint 1.30 <.001 Gridpoint 1.70 <.001Lowest N.E.M -2.05 <.001 Lowest N.E.M -1.30 <.001 Lowest N.E.M -1.30 <.001 Lowest N.E.M .32 <.001

EMonitor -1.45 <.001 EMonitor -1.55 <.001 EMonitor -1.30 <.001 EMonitor .30 <.001

Gridpoint SaveEnergi -.75 .010 Gridpoint SaveEnergi -1.50 <.001 Gridpoint SaveEnergi -1.10 .002 Gridpoint SaveEnergi .30 .001

Agilewaves -1.35 <.001 Agilewaves -.70 .027 Agilewaves -.65 .024 Agilewaves .32 .022

Tendril -1.45 <.001 Tendril -.45 .083 Tendril -.35 .167 Tendril .29 .069

TED -.15 .614 TED -.35 .217 TED -.40 .163 TED .30 .021

Would it be useful for you?Is it nice to look at? Is it understandable? Is all the information useful?

Designing Interfaces for Home Energy Users: A Preference Study 61

Table 3. (continued)

vs. M diff p-value vs. M diff p-value vs. M diff p-value

Highest N.E.M .15 .651 Highest N.E.M 1.80 <.001 Highest EMonitor .45 .290

SaveEnergi .70 .019 EMonitor 1.85 <.001 SaveEnergi .40 .042

Emonitor Agilewaves .40 .269 Gridpoint SaveEnergi 2.00 <.001 N.E.M Agilewaves .90 .004

Tendril .95 .009 Agilewaves 2.00 <.001 Tendril .90 .001

TED 1.50 <.001 Tendril 1.25 .001 TED 1.40 <.001

Gridpoint 1.90 <.001 TED .90 .049 Gridpoint 1.80 <.001

Lowest N.E.M -1.75 <.001 Lowest N.E.M -.20 .519 Lowest N.E.M -1.80 <.001

EMonitor -1.90 <.001 EMonitor -.15 .614 EMonitor -1.35 .001

Gridpoint SaveEnergi -1.20 <.001 SaveEnergi Agilewaves .00 1.000 Gridpoint SaveEnergi -1.40 .001

Agilewaves -1.50 <.001 Tendril -.75 <.001 Agilewaves -.90 .016

Tendril -.95 .004 TED -1.10 .002 Tendril -.90 .005

TED -.40 .163 Gridpoint -2.00 <.001 TED -.40 .189

Is it friendly? Is it visually cluttered? Do you want to explore more?

3 Discussion

The current study compared user ratings of home energy web portals to principles of dashboard design. Robust statistical findings revealed that usability ratings were in line with a predetermined pattern of results. These results provide evidence that principles of design and psychology must be taken into account when designing visual technologies targeted at residential energy savings.

In addition to the ratings, consumer feedback design preferences can inform future prototypes in a way that maintains artistic integrity and user pragmatics. More work still needs to be done that bridges both the interface design elements involved in energy feedback as well as the human factors involved in the interactions with the technologies themselves.

References

1. Fogg, B.J.: Persuasive Technology: Using Computers to Change What We Think or Do. Morgan Kaufmann, San Francisco (2003)

2. Froehlich, J.: Promoting Energy Efficient Behaviors in the Home through Feedback: The Role of Human-Computer Interaction. In: HCIC 2009 Winter Workshop Boaster Paper, Colorado (2009)

3. Few, S.: Information Dashboard Design: The Effective Visual Communication of Data. O’Reilly Media, Sebastopol (2006)

4. Few, S.: Tapping the power of visual perception. Perceptual Edge (2004)

62 J. LaMarche and O. Sachs

Appendix

Thumbnail Interface Dashboard Design Notes ERank Question Estimates

Net Energy Market(N.E.M)

EMonitor

Agilewaves

SaveEnergi

Tendril

The Energy Detective (TED)

Gridpoint

Good level of content andwell placed affordancesprompt exploration, excellentin tone and hierarchy,minimal clutter with artisticintent.

Sparse but symmetricallayout for quick viewing,some eye competition at startof visual sequence, butfootprint evokes humanvisceral design and isfriendly.

High visual aesthetic andfocus on personalization isnice starting point, consistentbar graphs allow technicalinformation to shine, niceand friendly colors.

Clean line of vision andsymmetry, nice hierarchy,information laid outintuitively, biggest flaw ismisuse of color.

Pleasing to look at butproblems with viewingsequence, no logical flow,inconsistent category labelsand insufficient context,seems unfriendly and overtechnical.

Issues with cluttering andoverdecoration, machine likeinterface causes unnecessaryvisual processing, colorcontrast negatively impactslegibility, dead spaces.

Weak viewing sequenceruined by visual clutter andtoo much text as well astechnical terms, confusing tolook at, little aesthetic merit.

1

2

3

4

5

6

7

Look? ExcellentUnderstanding? GoodAll useful? ExcellentUseful for you? ExcellentFriendly? GoodClutter level? MidExploration? Excellent

Look? GoodUnderstanding? ExcellentAll useful? GoodUseful for you? GoodFriendly? ExcellentClutter level? LowExploration? Fair

Look? GoodUnderstanding? FairAll useful? GoodUseful for you? GoodFriendly? ExcellentClutter level? LowExploration? Fair

Look? PoorUnderstanding? ExcellentAll useful? GoodUseful for you? GoodFriendly? FairClutter level? LowExploration? Good

Look? ExcellentUnderstanding? PoorAll useful? FairUseful for you? PoorFriendly? FairClutter level? MidExploration? Fair

Look? PoorUnderstanding? FairAll useful? FairUseful for you? FairFriendly? PoorClutter level? HighExploration? Poor

Look? PoorUnderstanding? PoorAll useful? FairUseful for you? FairFriendly? PoorClutter level? HighExploration? Poor