七步打造卓越的移动网站

标签: 卓越 移动 网站 | 发表时间:2013-08-06 13:55 | 作者:zchening
出处:http://www.geekpark.net/

作者头像
作者: zchening / 产品观察家
非著名产品经理,产品观察家,欢迎关注微信「idesign123」交流移动互联网、用户体验、设计创新,在虎嗅网、钛媒体、创业邦、互联网的一些事等发表数十篇设计文章。推崇好设计,更有爱。欢迎。
[核心提示]一方面是用户偶发性的需求,一方面却是开发者面对移动互联网海量用户的渴求,如何平衡这两者之前的矛盾呢?

现在手机上App很火爆,看到最近很流行的游戏很多人就会去装一个。可实际上不少应用都是一些偶发性的需求,比如我最近要租房子装了个58同城,可我不可能天天租房子,租完房子之后这个应用我就几乎不会打开了。想想我们平常经常使用的应用也就3-5个,微博、 微信、浏览器等,一般最多不会超过7个。普通人的大脑无法同时处理七件以上的信息单位,人们在列出必须记牢的事项上多半只列到第七项:一周有7天,音乐有7个音符,电话号码通常是7位数,世界奇迹是7个、七仙女、白雪公主和7个小矮人等。(更多请查看 神奇的7±2法则)

一方面是用户偶发性的需求,一方面却是开发者面对移动互联网海量用户的渴求,如何平衡这两者之前的矛盾呢?专为移动设备优化的移动网站是可行的方案之一。下面是几个案例。

2012年淘宝无线网站(m.taobao.com)的访问量增长了6.4倍,占淘宝流量的比例也从2%上升到11%,其中并不包含来自于App应用的访问。携程也是个很好的例子,其手机网站(m.ctrip.com)推出后订单成交量增加了5倍。携程通过向访问手机网的消费者进行了调研,对预订过程进行优化。并且采用了HTML5技术,访问网站可以很清晰的看到机票、酒店、航班动态、门票、火车篇、我的携程6个模块,看上去和APP非常像。如果别人的案例不具有说服力那我就举我自己的例子:回来后特意去看了下公司的网站(视频网站),移动设备的日均PV浏览量达到了40万!要知道,我们的网站没有针对移动设备做任何优化,而且这些视频在手机上都是无法观看的。

 

既然移动网站如此重要,那应该如何来优化移动站点,向手机用户提供良好的用户体验呢?这七条策略或许可以给大家一些启发:

1.考虑多元化场景

移动用户的访问场景经常是多元化的,公交车上、厕所、排队等人等各种场景都有,而且随时都可能被打断,更多的是利用碎片化的时间,所以网站简便快捷非常重要。可以利用数据分析移动用户最感兴趣的内容,切记避免大量文字的堆积。如果不能避免大量文字,也要注重排版,分成多个节点来显示。尽可能地压缩图片,帮助用户节省流量,加快载入速度。即使你的图片做的再精美但访问需要30秒那极有可能用户在看到网站之前就关掉了。电梯、公交车等场景还要考虑拥挤的空间,你的按钮是否足够大,流程是否足够顺畅简单,以至于用户单手也能完成。另外你还需要考虑当用户切换手机屏幕方向时(如由竖屏切换到横屏)你如何处理,是否需要对此进行适配,是否需要展示其他的一些内容(如图表)。还有就是通过文字、背景配色等方式,让用户在光线不足,甚至是阳光下也能有效捕捉信息。

或许有人觉得这些情况过于极端,但在极端情况下如果仍旧能保证良好的用户体验,这样高标准下正常情况的体验也会相应提高,同时超出了用户的预期,用户对产品的好感度也会增加。

2.简化导航,减少输入

导航的目的就是方便用户从大量内容中快速找到自己需要的内容。移动站点受限于屏幕尺寸和用户习惯,导航要尽可能少而精。如果内容过多时还需要在显眼处添加搜索框,支持诸如语音等方式搜索。如果你有两个导航方案不知道哪个更好,可以分别在两个时间点分别部署在网站上,看看页面访问量、持续时间等数据的变化来辅助你做判断,一切用数据说话。当然这并不是让你频繁改版,频繁的改版会让用户茫然无措。

3.为不同设备优化

