VIDEO CLIP PART C

Link Youtube

FINAL FIXED INTERFACE

I got rid of the arrow and flashing ads-liked words on top of the Energy Consumption button. As well, I added Ranking feature so users can compete with friends and the other people.

HERE THE LINK OF THE FINAL FIXED INTERFACE

LINK TO FINAL FIXED INTERFACE

MY THINKING ON CHANGING THE INTERFACE

I've been in the presentation and seen lots the other people's interfaces. Those interfaces are really cool, so I try to think back about my own interface. I think I did prepare pretty much all essential features, but for users to compare or compete with the others. My idea : one more button to access to facebook.com account where users can simple compete with friends by the points (E-nergy points)

EXTRA : COLOURS USING

I refer from adobe.kuler.com to get the idea on applying colours for my interface. (The link is died, so I can't access to it anymore)

PRESENTATION AND FEEDBACK

I got some compliments on the design of the whole appearance, but still there are issues....
SOME EYE-CATCHING SCENES

SOME FEEDBACK I NEED TO CONSIDER
The ADs-liked interface needs to be fixed : the idea to gain attention is good but too flashy and look like a advertisement pop-up.

The main interface on energy consumption information is liked an ad as well. However, my point is using two colours like green and red to distinguish two types of things : should & should not or so... and use the words to encourage users to save money (talk about this later)

FINAL INTERFACE

LINK TO OPEN SWF FILE

My final interface submission (first one)

LOGO - TITLES AND BACK BUTTON

I also design each scene has at least company's logo and the titles (extra the back button) so users will know where they are at and where to go back....

WHAT DID I IMPROVE MY LOGIN FRAME?

From these .... to

 

The simplicity and clearance kind of decide all for interface-designing. I reckon this looks much more clearer and still there are lots more features than the older scenes I've had above

CHANGES

My whole design intention is changed a lot since I've put a lot of efforts into researching. My design point is still the simplicity yet a little bit elegant and glossy looks in it. At the very first, I wanted to keep every just really simple as lots of white in, but then reconsidered almost the Apple's products users care about the appearance. There I go, some circles, some 3D, lighting effects made my design. Another very important factor out of simplicity/clearance is the design trend needs to be integrated. I don't have many sketches for the interface, but I will try my best to bring them all up.

Sketch for the login frame, very rough though but I did manage to have my whole design trend (quite lots of curve) I love this!











Some sketches on computer I've finished yet

LAST RESEARCH - 7 PRINCIPLES OF EFFECTIVE ICON DESIGN

I would say this is really useful for me. Like I mentioned in my prototype, the interface needed icons for sure, then after reading this, I changed my mind that how my icons should look like.... I will put some selective summary here
Link : http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/

1. Approach Icon Design Holistically

An icon is one of many graphic elements that need to work together harmoniously. Icons can be appreciated for their aesthetic solutions individually, but they don’t function alone. Evaluate your icon designs relative to the graphic system you’re using them in. Make sure that each icon differs from surrounding icons, while still working together as a whole.

Excellent example for a good icon design set

 2. Consider Your Audience

 When creating icons, cultural considerations are important. Symbols may differ for common elements you may use for your designs.

Apple mailbox icon. Apple considers to US users only (this eagle is USA's symbol)

 3. Design for the Size the Icon will be Used At

 If you go vector and make your icon in Illustrator, there is an inherent temptation to scale the design, and try to use it at any size. This doesn’t work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own optimized design.

Icons should have a base design that is used as a starting point

 4. Keep Icons Simple and Iconic

Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design, or overly illustrating an icon. Overly illustrating and dressing up icons results in lower recognition though, especially at small sizes. So, be careful with putting to much into an icon design.

RSS feeds, look elegant in big, but won't work out at much smaller size

 5. Cast Consistent Lighting, Reflections, and Shadows

It’s important that the realism you add to your designs all function coherently. If you use a light source coming from one direction then stick with it. Or you risk losing the integrated design of your icons. Also consider the light source of the design your icons will be placed in. If the light source of the icons is at odds with the Web site or application design you’re using them in, then the design will appear amateurish.

Be careful of risking losing the integrated design of icons

6. Utilize a Limited Perspective

The range of perspective within your icon design set should work together. If you have icons being looked at from straight ahead then stick with that. If you place one at a specific angle, then make sure all the icons function that way. Imagine a camera being placed from a specific vantage point and looking at all the objects from the same perspective. This helps to maintain consistency in your icon designs.

the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom).

 7. Create Consistent Icon Set Styles

Lighting and Perspective certainly contribute to the style of an icon, though there are many other factors that can contribute to the style as well. If you’re trying to fit your icon into a grunge-style Web site design, you’ll likely be adding texture to the style of the icon’s design.

RESEARCH ON PRINCIPLES IN USER-INTERFACE DESIGN

Source : http://www.sylvantech.com/~talin/projects/ui_design.html
This was a really big reading I have had there. Tons of principles with explanations and so on. I will write here the summary of all. There are 14 principles the writer mentions about :
1) The principle of user profiling - know who your user is
2) The principle of metaphor - Borrow behaviours from systems familiar to your users
3) The principle of feature exposure - Let the user see clearly what functions are available
4) The principle of coherence - The behaviour of the program should be internally and externally consistent
5) The principle of state visualization - Changes in behaviour should be reflected in the appearance of the program
6) The principle of shortcuts - Provide both concrete and abstract ways of getting a task done
7) The principle of focus - Some aspects of the UI attract attention more than others do
8) The principle of grammar - A user interface is a kind of language - know what the rules are
9) The principle of help - Understand the different kinds of help a users needs
    1. Goal-oriented: "What kinds of things can I do with this program?"
    2. Descriptive: "What is this? What does this do?"
    3. Procedural: "How do I do this?"
    4. Interpretive: "Why did this happen?"
    5. Navigational: "Where am I?"
