1. History of HCI

In today’s world, people, businesses and industries thrive on advances in technology. These innovations and new products aid us in performing vital tasks, such as emailing clients, paying employees, and presenting data to others.

These advances in technology have brought about the subject of HCI. Standing for Human Computer Interaction (or Human Computer Interface), HCI is a user-oriented approach to the design and interaction between a human and a computer, based on concepts brought on by Psychology, Sociology, Computer Science, Graphic Design and Industrial Design^[1]. HCI as a research subject has a relatively short history, but has achieved amazing results with the dawn of new technologies, such as the Internet. For example, the use of hypertext technology allows us to transfer from one page to another anywhere in the world in seconds^[2]. HCI is a leading field of research in many universities and research labs, and even now research is being made into the HCI concepts of tomorrow. Whilst many would argue that industry is the leading force behind innovations in the understanding and research into HCI, many more would argue the fact that universities have made the most ground in HCI research today, and have been the driving forces behind the styles and interfaces used in industry and commercial software today^[5]

.

Figure 1: Separating Affordances from the perceptual information that specifies affordances. Adapted from Gaver (1991).^[7]

By looking at certain peripherals that we usually take for granted, like Keyboards, Mice, etc we can see how far HCI research has come. Looking further back to early computers, such as the ENIAC, the worlds first all electronic numerical integrator and computer^[3], we can see the aspects of HCI used (Tape, Punch Cards, Paper output, etc) and how they have evolved to develop what we use now, and how today’s technology can help us research and develop for the technology of tomorrow.

There are many areas where HCI can be made. These include:

• UI Level
  • Software
    • OS level
    • Program level
  • Hardware
    • Interaction with peripherals (Keyboard, Mouse, etc)
    • Interaction with large machinery
    • Interaction with other machines, such as Telephones, Mice, etc.
• Output level
  • Format

Additionally, HCI consists of three parts.

• User/Users
  • Single User
  • Group of users
• Computer
  • Any ‘computer’ system (i.e. Television, Calculator, VCR, etc)
• Interaction.
  • Good interaction based on knowledge of Users and Computers
  • Research needed into users wants, and what the computer can perform

HCI is a subject we still do not know much about. Research is still on-going, and new advancements are made every day. As new technologies come about, HCI is typically applied when designing interfaces. As a general guideline, a system should be usable by anyone who wishes to use it. This does not mean that it should be able to accommodate everyone, but only those who need to use it. Also, the user should be able to operate any system without needing to know what is going on underneath the interface. By thinking about complex programs, such as an Operating System, you are able to see how important HCI is. HCI will ultimately govern the users’ views on the program, just as a drivers views will be determined on how a car handles.

Many confuse HCI with UI (User Interface). Whilst the design of User Interfaces does come under the term HCI, HCI is a far broader term which encompasses the way users act with any computational system. When a designer creates an interface for a user, they are typically creating a User Interface. However, when they are creating this interface, the designer must think about, and carry out his/her own research into HCI and how the user will perceive and use his/her design.

It is important to appreciate the fact that there are no rules that govern HCI. The subject is built upon basic concepts and there are no right or wrong answers to anything. However, certain aspects of design could be deemed bad for HCI, as they do not help the user navigate the hardware well. Donald Norman^[4] defines two key principles to help ensure good HCI practices, one of these being Affordance.

2. History of Affordance

Affordance was coined by two people historically, James J. Gibson in his books ‘The Theory of Affordances, in Perceiving, Acting, and Knowing’, and ‘The Ecological Approach to Visual Perception’, and Donald Norman in ‘Affordances, Conventions and Design’. James J. Gibson introduced the term in 1966 to define ‘all possibilities of action’ and built upon in it further publications. Donald Norman then used the term to describe properties in HCI. This made it a buzzword within industry design. Later on, Norman clarified his aims on using the definition Affordance to mean Perceived Affordances. This means more than the physical actions that can be taken on the subject, but goals, benefits, interests, and other properties. This opened up new possibilities for design. People begun to think about the actions their programs performed in more depth. For example, an icon on a desktop. Whilst with normal affordance one would wonder what would happen once an icon was clicked, with Perceived Affordances, you also ask questions like “do I double-click it?” and “what button should I click it with?”

