小程序页面层级与跳转逻辑的设计

深圳SEO
深圳SEO
深圳SEO
29755
文章
0
评论
2020年3月29日00:56:13 评论 3,375
摘要

前段时间,负责公司的一个小程序的产品实现,几天前正式上线。过程中遇到了小程序页面层级与跳转的问题,因此特撰此文,对该小程序实现过程中遇到的该问题做一个简单的复盘。在我们的小程序中,涉及到的关键交互页面主要有三个:首页、内容详情页以及收藏页面。其中,三个页面之间构成互相跳转的关系,具体的跳转逻辑如下所示(其中,首页和收藏页面作为底部栏中的图标出现)三个

前段时间,负责公司的一个小程序的产品实现,几天前正式上线。过程中遇到了小程序页面层级与跳转的问题,因此特撰此文,对该小程序实现过程中遇到的该问题做一个简单的复盘。

在我们的小程序中,涉及到的关键交互页面主要有三个:首页、内容详情页以及收藏页面。其中,三个页面之间构成互相跳转的关系,具体的跳转逻辑如下所示(其中,首页和收藏页面作为底部栏中的图标出现)

三个页面之间的跳转逻辑

刚开始在做页面的时候,考虑到的是“页面之间的跳转逻辑有没有遗漏?”,反复确认没问题之后,就开心地跑去和开发提需求。

但是在开发过程中,开发反馈了一个问题:首页-详情页-收藏页-首页-…(路径为1-3-5-1-…)构成了一个闭环,如果循环打开到10个页面的时候,出现再次点击却出现了再也点不动的情况(无法打开新的页面)。原因是当前微信小程序页面最多支持10个层级(可以理解为这是一个最多可以放10个元素的栈,每新打开一个页面相当于入栈操作,返回上一个页面则相当于出栈)。

考虑到小程序一旦对外,我们就无法把控用户的行为。一旦用户确实打开了10个页面而导致其无法继续操作,肯定会造成用户的困扰,导致其体验不好,最终导致流失。其次,该种交互方式存在另外一个问题:如果用户打开了大于5个页面(小于10个),需要连续按多次“返回”按钮才可以退出小程序,导致用户的体验也相当地不好。

所以,最好的方式就是将流程优化。

先分析问题发生的根源:出现了一个死循环,但是要求是总步数不超过10步。

经过分析,这个时候我们提出了几个方案:

方案一:这三个页面互相跳转的时候,调用小程序的相关方法,将之前的所有页面全部关闭之后跳转其他页面(可以理解为清空栈后在入栈)

评估之后该方案被否决了,会出现两个异常场景:

在三个页面中点击返回按钮时,都会直接退出小程序,用户体验不够好。

在用户在进入内容详情页时,点击返回时,潜意识会认为会返回到前一个页面,如果直接退出,用户的体验就不够好。

PS:(只会在安卓手机上出现此第一个场景,苹果手机无返回的按钮,因此不存在此场景。但第二个场景在苹果和安卓上均会出现体验问题)

方案二:使用中间页的方式,在页面数量达到5层之后,使用中间页进行页面的标记,从而协助支持更多的跳转(就是在微信的栈之外另外建一个栈来记录)。

但是该方案也被否决了,因为该项目要求尽快上线,开发反馈实现这个方案开发来不及。此外,依旧没有解决多次返回的问题。

方案三:到达第8页之后,新打开页面点击返回都会直接重定向到第8页,这样就避免了10层的限制(部分电商小程序采用了该方案,但是使用场景与我们不同)。

评估之后,依旧被否决了,因为如果第8页为收藏页,跳转到首页(第9页)之后,用户点击某个内容后跳转到了详情页(第10页),这时,用户点击返回,直接定向到了收藏页,和用户的预期(首页)不符,会对用户造成使用上的困扰。所以,该方案也被否决了。

经过思考和调研一些电商小程序(因为电商小程序的购物路径有时会突破10层的限制,这里的逻辑主要借鉴参考了某电商小程序中的首页-商品详情页-购物车的跳转逻辑)之后,我们意识到,其实出现返回的场景主要集中在内容详情页,所以提出了方案四:

在跳转到非内容详情页的时候,使用清空栈后再跳转的方案(此时再按返回就会退出小程序,涉及到首页和收藏页)。当跳转到内容详情页时,允许进行返回的操作(即出栈的操作)。

此时,虽然整体逻辑路径仍然和之前一致,但是在5,6步骤的时候,已经将之前所有的页面均进行了关闭。此时,最长的路径为首页-商品详情页-收藏页面,也就不存在超过10层的问题,同时解决了之前我们所讨论的两个问题。

其实在产品设计的过程中,我们不应该忽略的点是——收藏和首页按钮一样,是作为底部栏的按钮出现的,二者的地位是平等的(类似电商小程序中的购物车功能),所以才用了方案四的处理方式。

如果收藏页面比首页的地位低(不在底部栏而在首页上),那么用户从首页点击进入收藏页面后,潜意识认为,点击返回后进入的就会是首页,如果此时退出小程序,给用户就会造成困扰,此时也就不能用方案四的实现方式了。

注意,一定要注意这里的使用场景。

一是在竞对分析的时候,除了要关注宏观功能点之外,还要多关注细节的处理逻辑,很多时候大方向没错的时候,细节往往会有不少忽略的地方。细节才是用户体验的主阵地,也能体现一个产品经理的功力(大佬如是说)

二是要多和开发测试沟通,很多时候大家在思考问题的角度不同,所以一定要学会站在对方的角度去换位思考,在确定好最终的目标与方向不变的前提下,求同存异。

本文由 @隔壁张叔叔

深圳SEO
seo和sem的区别是什么? SEO优化

seo和sem的区别是什么?

区别:1、SEM网站竞价排名根据价格而定,见效快;而SEO优化需要时间去“培养”,见效慢。2、SEM属于“大海捞针”,精准度不高,跳出率可能会比较高;SEO优化根据用户需求,精准度高。3、SEM有时效...
初创企业必看:网络营销推广怎么做? SEO优化

初创企业必看:网络营销推广怎么做?

网络营销和网站推广主要是企业塑造自身品牌形象,让消费者广泛认同的一系列活动。网络营销推广有两个重要任务,一是树立良好的企业和产品形象,提高品牌知名度、美誉度和特色度,二是最终销售出具有相应品牌名称的产...
分辨一家网站推广公司整体实力的方式 SEO优化

分辨一家网站推广公司整体实力的方式

由于成本低、见效快,网站推广在很短的时间内成为中小企业流行的营销方式。各行各业的企业很多,很多企业不懂网站推广。既然不能做网站推广,那就要找专业的网站推广公司。目前网站推广公司太多,导致不知道如何选择...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: