点击上方“三分设”→点击右上角“...”→点选“设为星标★”
赶紧为三分设点上★，帮助全球1亿设计师成长
正文共：4286字30图预计阅读时间：11分钟
编译作者|嘻嘻|伦敦|多媒体设计师
评审指导|TCC委员团|胖鱼、呵呵、弹跳
编辑整理|三分设营运编辑|皮皮
为何想做这个研究的诱因
几个礼拜前，我和我的家人一起去肯德基买早餐吃，之后我们发觉在星巴克店旁边安了三台新的自动点单机器。我让我妈妈和我弟弟去操作这个系统，我在门口观察她们使用这个系统点单的交互过程。其中，我爸和我哥都在浏览菜单的时侯遇见了问题，尤其是在她们具体选择哪款餐品的过程中。接出来我将会把她们在点单和付款过程中遇见的问题一一解析。
问题
1.选择餐款
这个选择过程相关的互动操作是一个列表，这个列表是一个由图标组成的，在屏幕的最左边，可上下滑动来浏览的列表。其实这儿没有任何提示或指示表明这是一个可滑动的菜单，但辛运的是，人们可以清楚意识到这个列表可以通过往上／往下滑动去获得更多的选项，而并不止是目前画面所展示下来的。
2.选择好餐款后的个性化选项
其实的，这是最难的一个部份。这个部份的流程是，当你选择好了你想买的披萨或套餐后，接着选择大小、种类、配餐和啤酒。当我妈妈尝试去换一种啤酒时，他找不到他想要的那一款（他只能看到目前显示的6个选项）。最后只能换成我来帮他点单，我通过了一个向下滚动的动作，找到了更多的选项。当我如此做的时侯，他倍感很吃惊，完全没想到还可以有这些操作。除此之外，这个机器也不能提供把套餐里附赠的马铃薯换成牛排的选项（不过我猜是由于她们是没有更新菜单）。
3.付账过程中的问题
这是所有流程中的最后一步。我发觉点餐系统软件，这儿所提供的支付选项很奇怪，这儿有两个选项：有在机器付款；或在柜台人工付款（传统方法）。我感觉这儿完全没有要设置去柜台人工付款的必要，虽然我感觉你们不可能在机器选好了又挪到柜台再度排队付账。但是很有意思的是，我妈妈选择了“去柜台付账”，这一举动又引起了另一个很有意思的用户体验问题。当他选择了这个选项后，机器让我们取了一个号码牌。我们所理解的是，这个号码是我们的订单号码，工作人员会按照这个号码给我们提供刚才选好的餐饮。并且我们错了（不是完全错误）！屏幕给我们的号码是53，但号码牌又是175，这让人十分的苦恼。在我们去付完款以后，我们又得到了一个支票，里面有除上述说的号码之外的第三个号码：157。我们大约等了差不多45分钟才吃上东西。对于一个快餐来说，这是一个十分差的体验，整个点餐和支付系统特别嘲弄的反倒增加了效率。
4.餐号呼叫系统
在快餐店，人们虽然早已习惯了在短时间内，能够自己去柜台取餐。而系统提供的服务是让顾客坐在座位上等待，工作人员会依照号码牌给你送来餐饮。但是在事情的最后，还是工作人员在喊餐号让顾客去取餐。并且这个号码牌又和真正的订单号不一样，等于说两个不同的号码系统同时在运作，假如我没仔细区分的话，我都得不到我点的餐了。
5.在付款以后，我们又被要求要取一个桌号之后把桌号输入进系统
研究
我主要使用的方式就是观察。我妈妈和我的妹妹是这次我所研究的人物角色。其中我也去观察了其他的路人使用这个系统。我发觉，通常人们一次只点一个物品的时侯没有遇到大问题，都比较流畅。当想点多个物品的时侯，一些刚才我们遇见过的问题就出现了。依然有一定的人会选择“在柜台支付”，最后她们又得悉柜台再排一次队（是的，有的时侯收银员甚至都不在，还得等她们过来）。
第三天实地考察
父亲和我弟弟第一次体验肯德基点餐系统。
第二天实地考察
一周后，我又去了另外一家星巴克分店观察用户的使用行为。
这个店面比较惨的一点是仍然须要有一个工作人员在点餐机器旁协助顾客使用该系统点单。
第一天实地考察
第二天，我带我母亲去了同一家星巴克分店，但这一次我自己测试了这个点餐系统。我母亲在旁将整个过程录影出来（这既有趣也很能帮助洞察问题）。
剖析
用户画像
用户故事板
这是一个我按照前面两个人物创造的故事板，这个故事里的人物的名子称作Jhen。
构思和草稿
在我画这个草稿之前，我先了一下关于快餐行业使用机器点餐系统的情况，我发觉KFC也有使用这些系统。我没法找到相关短片去了解它是如何运作的，但我找到了一个关于肯德基推广该系统的宣传短片。这个短片述说的是一个服务员教导你们怎么使用这个系统。
关于单个物品点单流程的初步草稿
单个物品点单支付流程草图
套餐／多个物品点餐流程草图
我所定义的几个主要需求
1.关于一个物品面临分类重叠时，怎样去组织
2.食物个性化选项怎么简化
3.当用户想退回上一步选项或回主页时，怎么让用户得到清晰的指示
4.为了节约用户等待时间，怎样将支付显得愈发效率
五保户真线框图
按照我之前所勾画的草图，我作出了以下的线框图。我按照自己的观点提出了优化后的系统，借以让用户觉得更舒服，但是愈发美观。这也会帮助我在整个流程中发觉并更正问题。
重复测试线框图
我创建了更多相同类型操作的版本来进行比较
1.主菜单
2.食物种类选择的展示
3.甜品／配餐的选择
4.食物信息界面
5.啤酒个性化选择
主菜单比较
我将“完成(Done)”菜单除去了，由于它并没有承载任何有意义的动作。只有在更新订单、加入列表的情况下，该菜单就会出现。
食物种类选择展示方法比较
愈加有组织，但是更重视用户新划动下来的选项。
甜品／配餐的选择
作出了3个版本，但最后我选了最后一个（最右侧那种）。由于左侧两个都有些毋须要的空白，用户会因而看不见其他的内容。
食物信息界面
两侧的这一个图，和目前肯德基分店使用一样。一开始我认为继续使用不修改也没有问题，直至我测试后发觉，虽然这儿根本不须要两种不同的按键（订制／更改），虽然它们都是引导向同一个界面。于是我把这两个按键合并成了一个，除去了更改按键，留下了订制按键。点击后，新弹出的界面都可以调整规格和细节选择。
饮料个性化选择
（在设计高保真图时，这个看法最终被废弃了）这个部份是我最新设计的该界面，是所有版本里最流畅的。
在以后的高保真原型图设计中，最初的线框图被废除是由于它并不支持啤酒的气温选择，而且中间有过多的页面过渡。新版本的设计促使用户可以在一个界面里完成所有的啤酒个性化选择。
高保真设计原稿
我从星巴克官方网站中吸取了它的主题颜色，并借此设计了一个新的式样。在整个高保真原型原稿过程中，我所使用的软件是，之后导出到Figma（共享原型更容易）。
欢迎主界面
因为我找不到比较好的“堂食（DineIn）”／“打包（TakeAway）”的图标，我只得自己用画了一个。另外，我把“语言选择”选项移到了最右上角。
主界面／餐品选择
我把单个餐款用卡片的方式抒发，而且给被选中的项目添加了红色高亮边框。据悉，我也在屏幕右上角添加了一个搜索栏。
饮料个性化选择
如我之前所提及的，这个部份完全替换了之前五保户真的版本。顾客会看到她们预选择的饮料，并可以随心改变选择另外一个。随以后有一个确认按键出现，指示下来这儿有一个改变发生。
甜品／配餐选择
当用户只想点甜品或则配餐的时侯，她们就不会看到一大堆没有必要出现界面。她们只须要选择她们想点的物品，由于有些物品并不须要任何个性化选择。
订单列表&付款选项
为了能抒发愈发清晰的信息，我改变了一些按键上的文字。我也把付款列表重新组织分类了，这样能够让用户更清晰意识到有什么可能的动作会发生。
完成界面（打包或堂食）
左图：打包的“感谢”画面;下图：堂食
堂食体验的再设计
我重新设计的堂食订单界面与目前肯德基系统里的界面完全不同。我把“用户得到一个桌牌号码，再输入回系统”的流程改掉了。
我意识到，虽然汉堡王可以设计一个茶几号码系统，系统会手动的跟踪那些号码，这样用户只须要在她们的饭桌上等待，当她们的号码牌开始呼叫，用户就可以去柜台取餐了。
这个新揭晓的系统去除了让用户输入桌号进系统，让工作人员送到茶几的流程（由于当人满为患的时侯，效率会更低）。最后初稿的版本附在这儿:McDKiosk。
学习总结
1.在设计的每位阶段反复测试——根据我做的用户画像和故事板，对于怎样解决现有的体验问题点餐系统软件，我一开始认为我的看法还不错。最初我想像新版设计会特别的流畅。但虽然到最后，我边做草图边修改了好多东西，从五保户真到高保真，基本上整个过程都有各类变动。
2.构建设计环境的重要性——完成五保户真原型图后，我并没有立刻动手开始制做高保真原型图。动手之前，我先对颜色和字体的使用做了一些搜索和研究，再对整个系统的风格做了一个设计规范准则，这样为我旁边的设计增强了好多效率，节约了好多更改的时间。
可以改进的事情
更好的搜索／研究方法——我做研究时，不仅使用用户画像和故事板之外，缺乏一些比较有力的方式。一般我对手机用户行为的知识，来自于对同学的观察、经验或则上的留言。
用户测试——我把这个高保真原型图发给了一些我的开发者同学看，她们给了我一些特别好的建议，我依据她们的建议对我的初稿做了一些改进。虽然不仅程序员和开发者，我可以给更多的人群去看和测试，听听她们对整个交互流程的体会。
原文作者|CsLeong
免责声明：部分文章信息来源于网络以及网友投稿，本站只负责对文章进行整理、排版、编辑，出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性，如本站文章和转稿涉及版权等问题，请作者在及时联系本站，我们会尽快为您处理。
