10 Steps to Interaction Design (IxD)
Guide and resources for first time interaction designers
交互设计的10个步骤
新手交互设计师的指南和资源
Learning new stuff is tough. But Interaction design is, rather, exciting!
学习新东西很难的一件事。 但是，学交互设计却又是令人兴奋的事情！
Are you transitioning from visual design, psychology or computer science or any other field (chemical engineering in my case) into Interaction design (IxD), UX or HCI? Then this post is for you. If your title is UX designer and you are still working on UI designs, this is for you too. I will touch base on various aspects which are close to IxD field. So let’s get started.
如果你是从视觉设计，心理学或计算机科学或任何其他领域（我的情况是从化学工程）过渡到交互设计（IxD），UX或HCI的吗？ 如果是那么这篇文章适合你。 如果你的职业是UX设计师并且你仍在从事UI设计，那么这也适合你。 我将从基于与IxD领域相近的各个方面进行入手。 所以让我们开始吧。
1. Understanding the basics -what is Interaction Design?
1.了解基础知识 - 什么是交互设计？
“Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices evolve with the world” — IXDA
“交互设计（IxD）定义了交互系统的结构和行为。 交互设计师致力于在人们与其使用的产品和服务之间建立有意义的关系，从计算机到移动设备再到家用电器等。 我们的做法随着世界的发展而发展” - IXDA
By interactive system, it means with every input added, there is an action or feedback associated with it. Hence this is the core difference between Interaction and Communication design that comm design doesn’t respond back when you interact (touch, wave, pinch, see, smell etc.) with it.
通过交互式系统，它意味着每增加一个输入，就会有一个与之相关的动作或反馈。 因此，这是交互和通信设计之间的核心差异，当你与它交互（触摸，波动，捏，看，嗅觉等）时，通信设计不会响应。
If you like reading books, I would highly recommend Dan Saffer’s Designing for Interaction. It lays out all the basics very clearly.
如果你喜欢阅读，我会强烈推荐Dan Saffer的为交互而设计。 它非常清楚地列出了所有基础知识。
http://www.designingforinteraction.com/designingforinteraction2_sample.pdf
Interaction Design is a part of Experience Design
交互设计是体验设计的一部分
The following small free Udacity course is a great point to start. Learn about basic terminologies and underlying base of IxD.
下面小型免费的Udacity课程是一个很好的起点。你可以学习IxD的基本术语和基础知识。
https://www.udacity.com/course/intro-to-the-design-of-everyday-things--design101
Here is another Udacity course in collaboration with Facebook:
这是与Facebook合作的另一个Udacity课程：
https://www.udacity.com/course/mobile-design-and-usability-for-ios--ud1034
2. Start noticing affordances, signifiers, feedbacks around you
2.开始注意你身边的功能可见性，示意符号和反馈
By now, I am assuming you would have gone through Don Norman’s Udacity course where he talks about affordances and signifiers…
现在，我假设你已经上完了Don Norman的Udacity课程，在那里他谈到功能可见性和示意符号......
Affordance: “Relationship between properties of an object and the capabilities of an agent that provide clues to the use of an object. Affordances must be perceivable / visible to be effective ”. Therefore, affordances are what an object can do. For e.g. a chair object can be picked, thrown at someone, dragged, inverted etc.
Signifier: “Any mark or sound, any perceivable indicator that communicates appropriate behavior to a person”. Therefore, signifiers indicates what the object should do, making the affordances clearer to the user. For e.g. the tires of the chair indicates it can be dragged. The arms of the chair indicates that I can rest my arms on them. The shape of the chair indicates that I can sit on it.
功能可见性：“对象的属性与其功能之间的关系，关系提供了使用对象的线索。功能可见性必须能够有效地被感知或识别”。 因此，功能可见性是一个对象可以做的事情。例如椅子这个对象可以被挑选，扔给某人，被拖，放倒等。
示意符号：“任何标记或声音，任何可感知的指示器，都在向人传达适当的行为”。 因此，示意符号传达了对象应该做什么，使得用户可以更加清晰使用功能。 例如椅子的轮胎表明它可以被拖动。 椅子的扶手表明我可以将手臂放在它们上面。 椅子的形状表明我可以坐在上面。
This world where you live is a gift from fine innovative craftsmen who worked for generations to make our lives easier. So examine this world around you; you will find many examples of affordances, feedbacks, signifiers, feedforward and system image (explained in Don Norman’s course) which we ignore in our day to day lives. Take pictures, as many as possible. This will make you a “curious” being — one of the most essential part of being an interaction designer. It helps generate new ideas for innovative products.
你居住的这个世界是来自一群精湛的创新工匠的礼物，他们世代相传，让我们的生活更舒适。 所以，审视你周围的世界，你会发现许多在日常生活中忽略的功能可见性，反馈和示意符号，前馈和系统形象的例子（在唐诺曼的课程中解释）。 尽可能多地拍照。这会让你成为一个“好奇”的人 - 成为交互设计师最重要的性格之一。 它有助于为革命性产品创造新的想法。
Listen what Don Norman has to say →
https://www.facebook.com/Vox/videos/855333381320932/
a) Good example of signifiers: Google Classroom’s buttons inviting us to click on them b) This door handle is a bad example of a signifier as it doesn’t tell if it needs to be pushed or pulled c) Good e.g. of feedback: A visual and haptic feedback when you enter wrong passcode
a）示意符号的优秀案例：Google Classroom的按钮诱导我们点击它们；b）这个门把手是功能可见性的一个差案例，因为它没有告诉它是否需要被推或拉；c）优秀的反馈案例：输入错误密码时的视觉和触觉反馈
A) Good e.g. of Fitt’s law: Majorly all google products follow Fitt’s law quite nicely i.e. you comfortably clicking on a document with mouse (on web) or finger (on phone). On right click, user can quickly reach out to all the associated actions B) In Bank of America app, the buttons are too thin that it needs more accuracy/effort from user to click
A）优秀的菲兹定律案例：基本上所有的谷歌产品都很好地遵循菲兹定律，即用鼠标（在网页上）或手指（在手机上）轻松点击文档。 在右键单击时，用户可以快速联系到所有相关操作；B）在美国银行应用程序中，按钮太小，需要用户更精确、更费力地点击。
Here you can learn more about UX laws:
在这里你可以了解有关UX法则的更多信息：
3. Every design starts with the research —
3.每个设计都从研究开始 -
When i say research, I mean understanding the system thoroughly. How to do that? —
当我说研究时，我的意思是彻底了解系统。 怎么做？ -
Browse: What is available on the internet about it, who is doing what or where is the market going.
浏览：互联网上有关它的信息，谁在做什么或市场会走向何方。
Observe: Are you trying to improve the coffee shop experience? Then visit that cafe. Are you trying to improve buying vegetables experience, then go to Walmart, Target. You cannot know the system by sitting at your desk. Understand the existing experiences. Take notes. Types of observation methods include Fly on the wall, Shadowing, contextual inquiry, undercover agent. Find more about them in Dan Saffer’s book mentioned in the beginning.
观察：你是否正在努力改善咖啡店体验？ 去那家咖啡馆。 您是否想要改善购买蔬菜的体验，前往沃尔玛，直达目标。 你坐在办公桌前无法了解系统。 了解现有的经验、做笔记。 观察方法的类型包括墙上的苍蝇，阴影，情境调查，卧底特工。 在文章开头提到的Dan Saffer的书中找到更多关于它们的信息。
Talk to people: You will gather insights which you have never expected before. The ‘aha’ moments. Keep the questions open ended. And try to keep the interview location where the interviewee is most comfortable at — where they work, live, eat etc. Keep it concise.
与人交谈：你将收集到你以前从未预料到的见解。 这就是'啊哈'时刻。 保持问题是开放性结尾。 并尽量将访谈地点保持在受访者最适合的地方 - 他们工作，生活，吃饭上网地方等。保持简洁。
A few methods include Directed storytelling, Unfocus group, Role playing, Extreme user interviews, Desk/purse/briefcase tour and 100 other ways…literally! To learn which methods should be used where, check out one of my favorite books:
一些方法包括直接讲故事，非焦点小组，角色扮演，极端用户访谈，书桌/钱包/公文包旅游和其他100种方式…要了解在哪里应该使用哪些方法，请阅读我最喜欢的一本书:
https://www.amazon.com/Universal-Methods-Design-Innovative-Effective/dp/1592537561
You can also read about the research methods in Dan Saffer’s book.
你还可以阅读Dan Saffer的书中的研究方法。
https://www.amazon.com/Designing-Interaction-Creating-Innovative-Applications/dp/0321643399
4. Analyze and Synthesize the research
4.分析和综合研究
This is the process of organizing and evaluating research data:
这是组织和评估研究数据的过程：
Immediately after the interview, review your notes.
访谈结束后，立即回顾你的笔记。
Get all the insights from your notes on sticky notes.
通过便签提炼笔记中的所有见解。
By now there would be a shitload of sticky notes. Now it is time to create some meaning out of this data. Start by finding relation between two insights. For e.g. In coffee shop research, two insights might say, “I like the ambience”, “i come here work everyday because it is quiet and has a slow music. Don’t feel like leaving”.
到现在为止，会有大量的便签。现在是时候从这些数据中创造一些价值了。首先找出两种观点之间的关系。例如在咖啡店的研究中，有两种观点可能会说，“我喜欢这种氛围”，“我每天都来这里工作，因为它很安静而且音乐很慢。使我不想离开”。
Start clustering the sticky notes. Look for insights with similarities. In coffee shop research example, one cluster might be based on “coffee shop ambience”. This is how you find patterns.
开始聚集起这些便利贴。寻找有相似之处的观点。在咖啡店研究案例中，一个数据组可能是基于“咖啡店氛围”的。这就是找到模式的方法。
Now generate one statement per cluster. For e.g. “People like going to XYZ coffee shop to enjoy the ambience”. This could be your clustered insight.
现在每个数据组生成一个语句。对于例如“人们喜欢去XYZ咖啡馆享受氛围”。这可能是你的集群洞察力。
For all these “statements” (clustered insights) now it is time to convert them into a particular form of question statement— “How might we…”. For e.g. “How might we provide better ambience experience to people coming to XYZ coffee shop”. This helps us generate ideas with an open mind with lesser biases. Read more here.
对于所有这些“陈述”（聚类见解），现在是时候将它们转换成特定形式的问题陈述 - “我们怎么可能......”。对于例如“我们怎样才能为来XYZ咖啡店的人们提供更好的氛围体验”。这有助于我们以开放的心态产生具有较小偏见的想法。在这里阅读更多。
Find all the methods mentioned in Dan Saffer’s book.
也可以在Dan Saffer的书中找到提到的所有方法。
5. Think from others perspectives
5.从别人的角度思考
Always think from the perspective of the customer/user/audience (or whosoever your design is for). Make this a habit. It will be helpful at every step of the process. If you are interviewing a patient, try to be in their shoes and feel their pain. Empathize with them. This is a great way to overcome our own life biases and build something FOR THEM. Apply this superpower in every aspect of your life.
始终从客户/用户/受众（或任何你设计服务的对象）的角度思考。 养成这个习惯，这将有助于在成为交互设计师中的每一步过程。 如果你正在采访一位病人，试着穿上他们的鞋子，感受他们的痛苦。 与他们产生同理心。 这是克服我们自己的生活偏见并为他们建立一些东西的好方法。 在生活的各个方面应用这个超级武器。
Are you building your portfolio? Think what if you were a recruiter, What would you need from a portfolio? How much time would you have per portfolio? What would you be feeling? etc.
你有在建立你的作品集吗？想想如果你是招聘人员，你需要从作品集中得到什么？你每个作品集需要多少时间？你会有什么感受？等等。
If you had an argument with fellow designer/developer, think what were they feeling in that scenario? What were you feeling (self-empathy)? What could have been their intention, your intention? What does that situation reflect about your self-image, their self-image? Next time, how could you have prevented it?
如果你与设计师/开发人员有争执，那么想想他们在那个场景中的感受是什么？ 你的感受是什么（自我同理心）？ 他们的意图可能是什么，你的意图又是什么？ 这种情况反映了你什么样的自我意象，他们什么样的自我意象？ 下次，你怎么能阻止它？
Watch this video to learn more on empathy
观看此视频，了解有关同理心的更多信息
https://www.thersa.org/discover/videos/rsa-shorts/2013/12/Brene-Brown-on-Empathy
6. Think in systems
6，在系统中思考
While paying attention to details, do remember to look at the bigger picture as well. Sometimes when we digging deeper into the details, we overlook how it affects other elements in our system. Whenever an action takes place, one way is to look back to the system structure and analyze what has changed in the system and which elements get affected by that.
在注意细节的同时，也要同时记住要看着更大的框架。有时，当我们深入挖掘细节时，我们会忽略它如何影响我们系统中的其他元素。 每当一个行为产生时，一个方法是回顾系统结构并分析系统中发生了哪些变化以及哪些因素受到影响。
You can read Meadows’ Thinking in systems or read this article that describes how to find the leverage points in the system to intervene.
你可以在阅读《Meadows’ Thinking in systems》或该文章，该文章描述了如何在系统中找到要进行干预的杠杆点。
《Meadows’ Thinking in systems》https://www.amazon.com/Thinking-Systems-Donella-H-Meadows/dp/1603580557
Article：http://donellameadows.org/archives/leverage-points-places-to-intervene-in-a-system/
Have a look at this video that explains how World Health Organisation (WHO) created even bigger problem while solving relatively smaller problem.
看一下这个视频，它解释了世界卫生组织（WHO）在解决相对较小的问题时如何创造更大的问题。
https://www.youtube.com/watch?v=17BP9n6g1F0
We also discussed how it is important to think from users perspectives. Now it is time to design for that! User conceptual models are a great way to consolidate all the ideas into a structure.
我们还讨论了从用户角度思考是如何的重要。 现在是时候该为此设计了！ 用户概念模型是将所有想法整合到结构中的好方法。
Conceptual models help us (designers) think what is necessary for the user to know about the product.
概念模型帮助我们（设计师）思考用户了解产品所需的内容。
Video：Conceptual Models: Core to Good Design
Check out the last two projects on my website to learn how to use conceptual models. My website includes various type of Systems design projects: Application systems, Feedback control systems, Dynamic systems, Automatic control systems, Product systems etc:
查看我网站上的最后两个项目，了解如何使用概念模型。 我的网站包括各种类型的系统设计项目：应用系统，反馈控制系统，动态系统，自动控制系统，产品系统等。
Author's blog：http://sohajsinghbrar.com/systems.html
7. Rapid prototyping — Secret of Innovation
7.快速设计原型-创新的秘密
Don’t prototype, but “pretotoype”. Get your hands dirty. Start with prototyping as early as possible. Some designers even start with prototyping along with the research. You can call sticky notes on top of a blank sheet as your “website prototype” and that’s fine! Point is, the quality doesn’t matter at this stage. Because your first draft is always wrong. But it will be quick and inexpensive which will give you authentic reactions. It’s the cheapest and most efficient way to test the ideas.
不是设计原型，而是设计“早期原型”。亲自快速动手吧，尽可能早地开始原型设计。 一些设计师甚至从研究开始进行原型设计。你可以把在白板上面的便签称为“网站原型”，这很好！重点是，现阶段好坏无关紧要。 因为你的初稿总是错的。但它因敏捷且轻量级，会给你真实的反馈。 这是测试这些想法的最划算和最有效的方法。
In theory, Interaction design follows a double diamond process . But in reality, its pretty much an iterative process. Therefore, the secret mantra of successful products is:
理论上，交互设计遵循“双钻石模型”的过程。 但实际上，它几乎是一个迭代的过程。 因此，成功产品的秘诀是：
Make something and learn from it, and learn something out of what you made and then remake from the learnings and so on…
做一些事情并从中学习，从你所做的事情中学到一些东西，然后从学习中重新制作，如此往返...
Watch these paper prototype and power of prototyping lecture videos by Scott Klemmer from the free course on Prototyping.
查看这些纸质原型和Scott Klemmer在免费课程视频中原型的力量。
paper prototype：https://www.coursera.org/learn/human-computer-interaction/lecture/78yeB/storyboards-paper-prototypes-and-mockups
power of prototype：https://www.coursera.org/lecture/human-computer-interaction/the-power-of-prototyping-25EPu
A millions tools that you can use: Pen/Paper (recommended), Sketch, Invision, Studio, Framer (my favorite), Figma, proto.io, Adobe XD, Marvel, UXPin, Keynote
你可以使用的成千上万的工具：笔/纸（推荐），Sketch、Invision、Studio、Framer（我最喜欢的），Figmaproto.io、Adobe XD、Marvel、UXPin、Keynote
8. Usertest — Show than tell
8.用户测试 - 展示胜于空谈
Obvious is not always obvious. We tend to get biased towards our designs. I have seen even the good designers to make the mistake of testing the prototype once it’s “ready”, and by “ready” they mean ‘clickable’. But usually, it’s already too late to test.
显而易见的并不总是明确可知的。我们倾向于我们的设计偏见。我甚至见过一些优秀的设计师在原型“就绪”后错误地对其进行测试，他们所说的“就绪”指的是“可点击的页面”。但通常情况下，这时测试已经太迟了。
Once it is on the paper, it is ready! And testing should happen throughout the design process. Create a flow — show it to the people, draw some sketches — show it to the people, create wireframes — show it to the people… At every step, take their authentic feedback. You will be learning a lot from them. “People” can be users, other designers, engineers, other stakeholders etc.
当它在纸上时，测试就已经准备好了！测试应该贯穿整个设计过程。创建一个流程 - 向人们展示，绘制一些草图 - 向人们展示，创建线框 - 向人们展示......在每一步中，都要采纳真实的反馈。你会在从中学到很多东西。 “人” 可以是用户，其他设计师，工程师，其他利益相关者等。
And I am a big fan of guerilla testing. It is a method of testing your product with people sitting alone in cafe’s, restaurants etc.
我是游击队测试法的忠实粉丝。 这是一种与在咖啡馆、餐馆中独坐一人测试的测试产品的方法。
Check out this article explaining how to do guerilla testing:
看看这篇解释如何进行游击队测试的文章：
https://medium.springboard.com/a-guide-to-the-art-of-guerrilla-ux-testing-69a1411d34fb
Also, have a look at this years old video of Jakob Nielsen, where he talks about how to conduct a simple test.
另外，看看今年雅各布尼尔森的视频，他谈到了如何进行简单的测试。
https://www.youtube.com/watch?v=r0A6IW2TFFI
9. The wonders of storytelling
9.讲故事的妙处
I cannot tell you how important this is. Storytelling is the key to success. Whatever success means to you…
我无法告诉你这有多重要。 讲故事是成功的关键。 无论成功对你意味着什么......
Our (users, designers, stakeholders, all humans, may be aliens too…) brains are wired to express our thoughts through this powerful tool of storytelling. This secret power extends to researchers, strategists and designers. Whether we (Interaction Designers) talk about doing research, creating the visuals, designing a prototype, making a video, or a client presentation or your own portfolio, we always…always need to tell a good story — a story that the audience can relate to, that can create a ‘conflict’ in their minds, that can make them wonder and eventually change their perspectives. I will talk more about storytelling in my next blog post.
我们（用户，设计师，利益相关者，所有人类，也可能是外星人......）大脑通过强大的叙事能力来表达我们的想法。 这种秘密力量延伸到研究人员，战略家和设计师。 无论我们（交互设计师）谈论做研究，做视觉效果、设计原型，制作视频，客户演示或自己的作品集，我们总是......总是需要讲一个好故事 - 一个与观众有关的故事，这能够会在他们的大脑中创造“冲突”，这会让他们感到好奇并最终改变他们的观点。 我将在下一篇博文中详细讲述讲故事。
Check out this amazing talk by David J Philip on storytelling.
查看David J Philip讲述这个讲故事的精彩演讲。
And watch this Ted Talk by Filmmaker Andrew Stanton of ‘Toy Story’.
观看由电影制片人安德鲁斯坦顿撰写的“玩具总动员”的特德谈话。
https://www.youtube.com/watch?v=KxDwieKpawg
So, how do you tell story in non-fiction work life?
那么，你如何讲述非小说作品中的故事呢？
Read this awesome book Story Craft by Jack Hart and read on hero’s journey. Here is amazing article describing different ways of building a narrative arc:
阅读杰克哈特这本精彩的故事书，阅读英雄的旅程。 这篇精彩的文章描述了构建叙事的不同方式：
https://www.sparkol.com/en/Blog/8-Classic-storytelling-techniques-for-engaging-presentations
10. Collaboration is the key
10.合作是关键
Collaboration is another form of interaction design where the interaction is between human to human.
协作是交互设计的另一种形式，其中交互是人与人之间的交互。
And from my experience I have learned that talent can only take you to a certain level. But with good collaboration and communication skills, sky’s the only limit. I personally used to focus lesser on this aspect. Hence my performance was plummeting in group projects even though I was doing pretty well in the solo projects. And btw, most of the projects in any company are within teams.
根据我的经验，我了解到天赋只能帮你到一定程度。 但凭借良好的协作和沟通技巧，天空是唯一的限制。 我过去常常很少把注意力集中在这方面。所以，即使我在单独行动中做得很好，但我的表现在小组项目中直线下降。 顺便说一句，任何公司的大多数项目都在团队中。
In such situations, we justify the situation explaining ourselves that co-worker has shallow subject knowledge or their egoistic nature is the hinderance. That’s what many of us think. But, fortunately, it’s never anyone’s ‘mistake’ rather it’s our inability to interact and collaborate with each other that we feel unsuccessful or exhausted. Which we can learn. How?
在这种情况下，我们理所当然地认为这种情况，即自己同事具才疏学浅或者他们的自私自利是我们的阻碍。 这就是我们许多人的想法。 但是，幸运的是，这绝不是任何人的“错”，而是我们无法与我们感到不成功或疲惫的彼此互动和协作。 我们可以学到什么。怎么做？
Pay attention to what teammates are saying. Listen to them. Think from their perspective. Give importance to their opinions. Sometimes you need to sacrifice your good ideas for the greater good of the team. Time is the key, you cannot do everything on your own, at least not as fast as a collaborative team would. 1+1=11
注意队友说的话。听他们说。从他们的角度思考。重视他们的意见。有时你需要为了团队的更大利益而牺牲你的好主意。 时间是关键，你不能自己做所有事情，至少没有无法像协作团队那么快。1 + 1 =11
So, if you are a designer, you need to design, not only your product, but also your methods of communication with others.
所以，如果你是一名设计师，你不仅需要设计产品，还需要设计与他人沟通的方法。
The trouble is, we think we still have time.
麻烦的是，我们认为我们还有时间。
Design your life
设计你的生活
Use these methods and apply them not only in your work, but personal life and growth. Think how can you prototype your life. These days with free internet, it is super easy to learn basics about any field all by yourself. Do that! Learn coding online. See if it excites you. Build something and see if this is something you want to pursue. If not, discard. Learn something else, say, neuroscience, or electronics or business models or taekwondo or snooker or painting. Life is too short to not enjoy it!
使用这些方法，不仅适用于你的工作，还适用于个人生活和成长。 想想你怎么能为你的生活做好准备。 如今，通过免费上网，您可以自己学习任何领域的基础知识。 开始吧！ 在线学习编码。 看看它是否让你兴奋。 设立一些东西，看看这是否是你想要追求的东西。 如果没有，丢掉。学习其他东西，比如神经科学，电子学或商业模式或跆拳道或斯诺克或绘画。 人生苦短，何乐不为！
I understand that it is difficult to digest all this information in one go. No worries at all, take your time and go through all the references step by step. Things will slowly start to make sense. And practice is the only thing that would make you better. So, always challenge yourself with new problems and implements these new tricks and tips to get a better hold at Interaction Design.
我明白，很难一次性消化所有这些信息。 不用担心，花点时间一步一步地完成所有资料。 事情会慢慢开始变得有意义。而练习是唯一可以让你变得更好的东西。因此，总是带着新问题挑战自己，并用上这些新的技巧和技巧，以便更好地掌握交互设计。
I hope you learned something new today. See you next time.
我希望你今天能学到新东西。 下次见。
Be humble, be curious!
保持谦虚，保持好奇！
小彩蛋：感谢你阅读到文章的最后，获取更多国外优秀设计第一手资讯，请关注微信公众号：包你嗨设计英语学习社区
视觉设计师 交互设计师
4
作品
13
粉丝
7
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册