不要重新设计网站

本学期开始启动单位网站改版。朋友发给我最新期LJ上的文章链接──文章第一句就是“不要重新设计网站”,以为我看了会受打击。其实从标题开始,只看了前面一小部分,我就非常认同作者的结论。虽然不完全赞同文中的一些观点,但从“用户体验”角度,改版甚至只是改进,要得到好评,向来是不容易的。上学期末因为本馆WebPAC升级,体会尤深,无论在页面布局、检索结果显示还是附加功能上,都做了不少改善,却也引发非议。而2.0版的encore,在我看来使用很方便,但很多人也觉得不习惯,使用量只有WebPAC的十分之一。
当然不仅仅是本馆用户如此表现。著名网站如国外的Facebook、国内的豆瓣,每次改版都会引来用户如潮的反对。一方面,反对者更愿意大声疾呼,不在意或欢迎的大多数是沉默的。另一方面,大部分用户只习惯使用网站的很少部分内容,对其他内容基本上视而不见,因而哪怕充实了很多内容、改善了不少功能,只要在网站以往的位置没有发现自己习惯使用的内容,便觉得改版不好。这也是文章作者强调持续小规模改进而不做大规模彻底改版的原因。
改版是耗费精力的事,如文中所说,通常时间超过一年,在此期间无疑会影响网站的日常改进。只是此次本馆网站改版是必须的,无从选择。因为现在的平台基本上是IE only的,并且很多访客都看到过“XML解析器版本太低”的提示。看过该平台版本升级后制作的网站,在IE only上并无多大改善,这对移动设备访问尤其致命。
现在需要考虑的是,要一个怎么样的网站,才能在以后实现只改进、不改版?
———-抗拒重新设计:用户体验———-
Resist That Redesign | The User Experience / By Aaron Schmidt. Library Journal, Mar 1, 2010
作者为2005年LJ评选出的图书馆风云人物(Mover & Shaker)
文后评论中有两个链接,也值得一看:
———-优秀设计师改版、伟大设计师重组———-
Good Designers Redesign, Great Designers Realign / by Cameron Moll (OCTOBER 24, 2005)
据评为经典贴,有若干网页改版/重组前后对照图片
———-重新设计前需要考虑的21个因素———-
[方括号内仍是本人随想]
1、重新设计的目标是什么 [适应多种浏览器,尤其是移动浏览器]
2、需要什么类型的改变:小动还是改版?新设计不能在回头客重访时,以为以前不曾来过 [至少要有似曾相似之感]
3、当前设计的哪方面最有效:可以保留或合并到新设计中
4、当前设计的哪方面无效:需要在网站设计中除去
5、目标用户是谁:用户会喜欢什么样的设计风格 [对高校馆,前者好说,后者就无从捉摸了]
6、如何让网站更用户友好:改善功能和可用性,而不是看上去很棒 [对外观的评价原就难以取得共识]
7、是否需要更改或更新Logo:如果旧Logo陈旧而缺乏吸引力,不做改变会影响新的设计 [OCLC前些年改用全新Logo,伴随对自身使命的强调]
8、改变或沿用原来的配色方案:至少要让回头客看着熟悉,使用近似的配色方案是达此目的的最佳途径之一。对配色方案做些小改变,如改变色调、增加一点新颜色,让网站体现出新面貌 [前文中有对照实例]
9、访客使用的屏幕分辨率 [依据网站访问统计]
10、访客使用的连接速度 [如果同时考虑移动访问,则页面字节数当以小为好]
11、以什么为设计重点:以某种方式强调网页的这些部分 [统一检索框的流行就是一种体现]
12、如何使导航更有效:如果在最初设计之后增加过大量内容与页面,则导航很可能不再最优
13、访客想从网站得到什么 [列举?麻烦的是想提供的/认为用户想要的内容太多,难以布局]
14、如何提高用户交互:博客可以发评论,其他如论坛、游戏、用户提供内容UGC、投票、问答等,让用户有参与感,增加回头客 [似乎我们很怕用户参与,有参与必加审核、监控,无异于自套枷锁]
15、谁做维护/更新:如多人维护,代码加上注释更为重要
16、是否需要内容管理系统(CMS):许多网站所有者现在倾向于使用内容管理系统如WordPress,网站可以方便地更新而无需设计者 [不同功能CMS的组合?]
17、如何提高搜索引擎优化(SEO):页标题、内部链接、在哪里用上头部header……长长的清单
18、使用什么关键词和词组做目标:用在标题、头部、锚点文字、alt tags等 [仍然是SEO]
19、哪些页面和搜索词目前带来流量:不要对带来流量的页面做大的改变 [仍然是SEO]
20、对那些有大量内部链接或由那些链接带来大量流量的页面,尽可能保持URL结构,如果不行,确保重新引导到相应页面 [仍是SEO,应注意]
21、什么让访客回访:不只是新设计的第一印象 [自然是内容了,第一印象也很难奢望]
·你觉得还有哪些因素?文后现有65条回应

