火车站的售票机相信我们大部分人都使用过，你觉得体验如何，对用户友好吗？本文中的作者来自荷兰，他同样遇到了售票机体验不佳的问题。于是，他花了5天的时间，体验产品——了解问题——观察用户——画设计图——测验，将售票机的界面进行了重新的设计。虽然这只是一个人参与，为期5天的小项目，我们从中还是可以学到作者很多好的思路。
我最近在国外生活了一年之后回到荷兰。回国后，我再次遇到了NS自动售票机。一般来说，NS的数字产品看起来都还不错，但它在火车站的售票机却是个例外。对于我这个经验丰富的用户而言，它们可以很好地工作，但问题是我不喜欢使用它们。它的界面很实用，但已经过时了。由于我现在住在旅游区，我经常看到人们为如何使用它而苦恼。因此，上周我利用业余时间来看看我是否可以在5天的设计冲刺中改善系统的用户体验。
当前系统
每个火车站都有NS的自动售票机，旅客可以买火车票或给公交卡（OV卡）充值。它的界面由一个非常基本的垂直菜单结构组成，当你进入菜单的最深处时则会在右侧添加一列。如果你知道怎么使用它，它就能起作用，只是画面有点过时，但新用户会因为这个系统很头疼。由于缺少信息，界面的某些元素很容易被忽略。我的预测是，人们现在习惯使用现代的触摸界面，使得思维模式发生了变化。
了解问题
我想了解我的预测是否正确，以及用户在使用机器时是否遇到了其他问题。为此，我先深入地体验了售票机的使用，以分析使用该系统时发现的问题。之后，我去了阿姆斯特丹中央火车站观察用户。
产品体验
首先，我习惯在一台机器上亲自查看问题所在。我测试了许多用例，写下了我遇到的问题：
- 给我的公交卡充值
- 在我的公交卡上增加携带自行车的许可
- 查看我的交易记录
- 购买去阿姆斯特丹的火车票
- 购买匿名公交卡
结果
我们首先谈谈优点。对于像我这样经常使用这种机器的人来说，它的结构没有任何问题。界面非常简单，没有任何复杂的图形或动画，因此大多数交互都可以非常快速地完成。而且也很容易记住按钮在屏幕上的位置，因此可以轻易学会重复的操作。
但是，这个界面假定人们在使用系统之前就确切地知道他们想做什么以及应该怎么做。例如，购买匿名公交卡的选项隐藏在“其他产品”下，按下该按钮还会显示除公交卡以外的 “其他产品”的图标。我以前从来没买过匿名公交卡，所以很难在界面中找到它。
另外，目标电台的搜索功能假定人们知道如何拼写每个电台，并根据每个电台的首字母进行工作。因此，当尝试查找Amsterdam Lelylaan时，必须输入“ AM”，然后系统隐藏键盘并显示以“ Am”开头的14个电台。键入’Lely’不可能找到Amsterdam Lelylaan，这会让搜索范围进一步缩小。
此外也很容易忽略元素。通常，屏幕会显示额外的信息，这些信息写在按钮下方，但必须插入到狭窄的菜单中。在其他情况下，文本写在屏幕的一角，很容易遗漏。例如，您的公交卡的信息显示在右上角，但您的眼睛却被吸引到左侧的菜单选项。
这些按钮都很窄，因此，按钮中的文本经常被缩写，这使低文化程度的用户感到困难。
由于菜单结构的分组和限制，很难注意和理解重要的文本
我主要的问题还是不喜欢使用该系统。它的视觉效果非常基础，每按一次按钮，机器都会发出很大的声音。界面只使用两种颜色——亮黄色和蓝色（NS的公司颜色）——颜色非常鲜明，这点非常棒，但问题是只有交互式的蓝色按钮能吸引我的注意，很难注意到其他元素。除此之外，信息被最低限度地分组，而不是聚集。我花了一段时间才弄明白我是否进入了主页面，因为它只在黄色背景上简单写了一行，还隐藏在菜单对面的一角。
另一个示例是路线页面。为单程票或往返票选择目的地后，界面将显示您可以采取的可能路线。但是由于设计语言的缘故，所有这些文字均以黄色背景呈现，难以阅读。
但是，之后屏幕上显示了票证的详细信息，这个页面看起来非常现代化且设计很合理。它给我的印象是他们正在开发新设计，但还没有实现所有界面。
两个界面之间的比较
我觉得还可以减少每个动作的步骤数量，特别是对于经常执行的操作，例如为公交卡充值。
显然，售票机的设计重点是可用性。但结果却让它和NS精心设计的网站和应用程序形成了鲜明的对比。这可以理解，因为售票机必须让任何人都能使用，包括对数字系统零经验的人，外国人，残疾人等。但是我想知道是否有可能在可用性和漂亮的设计之间找到平衡。
观察用户
接下来，我去了阿姆斯特丹中央车站，问人们在使用该系统时是否可以观察他们。我观察了18人，其中11人是经验丰富的用户，其余人则没有经验，包括5名游客和一对老年夫妇。
有经验的用户
正如预期的那样，大多数有经验的用户都没有遇到任何问题。最常见的任务是为公交卡充值。大多数人似乎都在赶时间，并且在这之前已经用过很多次售票机。因此，他们知道该怎么做，并且常常对机器的响应速度感到不满。
此外，对于可以在网上或应用程序中做什么，以及可以在机器中做什么，他们存在一些困惑。最后，该界面似乎没有提供清除按钮以退后一步。结果，用户过于频繁地返回主菜单，并且不得不多次扫描其公交卡，才能继续返回公交卡菜单。
我问了一些用户了解他们对系统有什么看法，他们的意见基本相同：该系统运行良好，但还可以更快，而且它看起来已经过时了。
没有经验的用户
大多数游客购买了单程票或来回票，或者试图查找信息。显然，他们在使用售票机时有更多的疑惑，但总的来说，他们可以很好地完成任务。
尽管如此还是有一些改进点。首先，搜索目的地的界面有所限制，你只能通过键入电台的前两个字母来找到目的地，这对游客来说很难。有一个筛选机场的按钮，但总是被忽略。主菜单屏幕上有前往史基浦机场的旅行者按钮，这对旅行者有很大帮助。但是对于其他目的地，使用这台机器可能会遇到一些麻烦。例如，有一对游客夫妇想去海牙，但他们却不知道该怎么拼写。
对于第一次在荷兰使用公共交通工具的人来说，这台机器缺少很多信息，因此他们不得不向NS的一名雇员寻求帮助。该机器几乎不提供任何信息，并假定人们在使用它之前就知道他们想要什么。除此之外，唯一可用的语言选项只有荷兰语和英语。荷兰接待了许多来自法国，德国和其他国家的游客，这些国家的居民并不总是会说英语，因此这些人在使用该系统时更加费劲。
总体而言，该设计冲刺中未解决但仍很有趣的一些技术错误。例如，水龙头有时没有注册。按钮发出了视觉反馈，表明它按下了一个按键，但是没有发出哔声。在那种情况下，什么也没发生，用户不得不再次按下。另外，NS具有三种不同的售票机，它们之间的视觉区别太小。因此，新用户对此感到非常困惑。这些机器也不支持非接触式支付，这也使得交互时间也很长。
还有一些有意思的技术错误在这个设计冲刺中不会被解决。例如，有时点击没有反应。从按钮得到的视觉反馈是按下了，但没有哔哔声，什么都没有发生，用户不得不再次按下。另外，NS有三种不同的售票机，它们之间的视觉区别很小，让新用户很困惑。而且这些机器也不支持非接触式支付，这使得交互流程非常长。
目的
显然，一周内不可能对整个系统进行完美的重新设计，因此我根据观察和体验为自己设定了一些希望通过此设计冲刺实现的目标。
- 为有经验的用户提高系统速度
- 为经验不足的用户提供更多信息和帮助
- 在美观的设计和可用性之间找到平衡
这些目标关注的重点是买票和充值公交卡，因为这些内容涵盖了与机器的大部分交互。其他交互不在该项目中。
草图和线框
考虑到这三个目标，我开始草绘新的界面和工作流程。我有几个想法，其中之一是设置一个按钮快速为您的公交卡充值。这个按钮能将用户直接从第一个菜单转到结帐，这适用于在赶火车之前想快速充值的人。
接下来，我想减少按钮和界面的数量，例如，创建一个页面将所有产品添加到公交卡中，而不必进入单独的菜单分别进行充值和添加附加项。此外，在结帐界面中，用户无需按按钮即可选择付款方式。
我还添加了清晰的返回图标，用户就不会因为被赶出公交卡界面而需要再次扫描公交卡。
接下来，我想为新用户提供更多信息和语言选项。因此，主屏幕上有一个新的信息按钮，用户可以在其中找到有关荷兰公共交通系统的基本帮助，并且每个菜单项都有一个小的帮助按钮，用于显示信息。
最后，我改进了查找火车站的搜索功能，使搜索更加智能，并且允许用户键入目的地名称的任何部分，而不是前两个字母。
基本界面草图
画了几个草图后，我确定了基本布局，因此我转到了Sketch来创建线框。
3种方案的线框
我更改了主屏幕界面，让它增加了一个选项。我将选择购买匿名公交卡的选项移到了“其他产品”菜单的外面，因为我可能永远找不到它，而且我发现其他人也有这个问题。接着，我添加了一个大按钮用于语言选择和信息展示页面。
购买单程票的过程和往返票的非常相似，但是我做了一些重要的更改，试图将相关信息进行分组。因此，用户将先选择目的地，接着选择路线，然后他们可以更改变量并添加补充项。在每个步骤中，我都致力于使信息更具可读性，这在用户必须选择路线的屏幕中尤为明显。
旧系统的结构清晰，左侧有一个菜单栏，将每一步操作都折叠了起来。但我选择使用带有清晰的后退按钮的单独页面，并在顶部显示每个步骤。因此，用户始终可以返回上一步或选择他们想返回的步骤。
在当前系统中，隐藏了某些选项（例如旅行日期）。因此，我想创建一个包含所有选项的界面，以便用户快速了解他们可以更改的所有选项。每组选项都有一个按钮，以获取更多信息。
将产品添加到公交卡的过程非常不同。我保留了基本布局，并在左侧留有菜单。但是每个菜单项都会打开一个单独的页面，而不是一个新菜单。
菜单的当前结构（左）与新的单页面布局（右）
售票机的最重要特征是它必须对社会的每个成员都是可用的。这意味着对技术零经验的人文化程度较低的人，以及残疾人等都应该能够使用它。我采取了一些措施来确保做到这一点。
在整个界面中，我试图将所有按钮都放在屏幕的下半部分，以改善轮椅使用者的使用体验。我为外国人和文盲提供了尽可能多的图标。
接下来，我试图找到一种更好的配色方案。当前机器使用亮黄色背景和蓝色按钮，这是非常强烈的。在创建配色方案时，我受到了NS颜色的启发，但也想创建一个舒适的外观。我决定交换当前系统的颜色。根据颜色心理学，蓝色是一种令人愉悦的颜色，因此我希望背景使用蓝色阴影，而交互式元素使用较亮的颜色。因此，我加入了三种蓝色阴影，其中包括深色的NS蓝色（将用作背景色）以及白色和黄色的阴影（用于交互元素）。
右边的三种颜色来自新的NS Sprinter火车配色方案
创建原型后，我测试了这些颜色，以了解他们能否适用不同类型的色盲症状，以确保界面可读。
各种色盲类型所见的界面
结果
接下来，我使用InVision绘制了3种场景：
- 购买从马斯特里赫特（Maastricht）到阿姆斯特丹Lelylaan的火车票+需要更多附加项信息
- 收取公交卡5欧元和自行车附加费
- 快速向公交卡充值20欧元
新界面
评价
我使用InVision原型对来自不同年龄段，国籍和背景的7位用户进行了用户测试。根据结果，我做了一些小的更改，这些更改已包含在新原型中。例如，我添加了更多图标并更改了某些按钮的名称。
显然，界面还远没有完成，但这不是设计冲刺的目标。我想按照5天的完整设计周期进行操作，以创造更好的用户体验。我关注的是最常见的用例：购买火车票和充值公交卡，并尝试实现三个目标：
- 为有经验的用户提高系统速度
- 为经验不足的用户提供更多信息和帮助
- 在美观的设计和可用性之间找到平衡
用户在测试期间做出了积极的反应，并表明实现了这三个目标。有经验的用户可以更快地将产品添加到公交卡中。新用户更容易找到某些产品。所有用户都更喜欢新界面。
编译作者：叶苏 | 纽约 | 数字媒体研究生
原文作者：Justin Baker
原文链接：https://medium.muz.li/haptic-ux-the-design-guide-for-building-touch-experiences-84639aa4a1b8
