Learn more! Five pillars of interaction design that are worth your in-depth understanding

With the rise of single-page design and mobile terminals, interactive design in web pages is becoming more and more important. In order to create a smooth and reliable user experience, you need to have a deeper understanding of interactive design.

As we mentioned in "Interaction Design Practice (Volume 1)", to do a good job in interaction design, you need to have a deep understanding and proficient control of multiple disciplines. This is also very logical - you are trying to make a system composed of a series of things feel friendly, easy to learn and very practical, which is not an easy thing to do.

So, let’s start with the most basic concept of interaction design, gain a deep understanding of the core design principles, and use the five-step design process to better complete interaction design.

Really good interaction design is driven by human connection. So the question is, how do human emotional connections translate into digital interfaces? The answer is of course there, but it is not a black-and-white yes or no, right or wrong. In our experience, truly successful interaction design is based on the perfect execution of basic user experience design.

Doesn’t look like an answer? No problem, we’ll keep reading.

1. Result-driven design

Even if you don’t conduct user research yourself, you still need to know how to build a mature understanding of design.

In the article "4 Essential UX Documents for User Experience Designers", we have an in-depth introduction to the four UX documents that interaction designers must know. These documents - or processes, can help you build flesh-and-blood "users" and have a more realistic restoration of specific product processes:

1. User role (Persona): Persona documents (limited to 2-5) usually need to include your target users. As a fictional character in Persona, its attributes and characteristics are set based on product research and user positioning, and are used as the "ideal user" faced in the subsequent design process. In essence, it is a placeholder. As a character setting, it will contain personal information, which is far more than just age and income information. The goal of the Persona document is to use the role to verify how your target users feel and view your design.

2. Empathy Map: It is like a lightweight Persona document. You can use this document when resources are scarce and time is tight. Empathy Map removes the personality and character of the character in Persona and focuses more on the user's feelings in a specific situation.

3. User Scenario: If Persona helps you design a character in a story, then User Scenario is the script of the story. User Scenario is usually designed around a specific goal. For example, the next day is Mother's Day, and you need to book a gift for your mother. The goal is clear. To achieve the goal, the user needs to click a few buttons, follow a certain process, how long it takes, and how to incorporate emotions throughout the process. After predicting the entire user process, the designer will have a grasp of the UI and UX design.

4. Customer Journey Map: This document is very similar to the on-site user script, but it has a wider span than the former and runs through the entire experience design. Designers can have a deeper understanding of the background of the product to better design, and the product is not the end after it is put into use, which is why the span is so large. The customer journey map will cover all the information of the role information, user scripts and empathy maps. This setting is not to make the customer journey map a hodgepodge, but to combine the user's personality with the user flow and interaction process to look at the problem together. Different emotions and feelings are involved in different links of each stage.

2. Usability Design

Ensuring usability is the ultimate design priority. If your users can’t use your product, there’s no way you’ll attract them. Take a look at EventBrite’s seating design below.

This online app allows event organizers to reserve specific seats from the beginning of the event creation. The entire process retains a lot of details (specific rows, columns, proximity to the dance floor, etc.), and the designer integrates multiple steps and multiple processes into one process.

Complex systems like EventBrite need to be easy to use, with smooth processes that make users feel effortless. The less time users spend exploring the system, the more time they can spend on the important things at hand.

3. Affordance Design and Signifiers

Affordance design, as explained in our previous article:

Affordance is a word coined by James J. Gibson, one of the most important cognitive psychologists in the 20th century. His ecological visual perception theory and direct perception opened up new areas for cognitive psychology. Affordance is the noun form of afford (provide, give, undertake). The affordance of the environment refers to the attributes that the environment can provide to animals, whether good or bad, so I think "affordance" is a suitable translation. The example Gibson uses to explain affordance is this: If a surface is nearly horizontal (not sloping), nearly flat (not convex or concave), and sufficiently extended (related to the size of the animal), and if the material of the surface is hard (related to the weight of the animal), we can call it a base, ground, or ground. It is stan-on-able, allowing quadrupeds or bipeds to maintain an upright posture. It is walk-on-able and run-over-able. It is not sink-into-able like the surface of water or swamp for animals of a certain weight. The four properties listed - horizontality, flatness, extension, and hardness - are physical properties of the surface if they are measured by the metrics used in physics. However, for the affordance of a specific animal, they must be related to the animal in order to be measured. They are not abstract physical properties. They are specific to the animal in question and related to the animal's posture and behavior. So affordance cannot be measured as we do in physics.

When we discuss the affordance of interaction design, we believe that a function should be able to speak for itself and declare its own usefulness (the road is for people to walk) in a reasonable way.

Signifiers are a linguistic concept:

Signifier and signified are a pair of concepts in linguistics. Signifier means the sound and image of language and text, while signified is the meaning of language itself. According to the classification of linguists or philosophers, what people try to express through language is called "signified", and what language actually conveys is called "signifier".

Simply put, what affordance design conveys is its signifier. (The ground is flat, which means people can walk on it.)

Without a signifier, users cannot truly perceive the affordances of the design.

In the examples above, you can see the evolution and development of button design. The first button is just a word without a signifier, while the third button has a rounded border and shadow level, reflecting its characteristics as a "button".

[[146649]]

Signifiers can also exist in the form of metaphors or allusions, because people need to understand why they should interact with this object, not just that they can. Just like the tray at the bottom of the iPhone screen, you can see the rounded border button, so you know that we can press it, and the symbols such as phone, email and musical notes in it hint to the user in a specific image, what purpose can be achieved by clicking the button and what kind of thing can be done.

4. Learnability

Ideally, users will remember how to use any function after operating it once, but the reality is not the case. Intuitive operation and familiar design must be implemented in every interface.

Successful interaction design should make full use of consistency and predictability to reduce overall complexity. For example, some pages are worth keeping, and links should be opened in new pages as much as possible; while some pages involve specific operations and processes and cannot be opened in new pages to prevent users from relocating.

A consistent design ensures predictability of the design and also improves overall learnability.

UI patterns are a common tactic for improving interactive learnability. Many websites and apps have begun to use UI patterns. Patterned design ensures consistency and facilitates user familiarity. At the same time, more creative designs can be added on this basis.

Breadcrumbs are the most common UI pattern in web design. They guide users to browse the web in a more orderly manner. No matter where you are on the website, breadcrumbs will intuitively tell you the browsing path. This familiar design improves the learnability of the website. Learnable websites will encourage users to use them, which naturally improves usability.

5. Feedback and response time

Feedback is the heart of interaction. Every interaction is a conversation between the user and the product, so your product should remain friendly, interesting and useful.

Whether it’s a carefully designed animation, a fun and lively micro-interaction, or a simple beep, your product must communicate with the user and give feedback, regardless of whether the action was completed or not.

In the following example, Hootsuite uses an owl to show that the user has "entered sleep mode" after a long period of inactivity. This is logical and very interesting. This feedback makes the negative state of stopping updating interesting and fun.

Another important factor in providing feedback to users is response time. Usually the best feedback to users is to give feedback as soon as possible, as early as possible, and immediately. Most of the time, delayed feedback will make users feel very irritated, except in very few special cases.

A five-step process to improve interaction design

Now that we understand the five pillars of interaction design, let’s introduce how to improve interaction design.

Stephen P. Anderson, a famous interaction designer, once said that if someone pretends to be your interface, when you interact with him, it will be eye-opening. Any awkward feedback will be amplified, and you will learn to avoid anti-human interaction in the process. When you complete the whole process, you can start to write the interaction script and adjust the results.

Next, let’s talk about the specific process:

1. Role-playing and interaction: Find two people, one plays the interface, and the other takes notes. The person who plays the interface holds a browser window cardboard, and the interface is projected through a projector at the same time. You play the user and talk to the "interface". You explain and explain the user's goals, and the "interface" is limited to labels, menus and other UI elements to "feed back" your actions.

[[146650]]

2. Outline the narrative clues: The recorder records the details of each step, including tasks and emotions. This step can be completed with the help of User Scenarios documents.

3. Simplify the steps: Sometimes users need to go through many steps to achieve their goals (such as buying a ticket). However, when making a prototype, a complex goal should be broken down into a series of simple steps (such as asking for a destination and then setting up an itinerary). For example, Virgin Airlines’ stepped design is designed to make the booking process simpler and easier.

4. Control user choices: This may be the most difficult step, but you must try to reduce the user's operations. Always ask yourself whether each option in this step is essential. If not, separate it to other non-critical positions.

5. Pay attention to micromoments: Micromoment, a new compound word, refers to the critical moment when users interact with the interface. At this time, users may hesitate, be aggressive, or suddenly stop. Let's translate it as micromoments. Recalling the role-playing session, you will remember those moments of hesitation and anxiety. In order to make the interaction clearer, you should make full use of the copywriting selection on every detail, combined with reliable UI patterns, to guide users to make the right choices in these micromoments.

If you don’t pay attention to details, the magician’s magic will fail. In the same way, bad interaction will ruin the entire user experience. The above process can help you make interaction design a bridge between the interface and the user, rather than simply making the interface “move”.

Conclusion

Interaction design does not only involve interface behavior, it is an adaptive technology based on user behavior. What users like and expect in terms of function and emotion is the key. But it is also based on such limitations that the products you design should be designed for these expectations and needs. Therefore, the best interaction design is probably like this: it responds quickly to users, does not mix too many thoughts, just like a magic trick, smooth, worth looking forward to, and logical.