本馆手机网站开通

手机网站首页
[update 2010-4-5 加入本图]

本馆手机网站日前开通,访问网址:m.lib.ecnu.edu.cn。
网站上学期末已经制作完毕,为了解不同品牌型号手机的访问效果,以便开通时宣传,在馆内发布测试并征求意见。虽然设计了EXCEL调查表,方便大家填充,并声明手机测试有奖,结果却应者了了。
手机上网以80后居多,馆内同仁大多不在此列,而那些为数不多的手机上网者又漠不关心,很是无奈。令人颇为沮丧的是,除一位友情测试者对内容提了些有益的意见外,也未收到任何同仁在内容方面的反馈。
其实对于内容,本人与那位友情测试者的意见相同,就是“本馆简介”内容太多。看国外图书馆网站,很少涉及这一块,因为手机上网者需要了解动态、实时的信息,不会关心这些。不过这大概属于政治正确范畴,所以也就放那里做摆设了,不过还是需要与正式网站同步维护。
手机网站介绍页面参照某国外图书馆(想不起来哪家了),除首页截屏外,还提供“预览”,可以在电脑浏览器上先浏览网站内容,再决定有无手机访问的必要。
注:首发于书社会
参见:
手机图书馆及访问测试 (2009年11月15日)
移动图书馆资料大全 (2009年8月1日)
OCLC的移动WorldCat (2009年7月7日)

移动图书馆:设计开发移动网站要点

    祝贺大巴重新启程!1月5-13日,整整8天。下面是4天前写好的。

 

    近年采用移动或手持设备上网,已经成为明显的趋势,移动图书馆网站也越来越多。早在2006年6月West等就介绍了Ball州立大学图书馆应用,2008年7月Kroski的《图书馆技术报告》专题提供了更多图书馆的实例。
    Innovative公司的移动OPAC版本AirPAC已经有不少图书馆采用,包括个人借阅查询与预约功能。OCLC推出WorldCat Mobile也有一年多,但目前限英、美、德、法、加拿大和荷兰使用。两者均有iPhone应用。

    俄勒冈州立大学(OSU)图书馆的Griggs等在Code4lib Journal第8期(2009-09-21)分享了他们创建手机网站的经验:移动图书馆:设计开发移动网站要点(library/mobile: Tips on Designing and Developing Mobile Web Sites)。
    OSU馆手机网站的三个阶段:
        2009年4月发布,包括开放时间、联系我们、FAQ、馆藏分布
        2009年9月增加目录检索、计算机状态
        未来将包括主题指南、课程页面、可加到日历的图书馆活动、基于位置的集成GPS与社会媒体的数字馆藏应用(?)

    目前的内容看着平淡无奇,但也有些精心的设计,如计算机状态显示的是图书馆供读者用计算机的实时空闲信息,OPAC检索结显示相邻索书号,联系电话可直接拨号,Google地图(位置及路线查询)。前3个月,平均每天80个独立用户进程。

    文首一些统计数据,显示了移动上网的爆发势头,并引用W3C的技术文件“移动Web最佳实践1.0”(MWBP),指出“移动用户与固定或桌面设备用户有着不同的兴趣,他们更直接、目标明确,他们的意图常常是发现与其场景相关的特定类型信息”。对于图书馆,作者设想的一个场景,就是用户在书库中,手中拿着书目,要在架上找到其中的一本书──显然对作者而言,最重要的就是OPAC查询。
    要开发移动应用,三个重要的考虑是:在什么样的场景下、为了什么目的、会或不会用移动设备完成什么样的任务。作者认为移动用户不大会阅读或浏览长篇文档,主要会用基于位置的服务。

    设计移动网站受制于手机浏览器,MWBP认为不应该排除任何特定设备,其建议的缺省配置DDC(Default Delivery Context):
屏宽:最小120像素
语言:XHTML Basic 1.1 (content type application/xhtml+xml)
字符编码:UTF-8
图像格式:JPEG,GIF 89a
页面最大:20KB
色彩:最小256色
样式表:CSS Level 1及CSS Level 2 (@media rule together with the handheld and all media types)
HTTP:HTTP/1.0或HTTP/1.1
脚本:不支持客户端脚本
    插语:前几天看到“手机网站开发必修课[2009总结版]”,有XHTML、CSS及JavaScript等方面的建议,针对国内手机状况,可以参看。

    要适应智能手机与普通上网手机(smart phones and Web-enabled phones)、优化其体验,文中提供了三种各有千秋的技术,并有若干代码可借鉴:
1、探测设备,提供相应的CSS文档
2、探测设备,转向到多版本页面
3、对同样内容,自动生成特定设备版本

    OSU馆根据MWBP及iPhone人机界面指南(iPhone Human Interface Guidelines),提出了十个方面的设计建议,摘录如下:
1、等级 Hierarchy
   c.获取内容点击不超过3次
2、链接 Links
   b.链接到非移动站点要有说明
   c.点击电话号码直接拨号
3、导航 Navigation
   d.页首含基本导航(首页与返回)
   e.页尾含次级导航(相关链接)
4、页脚信息 Footer information
   a.链接到完整网站
   b. 链接到“关于”及反馈页面
5、页标题、导航链接及URL
   a.页标题及导航链接限15字符
   b.URL短而易于输入 [ORU的URL太长了]
6、页面内容 Page Content
7、页面布局 Page Layout
   a.不使用框架或表格  
   b.不使用像素或绝对单位
   c.不依赖字体相关样式
   d.不依赖内容组织的样式表
8、窗体 Forms
   a.使用下拉菜单、单选按钮、复选框,而非文本字段,以尽量减少打字
   b.减少按键次数
   d.给所有控件以适当的标签,将标签与控件明确关联
9、图像与色彩 Images and Color
   a.设计适应不同屏幕尺寸的Logo
   e.图片应不大于设备屏宽的80%
10、屏幕尺寸 Screen Sizes
   a.设计2个尺寸,普通手机176X220,并可适应128X160;智能手机320X480 

    对手机网站来说,完成前测试至关重要。三管其下的试用:1、桌面浏览器;2、手机浏览器模拟器;3、手机。为了适应最多的手机,都有无数测试要做。
    在试用前,还做了代码测试,包括:
W3C mobileOK Scheme,看网站是否适用于最基本的移动设备
DOTMobi的MobiReady,全面评估网站的手机适用性
    还有设计进行中的用户界面测试,包括:
Paper prototyping
usability metric
    使用评价测试用:
走廊测试:到人多的地方找人测试,给个小礼物,并告知移动供应商会收取费用(据维基百科Hallway usability testing,只需随机找五六个人,可以发现95%的可用性问题)
使用统计:追踪页面使用统计、浏览器类型等

    看到这一部分,感觉特别惭愧,自己好象一拍脑袋就开始做事了,而OSU则准备了一大把测量器具。

原文:
Kim Griggs, Laurie M. Bridges, Hannah Gascho Rempel. library/mobile: Tips on Designing and Developing Mobile Web Sites. Code4lib Journal, issue 8, 2009-09-21

设计参照:
W3C Mobile Web Best Practices 1.0 (MWBP):http://www.w3.org/TR/mobile-bp/
CSS Mobile Profile 2.0:http://www.w3.org/TR/css-mobile
W3C mobileOK Scheme 1.0:http://www.w3.org/TR/mobileOK/

代码测试网站:
用“MobileOK tests”到搜索引擎查到的一家:TAW mobileOK Basic
    提示失败、警告与通过的部分
MobiReady(http://ready.mobi/)
    给出基本评分、网页大小、速度(WiFi、3G、GPRS)、几款手机的可视化显示、几类测试(XHTML Mobile Profile,Valid Markup和No frames),测试小结,附加测试(对每一测试内容均有详细说明)
[update 2010-04-18] 远洋过客在书社会leonz日志“本馆手机网站开通新版”留言,提到应当做WCAG20测试。这是个W3C推荐标准,提醒注意。

参见:
移动图书馆剑桥大学与开放大学报告 (2009-06-18)
OCLC的移动WorldCat (2009-07-07)
移动图书馆资料大全 (2009-08-01)
手机图书馆及访问测试 (2009-11-15)

引文参见:
West, Mark Andrew, Mark Andrew, Arthur W. Hafner, And Bradley D. Faust. Expanding Access to Library Collections and Services Using Small-Screen Devices. Information Technology and Libraries, v. 25, n. 2, June 2006, pp. 103-107.

Kroski, E. On the Move with the Mobile Web: Libraries and Mobile Technologies. Library Technology Reports, vol. 44, n. 5, July 2008, pp. 1-48.
(有E-LIS上的OA文档:http://eprints.rclis.org/15024/)