交战的原因 (Casus belli)

Let’s start from the context: I was working as a UX/UI designer for a medical company that produces a sensor bracelet to sync with an app.Medical device companies have to meet FDA expectations and, for this reason, there are some rules that they have to follow and meet. HFE (Human factors engineering) is one of those and it’s more than a regulatory imperative: it allows to create safer products that better serve the users. The risk, if you underestimate the attention to meeting FDA human factors requirements, is to lose the market access.

让我们从上下文开始：我当时是一家医疗公司的UX / UI设计师，该公司生产传感器手环以与应用程序同步医疗设备公司必须满足FDA的期望，因此，他们有一些规定必须遵循和见面。 HFE(人为因素工程)就是其中之一，而不仅仅是法规要求：它允许创造更安全的产品，更好地为用户服务。 如果您低估了对满足FDA人为因素要求的关注，则可能会失去市场准入权。

Last November (2019), for one of these HFE usability test, I had to prepare a prototype as real as possible…and I didn’t have so much time to find the tool, learn how to use it and build the prototype. (Ideally in this situation you should use a “prototype” developed by the developers, at that time, the development team was very busy and there was no time and no way to involve them.)

去年11月(2019年)，对于这些HFE可用性测试中的一个， 我不得不尽可能地准备一个真实的原型 ……而我没有太多的时间来寻找该工具，学习如何使用它并构建该原型。 (理想情况下，您应该使用开发人员开发的“原型”，当时，开发团队非常忙，没有时间，也没有办法参与其中。)

准备阶段 (Preparation Phase)

Goal: Build an Hi-Fi Prototype (the users don’t have to understand that it’s a prototype).

目标：建立一个Hi-Fi原型(用户不必了解它是一个原型)。

Steps:

步骤 ：

1. Requirements for the prototype: The product manager (Thank you Laurene!) gave me the scope and all the requirements for this usability test, so it was pretty clear to me what needed to be tested and all the screens I had to prepare.

   原型要求：产品经理(谢谢劳伦！)为我提供了此可用性测试的范围和所有要求，因此对我来说很清楚需要测试什么以及必须准备的所有屏幕。

   Requirements for the prototype: The product manager (Thank you Laurene!) gave me the scope and all the requirements for this usability test, so it was pretty clear to me what needed to be tested and all the screens I had to prepare. Tip: when you prepare a prototype be sure to have made clear in advance all the steps that need to be tested, what the user needs to do with every screen.

   原型要求：产品经理(谢谢劳伦！)为我提供了此可用性测试的范围和所有要求，因此对我来说很清楚需要测试什么以及必须准备的所有屏幕。 提示：在准备原型时，请务必事先弄清楚所有需要测试的步骤，以及用户需要在每个屏幕上做什么。

2. Identify the most difficult part of the prototype: I detected the trickiest part of the prototype which was a checkbox list that, once all the four checkboxes are checked, enable a button that allows the user to go further. And of course, if the user unchecks one of the checkbox randomly the button becomes disabled again (I know this sounds trivial for a developer but as a designer is not that easy to build such an interaction).

   确定原型中最困难的部分：我检测到原型中最棘手的部分，这是一个复选框列表，一旦选中了所有四个复选框，便启用一个按钮，使用户可以走得更远。 当然，如果用户随机取消选中其中一个复选框，则该按钮将再次被禁用(我知道这对开发人员来说是微不足道的，但是作为设计师，构建这样的交互并不容易)。

   This is an important passage because if I could have done that, everything else would have been easier…and it was also a way to test the tools faster by just focusing on that one step.

   这是一条重要的段落，因为如果我能做到的话，其他所有事情都将变得更容易……而且这也是通过仅关注这一步骤来更快地测试工具的一种方法。

   Psssst! At the end of the article you can see this specific interaction at work!

   s！ 在本文的结尾，您可以看到这种特定的交互作用！

3. Define the key requirements for the tool:- not so steep learning curve

   定义该工具的关键要求： -学习曲线不那么陡峭

   - it must allows me to create an hi fi prototype with a lot of interactions

   -它必须使我能够创建具有很多互动的高保真原型

   - it should allow me to use the final prototype on iOS and Android devices (Why? Because during the HFE usability test, the users had to use the operating system to which they were most familiar)

   -它应该允许我在iOS和Android设备上使用最终的原型(为什么？因为在进行HFE可用性测试时，用户必须使用他们最熟悉的操作系统)

