11 Principles of Interaction Design explained

This post isn’t intended to be an exhaustive list of interaction design principles, its merely an introduction to the subject. And I’m definitely not going to attempt to enter the lions den of defining what ‘interaction design’ is, that’s for another day!

1. Match Experience & Expectations

When using a product or service for the first time there is likely to be an element of learning needed to get to grips with it. This learning curve can often be an uncomfortable experience especially if the proposition doesn’t feel familiar.

By matching the sequence of steps, layout of information and terminology used with the expectations and prior experiences of the user the friction and discomfort of learning a new system will be reduced.

Matching your audience’s prior experiences and expectations is achieved by using common conventions or UI patterns. Des Traynor and Eoghan McCabe from Contrast put together a great presentation for FOWA Dublin last year all about conventions which is well worth a look. It introduces the importance of conventions but more importantly highlights when they should be broken.

2. Consistency

As well as matching peoples expectations through terminology, layout and interactions the way in which they are used should be consistent throughout the process and between related applications.

By maintaining consistency users learn more quickly, this can be achieved by re-applying in one part of the application their prior experiences from another.

An added bonus of keeping elements consistent is that you can then use inconsistency to indicate to users where things do not work the way they might expect. Breaking consistency is similar to knowing when to be unconventional as mentioned above.

3. Functional Minimalism

“Everything should be made as simple as possible, but no simpler.” Albert Einstein

The range of possible actions should be no more than is absolutely necessary. Providing too many options can detract from the primary functions and reduce usability by overwhelming the user with choices. To achieve the zen of ‘functional minimalism’:

  • Avoid unnecessary features and functions
  • Break complex tasks into manageable sub-tasks
  • Limit functions rather than the user experience

4. Cognitive load

Cognition is the scientific term for the “process of thought”. When designing interactions we need to minimise the amount of “thinking work” required to complete a particular task. Another way of putting it is that a good assistant uses their skills to help the master focus on their skills.

We need to understand how much concentration the task requires to complete it and create a user interface that reduces cognitive load as much as possible. A good way to reduce the amount of ‘thinking work’ the user has to do is to focus on what the computer is good at and build a system that uses the computers skills to the best of its abilities. Remember that computer are good at:

  • Maths
  • Remembering things
  • Keeping track of things
  • Comparing things
  • Spell Checking and spotting/correcting errors

5. Engagement

In User Experience terms engagement measures the extent to which a consumer has a meaningful experience. An engaging experience is not only more enjoyable, but also easier and more productive. As with many things engagement is subjective so the system your designing must engage with the desired audience; what appeals to a teenager is not necessarily what their grandparent would also find engaging. Beyond aligning with the appropriate users, control achievement and creation are key.

The user should feel like they are in control of the experience at all times, they must constantly feel like they’re achieving something and also be able see the results through positive feedback or alternatively feel like they’ve created something.

In his book ‘Flow’, Mihaly Csikszentmihalyi describes a state of optimal experience, where people are so engaged in the activity they’re doing that the rest of the world falls away. Flow is what we’re looking to achieve through engaging interactions. We should allow users to concentrate on their work, not on the user interface. In short keep out of the way!

6. Functional Layering

The Pareto principle (also known as the 80-20 rule), in the context of interaction design, is the rule that 20% of the functionality is used 80% of the time. Therefore we should make the most common or important functions easiest to find. We can do this by hiding or reducing the prominence of infrequently used or advanced functions.

  • Look for functions that are not essential to the core tasks, or which are shortcuts for advanced users.
  • Consider introducing default settings and preset choices for new users or people who either don’t wish to or aren’t experienced enough to access advanced functionality.

Functional layering allows experienced users to access advanced functionality easily without hindering beginners. The idea is that as a user progresses they will naturally discover how to access such features without being overwhelmed early on.

7. Control, Trust & Explorability

These three elements are fundamentally important to any system. If users feel in control of the process they will be more comfortable using the system. If the user is comfortable and in control they will trust that the system will protect them from making unrecoverable or unrecognised errors or from feeling stupid. Trust inspires confidence and with confidence the user is free to explore further.

