在线应用窗口一致化分析

0 评论 3765 浏览 1 收藏 9 分钟

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

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

从逻辑上说,在线应用属于操作系统中浏览器客户端应用内运行的一套程序,很多交互上依然还是要依赖上层应用(浏览器客户端),这就如同在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邮箱内,如果需要彻底删除一封邮件,将有对话框让用户进行再确认。这是一个浏览器对话框。

QQ邮箱彻底删除邮件对话框

QQ邮箱删除对话框

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

网易邮箱删除邮件对话框

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

网易邮箱对话框

源地址:http://www.userkon.com/to……standard.html

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!