10) The principle of safety - Let the user develop confidence by providing a safety net
11) The principle of context - Limit user activity to one well-defined context unless there's a good reason not to
12) The principle of aesthetics - Create a program of beauty
13) The principle of user testing - Recruit help in spotting the inevitable defects in your design
14) The principle of humiility - Listen to what ordinary people have to say

RESEARCH ON INFORMATION HIERACHY

I now would like to know how experienced people present information in very effective ways. Then I found some examples just for me to visualize what is a good information hierarchy and what is bad. Soure : http://flywebmaster.com/webdesign/tips/hierarchy.php

Bad Hierarchy Design



Examples for bad information hierarchy (blurry but it doesn't matter)

1. There is no apparent area of focus in the design. The entire page looks more or less the same and it is very difficult to find specific information without reading the entire page. As you can see, there is no variety in weight and point size of the type making it impossible to tell apart headlines from body text. Overall, this design is very poor. It basically dumps a load of... information on the viewer. 

Good Hierarchy Design

The text has now been segmented into horizontal pieces separated by white space. Headlines conveniently explain what each of these parts is dealing with. The type is no longer the same on the entire page. Body text looks different compared to the abstract, which is italicized. The headlines have weight and a very heavy title tells us what this page is about at first glance. 

Whitespace and font size alterations are the primary tools used for developing a clear hierarchy on your page. Playing with a variety of typefaces, colors and font properties (like the italicization of the abstract) can also help but it must be used cautiously. Having too many elements on one page can overload and ruin your hierarchy.



Example for good information hierarchy

 

DEEPER RESEARCH - COGNITIVE OVERLOAD

I never had this high-hyped feeling on researching ever before ^^! I "digged" more deeper into the interface designing which I've found out later that I should have done this much earlier. The source : http://www.slideshare.net/nazzal/effective-interface-design-by-avoiding-cognitive-overload-nazzal-th-alenezi-edge903-t4-presentation
A deeply-gone-through slideshow about the interface and how an effective interface should be. It has lots of useful information. However, the only thing I cared about there was : "Cognitive overload" - simply say that the information is provided unnecessarily and ineffectively. I read through 3 types of cognitive load ... blah blah blah and these were main points ==> HOW TO REDUCE COGNITIVE OVERLOAD?
     - Eliminate the unnecessary loads
     - Reduce the size of the cognitive load by dividing the interface to smaller pieces
     - Make instructions to help the interface users to understand what they need to do and how the interface will help them.
     - Do not confuse the users by less ordering the interface content
     - Allow the users to use the interface based on their needs and able to control its features based on their readiness.

------------
Another useful tip I found in the slideshow was "Misaligned between the text and the picture increased the cognitive load and make bad effect on the memory process"

WHAT MAKES AN EFFECTIVE INTERFACE?

I reckon I have a quite good question here; it helps me a lot. I found a word-press user page who provided lots of information how we designers should build the interfaces for a specific user-group.
Link : http://iface.wordpress.com/2006/02/09/what-makes-an-effective-interface/

Here are his useful tips in summary.

Conclusively, we can say that an interface should

• Talk the client’s language
• Specify the information expected from the client
• Provide information about the service (only the information that is relevant to the client) that the client can expect.

 -----------------
Yes, one more time, I think about it and decide to change my user-group; it will need to be more specific and clearer in order to be easier for me to design my interface

RESEARCH ON 3-CLICK RULE

Back to the Week 9's lecture, the interface is required applying 3-click rule. I was like "what is this rule about? I've never heard of this before"... Therefore, I take myself into and "dig" it...
Here is the information I found on wikipedia.com
The three-click rule or three click rule is an unofficial web design rule concerning the design of website navigation. It suggests that a user of a website should be able to find any information with no more than three mouse clicks. It is based on the belief that users of a site will become frustrated and often leave if they cannot find the information within the three clicks. Although there is little analytical evidence that this is the case, it is a commonly held belief amongst designers that the three click rule is part of a good system of navigation. Critics of the rule suggest that the number of clicks is not as important as the success of the clicks.

------------------------
I think about my inital concept and realize that "people they really want to see desired information just in three maximum clicks, I shouldn't make my interface this way"... just so you know, I will change my whole interface and promised that the interface will be so much different.

SOME INSPIRATIONS FOR THE INTERFACE

I am still researching more and more. Surfed around, and found some simple, clear interface from different websites; I found them are really useful as ideas for my own interface

The buttons are well-designed, just so clear

From an apple website, the design is so simple but looks really elegant

Simple but eye-catching

I really this colours combination, and the interface is so clear and easy to use

Black and simple, perfectly fit for advertising wine and so...

SOME INSPIRATIONS FOR THE INTERFACE

I would say I am stuck at building up a useful, effective and clear interface because I still lack of skills and experiences. Here are just some inspirations for log-in page forms, the artists has done good jobs there. The log-in forms are just clear, easy to understand and good-looking.
Link : http://dzineblog.com/2009/03/interface-design-inspiration-36-beautiful-login-pageform-designs.html
Here some which I really like

RESEARCH WHAT PEOPLE DID FOR ENERGY SAVING - Part 4

 http://www.energysavingcommunity.co.uk/
"Feeling still lacking of information in saving information, or having some questions that need some experts help out?" I've asked myself, then I found one of the biggest communities on energy saving, and it is from UK. It is a online news page rather than a social network or a forum, but they provide "real" useful information there. Up-to-date, the information is endless there. Even they have training classes, a service group to serve and answer questions about the energy problems, wow it is really cool. I really love the way it is organized, very professionally and effectively.

Screen shot

As a usual online news page, you have the choice to share with people

RESEARCH WHAT PEOPLE DID FOR ENERGY SAVING - Part 3

Oh, I would say I research lots on google, but it the time I should look for something else out of google inc. Microsoft is another big boss also caring about saving energy. It still the beta stage and still has lots of limitation and works in the USA only, but I feel it is awesome and will be one of biggest service to help people think and do make some energy saving. MICROSOFT HOHM : http://www.microsoft-hohm.com/. Typing the household address there, and it will provide tons of information about how much energy your house did use and one of cool features is the rate on those consumption and hence compare with the average households' use. Yes, the idea is really cool, basically, people always like compliments, as it's through number, the grades/points or rates please people in many ways, somehow people really like to take some good point, even though they don't really know it is reliable or not, yes, is it kind of abstract but it works.
To talk a little bit more on the design of the page, the green is the main theme with the image of leaves, the feelings here are fresh, new and so clear. I presume they've done a very good job with the design here.

Screen shot

One of cool features they have there

RESEARCH WHAT PEOPLE DID FOR ENERGY SAVING - Part 2

Another google-related product : http://www.google.com/green/ - a page with custom search and shown lots of information and news about saving energy as well as energy saving tips... The google research groups are really awesome, the research is deep with lots of usefull information. Furthermore, as always, the interface of google's products do impress me a lot, the simplicity plus colours combinations are perfect, clear and easy (this also is one of my inspiration for the interface of my project). Here are screen shot.

RESEARCH WHAT PEOPLE DID FOR ENERGY SAVING - Part 1

First of all, I tried to google it (I was pretty sure that there were lots of saving energy plans people managed to make), the highest priority from google was one of its in-sponsorship : www.blackle.com

Screen shot

About blackle.com :

How is Blackle saving energy?

Blackle was created by Heap Media to remind us all of the need to take small steps in our everyday lives to save energy. Blackle searches are powered by Google Custom Search.
Blackle saves energy because the screen is predominantly black. "Image displayed is primarily a function of the user's color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen." Roberson et al, 2002
In January 2007 a blog post titled Black Google Would Save 750 Megawatt-hours a Year proposed the theory that a black version of the Google search engine would save a fair bit of energy due to the popularity of the search engine. Since then there has been skepticism about the significance of the energy savings that can be achieved and the cost in terms of readability of black web pages.
We believe that there is value in the concept because even if the energy savings are small, they all add up. Secondly we feel that seeing Blackle every time we load our web browser reminds us that we need to keep taking small steps to save energy.
 ---------------------------
In summary, in the theory that the colour of black will somehow help people viualize and save very little energy, even for the monitor screen the black colour is shown as lesser energy-used. Therefore, bits by bits, it will help save up to 750mW/h a year.... wow impressive, indeed

SOME MORE TIPS

I found another page from New Zealand government saving energy plan : http://www.rightlight.govt.nz/
Here they showed lots of choices on types of bulbs to save much energy. Some screen shots here

 

And some tips from that page :

Use lamps to light work desks

Use table lamps or task lighting to light work desks rather than lighting the entire room.

Dispose of CFL bulbs correctly

If there are no CFL disposal facilities in your area, the dead bulb should be disposed of in the same way as any other light bulb ie. wrap it in newspaper and dispose with your household rubbish.

Turn lights off

The simplest way to save energy is to turn off lights when you're not using them.

Use CFLs in high-use areas

Use CFLs in light fittings that are turned on for more than 15 minutes at a time or several hours per day to maximise energy savings.

Replace lights to save

Replace incandescent lamps with CFLs or new generation halogen bulbs to save energy and money.

       Really lots of tips, some of them are old school-ed but some impressed me, I was like "Oh, really, I've just known those". Really interesting information

ENERGY SAVING TIPS

I found a link into a saving energy tips, it is kind of a advertisement of Persil washing powder, but what they did show is really interesting. Link : http://cleanerplanetplan.persil.co.nz/energy-saving-tips?gclid=CP3tgbG1vqsCFWNNpgod-Wkvrg
With some information how people used energy just for laundry only, I was impressed, we actually wasted lots of energy in just washing and drying our clothes !? Here are some good tips they have had there

Screen shots

• Use Persil Small & Mighty – it delivers brilliant results even in cold water!
• Wash full loads in cold water – heating water for washing is one of the most energy-sapping activity in the laundry
• Hang washing on the line when possible. If you still want the softness from using a dryer, simply fluff towels and linens for only 5 minutes in the dryer after line-drying
• When you do use your dryer, clean out the lint filter after every load – it will run more efficiently

LECTURE 10

This week we went through quite a lot of inspirations again. Mrs. Blachnitzsky tried to provide us more and more how people did make the interface in excellent ways, hence I learned from that a lot.
The link is provided on the blog, so I don't really need to write my note here, I just F5 and watch some inspirations in that link over and over again, some of them I found are really interesting... ^^
Here the link : http://www.firstyeardesign.com/files/lecture10dsdn112.pdf

LECTURE 9

Today, Mrs. Blachnitzky gave us more information and inspirations. I took notes some.
PLUMEN - Energy Saving Bulb : the good design on lighting industry, they apply good technology on the bulbs so the way the energy flow inside will be saved much more.

And then we went through some interviews' great people :
 - Richard Saul Wurman
 - Chris Harrason with his inventions of Kinecticons : his icons are much more understandable and easy to use
 - TED's lecture with Aaron Koblin about Artfully visualizing our humanity : he was saying all the truth in a very interesting way, I was so impressed.
 - The last one Mrs. lecturer showed us is another TED's show : Fabion Hemmert - shape shifting.

I found that she updated this lecture on the blog. Here is the link :
http://www.firstyeardesign.com/files/lecture09_v2.pdf

In conclusion, this week's lecture gave me lots more inspiration to to change my initial ideas into much more interesting, and more understandable design of my own project

Edit : I almost forgot a very important part : the rules for the interface
1) Don't make users think, clear and easy
2) Information hierachy
3) Colour Coding
4) 3-clicks rule

