虽说互联网的革命总觉得势不可挡,大家都期待着,某一天,只需要一个浏览器,就可以完成平常用客户端才能完成的任务。虽然,HTML5与Chrome一度让我们看到浏览器代替操作系统的希望(via 12345),但目前来看,用户同时保持两种平台的使用的状况,要持续很长一段时间。

想让用户无缝地从客户端应用转移到在线应用,我们还面临很多问题。

从逻辑上说,在线应用属于操作系统中浏览器客户端应用内运行的一套程序,很多交互上依然还是要依赖上层应用(浏览器客户端),这就如同在Mac OS内跑一个Windows的虚拟机的那种差别。

这样的环境,就给在线应用带来一个很严重且无法避免的问题:体验不一致。在线应用没法提供和客户端应用一样的体验环境,用户如果如果想好好使用在线应用,得需要重新学一次,成本过高。尤其是对于那些生产力应用,而这种不一致,无疑是致命的打击。
生产力应用指的是可以完成那些对具体信息的组织与处理的任务。用户通过生产力应用可以创造并处理信息。比如Outlook,Photoshop,Word,AutoCAD。

这些体验的不一致在UI上的表现主要包括以下几点:

  1. 键盘快捷键 ——只有少部分在线应用支持快捷键,这些快捷键难以发现且不支持复杂的组合。
  2. 鼠标右键 —— 只有少部分在线应用支持,而且无法和浏览器右键菜单并存。(新版Flickr的交叉显示做法不错。)
  3. 信息交换 —— 把本地照片拖进Photoshop内即可打开,把Flickr照片能拖进Photoshop.com内编辑吗?

如有其他,欢迎补充。但我个人认为,最大的不一致,是在于页面的渐进变化,窗口深度变化以及模态化转变。因为这种不一致,用户很容易就在一个在线应用中迷失而困惑,因此,“首页”链接成为点击最高,最救火的链接。

观察一:多样的对话

在浏览器中,用户一共会遇到4种类型的对话窗口,分别是:

  1. 浏览器对话框——由浏览器驱动的对话框窗口,模态对话框(相对于浏览器,Opera除外。)如下图左上角,删除对话框。
  2. 内建对话框——由在线应用提供的对话框窗口,如下图左下角,为QQ邮箱写信提示,模态(只相对于当前浏览器标签页内。)
  3. 小弹窗——非模态的小浏览器窗口,用于完成一些在线应用的子任务。如下图中部,为Gmail添加其他邮箱帐号的小弹窗。
  4. 通用对话框——由操作系统所提供的模态窗口,如上传文件,保存文件,指定文件夹等对话框。

了解更多对话框的分类,请参考Windows user Experience Interaction Guildelines > windows

观察二:页面的流动差异化

同样的页面,即使他们的功能与内容相同,但在客户端与在线应用,也存在着较大的差异。

客户端中,使用窗口的模态叠加,给予用户导航,同时,Windows平台还提供了任务栏,帮助用户管理自己的窗口。对于用户而言,后退至上一步,只需关闭当前窗口,返回操作流程的原点,清除掉任务栏的窗口的占位即好。

在在线应用内,由于窗口的模态叠加存在实现难度,而且效果也不佳。同时,也不会有任务栏这样的控件去管理用户在网页端内的窗口(Firefox Panorama也不过是对浏览器的标签管理提供了解决方案而已),即使存在面包屑与导航,也难以避免导航迷失,用户难以在页面中快速找到准确的后退路径,不得不直接选择“回到首页”的方式,快速逃离。

窗口和页面流动

上图看起来比较复杂,但通过窗口的叠加,有效的记录到了用户的整个操作流程。用户在回退时,都可以采用点击窗口的X,或者Cancel退回上一步。

而对于在线应用,虽然有面包屑,但是他表现的不是用户操作流程,而是信息的分类。

页面模态的差异化

同样的内容(设置),在客户端内,使用模态的对话框,并且会新开一个窗口;而在线应用中,这就变成非模态了,且不会新开窗口。