8. Error Prevention, Detection & Recovery

The best way to reduce the amount of errors a user makes is to anticipate possible mistakes and prevent them from happening in the first place. If the errors are unavoidable we need to make them easy to spot and help the user to recover from them quickly and without unnecessary friction.

Error Prevention
Prevent errors by:

  • Disabling functions that aren’t relevant to the user
  • Using appropriate controls to constrain inputs (e.g. radio buttons, dropdowns)
  • Providing descriptive, clear instructions and considering preemptive help
  • As a last resort provide clear warning messages

Error Detection
Anticipate possible errors and provide feedback that helps users verify that:

  • They’ve done what they intended to do
  • What they intended to do was correct

Its important to remember that providing feedback by changing the visual state of an object or item is more noticeable than a written message.

Error Recovery
If the error is unavoidable provide clearly marked ways for the user to recover from it. For example provide “back”, “undo” or “cancel” commands.

If a specific action is irreversible it should be classed as critical and you should make the user  confirm first in order to prevent slip ups. Alternatively you can create a system that naturally defaults to a less harmful state. For example if I close a document without saving it the system should be intelligent enough to know that it is unlikely that I intended the action and therefore either auto-save or clearly warn me before closing.

9. Mousing

In my daily interactions ‘mousing’ is becoming less of an issue as I begin to rely more on touch screen interfaces such as my iPhone and iPad. However, in the classic desktop environment ‘mousing’ relates to the ease in which you are able to move between controls, which is described best through Fitts’ law.

“The time required to click an object is proportional to the distance and inversely proportional to the object size.” Fitts’ law

Fitts’ law is a model of human movement in human-computer interaction (HCI) and ergonomics which predicts that the time required to click an object is proportional to the distance and inversely proportional to the object size.

With key functions or sequential mouse-operated controls we need to maximise the size of the controls and minimise the distance between them. This not only improves efficiency but in certain instances can reduce the risk of error.

  • Consider what the most common or typical mouse movements will be on each screen.
  • Where possible, place elements that will be used together in close proximity to each other.
  • Be particularly conscious of transactions that require a combination of mouse and keyboard controls. Consider ways to optimise for both styles.

10. Affordance

Affordance is the quality of an object that allows an individual to perform an action, for example a standard household light switch has good ‘affordance’, in that it appears innately clickable. In short the physical properties of an object should suggest how it can be used. In the context of user interfaces, affordance can be achieved by:

  • Simulating ‘physical world’ affordances e.g. buttons or switches
  • or keeping consistency with modern web standards or other interface elements e.g. underlined links or default button styles.

11. Hierarchy of Control

The hierarchy of influence between elements should be clearly apparent. Generally, controls which affect an object, should be grouped with the object, such as zoom controls on a map.

Controls which influence a group of objects should be associated with the entire group, forming a hierarchy.

Mocked up example showing hierarchies of control



The World’s worst best website – redesigning MoneySavingExpert

Back in October Damian Proctor (Redweb’s Head of Design) and I were asked by Web Designer Magazine to pick a website that we felt represented ‘bad’ design, explain why and offer up a solution of how we’d improve it.

Web Designer Magazine (October, issue 163)

Web Designer Magazine (October, issue 163)

We didn’t want to choose something obvious or easy. We wanted to challenge ourselves by picking a website that was well known within the UK, on some level successful and then look to improve upon it. We’re both strong advocates of the adage ‘good designers redesign, great designers realign’ so wanted to show how our chosen design could be iteratively changed to best meet the needs of its users rather than just redesigning it based on an emotional response to aesthetics. We recorded the process we went through to highlight each iteration and help us to write about it later!

With Damian responsible for the visual design I took lead on the user experience and UI design.  The split in responsibilities and iterative approach seemed to suit a blog post double bill, starting with this one which covers our initial thoughts through to a new prototype UI. Damian has then taken up the baton and run flat out to the finish line leaving tales of visual design, brand development and our final solution in his tracks. No doubt his post over at Randomapricot will be far better than my atrocious metaphor!