BRAINSTORMING AGAIN

I got a bad grade for Part A. I thought my problem was I didn't put enough efforts into my works. So now, I decide to start once again, and I am going to "dig" deeply into much more research. Here I go, another brainstorm

I think this doesn't really relate to my idea I am doing right now, but somehow I find more ways to research more deeply into it.

LECTURE 8

Tutor Paul Stevenson come today to talk once again about the "TRING" project about helping people saving power. It was nothing really new, but somehow it is interesting to hear it one more time; last time Dr. Leon Gurevitch did talk about this project already, him and Kah Chang. They are still doing it, up to now about 8 months already, the whole design and idea are awesome, I am impressed a lot.

DESCRIPTION FOR PROJECT 2

DESCRIPTION – E FOR ENERGY

I am going to make an application on Ipod Touch. It is for sure I will aim to Ipod Touch or Iphone users, because I see more and more people with Apples products (Ipod, Iphone…). Furthermore, applications on Ipod Touch can be compatible with Iphone or even Ipad.

My idea is simple and the only need is a Bluetooth device connect to the household energy meter. In my opinion, if I provide a lot of information such as : each areas you have separate information, how much energy an application used, … people will get bored looking at them anyways no matter how interesting they look like. To me, “simple is the best”. At the very first, people need to choose their favorite things they really want to buy (a list with tons of things, I will make this with wide range of choices). Those choices will be reminded each month to “refresh” feeling from users. The idea is the application will provide a very common way of showing information about how much energy the user’s household used in column graphs and pie graphs with lots of numbers. It will be boring just looking at those graphs. However, this smart application will calculate the money (the energy cost will always up-to-date through the Internet) and equalize the money to your favorite “so-wanna” buy things you have chosen. For example, I really want steak meals, an Ipad and tomatoes, and I use $500 for this month, so it will be 5 steak meals, oh well not enough for an Ipad and 15 kg of tomatoes.

Furthermore, I think Apple’s products users intend more to the elegant and glossy design. I need to make lots of good design in order to attract them, otherwise users won’t care just a bit. The alarm system when users overuse power and the reminder every month will be well-designed.

PROTOTYPE FOR PART A PROJECT 2