The principles of good interaction design

Principles of interaction design are followed in order to create an experience that makes users feel like they can easily do what they want to do and encourages users to use the experience more.

Getting Started

Interaction design is a designing process that focuses on the interactions between a product and the person using it. Interaction design enables a person to get the expected outcome from the product or service.

Best practices for interaction design are:

  1. Keep it simple.

  2. Concise the information or content.

  3. Show the progression of the task or journey.

  4. Maintain consistency.

  5. Create useful error messages.

  6. Give feedback for improvement.

 
Basic Principles of Good Interaction Design

1. Match between the design and real-world: Match user experience to real-world interactions, which can make interactions intuitive for people.

a. Language: Use terminology that resembles the real world. 

(e.g. Usage of accounting terminology in Accounting apps)

 

 

 

 

 

 

 

 

 

 

 


(e.g. Healthcare terminology used in medical record app)

 

 

 

 

 

 

 

 

 


b. Visuals:
Make sure you use familiar visuals as they help users to use digital products easily and comfortably.

 

 

 

 

 

 

 

 

 

 

 

 

e.g. Usage of flags for implying country codes

 

c. Elements: Use physical and digital elements, which are most intuitive due to familiarity with day-to-day objects.

e.g. Button on UI as well as hardware button support on the camera app.

 

 

2. Clarity: Create clear, straightforward, and simple interactions so that users don’t need to think before moving ahead.

e.g. Google search is an example of a clean presentation of functionality.

 

 

e.g. Differentiation between primary and secondary actions with representation of buttons makes it easy for the user to make a decision and continue with the flow.

 

3. Consistency: Create a consistent interface in its design and behaviour, which makes it easy for users to learn and use. Reuse patterns is one way to do this well.

e.g. Usage of the same toolbars and common functionality across all the Office365 products like Word, Excel, PowerPoint, Visio, etc. 

 

4. Feedback: Make sure the interface provides appropriate feedback to users, such as clear input validation, error messages, or confirming messages.


 

5. Scalability: Create an adaptable for a wide range of users, tasks, and contexts.

e.g. Medium UI across multiple devices and in different modes 

 

6. Efficiency: Create an interface that allows users to accomplish their tasks quickly and easily. Over a period of time, the product should empower the users. 

e.g. Enabling Keyboard shortcuts for the frequently done actions

 

7. Learnability: Create an interface that is easy to learn and use, even for first-time users.

e.g. With the right balance between data and controls, apt layout and good information design, a very data dense UI like Youtube also becomes easy to learn for anybody.


8. Usability: Create a user-friendly interface which is easy and comfortable to use, and minimizes the probability of errors.

9. Error handling: Make sure the design is error free, but if they’re identified, recover them quickly and continue with the flow.

e.g. Account recovery flow in case users have forgotten passwords and need to continue

 10. Accessibility: Create an accessible interface for users with disabilities and other special needs.

e.g. Not relying on color alone but also showing an accompanying graphic to indicate the state 

Do’s & Don'ts

Do’s

Don’ts

  1. Set information in a logical order.

  2. Create flexible and scalable designs.

  3. Design with aesthetics and minimalism.

  4. Make things easy to find.

  5. Create efficient and user-friendly designs.

  6. Create interactive interfaces by focusing on empathy.

  1. Don’t make users remember information.

  2. Don’t interrupt or give obstacles to the users.

  3. Don’t interrupt users with nice-to-haves.

  4. Don’t use jargon.

  5. Don’t delay the users with delayed responses.


Suggested Tools 

  • Figma

  • Sketch

  • Adobe XD


References 


Other Related Best Practices