4. Tool Research: up until then I had only used Invision (and a little bit Principle) to build prototypes. After having confirmed that with Invision, creating the checkbox interaction would have been too complicated (!!!I should have created a different screen for each type of combination!!!) I started my research to find the right tool.

   工具研究：在此之前，我仅使用Invision(还有一点原理)来构建原型。 在确认使用Invision确认之后，创建复选框交互会太复杂了(！！！我应该为每种组合类型创建一个不同的屏幕！！！)，我开始研究以找到合适的工具。

尝试工具 (Trying the tools)

In 3 / 4 days I tried a loooot of tools: with almost all of them I built (or at least try to build) the tricky interaction explained above — I say “almost” because some of them I discarded after a few minutes of use (when you don’t have a lot of time, you also have to trust your gut feeling).

在三到四天内，我尝试了很多工具：我几乎用所有工具构建(或至少尝试构建)上面说明的棘手的交互作用-之所以说是“几乎”，是因为使用了几分钟后便丢弃了其中的一些工具(当您没有很多时间时，您还必须相信自己的直觉)。

Here below you can see a comparison. Psssst!I’m more than happy to hear your opinion about it, especially if you are a super user of one (or more) of these tools.

在下面您可以看到一个比较。 我很高兴听到您对此的看法，特别是如果您是这些工具中一个(或多个)的超级用户。

This one below is another chart based on the learning curve and the interactivity:

下面的这个是基于学习曲线和交互性的另一张图表：

最后我选择了哪一个？ 原型！ (Which one I chose at the end? ProtoPie!)

Considering my requirements, ProtoPie was the best option for me. Some reasons?

考虑到我的要求， ProtoPie是我的最佳选择。 有什么原因吗？

• You can manage variables and formulas.

  您可以管理变量和公式。

• It’s quite intuitive (maybe for difficult interaction that have variables you need a little bit more time but complex things require more time, always).

  这是非常直观的 (对于具有变量的困难的交互，您可能需要更多的时间，而复杂的事情总是需要更多的时间)。

• Can I say it? It’s even fun.

  我可以说吗？ 真有趣。

• It has a fast and easy way of sharing (for both iOS and Android).

  它具有快速简便的共享方式 (适用于iOS和Android)。

• It allows designers to use device sensors.

  它允许设计人员使用设备传感器。

• Using the mirror app you can save the prototype you did on your device to use it offline (this is useful during a usability test).

  使用镜像应用程序，您可以保存在设备上所做的原型，以供离线使用(这在可用性测试期间非常有用)。

• You can hide hotspots (which sounds trivial but some of the tools mentioned above don’t have this option)…

  您可以隐藏热点 (听起来微不足道，但上面提到的某些工具没有此选项)…

I can continue but I’ll stop. As I said in this article, adding a new tool in a workflow it always a decision that needs to be thoughtful and it’s important that you have clear what you really need before starting building a prototype: sometimes even a paper sketch is enough.

我可以继续，但我会停下来。 就像我在本文中所说的，在工作流程中添加新工具总是需要考虑周全的决定，并且在开始构建原型之前必须弄清您的真正需求很重要：有时甚至是纸本草图也已足够。

And now, finally, it’s time to see the trickiest interaction of my prototype at work! (I faked the copy because for regulatory reasons I cannot show the real one):

最后，现在是时候看看我的原型在工作中最棘手的交互了！ (我伪造了副本，因为出于监管原因，我无法显示真实副本)：

Now if I need to build a basic prototype where I can navigate between screens and maybe scroll the content I use Invision. In case I need to add some micro-interactions I go with Principle or ProtoPie. And when I have to build a complex prototype with interactions, variables and dependencies I definitely use ProtoPie.

现在，如果我需要构建一个基本的原型，可以在屏幕之间导航并滚动内容，则可以使用Invision。 如果需要添加一些微交互，我可以选择Principle或ProtoPie。 当我必须构建一个具有交互性，变量和依赖性的复杂原型时，我肯定会使用ProtoPie。

Here below some interesting links if you want to go deeper in the topic:

如果您想深入了解本主题，请在下面找到一些有趣的链接：

✨Since I’m a big fan of gratitude, I want to thank (very, very, very much) the people I worked with — especially for this project Laurene (a very talented product manager who supported and helped me with the specs) and Gabriela (also a super smart technical product manager who helped me understand some “logical steps” with ProtoPie): thank you! ✨

✨ 由于我非常感谢，所以我想(非常非常非常感谢)与我一起工作的人们，尤其是在这个项目中Laurene(非常有才华的产品经理，他为我提供了规格方面的支持和帮助)和Gabriela(也是一位超级智能技术产品经理，他帮助我了解了ProtoPie的一些“逻辑步骤”)：谢谢！ ✨