关于外卖产品的交互设计与用户体验分析.pdf

关于外卖产品的交互设计与用户体验分析 题外话：作为一名交互设计师，平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计 。同样，作为一名资深的吃货，毋庸置疑，当然先给大家分析几款 外卖“ ”的交互设计。 首先，我将分析的逻辑和大家说一下。 分析的角度： 一切从用户角度出发。 分析的内容： 这里说明一下，关于分析的内容，有时候可能会顺带分析到产品的 表现层“ ”、 范围层“ ”、 战略层“ ”等 ，毕竟这些层级之间是互相影响、互相渗透的关系。如果大家想了解更多的 层级内容“ ”，可以好好 研读 Jesse James Garrett 的《用户体验要素 –以用户为中心的产品设计》。 分析的目标： 或者说换句话说，分析到最后的结点是 用户体验 交互设计准则 ok ，下面开始正式的分析了： 我选取四款主流外卖 app ：饿了么、美团外卖、百度外卖、口碑外卖（淘点点） 在产品功能类似的情况下，用户体验最大程度上影响着客户的忠诚度。 因为四款 app 都是主流外卖产品，所以在产品的易用性和基本的用户体验上应该不会有太大问题， 所以我会把分析的重点，放在产品的细节体验方面。四款产品的交互，好的方面就不多说了，我只 把其需要改进的地方提出来，进行分析解决。真正优秀的交互设计，并不能只注重产品体验的易 用性，而是在设计用户行为、帮助用户完成他们的目标时，还应该给用户带来更愉快、更有意义的 体验。 一切从用户角度出发， 这四款外卖产品，用户的使用流程基本是一样的。即用户行为应该是： 浏览美食 –确认下单 –等待送达（催单、退单） –订单送达（评价） 那我就从浏览美食开始给大家分析 : 在四款产品中，我认为在这个环节设计上，存在问题的，就是口碑外卖。为了有助于大家更加直观 的分析，我将口碑外卖设计存在问题的界面，简化为原型。原型更能直观表达界面的逻辑关系，使 大家把精力集中在交互元素、逻辑关系上。 问题 1 ：浏览任一店家食物界面，可点击的热区范围有误。请看下图【图中已经圈出标注】 原因 1：只将热区放在图片和文字本身，而对于大部分习惯用右手操作的用户来说，图中的蓝色区域 更接近手指，所以用户常常会遇到以下尴尬场景： 原因 2 ：没有遵守一致性原则 当用户在 外卖“ ”首界面，浏览选择店家时，每个店家都是一个整体（包括店 logo 、店名、销量、配 送费 /起送费、优惠），和之后的留白区域。当用户触发点击，可点击的区域是一个整体。同交互、 同体验，当用户浏览选择食物时，除了 添加食物数量“ ”的botton 以外，其余部分也应该是一个整体 区域，即用户可点击区域。 改进方法：遵守一致性原则，加大热区，即用户可点击范围，使用户体验更加流畅。 问题2 ：食物详情图，前后款食物滑动设计存在问题。请看下图【图中已经圈出标注】 设计的目标行为是：让用户通过左右滑动查看上一款和下一款的食物 原因 1：与用户期望不符。 但是，我觉得这里的设计，用户的行为可能是左右滑动，但是，大多数用 户的心理却不是 “ok，我滑动是来查看前一款和后一款食物的 ”。作为用户，大多数用户的心理应 该是 这款食物有“ N 张详情图片，而此时我在浏览他的第 m张 ”。所以，造成用户左右滑动的这种行为 的心理和设计的目标是不相符的。这会造成什么呢？ 用户 A ：额，怎么变成另一款食物了呢，不应该是我点击进去那款食物的详情图片吗？ 所以，设计与用户期望不符。 原因 2 ：没有意义。 如果说，设计师想设计前后滑动这样一种行为，让用户来查看前一款和后一款的食物，那么就应该 集中在行为上，而标记共有多少款食物，此时此刻，用户在浏览第几款食物，完全是多余的。用户 最关心的应该是，此时此刻，食物的详情，而不是这家店有多少食物，我在浏览这家店的第几款 食物，早在首界面，用户就应该大致清晰的知道，这家店的基本菜单了。所以，这家店总共有多少 食物，对用户来说，意义不大，甚至没有意义，没必要给用户增加理解负担。 改进方法：不多废话，直接上原型图【更多、更佳方法，我也在思考中，会同步更新，暂时先提供 两种方法给大家，个人更趋向于第一种方法】 下面来谈一谈确认订单页面