交互学堂
专注分享专业知识

饿了么App交互设计分析

起点学院

【目录】

1.产品版本信息

2.产品简介

3.用户分析

3.1目标用户群

3.2角色模型和用户目标

3.3情景剧本

4.需求列表

5.信息架构

6.主要流程图

7.线框图

8.值得学习 和 需要改进

8.1值得学习的地方

8.2需要改进的地方

注:点右键“在新标签中打开链接”可以查看高清大图。另,因为本文有很多高清大图,可能遇到图片加载很慢的情况,请耐心等待一下,不要太着急哦。

————————————————————————————–

1.产品版本信息

饿了么App,v5.1.1,Android

2.产品简介

饿了么的自身定位是连接“跟吃有关的一切”,其实现在给人的印象就是一款网上订餐App。用户可以通过它可以查看选定位置附近的餐厅,选择自己想要的美食,选择好支付方式后,下单预订等待外卖送达即可。

3.用户分析

注:在此只是推测,实际工作时需要进行用户调查才最为准确。

3.1目标用户群

主要是一群比较宅、比较懒或没时间出去的学生和白领。

3.2角色模型和用户目标

角色模型一:王鑫,21岁,大三学生,经常宅在宿舍玩游戏,看电影,要上课点名时他才很不情愿地出宿舍楼。

用户目标:快速订餐;快速送达;菜品种类多,有自己喜欢吃的;有优惠更好。

角色模型二:张丽雅,25岁,公司白领,过着稳定的朝九晚六的上班生活,有时周六还要加班。周末偶尔出去逛逛街,但一般都是宅在家里,刷微博,看电影、电视剧、综艺节目,跟朋友用手机聊聊天。

用户目标:菜品种类多,有自己喜欢吃的;价格实惠;最好有优惠;快速订餐;快速送达。

3.3情景剧本

注:以下为日常最主要的情景剧本,在情景剧本的基础上结合其他因素,进行需求挖掘和产品功能的配置。另外还有关键线路场景剧本和验证场景剧本,在此不列出了。

张丽雅:

剧本(1):周六,今天不用加班,张丽雅一觉睡到10点多,醒来后还赖在床上玩手机,快到11点时,打开饿了么,这次想换个新的外卖吃,于是到处浏览了一下,看到其中一个外卖好像很好吃的样子,看了一下价格,不贵,看了一下送达时间,40分钟,看了看评价,还行,于是预订下单了,下单后发现还能发红包,于是顺手就往群里发了,自己也顺便抢了红包。然后就起床洗漱,40分钟后外卖送到了,张丽雅打开一看确实不错,于是,她高兴地拍了张照片,吃完之后,感觉味道也很棒,于是点开评价,给了好评。

剧本(2):星期天,11点多了,张丽雅打开饿了么订餐,突然想吃前一阵吃过的一个外卖,但是由于吃过很多种外卖,所以外卖名称具体叫什么忘了,也不记得餐厅的具体名字了,只记得餐厅名里有一个”仙“字,于是她通过这个信息很快找到了那家餐厅,最后找到了那个外卖。

剧本(3):周末,张丽雅正在看《奔跑吧兄弟》,间隙,她看了一下时间,快到饭点了,于是赶紧打开饿了么,迅速订了一个之前收藏好了的外卖,然后继续看《奔跑吧兄弟》。

剧本(4):张丽雅觉得餐厅官方的图片都不太真实,有的餐厅又没上传菜品的图片,于是她去看了网友拍的照片和评价,发现了几个看起来不错的菜品,于是收藏下来了,并分享给了好友,同时预订了其中的一个,半个多小时后外卖送到了,张丽雅拍照并快速评价了,因为她评价后又可以多赚一些积分,到时后可以兑换商品。

剧本(5):周一中午11点,张丽雅在公司上班,今天她不想下楼吃了,于是她打开饿了么定了一份外卖,几十分钟后,外卖送上来了。

剧本(6):下午下班了,今天张丽雅想订外卖在家吃,于是在下班的路上,她订了外卖,选好了送达时间,她到家后没多久,外卖也送到了。

