Final interface in action

I used an iphone screen which I found at http://davidcann.com/iphone/ and placed screen shots of my interface in them to simulate a user experience. Iphone is not the only phone the application would work on with the target as being smart phones in general.

Artist Statement for Final Interface

I wanted to design something that people between the ages of 20-30 who lived in urban areas could use to monitor energy consuming things that were important to them.

I found out that transport, communicating and appliances in the home were the most in demand for things that they wanted to know about. Because of this my design has 5 Tabs: Home, Communications, Transport, Top 5 and Total. In Communications and Transport the user selects using the setting what the interface should be monitoring e.g. a cellphone and a laptop or what type of car they might use. In Top 5 I wanted the interface to monitor the top 5 appliances that used the most amount of energy since the last log in, I did this from the last log in so that the user can log in multiple times in the course of the day and see what appliances are being used more frequently than others and cut back.

I presented data in Watts or kilo Watts per hour as these were the most common type of unit and people understood what they were communicating. To display the data that I gathered I used animations and text. The animations were a way of graphing data, for example I used a tank animation. The tank filled up to show that it was full and each tank was worth something e.g. 1 tank = 40 watts. This gave the user a visual representation of their energy consumption for each tab.

To compliment this I displayed in simple and blatant terms the exact energy amount of energy being displayed in a tab. This meant that the user did not have to sit for a long time to calculate the data based off the graph animations. I did this as my user target is constantly on the go, hence why designed for smart phones, and can not allocate the time necessary to constantly calculate their own energy from the monitor. This would defeat its purpose.

Overall I think I achieved my goals and designed something that I would use, if it was available. It clearly and simply displays data to the user in order for them to comprehend it fast and not consume their time. It looks age appropriate and is suitable for its purpose.

Taking Shape

The Interfaces Design was starting to come together nicely as I put the finishing touches on alot of things.

Data

To make the flash interface look real I talked with my tutor and he said we needed to put data in the interface to show how it would work. When we did the energy monitoring diaries in the holidays I didn't monitor things like the car or my communications. This meant when I was calculating the data for the interface (I wanted it to be like if the user opened it up and that was the data) I had gaps. I researched what I needed from some websites such as:

For the Car:

http://www.guardian.co.uk/environment/green-living-blog/2011/jan/17/electric-car-emissions

I did this because in the future most people will have hybrid cars as fossil fuels become rarer and demand for cheaper sustainable travel increased.

For the Cellphone:

http://answers.yahoo.com/question/index?qid=20100730123650AAox0Y6

I thought this was the best data as it had been calculated by an engineer and I found it easy to read.

I combined these with the data I had gathered from the energy diary in the holidays. I did these in Watts as I wanted to know the highest power they could reach when in use. This interested me because quite often I left things plugged in and running e.g. the heater when I would leave a room. Living at home makes it easier to forget that you contribute to the energy consumption of a house because you arent the one paying the bills but having learnt what I did I had a different perspective. This is why I chose watts for my interface because I wanted the user to have the same if not similar revelation that I did.

For the total I had to convert a couple of things from kWh to Watts in order to calculate everything in the same unit of measurement. I used this conversion calculator to get an accurate calculation http://www.unitconversion.org/unit_converter/power.html. I used this again to convert the total watts into total kWh which is something the user could see and easily address and he/she can see that the power for the hour could be lowered.

Problems

I used flash in the past so I knew the basics of how it worked, I thought this was great considering it was a few years ago now. However when it came time to code the buttons I had extreme difficulty. The action scripts were different so what I knew how to do was void. I also didn't find the tutorials very helpful. This was because they were all for one button. However with many buttons it doesn't tell you how to do these and I kept coming up with errors. In the end I stumbled upon the correct code, except by this time Id wasted an entire day.

Inverting

I decided that black made the blue seem less calming than white. The white also gave the impression of a sleeker feel which as I was targeting 20-30 year olds in urban areas I liked better. I also consulted with some people outside the design school between the ages of 20-30 who liked the white background better. They felt that it would be easier to see data and that it would be bright and cheerier than the black.

Development

After looking at all these precedents and images I started to change my design and interface to reflect the things I had found out. I liked the progress and the new design was starting to look really nice and loose the amateur/powerpoint feel. The images where I learnt about colour and line have really come in handy especially in terms of how to present data in an easy to read but cohesive manor.