Human Computer Interaction (HCI) is the design and study of how people (Users) interact with technology interfaces. HCI is everywhere and not just restricted to the home PC or laptop, HCI also refers to other technologies from mobile phones, MP3 players, IPads to microwave ovens, digital radio and even remote controls.


HCI – Human Computer Interaction Communication between a human and a computer system, referring in particular to the use of input/output devices with supporting software. John Daintith. – A Dictionary of Computing. 2004.

There are many different properties that go into HCI design. Though I am only going to cover 5 here since that is what I am currently being taught, there are many more such as;

  • Requirements Engineering
  • Interaction Design
  • Personas
  • Disruptive Innovation
  • Visual Aesthetics


Affordance in terms of design means how an object should physically be used, we should be able to visually see what that object or thing should be used for. Let’s do a quick example of affordance, check out my wheelie bin:

The design is instantly recognisable and we automatically know what to do with it. The two handles at the top are designed to pull, so that is one affordance. The wheelie bin also has two handles on the back so we can pull it behind us, yet another affordance. We also put our recycling inside, that’s yet another affordance.

There are also affordances for which the wheelie bin was not originally designed to do. Light does not pass through it, so we can hide behind it. We can climb inside if we wanted to!

There are hundreds of things we come in contact with on a daily basis where the design is intuitive. Affordances are things we think about without even knowing.


A website user should be able to perceive when or if an action should be carried out. The website itself should be designed so users get visual clues about what to do and where to go next. Designers use a call to actions for this process, in the form of text, graphics and other elements such as sound. The less time the user spends trying to work out what to do next the more perceivability the website has. Most designers will try to abide by universal standards, such as placing a search box in the upper right-hand area of the website. To help aid in the searching process it is universally known that the search button is to the right of the search bar itself.

human computer interaction


Giving the user feedback whilst processing an action is fundamental when it comes to HCI design. If a user does not get the proper feedback, they may think something is wrong or they did not perform the action, therefore they will perform the action again and this could lead to errors.

human computer interaction

Feedback comes in many shapes and sizes. When a user clicks an action we want the outcome to happen as soon as possible and in the fastest time, certain actions need a little bit more time to process. We as humans have very little patience, so to counteract this, designers incorporate features that give us feedback. For example, just say you want to search for something on a website, depending on the search it could take some time. So the designers can place a loading box element with some text such as “We are just searching your results, please bear with us…”.

Since we can now see feedback and that our action is actually “doing something”, we have a little bit more patience to await the results of the search. Here are some typical user feedback examples;

  • Mouse graphic turning into a sand timer
  • Flashing red lights on a TV indicating the remote control action has worked
  • Led light on a kettle telling us that it has been switched on
  • A “Waiting…” graphic on a website after an action has been carried out.


Constraints are when the interactive options and functions of a product are restricted. Since we have all filled them out at some point, we shall look at website forms. When we fill out a form online, whether it be for a registration, subscription, book an appointment or other, they are generally the same in the sense they require information.

Forms use constraints to stop us from making frustrating errors. For example, until we type in the *required information the form needs, we are prevented from pressing “Submit” or “Send”.

human computer interaction

Many years ago this system was not in place, the form would actually let you send after partially completing it and then complain it was incorrect, this meant we had to re-type the form back out, very frustrating! Apart from forms, there are other constraints used in everyday life such as menu items being disabled on a website because they are not being used. A button in a life which is greyed out as that particular button is not being used.

There are a lot of different ways to sway the user from wasting time by placing constraints. There are also two different kinds, physical and psychological. Take a set of traffic lights, for instance, the light is on red, we can physically go but psychologically we shouldn’t.


Consistency tells us the way in which I make sense of the world, including products we interact with. As humans, we create and work out patterns in almost everything we do, this helps us to decide what our next steps are to achieving our ultimate goal.

The same is true for interactive products. If I said to you “Website Menu”, you are instantly thinking that the menu is somewhere near the top of the website. That’s because it’s universally known that website menus appear at the top of all pages. On the other hand, if the menu items linked to different pages each time a user followed it, the website would be almost impossible to use and very inconsistent.

It is just not enough that website elements need to be perceivable, they must also be designed and organised with consistency, since interacting with them needs to yield the same results each and every time.

One last example is the sharing buttons on the bottom of this very post, just one glance and we already know that they are for sharing on Facebook, Twitter, Google+, LinkedIn, Pinterest and finally Reddit.

Show Buttons
Hide Buttons