考虑为不同的设备做优化,比如塞班手机或者低端手机、大屏智能手机、iPhone、iPad平板电脑访问时分别显示什么。利用响应式网页设计(RWD)等技术让页面自适应,同时针对不同的设备做不同的优化和响应(触屏、重力感应、定向等)。虽然前期实现成本相对大一些却一劳永逸,以后改动成本很小。通过HTML5等强化页面表现层次、加强多媒体信息的展示(取决于网站定位和性质,一般的网站不建议用过多使用多媒体资源),改善人机交互体验等。移动设备访问时可以通过重定向等方式引导到适合移动设备访问的站点。

另外,要提供其他版本的切换方式,如果用户用移动设备时需要切换到电脑版通常是因为他需要用到电脑版中存在但移动版舍弃的部分功能,也有可能是对用户的设备进行了错误的判断。切到电脑版之后也要提供让他可以方便切回移动版的选项。比如移动购物网站,手机上搜索对于用户来说比较麻烦,所以大家更喜欢直接去逛,因此对于无线的导购产品来说就需要把直接、精准、精品的货品交到客户的手上。另外,手机上通常小额的商品比如说彩票下单率比较高。这些都需要针对不同的设备做出优化。

4.考虑跨平台问题

对于部分特殊的网站(有用户ID系统和同步需要),还需要考虑跨平台同步时的体验。如何让用户在多个设备间可以顺畅的切换。对于移动购物网站,不少用户因为支付安全顾虑和网银习惯在手机上下单(可能在等公交车时下单),然后再用PC去付款(比如下班回到家)。这时候如何让用户在跨平台时流程顺畅特别重要。再以多看阅读(虽然不是网站)为例,当你下班前在等公交车时用手机上看《乌合之众》看到第X页,晚上躺在床上拿出iPad看时会自动从服务器获取最新的阅读进度。

5.转移复杂性

所谓转移复杂性,就是让每个平台(手机、平板、PC等)发挥自己最大的优势。比如移动平台(手机、平板电脑)等可以拍照,可以随时随地使用,能够精确识别位置和方向,但不方便输入大量文字,显示信息较少,而且数据传输速度有限。但这些缺陷却是PC的优点。

比如,在移动网站上输入大量文字是一件非常痛苦的事!如果你的网站经常需要用户输入大量文字,你可以给用户一些建议,将他引流到PC网站上。或者采用语音的方式来输入文本。另外你不需要把PC网站上的内容原封不动地搬到移动网站上,而且这通常来说也很愚蠢。你可以通过数据分析和移动场景分析,来看看移动网站上用户对哪些内容更感兴趣。在一些平台上很容易的事情在其他平台上往往会变得异常复杂,如何充分利用每个平台的优势,这需要网站设计者仔细考虑。

6.简化业务流程

结合网站业务特性,仔细考虑如何简化流程,让用户在站点上方便地完成操作。比如网站在PC上注册时需要填写大量信息,在移动网站注册时能否填写尽可能少的信息(比如移动设备访问时推荐用手机号码注册),不用填验证码等。

7.培养热心用户,持续改进

互联网产品永远都是Beta版,你会发现也许之前设想的很好的方案结果到用户手里完全不是那么一回事。那就去听听用户的声音,根据用户的建议迭代开发,当然不是所有的用户都愿意给你提供建议,最好培养部分忠诚用户给他们优先试用权和其他激励。不一定是物质上的,有时候他们的意见得到采纳也是对他们莫大的鼓舞。当然,这并不意味你可以随意的添加功能一开发完就可以让他们使用。在开发前和原型阶段就可以邀请部分用户来测试,这样避免后期开发资源的浪费。开发完也要进行必要的自测,避免到他们手上的是一个有各种bug完全不可用的产品。

如果有更多想法欢迎关注我的微信账号 idesign123 共同交流移动网站设计。

极客观察均为极客公园原创报道,转载请注明原文链接。

原文地址: http://www.geekpark.net/read/view/185903

关注极客公园,即时获得最新内容: Twitter | 微信:极客公园 | 新浪微博 | 花瓣网 | 人人小站 | Google+ | 点点

相关 [卓越 移动 网站] 推荐:

七步打造卓越的移动网站

- - 极客公园-GeekPark
非著名产品经理,产品观察家,欢迎关注微信「idesign123」交流移动互联网、用户体验、设计创新,在虎嗅网、钛媒体、创业邦、互联网的一些事等发表数十篇设计文章. [核心提示]一方面是用户偶发性的需求,一方面却是开发者面对移动互联网海量用户的渴求,如何平衡这两者之前的矛盾呢. 现在手机上App很火爆,看到最近很流行的游戏很多人就会去装一个.