王鑫:

剧本(1):上午没课,宿舍,王鑫正和室友激战打DOTA,又一局结束了,王鑫看了看时间,快到中午11点了,”11点了,订餐订餐,你们吃啥?咱们今天拼盘AA。”王鑫问室友,然后给他们“发菜单”,大家各自选好了,王鑫下单了,然后继续DOTA,半个多小时后外卖到了,大家开吃,吃完后王鑫继续玩游戏。

剧本(2):又快到饭点了,这次有人想单点,于是就没拼盘了,王鑫照样给“发菜单”,大家各自选好了,王鑫下单了,半个多小时后外卖到了,大家各吃各的。

4.需求列表

注:有的PM或需求分析师可能会给出较详细的需求;有的可能只给出粗略的需求。不管哪种情况,交互设计师都需要自己分析细化,梳理一遍。这里不做列表的形式,为了方便拆解分析产品,作者做了需求/功能梳理图,虽然形式不同,但同样都是罗列出全部的需求。

此需求/功能梳理图重点是把大大小小的需求/功能全部梳理出来,此阶段并不纠结于组织结构,组织结构的工作是信息架构阶段重点做的。此处用的是思维导图的方式梳理,(虽然乍一看比较杂比较多,但在作者用导图梳理信息时感觉很方便,同时也为下一步做信息架构图做了铺垫),工作交流时可能要变换成表格形式或普通文本形式。

需求功能梳理-饿了么-显示1级结构:

需求功能梳理-饿了么-显示1级结构

需求功能梳理-饿了么-显示1级结构

 

需求功能梳理-饿了么-显示2级结构:

需求功能梳理-饿了么-显示2级结构

需求功能梳理-饿了么-显示2级结构

 

需求功能梳理-饿了么-显示全部结构:

需求功能梳理-饿了么-显示全部结构

需求功能梳理-饿了么-显示全部结构

5.信息架构

上阶段的需求/功能梳理图把需求/功能基本弄清楚了,本阶段的工作是组织,当然也还有暂时不能确定层级关系的,需要等页面框架阶段来确定。

信息架构图-饿了么(-无需求说明)-显示1级结构:

信息架构图-饿了么(-无需求说明)-显示1级结构

信息架构图-饿了么(-无需求说明)-显示1级结构

 

信息架构图-饿了么(-无需求说明)-显示2级结构:

信息架构图-饿了么(-无需求说明)-显示2级结构

信息架构图-饿了么(-无需求说明)-显示2级结构

 

信息架构图-饿了么(-无需求说明)-显示全部结构:

信息架构图-饿了么(-无需求说明)-显示全部结构

信息架构图-饿了么(-无需求说明)-显示全部结构

 

6.主要流程图

流程图有好几种,以下为主要的任务流程图(叫法各不相同,但是这个意思):

主要任务流程图

主要任务流程图

 

7.线框图

典型页面的线框图(内含了一个主要的操作流程):

典型页面线框图

典型页面线框图

 

8.值得学习 和 需要改进

8.1值得学习

1.信息过多时,隐藏,逐次呈现:

饿了么餐厅列表页最多显示2个活动,多余的折叠隐藏起来。信息过多时,运用逐次呈现的方法,减少页面信息量,值得学习。

elm-9

elm-10

 

2.多信息量的布局:

A.文案尽量精简:根据用户已形成的习惯认知,“距离”“时间”之类的标题、评论人数的单位等都可以省略,不然会给视觉设计造成额外的压力,用户也会反感繁杂的无用信息;

B.用3行式布局:信息行数最好不要超过3行,不得已有4行的话,可以学习饿了么用分隔线;

C.标签:如“票”“保”“付”等,一些常用的文字项目可以精简为标签的形式,标签的形式也更直观、生动。

elm-11

 

3.文字标签:

文字标签+说明的形式,既方便用户快速识别活动,又可以说明清楚活动的内容。

elm-12

 

4.文案,logo:

“logo+饿配送”:按传统的做法,纯文字则为“饿了么配送”,视觉上稍长。“logo+饿配送”,则简洁有力,同时能快速识别,有logo比纯文字更悦目。

elm-13

 

5.星评,评价数:

饿了么:星评+评价数,等待时间+距离;而百度外卖:只有星评,只有等待时间。这个需要看用户研究结果(用户的期望)而定。

饿了么的做法给人感觉更专业,也更可信;而百度外卖虽然去掉了一项信息,信息量上更简约,同时给视觉设计压力更小,但是给人感觉不够可信。(另外,百度外卖的最终视觉效果也不咋地,而饿了么多了信息量,视觉也做的很不错。)

elm-14

elm-15

 

 

6.快捷入口,首尾都有,进入全部:

用户在刚浏览推荐列表时,就可以进入“全部餐厅”;在推荐列表尾部也设有“查看全部”,很方便。

elm-16

elm-17

 

7.半屏下拉弹窗:

饿了么没有把展开的下拉弹窗铺到屏幕最底部(可以滑动查看更多隐藏内容,见滑动条),这样的好处是:用户不会感觉又进入了“另一个房间”,尽量减少信息的深度,降低用户的信息焦虑。

elm-18

 

8.四个层级分类,一个页面展现:

巧妙利用侧边栏的布局,将4个层级的信息放在一个页面上就展示完了,方便用户直接看到最下一级的信息。

elm-19

 

9.列表区,整页式,标题悬浮固定:

A.菜品列表区为一个整页式设计,这样的好处是用户可以一直浏览,不用再点击左侧的分类(用户浏览到哪个类别,侧边栏自动切换到那个类别为选中状态),尤其当某个分类下的菜品数较少时,这个设计的优势体现得更为明显;

B.交互细节:用户向上滑动列表时,列表区的标题行悬浮固定显示,方便用户随时掌握所在的类别区域(虽然左侧也可以看到分类名,但是两者信息内容不同,还是有必要采用这样的标题浮动形式);

C.热销榜和好评榜:将这2个类别整合进普通的菜品分类里,整个页面信息结构更整洁;但是这2个类别毕竟不同,所以a.在类别名称前增加icon;b.没有和下面的普通菜品连成一体,滑到底部就滑不动了,提示用户该类菜品和普通菜品是有区别的。

elm-20

 

10.公告,特定情形下的用户目的:

用户向上滑动列表时,公告也跟着往上移动(被遮住了)。这个细节很有必要,因为用户向上滑动列表时,TA此时的目的是浏览菜品,因此,公告仍然浮动在页面上便没有什么意义了,反而占用宝贵的屏幕空间。另外,公告是滚动形式的,很显眼,用户刚进入该页面时,会注意到该处有公告。

这个细节的启示:要注意思考用户进行某个操作时,TA这时的目的是什么(当然也要知道深层的用户目标)。凡是与该目的不相关的,能隐藏就隐藏,以便节省屏幕空间来显示更重要信息。

elm-21

elm-22

 

11.交互动效,视觉引导,加入购物车:

加入购物车时的这种交互动效很经典(当然也很普遍)很棒,将2处的变化(购物车和添加按钮)联系起来了,生动并且直观,同时在视觉上引导用户注意购物车的变化。

elm-23

elm-24

elm-25

 

12.布局,相同位置,不同情况不同显示:

底部的购物车工具栏,相同位置在不同情况时有不同显示:”¥30起送“,“还差¥20起送”,“确认美食”。另外,虽然前2者跟第3者性质不同,但是3种情况只会出现其中一种,因此不妨把它们“合并”放到相同位置,节省空间便于其它元素的布局,并且也不妨碍用户理解和使用。

elm-26

elm-27

elm-28

 

13.添加,删除,数量显示:

A.增加”删除“按钮,并直接放在”添加“按钮旁边。用户可以轻易修改数量,而不用进入购物车页面修改了,非常直观易懂也非常方便;

B.在侧边栏的类别上也显示数量,用户可以清晰地知道各个类别点了几份,考虑周到。