Picking a bad design

Having asked friends, family and the wonderful world of Twitter to come up with suggestions we settled on what we felt was the ideal example of a bad yet successful website, enter MoneySavingExpert.com.

According to Hitwise MoneySavingExpert has been the number 1 UK Business & Finance website since 2006. This year it ranked as the 100th most visited website in the UK whilst the forum ranked as the 10th most popular social network. It receives over 7.5 million unique visitors a month, supports 25 full-time staff and annually raises over £100k for charity, in fact raising enough money that they’ve setup their own charity just to handle the administration of the money, and yet this is all achieved without displaying adverts or charging users.

Current situation

With 3 million email subscribers and over 1/2 million forum members they have a social obligation to make the site perform as efficiently as possible. Its clear that there is a large and active community around the site but the design is flawed enough that it hinders rather than helps its users. In effect MoneySavingExpert is successful in spite of its design.

MoneySavingExpert.com - before

MoneySavingExpert.com - before

Clarifying the proposition

In their own words MoneySavingExpert’s proposition is to “save you money on anything and everything by finding the best deals and beating the system… based on detailed journalistic research and cutting edge tools.” They do this through several channels, the main being a weekly email.

The proposition is nowhere near clear enough, the importance of the email is lost amongst the crowded design and confused by the heaviness of content. Similarly the unique way in which they’re funded isn’t immediately apparent.

Simplicity and reducing noise

Following our initial research we wanted to show that with minimal effort we could noticeably and positively impact on the design. One of the biggest problems we faced was the amount of visual noise cluttering the design. with this in mind ambiguous icons and unnecessary graphical elements were removed, the usability of basic elements (such as calls to action) were enhanced and all instances of repetitive content were taken out. Instantly the design seemed cleaner and clearer as well as giving us a better idea of what we had to work with, what content and functionality we had to focus on and how far we could push the design.

Spring cleaned current design

Spring cleaned current design

Improving structure and layout

noise Once the initial clean up was complete we soon realised that, intentionally or not, the design was roughly built on a five column grid. Our first iteration was tweaked to fit and the foundations of our design started to take shape. I also took the opportunity to further improve the layout. Graphical text was replaced, the number of colours used reduced and primary navigation simplified.

Optimised design with grid

Optimised design with grid

Back to the drawing board

With the content stripped back and a basic structure applied, I switiched to my trusty layout pad and started sketching out new solutions. To help retain familiarity with the existing design I kept the prominent right column and grid system but made it more focused by dividing up the content based on whether it was financial advice or related to the site itself (e.g. about Martin Lewis, how MSE is funded). The latter, being less important, was placed within the right column so as not to distract from the main content.

Sketched wireframes

Sketched wireframes

MoneySavingExpert is described not as a website with an email, but more an e-mail with a website, with this in mind I treated email subscription as a primary function so moved it away from the right column and placed it in a more prominent position.

Global elements were next on my agenda. Search was moved up into the header and the primary navigation made more consistent by subtly changing things like the labels, order and spacing.

Within the main body money saving features were grouped together and placed below the email signup to help reinforce the benefits of subscription and support regular visitors looking for the latest financial advice.

Martin Lewis, the man behind MSE, has written several money saving books all of which can be purchased via the site. As the proceeds go straight to charity they were worth highlighting but not at the expense of the sites main objectives so they were placed together below the financial advice and offers. Beneath the book shop went any additional supporting content such as free tools and the visitor poll.

Wireframe (Axure prototype)

Wireframe (Axure prototype)

Although it seemed like I’d made loads of changes to the wireframe it still felt familiar.

A new visual design

Once happy with the wireframe I handed across to Damian to work on the visual design. Part 2 of this post explains Damian’s approach and reveals the final design. Read part 2 on Randomapricot now.

But before you go, I’d love to hear what you think. Better? worse? Rubbish approach? Please feel free to leave a comment, as always any feedback is really appreciated.