`
WebAppTrend
  • 浏览: 54864 次
社区版块
存档分类
最新评论

WebApp最佳实践之移动可用性提升

阅读更多

 

总结:

从我们上次发布的研究数据到现在,移动网站和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 - 的移动活动记录。同样的,参与者来自社会各个领域,从图书管理员到足球教练。

移动用户体验提升缓慢

在我们的第一版报告 中,移动用户的平均成功率59%

在新的研究中,平均成功率为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 Usability Update

 

译文来源:http://www.webapptrend.com/
 WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展 

请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,欢迎加入我们的Q Q群:193775364

 

分享到:
评论

相关推荐

    教育移动WebApp开发实践.ppt

    教育移动WebApp开发实践.ppt

    Web基础——WebApp之初体验(三)

    总之,“Web基础——WebApp之初体验(三)”将带领我们深入了解WebApp的全貌,从基础技术到框架选择,再到服务器、数据库、响应式设计和安全性,每一个环节都是构建高质量WebApp不可或缺的一部分。通过学习和实践,...

    Webapp设计与实践:必胜宅急送背后的思考.pdf

    Webapp 设计与实践:必胜宅急送背后的思考.pdf 文件提供了深入浅出的见解,讲述了餐饮业在移动消费趋势下的 O2O 模式实践, Web app 设计的重要性及其在 O2O 双向流程中的应用。 一、O2O 模式下的餐饮业发展趋势 ...

    webkit webApp 开发技术要点总结

    在当今移动互联网时代,WebApp因其跨平台性和易维护性,成为开发者构建移动应用的重要选择之一。WebKit作为一款广泛应用于移动设备的浏览器引擎,其对WebApp的支持尤为关键。本文将深入探讨WebKit WebApp开发中的...

    idea开发webapp 热部署

    idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发...

    移动WebApp开发框架Clouda.zip

    Clouda是基于node.js的Webapp开发框架,在使用Clouda时需要安装node.js和MongoDB。 Clouda 是百度推出的一款面向资深开发者的WebApp开发框架。在Clouda中开发app,可以在多终端下实现数据同步、任务迁移。并且Clouda...

    HTML5+JQuery Mobile 移动端WebApp案例

    对于想要学习或提升移动Web开发技能的人来说,这是一个很好的实践项目。通过解压并分析"HTM5Demo"中的代码,你可以更直观地了解这两个技术如何协同工作,进而创建出高性能、高交互性的移动Web应用。

    QtWebApp应用例程

    通过深入学习和实践QtWebApp提供的示例,开发者不仅可以掌握Web应用开发的基本技巧,还能进一步提升C++和Qt框架的使用能力。无论你是希望创建简单的数据交互应用,还是复杂的后台服务,QtWebApp都是一个值得考虑的...

    Android应用程序之WebApp开发实战

    在Android平台上,WebApp开发是一项重要的技能,它允许开发者利用Web技术来构建应用...《Android应用程序之WebApp开发实战》这本书将为你提供更详尽的指导,包括案例分析和实战技巧,助你在WebApp开发领域更上一层楼。

    webApp页面跳转滑动菜单导航

    总的来说,"webApp页面跳转滑动菜单导航"是一个综合运用HTML5、CSS3和JavaScript技术实现的高效导航方案,旨在提升移动设备上的Web应用的可用性和吸引力。通过精心设计的滑动菜单和页面跳转效果,它为用户提供了直观...

    webapp 页面交互与布局

    在"09-页面交互与布局"这个文件中,很可能是包含了关于这些概念的深入讲解、实例分析和可能的设计模板,帮助开发者和设计师更好地理解和实践WebApp的页面交互与布局设计。学习并掌握这些知识,能够提升WebApp的整体...

    ASP.NET移动考勤(webapp版本)源码

    一款不错的移动考勤(webapp版本)源码,有需要的朋友不要错过 二、菜单功能 前端页面应用技术 关键技术 1、AppFramwork框架,针对HTML5浏览器和移动设备开发的javascript框架,是个极其快速的查询选择库,具备...

    移动浏览器发展趋势与WebApp开发 共18页.pptx

    移动浏览器的发展趋势与WebApp开发紧密相连,随着智能手机的普及,这两者已经成为互联网体验的重要组成部分。移动浏览器作为用户访问网络内容的主要入口,其发展趋势直接影响着WebApp的开发策略和用户体验。 首先,...

    手机QQ浏览器与WebApp开发者共赢可用.pdf

    "手机QQ浏览器与WebApp开发者共赢可用.pdf" 本文档主要介绍了手机QQ浏览器与WebApp开发者的合作共赢,讨论了HTML5技术在移动互联网中的应用,及其对手机浏览器的影响。文档中指出,HTML5技术的出现,让手机浏览器...

    webapp开发教程之将html网页打包成app的4种方法.zip俗称套壳_html5移动web开发

    webapp开发教程之将html网页打包成app的4种方法.zip

    汽车webapp html5源码

    这对于想要涉足移动Web开发或者提升HTML5技能的开发者来说,是一个非常有价值的实践案例。同时,这个源码也可以作为一个起点,进行二次开发,比如增加新的功能模块,或者根据特定需求进行定制化修改。

    ssh webapp 先方方

    5. **安全最佳实践**:使用SSH时,应遵循一些安全规则,如定期更换SSH密钥,限制SSH端口,启用公钥认证并禁用密码登录,以及使用防火墙限制访问等。 6. **Web服务器配置**:SSH也可能涉及到Web服务器的配置,如...

    training/webapp镜像

    training/webapp镜像,方面一些内网用户无法直接pull镜像时下载: 使用方法: docker load -i training-webapp.tar.gz

    C# Webapp C# WebappC# WebappC# Webapp

    这为开发者提供了良好的可读性和可维护性。 Web应用程序通常基于三层架构,即表示层、业务逻辑层和数据访问层。C# Webapp的开发中,表示层主要负责用户交互,使用ASP.NET技术如ASP.NET MVC或ASP.NET Core来创建动态...

Global site tag (gtag.js) - Google Analytics