elm-29

 

14.修改数量:

A.变输入为选择:提供常用的数字选项(不常用的就在下面输入),用户直接点击即可,方便用户添加数字,而不需要用”憋屈“的键盘输入。体现了”减少文字输入“的思想;

B.将”删除美食“整合到列表里,页面布局更简洁。

elm-30

 

15.图片,头像信息,布局:

将头像等信息放在图片上,既可以表示是该用户发的照片,又可以让评论内容区信息更简洁;

elm-31

 

16.视觉顺序,重要度,评价人:

在评论区,用户最关心的是评论内容,”评价人“不重要,所以放到后面,星评等用户关心的信息放到前面(视觉顺序是从左到右,从上到下)。虽然头像等信息放在右边,用户会有些许不习惯,不过总体利大于弊。

elm-32

 

17.未注册时,注册登录合二为一:

对于尚未注册就进行登录的用户,饿了么自动创建新账户(并且登录),而不需要进入另外的注册页面。a.允许用户犯错;b.将注册登录2个步骤合二为一,非常人性化,非常智能!!

elm-33

 

18.列表(信息)分组,帮助理解:

将列表分组归类,帮助用户理解信息获取信息,同时在视觉上也产生了变化,减少单调枯燥。

elm-34

 

19.选择代替输入:

a.提供常用的文字条目让用户可以直接点击,而不需要键盘输入,非常便捷、非常贴心!

b.悬浮标签栏紧贴输入键盘的交互细节也值得学习,不会被弹出的键盘遮挡,也更容易理解。

elm-35

 

20.星评,文案,智能地变化:

很有意思的交互细节:给出的星数不同,相应的星星状态和提示文案也智能地变化,”极差,失望,一般,满意,惊喜“。这种方式非常值得学习!!

elm-36

elm-37

 

8.2需要改进的地方

1.重复红包,无事先提醒:

发的是同一个红包时,应该提前提醒 or 不显示发红包,但是系统没有事先提醒,容易导致用户犯错。

elm-38

elm-39

 

2.点击瞬间无反馈,选中项:

点击的瞬间,用户的视觉还停留在点击的地方,但是这时没有及时给出反馈(即没有给出选中项上的反馈)。虽然页面在发生变化,但这个变化向用户传递的信息只是:程序已经在执行命令了,但是至于选中了什么,不好意思,你还得看其他地方(筛选栏)!

关于选中项的反馈 跟下面是一个道理:点击列表页的某行条目,某行条目背景颜色会发生变化,以表示用户的点击是有效的。饿了么既然在点击列表瞬间有反馈,为什么在点击选中项不给用户反馈啊?!

elm-40

elm-41

 

3.购物车,页面跳转,清空购物车:

A.点击购物车工具栏,跳转到新页面(美食篮子页面)。缺点:”进入了另一个房间“,增加了跳转层级。

优化建议:参照百度外卖购物车的展开方式,即不打开新页面,而是一个从底部向上的半屏弹窗;同时限制弹窗的高度,留出一定的空白,当菜品条目较多时,可以滑动查看更多。

B.缺少”清空购物车“的功能,用户有删除的需求时比较不便,尤其是组团一起订餐、菜品种类较多时。

优化建议:增加”清空购物车“的功能。

elm-42

elm-43

elm-44

 

4.布局,所属关系:

这样的布局(“联系客服”和“投诉反馈”放在餐厅下)会让用户误认为“联系客服”和“投诉反馈”是商家的(而非饿了么的),跟用户心理模型严重不符。虽然用户用过一次后就知道了,但是这不是一个好的布局,是妥协后的结果。

elm-45

 

5.联系客服页面:

这个页面也太应付了吧?!不论是交互细节还是视觉!完全不像是同一个App里的!

elm-46

 

6.用户反馈页面,上传图片:

建议增加上传图片功能。因为有的问题用文字描述比较麻烦,看图片一下就明白了,尤其是反馈BUG。另外,该页面视觉上太马虎了(间距问题)。

elm-47

 

