11 Principles of Interaction Design explained

Back in July I posted a presentation on Slideshare highlighting 11 key interaction design principles. Some of the feedback I received asked if I could share my notes from the presentation which is exactly what I’m doing now.

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

That’s all folks!

Hopefully this post has helped to explain the slides within my presentation and provided an insight into some key interaction design principles. I’d be really interested to hear your feedback on this post so please leave a comment or ask any questions you may have.

If you haven’t seen the Slideshare presentation yet that led to this post you can find it here.

11 Principles of Interaction Design

The following short presentation was put together for our fortnightly ux meetups at Redweb. It covers 11 principles of Interaction Design. It’s not intended as an exhaustive list, simply an introduction to the subject.

I added the presentation to Slideshare a couple of months ago but just recently it’s had a few people watching and tweeting about it so I thought it was worth sharing . Unfortunately my notes aren’t included within the slideshow but if you’d like to know more please get in touch.


About UX Thursdays

Every fortnight, without fail, the UX team at Redweb gets together to knowledge share with the rest of the agency. At first I set up the sessions simply as a platform for me to raise the profile of our role within the agency but over the past year it’s grown into so much more.

Today  it not only acts as a way for me to communicate to the wider agency but it helps to:

  • Educate the people we work with ( e.g. designers, developers, account managers) on the breadth and depth of User Experience
  • Develop the team’s presentational skills
  • Provide an open platform for debate
  • Give fledgling/under represented areas a platform to communicate to the wider agency, for example Search or Content Strategy
  • Introduce new service areas or methodologies at an early stage of development
  • Showcase work that we’re proud of without having to wait until it’s officially gone live.

The presentation above is just one of many that has been put together for UX Thursdays.

Simplifying voter registration: my small part in the general election

Aboutmyvote.co.uk on BBC News

About My Vote as seen on BBC News (photo courtesy of @randomapricot)

With the General Election only a couple of weeks away the website I designed for the Electoral Commission, aboutmyvote.co.uk, has received quite a bit of news coverage.

As I mentioned in my previous post, at the end of last year we were the proud recipients of a BIMA award for Best Informational Website beating the likes of the BBC, British Gas and Channel 4. It was an awesome feeling to win the award but its been far more rewarding to see the site being used successfully and generating positive feedback.  On several occasions we’ve received emails forwarded on to us by the client that they in-turn have  received from users of the site commenting on how easy to use it is, and they’re not all from my mum either! I find it quite surprising that people are motivated enough by a good experience to email a government department  about it, and I’m certainly not going to complain about it!

Making a difference

In May I’m getting married to a Cardiac Nurse.  It’s amazing to hear some of the stories she comes home with at the end of each day, matters of life and death,  which always makes it slightly harder to complain about the lack of fresh muffins in the studio or a slightly slower than usual internet connection, any such comments usually lead to questions asking me if my diamond shoes are too tight as well.

But in all seriousness it’s something that I’ve always struggled with in my career; how am I helping other people? I think that’s one of the key contributing factors that lead me to User Experience as a discipline, the ability to make things better for people. Seeing the success of About My Vote and the part its playing in the General Election has helped me to feel like I have, in some small way, made a difference.

Pride and ugly babies

I take great pride in my work, as cheesy as it sounds I do find myself thinking of each site as though it was a newly born baby, I just sometimes wish I could dis-own some of the uglier ones, drown them or at the very least make them walk 100 metres behind me at all times so no-one see’s us together.  But thankfully that’s not the case with About My Vote, I’m quite happily taking the role of the proud and slightly embarrassing parent, hence this blog post!

As well as the kind words the Electoral Commission has received from their users we’ve also been able to collect quantitative data during the run up to the Election.

Tangible success

“The biggest recipient of UK Internet traffic from searches for ‘register to vote’ last week was About My Vote… As a result, visits to the site increased by 252%.”
Robin Goad, Hitwise

So far there have been around 1.8 million visitors to About My Vote over the run up to the election. Around two in five visits have been by 18-to-24 year olds which was classed as a minority group, and a key objective, when we first undertook the redesign. Before the 6 May announcement was made the site received around 22,000-25,000 registrations per month. In the last month the site has had just under 500,000 registration forms downloaded from it, which is an increase of around 1900%.

Obviously this is to be expected in the run up to an election and in itself isn’t an indication of success, but I’d like to think with the increase in traffic and press coverage if the experience of using it was poor we would have seen a lot more negative comments and I’m sure fewer people would have been promoting on Twitter.

Gradual Engagement

I’d  like to think that the perceived simplicity of the process has helped with its advocacy. Back in December, shortly after our BIMA success I wrote a post for the Redweb blog on the approach we took. In it I compared the the new site with its predecessor. By involving users in our approach and simplifying the process we managed to reduce the bounce rate to only 12% and increase conversions by approximately 87%.  To find out more read my post Gradual engagement: removing barriers for voters.

About My Vote press coverage

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.

D-List celebrity: My UX design interview with D-Lists


A while ago I was asked by Michael Wilson of D-Lists if I’d be willing to answer a few questions. I double checked to make sure the graves hadn’t been disturbed, burnt the clothes I was wearing ‘that night’ and tentatively agreed.

Thankfully Mike wasn’t working undercover and all he wanted to know was how I personally got into UX design and a few tips on how to develop your career. The full interview has just been  posted up on his site D-Lists.

If you’re unfamiliar with D-Lists its a blog that looks to compile lists of the very best in design from all over the world. Read the full interview on D-Lists now.

Writing with six crayons


A new site aimed at designers launched yesterday called sixcrayons. It consists of six front end web design blogs made for everybody that’s interested in learning and sharing more. It’s been setup by Harry Ford a designer at Fubra, surfer and fellow fan of Winston Churchill!

I’ve been asked by Harry to contribute to sixcrayons and not wanting to disappoint I thought I’d do my bit. I’ve just put together my first post which is now live. If you’re interested please check out my post and take a look around sixcrayons while you’re there.