{"id":286,"date":"2021-07-12T17:28:00","date_gmt":"2021-07-12T17:28:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=286"},"modified":"2025-02-19T13:45:44","modified_gmt":"2025-02-19T13:45:44","slug":"what-is-interaction-design","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/what-is-interaction-design","title":{"rendered":"What is Interaction Design and Why Does it Matter?"},"content":{"rendered":"\n<p>What is interaction design and what is the interaction design process? How does it compare to UX? Well, this article will provide the answers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"what-is-interaction-design\">What is Interaction Design?<\/h2>\n\n\n\n<p>Interaction design (also referred to as IxD) is the practice of designing the interactions between users and products. Most often when people talk about interaction design, the products tend to be software products like apps or websites. The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible.<\/p>\n\n\n\n<p>If this definition sounds broad, that\u2019s because the field <em>is <\/em>broad: the interaction between a user and a product often involves elements like <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/aesthetics\" rel=\"noopener\">aesthetics<\/a>, motion, sound, space, and many more. And of course, each of these elements can involve even more specialized fields, like sound design for the crafting of sounds used in user interactions.<\/p>\n\n\n\n<p>Some of the questions an interaction designer thinks about include: Is the product behavior predictable, expected, and usable? Can our users accomplish their goals without many steps or much conscious effort? Of course, many UX designers these days are responsible for handling the interaction design of the products they work on as well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/indigo-design-interaction-design-body.png\" alt=\"What Is Interaction Design\" title=\"What Is Interaction Design\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"how-does-interaction-design-differ-from-ux-design\">How Does Interaction Design Differ from UX Design?<\/h2>\n\n\n\n<p>As you may already realize, there is a huge overlap between interaction design and UX design. After all, UX design is about shaping the experience of using a product, and most of that experience involves some <em>interaction<\/em> between the user and the product. But UX design is more than interaction design: it also involves <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/user-research\" rel=\"noopener\">user research<\/a> (finding out who the users are in the first place), creating user <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/personas\" rel=\"noopener\">personas<\/a> (why, and under what conditions, would they use the product), performing <a href=\"\/products\/indigo-design\/user-testing\">user testing<\/a> and more.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/indigo-design-ux-solves-problems-umbrella.png\" alt=\"Interaction Design and UX Categories\" title=\"Interaction Design and UX Categories\"\/><\/figure>\n\n\n\n<p><em>Interaction design is one element of the broader umbrella of UX design.<\/em><\/p>\n\n\n\n<p>Interaction designers, on the other hand, are focused on the moment when a user interacts with a product and their goal is to improve the interactive experience.<\/p>\n\n\n\n<p>For example, have you ever been frustrated by a TV remote that did not make sense, or a doorknob that was terrible to use? How about downloading an app and having no idea how to get started? Those are the issues caused by a poor understanding of interaction design.<\/p>\n\n\n\n<p>For UX designers, the moment of interaction is just a part of the journey that a user goes through when they interact with a product. User experience design accounts for all user-facing aspects of a product or system.<\/p>\n\n\n\n<p>UX design and interaction design are connected but it is nearly impossible to create good interaction design in isolation of UX. Interaction design is a spoke in the umbrella of user experience (UX design).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"why-is-interaction-design-important\">Why is Interaction Design Important?<\/h2>\n\n\n\n<p>Designing a great interaction experience has become increasingly important in our digital world. As mentioned above, it can be as simple as the interactions users have with a TV remote or a complex piece of software. In a hyper-competitive market, for example, smart tech brands know that a simple or elegant interaction with their software or device leaves a user satisfied \u2014 or even delighted! Do you remember the first time you used an iPhone?<\/p>\n\n\n\n<p>Here\u2019s how Steve Jobs of Apple approached design interaction:<\/p>\n\n\n\n<p><em>\u201cDesign is not just what it looks like and feels like, design is how it works.\u201d <\/em><\/p>\n\n\n\n<p>This famous quote from Steve Job stresses the importance of having good interaction design \u2013 the user\u2019s overall experience and satisfaction with a product.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"interaction-design-principles\">Interaction Design Principles<\/h2>\n\n\n\n<p>According to <a href=\"https:\/\/www.mantralabsglobal.com\/\" rel=\"noopener\">Mantra Labs<\/a>, a cognitive Solutions company, the 10 most important interaction design principles are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>UX<\/strong>: Match user experience and expectations<\/li>\n\n\n\n<li><strong>Consistent design<\/strong>: Maintain consistency throughout the application<\/li>\n\n\n\n<li><strong>Functionality<\/strong>: Follow functional minimalism<\/li>\n\n\n\n<li><strong>Cognition<\/strong>: Reduce cognitive loads\/mental pressure to understand the application<\/li>\n\n\n\n<li><strong>Engagement<\/strong>: Design interactively such that it keeps the user engaged.<\/li>\n\n\n\n<li><strong>User control<\/strong>: Allow the user to control, trust, and explore<\/li>\n\n\n\n<li><strong>Perceivability<\/strong>: Invite interactions through intuitions and interactive media<\/li>\n\n\n\n<li><strong>Learnability<\/strong>: Make user interactions easy to learn and remember<\/li>\n\n\n\n<li><strong>Error handling<\/strong>: Take care to prevent errors if they occur make sure to detect and recover them.<\/li>\n\n\n\n<li><strong>Affordability<\/strong>: Simulate actions by taking inspiration from usual and physical world interactions.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"interaction-design-process\">Interaction Design Process<\/h2>\n\n\n\n<p><em>\u201cThe designer does not begin with some preconceived idea. Rather, the idea is the result of careful study and observation, and the design a product of that idea.\u201d<\/em><\/p>\n\n\n\n<p><em>-Paul Rand, famous graphic designer and art director<\/em><\/p>\n\n\n\n<p>Here are the five stages that the IxD process typically involves:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find the users\u2019 needs\/wants<\/strong>\u2014It is easy to assume you know what users want\/need and their relevant contexts. Discover their <em>real<\/em> requirements:\n<ol class=\"wp-block-list\">\n<li><strong>Observe people<\/strong><\/li>\n\n\n\n<li><strong>Interview people<\/strong><\/li>\n\n\n\n<li><strong>Examine existing solutions<\/strong>\u2014While remembering it is hard to envisage future needs, technologies, etc.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Do an analysis to sort and order your findings so they make sense<\/strong>. This may be through a:\n<ul class=\"wp-block-list\">\n<li>Narrative\/story of how someone uses a system.<\/li>\n\n\n\n<li>Task analysis, breaking down a user\u2019s steps\/sub-steps.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Design a potential solution according to design guidelines and fundamental design principles <\/strong>(e.g., giving appropriate feedback for users\u2019 actions). Use the best techniques to match how users will interact with it in terms of, for example, navigation.<\/li>\n\n\n\n<li><strong>Start <a href=\"\/blogs\/what-is-prototyping-and-why-is-it-important\/\">prototyping<\/a><\/strong>\u2014Give users an idea of what the product will look like and let them test it, and\/or give it to experts to evaluate its effectiveness using heuristics.<\/li>\n\n\n\n<li><strong>Implement and deploy what you have built<\/strong><\/li>\n<\/ol>\n\n\n\n<p>The IxD process is iterative\u2014nobody designs anything right the first time, especially regarding more innovative solutions. It may indeed take many iterations before you pinpoint the ideal version of a solution. So, you (and your design team) should continue testing and adapting appropriate changes around an ever-clearer understanding of your users\u2019 needs. For example, you could gather user feedback and monitor support chats to find areas for improvement.<\/p>\n\n\n\n<p>It is important to understand the interaction design process is a<em> general<\/em> idea of how you can start from your users\u2019 needs and progress towards a fitting solution. Similar design processes exist. <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/design-thinking\" rel=\"noopener\">Design thinking<\/a> is one of the more notable of these, where you work to gain and leverage vital insights to fine-tune optimal features. Only when you know your users and empathize with them can you appreciate their real-world needs, desires, and pain points.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"the-five-dimensions-framework\">The Five Dimensions Framework<\/h2>\n\n\n\n<p>Here is another way to understand what interaction design involves. It\u2019s called the<a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2007\/07\/what-puts-the-design-in-interaction-design.php\" rel=\"noopener\"> five dimensions<\/a> of interaction design and based largely on the work of Gillian Crampton Smith, an interaction design academic.<\/p>\n\n\n\n<p>IxD involves <em>words <\/em>(1D), <em>visual representations <\/em>(2D), p<em>hysical objects\/space<\/em> (3D), <em>time <\/em>(4D), and <em>behavior <\/em>(5D).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1D: Words.<\/strong> Words encompass text, which helps convey the right amount of information to users. Words, especially those used in interactions, like button labels, should be meaningful and simple to understand. They should communicate information to users without overwhelming them with too many details.<\/li>\n\n\n\n<li><strong>2D: Visual representations.<\/strong> Visual representations include typography, icons, and other graphics with which users interact. Visual representations usually supplement the words used to communicate information to users.<\/li>\n\n\n\n<li><strong>3D: Physical objects or space. <\/strong>Physical objects are a medium through which users interact with the product or service. For instance, a user interacts with computers and a mouse while sitting on a desk in an office space.<\/li>\n\n\n\n<li><strong>4D: Time. <\/strong>Time helps users understand visual changes in a UI; it also helps users track their progress.<\/li>\n\n\n\n<li><strong>5D: Behavior.<\/strong> Behavior includes both action and reaction. Behavior is what describes the mechanism of an interaction with a product.<\/li>\n<\/ul>\n\n\n\n<p>Interaction designers should utilize all five dimensions to consider the interactions between a user and a product in a holistic way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"getting-started-with-interaction-design\">Getting Started with Interaction Design<\/h2>\n\n\n\n<p>With <a href=\"\/products\/indigo-design\">Indigo.Design<\/a> from Infragistics, you can speed up innovation and time to market with a complete design-to-code system, which includes full support for interaction design. Indigo.<span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">Design is a digital product design platform that integrates UI prototyping, design systems, user testing,\u00a0<a href=\"https:\/\/www.appbuilder.dev\/\" target=\"_blank\" rel=\"noopener\">app building,\u00a0<\/a>and code generation to eliminate design handoffs and reduce costly iterations \u2014 enabling true UX design-development collaboration.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/cloud.indigo.design\/register%20\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/static.infragistics.com\/marketing\/Blog-in-content-ads\/IndigoDesign\/indigo-design-blog-ad.jpg\" alt=\"Indigo.Design\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is interaction design and what is the interaction design process? How does it compare to UX? Well, this article will provide the answers.<\/p>\n","protected":false},"author":81,"featured_media":1477,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":1962,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/286\/revisions\/1962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1477"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}