Core Principles of Interaction/Interface Design

(Consistency, Visibility, Learnability, Predictability and Feedback)
Often abbreviated as IxD, Interaction Design is the practice of creating a digital system’s structure and behavior. The key goal when creating these Interactive Systems is for the product to develop a meaningful relationship with its user, be it a Personal Computer or a Mobile Device. Quite often enough the design of these systems centers on “embedding information technology into the ambient social complexities of the physical world” (Malcolm McCullough). In comparison to a scientific/engineering route, Interaction design focuses more on satisfying the needs/desires of the user than the desires of the technical stakeholders for a project.

In order for most Interactive Designs to function there must be a User Interface Design, this is the medium that the consumer and product uses to communicate with one another. Whether it is a mobile device, appliance or otherwise, all interactive designs need to have an input/output design that is simple and efficient; this is the main focus of Interface design. In further detail, UID aims to enhance the experience of the consumer through usability, efficiency, ease of memorization, reliability, user friendliness and usefulness.

There are many principles towards the design of Interactive systems, one very importantly being consistency. People are extremely sensitive to change so it’s ideal when designing an interactive product to keep Consistency in mind. What Interactive Designers don’t want to aim for when creating a product are features that jerk the experience of the user which makes them ask questions such as “Why is this different” or “Why isn’t that the same?” In order for these situations not to occur we need the user to gain a sense of familiarity that makes them feel comfortable when using an interactive product. This sense can be developed through the user continuously interacting with the product and learning how it works.
For example, recently Youtube changed their layout with the most noticeable differences being the positioning of the website itself within the browser and how the homepage defaults to “What to Watch” instead of uploads only from the user’s subscriptions. When this update went worldwide most people didn’t like the change because it required them to re-learn what they were already comfortable with. Updates like these are a big deal to the consumers as they now have to do more “work” in order to access the content they desire, such as clicking on an extra page or focusing on differences instead of the actual content given.

Additionally if people want to learn how a certain product works then its components must all relate. For example if the elements on a website all behave alike to one another then they should also look very similar. Keeping consistency within Interactive interfaces is important as the user can gain a sense of expectation with how the product can behave in the future. Simple changes in format (font, size, iconography, positioning, etc) can completely change the experience of the user and deter them from using a certain product that doesn’t stay the same in appearance. Effectively being inconsistent can change the learning curve dramatically.

The factor of Visibility is extremely important to Interaction Design as most interfaces are inheritably visual, in order for the user to engage with the interactivity available visual cues must be present in the product. If these certain cues were not present within the Interactive system then we decrease the validity of the very fact that the product itself is “Interactive” as the user is ignorant to the opportunity. Visual cues must be easy to find and recognize, discovering a certain component is interactive shouldn’t have to be dependent on luck or chance. The only occurrence where we’d want the user to search for something and experience trial and error is through Games or Easter eggs, these are an exception in the rules of visibility as failing in this environment is part of the experience. The most common method a user realizes that an element is interactive is if they rollover the subject itself, therefore overlays, transitions and other effects alike are vital to noticing Interactivity exists. In some cases visual cues need to be emphasized so that the user will move their cursor towards the subject.

Take the example of video on a webpage, without the play button and controls anybody could see the media as just an image. It’s these types of cues that actually communicate with the user without actually having to display any text on how to interact with it or what it actually is.

When people use Interactive products (especially touch screens) they are usually very “click-happy”, using standard interface components such as hyperlinks, thumbnails, buttons, etc invites the user to click onto certain elements. If we were to stylize an element as if it was part of a block of text then we may not be able to recognize important interactive features such as hyperlinks or spoilers. This is why when designing Interactive systems text styles are needed to be categorized visually depending on what function they serve.

False belief is a key problem when designing Interactive interfaces, we don’t want the user to believe they’ve seen it all when in fact they’re actually missing more content that’s available to them. For example, neatly displaying information on a webpage can actually make the user believe that there is no information to scroll down to, hinting a false-bottom is actually a cue for the user to focus on that area and look for more info. False-bottoms can either be made up of very specific notifications such as an arrow in the sidebar with associated text or subtly enough an image that is partially cropped out due to the size of the canvas.

To tie in with the function of Consistency we also have Learnability, Interactive Systems need to be easy to learn and remember. Whether the user is visiting a page or re-visiting the device itself the user needs to remember what they have learned every time they interact with the system. Ideally the designers would aim for the person to use the system once and remember it from that experience, however practically it takes a few more times for the user to get a grip of how the system behaves in order to eventually use it efficiently.

To go into more depth we can use Learning theories from Psychology to better our understanding of how people acquire and retain knowledge and skills. For example, we can look at Operant Conditioning and see how getting a reward or positive feedback increases the probability that the user will use the system and repeat a certain behavior, whilst receiving a punishment or making an error decreases this probability. Additionally we can also look towards Observational Learning which involves using someone to model a certain behavior that we want replicated and repeated by other people. In relation to Interactive Media, O.L. can tell us a lot about how people are learning to interact with devices from the behavior of role models. A very simple example of Observational Learning is video tutorials as a person is setting an example of how a certain system should be used and then people will replicate that method.

