DSDN112 - Interaction Design

[agentdylan-dsdn112]

Project 2C Final Video Documentary.

PowerLens is an iPad application designed to help people save power.

[agentdylan-dsdn112]

Final Interactive Application, Screenshots.

*Foliage Background by Sten http://commons.wikimedia.org/wiki/File:Arundinaria-pumila-foliage.jpg is licensed under a Creative Commons license: http://creativecommons.org/licenses/by-sa/3.0/deed.en

[agentdylan-dsdn112]

Final Interactive Application

Final application is complete. I believe it successfully encourages people to save power in an innovative, fun, interactive way. I also think I have been quite successful in abstracting the information to be presented in a way that is less technical, easier to understand and more interesting. Examples of this include using a heat map, allowing people to actually see power hungry appliances in both video and floor plan mode; prioritizing information so users don't get overwhelmed and so it is more easily understood; using a consistent colour theme to represent power usage and for aesthetic appeal; providing more information only when it is desired yet also remaining easily accessible; and using a background that changes according to how well power is being conserved, elliciting an emotional response to encourage power savings.

The final design has changed significantly since the original concept, preserving the best ideas and providing a more simplistic, refined interface while also introducing some new features.

[agentdylan-dsdn112]

An overview of the key Video screen developments.

*Living Room photo by futurestreet http://www.flickr.com/photos/futurestreet/3343698142/in/photostream/ is licensed under a Creative Commons license: http://creativecommons.org/licenses/by/2.0/deed.en

[agentdylan-dsdn112]

An overview of the development of the home page.

*Foliage Background by Sten http://commons.wikimedia.org/wiki/File:Arundinaria-pumila-foliage.jpg is licensed under a Creative Commons license: http://creativecommons.org/licenses/by-sa/3.0/deed.en

[agentdylan-dsdn112]

SketchBook An unorganized array of ideas, concepts, developments and feedback. 

[agentdylan-dsdn112]

Development

Colour Scheme:

Though I had been using red in my heat maps to show power consumption, I thought it was logical to use green to show power savings. However, in user testing I found that different colours didn't improve understanding and also looked somewhat gaudy, with the red and green colours clashing quite badly. As such I have adopted a black, red and grey colour scheme, using opacity of the red to show power consumption consistently through out. 

[agentdylan-dsdn112]

I found this amazing video demonstrating the power of technology. I found this relevant to my design as my design although somewhat futuristic is definitely within the realm of possibility even with todays technology. My iPad app could use similar technology to the technology demonstrated in the video, so when in video mode on my application it would record images and could synthesize these to build a birds eye view floor plan.

[agentdylan-dsdn112]

Development - User feedback

I considered that the iPads unique features such as the accelerometer may be utilized to provide a more intelligent, responsive interface whereby the user didn't need to push buttons.

I incorporated zoom, pinch and swipe features into the navigation of my design also using the iPad's sense of how close it is to an object as well. In asking other students (the target audience of the design) for feedback, they welcomed the approach but also felt in many cases it was necessary to have buttons as otherwise the interface may become frustrating, not having such direct control. As such I have scrapped the idea of having it so that upon picking up the iPad it automatically going to video mode and even an idea of having a large button on screen appear to allow you to switch to video mode when the iPad sensed it was being moved around. Instead I have decided to keep the top navigation system to reach each of the main sections of the interface and have allowed for other areas to also be navigated by turning elements into buttons. This incorporates the iPad's capabilities whilst maintaining user control.

[agentdylan-dsdn112]

Development

I have decided to use the floor plan heat map as the main feature of the home page as it provides a nice overview of power consumption, while harnessing the power of the unique video aspect and SmartGrid Technology.

I have also decided to simplify the heat map to start with, so that rooms are highlighted to indicate power consumption. I think this is more aesthetically pleasing and is more easily understood, providing an overview of power consumption related to location while not being too specific. I tried using the color theme red in the floor plan, though in the end opted for a grey color scheme for this area as the red clashed with the green foliage background and by using a black background the red hot spots (for appliances power consumption) will also be able to be seen on top of it.

I have made it so if users want to see more information they may press any room in the floor plan and it will zoom in on that room, alternatively users can use the iPad's zooming gestures. From there users can see appliances hot spots, which if zoomed closer into or pressed will show more information about that appliance.

