几周前，我和家人一起去麦当劳吃午餐，在店里安装了三台自动点单机。我父亲和哥哥使用点单机订餐，我在旁观察他们使用。他们在浏览菜单导航时就遇到了问题，尤其是在选择食物的时候。接下来我将把他们在点单和付款过程中遇到的问题一一解析。

问题 😠

1. 餐食展示及选择

选择过程涉及屏幕左侧的旋转木马式导航。幸运的是，当用户知道信息超出屏幕所能承载的内容，就开始通过向上滑动（向下滑动）以便查看更多选项，但没有任何提示内容是可以滚动的。

2. 个性化选项

很显然，这是最困难的部分。当选择汉堡或是套餐之后，你是可以自定义汉堡的规格大小和种类以及配餐和饮料的类型。当我父亲想更换一种饮料的时，并未找到他想要的那一款，只因他只看到 6 个选项。最后只能换成我来帮他点单，向上滚动后，找到了更多的选项。当我这么做的时候，他感到很惊讶，完全没想到还可以有这种操作。除此之外，这个机器也不能提供把套餐里赠送的玉米换成薯条的选项（不过我猜是因为他们是没有更新菜单）。

3. 付款方式及流程

这是所有流程中的最后一步。我发现，这里所提供的支付选项很奇怪，有两个选项：使用机器付款或在柜台人工付款（传统方式）。我们完全没有理由去柜台人工付款，毕竟我们刚刚是在点餐机订购的。然而很有趣的是，我父亲选择了“柜台付账”，实际上这有引发了另一个有趣的体验问题。在他选择该选项后，屏幕显示让我们取个号码牌。我们以为这就是我们的订单号，工作人员会根据这个号码给我们配餐。但是我们错了（不完全错误）。屏幕显示我们的号码是 53，而我们的号码牌又是 175 ，这十分有误导性。付款后，我们收到一张收据，上面有除上述说的号码之外的第三个号码：157。我们大概等了差不多45分钟才吃上东西。对于一个快餐连锁店来说，这并不是一次好体验，实施新的点餐和支付系统服务反而降低了效率，这还蛮讽刺的。

4. 餐号呼叫系统

在快餐店里人们习惯了在几分钟内等待餐食准备，然后就能自己去柜台取餐。而系统提供的服务是让客人坐在座位上等待，工作人员会根据号码牌给你送来餐饮。然而最后还是工作人员喊餐号让客人去取餐。而且这个号码牌又和真正的订单号不一样，两种不同的号码系统同时在运作，如果我没仔细分辨的话，我就得不到我点的餐。

5.桌号输入

在付款之后，系统会要求我们获取一个桌号，然后把桌号输入进系统

...

研究 🔎

我主要使用的方法就是观察。我父母和我哥哥是我主要研究的角色之一。我也观察其他人如何使用这个系统。我发现，有些人1次只订购1件商品，就不会有大问题，都还比较流畅。当他们想多订购几件商品的时候，问题就出现了，发现很难回到上一步，这是也是我们订购是所面临的问题。有些人仍然会选择“柜台付款”，但最终他们仍需要在柜台前再排一次队，等待收银员到达（是的，有的时候收银员甚至不在那里等你来付款）。

第1次 现场调查

我哥和父亲第一次体验点餐系统。

第2次 现场调查

一周后，我去另一家麦当劳，观察了其他用户的行为。

这家门店甚至需要一位工作人在点餐机旁待命，协助客户操作系统，以防客户使用系统产品混乱。

第3次 实地考察

第二天，我和我母亲去了同一家麦当劳门店，但这一次我自己测试了这个点餐系统。而她在旁帮忙将整个过程录影下来（这既有趣也很能帮助洞察问题）。

分析 💭

用户画像

用户故事板

这是一个我根据上面两个人物角色创建的故事板。这个故事里的人物的名字叫做 Jhen。

构思和草图 ✏️

在我开始勾勒菜单选项之前，我在 google 搜索快餐行业可使用的机器点餐系统情况，发现 KFC 也将实施。我没有找到任何关于如何使用系统的视频，但我找到了一个关于麦当劳推广他们点餐系统的宣传短片。有一位服务员指导客户如何使用这个系统。

定义主要需求

1. 清晰的选择食品，如何清晰组织商品分类
   
2. 食物个性化搭配，如何简化操作和选项
   
3. 用户返回上一步或主页，如何优化导航指示
   
4. 节省客户等待时间，如何加快结算效率
   

低保真线框图 📝

根据所绘制的草图，我提出一些订购流程的线框图。以便让用户感觉更舒服，更加美观。这也会帮助我识别整个流程中的问题并进行优化。

