Final Interface

 For my final interface I took the feedback which I was given into account and made quite a lot of changes. I made most of it 3D, adding a lot of gradients. I also changed the background to grey and added drop shadows to each to the little nodes. Overall I think it turned out really good. The 3D side of things looks awesome and I think the tutors will be very pleased with it.

Feedback

In my interim presentation the tutors really liked my application but they suggested a few things I might want to look at which are as follows:

• Get rid of the black background-They thought that it was quite overpowering and told me that nothing really looks good on a black background, especially the white text, it apparently is hard on the eyes, haha. A gray background was suggested.
• The outer rings could be more 3D-At the moment the rings are very 2D and adding a gradient to them like I have on the buttons was suggested. Or even add a drop shadow , a very subtle one though just to give them a bit of depth.
• What do the graphs mean-There was a bit of speculation as to how far the graphs came out from the center and how far they reached round. What was suggested is it represents how long it was used for or how much power it used.
• Rings around buttons were too intense-One suggestion was to make the rings thinner but I think they look fine so I'm gonna leave them.
• Back button stands out too much-Because the back button is blue at the moment it is drawing attention away from the main interface. What was suggested was to make it grey, less noticeable.
• Graph segments don't respond like a button-When the segments are clicked they do nothing so what was suggested was to make them like the buttons and look as if they are being pressed.

I got some pretty good feedback from the presentation and I am definitely gonna look over my interface and make changes.

Development

 I decided to go with a black background for my interim presentation and managed to get all of the buttons acting like buttons so when you click on them they look as though they are being pressed.

I also added a back button so whenever you press it you return to the main screen which I think turned out really good and is very easy to use.

I changed the text to white just to make it stand out a bit more but I'm a bit unsure if I'll keep it.

Development

With some help from Paul I was able to get my circle so it stopped moving which is good. I have also managed to get some graphs onto the circle for the people who want more data. It is pretty simple at the moment but what I want is for each little segment when pressed to open up written hard data for the user, eg. KW/hr, the price it's costing etc.

Something must be wrong with my code though because the data keeps on flashing like a maniac so I will have to revisit my action script.

The idea for this type of layout for the graph came from one of my earlier posts and is the image on the right. I decided to download this app to see what it is like and it is pretty cool to see what is using up space on your computer. Anyway I really liked this idea and decided to go with it in my own design.

Like the rings they are color coded to give the general energy usage to the user, red = too much energy, orange = moderate energy, and green = low energy.

Development

As I was progressing through my project, going pretty smooth, getting lots of buttons, the BAM! I get lots of errors and my project pretty much dies.
The thing I am finding hard is the code part of the flash because it can get pretty intense.


With the sub circles I managed to get them into buttons which pretty much do the same thing as the home button which I'm pretty happy with at the moment. When you click on the kitchen button I got it so it expanded and moved to the centre but it does not want to stop moving which I will have to play with the stop function in the actions window.

Button development

The button tutorials I found on the flash websites are way too complex for me but luckily I have the gift from the heavens which is Youtube. The 3D button tutorial worked very well and I am definitely keen on using it in my final application. Here is a picture of it:

Button not Pressed

By using the gradients for the colour scheme I was able to really look like light was being cast onto it and thereby rendering it very 3D like in appearance. When clicked I even got it to appear as if it was being pushed down by switching the gradient when it is pressed to the other side. This is shown in the second image:

The result of this is quite spectacular in my opinion because it gives things depth and really takes things to the next level.

Button Pressed

Beginning Flash

As I am new to flash I did a couple of tutorials, just to get the hang of things like how to work buttons and make things move, etc.Here is one of my first tries at a button, I found some really good tutorials on youtube on how to make some very realistic 3D buttons which I might explore.

When the button is pressed it has sub circles which move out from the center and stop a certain distance away.Hopefully I will make the sub circles into buttons which then open up further to reveal info.

The final image is an improved version of the second with a slightly budget version of a 3D button but it's a start.

Development

I decided to look into some ways of displaying the titles, kitchen, lounge, etc. I tried different layouts with where they are placed and whether or not they are curved or straight.

Interface Design and Written Decription

Thomas Martin     112 - P2              Written Description