Google移动网站设计原则

- - 36氪 | 关注互联网创业
Google刚刚 发布了由Google与AnswerLab联合打造,名为《Principles of Mobile Site Design: Delight Users and Drive Conversions》的移动网站设计原则白皮书. 白皮书提到,为了愉悦用户和推动转化率,移动网站设计应该遵循25个设计原则.

百度调整移动搜索排序算法,鼓励网站移动化

- - ITeye资讯频道
近日, 百度宣布开始对移动搜索排序算法进行调整,鼓励网站运营者与站长进行手机页的优化. 同时,还将为站长和开发者提供手机建站、提交和优化等全套免费服务. 此前,谷歌也宣布其 GoMo服务与DudaMobile合作,免费提供网站移动化服务. 据了解,2011年中国移动互联网用户规模达4.3亿,环比增长50%,但传统网页的终端适配一直未能得到有效解决,影响了这一移动用户群体的应用体验.

创意产品闪购网站Fab.com推出移动应用

- kxxoling - 36氪
创意产品闪购网站Fab.com今天推出了一系列适用iPhone、iPad和Android设备的移动应用. Fab.com究竟是一个怎样的网站呢. 公司CEO Jason Goldberg对此作了一番描述:“我们选择一些喜欢的创意产品放在网站上,我们并不会将这些产品分类,其中就有风筝,自行车,扬声器,地图等等.

八个移动产品设计必备网站

- - 天涯海阁|Web2.0Share
好吧,又在 爱库上发现了很棒的 专辑,和大家分享. 移动产品设计人员一定需要大量的使用其他各类应用,并且需要在产品设计时大量参考其他的移动应用的产品设计,这时如果有一些网站可以将很多优秀应用的不同流程分类展示,那一定是移动产品设计人员必备的网站. 一、Patterns of Design. Patterns是一个分享ios应用UI界面的网站,专注于分享iOS应用UI界面的细节,按照设计元素进行分类,按照iOS常用功能对各类UI进行分类展示.

移动友好型网站将访客变为客户

- - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
发表者:Masha Fisch, Google移动广告营销部. 身处一个连通无处不在的世界,用户希望在他们有需要时,尤其是他们在四处奔走时,找到想要的信息. 我们知道,他们在使用手机浏览网页时,也希望如此,所以我们进行了一项调查,以深入了解用户在使用手机上网时的期望与反应. 非常有趣的结果是,61%的用户指出,如果在某个移动网站上无法立即找到所需信息,他们会快速转向另一个网站.

使用 Weinre 调试移动网站及 PhoneGap 应用

- - 博客园_梦想天空
  在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者. 但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了. 因此,移动开发人员都希望能有 Mobile 版本的 Firebug 或者 Chrome 开发人员工具. Weinre 就是这样一款工具,可以帮助我们调试移动网站及 PhoneGap 应用.

制作移动网站的10大方案

- - 鲁塔弗的博客
我想给博客优化手机访问效果,最初的想法是想研究一下UC浏览器是否开放Api( UC会解析网页,裁剪之后重新拼装成适合移动端访问的布局,原理和目前火热的read it later 一样),我只需要提供一个url,api自动为移动端优化. lutaf.com是基于 bootstrap css框架. bootstrap本身也提供流式布局,可以做一个web/mobile 自适应的页面效果,这个会大大提高css编程的复杂度,对css编程技巧要求较高.

2小时学会jquery mobile开发移动网站

- - 鲁塔弗的博客
jQuery Mobile: http://jquerymobile.com,一个基于jquery的html 5移动网站框架,用它做出来的网站界面和App风格类似. 方案选型过程见 http://lutaf.com/145.htm. 优点1:开发特别简单,不需要美术资源,甚至不需要太多css/html编程经验,甚至不需要js编程技能,普通程序员就能很快学会制作出 美观大方的 mobile site.

地方网站的移动互联网怎么做?

- - 互联网的那点事
几年前许多人在问:微博对BBS的影响有多大. 最近很多人在问:移动化会不会影响地方社区. ——新旧产品是革命性的替代还是互为补充. 我们分析2011年至2013年发生的事件和试错的结果,可以取得比2011年清楚的多的预测,这就是进步. 从当前的已有资讯中,我们可以选取最值得关注的一些事实:. 1、移动互联的盈利模式尚未清晰.