页面是否用新的页面打开,只是一个很小的细节。但无论是面向普通消费型用户的网站,还是说面向企业用户的办公软件,无一例外都会遇到这些现实的问题,那么如何进行友好的交互操作是产品设计者不断的追求。

页面是否进行新页面打开,看起来并不是特别起眼,甚至可以说是一个很小的细节。但是用户在使用系统的过程中确实是最基础的使用体验,会常伴左右而无法避而不谈,恰恰是这些小小的细节决定了PC网站或者是软件的用户粘性,最终能否在竞品中胜出也起到至关重要的作用,能让用户用的舒心,不产生明显的打断用户的页面打开行为是最好的了。

关于链接打开方式,很多情况下还是测试数据说了算。但是一致性依然需要被注意,不能随意设置,导致用户无法预知他将要点击的下一个页面是如何出现的。无论是面向普通消费型用户的网站,还是说面向企业用户的办公软件,无一例外都会遇到这些现实的问题,那么如何进行友好的交互操作是产品设计者不断的追求。

一、友情链接等站外链接

我们在使用一个网站的时候,经常会在网站页面的页脚遇到一些站外链接,这个时候因为链接到的目的站点并不属于当前网站的站内站点,而是为了给予用户一些关联性的参考网站或者推广的需求。此时用户点击该标签时,用户的心理感觉也是要进入到一个新的网站页面,而不是继续停留在这个当前页。

另一方面从网站的设计者,也不想因为这个链接而刷新换掉自己的网站页面,所以应当在新标签打开页面。

二、当从列表或者概览进入详情页面时

有个原则是,当进入到一个详细的展示页面,无明显的操作交互时,可以考虑使用新页面打开。因为用户只是去查看具体的信息,不能因为这个查看动作而替换掉当前的页面。常见的场景是比如从列表进入详情查看页面,或者在搜索出一定的信息后,分条进入具体的搜索详情页面中,一般建议是新标签页打开。

很多时候不能忘记如果默认了当前窗口打开链接的时候,还是可以通过鼠标右键去重新选择是否在新标签页打开。所以很多时候如果在没法确定用当前窗口打开链接还是新窗口打开链接的时候,就可以考虑使用当前窗口打开链接,因为用户还可以使用右键在新窗口打开链接或者新标签页打开链接。

三、用户在当前页面操作频率较高的时候

企业用户注册时或者个人用户注册一个专业性的网站时,会需要提交填写很对表单数据,有时候表单数据还需要分步填写注册信息。因为当前的用户操作成本较高,当信息填写保存到下一步时,如果新标签页打开,会导致已经填写的数据页变为冗余页签。如果在当前页面打开,那之前的填写数据一方面会被保存,且连续的进入下一步。

四、页面中还有很多需要进行的操作

当前页面中还有很多其它的操作,且操作之间是存在前后的逻辑关系时,则新操作可以当前窗口打开,使得用户可以连贯的完成这个行为动作。如果操作之间是不存在前后的逻辑关系时,即可以同步进行不分先后,则使用新窗口打开,这样就既不会干扰当前的操作页面,也不会影响用户去完成这个操作。

而像在当前页面听音乐、看视频、阅读小说时点击其它的弹窗或者广告则新标签页打开,这样才能最小化的干扰用户在当前操作页面的行为。

五、二八原则

网站或者所有页面中,其中核心或者重点的页面一般只占整体的20%,这些核心或者重点页面是设计者希望用户能长时间停留和操作使用的。所以当用户在这些页面中的时候,是优先考虑使用新标签页面打开。

另外:

  • 逻辑交互操作上清晰且唯一的时候,优先考虑使用当前标签打开;
  • 打开一个打印页面等仅仅查看详情的页面时,优先考虑新标签打开;
  • 当前页面在操作下一步后即无实际意义时,优先考虑新标签打开;
  • 如果用户群体都是资深用户,知道如何右键打开新链接,优先考虑当前标签打开。

总之,交互无对错,具体的还需要放到实际的使用场景中进行考虑,而不是一味的使用所谓的原则,是否从新标签打开页面看起来也许并不是特别起眼,或者说是小的不能小的一个细节,但是对用户的影响确是无时无刻的。

本文由@山人小道 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

window.location.href不打开新窗口_在使用网站时,什么情况该用新窗口打开?相关推荐

  1. window.location.href如何多次请求_何为幂等?如何设计?

    欢迎关注头条号:老顾聊技术 精品原创技术分享,知识的组装工 目录 前言 罪魁祸首 幂等性 幂等场景 token机制 token机制缺点 乐观锁机制 乐观锁机制缺点 唯一主键机制 去重表机制 总结 前言 ...

  2. vue window.location.href 返回页面不刷新_前端框架vue中的keep-alive总结实践

    Vue keep-alive实践总结 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 相似, 是一个抽象组件 ...

  3. window.location.href如何多次请求_测试同学必会系列之如何进行幂等性的测试

    很多同学都应该听过幂等这个概念,但如果在面试中真的被问起来什么是幂等,你有信心去解释清楚么? 首先看看幂等的定义. 一个HTTP方法是幂等的,指的是同样的请求被执行一次与连续执行多次的效果是一样的,服 ...

  4. window.open和window.location.href的几种用法

    windows.open("URL","窗口名称","窗口外观设定"); <A href="javascript:windo ...

  5. php location.href,window.location.href的用法(动态输出跳转)

    javascript中的location.href有很多种用法,主要如下. self.location.href="/url" 当前页面打开URL页面 location.href= ...

  6. js获取当前域名、Url、相对路径和参数以及指定参数——下载文件-window.location.href

    js获取当前域名.Url.相对路径和参数以及指定参数--下载文件-window.location.href 1.js获取当前域名有2种方法 //方法一 var domain = document.do ...

  7. window.open与window.location.href

    2019独角兽企业重金招聘Python工程师标准>>> window.open(url):如果触发打开新页面的动作是用户发起的,浏览器不会阻止: 如果触发动作是自动执行的,浏览器会阻 ...

  8. window.location.Reload()和window.location.href 区别

    首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet])参数: bForceGet, 可选参数, 默认为 false ...

  9. js中window.location.href,location.href,parent.location.href,top.location.href的用法

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  10. 关于js中window.location.href、location.href、parent.location.href、top.location.href的用法...

    关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

最新文章

  1. 学习笔记(14):Python网络编程并发编程-文件传输功能实现
  2. java设计模式-模板方法模式
  3. linux之mindoc搭建
  4. 达尔豪斯大学 计算机专业排名,加拿大留学计算机专业排名
  5. 【C++从入门到踹门】第十四篇:二叉搜索树
  6. Protell99中的铺铜设置
  7. 常用算法:问题求解与优化
  8. 基于java的出租车预约网站
  9. 最全解读】各种金融机构的产品分析(银行、证券、基金、信托...)
  10. Would you like to share anonymous usage data about this project with the Angular Team at Google unde
  11. CSP-J 2021_3_网络连接
  12. Python-pytest、unittest
  13. 最黑链的如何写隐藏代码
  14. keepalived(haproxy高可用、haproxy高可用双主、lvs+keepalived)
  15. pico的学习之路(三)——CTRT5000一路寻迹传感器|黑白传感器|红外传感器(树莓派pico实现)
  16. SQL(MySql)菜鸟教程知识
  17. 高薪=高风险?快手大幅度裁掉 30%人,年薪100万+资深员工照样裁?
  18. python爬取某信公众号所有信息,并批量下载公众号视频
  19. 就光会拉个数,要你数据分析师有何用? by彭文华
  20. 如何给惠普计算机主机解还原,惠普系统还原,教您惠普电脑系统如何还原

热门文章

  1. 基于jQuery或Zepto实现实时监控用户浏览信息
  2. mui ajax请求 登录
  3. 用WPF+MongoDB开发房产信息收集器(3)——MongoDB入门
  4. 【转】互联网架构的三板斧
  5. ARP 地址分类 NAT技术
  6. 大话设计の设计原理摘要(二)
  7. 网上银行等电子支付平台的WEB登陆安全性简要分析
  8. Linux设备驱动模型-Driver
  9. php mysql占位符_php中的占位符
  10. centos 网络自动连接_自动连接最优信号 腾讯云?云兔解决物联网络连接问题