测试和迭代线框图

我创建了更多相同类型操作版本来进行比较

1. 主菜单

2. 食物种类选择的展示

3. 甜品／配餐的选择

4. 食物信息界面

5. 饮料个性化选择

主菜单比较

我将“完成(Done)”菜单去掉了，因为它并没有承载任何有意义的动作。只有在更新订单、加入列表的情况下，该菜单才会出现。

食物种类选择展示方式比较

更加有组织，而且更注重用户新划动出来的选项。

甜品／配餐的选择

做了3个版本，最后我选择第三个版本（最右）。因为左边2个都有太多不必要的空白，客户看不见其他内容可以选择。

食物信息界面

左侧图示，和目前麦当劳门店使用的界面一样。我认为继续使用不更改也没有问题，直到我进一步测试并意识到这里根本不需要2种不同类型的按钮（定制 customize／修改 change options），来引导客户去 2 个不同的页面，其实都可以引导至同1个界面。

于是我把这2个按钮合并成了1个，去掉了修改按钮，留下了定制按钮。点击后，新弹出的界面都可以调整尺寸和细节选择。

饮品个性化选择

（在设计高保真图时，这个想法最终被废弃了）这个部分是我最新设计的该界面，是所有版本里最流畅的。

在之后的高保真原型图设计中，最初的线框图被废除是因为它并不支持饮料的温度选择，并且中间有过多的页面过渡。新版本的设计使得用户可以在一个界面里完成所有的饮料个性化选择。

...

高保真设计图 🖥

我从麦当劳官方网站中汲取主题颜色，并以此设计了一个新的样式。在整个高保真原型图稿过程中，我所使用的软件是 Sketch，然后导入到 Figma（共享原型更容易）。

由于我找不到比较好的“堂食（Dine In）”／“打包（Take Away）”的图标，我只好自己用 Sketch 画了一个。另外，我把“语言选择”选项移到了最右上角。

主界面／餐品选择

我把单个餐款用卡片的形式表达，并且给被选中的项目添加了黄色高亮边框。此外，我也在屏幕右上角添加了一个搜索栏。

饮品个性化选择

如我之前所提到的，这个部分完全替换之前低保真所看到的版本。客户将会看见他们预选的饮品，并可以随心改变选择另外一个。随后有一个确认按钮出现，以表明发生了变化。

甜品／配餐选择

当客户只想点甜品或者配餐的时候，他们就不会看见一大堆没有必要出现界面。他们只需要选择他们想点的餐食，因为有些餐食并不需要任何个性化选择。

订单列表&付款选项

为了能表达更加清晰的信息，我改变了一些按钮上的文字。我也把付款列表重新组织分类了，这样就能让用户更清晰意识到有哪些可能的动作会发生。

完成界面（打包或堂食）

堂食体验的再设计

我重新设计的堂食订单界面与目前麦当劳系统里的界面完全不同。我把“用户得到一个桌牌号码，再输入回系统”的流程改掉了。

我意识到，其实麦当劳可以设计一个餐桌号码系统，系统会自动的跟踪这些号码，这样用户只需要在他们的餐桌上等待，当他们的号码牌开始呼叫，用户就可以去柜台取餐了。

这个新出炉的系统去掉了让用户输入桌号进系统，让工作人员送到餐桌的流程（因为当人满为患的时候，效率会更低）。最后定稿的版本附在这里: McD Kiosk System。

...

学习总结 😎

1. 在设计过程中每个阶段进行反复测试和迭代——根据用户画像和故事板，对于如何解决现有的体验问题，我一开始觉得我的想法还不错。最初我预想新版设计会非常的流畅。但其实到最后，我边做草图边更改了很多东西，从低保真到高保真，基本上整个过程都有各种变动。
2. 建立设计环境的重要性——完成低保真原型图后，我并没有立马动手开始制作高保真原型图。动手之前，我先对颜色和字体的使用做了一些搜索和研究，再对整个系统的风格做了一个设计规范准则，这样为我后面的设计提高了很多效率，节省了很多修改的时间。

可以改进的事情 🤔

1. 更好的搜索／研究方式——我做研究时，除了使用用户画像和故事板之外，缺少一些比较有力的方法。通常我对手机用户行为的知识，来自于对朋友的观察、经验或者 facebook 上的留言。
2. 用户测试——我把这个高保真原型图发给了一些我的开发者朋友看，他们给了我一些非常好的建议，我根据他们的建议对我的定稿做了一些改进。其实除了程序员开发者，我应该给更多人去展示，听听他们对整个交互流程的感受。