外卖下单页

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

1.jpg

在产品功能类似的情况下,用户体验最大程度上影响着客户的忠诚度。
因为四款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个模块,我把整合完成之后的进一步拓展信息也放了上去】

请看下图

下面放上原型,供大家参考:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 一、行业分析 1、餐饮贸易行业整体发展趋势良好 根据数据可以看出,餐饮行业的贸易收入已经由2011年的20635亿...
    阿阿阿阿阿阿阿白阅读 29,235评论 1 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,400评论 25 707
  • 我一直在找你,无时无刻,后来跟你有点相像的人都开始喜欢。多年后,你回到我的世界,一直在原点等我的你,却已不是此时我...
    冬依冉阅读 164评论 0 0
  • “五岳归来不看山,黄山归来不看岳。”没有泰山的威武、华山的凌冽、嵩山的狭义,黄山,更像是一副山水画、像一名柔情的姑...
    行者_漂泊阅读 337评论 2 1
  • ▶ 七夕,我们要讲一下牛郎织女。 起源&版本 牛郎织女的版本其实很多。 比如织女回天上去一段,这一段其实挺关键的。...
    专家头条阅读 1,182评论 0 0