通过页面转换优化改善用户流程
通过页面转换优化改善用户流程,如果您计划研究HTML5和前端Web开发,您将不可避免地要了解用户体验,以及它所提供的几乎所有内容。网站开发代码编写当然代码越整洁越好,编写的代码反映出您对网站和应用程序的真实用户体验的理解,因此一定要做好。
如今无数专家花时间分析页面性能以及用户留在页面上的最新见解,以及他们离开页面的原因。最新的研究案例向我们展示了可以改进页面转换以提供精致的用户体验。
每当用户的体验中断时,他们离开的机会就会增加。从一个页面切换到另一个页面通常会通过显示无内容的白色闪烁,加载太长时间或者在新页面打开之前将用户带出他们所处的上下文来导致此中断。
页面之间的转换可以通过保留(或甚至改进)用户的上下文,保持他们的注意力以及提供视觉连续性和积极反馈来增强体验。同时,页面过渡也可以在美学上令人愉悦和有趣,并且可以在完成时加强品牌。
传统上我们依赖于默认转换,即当我们点击网站的新页面时,我们必须等待浏览器重新加载该页面。虽然一些开发人员正在追赶这个概念的效率如何,但我们不会看到这种全局变化的页面转换如何在不久的将来发生变化。如何放大页面转换所需的工具和信息,以便浏览器不必为访问者打开的每个新页面进行重新加载,这是对全球用户体验的极大丰富,桌面和移动应用程序很多都在运用此技术提高用户体验。
页面间转换调整注意事项:
在更改链接的行为之前,我们应该添加一个检查以确保它应该被更改。例如,我们应该忽略所有链接target="_blank"(在新选项卡中打开页面),所有指向外部域的链接,以及其他一些特殊情况(例如Control/Command + click,它们也会在新选项卡中打开页面)。
更新主内容容器外部的元素,当页面更改时,cc容器外部的所有元素保持不变。但是,其中一些元素需要更改(现在只能手动完成),包括title文档,带有active类的菜单元素,以及可能还有许多其他元素,具体取决于网站。
管理JavaScript的生命周期,页面现在的行为类似于SPA,浏览器本身不会更改页面。因此,我们需要手动处理JavaScript生命周期 - 例如,绑定和解除绑定某些事件,重新评估插件,以及包括polyfill和第三方代码。