For my interface I wanted to make mine as simple as possible and not throw hard data and graphs at the user because many people find that to be intimidating. I still want to have some hard data for those that want it but not so much that it overpowers them and puts them off. The aim of my interface is to have a basic expanding system which tells the general ‘power usage attitude’ of the house and when expanded it can go into depth of which areas of the house are using the most energy and which ones are using the least. When further expanded it will show within those areas which appliances or which aspect of that area is using the power. This will be told through a simple pie graph which shows each appliance within the corresponding area and the power being used through the use of colours. Even further expanded shows the hard data, volts, price, etc. The majority of the interface will be circles, to fit with the basic attitude and to get more people to easily interact with it. This will all be done on a computer due to most people having access to some form of computer in the home.

More Concepts

 Some more concepts I had was to have a diagram of a house with each room being represented by an icon which tells what goes on in there and is coloured to show the level of energy being used.

I thought of having a "family tree" like system where it opens up and shows the details of each room and how much energy is being used. I don't like this as much as some of the others though because it seems to basic.

The one I have chosen to go with is the circles that expand out. I have decided to us the graph system seen in 'scanner.exe' and use that in my interface.

I was looking at ways to make my interface more fun and engaging by when you click on the specific area it opens up random data, for example: how many polar bears you killed, or pigeons killed due to your energy used in that area. I also thought about showing each appliance within those areas and how much they contribute to the overall area.

I looked at the lines connecting the circles as well and thought that I should have them so that the closer they are to the center the more energy they are consuming.
Also one thing I forgot to mention was that each circle will have an outer ring which is either coloured red, orange or green. This is just for a quick overview of the area and whether or not it is good on energy or bad.

Precedent Images and Research

 My first image shows the Xbox 360 avatar system and I think that would get a lot of kids/teens involved. Also as you win, you could get points which could be used to buy items for your character.

The image on the left shows the program "Scanner.exe" which measures where all your hard drive space is going and what programs are taking up the most space. I really like the style of graph on this program and I would really like in incorporate it into my interface.

While looking at existing power monitoring devices I found that there are countless different types out there. There are ones that you plug into a socket, ones for your Iphone and for computers. The list just goes on and on.

These devices don't look very user friendly though and that is something I want to address in my own design, make it so people want to use it.

I found that Google is one company who is trying to make a change in energy consumption and is trying to really use less power. Before this project I did not know Google was a energy considerate company.

Initial Ideas

I found with the device that I bought to measure the power usage it was kind of complicated to understand and the instructions were not very easy to follow. I decided that I didn't want mine to be too complicated to scare people.

I began with a quick brainstorm highlighting what I wanted to achieve with my interface and some quick ideas for it.

I then drew up some quick concepts. One I thought was cook was the "heartbeat" of the house. It is like those machines at the hospital which show a heartbeat with a moving line and I thought if your house is going overboard on energy use, it could be rapidly moving.
Another cool one I thought of was having something like Xbox 360's avatars and create it into a competition to use the least energy based on each person's room.
Another simple one was having a circle which expands and opens up more circles for each area of the house.

Project 2

For project 2 the aim is to create an interface which gets people to be more aware of power consumption. For this over the holidays we were tasked with keeping an energy usage diary.

 I monitored my laptop and used a power monitor device to measure it's voltage, wattage, price etc. I found that while plugged in charging but not turned on it is still using a very tiny amount of energy. When turned to the max settings, playing games I found that over the period of one hour my laptop used a total of 10c worth of energy, about 0.1 KW/h. If I was to do this everyday for 10 hours the cost would rapidly begin to rise and my parents would not be happy.

Final

These are my final five images of my interactive object. Overall it works well but there are no real limitations around the board so some people may move the pieces in the wrong direction or not as planned. The foam board worked well for my base as it was easy to use but I didn't take into account that you needed to hold the board while you were interacting otherwise it moved all over the table.

Above is my Description that will be used in the exhibition along with my object. It outlines What my purpose is and my instructions on how to use my object.

Development

These are some photos of some development I did. I tried a variety of different tiles and pieces as seen in the left images. I tried make the slope on some of them very steep and others very shallow. I looked at making the slope come from a corner and overall I was happy with the pieces I made. For the base I tried to make it out of clay but when I put it in the oven I found that it bent way to much and was arched. When I went to bend it straight I ended up breaking it , so I decided to use foam board as it was smooth and I could cut into it easily.