网页端后退操作行为过多

网页上的元素五花八门,在未点击之前,你根本不知道下一步会怎样,也许是新开窗口,也许是一个内建对话框,也许是一个小弹窗,也许是一个浏览器对话框。而且,存在与一些容易误导用户的视觉元素:如上图,虽然看起来是选项卡的外观,让我很容易以为点击之后,我将继续保留在这个页面内,而事实上我都会跳到一个新窗口

并且在线应用内,你可以通过多种的方式后退,关闭内建对话框,关闭小弹窗,关闭新标签窗口,点击浏览器后退导航按钮。

在客户端,永远只有一种,点击X按钮。

网页端体验案例讨论

10大可用性准则中,其中就包括的两点:给予用户控制权一致性与标准化。但在线应用中,很多时候,却不得不面临两难的情况。

我将对比在相同的功能中,网易邮箱与QQ邮箱的设计对比,来表现这个问题。

在QQ邮箱内,如果需要彻底删除一封邮件,将有对话框让用户进行再确认。这是一个浏览器对话框。


问题出现了,虽然这个对话框只是针对当前标签页,可它相对于浏览器而言,是模态的,你无法切换到浏览器其他标签内。限制了用户的控制权,且它的外观,难以和邮箱内建对话框取得统一,如果是MAC系统的话,OK按钮在还会出现在对话框最右下角的位置。操作体验不一致。

网易邮箱则使用了内建对话框,看似是解决了问题,但实际上并未:

在面临当前页面已经存在内建对话框的状况下,当需要再确认的时候,网易邮箱和QQ邮箱同样采用了模态的浏览器对话框。显然,网易邮箱违背了原来的对话框视觉规范。

但这是一个无奈之举,如果同样使用内建对话框,用户在视觉外观上,很难对两个对话框的从属关系作出即时的判断。

由于目前,在网页端,虽然在前端代码内有HTML5的规范启用,但在设计上,却没有类似Windows User Experience Interaction Guidelines 或者是Apple Human Interaction Guildlines 这样的规范给设计师提供标榜和准则。这就直接导致,在线应用的窗口设计上,一致性是一个难以解决的问题,用户就会遇到很多奇奇怪怪的体验。

探讨解决办法

虽然在线应用从长期看来,将最终在用户界面方面,将完美替代软件客户端。但是目前我们依然还处在,在线应用与客户端并行的状况。但是,我们也欣喜的看到,一些在线应用的设计,已经能够解决这些问题了。或许,他们将引领,在线应用的下一代的窗口设计:

如果用户安装了silverlight,那么,在Live Sync中,用户即可直接在当前网页内,选择用户本地计算机的文件夹,取代了传统的弹出一个模态对话框的方式。不打扰用户切换至其他浏览器标签页。

Gmail同样使用了非常具有特色的设计方法,Gmail已经完全避免了使用模态的浏览器对话框,取而代之的是,Gmail不再确认用户的危险操作,但是提供后退入口。

另外Gmail还提供了“多线程”的体验,取消了窗口的模态关系。

小结

从这些案例我们可以大致看出以后在线应用的窗口设计的一些趋势:

  1. 模态化的对话框将减少 —— 因为他阻碍用户的控制权,且影响一致性。
  2. 窗口结构将变得扁平化 —— 在线应用的不会像客户端那样,窗口相互之间有严谨的从属关系,整体数量多。在线应用会只有一个核心的页面,这些页面涵括了在线应用的大部分的操作界面。
  3. 即地化的反馈和操作成为主流 —— 客户端中原有的,编辑内容-》保存-》查看结果的流程,在网页端将会变得更加精简与方便,因为在线应用可以方便的即时变化当前页面,给予用户反馈。

无论如何,在线应用已经距离我们越来越近了,也许我们真的只需要一个浏览器,就可以完成很多的任务。不论如何,在目前在线应用设计中无通用规范与合理的解决方案中,上诉说法只是做简单的研究与分析,无法得出具体解决方案。