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;
- Affordance
- Perceivability
- Feedback
- Constraints and flexibility
- 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.
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.
