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.

49 comments Write a comment

  1. Very interesting look into how we should treat designing and developing interactive elements for websites. A lot of this is common sense but its nice to see some more scientific citings to back it all up.

    Thanks Paul :)

  2. Pingback: Tweets that mention Shortboredsurfer – 11 Principles of Interaction Design explained -- Topsy.com

  3. Great post Paul. It’s nice to see some ‘scientific’ citations to back up your points… something which often doesn’t happen in blog posts!

    Keep up the good work.

    Charlie @simplicityUX

  4. I cannot thank you enough for these slide notes – this slide show is extremely useful to me as a junior developer and really gave me an insight to UX!

    Thanks again Paul,
    Regards,
    Jake

  5. Thanks for this followup post and the first one. They’re clear, concise and very helpful. I develop brand strategies to help customers interoperate with the universe. (Tall order, but inescapable.) We need all the interaction insight we can get.

  6. Paul,

    Great article. You have explained why things are the way they are and I think that is very important because too many times I read articles about how things should be done and that’s it. They don’t explain why it’s not done another way or why this way is more ideal. Hard to put into words. Sorry if I offended anyone.

    • Thanks Mark. It was my intention to try to explain the reasoning behind some of the things we do as designers. Hopefully I can build on the success of this blog post and cover off a few more over the coming months.

  7. “for example a standard household light switch has good ‘affordance’, in that it appears innately clickable.”

    … clickable?
    how about flickable?

  8. This is a great article, just stumbled into it through twitter. Sums up pretty well very important principles people keep missing.

  9. Pingback: Alcuni (semplici) principi di “Interaction Design” « pensieri a margine

  10. Seriously dude, this article is the business. It encourages one to go out and do what they always did, just better. thanks.

  11. Wow, thanks guys for the great feedback. It’ll certainly drive me on to write more on the subject.

  12. I’m curious why you say ‘mousing’ is less of an issue with touch screen interfaces. Certainly Fitt’s law is less relevant for small displays like smartphones, but it’s plenty relevant for average and large displays, especially with touch screens, since it takes more time an effort to move your hand from one end of the screen to the other than to ‘mouse’ a cursor. The actual Fitt’s law does not mention mouse or clicking, only aimed movement.

  13. Hi Alex, you’re right its still a relevant issue for larger touch screen devices but I was thinking more from a small handheld device point of view such as a smart phones.

  14. Awesome article. I believe that this is the sort of thing that should be taught to all prospective developers before any code.

  15. Hello,

    Thank you, this is a nice summary, and I’ll be recommending it to my students.

    I’d like though to take issue with your use of “affordance”: first you say

    “Affordance is the quality of an object that allows an individual to perform an action”, which is a good definition. But then you say:

    “a standard household light switch has good ‘affordance’, in that it appears innately clickable”

    which could be misconstrued. And UX designers often misunderstand affordances, so we should strive to be clear.

    So: The switch does afford clicking/switching, yes. And also, you can perceive that affordance, which is indeed good. But a light switch can be a confusing example, because you can mostly tell how it works because, as you say, it is “standard”. Standards are important, and they can be cues to affordances, but they are not affordances.

    Affordances are the *actual* qualities of objects, as they pertain to users. They can be visible or invisible. In general, making them visible is good. But when you make a affordance visible you are revealing it or pointing it out (often with cues), you are not *creating* it.

    Affordances are different for different users; for example a screwtop lid on a child’s sippy cup affords opening for me, because I can use a screwtop. But the same lid constrains opening for a small child who cannot use a screwtop.

    This special character of affordances – that they are different for different users – is part of their magic. The fact that they are *actual*, whether or not they are perceived, is another part. And the fact that they are the flipside of constraints is also a very useful idea.

    So thank you for this post, and for this opportunity to geek out on affordances. And if you wish to geek out even further and see me in proper rant mode, the link from my name above will take you to my own blog post on this topic.

    Cheers,

    V.

  16. Pingback: Do you really live on an island? » Blog Archive » Interaction Design

  17. Pingback: Kicker Studio: Essential Interaction Design Essays and Articles

  18. Excellent writeup.

    It’s very nice to see what we think in words that actually add some substance to those thoughts.

  19. Pingback: interaction design and neuroscience

  20. Pingback: EverydayUX morsels (October 15th – October 15th) — everydayUX

  21. Pingback: Design de Interfaces 101 – Coisas legais da web #02 | Modelo Mental

  22. Pingback: LINK DROP from October 23rd through Today (October 30th, 2010) : DesignNotes by Michael Surtees

  23. Pingback: the petemachine | Principles of successful web apps

  24. Pingback: Presentation on Interactive Design Principles | MFA D+T Bootcamp 2011

  25. Pingback: Principles of interaction design « Interaction design

  26. Pingback: 45+ Free Lessons In Graphic Design Theory

  27. The whole post is very good, but the 7th and 8th principles are in my point of view, the most interesting part of this text.

    Adding more evidence about this two points, the Mint.com founder, Aaron Patzer, said in a interview* that the super easy to use and well-designed site is one of the main sources of the user’s trust in his product.

    I think a new post about building trust with design digging deeper this subject will make a lot of success.

    * The post about the interview:
    http://www.faminecity.com/my_weblog/2009/04/insights-on-building-trust-mintcom.html

  28. Thanks for your comment André.

    It’s funny you should mention the connection between ‘trust’ and good design, I’ve been meaning to write about quality and trust for a while but haven’t managed to find the time yet. I will do at some point. It’s definitely something I’ll look at in more detail in the future.

    Thanks again for taking the time to read my post and comment on it.

  29. Pingback: Essential articles about Interaction Design | UX Designer

  30. Hi paul, Your post is helpfull.
    what about ‘visibility’? Dont you regard it as one of the design principles in interaction design?

  31. Hi Henok,

    Thanks for the feedback. As I say at the start, in no way is this intended as an exhaustive list, more an insight into a handful of interaction design principles that have interested me in the past. It’s always been my intention to follow up this post with further analysis of key design principles, such as visibility, balance, proximity, etc.

  32. By far, this is the best article I’ve read about interface design and user experience. I’ve been in marketing as a graphic designer for years and ended up being asked by the CTO to try out mocking up a software interface that was sorely outdated. Figured it was going to be easy, but it turns out I needed to understand workflow, expectations and ease-of-use in a way I’d never looked at them before. Being a “critical” user myself helped me in the process, but I came out of it with an increased respect for the process and a desire to do it again. I’m still considered a graphic designer in the marketing department, but have spent the last two years working alongside development as well. I’ve designed what is now my third interface (4 if including our website), and about two start the 5th. I’ve gone beyond just the look/feel and have added mobile apps to my repertoire. The graphics I produce for trade shows, direct mail, etc. get them in the door, but a successful user experience keeps them coming back. Thank you for putting into words what the this is really all about from the architect’s point of view. I’ve been asked to think about what I’d like to do in the company – this is it, and this article will help me articulate my role and goals.

  33. i really appreciate this information as it is very helpful and has a content simple and relevant to my domain career…

  34. I think your article would me much more readable without these annoying Share buttons at the top.

    • Hello Cécile, thanks for your interest in my blog and your feedback. I’ve been thinking about simplifying my blog for a while now and you were the final catalyst I needed to do something about it. I’ve changed the theme so hopefully readability has been improved now.

  35. Pingback: References during the research: « The Black Avant Garde: Team Blog For OzCHI'12

  36. Pingback: 11 principes du design interactif expliqués - SLP #18 - DigiTold

  37. Pingback: Alcuni (semplici) principi di “Interaction Design” « lateral thinking

  38. Pingback: Consistency | ELLA GRETTON

  39. Pingback: Turning Android Sideways | Safari Books Online's Official Blog

  40. I like the organization of this.

    Note: There’s a log in Fitts’ Law — makes all the difference. :)

  41. Pingback: UX Tidbits – July | Lauren Martin

  42. Pingback: 3 Tips to Designing for Android Landscape | Safari Books Online's Official Blog

  43. Pingback: 11 Principles of Interaction Design | Dingu Blue Blog

  44. Pingback: Principles of Interaction Design « Dingu Blue Blog