忘记web的经验:以场景设计优先

有丰富的PC互联网产品设计经验的产品经理转型做移动产品设计,若照搬原有经验可能行不通,会犯错误。很多时候需要放下“包袱”,忘掉经验,从头开始。

有时候经验是一种负担,比如你恰巧拥有比较成熟的互联网经验,却又必须向移动互联网转型的时候。曾经在网站产品设计上,我们积累了很多的方法论。然而正是这些方法论让我们在设计移动 App 的时候掉进坑里无数。以下是我从坑里爬出来得出的一点感悟。

忘记web的经验:以场景设计优先

发布界面(左:3.0版,右:3.5版)

在 Web 的时代,我们更多的关注是用户群体的差异,却很少关心用户使用的场景,究其原因其实是使用 Web 的场景总是非常固定的。而在移动互联网产品上, 场景之间的差异已经远远大于人群的差异,如果直接把一个在桌面上输入的表单搬到手机上,在地铁拥挤的人群中让用户填写,恐怕这个产品经理得被问候全家。

拿百姓网最重要的功能发布举例,在 Web 时代,我们更多考虑更多是如何让用户输入文字和选择更加简单,我们拼命的压缩流程,减少输入框,力求提高成功率,一度我们曾经把发布成功率提高到惊人的 87%。但所有的这一切设计和经验都是围绕 Web 来的。

所以同样的思路在 App 设计上就不行了,最早的一个版本我们和网站一样,必须先选分类再填写内容,然后在内容上我们更强调的是文字输入而不是其他的方式。第一个版本用户出错率高达 65%,我和我的小伙伴们直接惊呆了。

接下来的调研中我们发现最大的问题在于用户使用的场景。没有了键盘、宽带和大屏幕,用户在公交、厕所、抽烟的间隙中需要完成之前那么对于 Web 来说“简单”的操作,几乎是不可能的。

这时候其实忘掉之前的经验,反思业务的本质可能更能搞明白。我们的最终目的是希望用户能把生活需求简单的发上来,那么为什么不重头来思考很多问题:比如为何需要用户自己选择分类?为什么不能用照片替代文字的描述减少输入的不便?当我们回想这些最本质的内容的时候,才发现我们沿着惯性的思维走的已经太久了。

在新的 App 设计中,我们大胆的将拍照功能的优先级提到最高,减少用户的输入。除了内容和价格,其他选项全部自动化,为的就是让用户在公交车上拥挤的环境中也能顺利的发出去。同时在调研中发现用户发布信息都是即兴的,会一时无法拍照或者漏掉一些内容,我们还会定时提醒用户来补充内容,不像网站发布是一锤子买卖。

结果还是很让人兴奋的,当你把 App 当成一个遥控器(不是国产机顶盒那种啊!)而不是一个缩小的 Web 来设计,结果还是令人兴奋的,出错率基本上从 65% 降低到不足 9%,有图片的信息从 33% 上升到 55%。

所以在转型移动互联网的过程中,忘记你的经验有时候反而会得到更好的效果。

贴近移动环境:内容大于导航

其实分类信息和网址站很像,用户都非常依赖导航。他们习惯了上来就先在浩如烟海的导航中寻找自己想要的东西,然后再慢慢的浏览。

我们之前的版本设计里面也采用了九宫格的方式,因为这个最符合“导航”的特性。但是却忽略了在移动设备上,用户更需要直达信息而不是每次都做一个导航选择。设想如果每次启动新浪微博都让你先选一个分组才能看到内容,会不会有掀桌的冲动?

在早期版本上线之后,用户对这个九宫格吐槽最多的是:找不到分类 —— 其实真的不怪用户,谁能知道二手自行车竟然在车辆买卖里面?不知道里面有没有更新 —— 因为每次打开界面都一样。每次都得点击次才能看到信息,很麻烦 —— 每次打开都要面临选择,怎能不焦虑呢?

所以我们大胆的改进了首页,根据用户的喜好和地理位置直接呈现信息,同时辅以周围用户浏览习惯的聚类推荐,这样用户上来就能看到信息。而有更多精确需求的用户则可以借助搜索直达内容。

从内测的用户反馈来看,大家都对上来就能看到周围的信息这一点感到舒服了许多,至少在没有明确的需求时能随便逛逛。

不妨打开你手机上安装的比较知名的 App,又有几个不是打开直接看到内容呢?

你不需要重新发明轮子:在已有的功能上微创新

其实你不需要重新发明轮子,在有竞争对手的环境中,许多点子已经被人做过了。这时候最重要的是找到现有解决方案的不足,使其成为你的新轮子。

在许多 iOS 的产品都会有提示评分的功能,然而这些评分无一例外的都是在用户使用几次产品之后,选项基本上是“求好评”“下次再说”“别再烦我”。而当我们第一个版本启用这种方案的时候,得到的评价很少而且多半是负面评价。如果这时候得出结论说这”功能一般,那么可能就会丢掉一个绝佳的创新机会。

