IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

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

Catherine • 2017-05-23 15:33 • 交互设计

题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

文章目录[隐藏]

  • 问题1:浏览任一店家食物界面,可点击的热区范围有误。请看下图【图中已经圈出标注】
  • 问题2:食物详情图,前后款食物滑动设计存在问题。请看下图【图中已经圈出标注】

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

题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

首先,我将分析的逻辑和大家说一下。

分析的角度:

一切从用户角度出发。

分析的内容:

  • 框架层:单个界面的元素逻辑关系
  • 结构层:多个页面之间的逻辑跳转关系

这里说明一下,关于分析的内容,有时候可能会顺带分析到产品的“表现层”、“范围层”、“战略层”等,毕竟这些层级之间是互相影响、互相渗透的关系。如果大家想了解更多的“层级内容”,可以好好研读Jesse James Garrett的《用户体验要素–以用户为中心的产品设计》。

分析的目标:

或者说换句话说,分析到最后的结点是

用户体验

交互设计准则

ok,下面开始正式的分析了:

我选取四款主流外卖app:饿了么、美团外卖、百度外卖、口碑外卖(淘点点)

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

在产品功能类似的情况下,用户体验最大程度上影响着客户的忠诚度。

因为四款app都是主流外卖产品,所以在产品的易用性和基本的用户体验上应该不会有太大问题,所以我会把分析的重点,放在产品的细节体验方面。四款产品的交互,好的方面就不多说了,我只把其需要改进的地方提出来,进行分析解决。真正优秀的交互设计,并不能只注重产品体验的易用性,而是在设计用户行为、帮助用户完成他们的目标时,还应该给用户带来更愉快、更有意义的体验。

一切从用户角度出发, 这四款外卖产品,用户的使用流程基本是一样的。即用户行为应该是:
浏览美食–确认下单–等待送达(催单、退单)–订单送达(评价)

那我就从浏览美食开始给大家分析:

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

在四款产品中,我认为在这个环节设计上,存在问题的,就是口碑外卖。为了有助于大家更加直观的分析,我将口碑外卖设计存在问题的界面,简化为原型。原型更能直观表达界面的逻辑关系,使大家把精力集中在交互元素、逻辑关系上。

问题1:浏览任一店家食物界面,可点击的热区范围有误。请看下图【图中已经圈出标注】

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

原因1:只将热区放在图片和文字本身,而对于大部分习惯用右手操作的用户来说,图中的蓝色区域更接近手指,所以用户常常会遇到以下尴尬场景:

  1. 恩?不能点吗?手机卡了
  2. 不能查看“食物详情”,只能直接点单?

原因2:没有遵守一致性原则

当用户在“外卖”首界面,浏览选择店家时,每个店家都是一个整体(包括店logo、店名、销量、配送费/起送费、优惠),和之后的留白区域。当用户触发点击,可点击的区域是一个整体。同交互、同体验,当用户浏览选择食物时,除了“添加食物数量”的botton以外,其余部分也应该是一个整体区域,即用户可点击区域。

改进方法:遵守一致性原则,加大热区,即用户可点击范围,使用户体验更加流畅。

问题2:食物详情图,前后款食物滑动设计存在问题。请看下图【图中已经圈出标注】

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

设计的目标行为是:让用户通过左右滑动查看上一款和下一款的食物

原因1:与用户期望不符。但是,我觉得这里的设计,用户的行为可能是左右滑动,但是,大多数用户的心理却不是“ok,我滑动是来查看前一款和后一款食物的”。作为用户,大多数用户的心理应该是“这款食物有N张详情图片,而此时我在浏览他的第m张”。所以,造成用户左右滑动的这种行为的心理和设计的目标是不相符的。这会造成什么呢?

用户A:额,怎么变成另一款食物了呢,不应该是我点击进去那款食物的详情图片吗?

所以,设计与用户期望不符。

原因2:没有意义。

如果说,设计师想设计前后滑动这样一种行为,让用户来查看前一款和后一款的食物,那么就应该集中在行为上,而标记共有多少款食物,此时此刻,用户在浏览第几款食物,完全是多余的。用户最关心的应该是,此时此刻,食物的详情,而不是这家店有多少食物,我在浏览这家店的第几款食物,早在首界面,用户就应该大致清晰的知道,这家店的基本菜单了。所以,这家店总共有多少食物,对用户来说,意义不大,甚至没有意义,没必要给用户增加理解负担。
改进方法:不多废话,直接上原型图【更多、更佳方法,我也在思考中,会同步更新,暂时先提供两种方法给大家,个人更趋向于第一种方法】

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

下面来谈一谈确认订单页面:

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

我们先从导航和按钮上文字内容谈起【请看下图】

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

每个产品该界面的导航文字和按钮文字整理如下:

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

那我先从导航文字讲起,共有三种情况,分别为“确认订单”、“提交订单”、“订单确认”。

从用户角度出发,一切以用户操作为基准,交互本身就是在设计用户行为,所以流程中的每一个行为的发出都是用户本身。所以,在正常的用户操作流程中,正确的描述应该是一个步骤到另一个步骤,是“用户”“+”做了一些事情“,所以在导航的文字设计中,应该采用”动宾“的结构更加合理。即”用户在确认订单“或者”用户在提交订单“,而不是”用户在订单确认“。

接下来,谈一谈按钮上的文字,分别有”确认下单“和”提交订单“两种。

与”确认下单“相比较,”提交订单“包含了很多的不确定性和不稳定性,”确认下单“,是用户当时所处的场景,”提交订单“更像是用户未完成那环节中的一个行为。所以”确认下单“,更能使用户的心理更加确定,使用户对整个操作流程更加清晰,界面的反馈更加清晰。

综合来说,饿了么和百度外卖在此处的设计更加合理,更加符合用户心理。

还是订单页面,下来来谈谈重点,就是订单信息的呈现和排列方式。【首先,我先将界面原型化,帮助大家更加清晰分析】

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

说明一下,在这里我只把这4款app订单界面的共同信息总结出来进行讨论分析,而个别app特有的信息暂不在讨论范围内。

下面开始分析:

首先,用户希望知道哪些信息:【此处为简单排序,无优先级】

  1. 我点了什么东西
  2. 我要付多少钱
  3. 我要怎么付款
  4. 这些东西什么时候送到我的手里
  5. 要如何联系我,送到我的手里
  6. 店家有哪些优惠呢
  7. 备注

第一步要做的就是,针对这7个问题,根据用户心理,进行一个优先级的排序

@a:从使用产品本身,即外卖app角度出发,用户最关心的就是,在自己点完菜的基础上,这些东西要如何送到我的手里?什么时候可以都送到我的手里?。所以,“如何联系我,送到我的手里”应该排在首位、紧接着应该是“这些东西什么时候送到我的手里”。此时,4和5的位置就解决了!

@b:从整个”订单“的目的出发,付款应该是该界面的最终目标。所以从整个布局来看,付款按钮的逻辑位置应该在整个页面的右下角。那从付款按钮出发,”我要付多少钱“的逻辑位置,应该和付款按钮最接近,所以,”我要付多少钱“应该排在相对末尾的位置。

为什么这里是“相对末尾”呢,因为要考虑到“备注”的问题,因为对于大部分用户而言,使用备注的频率很低。他属于用户关注度最低一级,(和店家也有很大关系,店家到底会不会理会你的备注信息呢,所以这里不确定因素很多)即使去掉备注,我也可以吃到饭,只是吃的味道和想象中有些差别而已,所以这里”备注“要排在最末的位置,”我要付多少钱“排在他的上面即可。所以,2和7的位置也确定了。
@c:接着”我要付多少钱“,那么,关于钱的信息主要来自于”我点了什么东西“,所以,按照合理的逻辑顺序,应该排在“我要付多少钱”上面。那么,1的位置确定。

@d:下面解决解“我要怎么付款”,关于“money”方面的一些事情,应该是和1、2放在一起,而1和2都是属于信息展示类,而3”我要怎么付款“偏向于让用户更改一些信息,所以他一定不能放在两者的中间,那么,就有两种选择,要么放在上面,要么放在下面。而根据@b中的理由,那么最好的办法,就是将其放在上面。所以3的位置确定。

@e:当然,优惠,是不可忽视的现在基本上已经作为产品重要竞争点之一,同类型的app,哪个app花费越少,当然用户就回倾向选择那个花费少的app,即使体验有不合理的地方也会被用户原谅,换句话说,即使用户实在不会使用,他也会找教程把他学会的。毕竟,花的可是兜里的钱啊!并且,有优惠,更坚定用户下单的决心,所以优惠这块要单独拿出来最好。与钱相关,又与最后的付款金额挂钩,放在”我要怎么付款“和”我点了什么东西+我要付多少钱“之间即可。6的位置确定。

所以正确的顺序应该是:

  1. 要如何联系我,送到我的手里
  2. 这些东西什么时候送到我的手里
  3. 我要怎么付款
  4. 店家有哪些优惠呢
  5. 我点了什么东西
  6. 我要付多少钱
  7. 备注

下面一步就是对这些优先级信息进行整合归类。我按照信息展示(无需用户操作)和信息修改(需用户操作)将其上下整合,是信息更加简洁。【这里,共整合成5个模块,我把整合完成之后的进一步拓展信息也放了上去】

