Human / Computer Interface Concepts - a web developer's primer.
The original point of human/computer interface work was to create "intuitive controls" for the software we used to work with computers. These controls were meant to allow humans to easily manipulate or work with a program and get things done with a minimum of mistakes, confusion, and false starts.
We have come a long way from the punch card method of control - thank heavens! Along the way we have learned a few things about how humans interact with computers - how we learn, associate one thing with another, and how we notice and use clues to find our way.
The four main concepts we have learned that provide guidance for human computer interface work are convention, affordance, information chunking, and consistency. The following attempts to explain these concepts within the framework of web site development.
A convention is like an agreement. An agreement between everyone to do some thing the same way as everyone else. There may not be a good reason to do it one way or the other but if everyone just agreed to all do it the same way then disaster can be avoided. Driving on the right side of the road comes to mind. In Canada we all have agreed to use the right side of the road, by convention - it helps avoid car accidents. In England they have all agreed to use the left side of the road.
Now anyone who has traveled between these two countries, and had to drive in them both, have witnessed the power of "convention". It is very difficult to override a convention with conscious thought, because once learned, it becomes reflexive. You must instead relearn your reflex through practice, and while you are practicing you can be a danger to yourself and everyone around you.
In the web world there are many conventions which serve us well and these conventions should be used unless there is a very good reason not to. For example: it is a long standing convention that an underlined word indicates a hyperlink. If you were to use underlining in your web site to indicate headings (not links) then I guarantee that some, if not all of your visitors will click on these underlined words expecting them to lead to other pages.
Have you ever noticed that a door that has a grab handle (rather than a push plate) is always pulled on first - regardless of the large lettered sign placed at eye height that says PUSH? We grab and pull when presented with a "pull-able" object because it looks like it should operate by pulling on it. We only read the sign that says PUSH when the pulling fails to get the door open. This is the concept of affordance. Something has proper affordance if it looks like it does the thing it actually does.
One of the common uses of this concept is the use of icons. For example: the little envelope that indicates your mail program, the little file folder icon that represents a directory in the file system, the 3 dimensional submit button that you push or click on to submit the form. The idea is that if an object can be made to look at least a little bit like the thing it does, then the affordance is improved and the result is an interface that is intuitive to use with the least amount of written instruction.
The concepts of affordance and convention re-enforce each other over time as people become more familiar with computing. We can take affordance clues from a previously encountered notion like a hyperlink (that has no real analogue in the real world but is by now a well known convention) and use them to identify other notions. Thus we are able to conclude, without a written explanation, that if one underlined word is a hyperlink then a list of such words is a list of links to the pages in the site. We can then deduce that a list of words presented in a certain way, on a web site, is probably the navigation (menu bar) even if the words are not underlined.
It has been determined, through much observation and study, that most people can hold in their minds and understand, 7 plus or minus 2 items of information at one time. Much more than 9 items and most people are overwhelmed and are unable grasp the meaning, or remember the separate items. This is why people have so much trouble with those web sites that have numerous menus, ads, images, animations, and "click here links" all over page. People are simply overwhelmed by the excess of information.
The principle of information chunking says that if we organize our information into chunks we can avoid overwhelming our audience and provide a simple and easy way for most people to find the information they are looking for.
Using information chunking we have turned what could have been an excessive amount of information (15 links) into 7 links. This, rather than making it harder to find Large Widgets, makes it easier. Now instead of having to laboriously read a 15 items list to find the Large Widget item, we only have to identify one of 7 items (Products), and then one of 4 items (Large Widgets).
Other ways to chunk information is to separate large amounts of information such as text by adding headings and sub headings where appropriate. This visually separates a large quantity of words into fewer chunks, reducing the amount of information to a manageable, perceivable level.
If a web site is consistent in the manner in which it presents like items, then the user can quickly perceive the patterns and identify the conventions used within the web site, even if these conventions are not ones seen before. For example; if every hyper link in a web site is coloured purple, and turns green when the cursor is passed over it, then the user will quickly learn (3 clicks will usually do it) that anything that is purple and turns green on hover - in this web site - is a hyperlink. However if some of the items that are purple and turn green are not hyperlinks (in other words there is no consistency) then the learning will not occur or will be lost, and the result will be confusion.
A web site is easiest to use if all major clues are consistent throughout the site. For example: All main headers are the same size, colour and font. All of the links are on a menu "bar" and all behave the same way. All PDF documents are indicated with a little PDF icon. All products have first the picture, then the description, then the colour choices, and then the price - all of them presented in exactly the same format. And so on, for all like items in the site.
You can tell when this is done correctly because it appeals to our innate desire for order - a consistent site will look "good" to most people.
Again, consistency works along with and reinforces the effectiveness of affordance and convention. Information chunking then, by reducing complexity and visual over load, helps the user to see the patterns, notice the affordance clues and remember the conventions.
Of course, there are many details and nuances and even disagreements as to how to apply the concepts of convention, affordance, information chunking, and consistency. However, if you keep these concepts in mind as you design and develop web sites, you will be much better equipped to make the hundreds of decisions needed along the way.
After all, as web site developers we must remember that a web site, although produced to please the owner, is for the user. If the user has trouble using the site, if she cannot find the information she needs, does not understand how to fill in and submit the form or order a product, then the web site will not be producing the most value it can for its owner, and that of course, is always our ultimate goal.
By Candace Carter, Back2Front - The Web Site People, 2007