← 全部指南

如何判断你的菜单是否有效 —— 需要追踪的 5 个指标

指标四 —— 移动端与桌面端的导航行为对比

对比移动端与桌面端导航:如何在 GA4 中测量它、当移动端退出率明显高于桌面端时的警示信号,以及如何为每种设备拆分你的 Tab Bar 布局。

指标四 —— 移动端与桌面端的导航行为对比

这个指标和前面三个有点不一样。你看的不是单独一个数字,而是同一个数字,但按设备拆开来看。这正是你对比移动端与桌面端导航的地方 —— 人们在手机上浏览和在电脑上浏览,是不一样的。

我明白这一点的时间,比应该明白的时候晚了不少。一开始我看的是合并报告,发现菜单的数据看起来都还不错,于是就放心了。直到我把移动端单独拆出来看,才发现一半的访客所经历的体验,跟我想象中的完全是两回事。

同一个菜单,两种截然不同的故事

当你按设备对比导航时,最值得看的有三件事:

  • CTR(菜单点击率): 在每种设备上,有多少比例的访客真的点开了菜单。
  • 浏览深度(他们浏览得有多深): 点开之后,他们翻了多少个页面。
  • 退出率: 有多少访客几乎什么都没做就离开了。

关键在于,这三个数字在移动端和桌面端之间通常差别明显。在桌面端,菜单往往是横向排列且始终可见的 —— 访客扫一眼就能看到全部内容。在移动端,菜单往往藏在一个三横线的汉堡按钮后面,访客必须点一下才能打开。

这个差别可不小。根据 Nielsen Norman Group 的研究,把主导航藏在汉堡按钮后面,几乎会让访客找到菜单的几率减半,同时还会让他们花更多时间、觉得任务更难。同一个网站,但桌面端用户和移动端用户,实际上是走进了两家不同的店。

如何测量:在 GA4 中按设备类别拆分

你不需要任何特殊工具,GA4 全都能搞定。

最简单的办法,是打开”探索”(Explore),新建一个”自由格式”(Free form)报告,然后把设备类别(device category)加为维度。现在每个指标都会显示成三行:桌面端、移动端、平板。你可以直接横向对比这几行的跳出率、互动度和每次会话的页面数。

如果你想看得更深,可以创建独立的细分 —— 一个”移动端”细分和一个”桌面端”细分 —— 然后把同一份报告分别套用到每个细分上。当你想叠加额外条件时,这种方式很方便,比如只看从 Facebook 广告来的访客,或者只看某个特定类目页上的访客。

说一下 GA4 是怎么定义这些概念的。在 GA4 中,当一次会话没有产生互动时,它就被算作一次”跳出”—— 也就是访客停留不到 10 秒、只看了一个页面、也没有触发任何关键事件。跳出率其实就是互动率的反面。记住这一点,免得这些数字把你绕晕。

测量的时候,别把注意力放在绝对数值上,而要看移动端和桌面端之间的差距

在桌面端管用的设置,在移动端可能彻底失灵

这部分是我想特别强调的,因为它最容易被忽略。

当你搭建菜单时,你几乎肯定是坐在电脑前的。你在宽屏幕上预览,看到整齐的多列 Mega Menu,觉得什么都很好点,然后就上线了。问题在于,你的大多数访客并不是用你这种方式在浏览。

到了移动端,一切都变了。屏幕很窄,手指比鼠标光标大得多,访客通常是一只手拿着手机、用一根大拇指去点。根据 Steven Hoober 的拇指热区研究,手机上大多数操作都是用拇指完成的,而最容易够到的区域是屏幕的下半部分。一个挤在顶部角落、文字又小、条目又密的菜单 —— 在桌面端没问题,在移动端却很难点中。

举个常见的例子:一家服装店把整个商品目录都塞进了一个非常详细的桌面端 Mega Menu —— 上衣、下装、连衣裙、配饰,还按季节、按尺码分。很漂亮。但在移动端,这一切都被压缩进了汉堡菜单里一条没完没了的长列表。访客得先点开它,往下滚,找,然后才点得到。每多一个步骤,就多一次让访客离开的机会。

这正是为什么你应该为每种设备分别配置导航。在移动端,很多店铺会改用 Tab Bar —— 一条固定在屏幕底部、正好落在拇指热区的导航栏 —— 用来放最重要的 3 到 5 个条目,比如首页、分类、搜索和购物车。在桌面端,他们保留完整的 Mega Menu。两种布局,对应两种场景。

警示信号:移动端退出率明显高于桌面端

最明显的信号很容易看出来:移动端的跳出率明显高于桌面端。

平心而论,移动端退出率比桌面端高一点,到处都很正常,不是只有你这样。根据行业基准,移动端会话的跳出率往往在 50% 上下,而桌面端要低一些 —— 平均差距大概在 10 个百分点左右,而且这些年一直相当稳定。所以光是移动端更高,别慌。

值得担心的,是这个差距异常地大的时候。如果在同样的页面上,移动端退出率比桌面端高出 20 个百分点甚至更多,那就说明你的移动端体验出了问题 —— 而导航,是头号嫌疑之一。

同时还值得留意几个别的信号:

  • 移动端的菜单 CTR 远低于桌面端:访客找不到它,或者不愿意点。
  • 移动端的浏览深度更浅:访客落到一个页面就关掉,没有往下深入浏览。
  • 移动端页面加载缓慢:笨重的菜单或应用拖慢了速度,访客失去了耐心。Google 建议 LCP 控制在 2.5 秒以内、INP 在 200 毫秒以内、CLS 在 0.1 以内;而这些指标通常都是在移动端表现最差的。

别忘了,根据 Baymard Institute 的数据,平均购物车放弃率本来就已经在 70% 左右了。一个难用的移动端导航,只会让这个数字更糟。

行动:把移动端和桌面端拆成两套独立的设置

你需要做的事,一句话就能说清:别强迫一个菜单同时服务两个世界。

具体来说,在 GA4 里看完数据之后:

  1. 把报告按设备类别拆分,找出那些移动端退出率异常高于桌面端的页面。
  2. 用你自己真实的手机,打开这些具体的页面,像顾客那样用一根大拇指去点菜单。你会亲自感受到那些卡顿。
  3. 设计一套独立的移动端布局 —— 优先在底部放一个 Tab Bar 来放主要条目,精简汉堡菜单里的列表,并把按钮做得足够大、好点。
  4. 桌面端保留完整的 Mega Menu。两套设置,而不是一套。

这正是 Navi+ 被打造出来的目的。你可以分别配置移动端和桌面端:移动端在底部放一个 Tab Bar,桌面端放一个 Mega Menu,各有各的布局,全程不用碰任何代码。菜单经过优化,不会拖累你的 Core Web Vitals,而且在你切换主题时也能保持原位。一切都是拖拽完成的。

我最后悟出的东西其实很简单。你不需要一个完美的菜单。你只需要别再用一个坐在桌面前的人的眼光,去评判移动端的体验。把数据按设备拆开看一次,你很有可能会看到那些一直被你错过的东西。

本文是更大篇指南 如何判断你的菜单是否有效 —— 需要追踪的 5 个指标 的一部分。

分享 Facebook X