Studio 29/7/11 continued

So my tutor gave me a new idea to look at and that was to have an element of the pieces drop into the holes instead of the whole piece because it would create functional problems. For example have a marble in the tile and when it goes over the circular hole the marble drops in and the square tile is still free to move around the board, sort of like those children toys where you put the shapes into the holes.

 He also suggested working on a grid like the original sliding puzzles just so the tiles don't freely move around the board, maybe 4x4 or 5x5. He really encouraged me to look at the rough and smooth textures on the botoom of the pieces so that some are more difficult to move and to help boost that interactivity. One material mentioned was a fabric that moves really well one way but is hard to move the other way. This may be something I look at.

Studio 29/7/11

For the the studio today I decided to look at other materials that could be used for the individual pieces.

I have made some in clay but they take forever to dry so I thought I'd look at three others while I waited for the clay to dry. Having a variety of different materials in my final object could make it more appealing.

•  Metal was the first one, it is very smooth and would slide along most surfaces really well,it is also very shiny which makes it very visually appealing. However adding the subtle details would be difficult. It can be polished as well to make it even shinier. Metal is a very sturdy material so it would be able to take a good beating.

• The second one was clear acrylic which I thought would be pretty cool because of the transparency and the smoothness of the surface would allow for a smooth sliding motion. Yet again adding the subtle details like the little extrusions or the finger imprints would be hard due to the material. I think that this would be the most visually appealing piece if I was to use it due to the transparent nature.

• The third material was  wood. I chose wood because it is a very commonly used material and you can do many things with it. It can be painted, sanded cut easily and it can also have either a rough or smooth surface depending on how it is handled. The availability of the wood would also make this a good material to use. It is easy to work with and is very robust.

Something I want to look at is having rough and smooth surfaces to create a variety of pieces so that some can move easily across the board and others are difficult and require effort to move them. I have decided for my board which the pieces will be placed on will be made of wood that has been sanded down so that it is smooth. I could possibly make some areas of the board rough and some smooth, just a thought. I am yet to decide how big I want my board, but I don't really want it too small or too big. Also making it out of wood would make it quite heavy and would be a burden to carry around.

Studio 26/7/11

For today's studio we brought in objects that we basically find awesome. I brought my razor in because I thought that it was way awesomer than those disposable razors and also because of the features it had. The razor heads could be removed just by pushing a button, the handle was nice to hold and had a nice rubber grip. The handle also had a nice weight to it unlike those cheap plastic ones but the weight of it isn't visible at first but only when you hold it is it obvious.

We also discussed my project and an idea that came up was to have a board and have sort of like holes in it which when the pieces are moved they fall into them. But I must remember that I am not aiming for a visually appealing set of objects but I am focussing on the touch aspect of it. I shall start creating the pieces out of clay tonight and just experiment with them and how well they work. I won't know anything until I actually make the pieces.

Storyboard and Description

For my Interaction project I have chosen to do something with touch. So as my storyboard suggests, I have little tiles which have a different surface type. For example one piece has a little extrusion in the top left corner of the tile. When someone interacts with it and touches it they know that that piece needs to be moved to the top left or moved diagonally just by touching the tile, no vision required. Another piece will have a subtle finger imprint that you can only tell is there by touching the tile which depending on where it is on the tile indicates that it should be moved in that direction. My tiles stimulate the touch sense by allowing the user to rely on the touch alone and not sight. By using the subtle details I achieve this because when someone looks at the tiles they cannot see the finger imprints for example. It is going to be exciting for the user because they can no longer rely on their sight but they have to rely on their touch to feel these objects.

Lab 3

For the third lab I made a test object, I created a couple of tiles out of cardboard with different touch aspects to them. Some of these were finger holes, a curved ramp like surface and a little extruding corner. My tutor pointed out that I should ditch the puzzle like frame and she really liked the subtle extruding corner and suggested that I should work on subtle little things for my object. One other suggestion was to try it in clay which I am going to experiment with as I can indent a subtle finger gap to put your finger in.