麦当劳自动点餐系统UI／UX案例分析-技术圈

点击 ▲ 三分设关注，和 6 万设计师一起学习进步
译客 2019 · 第 34 篇

为什么想做这个研究的原因：

几个星期前，我和我的家人一起去麦当劳买午餐吃，然后我们发现在麦当劳店门口安了三台新的自动点单机器。我让我爸爸和我哥哥去操作这个系统，我在旁边观察他们使用这个系统点单的交互过程。其中，我爸和我哥都在浏览菜单的时候遇到了问题，尤其是在他们具体选择哪款餐品的过程中。接下来我将会把他们在点单和付款过程中遇到的问题一一解析。

#01

问题 😠

1. 选择餐款

这个选择过程相关的互动操作是一个列表，这个列表是一个由图标组成的，在屏幕的最左侧，可上下滑动来浏览的列表。虽然这里没有任何提示或指示表明这是一个可滑动的菜单，但幸运的是，人们可以清楚意识到这个列表可以通过往上／往下滑动去获得更多的选项，而并不止是目前画面所展示出来的。

2. 选择好餐款后的个性化选项

显然的，这是最难的一个部分。这个部分的流程是，当你选择好了你想买的汉堡或套餐后，接着选择大小、种类、配餐和饮料。当我爸爸尝试去换一种饮料时，他找不到他想要的那一款（他只能看见目前显示的6个选项）。最后只能换成我来帮他点单，我通过了一个向上滚动的动作，找到了更多的选项。当我这么做的时候，他感到很惊讶，完全没想到还可以有这种操作。除此之外，这个机器也不能提供把套餐里赠送的玉米换成薯条的选项（不过我猜是因为他们是没有更新菜单）。

3. 付账过程中的问题

这是所有流程中的最后一步。我发现，这里所提供的支付选项很奇怪，这里有两个选项：有在机器付款；或在柜台人工付款（传统方式）。我觉得这里完全没有要设置去柜台人工付款的必要，毕竟我觉得大家不可能在机器选好了又跑到柜台再次排队付账。然而很有意思的是，我爸爸选择了“去柜台付账”，这一举动又引发了另一个很有意思的用户体验问题。当他选择了这个选项后，机器让我们取了一个号码牌。我们所理解的是，这个号码是我们的订单号码，工作人员会根据这个号码给我们提供刚刚选好的餐饮。但是我们错了（不是完全错误）！屏幕给我们的号码是53，但号码牌又是175，这让人非常的困惑。在我们去付完款之后，我们又得到了一个收据，上面有除上述说的号码之外的第三个号码：157。我们大概等了差不多45分钟才吃上东西。对于一个快餐来说，这是一个非常差的体验，整个点餐和支付系统非常讽刺的反而降低了效率。

4. 餐号呼叫系统

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

5. 在付款之后，我们又被要求要取一个桌号然后把桌号输入进系统

#02

研究 🔎

我主要使用的方法就是观察。我父母和我的哥哥是此次我所研究的人物角色。其中我也去观察了其他的路人使用这个系统。我发现，一般人们一次只点一个物品的时候没有碰到大问题，都比较流畅。当想点多个物品的时候，一些刚刚我们遇到过的问题就出现了。仍然有一定的人会选择“在柜台支付”，最后他们又得知柜台再排一次队（是的，有的时候收银员甚至都不在，还得等他们过来）。

第一次实地考察

爸爸和我哥哥第一次体验麦当劳点餐系统。

第二次实地考察

一周后，我又去了另外一家麦当劳门店观察用户的使用行为。

这个门店比较惨的一点是一直需要有一个工作人员在点餐机器旁协助客户使用该系统点单。

第三次实地考察

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

#03

分析 💭

用户画像

用户故事板

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

#04

构思和草稿 ✏️

在我画这个草稿之前，我先 google 了一下关于快餐行业使用机器点餐系统的情况，我发现 KFC 也有使用这种系统。我无法找到相关短片去了解它是怎样运作的，但我找到了一个关于麦当劳推广该系统的宣传短片。这个短片讲述的是一个服务员教导大家如何使用这个系统。

关于单个物品点单流程的初步草稿

单个物品点单支付流程草图

套餐／多个物品点餐流程草图

我所定义的几个主要需求

1. 关于一个物品面临分类重叠时，如何去组织

2. 食物个性化选项如何简化

3. 当用户想退回上一步选项或回主页时，如何让用户得到清晰的指示

4. 为了节省用户等待时间，如何将支付变得更加效率

#05

低保真线框图 📝

根据我之前所绘制的草图，我做出了以下的线框图。我根据自己的观点提出了优化后的系统，旨在让用户感觉更舒服，而且更加美观。这也会帮助我在整个流程中发现并更正问题。

重复测试线框图

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

1. 主菜单

2. 食物种类选择的展示

3. 甜品／配餐的选择

4. 食物信息界面

5. 饮料个性化选择

主菜单比较

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

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

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

甜品／配餐的选择

做出了 3 个版本，但最后我选了最后一个（最右边那个）。因为左边两个都有些不必要的空白，用户会因此看不见其他的内容。

食物信息界面

左侧的这一个图，和目前麦当劳门店使用一样。一开始我觉得继续使用不更改也没有问题，直到我测试后发现，其实这里根本不需要两种不同的按钮（定制 customize／修改 change options），其实它们都是引导向同一个界面。于是我把这两个按钮合并成了一个，去掉了修改按钮，留下了定制按钮。点击后，新弹出的界面都可以调整尺寸和细节选择。

饮品个性化选择

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

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

#06

高保真设计图稿 🖥

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

欢迎主界面

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

主界面／餐品选择

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

饮品个性化选择

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

甜品／配餐选择

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

订单列表&付款选项

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

完成界面（打包或堂食）

左图：打包的“感谢”画面 ; 右图：堂食

堂食体验的再设计

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

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

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

#07

学习总结 😎

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

#08

可以改进的事情 🤔

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

原文标题：🍔 McDonald’s kiosk ordering system — a UX case study

原创作者：Cs Leong

原文链接：https://uxdesign.cc/mcdonalds-kiosk-ordering-system-ui-ux-case-study-fe7b3693f12c

翻译作者：嘻嘻

审核优化：王翎旭（益达）

该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设

我们一起聊设计

欢迎添加 ⭐️ 星标，获取每周获取好文推荐

每天早上 8 点，准时充电

微信读者群

期待与更多优秀用户体验设计师一起成长

添加助理 or 主理人微信号

【 Lil_Bug 】or【 Red-boy2020】

备注【读者】+ 截图【星标】

加入读者群

分享设计心得，定期直播，零距离连麦，答疑解惑

↓↓↓点开『阅读原文』，加入星球，获取更多知识

麦当劳自动点餐系统UI／UX案例分析

点击 ▲ 三分设 关注，和 6 万设计师一起学习进步译客 2019 · 第 34 篇

点击 ▲ 三分设 关注，和 6 万设计师一起学习进步

译客 2019 · 第 34 篇

点击 ▲ 三分设关注，和 6 万设计师一起学习进步
译客 2019 · 第 34 篇

点击 ▲ 三分设关注，和 6 万设计师一起学习进步