Donald Norman defines Affordances as a ‘technical term that refers to the properties of objects – what sorts of operations and manipulations can be done to a particular object’. His opinion on Affordances differs psychologically from the Gibson definition, and whilst many people are happy to use the Norman approach of Affordances, many others argue against it and bring up the case of ‘Gibsonian Affordances’ being reinstated in industry. It is viewed by many that the Normal approach was too ambiguous and that his method did not explain Affordances well enough for anyone to apply it.

To remove himself from this ambiguity, Norman wrote a paper on Affordances and Design, in which he is quoted to say.

“In the world of design the term Affordance has taken on a life far beyond the original meaning. It might help if we return to the original definition. Let me try to clarify the definition of the term and its many uses”^[8]

By removing himself from the Gibsonian meaning of Affordance, he created a whole new definition for Affordances. He revised the original meaning of Affordance and turned it into a concept for Human Computer Interaction. This meaning is called ‘Perceived Affordances’.

3. Open Discussion of Affordances

As shown earlier in this report there are many different definitions made for Affordances. These views seem to stem from different subjects, and all attempt to conflict when applied to Human Computer Interaction. The Gibson approach to Affordances show that an objects affordance is depends on the action capabilities of the user. For example, a door can have the ‘affordance’ of being able to open, but if the door is hidden or blocked the affordance is null. However, if the environment around the door (handle, flooring, etc) is visible then direct perception can be used, and these objects in the environment become action capabilities^[6].

The argument seems to stem from these two definitions of Affordances. Gibson defines Affordances as ‘action possibilities’ whilst Norman defines them as ‘perceived properties’.

Whilst many authors choose to stick to sides when describing or using affordances, other authors have taken it upon themselves to use them both, provide a distinction between then, and utilise both definitions in their work. An example of an author using this method is William W. Gaver. In his book, “Technology Affordances”, he used the example of separating Gibson affordances from their perceived affordances (Norman).

To understand the true meaning of what Norman was trying to get across in his book, we have to look back at Perceived Affordances. To him, it is far more important in HCI to look at how the user perceives an object, rather than what is actually there. When creating an interface, a designer wants to know how a user will perceive his creation, instead of its perceptual functionality. The Norman method puts emphasis on what the user perceives, but he never denounces the existence of Gibson Affordances. He says that when someone is working with real, physical objects, both types of affordances can exist, but do not need to be the same.

It is this authors’ opinion that both Perceptual and Perceived Affordances have a place in Human Computer Interaction. However, to make better use of the two definitions work far more research needs to be put into utilising them, rather than arguing against them. A good example of the two working together are by splitting real-world and interfaces, then applying what’s used in the real world (perceptual) and what we find on an interface (perceived). A button on a webpage reflects a real-world object, and when a user finds a button, they know it will submit an action.

To put the authors’ argument forward, the example of Web Design will be used. Web Design today is a relatively new industry, and is still yet to mature as a solid medium for commercial businesses. Web standards are constantly being revised, making it a hot topic for research, especially in HCI. As Norman puts forward in one of his articles, there are constraints. These consist of Logical and Cultural constraints. Logical Constraints use logic to determine that something must be done. For example, if a user has to save a file, but the toolbar is not on the screen, the user logically knows that the toolbar with the save button needs to be pulled up. Cultural Constraints are learnt from experience or are shared by cultural groups. The example of the button shows that logically when a user knows he/she must go to another page to access content that the button will take them there. Also, the button emulates a real-world example that is learnt from experience in our culture.^[8]

