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
Wednesday, 28 September 2011
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
- 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.
Bad Hierarchy Design
 |
| Examples for bad information hierarchy (blurry but it doesn't matter) |
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"
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.
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
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.
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
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.
"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.
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.
Subscribe to:
Posts (Atom)