数据分析驱动设计优化洞察

AKA小蕾子

北京/UX设计师/3年前/634浏览

版权

数据分析驱动设计优化洞察

AKA小蕾子

——记2019年京东PC首页改版

前言

2019年京东PC首页改版是三年前笔者作为主交互负责落地的项目，由于当时处于信息敏感期，文章仅京东内部可见，如今重新整理后发出与大家分享经验。

随着智能手机和移动应用的普及，Web端网上购物已经渐渐退出大众视野，19年改版是京东网页端最后一次大的结构性调整并沿用至今。时代在更迭，我们设计的对象和载体在变化，但设计思路和方法是通用的。本文将带大家一起回顾完整的首页改版思路，详细介绍如何通过数据分析的方法，洞察页面流量分发效率提升之道。

一、项目背景

2018年，京东PC首页日均流量较17年下降31%，用户浏览深度和UV点击率等转化指标也呈逐年下滑趋势，首页流量分发效率亟待优化。另外，从运营成本看，首页人工运营压力日益明显，平台迫切需要一个更加高效的运营机制来承接不断增长的业务诉求。

二、旧版现状

下图抽象了最近两次大改版，即16、17年改版PC首页页面布局特点：16版呈现较明显的品类货架属性，首屏之后主要由频道运营楼层构成；17版以聚合场景为主导，对频道进行主题整合，大面积使用三等分内容卡片布局和“z”字型视觉引导动线，实现了更多资源位曝光并在前期取得了显著数据提升。但随着时间推移，17版的弊端也逐渐暴露：

1、频道广场区过长空间浪费严重，用户浏览深度衰减严重；

2、三等分布局过于平均，缺少强弱对比和节奏感，强势频道呈现受限制；

3、不同属性的卡片样式繁多，增加了用户认知成本和运营压力。

三、设计目标

在前期沟通中，业务侧提出以下三大业务目标：

1、提升首页各区块入口曝光率和点击率，助⼒各事业部⽬标达成；

2、提升核心用户价值和浏览体验，提升首页引入单量；

3、全面缩减页面人工运营成本，释放运营压力。

我们需要注意的是，设计目标的制定一定要紧贴业务诉求，因为设计价值源于业务目标，产于业务价值变现。针对三大业务目标，笔者衍生推导出以下设计目标和策略：

1、提升流量分发效率：提升首页单位空间的内容承载力和转化效率；

2、提升精准运营能力：提升BI权重，实现用户精细化运营，优化用户体验细节质感；

3、资源整合&运营自动化：前台资源位整合精简，提升自动化运营区占比

四、设计思路 & 落地方案

通过各核心区域用户行为数据分析，洞察现存问题点，定制相应设计优化策略

笔者将首页核心业务模块拆解为四大区域：首屏区、核心频道区、频道广场区以及底部Feed流推荐区。通过分析各区域业务资源承载力、流量占比、转化率等数据指标，衡量当前框架结构的资源配置质量和流量分发效率。下面是各区域详细分析过程和优化方案。

01/首屏区：挖掘内容承载力

京东PC首页95%的点击量都集中在首屏，红色广告区点击尤其密集，广告区是整个首页最寸土寸金的核心地带。该区域受制于坑位数量有限（主Banner 8帧+3个固定坑位=11个），资源分配相当紧张，因此首屏区亟待解决解决的问题就是进一步挖掘广告区的内容承载力，创造更多有效坑位。

通过数据分析笔者发现：

1、在PC端用户习惯直接点击“左右”按钮切换Banner，几乎不点击“...”计步器；

2、右侧三个固定今日推荐位的CTR与主Banner第7-8桢基本持平，热区小但效果良好；

为了增加有效坑位数量，笔者先后尝试过几种方向：

方案一：重新分割区域增加默认展示坑位；

方案二：首焦提供缩略图预览，增加首焦Banner帧数；

方案三：3个今日推荐位与首焦Banner视为一体联动变化，推荐内容随主Banner切换而变更，由此产生3x8=24个今日推荐位；

在评审过程中，首先为了保持用户最简视觉动线我们过滤了方案一；其次，我们认为缩略图前置曝光对2～12帧Banner的点击率影响较大，因此，最终选择方案三灰度上线。

然而，灰度效果并不理想：坑位增加反而造成今日推荐区域点击率下降20%，连带首焦Banner点击率下降10%。通过分析笔者总结原因有三：

1、首焦和今日推荐视为一体时，面积大的首焦吸引了用户主要注意力；

2、今日推荐位和首焦同时切换，导致用户视觉焦点混乱，不知道该看哪里；

3、今日推荐数量过多产生廉价感降低用户点击欲望；

随后笔者迅速输出优化响应方案：

1、降低今日推荐的帧数和切换频率，首焦每切换3次，推荐位切换1次；

2、给予推荐位独立的左右切换控制按钮（hover时显示）；

3、优化推荐位资源配比：3个推荐位使用2个资源位+1个广告位的组合形式增加广告收入

优化版本上线后效果明显，今日推荐位在不影响首焦点击率（首焦CTR提升2%）的情况下CTR提升45%，有效坑位数增加了6个。

02/核心频道区：增强特性表达

核心频道区是战略频道的常驻导流入口，是事业群重要的前台运营抓手。旧版核心频道区从数据上看呈现出资源配置不佳的情况，部分频道入口引流能力差但是转化极高，部分频道虽然位置靠前但是没有相应的流量转化能力。

策略1：打破三等分布局，强化高频/高价值频道

优化后的页面布局呈现“1带2”和“1带4”两组：“1带2”承载刚需/高频/高转化频道更大的展示空间；“1带4”承载内容导购型频道。每组分别选择UV价值表现最好的强势频道“单品秒杀”和“发现好货”使用一行一通栏形式展示，其他频道可根据上线数据表现自由调整排列顺序。

策略2：增强频道特性表达，多维度透传核心信息

如何在保证视觉协调性的基础上，突出每个频道特性是核心频道区的设计重点。

以排行榜和品牌闪购为例，排行榜调性上突出平台权威信赖感，内容上打破单一销量维度，丰富各类榜单类型如体现趋势热点变化的实时热搜榜，让用户每次查看都有新鲜感。“品牌闪购”属于高频高转化频道，设计时突出三个要素：1/品牌背书；2/倒计时氛围；3/促销利益点曝光。

以“发现好货”为例，该频道属于内容探索型频道，主攻兴趣发现场景。那如何体现“逛”的特性呢？想象一下我们在线下逛商店的体验：在玲琅满目的商品中穿梭，发现感兴趣的商品时会驻足观赏，整个过程走走停停。笔者使用“商品循环滚动”的效果来模拟用户在逛商店时扑面而来的信息流输入，鼠标移入时滚动暂停，点击商品可查看详情；为了提高用户的控制感，Hover时显示进度滑块来控制滚动的方向和速度。这种内容容器可承载10-15个BI的推荐商品，充分提高了好货区域的信息承载力和视觉吸引力。