The key factor to Learnability is the usage of practice with devices as this can lead to users picking up habits or even automaticity (requiring less occupation of the mind). Basically the more we use an interface, the more we learn it and the easier it becomes to use it in the future.

By taking a look at the graph to the right we can see that when a person first uses a device they’re considered quite a novice at the experience and the rate for making errors is quite high. Overtime though we see that with more practice the user is considered more of an expert at the device and the probability of making errors is has vastly decreased which overall has led to an improved performance. As designers we want to make something that is easy to learn so that the user doesn’t have a steep learning curve.

Another factor to consider with Learnability is how people learn behaviors from experiences of real-world places and objects which can then aid them in using Interactive Systems. In more depth as Designers we can take advantages of what people already know by targeting their transfer of learning and their perceived affordances. How people re-apply experiences in similar situations and how we can use the functions of real-life objects metaphorically or in digital form on an Interactive System. Effectively (with perceived affordances) we are taking the questions we ask with real-life objects such as “How am I going to interact with it?” “What is it going to do?” “Can I lift, press or turn this?” and drawing a digital equivalent towards it when designing Interactive systems. For some comparisons analyze the image above and see how buttons, sliders and tabs have been translated because of their affordances into what we see digitally with their perceived affordance.

Next we have Predictability; meaning what will happen before the interaction occurs should have precise expectations set by the Interactive System. The basic method to set these expectations is for us to analyze visitor behavior which can then reveal how well they are able to predict what will happen. A poor level of predictability can be seen when a user is randomly clicking around on elements expecting for something to happen, here they are unable to grasp a sense of what they might expect or even what they are interacting with. In comparison a user who is focused on the job in hand and understands their environment will be using the system efficiently as they will know where to click,  what the outcome would be from that and would be able to accomplish their goal. If the correct expectations are set the ability to predict the outcome can be easily established.

The usage of previews can help set the expectations for users and even show the constraints of what they are able to achieve with complex or new interactions. For example, when an interface is in the process of loading a preview can be shown of what the content is going to be, how it behaves and how a user should interact with it. Using these taster-like interfaces is great for when a person is waiting for the main content to load, so that they can not just understand/predict what’s going to happen but neither are they bored in the process. Another example of a preview can be when a game level loads the map can be shown for the specific area with even markers on it to show the goals for the user.

Other features such as labels, instructions, icons and images can also be used to set the expectations of how a system might function. All these various methods can help us communicate what we want to tell the user about the Interactive system. Specifically we can tell the user what it can do, what will happen, where the person will go next and how the system will respond to certain actions. By developing certain patterns and consistencies we can match a user’s prior experience/expectations.

Lastly we have Feedback; this is an essential factor towards Interactive Design as it can provide information about the progress of functions, the location, future possibilities and whether or not something has finished. In terms of visitor experience feedback is used to support what somebody is doing instead of interrupting them and complicating things. An example of feedback can be the “Undo” function that is present on a number of editing software. This function allows the reversal of choices in order to correct mistakes or in the event of an error where one can revert back to a prior state.

Another key example of feedback can be stating the progress of functions such as downloads or loading bars. The image below shows us a Steam Library interface that displays how much has been downloaded, how much time remains, when the download started, what is the current rate of the download and how much needs to be downloaded overall. This dialog is giving us multiple cues about what is happening, what you are getting, how long it will take and that you have the option to get out of it.

Acknowledgement of actions is also a key element to feedback, in order to have a successful interactive system every interaction should produce a noticeable and understandable reaction. It is imperative for the system to tell the user that their action has been noted otherwise it can lead to the repetition of that action or even further errors/mistakes. The system needs to respond to an action, this response can range from a button animation pressing down to a character from the input of a keyboard being printed out on a word document, etc. For more complex processes such as loading bars we can use accurate/inaccurate indicators. The image to the right shows us some of the different types of indicators that are used in Interactive systems, ones that can show us the size/duration of a certain function (e.g. downloads) and ones that do not (e.g. buffering).


To summarize, these core principles do not all fit into separate categories, many of them overlap/interrelate with one another. The image to the right shows how these various factors all affect one another and are essential to the whole process of Interaction Design. Firstly, visibility displays certain interactions and when their outcomes are noticed they can be accurately predicted and people will use the interface. From there if meaningful feedback is given after the user activates an interaction people can understand how their actions lead to the outcomes. When the feedback is understood they start to learn how the interface works, with continuous practice, reinforcement and observation people’s learning of the interface becomes stronger. Once they have learned how the interface functions they are able to transfer that knowledge to similar interfaces (e.g. webpages with the same software). As long as the interfaces within similar systems (or the same system) are consistent, people will be able to apply what they have learned and interact more efficiently and effectively.