请看下图

关于外卖产品的交互设计与用户体验分析
下面放上原型,供大家参考:

关于外卖产品的交互设计与用户体验分析
关于后面等待送达(催单、退单)–订单送达(评价),我会陆续更新!期待大家继续关注!

大家可以去我的behance主页,看原文,这里提供我的原文链接:

https://www.behance.net/gallery/37136317/_

 

作者:大圣(微信号wzydml),交互设计师。

本文由 @大圣 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29226/

logoPS交互交互设计交互设计师产品产品体验产品经理产品设计原型场景微信文字设计用户用户体验用户行为设计设计师转载饿了么
赞 (0)
CatherineCatherine
0
生成海报
新版MATERIAL DESIGN 官方动效指南(二)
上一篇 2017-05-23 14:45
Web产品的交互说明文档应该怎么写?
下一篇 2017-05-23 16:28

相关推荐

  • IxD案例

    Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • 微信热点

    Axure RP 8.0安装教程

    Axure RP 8.0Win版/64位下载地址:https://pan.baidu.com/s/13eqSe3IeqvnyqjBYxIEqZA密码:2gkwAxure RP简介:Axure RP是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。适用系统:win7,win8,win10安装有问题或需要远程安装请联系:...

    2018-04-30
  • 应用中的游戏化设计

    作者:_Ammy   游戏借着其互动性、反馈性、挑战性、快速成长性等特点,拥有着让玩家长期专注于其中的神奇力量。而若将游戏的这些特点引入到一般的产品设计上,也可能会产生意想不到的效果,这就是游戏化。游戏化的…

    交互专题 2017-08-07
  • 微信热点

    感恩之家与河马教育签订人才需求战略合作协议

    2018年2月24日,河南感恩之家实业有限公司(以下简称感恩之家)与河南河马教育科技有限公司(以下简称河马教育)签订人才需求战略合作协议。感恩之家人力资源经理朱昌林与河马教育创始人陈滨感恩之家惠民工程是实体企业+互联网+实体店铺+分享经济的大惠民工程。在即将上线的电商平台部分,我们精心筛选了上百款来自全国各地的特色产品。在展示产品安全、原产、优质的同时,我们充分挖掘地域风土人情、历史人文,围绕产品特色讲述一个个中国物产的故事。这些都需要...

    2018-03-03
  • 微信热点

    关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14
  • 微信热点

    用户体验再度升级,共享租车现里程碑式进步

    近日,国内共享租车领导品牌凹凸租车发布最新APP 4.0版本,该版本通过优化匹配算法和系统功能,在业内首度实现共享租车平台零拒单,免除了用户交易后租不到车的后顾之忧。同时,新版凹凸租车上线了“精选优车”频道,全面提升用户的租车体验。零拒单,用户所租即所得在共享租车行业,用户租车后遭遇车主临时拒单或取消的现象成为一大痛点。在凹凸租车4.0新版本中,平台通过车源端优化、车辆接单标准化、智能推荐匹配算法和系统功能升级,实现了工作时段的无拒单、...

    2018-02-01
  • 交互设计的那些事儿 交互设计

    交互设计的那些事儿

    作者:柳强  

    2016-01-22
  • 【原创译文】面向对象的用户体验设计 交互设计

    【原创译文】面向对象的用户体验设计

    原文:Object-Oriented UX 2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,…

    2015-11-20
  • 算法驱动设计趋势已来,产品设计如何与算法进行创新合作?

    译者:舒舟,阿里巴巴/1688事业部/无线交互   过去的一年,BBC UED团队(原1688UED团队)花费了巨大的资源和精力投入阿里巴巴集团中台DPL(Design Pattern Library)项目,旨在通过设计模式的提炼及抽象,由规则和…

    交互专题 2017-08-07
  • 超实用!比较重要的设计方法论大整理 交互设计

    超实用!比较重要的设计方法论大整理

    @戴小维Saki :设计方法论,顾名思义是当设计师在进行设计活动时可从理论和方法上所提出的实际性意见。当进行不同设计需求时,可为设计师提供明确的步骤与框架。众所周知设计方案要做到有理有据,富有说服力,所以设计方法论也是设计师进行产品设计时的一大利器。虽然会在创新上有所限制,但却能为设计师在没有灵感时候,提供一个有依据的可重复操作流程,进行自己的设计思考,从而输出自己的设计方案。其实资深设计师基本都会形成一套自己的设计方法论。尤其在常常需要进行汇报提案时,这更是方案汇报时的重要方法。

    2017-11-06
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress