给网站界面预留退路

星期三 03.11.2009 - Posted in 工作分享, , - 4,427 views

常见到网上博文有错误理论,包括身边很多朋友都曾认同“可访问性(Accessibility)是为残障人士准备”的观点。其实在互联网技术领域远不止这么简单,总结起来有三个方面:

  1. 应付极端环境下的正常浏览需求;
  2. 结构、表现、行为跨终端跨平台兼容支撑;
  3. 保障残障人士无障碍信息获取。

web1.0网站以内容为主;web2.0网站以功能为主。当前主要有“纯功能、内容+功能、纯内容”三类网站界面形态,格局已基本定型。虽然以内容为主的网站更突出Accessibility,以功能为主的网站更突出Usability,但不是说以功能为主的网站就不用考虑Accessibility。

技术发展至今,“纯功能”网站界面为提高Usability有大量富客户端应用,并且逐渐形成核心竞争力。也就是说在这种情况下同时保证良好Accessibility和Usability几乎不可能,因此只能采用保底的用户友好方案,告知为什么?怎么办?比如Gmail在disable javascript情况下会默认进入“基本HTML”模式;如果切换标准视图则提醒“必须启用JavaScript。”如下图

Gmail邮件列表(&noJS)方案

但在传统不以富客户端应用为核心竞争力的“内容+功能”网站界面上,同时保证良好Accessibility和Usability则完全可能,只是技术复杂度问题。比如yahoo首页这个著名web2.0门户和Ajax应用典范,在disable javascript情况下,虽然所有交互模式不能用,但功能不受影响,整体页面效果也保持良好。如下图

Yahoo首页(&noJS)效果对比

“纯内容”网站界面就是以信息为主的各资讯、新闻类网站内容页,大量存在于互联网,也大量被收录于各搜索引擎,这样的页面保证Accessibility更得把握住用户核心需求。比如163新闻的内容页,在disable css情况下,依然能够清晰辨认信息内容,一方面呈现优先级处理得当,另一方面标记语言的结构化良好。如下图

163新闻内容页(&noCSS)效果对比

说到disable css, javascript,好多同行就会想到人为因素,并且以此定论应用场景不典型、不用考虑。其实懂得disable的高端用户也一定知道如何enable,真正可怕的是网速慢、I/O设备故障等非人为不可控因素,造成css, javascript无法下载或解析。

网上流传份5000万独立用户的网站数据分析显示,javascript disabled有1.19%,这个数据与我能看到的几个网站差不多。如果每天5000万的流量,大概就有60万这样的用户。

不管是客户端还是服务器端的网速问题,都会造成数据无法下载、浏览器无法渲染,严重影响用户的浏览体验。或许有人认为,曾经拨号时代此问题比较明显,现在资源普遍已比较宽裕。首先并不是全中国的网络都已小康,其次并不是小康的网络就健康,比如我们办公室经常还因为硬件防火墙、带宽限制等原因造成网络故障;以及各种拨号的无线龟速上网。

尤其在病毒泛滥、中毒杀毒的时候,浏览器经常会出现莫名其妙的问题,我曾经就碰到过因为浏览器一直脚本报错,导致服务无法使用,数据拿不到而影响工作。另外在国内使用代理服务器的愤青、伪愤青们也不少,是否有人考虑过为什么有些网站访问容易?有些困难?

回到五年前,在Gmail和Flickr刚在国内流行时,无疑都经历了访问效率低下的严峻考验。作为当时的用户和现在的从业者,我们不妨设身处地认真思考,为什么Gmail容错做的好?为什么Flickr会慢的很稳定?

极端情况并非只极端条件下才碰到,不可控因素无处不在。著名诗人泰戈尔曾说过,世界上最远的距离不是生和死,而是电信和网通间的距离,还有中国连接世界的距离。

对本文亦有贡献
浅谈产品设计中的可用性和可访问性
可访问性浅析

2009.3.15 结构、表现、行为跨平台兼容支撑;
结构、表现、行为跨终端跨平台兼容支撑;

2009.3.20 带宽限制等原因造成网络故障。
带宽限制等原因造成网络故障;以及各种拨号的无线龟速上网。

蓝色经典
http://www.blueidea.com/design/doc/2009/6539.asp

视觉同盟
http://www.visionunion.com/article.jsp?code=200903150016

© 一叶千鸟(转载请留原文链接,更新于2009年09月03日14点)

22条评论 发表»

re_think says:

yahoo在这方面确实做得很棒。
最近读了《High Performance Web Sites》一书,受益匪浅

Datu says:

可以看看那个网站disable后最搞笑~

果伦 says:

长见识了,以前也遇到过disable这些现象,像douban,就完全乱了。
提2个问题:
1. 文中提到的:比如yahoo首页……虽然所有交互模式不能用,但功能不受影响。这里交互模式都不能用了,功能不受影响又该怎么讲?
2. disable js/Css的情况即便是由于网速慢等不可控因素造成,一般用户几次刷新即可解决,真正因为I/O设备故障等造成javascript无法下载或解析的用户可能要远小于1.19%。

不过,文中提到“懂得disable的高端用户也一定知道如何enable”真是不错的意识;没想到163新闻在disable css下还能够进行清晰的阅读。

好文,好文!

Raymond says:

当css和js卡壳时,“F5” 就派上了用场。
发明键盘的人曾说过:F5自诞生的之日起,即担负生命中不能承受之重 。

千鸟 says:

@果伦
1. 自己动手试。
2. 谁告诉你刷新可以解决网速问题?I/O设备故障无法用数据量化,但你体验过就明白了。

yoom says:

真正可怕的是网速慢、I/O设备故障等非人为不可控因素,造成css, javascript无法下载或解析

以前我也认为用Firebug来Disabled JavaScript的理由站不住脚,但这下有理论基础了!(-:

at9t says:

呵呵,恐怕大部分小网站没有经历作那么多工作吧

紫鼠 says:

顶,文章写的不错,以前也有类似的模糊的概念总是不是很清晰,读了你文章后,感觉很清晰了。

牛牛 says:

看看那份数据分析的时间 基于它的分析 准确性现在是大打折扣了

纯真 says:

在编写网站详细页面HTML时,把内容区域写在前面还是有道理的。

zaku says:

这里有个成本问题。不同情况需要有一个适合的平衡点。
有篇帖子:
《当客户端把Javascript禁用后……》
http://bbs.blueidea.com/thread-2694115-1-1.html
在商业环境下,当你的消耗和价值不相等的时候,选择放弃,是最好的解决方案。
所以这种“退路”并不是所有公司都做的起的。

千鸟 says:

@Zaku
三年前的这讨论我看过。当然要考虑成本,本文最重要的突破,就是分类总结“纯内容、内容+功能、纯功能”三类界面形态提升Accessibility的典型方案。

关于应用场景,你也许没有看懂我提几个问题想表达的意思。如何做设计、如何平衡商业利益不是一个路数,个人认为先精通如何解决,再谈如何平衡会更有发言权。讨论解决时不建议涉及商业利益,因为设计师不可能只为一个客户服务。

Ven says:

谈预留退路,首先要区分是“Web Page”还是“Web APP”。APP的话,离了交互就不能活,这时候再谈“如何应对禁用JS时的情况”就多余了。

千鸟 says:

@Ven
web page和web app的分类涵盖不了当前所有界面形态。
具体文中三个例子已有对应说明。

lifesinger says:

web page的侧重点是内容展现,文中的三个例子,都是web page类型的
web app的侧重点是交互行为,或者说交互本身就是内容

gmail,最重要的是信件内容,所有写信、回信等功能都构建在信件内容展现的基础上,因此gmail才有html basic version

yahoo首页和163新闻,更是以内容展现为中心的

真正的web app不多,igoogle算一个(核心是widgets的定制,对于每个widget来说,则大多又是以内容为中心的小web pages),还有就是网游,交互是网游的核心

web page和web app的分类,强调的是界面形态是以内容为中心的还是以交互为中心的,以内容为中心的web page,考虑优雅降级(我觉得Graceful degradation翻译成优雅降级更好)是合理的,能提高可访问性,以及可维护性。

gmail可以看成 70%的web page + 30%的web app

各种界面形态虽多,是因为比例组合多,真正的形态是很少的

千鸟 says:

@Lifesinger
大体上能看懂这段在工程角度的理论阐述。不过如果这么理解,我不懂纯粹“以交互为中心”的界面有什么销路?因此我认为在应用角度认识更合适,如何更统筹的解决问题,得根据实践经验来总结。

IwfWcf says:

那句话不是泰戈尔说的,有兴趣可以Google一下,这是个广为流传的错误……

千鸟 says:

@IwfWcf
谢谢你,一说张小娴,二说台湾某高校BBS,三说没定论。
但关系不大,借自钱钟书语“如果你今天吃了一个鸡蛋觉得味道不错,你又何必去认识那个母鸡呢?”

木鱼猫 says:

@千鸟
有个疑问,纯功能网站的最终目的应该还是提供内容给用户,交互能独立于内容而存在吗?
Gmail被划为纯功能网站的原因是由于email内容并不是由Google提供的?
渴望赐教~

另,我觉得认识那个母鸡还是很有必要的,这样以来我可以找到更多好吃的鸡蛋。本文就是这样找到的:-)

千鸟 says:

@木鱼猫
只要是以内容取悦用户的web产品,交互就不可能独立于内容存在。
email只是最典型而且纯粹的web service,我认为usability能成为核心竞争力的算纯功能网站。

发表评论

Spammer必读