合理的减少新开窗口打开页面

虽然已经是个很古老的议题了,不过感觉依然有很多站长朋友在做网站的时候并不是非常注意这种细节,使用target=_blank并非绝对错误,不过为了提高网站的可访问性,应该分场景探讨如何减少新开窗口。

抛开某些不合逻辑意图不论,为什么大量使用弹出页面?因为设计师担心用户迷失方向。为什么用户会迷失方向?因为导航系统不够好。为什么导航系统不够好?因为产品功能太多太乱。为什么功能太多太乱?因为需求没控制好。为什么需求没控制好?因为提需求的人自己也没想清楚。

说白了,很多场合都不仅仅是设计师的问题,因此只能选择不断妥协用劣质方案堆砌豆腐渣结构体系。快节奏中有些事情没法避免很正常,但设计师应该尽责做到迭代式的全局统筹重构。

应该强制target=_blank

1.文件下载链接

2.文件打印链接

3.非主线任务并打断进程的链接

以上参考淘宝的老包同学在08年总结符合国情的链接新窗口打开中的应用场景。下载各种文件、打印各种文档,需要前后对比的帮助,注册表单的隐私条款都有必要target=_blank。

能够定论target=_blank必然提升用户体验的场景很少,并且个人认为随着客户端技术的发展,会被逐步取代。比如lightbox这个ajax应用,给设计师带来了“查看大图不用再新开窗口”的全新设计理念,这在以前是不可想象的。

可选择target=_blank

1.跨域名链接

2.跨应用平台链接

3.布局改变链接

主域名更换比如友情链接、网志内嵌的关键词外部链接等,而跨应用平台的链接通常也得更换二级域名。如果全部不新开窗口,为了避免意外跳出,应该先提醒用户这是外部链接;如果部分新开窗口,那么应该有统一规则进行约束,并明确告知将opens new window。见过三类案例:

msdn例子,icon告知用户这是站外链接。

gblog例子,icon告知用户这是站外链接,同时可以点击target=_blank。

egloos(韩国)例子,触发时才icon告知用户这是站外链接,也可以点击target=_blank。

来自sitepoint的Neil Turner文章补充了三种形式,大同小异。值得一提的是,有个使用title提示open in new window的案例,其实也符合使用Title提升可访问性中提到“操作指引”的应用。

版面改变如列表页与内容页的区别,用户需要在内容页长时间阅读,每次都返回列表进入其实更不方便。最典型是Google大概在06年初做出的改进,给搜索结果列表链接默认target=_blank,这个例子几乎同时满足以上三个条件,并且提供默认设置自定义改回去,100%保险。

不能强制target=_blank

1.导航链接

2.tab条目链接

3.返回操作链接

4.翻页链接

5.表单

特殊的网站地图、索引表也属于导航,都应该给用户最大的控制可能。不管全局导航、局部导航、辅助导航、上下文导航,还是友好导航,都建议杜绝target=_blank。比如wordpress程序的sidebar容器内,几乎所有站内链接都是导航,target=_blank会严重影响可访问性的流畅感。

tab是很常见的页面内容组织形式,但不管直接隐藏显示、异步加载显示,还是类似导航的跳转,都不建议target=_blank,因为此时用户更加期望模块内的变化,或者在当前窗口载入新页。

另外,导航链接与返回操作链接有部分重合,比如面包屑导航,分级往回点其实就是返回操作。在任何页面进行返回操作都代表当前页面已经不需要了,因此不能新开窗口。这个返回包括点击logo返回首页,同时也是能碰到的典型错误之一。

表单的场景比较宽泛,比如注册、登录、搜索都应该杜绝target=_blank。大量字段的数据表单提交有条很重要的可用性规范,点击返回应该能保留数据,这点wordpress后台录入很出色。

总结

基本可以广义概括为只要影响访问、操作流畅度的链接,都不建议target=_blank。其实不管什么规则,只要没有清晰逻辑传达给用户,都会造成意外。只不过设计难点在于,无法准确判断这个意外是否在用户所期待的可接受范围之内。

既然用户所期待是否需要target=_blank的场景不好判断,但是应该强制、不能强制这两类常见错误场景相对容易达成共识,因此个人认为还是容易找到解决问题的思路。简单例子不再赘述,有机会另补充。

时间: 2024-10-27 17:21:34

合理的减少新开窗口打开页面的相关文章

jquery简单实现外部链接用新窗口打开的方法_jquery

本文实例讲述了jquery实现外部链接用新窗口打开的方法.分享给大家供大家参考.具体实现方法如下: $("a[href^='http://']").click(function(){ this.target = "_blank"; }); 或者使用下面这个 $(function(){ $("a[href^='http://']").attr({'target':'_blank'}) }) 希望本文所述对大家的jQuery程序设计有所帮助. 以上是

ajax请求成功后新开窗口window.open()被拦截解决方法_AJAX相关

问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所

ajax请求成功后新开窗口window.open()被拦截解决方法

问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所

页面上所有的链接都在新窗口打开

链接|页面     要想页面上所有的链接都在新窗口打开,在页面中加入:     <head>     <base target="_blank">     </head>     注意事项:< base >必须写在< head >标记里

window open-window.open在打开新的连接页面时,为啥会刷新或关闭父类窗口呢?怎么杜绝此种情况

问题描述 window.open在打开新的连接页面时,为啥会刷新或关闭父类窗口呢?怎么杜绝此种情况 我在使用window.open打开新窗口时如:window.open(url,'_blank','')时,总是会刷新或关闭父类窗口,我采用的以按钮点击触发window.open弹出新的访问窗口的,跪求各位大仙,怎么才能杜绝刷新或关闭父类窗口呢? 解决方案 求各位大侠救命啊,急用,求支招 解决方案二: 怎么没有人回答吗?好孤独无助啊 解决方案三: 首先,你的情况有可能是浏览器自身问题 其次,没必要用

Javascript控制页面链接在新窗口打开具体方法_javascript技巧

第一个方法就是用jquery实现,原理是这样的先找到站点中的外部链接,然后再给链接加上target=_blank"属性就搞定了,代码如下:jquery在新窗口打开  复制代码 代码如下: $("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])").addClass(

Javascript控制页面链接在新窗口打开

第一个方法就是用jquery实现,原理是这样的先找到站点中的外部链接,然后再给链接加上target=_blank"属性就搞定了,代码如下: jquery在新窗口打开  代码如下 复制代码 $("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])") .addClass

jquery实现页面链接新窗口打开方法

这个方法依托jQuery,如果主题没有引用的话,那么有两个选择: 引用jQuery,然后愉快的使用本功能 不引用,苦逼的修改源代码 好了,字数凑的差不多了,我来贴代码啦! <script type="text/javascript"> jQuery(document).ready(function(){jQuery("a[rel='external'],a[rel='external nofollow']").click(function(){windo

B2C电子商务网站是不是用新窗口打开链接

写在前面这是参加SEO培训时候和咨询老师争议的问题.SEO?没错,是SEO培训老师花了相当时间大讲用户体验.果然是一个全民用户体验的年代了.大家以前都说"我觉得-","我认为-"现在从经理到前台都会"对用户来说-""从用户体验的角度来讲-". 担心的是用户体验发展如同早期被泛滥的用户友好(User Friendly),那个时候"User Friendly"作为众多软件必备标签印刷在外包装上,以达到用户友好的