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

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