The Basics of Good Interaction Design from Intercom

The design community no longer talks about the need to prove the value of design. Designers have already proven that it can be the foundation of business success. But they lost something along the way.

Designers have moved away from ineffective and impractical design. They have embraced cross-functional relationships and work closely with all colleagues in the company. They now clearly understand what is important and who their customers are. They design systems, not destinations. And instead of thinking about interfaces first, they think about product strategy. They design for business results.

But at the same time, it is easy to forget that designers are experts in the field of interactive design.

When we learned about this issue in our design team, we laid the foundations for good interactive design. They remind us of important things that are sometimes forgotten.

This is by no means an exhaustive list, and because it consists of our product design principles, it may not be universal for every company. These are the principles that are important to Intercom. But hopefully they can also serve as a reminder and perhaps even make you wonder what interaction design fundamentals are important to you.

1. Show objects the same everywhere

Intercom is a rather complex program. We can simplify it for our customers by making the basic objects of the system (for example, conversations, users, messages, etc.) the same everywhere and easily recognizable. Easier to recognize than remember.

✅ Do

By default, show the object the same everywhere. If you have a good reason to make a change, make it familiar and consider whether you want to render the object differently elsewhere in the product.

❌ Do not do it

Do not perform local optimizations that do not account for or do not fit in other contexts. Don t create several different variations of the same object.

Ask

• How does this object appear elsewhere in the product?
• Can we reuse the same component?
• If not, how can we make it seem familiar?
• Do I need to update it elsewhere in the product?

2. Establish a hierarchy in the interface

By establishing a clear visual hierarchy, we can help users understand how a product works, what are the relationships between different parts of it, what is important and what is not.

✅ Do

Use space, typography, grouping, and padding to clearly communicate hierarchy and relationships between different parts of the interface.

❌ Do not do it

Do not blur the boundaries between different levels of the hierarchy, there must be distinguishable groups. Don t create too many sublevels.

Ask

• Is the content in clear, distinguishable groups?
• Is there enough space between these groups?
• Is related information grouped?
• Are the correct text styles being used to create the information hierarchy?

3. Create visual rhythm and balance

Make your interface easy to scan to help users understand it quickly. By making it aesthetically pleasing, you can improve the feel of it.

✅ Do

Reinforce the most important part of your interface, use different styles and layouts to balance the design and make it easier to scan. Use a grid system and pay particular attention to alignment.

❌ Do not do it

Don t just put everything on a flat list. Don t use long lines.

Ask

• Is it easy to scan a design and find out which part is the most important?
• Does it seem visually balanced?
• Is the interface grid-aligned?

4. Use common patterns and interactions

We can help our clients learn and use Intercom more effectively by limiting the number of interaction patterns they need to learn.

✅ Do

Use existing patterns in your design system. Use generic interaction design patterns rather than dodgy bespoke optimizations. Follow standard interaction design principles.

❌ Not do

Do not introduce different variations of existing design system patterns. Don t create custom patterns if there is an established industry standard. Don t overuse the existing pattern.

Ask

• Can an existing design system pattern be used here?
• If not, what does the industry standard pattern look like for this case?
• If you think you need a new pattern, have you discussed it with other designers? Can this pattern be redesigned for a design system for use by other designers?
• Are there obvious affordances, how can you interact with this pattern?
• Is there clear feedback when users interact with it?

5. Use progressive disclosure

By using progressive disclosure, we can make Intercom easier for most users, as well as provide more flexibility for advanced customers.

✅ Do

Start with simple defaults and gradually increase flexibility. Optimize your app for the most common use case.

❌ Do not do it

Don t be completely flexible right away. Don t compromise the most common use case for edge cases.

Ask

• What s the most common use case?
• What should the default values ​​be so that most people don t have to change them?
• How can we gradually disclose information?
• Are we compromising the most common use case for the sake of an edge case?

6. Be clear and concise

Language is the key to helping our clients understand how Intercom works. However, too much textual content can backfire and users will simply browse the page without reading it. Consequently, users do not achieve their goal.

✅ Do

Be clear and concise, and gradually reveal additional information using clues and links as needed. Use illustrations to explain ideas.

❌ Do not do it

Try not to use long, detailed descriptions to explain how it works. Instead, think about what is complicating the application and fix the underlying problem. Don t fall into the common trap of being technically correct but hard to understand.

Ask

• Is it easy to view and understand what it is without reading all the content from start to finish?
• What if you have to cut half of your content? Can you do it without losing meaning?
• Is the proposed advantage clear?
• Is it clear to the user what to do?
• Will this be understandable for those who are not familiar with the product at all?
• What can we illustrate visually and not explain with text?

7. Consider responsiveness and speed

Performance is a feature that needs to be carefully considered. If ignored or mismanaged, it creates a bad user experience and uncertainty.

✅ Do

Provide users with instant feedback when interacting with the product and set expectations for request processing time.

❌ Do not do it

Don t forget about loading states.

Ask

• What happens immediately after interacting with the interface?
• Is it clear that the system has received a command and the action is being processed at the moment?
• Is it clear when the processing will be completed?

8. Guide users to what they should do next

We usually start by designing the default happy path scenario, but most clients without clear guidance may not use it at all.

✅Do

Explain what users should do next and make it easier. In particular, consider empty states, error messages, and final states.

❌ Do not do it

Don t create dead ends where users have to figure out what to do next.

Ask

• What happens if you have no data to display?
• What happens in case of an error?
• Is it clear what the user should do next?

9. Remember accessibility

While we haven t set standards for accessibility yet, there are things you can do to make your design more accessible.

✅ Do
Use the existing components of the design system as they are made available. Use text styles and dimensions that are easy to read. Add enough color contrast. Don t use just one color to convey meaning.

❌ Do not do it

Do not introduce new colors or text styles without discussing it with the design system team. Avoid adding custom components because they might not be accessible.

Ask

• Is there an existing design system component, color, or text style that you can use?
• Is the text readable enough?
• Is there enough contrast?
• Is something other than color used to convey meaning?

Focus on your core business

Despite the fact that in recent years, product design as a discipline has developed greatly, it is important not to forget about the priorities of our core business. The increased focus on customer and business needs shouldn t be an excuse for poor interaction design. Design fundamentals like these help establish the foundation for quality interaction design, help avoid glaring mistakes, and ultimately serve as the foundation for creating superior user-centric software.