在我们的思考中,用户只有在这个产品真正帮助到他们的时候他们才会真心的愿意给你好评,如果还没有完成体验了你的产品,那么凭什么给你评价呢?另外就是如果用户遇到不爽的时候你还要别人给好评,不给一星才怪呢。

所以在这个基础上我们重新选择了弹出的时间点,在用户拨打 3 次电话之后和删除信息之后才弹出这个提示,这意味着我们的用户已经完整的体验了我们的产品。

同时我们还在反馈的选项上做出了改进,除了求好评之外还增加了求吐槽,这样一来能更合理的疏导用户的情绪,而且能获得更多的反馈。

当这个新功能上线之后,这个版本的好评几乎超越了之前所有版本的好评总和,而且几乎都是好评。而收到的反馈比之前高了 4 倍,并且在我们客服及时的沟通下,这些用户的问题都得到了解答,成功的挽留住了不少用户。

所以你不需要重新发明轮子,只需要在现在的基础上改造成适合你的即可。

上面只是我们我们在从互联网转型到移动互联网上一些吃过的亏,希望和大家分享能让没有掉进来的同学少走点弯路。

放下自己的所学重新去认识这个浪潮的变化是很难的,我们也在慢慢的摸索。这里推荐一本老书,Luke Wroblewski 的《MobileFirst》。虽然年代有点久远,但是其中很多的洞见能让我们重新来反思很多问题。

别因为手里有把锤子就把所有的问题当做钉子去砸,送给所有在转型路上的 PM 们。

时间: 2024-11-08 22:08:44

忘记web的经验:以场景设计优先的相关文章

基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象,用来简化页面代码非常方便,本文主要介绍在我的MVC框架里面,如何使用bundles来简化页面的代码的. 1.常规的页面代码 我们知道,随着使用更多的一些效果,我们可能不断引入一些新的JS和CSS文件,已达到Web界面更好的表现效果.这样也就逐步增加了文件代码的行数,造成相对比较臃肿的场景,如下面的我

基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理

在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的处理,可以提高我们程序界面的美观性和友好型,本文主要介绍在我的Web开发框架以及相关的扩展Web应用中用到的一些代表性下拉列表的处理场景,希望给大家做个参考学习. 1.固定下拉列表的处理 代表性的固定列表有人员性别的处理,一般为男.女两种,而且为了方便,一般用文本直接使用,如下效果所示. 而它们的页

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

基于Web在线考试系统的设计与实现

这是一个课程设计的文档,源码及文档数据库我都修改过了,貌似这里复制过来的时候图片不能贴出,下载地址:http://download.csdn.net/detail/sdksdk0/9361973   数据库原理课程设计说明书              基于Web在线考试系统的设计与实现             目  录   1 课题背景与意义.3 1.1课题开发背景.3 1.2 课题开发意义.3 2 系统需求分析.4 2.1 项目要求.4 2.2 开发方案.5 2.3开发环境.5 3 总体开发.

商务Web应用程序的界面设计

商务Web应用程序的界面设计 商务Web应用程序的设计常常被人们所忽视.我看到许多程序,它们既不符合商业目标,也不满足用户需求,它们有很差的用户体验,并造成了商业利润的损失.更夸张的是,有些设计师根本没有参与整个程序的开发流程,而是把全部职责都推给了开发人员. 对于擅长前端和后台技术的工程师来说,他们缺乏设计能力,很难完成这项艰巨的任务.不满意的消费者.沮丧的用户,以及失败的项目,也就自然而然地出现了. 接下来,我们将介绍"商务Web应用程序"界面设计的基础知识.一般来说,人们可以提供

Java Web技术经验总结(二)

该系列的第一篇在此:Java Web技术经验总结一,主要包含我在日常工作中的经验和心得体会(如有不足之处欢迎指出). Maven的使用经验 依赖的scope有test.provided.compile等.test:一般是单元测试场景使用,在编译环境加入classpath,但打包时不会加入,如junit等:provided:表示容器或者JDK已经提供该依赖,打包时不需要打包入war:compile:默认范围,在工程环境的classpath(编译环境)和打包(如果是WAR包,会包含在WAR包中)时候

基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度

在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效果,如果DataGrid能够根据窗口尺寸进行伸缩,效果应该好很多.本文主要介绍DataGrid控件实现自动适应宽带高度的操作. 首先我们需要定义一个resizeDataGrid的扩展函数,方便在页面里面进行调用,扩展函数定义如下所示. //datagrid宽度高度自动调整的函数 $.fn.exten

基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这样给我们扩展使用有很多的不方便.基于这个原因,我想如果能够独立一个模块,自动根据图标生成图标CSS样式文件,并存储相应的记录到数据库里面,方便我们查询显示,那样我们使用起来就很方便了,最后有了这些数据,只需要做一个通用的图标选择界面,并可以在很多地方重用了.本文正是基于这个思路,开发了一个图标管理模