[Web App]必胜客宅急送产品设计思路介绍[转]

O2O模式是餐饮业在移动消费趋势下主动拥抱互联网的方向,迎合餐饮消费者从以往经验判断为主转变为依靠移动设备、LBS、社交网络进行立体决策的过程。App成为联系消费者和餐饮业的重要纽带,承载着在O2O双向流程的闭环中加深消费者对品牌的认同和感情认知的作用。

FaceUI与必胜宅急送合作推出的手机订餐web版是对其O2O策略的补充和深化,通过Html5的技术支持,手机web可以直接适配手机屏幕并实现类似App客户端的体验。整个产品的实现过程,就是对产品背后动机的挖掘和把握,随着项目团队对动机的理解,设计思路也随之发生了转化。

产品的客户方动机

即为什么要做这个产品,客户方对此产品的定位和要求。不同定位的产品在功能或设计方向上会存在较大的差异,最常见的就是跟风型产品,如早期的各式IM、再到繁多的微博,还有如今火热的即时通讯工具,尤其移动平台的低成本高效率导致扎堆产品应接不暇。这样的产品更多是抱着分一杯羹或他有我也要有的心态定位,更注重被模仿对象的还原度,而不是个性特色。

必胜宅急送的手机web则是定位于O2O方向的探索。相较于传统本地app,手机web app可以较为轻松地实现跨平台的轻量级应用,脱离于app商店的web降低了初级用户或中老年群体的使用门槛。对客户方来说,依靠url作为入口,手机web可以便利地利用公众平台、朋友圈等社交传播网络进行推广。所以虽然手机web app仍然存在一定缺陷,在扩展消费者接触面、提高品牌自身竞争力等方面也极有潜力,这也是产品的功能目标和期望。

图片1

产品的设计动机

除了实现产品功能概念外(有效性),另外就是要减少消费者从登录网站到预览下单的时间(效率)和让消费者接受并喜欢使用宅急送(满意度)。有效性、效率和满意度是评判产品可用性的标准,在以用户为中心的产品设计中,作为衡量产品质量的指标。产品设计师基于对市场、用户、产品的理解和积累建立符合可用性诉求的价值倾向,并贯穿在产品之中。

固然好的设计师擅长如何让产品、功能与用户需求有机结合,但在有些问题上,难以避免与其他项目成员、与客户之间的分歧,这时候对用户动机的研究就成为判断的依据。

产品的用户动机

想要立即得到设计师、客户都满意又符合可用性要求的完美方案是不可能的,所以结合项目进度要求,设计团队引入了低保真原型的可用性测试进行循序渐进的设计迭代,力图通过探明用户的动机解决设计上的关键问题。

对于可用性测试的一个误解是,可用性测试需要花太多时间和金钱。误解的前提是一个成熟完整的测试可能需要若干天数进行准备和测试,再经过一定时间才能整理数据并得出分析结论,由此带来的时间成本和招募成本不利于项目进行。

宅急送手机web的设计团队在线框原型阶段,利用AXURE制作手机上可以运行的低保真原型,在中间阶段进行快速的可用性测试。测试后的结果会及时反应在设计迭代上,成为下一轮可用性测试的材料或补充,几个额外的问题不会影响测试单元的时长。被测用户也就近从项目外的同事或朋友中筛选,测试任务结束后被测用户的满意度评价作为每轮的组成部分加以收集,最终形成有指导价值的数据样本库。

即使快速的迭代的低保真测试,招募的用户标准也非常重要,确保测试结果对产品的有效性。团队从宅急送品牌的产品特征、用户个性特征、生活方式和价值观、对技术产品态度几个方面考量,制定招募标准:年龄18-35,近半年网络订餐超过3次、智能手机使用时间超过半年、手机浏览器或app每周使用10小时以上等。

与招募同时进行的是测试脚本的设计,为被测用户赋予场景化的环境,并梳理任务顺序以符合真实习惯。一种任务类型是观察,让用户熟悉界面并对界面进行反馈。另一种任务是操作,设置产品的典型任务,如点三份芝香满溢比萨由用户完成。

因为线框原型在功能、视觉方面的局限性,用户的困惑点相比于上线后的测试可能更多,所以执行过程中的发声思考是非常有效的工具。比如首页某一版方案测试时,可以听到如下用户声音:

图片2

“要不是看必胜宅急送的logo,我还以为是个图片类网页”

“我不清楚这个优惠活动图片跟优惠列表具体有什么分别”

“点击‘预览菜单’后以为会进入菜单,没想到还要再选一次菜品种类”

“我会首先看优惠列表中有没有自己喜欢的东西,如果有就直接订购”

其中部分困惑(12)是线框原型带来的测试“噪音”,难以对当前版本提供实际的启发和引导,但34则反应了首页在布局和任务流程上存在的问题。被测用户进行发声思考使得行为背后的内容,如理解、计划等转化成明确、能被观察或分析到的数据,沉默的内部心理行为可以帮助测试者从用户角度发现问题本质。

综合其他用户和后续迭代反馈,最终的首页方案如下:

图3 设计师对原首页方案上的方向是:简洁明了,突出订餐点单的核心功能,并在首页呈现用户所需要使用的功能入口。但在测试中发现,用户进入首页后受三种不同方向的动机驱动:

1)已有明确的订餐目的和菜品,首页需要解决的是快速完成下单流程;

2)浏览型用户会期望还原线下餐厅一样随心所欲翻看菜单的体验,再确定菜品和下单与否;

3)而对于利益型用户,优惠活动和优惠力度最容易勾起他们的购买欲望。

所以最终方案在保持订餐的核心功能外,对于不同的入口动机,利用web不局限一屏浏览的特点,将菜品类目和优惠列表同时铺展,形成一个信息丰富的展示空间。

从测试中获得的另一项有价值的发现帮助解决了项目团队内部的分歧。点餐界面存在设计师出于不同考虑的方案:方案1(左边)从用户认知出发,点击“订购”后展现当前菜品数量并要求用户进行确认动作;方案2(右边)站在效率的思路,简化点餐的操作步骤,点击即增加一份菜品,并利用角标的方式帮助用户了解当前数量。

图片4 统计测试数据后,看起来更复杂的方案1的相关任务完成率较高,对比采用方案2的任务完成率较低,被测用户的发声思考也验证了这个结果:被测用户在使用方案1时更明确衔接动作,而对方案2会产生疑惑。

方案1中下单的操作比方案2多了至少2步,但整体流程上清晰明确,就像线下点餐那样,对每个菜品的数量予以确认,用户自由度较小,很难从当前菜品选择中跳出去。购物车的存在允许用户前往结算界面并支付,弥补了解总体订单情况的便利性。

方案2最大的优势是在单品数量较少(一份披萨的量较大)的情况下有较高的操作效率,在熟悉操作的情况下即使多份也不逊于方案1。但是随意点击就增加菜品带来的自由度让用户感觉会偏离任务,可以通过购物车减少菜品数量对用户来说也是个隐藏操作,所以最终用户很容易在方案2中产生困惑。

最终上线的点单界面如下:

图片5

方案1缺少了解订单总量的缺点利用上方的悬浮通知优化。用户的动机是获得需要的菜品,所以不经确认的下单动作会让用户失去安全感。对于符合用户思维模式的流程,即使步骤略多,在执行时因为习惯或直觉的引导,也不会带来太多注意力的分散或负担。用户未必能感受到方案2带来的效率提高,但一旦出现不完善就会招致不满。

同样在用户不需要为单一目标集中注意力的时候,特意突出的元素也是画蛇添足。这是被否决的结算界面原型:

图片6

本地app的样式不适合web app,网站上悬浮按钮的设计让用户感受不快,过大的面积也影响清单的查看。用户并不是任何时候都准备下单,只有在核对完自己的菜品和数量,形成支付期望后,“确认下单”才会成为他们准备点击的对象。

 结语

对动机的挖掘并不是非黑即白的单选项。在低保真原型测试的支持下,通过动机把握,确定产品哪些元素是有益的,哪些元素是无益的,最终形成效果显著的产品方案,获得品质和效率上的双赢。

转载于:https://www.cnblogs.com/helenR/p/web_app_zhaijisong.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265297.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yara 模式匹配 android,YARA——恶意软件模式匹配利器

YARA是一款旨在帮助恶意软件研究人员识别和分类恶意软件样本的开源工具(由virustotal的软件工程师Victor M. Alvarezk开发),使用YARA可以基于文本或二进制模式创建恶意软件家族描述信息,当然也可以是其他匹配信息。YARA的每一条描述或规则都由一系列字符…

12.6今日任务

查询资料,查询如何包装成软件转载于:https://www.cnblogs.com/IENHOLT/p/10147742.html

C语言extern关键字(去使用外部全局变量、函数)

参考:C语言正确使用extern关键字 作者:xingjiarong 发布时间:2015-08-14 08:37:33 网址:https://blog.csdn.net/xingjiarong/article/details/47656339 目录1、引用同一个文件中的变量2、引用另一个文件中的变量3、引用另一个文件…

使用Raphael实现html中绘图

2019独角兽企业重金招聘Python工程师标准>>> 首先&#xff1a;下载Raphael的javascript库&#xff1a;http://raphaeljs.com/。或者在html页面<head></head>&#xff1a;如下 <script src"http://www.zfanw.com/blog/raphael.js"></…

ITSS认证对企业的意义

在数字化时代&#xff0c;信息技术已经成为企业发展的重要驱动力。ITSS&#xff08;信息技术服务标准&#xff09;认证&#xff0c;作为信息技术服务领域的权威认证&#xff0c;对企业的意义非凡。本文将从提高服务质量、提升企业竞争力、优化管理体系、保障信息安全等方面&…

vivo手机刷机鸿蒙,捡到vivo手机如何刷机

