总结:
从我们上次发布的研究数据到现在,移动网站和apps的用户体验已经有了很大的提升,但是还有很长的路要走。一个专用的移动网站是很有必要的,apps具有更高的可用性。
在此不用再重复“移动年”这样的噱头。如果一定要说的话,去年一年移动的发展主要体现在移动使用的增长以及移动网站和apps的可用性提升。现在是时候重新设计你的移动网站了,因为你之前设计的版本可能已经无法满足用户日益增长的需求了,服务质量已经无法达到用户的期望了。
Web历史是一个重复的过程。一开始,Web只是一个试验——因此,如果它并不稳定用户也是可以理解的。许多网站的设计受到了一定的误导,导致它不具备良好的可用性,这在早期的设计中是比较常见的,而其中大部分的公司甚至都不知道需要提高(因为他们并没有做过可用性的研究)。现在,人们只是简单地希望网站能够运行下去就行了。
和移动网站一样。去年app的设计也是非常简单的。现在,用户希望app能够设计得更好,要求正在提升。幸运的是,我们的最新研究显示,移动网站和apps正在提升他们的可用性,虽然这还无法与桌面电脑上的网站相提并论。
用户调查
我们开展了8轮用户测试 :其中5个在美国,其余三个分别在澳大利亚,香港和U.K。
前两轮测试是在2009年开展的,在之前的文章中已经讨论过了 。在最初的研究中,我们针对三种移动电话都做了测试:
- 多功能手机 :最原始的手机,屏幕很小,键盘非常有限,通常只是用来拨打电话。
- 智能手机 :中等尺寸的屏幕,有完整的A-Z键盘。
- 触屏电话 :具有触摸屏,几乎涵盖了手机所有的前沿功能。
基于以下三个原因,我们在后来的6个测试中剔除了多功能手机的测试:
- 我们之前的研究显示,使用多功能手机访问Web时的可用性相当糟糕 ,因此,我们建议大部分的公司可以不用考虑支持多功能手机。
- 经验表明,来自多功能手机的网站流量是微乎其微 ,可能是因为它的用户体验实在太糟糕了,以至于用户不愿意用它访问Web,还有一部分原因是因为手机制造商的高层已经看到了市场份额的新的分配趋势。
- 更加务实地说,几乎所有的移动用户体验调查的参与者都告诉我们,设计不需要考虑多功能手机 。因此,我们不需要收集多功能手机的升级的视频片段或是其他的研讨材料。
在前两轮的测试中,触屏手机主要是指iPhone。而在最近的测试中,我们仍然选取了许多iPhone的用户,但是也包括了许多Android和Windows Phone的用户。
我们一共对105 名用户进行了测试 ——53名男性和52名女性。其中12%的参与者年龄在50岁以上,其余的88%年龄分布在20-49岁。职业包括各个领域,从时尚顾问到专利律师以及电视制作者。
任务也是多种多样,包括引导到探索等各个方面:
- 非常具体的任务。 例如,“你正在一个电器商店,打算购买一台Canon PowerShot SD1100IS当做礼物。这款相机在这个商店的售价是$220.25。访问adorama.com看看你能否找到更便宜的在线商品。”
- 有方向性, 但是不够具体。例如,“找一款适合你的肤质的护肤霜,并且要求SPF为30或更高。”(可以使用Walgreens app。)
- 开放式的 ,但是限定在某个网站或是app。例如,“看看你能否找到与今天新闻有关的有趣图片。”(可以使用China Daily app。)
- Web-wide 任务可以让用户去任何他们想去的地方。比如,“找出全世界最高的建筑。”(这里不再告诉用户能够在哪个网站上找到答案。)
我们一共请参与者完成了390 个不同的任务 :194个应用程序任务,154个网站任务,以及42个Web-wide任务。
除了上述用户测试外,还有2轮日常研究 ,用于发现用户在日常生活中是如何使用移动设备的。一个研究在U.S.;另一个则跨越了澳大利亚,新西兰,罗马尼亚,新加坡,U.K.以及U.S.总共有27 人 参与了研究,采集了172 人 - 天 的移动活动记录。同样的,参与者来自社会各个领域,从图书管理员到足球教练。
移动用户体验提升缓慢
在新的研究中,平均成功率为62% 。有了一些改善,但2 年的时间只提升了 3 个百分点 。虽然这个提高率的确非常慢,但是这和我们在桌面Web上统计的数字 (过去12年的263项研究数据统计出的结果)其实相当。
现在移动Web访问的成功率与1999 年 我们测试的桌面Web的数据相同。当前桌面Web的成功率为84%;除非移动可用性现在开始提升改进速度,否则要等到 2026 年 才能达到当前桌面Web的水平。
这62%的成功率是通过所有的任务计算出来的,其中包括所有可能的访问类型,其中有些是正确的处理,有些处理并不正确。
可用性的测量变化很大,它与用户是使用移动网站还是全功能网站有关。(顺便给出“移动”网站的定义,它是指专门为移动设备设计的网站,而“全功能”网站则是一个通用的网站,主要是为全屏幕的桌面电脑用户提供服务。)
- 移动 网站的成功率: 64%
- 全功能 网站成功率:58%
这引出了第一个,也可能是最重要的一个,提升移动用户体验的指南:设计一个专用的移动网站 。不要指望用户通过桌面和移动浏览器访问同一个网站。(使用iPad这类大屏幕平板电脑的用户可能例外,我们对iPad用户的研究 显示,它们访问全功能网站的体验其实也相当不错。)
第二个关键指南是,在全功能网站上为移动网站提供一个清晰明显的链接 ,同样的,在移动网站上也为全功能网站提供一个链接。不幸的是,搜索引擎常常会忽略移动用户的需求,向他们提供全功能网站的入口,即使这些公司特地优化了移动网站,使得移动网站提供的用户体验甚至优于全功能网站。只要用户不需要导航,他们也能接受通过手机访问的网站性能不佳的现实。搜索引擎常常会根据用户的查询提供深层次的页面链接。但是,如果用户想要了解更多的信息,他们可能必须忍受全功能网站的糟糕体验。这时,如果有一个移动网站的链接就能很好地解决用户的困扰。(这就是为什么在一开始搜索引擎就应该将结果定位到移动网站上的原因。)
Apps击败网站
移动网站固然很好,但是移动app更好。移动 apps 访问的成功率为 76% ,比专用的移动网站64% 的成功率还要高。
当然,开发app的代价也比搭建移动网站要大,因为你必须针对每个平台开发多个代码版本。因此,只有在你的资金和时间允许的情况下,或是你的服务是针对某个特别的移动使用的,我们才建议你开发移动apps。
大部分的可用性指南已经得到认证
我们第一版的移动可用性报告里面包括了85个设计指南。其中,有83个在最近的调查中得到了认证,有一个进行了修正,还有一个已经删除了。正如我之前已经多次提过的,可用性指南这些年基本没有怎么改动 因为它主要是根据人们的行为提出的。(修正的那条指南与Flash的使用有关,它更多地是与技术相关,而非可用性指南。)
新增的内容呢?从移动可用性指南第一版到第二版,设计指南的数目从 85 个增加到了 210 个 。这个增长一部分是因为我们对移动可用性有了更多的了解,另一部分是因为用户的要求也在增加。网站和apps当然在逐渐改善,但是这也提升了用户对体验的要求,因此指南中增加的这些准则是设计者接下来需要跟进的。
其中,Android apps有了明显的提升,可能是公司的市场份额的提升促进了公司对Android apps质量的投入。
与我们之前的调查相比,现在用户对水平滑动 有了更多的认识。水平滑动功能常常用来“翻转”卡片或是旋转功能。和其他的移动内容操作相比,滑动操作常常不易被用户发觉,所以我们建议在可以滑动的地方加上一些提示信息,否则用户可能根本不知道哪些内容可以滑动,从而错失了大量的信息。当然,你也应该尽量避免模棱两可的滑动操作 :不要在同一个屏幕上的不同区域,用同一个滑动操作处理两件不同的事情。对移动手机和平板电脑的可用性 设计,这个建议是一样的,表明这两个基于动作的平台具有很大的相似性。
在此,有必要考虑一下基于鼠标的桌面设备设计和基于动作的触摸屏设备设计。桌面网站强烈建议尽量避免水平翻转 。但对于触摸屏设备,翻转设计常常是很好的设计。事实上,移动设备的用户常常期待应用具有水平翻转和旋转效果。当然,这里只是举了一个例子,说明针对不同的平台,UI的设计也有所不同 。这就是为什么使用移动设备访问移动网站的性能比全功能网站要好。
移动设计=小而有针对性
要想设计一个成功的移动网站或是app,一个明显的方针是针对小屏幕设计。然而不幸的是,有些设计并没有做到这一点,我们还是会看到用户不得不面对非常小的内容,有时甚至比一个指甲还小。这个fat-finger综合症现象可能还会伴随我们好几年。
第二点可能更加抽象——人们可能更难接受:当你的屏幕很小时,你必须限制你的功能的数量 ,只保留那些最重要的功能。
更多
Usability of Mobile Websites and Applications 有一个293页的报告,里面包括了210个设计指南和479个截屏,都可以下载到。
在Usability Week会议 上有一个训练课程:
- Mobile User Experience 1: Usability of Websites and Apps on Mobile Devices ,
- Mobile User Experience 2: Touchscreen Application Usability
- Visual Design for Mobile Devices and Tablets
- Writing for Mobile Users: Content Usability for Mobile Websites, Apps, and Email Newsletters
- Mobile Usability Methods: How to Run Your Own Mobile User Studies
发表评论
-
响应式Web设计资源整理
2012-03-02 22:50 804这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 719移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 790假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 871国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 786Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 899三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 668作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1182从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1246构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1251译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 898如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 947译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 849在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 989很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 887很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 620当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 881译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 645为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 883概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
webapp开发的最佳实践与中文总结,非常热门的web app开发必备资料!
教育移动WebApp开发实践.ppt
移动考勤webapp源码.rar移动考勤webapp源码.rar移动考勤webapp源码.rar移动考勤webapp源码.rar
Clouda是基于node.js的Webapp开发框架,在使用Clouda时需要安装node.js和MongoDB。 Clouda 是百度推出的一款面向资深开发者的WebApp开发框架。在Clouda中开发app,可以在多终端下实现数据同步、任务迁移。并且Clouda...
C# Webapp C# WebappC# WebappC# WebappC# WebappC# WebappC# Webapp
webapp开发教程之将html网页打包成app的4种方法.zip
CSDN_针对移动终端的WEBAPP开发_ChaiChunyan
Web基础——WebApp之初体验(三)
1.了解Web工程概念及与传统软件工程的区别 2.理解WebApp的概念、特点和开发过程 3.掌握WebApp的分析、设计和测试方法 4.掌握WebApp综合开发方法及课程设计过程
webapp 页面交互与布局webapp 页面交互与布局webapp 页面交互与布局webapp 页面交互与布局
1、AppFramwork框架,针对HTML5浏览器和移动设备开发的javascript框架,是个极其快速的查询选择库,具备跨平台平台特性。该特性解决了学生,家长,老师智能终端多样化的问题,应用开发一次,可以使用在多种机型和...
从0到1实战移动WebApp.txt
Webapp设计与实践:必胜宅急送背后的思考.pdf
webapp之设计尺寸转css-rem尺寸,从而适配所有移动端分辨率
webapp设计尺寸规范,好的规范,铸就明天的你
Android应用程序之WebApp开发实战。。。。。。。。。。。。。。。。。。
idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发...
通过组件方式开发webApp 整个项目的源码
移动浏览器发展趋势与WebApp开发 共18页.pptx