{"id":21235,"date":"2021-12-08T14:00:35","date_gmt":"2021-12-08T14:00:35","guid":{"rendered":"https:\/\/www.intercom.com\/blog\/?p=21235"},"modified":"2021-12-08T14:17:51","modified_gmt":"2021-12-08T14:17:51","slug":"fundamentals-good-interaction-design","status":"publish","type":"post","link":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/","title":{"rendered":"Building a foundation of excellence: Intercom&#8217;s 9 fundamentals of great interaction design"},"content":{"rendered":"<p>The design community no longer has 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&#8217;ve also lost something along the way.<\/p>\n<p>Designers have stepped off their island where slick, yet ineffective and impractical design is made. They&#8217;ve embraced <a href=\"https:\/\/www.intercom.com\/blog\/there-is-no-hand-off-product-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">cross-functional relationships<\/a> 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 <a href=\"https:\/\/www.intercom.com\/blog\/design-futures-1-creating-systems-not-products\/\" target=\"_blank\" rel=\"noopener noreferrer\">systems, not destinations<\/a>. And instead of primarily thinking about interfaces, they think about the product strategy. They design for <a href=\"https:\/\/www.intercom.com\/blog\/what-should-designers-ship\/\" target=\"_blank\" rel=\"noopener noreferrer\">business outcomes<\/a>.<\/p>\n<p>But when you&#8217;re deep in all of these additional layers of building products, it&#8217;s easy to forget about the importance of also nailing the thing designers are experts at: interaction design, the optimization of the interactions between user and product.<\/p>\n<p>When we recognized this issue in our own <a href=\"https:\/\/intercom.design\/\" target=\"_blank\" rel=\"noopener noreferrer\">design team<\/a>, we established the fundamentals of good interaction design. They are a reminder about the things that are deeply important to us, but sometimes forgotten.<\/p>\n<p>It&#8217;s by no means an exhaustive list and since they incorporate our <a href=\"https:\/\/www.intercom.com\/blog\/intercom-product-principles\/\" target=\"_blank\" rel=\"noopener noreferrer\">product design principles<\/a>, 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 the fundamentals of interaction design that are important to your company.<\/p>\n<h2 id=\"1-present-the-same-object-in-a-familiar-way-everywhere\">1. Present the same object in a familiar way everywhere<\/h2>\n<p>Intercom, with its 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 ensuring they behave the same way everywhere. Recognizing is easier than recalling.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21569\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/01-same-object-familiar.jpg\" alt=\"\" width=\"1000\" height=\"425\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/01-same-object-familiar.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/01-same-object-familiar-300x128.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/01-same-object-familiar-768x326.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/01-same-object-familiar-700x298.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/01-same-object-familiar-600x255.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n\u2705 <strong>Do<\/strong><br \/>\nDefault to showing an object the same way everywhere. When you do have a strong rationale to deviate, make it feel familiar and consider whether the object needs to be displayed differently elsewhere in the product.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nMake local optimizations that are not reflected elsewhere, or are inconsistent with other contexts. Don&#8217;t create multiple similar, yet slightly different, variations of the same object.<\/p>\n<p><strong>Ask:<\/strong><\/p>\n<ul>\n<li>How is this object shown elsewhere in the product?<\/li>\n<li>Can we reuse the same component here?<\/li>\n<li>If not, how can we make it feel familiar?<\/li>\n<li>Do we need to update it elsewhere in the product?<\/li>\n<\/ul>\n<h2 id=\"2-establish-hierarchy-in-your-interface\">2. Establish hierarchy in your interface<\/h2>\n<p>By establishing a clear visual hierarchy we can help our customers understand how the product works, the relationships between different parts, what&#8217;s important, and what isn&#8217;t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21568\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/02-interface-hierarchy.jpg\" alt=\"\" width=\"1000\" height=\"853\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/02-interface-hierarchy.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/02-interface-hierarchy-300x256.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/02-interface-hierarchy-768x655.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/02-interface-hierarchy-700x597.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/02-interface-hierarchy-600x512.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n\u2705 <strong>Do<\/strong><br \/>\nUse space, typography, grouping, and indentation to clearly communicate the hierarchy and relationships between different parts of the interface.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nBlur the lines between different hierarchy levels by not having distinguishable groups. Don&#8217;t create too many boxes within boxes.<\/p>\n<p><strong>Ask:<\/strong><\/p>\n<ul>\n<li>Is content laid out in clear, distinguishable groups?<\/li>\n<li>Is there enough space between these groups?<\/li>\n<li>Is related information grouped together?<\/li>\n<li>Are the correct text styles used to establish information hierarchy?<\/li>\n<\/ul>\n<h2 id=\"3-create-visual-rhythm-and-balance\">3. Create visual rhythm and balance<\/h2>\n<p>Make your interface easily scannable to help customers understand it quickly. Making it aesthetically pleasing can increase their perception of how usable it is.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21567\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/03-visual-balance.jpg\" alt=\"\" width=\"1000\" height=\"667\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/03-visual-balance.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/03-visual-balance-300x200.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/03-visual-balance-768x512.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/03-visual-balance-700x467.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/03-visual-balance-600x400.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n\u2705 <strong>Do<\/strong><br \/>\nAnchor the most important part of your interface and 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.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nLay everything out in a flat list. Don&#8217;t use overly long sentences or lines.<\/p>\n<p><strong>Ask:<\/strong><\/p>\n<ul>\n<li>Is it easy to scan the design and know what the most important part of it is?<\/li>\n<li>Does it feel visually balanced?<\/li>\n<li>Is the interface aligned to a grid system?<\/li>\n<\/ul>\n<h2 id=\"4-use-commonly-accepted-patterns-and-interactions\">4. Use commonly accepted patterns and interactions<\/h2>\n<p>We can help our customers become more familiar with Intercom and use it more efficiently by limiting the amount of interaction patterns that they need to learn.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21566\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/04-common-patterns.jpg\" alt=\"\" width=\"1000\" height=\"391\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/04-common-patterns.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/04-common-patterns-300x117.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/04-common-patterns-768x300.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/04-common-patterns-700x274.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/04-common-patterns-600x235.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n\u2705 <strong>Do<\/strong><br \/>\nUse existing patterns from our design system. Favor common interaction design patterns over clever bespoke optimizations. Follow industry-standard interaction design principles.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nIntroduce similar, yet different variations of our existing design system patterns. Don&#8217;t create custom patterns when there&#8217;s an established industry standard. Don&#8217;t misuse an existing pattern.<\/p>\n<p><strong>Ask:<\/strong><\/p>\n<ul>\n<li>Can an existing design system pattern be used here?<\/li>\n<li>If not, what does the industry-standard pattern for this look like?<\/li>\n<li>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?<\/li>\n<li>Is it clear how the pattern can be interacted with?<\/li>\n<li>Is there clear feedback when users interact with it?<\/li>\n<\/ul>\n<h2 id=\"5-use-progressive-disclosure\">5. Use progressive disclosure<\/h2>\n<p>By using progressive disclosure we can make Intercom simple for the majority of our customers while enabling more flexibility for our advanced customers.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21565\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/05-progressive-disclosure.jpg\" alt=\"\" width=\"1000\" height=\"602\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/05-progressive-disclosure.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/05-progressive-disclosure-300x181.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/05-progressive-disclosure-768x462.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/05-progressive-disclosure-700x421.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/05-progressive-disclosure-600x361.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n\u2705 <strong>Do<\/strong><br \/>\nStart with simple defaults and gradually reveal flexibility. Optimize for the most common use case.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nOverwhelm customers by showing full flexibility right away. Don&#8217;t compromise the most common use case for edge cases.<\/p>\n<p><strong>Ask:<\/strong><\/p>\n<ul>\n<li>What is the most common use case?<\/li>\n<li>What should the default settings be so most people don&#8217;t have to change them?<\/li>\n<li>How can we reveal information progressively?<\/li>\n<li>Are we compromising the most common use case for an edge case?<\/li>\n<\/ul>\n<h2 id=\"6-be-clear-and-concise\">6. Be clear and concise<\/h2>\n<p>Language is the key to helping our customers understand how Intercom works. However, too much content can have the opposite effect, with customers scanning the page without reading it and therefore not achieving what they need to do.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21564\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/06-clear-and-concise.jpg\" alt=\"\" width=\"1000\" height=\"334\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/06-clear-and-concise.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/06-clear-and-concise-300x100.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/06-clear-and-concise-768x257.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/06-clear-and-concise-700x234.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/06-clear-and-concise-600x200.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>\u2705 <strong>Do<\/strong><br \/>\nBe clear and concise. When necessary, progressively reveal information by using tooltips and links to help docs for learning more. Use illustrations to explain ideas. Edit ruthlessly.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nUse long, detailed content to explain how something works. Instead, consider what&#8217;s making it complicated and fix the underlying problem. Avoid falling into the trap of being technically correct, but difficult to understand.<\/p>\n<p><strong>Ask:<\/strong><\/p>\n<ul>\n<li>Is it easy to scan and understand what it is without having to read all of the content from beginning to end?<\/li>\n<li>What if you had to cut half of the content? Can you do it without losing meaning?<\/li>\n<li>Is the value proposition clear?<\/li>\n<li>Is it clear what the user needs to do?<\/li>\n<li>Will this be clear to someone with no previous knowledge of the content?<\/li>\n<li>What can we illustrate visually instead of explaining with content?<\/li>\n<\/ul>\n<h2 id=\"7-consider-responsiveness-and-speed\">7. Consider responsiveness and speed<\/h2>\n<p>Performance is a feature that needs to be carefully considered. When ignored or mismanaged it creates uncertainty and a janky user experience.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21579\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/07-responsiveness-and-speed.gif\" alt=\"\" width=\"700\" height=\"335\" \/><\/p>\n<p>\u2705 <strong>Do<\/strong><br \/>\nGive users instant feedback when they interact with the product and set expectations on wait times.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nForget about the loading states.<\/p>\n<p><strong>Ask<\/strong><\/p>\n<ul>\n<li>What happens right after interacting with the interface?<\/li>\n<li>Is it clear that the action was received and is currently processing?<\/li>\n<li>Is it clear when the processing will be complete?<\/li>\n<\/ul>\n<h2 id=\"8-guide-users-to-what-they-should-do-next\">8. Guide users to what they should do next<\/h2>\n<p>We usually start by designing for the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Happy_path\" target=\"_blank\" rel=\"noopener noreferrer\">happy path<\/a>, but that&#8217;s not how most customers will first experience it. Without clear guidance they might not reach the happy path at all. That&#8217;s where great interaction design comes in.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21563\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/08-guide-users-to-next.jpg\" alt=\"\" width=\"1000\" height=\"296\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/08-guide-users-to-next.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/08-guide-users-to-next-300x89.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/08-guide-users-to-next-768x227.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/08-guide-users-to-next-700x207.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/08-guide-users-to-next-600x178.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n\u2705 <strong>Do<\/strong><br \/>\nMake it clear what users should do next and make it easy to achieve. Specifically consider empty states, error messages, and end-states.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nDon&#8217;t create dead ends where users have to figure out what to do next by themselves.<\/p>\n<p><strong>Ask<\/strong><\/p>\n<ul>\n<li>What happens if you have no data to show?<\/li>\n<li>What happens when there&#8217;s an error?<\/li>\n<li>Is it clear what the user should do next?<\/li>\n<\/ul>\n<h2 id=\"9-be-mindful-of-accessibility\">9. Be mindful of accessibility<\/h2>\n<p>Although we haven&#8217;t yet established standards for accessibility there are lots of things you can do to make your design more accessible.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21562\" src=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/09-accessibility.jpg\" alt=\"\" width=\"1000\" height=\"595\" srcset=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/09-accessibility.jpg 1000w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/09-accessibility-300x179.jpg 300w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/09-accessibility-768x457.jpg 768w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/09-accessibility-700x417.jpg 700w, https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/09-accessibility-600x357.jpg 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n\u2705 <strong>Do<\/strong><br \/>\nUse existing design system components since they are made to be accessible. Use text styles and sizes that are easily legible. Add enough <a href=\"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/\" target=\"_blank\" rel=\"noopener noreferrer\">color contrast<\/a>. Don\u2019t use color alone to convey meaning.<\/p>\n<p>\u274c <strong>Don&#8217;t<\/strong><br \/>\nIntroduce new colors or text styles without talking to the design systems team. Avoid introducing custom components because they might not be accessible.<\/p>\n<p><strong>Ask:<\/strong><\/p>\n<ul>\n<li>Is there an existing design system component, color, or text style that you can use?<\/li>\n<li>Is the text legible enough?<\/li>\n<li>Is there enough contrast?<\/li>\n<li>Is there more than just color used to convey meaning?<\/li>\n<\/ul>\n<h2 id=\"focus-on-our-core-craft\">Focus on our core craft<\/h2>\n<p>While the product design discipline has matured a lot over the years, it\u2019s important that we don\u2019t forget or de-prioritize our core craft. Increased focus on customer and business needs shouldn&#8217;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.<\/p>\n<hr \/>\n<p><em>This was originally written as an internal document for our design team. If you&#8217;re interested in more content like this, check out our <a href=\"https:\/\/www.intercom.com\/blog\/careers-product-design\">product design page<\/a> for more content and our open roles.<\/em><\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>When you&#8217;re deep in all the different layers of building products, it can be easy to forget about the importance of also nailing the thing designers are experts at \u2013 interaction design. <\/p>\n","protected":false},"author":158,"featured_media":21257,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"category":[5],"tags":[547,153,18630],"coauthors":[435],"class_list":["post-21235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-and-design","tag-product","tag-product-design","tag-usability"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Intercom&#039;s 9 fundamentals of great interaction design<\/title>\n<meta name=\"description\" content=\"It can be easy for designers to get distracted by different aspects of building product and forget to focus on interaction design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a foundation of excellence: Intercom&#039;s 9 fundamentals of great interaction design\" \/>\n<meta property=\"og:description\" content=\"It can be easy for designers to get distracted by different aspects of building product and forget to focus on interaction design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/\" \/>\n<meta property=\"og:site_name\" content=\"The Intercom Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/intercominc\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-08T14:00:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T14:17:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/Mind-Cogs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"840\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gustavs Cirulis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@gustavscirulis\" \/>\n<meta name=\"twitter:site\" content=\"@intercom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavs Cirulis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/\"},\"author\":{\"name\":\"Gustavs Cirulis\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/person\\\/7de00adef7d607fd7d1cec98f45b3889\"},\"headline\":\"Building a foundation of excellence: Intercom&#8217;s 9 fundamentals of great interaction design\",\"datePublished\":\"2021-12-08T14:00:35+00:00\",\"dateModified\":\"2021-12-08T14:17:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/\"},\"wordCount\":1508,\"publisher\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/Mind-Cogs.jpg\",\"keywords\":[\"Product\",\"product design\",\"usability\"],\"articleSection\":[\"Product &amp; Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/\",\"name\":\"Intercom's 9 fundamentals of great interaction design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/Mind-Cogs.jpg\",\"datePublished\":\"2021-12-08T14:00:35+00:00\",\"dateModified\":\"2021-12-08T14:17:51+00:00\",\"description\":\"It can be easy for designers to get distracted by different aspects of building product and forget to focus on interaction design.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/fundamentals-good-interaction-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/Mind-Cogs.jpg\",\"contentUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/Mind-Cogs.jpg\",\"width\":1800,\"height\":840,\"caption\":\"interaction design\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/\",\"name\":\"The Intercom Blog\",\"description\":\"Articles and Podcasts on Customer Service, AI and Automation, Product, and more\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#organization\",\"name\":\"The Intercom Blog\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/Intercom-logo-sq-black-trans.png\",\"contentUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/Intercom-logo-sq-black-trans.png\",\"width\":1000,\"height\":1000,\"caption\":\"The Intercom Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/intercominc\",\"https:\\\/\\\/x.com\\\/intercom\",\"https:\\\/\\\/www.instagram.com\\\/intercom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/2491343\",\"https:\\\/\\\/www.pinterest.ie\\\/intercom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJG0MvLP03kyzzAkD-w98aQ\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Intercom_(company)\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/person\\\/7de00adef7d607fd7d1cec98f45b3889\",\"name\":\"Gustavs Cirulis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/71e669eb74bb803d339e2516128be3f028a8845f467ce8836cd48a1f802de445?s=96&d=mm&r=pg0ddc3632f1e6bde7011ee24211ecad2f\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/71e669eb74bb803d339e2516128be3f028a8845f467ce8836cd48a1f802de445?s=96&d=mm&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/71e669eb74bb803d339e2516128be3f028a8845f467ce8836cd48a1f802de445?s=96&d=mm&r=pg\",\"caption\":\"Gustavs Cirulis\"},\"description\":\"Gustavs spends most of his time focused on a big mission of making internet business personal on the Product Design team at Intercom. In his spare time, he also builds Inboard, a Mac app for organizing inspiration, and Later, an iOS and Mac app to help you stop sending emails to yourself.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/gustavscirulis\\\/\",\"https:\\\/\\\/x.com\\\/gustavscirulis\"],\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/author\\\/gustavscirulis\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Intercom's 9 fundamentals of great interaction design","description":"It can be easy for designers to get distracted by different aspects of building product and forget to focus on interaction design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/","og_locale":"en_US","og_type":"article","og_title":"Building a foundation of excellence: Intercom's 9 fundamentals of great interaction design","og_description":"It can be easy for designers to get distracted by different aspects of building product and forget to focus on interaction design.","og_url":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/","og_site_name":"The Intercom Blog","article_publisher":"https:\/\/www.facebook.com\/intercominc","article_published_time":"2021-12-08T14:00:35+00:00","article_modified_time":"2021-12-08T14:17:51+00:00","og_image":[{"width":1800,"height":840,"url":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/Mind-Cogs.jpg","type":"image\/jpeg"}],"author":"Gustavs Cirulis","twitter_card":"summary_large_image","twitter_creator":"@gustavscirulis","twitter_site":"@intercom","twitter_misc":{"Written by":"Gustavs Cirulis","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/#article","isPartOf":{"@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/"},"author":{"name":"Gustavs Cirulis","@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/person\/7de00adef7d607fd7d1cec98f45b3889"},"headline":"Building a foundation of excellence: Intercom&#8217;s 9 fundamentals of great interaction design","datePublished":"2021-12-08T14:00:35+00:00","dateModified":"2021-12-08T14:17:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/"},"wordCount":1508,"publisher":{"@id":"https:\/\/www.intercom.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/Mind-Cogs.jpg","keywords":["Product","product design","usability"],"articleSection":["Product &amp; Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/","url":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/","name":"Intercom's 9 fundamentals of great interaction design","isPartOf":{"@id":"https:\/\/www.intercom.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/#primaryimage"},"image":{"@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/Mind-Cogs.jpg","datePublished":"2021-12-08T14:00:35+00:00","dateModified":"2021-12-08T14:17:51+00:00","description":"It can be easy for designers to get distracted by different aspects of building product and forget to focus on interaction design.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intercom.com\/blog\/fundamentals-good-interaction-design\/#primaryimage","url":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/Mind-Cogs.jpg","contentUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/Mind-Cogs.jpg","width":1800,"height":840,"caption":"interaction design"},{"@type":"WebSite","@id":"https:\/\/www.intercom.com\/blog\/#website","url":"https:\/\/www.intercom.com\/blog\/","name":"The Intercom Blog","description":"Articles and Podcasts on Customer Service, AI and Automation, Product, and more","publisher":{"@id":"https:\/\/www.intercom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intercom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intercom.com\/blog\/#organization","name":"The Intercom Blog","url":"https:\/\/www.intercom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/08\/Intercom-logo-sq-black-trans.png","contentUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/08\/Intercom-logo-sq-black-trans.png","width":1000,"height":1000,"caption":"The Intercom Blog"},"image":{"@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/intercominc","https:\/\/x.com\/intercom","https:\/\/www.instagram.com\/intercom\/","https:\/\/www.linkedin.com\/company\/2491343","https:\/\/www.pinterest.ie\/intercom\/","https:\/\/www.youtube.com\/channel\/UCJG0MvLP03kyzzAkD-w98aQ","https:\/\/en.wikipedia.org\/wiki\/Intercom_(company)"]},{"@type":"Person","@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/person\/7de00adef7d607fd7d1cec98f45b3889","name":"Gustavs Cirulis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/71e669eb74bb803d339e2516128be3f028a8845f467ce8836cd48a1f802de445?s=96&d=mm&r=pg0ddc3632f1e6bde7011ee24211ecad2f","url":"https:\/\/secure.gravatar.com\/avatar\/71e669eb74bb803d339e2516128be3f028a8845f467ce8836cd48a1f802de445?s=96&d=mm&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/71e669eb74bb803d339e2516128be3f028a8845f467ce8836cd48a1f802de445?s=96&d=mm&r=pg","caption":"Gustavs Cirulis"},"description":"Gustavs spends most of his time focused on a big mission of making internet business personal on the Product Design team at Intercom. In his spare time, he also builds Inboard, a Mac app for organizing inspiration, and Later, an iOS and Mac app to help you stop sending emails to yourself.","sameAs":["https:\/\/www.linkedin.com\/in\/gustavscirulis\/","https:\/\/x.com\/gustavscirulis"],"url":"https:\/\/www.intercom.com\/blog\/author\/gustavscirulis\/"}]}},"jetpack_featured_media_url":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/09\/Mind-Cogs.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/posts\/21235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/users\/158"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/comments?post=21235"}],"version-history":[{"count":0,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/posts\/21235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/media\/21257"}],"wp:attachment":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/media?parent=21235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/category?post=21235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/tags?post=21235"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}