捡到手机&#xff0c;首先建议归还给失主&#xff01;然后如果需要刷机的话&#xff0c;建议可以清除账户密码&#xff1a;可以尝试在手机关机状态同时按住音量上键以及电源键3到4秒手机出现vivo手机标志后&#xff0c;放开按键进入recovery模式&#xff0c;先选择wipe data/fa…

UEditor 百度富文本编辑器 .Net实例

转自 http://download.csdn.net/download/hdsslxl/6740605 1、UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题。 2、内附完整demo实例&#xff0c;附带txt讲解说明及UEditor常见问题解决方案。 3、已经调试好的百度文本编辑器实例&#xff0c;用户体验不错&#…

详解ROM和RAM

参考&#xff1a;详解ROM和RAM 作者&#xff1a;嵌入式实验楼 网址&#xff1a;https://mp.weixin.qq.com/s/FhUxMLeAxkhWe5m-gV_hMw 目录1、只读存储器&#xff1a;ROM2、随机访问存储器&#xff1a;RAM内存是计算系统最重要的元素&#xff0c;因为没有它&#xff0c;计算机就…

ubuntu解压和压缩文件

.tar 解包&#xff1a;tar xvf FileName.tar打包&#xff1a;tar cvf FileName.tar DirName&#xff08;注&#xff1a;tar是打包&#xff0c;不是压缩&#xff01;&#xff09;———————————————.gz解压1&#xff1a;gunzip FileName.gz解压2&#xff1a;gzip -d…

python递归查询并列出目录

第一种方法&#xff1a;>>> import os #导入模块 >>> os.walk(/tmp/test/testdir) #os的walk函数对象 <generator object walk at 0x1e8a960> >>> for i in os.walk(/tmp/test/testdir): #for循环打印出目录的文件 ... print i ... (/tmp…

html 输入框防止自动记忆,网页输入框input填写内容自动记忆功能怎么去除

我们在做前端的html网页模板的时候&#xff0c;免不了要制作一些输入框&#xff0c;供使用者输入信息实现人机交互。一般情况下我们都会使用如下的HTML代码来生成单行输入框&#xff1a;这是一个很简单的HTML代码&#xff0c;其效果就是可以在前端页面输出一个输入框供用户输入…

深入理解STM32内存管理

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

django ORM中的RelatedManager(关联管理器)

关联管理器应用在 一对多的表 或者 多对多的表 多对多表中的用法: 在多对多的表中 正向查询 #基于对象的查询 #正查 # author_obj Author.objects.get(id1) # print(author_obj) #<Author object: 1 吴晓波> # print(author_obj.book_set.all()) #出版过的所有的书 …

html 手写字效果,canvas画布实现手写签名效果的示例代码

最近项目中涉及到移动端手写签名的功能需求&#xff0c;将实现代码记录于此&#xff0c;供小伙伴们参考指摘哦~HTML代码&#xff1a;手写区清除确定CSS样式&#xff1a;.mSign_signMark_box{padding: 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 au…

ADO.NET 快速入门(十五):ADO 应用转换为 ADO.NET

这是一个已经移植到 .NET 的 ADO 应用的例子。也演示了单向、只读、快速 DataReader 的使用。它演示如何使用 DataView 类从 DataSet 获取一个 Table 和 操作一个类似于旧的 ADO 记录集模型。请记得&#xff0c;ADO 记录集仅仅包含一个 Table 的数据&#xff0c;但是 ADO.NET D…

FTP云盘

参考&#xff1a;FTP云盘项目 作者&#xff1a;糯米啊啊 发布时间&#xff1a; 2021-08-19 10:34:05 网址&#xff1a;https://blog.csdn.net/weixin_43732386?spm1001.2014.3001.5509 参考&#xff1a;自制FTP云盘项目 作者&#xff1a;不说话的小脑斧 发布时间&#xff1a; …

html transform属性,css3 transform属性详解

CSS3变形是一些效果的集合&#xff0c;比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果&#xff0c;每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。CSS3的2D transform函数包括了translate()、scale()、ro…

UIApplication的作用

1.设置app图标右上角的数字2.设置状态栏的属性&#xff08;样式、是否要显示&#xff09;3.打开某个链接\发短信\打电话4.keyWindow : 访问程序的主窗口&#xff08;一个程序只能有一个主窗口&#xff09;5.windows : 访问程序中的所有窗转载于:https://www.cnblogs.com/gatsby…

PHP调用新浪API 生成短链接

我们经常收到类似于这样的短信&#xff08;如下图&#xff09;&#xff0c;发现其中的链接并不是常规的网址链接&#xff0c;而是个短小精悍的短链接&#xff0c;产品中经常需要这样的需求&#xff0c;如果在给用户下发的短信中是一个很长的连接&#xff0c;用户体验肯定很差&a…

Chrome如何下载网页视频

目录第一步&#xff1a;右键&#xff0c;选择「检查」指令&#xff0c;进入代码控制面板第二步&#xff1a;单击代码面板左上角红色标出来的按钮&#xff0c;然后鼠标移到左边视频上第三步&#xff1a;双击src后面的代码&#xff08;全部展开&#xff09;&#xff0c;复制粘贴到…