I decided to do another write up and give you 2 examples of HCI design principles. This follows from my earlier post explaining 5 Design Principles of Human Interaction. In an activity, I was asked to review a user interface for a council website in the UK. I am not going to do the exact same website as my university chose, so I picked two completely different websites.

We will still follow the same 5 design principles of;

  1. Affordance
  2. Perceivability
  3. Feedback
  4. Constraints and flexibility
  5. Other principles: grouping, consistency and simplicity.

Example #1 – Herefordshire Council

So this is a council website local to me, so I figured I would start there. Here is the website as it looks to me at the time of writing this post;

On the homepage, we can see a bright orange button which says “menu”. Although it is placed in the top left-hand corner, the perceivability is good. The middle content boxes are clearly set out into grouped categories which we can instantly tell are universally recognised symbols. With a symbol of a bus and a bicycle clearly visible – we know that is the section for transport. The same applies to “Rubbish and Recycling”, we can tell this section is all about rubbish disposal.

The middle sections and categories also give us fantastic feedback, since it creates movement when we hover over an area. The titles within the section also underline. We also have flexibility over how we can achieve our goal, we are able to use the grouped navigation or search for what we need.

However, to actually use the search box we must position the cursor in the textbox and click before we can type a search term, this shows constraint.

There is quite a large search box in the place we would expect to find it (top left). I can also see a bright orange menu button which stands out clearly.
A lot of standardised symbols are used such as the magnifying glass and also the menu button. We can also see many other standardised symbols such as the icons in the sectioned menus. Pictures for bins and recycling, a builder and a wall for planning and building control. It is these images which draw our attention to the sections themselves.
When we navigate over parts of the website we can interact with, we are able to see the feedback such as colour changes and movement. When we hover over the menu in the top left we can see it changes colour slightly, this signifies great user feedback.
If we needed to use the search bar, we couldn’t just start typing. We need to actually click on the search bar itself before being able to carry out a search.
The website follows a universal consistency. The middle content is grouped into categories that are related and we can navigate easily into any of those categories. No matter what category we navigate into, we always have the search bar on every page along with the menu.

Example #2 – Recycle For London

This website is very simplistic, not only this they have also used a green colour, which we all identify with the recycling industry. We could say the colour used here is an affordance within itself. The thing that jumped out at me the most was the “Find your nearest recycling bank and what items you can recycle at home”, the search bar had very good perceivability and affordance since we know what to do with it.

The search bar below the slider contains two constraints, one where we need to either hover over the postcode to type our postcode in. The other covers the flexibility principle since we can just click on our location, so we have that option! Whilst we are on the subject of flexibility, we also have a search bar at the top of the website which is the universal standard.

Though the website contains all four of our principles it is missing one, feedback! I could not see any user feedback for buttons or images, this could be an issue.

So there we have it! 2 Examples Of HCI Design Principles.

Show Buttons
Hide Buttons