Both types of Affordances are used in Human Computer Interface. To understand how a button should work, we need to understand how a button is perceived in the real-world. With this understanding, the perceived affordances of the button can be applied to a ‘virtual’ button on a computer program, application or web site. Dominantly perceived affordances will be used to define a website button, but to understand how a user will react to a buttons’ perceptual affordances will need to be taken into account.

This argument brings forth the question “How can we design for cultural constraints?”

The question is a very valid one. No designer knows exactly how a user will perceive the product/application, nor do they know if a user will understand how it works or what they need to do to be able to perform a certain task. There are three guidelines that can be used to ensure good Affordance.

1. Follow conventions
   1. An example of conventions b eing followed is the Windows GUI (Graphical User Interface). By other programs following this GUI the user will know where to go for certain actions (e.g. File, Save).
   2. Whilst a convention is a good way of ensuring a user will know what to do, the user must be able to know the convention first. Also, if using a convention for many different applications then they must be relevant to each, wh ilst being similar enough that a user is able to navigate around them all with ease.
2. Describing Actions
   1. An example of this in use is ToolTips. If a user cannot understand what a button means, they can hover over it to gain a name and description of it. (See Fig 2)
3. Metaphors
   1. Metaphors in HCI are when an object on a computer system is named something matching something else in real-life to simulate the action it performs. For example, if you want to delete a file, you will move it to the Recycle Bin.
   2. This can be a risky practice, as it is not known that all users will understand the metaphors, nor is it understood if they wi ll understand them differently to you. For example, the use of recycle may mean to alter somethi ng bad into something good, so a user might drag a file he/she needs to convert into the Recycle Bin, hoping that it will convert a word document to a PDF.
4. Chunking
   1. This is a term used in a presentation to describe when items of similar actions are grouped together. For example, toolbars on MS Word group together similar actions, such as creating shapes, colouring shapes, and creating lines, arrows and other objects with the drawing toolbar.

Figure 2: ToolTips being used to show what a button does.

Both definitions put very good arguments forward, and both can be attributed to different aspects of computational systems. It is a desirable trait for systems to be easily usable without a user needing to look for help or follow a manual/documentation. Affordance plays a huge part in the layout, semantics, and design of an interface or object.

4. Current and on-going research in the field of Affordances

Affordances are being put into many different uses in computing. A good example of this is the Internet. It has become the new trend of website development nowadays to be accessible to all users, and to comply with World Wide Web Consortium (W3C) standards. It is also illegal for commercial websites to not be able to support disabled. This has made designers rethink about their approaches to designing web pages, and usability/accessibility has become a much higher need. It has been recognised by authorities on Web Design/Development that Affordance can play a huge part in the designing of an accessible web page. Andy Rutledge is quoted saying:

“So essentially, each website is, to some degree, its own unique environment that must be designed with contextual affordances.”

“To further complicate things, there is also the issue of real-world context. How a website refers to something or represents something outside of the digital world often has an impact on affordances.”^[10]

Looking through the quote, the term ‘Contextual Affordances’ is used. This shows the usage of Perceived Affordances in HCI, but using ideas based from Gibson. Two other types of Affordance used in his article are Affordance by Default, or Fundamental Affordance. These are both used together in unison when critiquing designs. The example used is the Google main web page.

Figure 3: Google Homepage^[11]

As you can see from this example, two things stick out more than anything. The header image (Google) and the search area. Next to everyone who visits the Google web page want to search the Internet. As these two are the objects that stick out the most, Andy Rutledge argues that these qualify as ‘Affordance by Default’. This term is used to specify where good affordance makes a possibly flawed design work. It also shows the importance of Affordance in today’s design, and how it is a neglected part of the design process.

Working past the time when Norman redefined Affordance, many others seem to be, like Andy Rutledge with his Affordances based on composition. Some researchers feel however, that Affordance has become something completely different from what it is supposed to be. Martin Weller, a Professor of Educational Technology at the Open University in Cardiff argues that Affordances today are far from Gibsonian, and their definitions could easily mean other things in their respective subjects (Sociology, Psychology, Anthropology, etc) ^[12]. Dan Hatto, a Professor of Philosophical Psychology at the University of Hertfordshire is quoted in the article, saying:

“Affordance at its best is explanatorily superfluous and metaphysically extravagant”^[13]

One of the main problems researchers come across with Affordance is that Human Computer Interface never goes hand-in-hand with Technology. Once new technology comes out, rarely is HCI ever taken into consideration. This can often lead to poor designs on new products, or users being easily confused. This was far more apparent in the past with systems like DOS, but as computing has become more desirable, and needed in the workplace the need for an understanding in HCI has become essential. Whilst even now HCI is still a heavy research subject, it is not always taken into careful consideration in industry (User Interfacing is a profession in industry, but doesn’t always encompass HCI, as mentioned earlier).

Even though many people find the term Affordance to be ambiguous and unrelated to the original Gibson theory of Affordance, very few would argue that Affordance hasn’t grown into a large subject for research. Some may even say that Affordance as a whole has become a subject in itself, and has grown to mean many different things to many different people. Many people in different industries can apply Affordance, in their own ways, to improve the design of their products, their interfaces, and their programs.

Universities are still the driving force behind these innovations and new revelations when it comes to the theory/concept of Affordance, whilst industry leaders are striving to apply these techniques into their own products. A leading area where Affordance is being noticed is Web Design. Designers and developers alike are using Affordance to give their users the best possible experience they can with the new advancements in technology. Governing bodies, such as the W3C are aiding the use of Affordances in the development of on-line applications and websites with accessibility standards^[14].

In the beginning, Affordances were made to demonstrate the properties of real-life objects. To show what would happen under certain physical circumstances. As we move into a Virtual World, do these Affordances become meaningless just because we cannot touch them? Many could argue that a pointer (mouse cursor) is touching these objects on the screen. As technology changes, Affordances must change, as well as its definition.

5. Bibliography

1. Preece, J. (1994) Human Computer Interaction, Addison Wesley Publishing Company, p. 7-8.
2. Brad A. Myers. “A Brief History of Human Computer Interaction Technology.” ACM interactions. Vol. 5, no. 2, March, 1998. pp. 44-54.
3. http://pages.cpsc.ucalgary.ca/~saul/hci_topics/pdf_files/history.pdf
4. Norman, D. A. (1988) The Psychology of Everyday Things, Basic Books
5. Brad A. Myers. “A Brief History of Human Computer Interaction Technology.” ACM interactions. Vol. 5, no. 2, March, 1998. pp. 44-54.
6. Soegaard, M. (2005) Affordances [Online], Available: http://www.interaction-design.org/encyclopedia/affordances.html
7. Gaver, William W. (1991): Technology Affordances. In: Robertson, Scott P., Olson, Gary M. and Olson, Judith S. (eds.) Proceedings of the ACM CHI 91 Human Factors in Computing Systems Conference April 28 - June 5, 1991, New Orleans, Louisiana. pp. 79-84.
8. Norman, D. A, Affordances in Design [Online], Available: http://www.liacs.nl/~fverbeek/courses/hci/AffordancesandDesign.pdf
9. Royal National Institute of Blind People (RNIB), UK Law [Online], Available: http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_legalcase.hcsp
10. Rutledge, A (2006) No Instruction Necessary: Part 1 [Online], Available: http://www.andyrutledge.com/no-instruction-necessary-part1.php
11. Google Homepage: http://www.google.com
12. Weller, M (2006) The A Word [Online], Available: http://nogoodreason.typepad.co.uk/no_good_reason/2006/07/the_a_word.html
13. “Making More Sense of Nonsense: From Logical Form to Forms of Life” in Post-Analytic Tractatus (Stocker, B. ed.) Ashgate, 127-149 (2004)
14. The World Wide Web Consortium (W3C): http://www.w3c.org