I considered showing more information around each of the hotspots but decided against it, opting to provide a more consistent interface - providing a side menu that slides in as I decided to use in video mode. Also this way information is provided only when required and the user is not buried in information, allowing them to more easily understand the information presented.

[agentdylan-dsdn112]

Development

For the video mode, I considered various ways in which I could provide more information about the devices without jeopardizing the minimalistic, clean, easily understood video heat map. I decided the most ergonomic and user friendly way would be for the user to move closer to appliances, with the iPad recognizing the object is now closer, once it gets to a certain distance a side menu automatically slides in that provides further information about the appliance. This menu can then easily be closed by either using the iPad's slide gesture or by pushing the arrow button.

The video slides off a little to the left, with the menu sliding in from the right, this simple animation allows the user to intuitively understand that the menu may be closed by sliding it back where it came from.

[agentdylan-dsdn112]

Research

I looked at many ways in which I could present information in an aesthetically pleasing way that minimized the amount of text and numbers while being easily understood. 

I looked at many sites including http://visual.ly/, http://lemon.ly/ and http://numberpicture.com/.

[agentdylan-dsdn112]

Research & Development

I considered how I might encourage people to save power by making my application more fun; through the incorporation of game dynamics. I had already thought about incorporating challenges for users to complete, where they earned 'badges' for completing the challenges and how I could use this in conjunction with social media. This could encourage a game of competitive power savings. As such I researched this and happened to find the above interesting video which provided further insights. 

EDIT: I have since decided to focus more on the video/heatmap side of the application as this is a more unique aspect of my design.

[agentdylan-dsdn112]

Prototype Images showing how my interactive application focussed on energy savings works.

The Home page  shows key information succinctly. The background is based on the households energy savings, with lush green foliage when savings are good ranging to a barren landscape when energy savings are poor this elicits a more emotional response than a number showing power consumption in Kwh. 

The Video section allows the user to see appliances energy consumption through the use of a live video feed from the iPad's camera, combined with wireless data including energy consumption and then using image recognition a heat map is generated and overlaid on to the video feed.

The Analysis section includes more detailed information on power consumption with various statistics. One of the pages in the Analysis section is the Floor Plan Power Consumption Heat Map which shows the house from a birds eye view with appliances put into the floor plan and their power consumption shown by  how red the spot is. This is achieved by using location information gathered when videoing appliances. Once an appliance is videoed its location is remembered and its power consumption is mapped to this location. You also have the ability to track back through time and see your power consumption history by moving the slider.

*Living Room photo by futurestreet http://www.flickr.com/photos/futurestreet/3343698142/in/photostream/ is licensed under a Creative Commons license: http://creativecommons.org/licenses/by/2.0/deed.en

*Foliage Background by Sten http://commons.wikimedia.org/wiki/File:Arundinaria-pumila-foliage.jpg is licensed under a Creative Commons license: http://creativecommons.org/licenses/by-sa/3.0/deed.en

[agentdylan-dsdn112]

Description of Concept

Energy Gadget Description

I plan to develop an iPad application that encourages people to reduce their power consumption. I am going to achieve this by creating an easy to use interface, which takes advantage of new technology to present information visually in an interesting and highly accessible way. The user group I am designing for are households with multiple occupants (flats and families).

The goal is to show people how much power things are using rather than tell them. This will be achieved by using popular technology including wireless and video capabilities. A key feature of my application will be its ability to receive information wirelessly from appliances and use this information combined with information it gathers from video and image recognition to generate heat-maps. Users will be able to use the iPads camera to get a live video feed that is overlaid by an energy based heat-map in real time. This information will also be used in conjunction with location based information to generate a heat map of the household from a birds eye view, which will be updated by energy consumption data automatically once it knows the location of the appliances. You will also be able to see the heat map in real time and track back through time to see your energy consumption history.

Designing the tool for a popular device such as the iPad has several key advantages. By using the latest technology we can approach the problem of energy conservation in new and innovative ways. As an iPad app this tool will also be easily accessible by many people. iPad owners don't have to go and purchase an object, instead this app extends the utility of something they already have. Being software intended for extending the capabilities of an already existing device is also advantageous in that it reduces waste by not having to manufacture a new device.

[agentdylan-dsdn112]

Rough sketches of possible application interface.

[agentdylan-dsdn112]