7.自动计算,时间:

现在的设计方案导致的情况是,要比较准确地填写送餐时间的话,用户必须事先记住or查看下单时间,然后再根据现在时间对比计算一下,再选择送餐时间。但是用户通常不会去记忆下单时间的,而现在的界面上要查看下单时间的话,必须先退出点评时间的弹窗,如此一来很不方便,是一个“反人类的交互”。

因此建议:显示下单时间和现在时间,系统自动计算送达时间,默认显示计算出的时间给用户选择。

elm-48

 

8.实时状态,餐厅已接单,配送中:

目前的设计方案导致的情况是,就算餐厅已经做好外卖并且已经在配送的途中了,但用户看到的只是“餐厅已接单”,不了解饿了么状态模式的用户容易误以为餐厅只是刚接单or正在做菜但还没有配送,因此容易额外增加用户的等待焦虑。因为从餐厅接单到送达用户手中,中间还有餐厅接单–餐厅做菜–配送中的过程,所以这也会给用户带来信息不确定的焦虑感。所以增加“已送出”的状态提示非常有必要,就看技术上的实现难度了。

建议:增加“已送出+时间(几分钟前)”。

elm-49

elm-50

 

9.送餐速度最快,距离最近,反而疑惑:

现在的方案:”送餐速度最快,距离最近“2个筛选项都有,并且放在一起。

”距离最近“的出现不仅很鸡肋,反而会让用户疑惑:”这个送餐速度不是指总时间吗?!如果是指总时间,还要距离最近干嘛?如果不是指总时间,那我还要结合什么指标来判断哪个的总耗时最短?“

建议:去掉“距离最近”的筛选项。

elm-51

 

10.提示不及时,优惠信息:

系统已经优惠了,但是在添加时没有提示,在结算时才提示。

这种情况会导致:看到购物车上显示的金额不是优惠价时,一部分用户会误认为没有优惠,从而放弃。

优化建议:直接显示优惠后的金额,并提示已优惠XX元。

elm-52

elm-53

elm-54

 

11.文案,总价:

文案”美食总价”因为含”总价“2字易被误认为是合计总价。建议改为“美食价格”。

elm-55

 

12.合计金额,数额不同,文案:

订单详情页合计金额跟下方条目金额之和的数额不相等(红包的优惠信息没有显示出来)。

优化建议:下方子条目应显示所有优惠(包括红包金额),同时“合计”改为“实际支付”或者“合计(实际支付)”,更直接易懂,用户最关心的是自己实际支付了多少钱。

elm-56

 

13.没有”全部”,选中后不能切换到全部:

没有”全部”选项,选中某项后不能切换到全部。

优化建议:增加”全部商家“。

elm-57

 

14.条目顺序,饿单备注,常用信息:

饿单备注为常用项,布局顺序应该突出,方便用户点击。现在的方案,“饿单备注”跟不常用的条目放在一起,不方便找到。建议放到联系方式下面更为合理。

elm-58

 

15.检查更新,文案:

饿了么现在的方案:仅看文案(“v5.1.1″)无法判断是否有新版,还需要用户做进一步的操作(点击检测更新)才知道是否有新版本,然后再决定是否更新。而且文案(“v5.1.1″)并不友好,也不是用户想要知道的。用户想要知道的很简单(当前版本是否为最新版本?)并不关心具体的版本号(占比较小的专家型用户除外)。

因此可以优化为:”检查更新“改为”软件更新“,系统自动检测是否有新版本,并且提示文案改为“已是最新版本(v5.1.1)”/“有新版本(v5.2.0)”,括号标注版本号是为了兼顾少数的专家型用户,点击后弹窗提示已是最新版本/确认更新。

elm-59

————————————————————-

我的新浪微博:行者小一2008

我的简书:行者小一2008

我的LOFTER:http://xingzhexiaoyi.lofter.com/

欢迎关注,欢迎学习交流。

未经允许不得转载:IAMUE_专业交互设计平台 » 饿了么App交互设计分析

交互设计问答社区

寻找答案发起提问