The design community is no longer talking about having to prove the value of design to get a seat at the table. Designers have demonstrated that design can be a central pillar of business success. But they’ve also lost something along the way.
Designers have stepped off their island where slick, yet ineffective and impractical design is made. They’ve embraced cross-functional relationships and work closely with partners all across the organization. More than ever, they understand who their customers are and what they care about. They design systems, not destinations. And instead of primarily thinking about interfaces, they think about the product strategy. They design for business outcomes.
But when you’re deep in all of these additional layers of building products, it’s easy to forget about the importance of also nailing the thing designers are experts at – interaction design.
When we recognized this issue in our own design team, we established the fundamentals of good interaction design. They are a reminder about the things that are deeply important to us, yet sometimes forgotten.
It’s by no means an exhaustive list and since they incorporate our product design principles, they are not universal to every company. They are fundamentals that we at Intercom care about. But hopefully they can serve as a reminder for you as well and maybe even get you thinking about what are the fundamentals of interaction design that are important for you.
1. Present the same object in a familiar way everywhere
Intercom, with it’s vast breadth and depth, can feel overwhelming. We can make it easier for our customers by making the core objects in the system (e.g. conversations, users, messages, etc.) easily recognizable and make them behave the same way everywhere. Recognising is easier than recalling.
✅ Do Default to showing an object the same way everywhere. When you do have a strong rationale to deviate, make it feel familiar and consider if the object needs to be displayed differently elsewhere in the product.
❌ Don’t Don’t make local optimizations that are not reflected or are inconsistent with other contexts. Don’t create multiple similar yet different variations of the same object.
Ask
How is this object shown elsewhere in the product?
Can we reuse the same component here?
If not, how can we make it feel familiar?
Do we need to update its elsewhere in the product?
2. Establish hierarchy in your interface
By establishing a clear visual hierarchy we can help our customers understand how the product works, what are the relationships between different parts of it, what’s important and what isn’t.
✅ Do Use space, typography, grouping, and indentation to clearly communicate the hierarchy and relationships between different parts of the interface.
❌ Don’t Don’t blur the lines between different hierarchy levels by not having distinguishable groups. Don’t create too many boxes within boxes.
Ask
Is content laid out in clear, distinguishable groups?
Is there enough space between these groups?
Is related information grouped together?
Are the correct text styles used to establish information hierarchy?
3. Create visual rhythm and balance
Make your interface easily scannable in order to help our customers understand it quickly. By making it aesthetically pleasing, you can increase their perception of how usable it is.
✅ Do Anchor the most important part of your interface, use varying styles and layouts to balance your design and make it easier to scan. Use a grid system and pay close attention to alignment.
❌ Don’t Don’t just lay everything out in a flat list. Don’t use long line-lengths.
Ask
Is it easy to scan the design and know what the most important part of it is?
Does it feel visually balanced?
Is the interface aligned to a grid system?
4. Use commonly accepted patterns and interactions
We can help our customers learn and use Intercom more efficiently by limiting the amount of interaction patterns that they need to learn.
✅ Do Use existing patterns from our design system. Favor common interaction design patterns over clever bespoke optimizations. Follow industry standard interaction design principles.
❌ Don’t Don’t introduce similar, yet different variations of our existing design system patterns. Don’t create custom patterns when there’s an established industry standard. Don’t misuse an existing pattern.
Ask
Can an existing design system pattern be used here?
If not, how does the industry standard pattern for this look like?
If you think you need a new pattern, have you talked to the design systems team and other designers? Can this pattern be fed back into the design system for other designers to use?
Are there clear affordances that the pattern can be interacted with?
Is there clear feedback when users interact with it?
5. Use progressive disclosure
By using progressive disclosure we can make Intercom simple for the majority of our customers while also enabling more flexibility for our more advanced customers.
✅ Do Start with simple defaults and gradually reveal flexibility. Optimize for the most common use-case.
❌ Don’t Don’t overwhelm by showing full flexibility right away. Don’t compromise the most common use-case for edge cases.
Ask
What is the most common use-case?
What should the defaults be so most people don’t have to change them?
How can we reveal information progressively?
Are we compromising the most common use-case for an edge case?
6. Be clear and concise
Language is the key to helping our customers understand how Intercom works. However, too much content can have the opposite effect where they just scan the page without reading it and therefore are not successful at what they aim to do.
✅ Do Be clear and concise and when necessary progressively reveal additional information by using tooltips and links to help docs for learning more. Use illustrations to explain ideas. Edit ruthlessly.
❌ Don’t Avoid using long, detailed content to explain how something works, instead consider what’s making it complicated and fix the underlying problem. Avoid falling in the trap of being technically correct, but difficult to understand.
Ask
Is it easy to scan and understand what it is without having to read all of the content from beginning to end?
What if you had to cut half of the content? Can you do it without losing meaning?
Is the value proposition clear?
Is it clear what the user needs to do?
Will this be clear to someone who has no previous knowledge?
What can we illustrate visually instead of explaining with content?
7. Consider responsiveness and speed
Performance is a feature that needs to be carefully considered. When ignored or mismanaged it creates a janky user experience and uncertainty.
✅ Do Give users instant feedback when they interact with the product and set expectations on wait times.
❌ Don’t Don’t forget about the loading states.
Ask
What happens right after interacting with the interface?
Is it clear that the action was received and is currently processing?
Is it clear when the processing will be complete?
8. Guide users to what they should do next
We usually start by designing for the happy path, but that’s not how most customers will first experience it. Without clear guidance they might not reach the happy path at all.
✅ Do Make it clear what users should do next and make it easy to do. Specifically, consider empty states, error messages, and end-states.
❌ Don’t Don’t create dead-ends where users have to figure out what to do next themselves.
Ask
What happens if you have no data to show?
What happens when there’s an error?
Is it clear what the user should do next?
9. Be mindful of accessibility
Although we haven’t yet established standards for accessibility there are things you can do to make your design more accessible.
✅ Do Use existing design system components since they are made to be accessible. Use text styles and sizes that are easily legible. Add enough color contrast. Don’t use color alone to convey meaning.
❌ Don’t Don’t introduce new colors or text styles without talking to the design systems team. Avoid introducing 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 text legible enough?
Is there enough contrast?
Is there more than just color used to convey meaning?
Focus on our core craft
While the product design discipline has matured a lot over the years, it’s important that we don’t forget or de-prioritize our core craft. Increased focus on customer and business needs shouldn’t be an excuse for bad interaction design. Design fundamentals like these help set a baseline for interaction design quality, help avoid egregious errors, and ultimately act as a foundation on which to build excellent customer-focused software.
This was originally written as an internal document for our design team. If you’re interested in more content like this, check out intercom.design for more content and our open roles.
Comentarios