网站页面布局优化方案

网站页面布局优化方案我是负责公司官网用户体验与前端优化的工作人员，做这一行快六年了，大半年来我们一直盯着官网的数据发愁：整体跳出率比两年前涨了近28个百分点，核心业务咨询转化掉了两成，上个月我拉了用户行为热力图，又找了二十位不同类型的来访用户做一对一访谈，发现八成的用户流失问题都出在页面布局不合理上——我们总想把自己想展示的内容全塞给用户，却完全没考虑用户进来第一秒想找什么，找信息的路径顺不顺。梳理清楚问题之后，我牵头做了这份完整的页面布局优化方案，所有调整方向都来自实际的用户反馈和数据，不是凭空想的改动。1优化背景与核心目标1.1现存布局问题梳理结合热力图数据和用户访谈，我把现存的布局问题整理得明明白白，每一个都是用户真真切切吐槽过的。首先是首屏信息完全错位，我们现在的首屏从上到下依次是logo导航、四张全屏轮播图，轮播图放的全是公司年会、厂房外观、领导参访的内容，轮播图结束才轮到核心业务介绍，也就是说用户打开网站，一屏之内根本看不到任何和自己需求相关的内容，我统计的数据显示，58%的跳出就发生在首屏加载完成的三秒以内，很多用户看不到自己要的内容直接就关了。其次是导航结构混乱，原来的顶部导航放了12个一级菜单项，从业务、案例到子公司介绍、内部招聘啥都有，我访谈的时候有快一半的用户说找不到自己要的分类，有的想找联系我们，翻了半天下拉菜单才找到，还有搜索框原来藏在页脚最角落，有用户跟我说找了五分钟没找到搜索，最后直接退出了。第三是核心内容区布局不合理，原来用的是侧边栏加主内容的结构，侧边栏占了30%的宽度，堆了最新资讯、热门推荐一堆无关内容，我看了后台数据，侧边栏整体点击率不到2%，等于白白占了用户的可视空间，把主内容挤得又窄又小，看着特别累。最后是移动端适配做得太差，现在近七成用户都是用手机访问官网，我们原来的布局是直接把PC端的内容缩小放进去，字体小到要放大才能看，按钮挤在一起经常点错，想打电话还要自己抄号码，很多用户嫌麻烦直接走了。1.2本次优化核心目标我们做这次优化不是为了赶潮流改设计，也不是为了把布局改得多么花哨，核心目标分两类，一类是可量化的业务目标，一类是体验目标。量化目标很明确：上线后一个月内把首屏跳出率降低30%，用户平均停留时长提升25%，核心转化按钮的点击率提升20%，整体咨询转化量回升15%以上。体验目标就是让用户进来能在三秒以内找到自己想要的核心信息，不管用电脑还是手机，找联系方式、找业务介绍、找案例的路径都不超过三步，去掉所有没用的干扰信息，让用户浏览起来舒服不费劲。2核心页面布局优化方案理清问题和目标之后，我们从首屏到页脚，从PC端到移动端，做了全链路的布局调整设计，每一处改动都有依据，不是瞎改。2.1首屏区域布局重构优化首屏是用户对网站的第一印象，也是决定用户留不留的关键，所以我们第一个动的就是首屏。首先改顶部导航，原来12个一级菜单项合并精简成5个核心分类：首页、业务服务、案例展示、关于我们、联系咨询，把原来的子公司介绍、招聘这些非核心内容全部放到“关于我们”的下拉菜单里，这样导航看着干净清爽，用户一眼就能找到自己要的大分类。同时导航栏改成固定顶部，不管用户滚到页面哪个位置，导航都一直在顶部，不用滚回顶部找菜单，这个小改动我之前在别的项目试过，能提升10%左右的点击效率。然后我们把搜索框直接放到导航栏的最右侧，字号放大，用户进来想搜什么直接点，不用再翻到页脚找。首屏的主体内容我们彻底改了结构，原来占满整个首屏的轮播图全部下移到第二屏，首屏主体改成左文右按钮的结构：左边放我们三个核心业务的卡片，每个卡片一句话说清楚能解决用户什么问题，右边放一个醒目的“免费咨询获取方案”按钮，用和背景反差大的颜色，字号比普通内容大两倍，用户进来一眼就能看到“我们能做什么”，想要咨询直接点，不用绕弯。整个首屏的所有核心信息都控制在一屏以内，不管用户用什么尺寸的屏幕，不用滚动就能看完所有关键内容，不用让用户猜下面还有什么。2.2核心内容区布局逻辑优化首屏改完之后，我们接下来调整核心内容区的布局。原来的侧边栏占地方又没用，我们直接去掉，改成通栏布局，主内容占满整个可视宽度，看着更大气也更舒服。内容排序我们按照用户普遍的F型浏览习惯来调整，把用户最关心的内容放到左上最显眼的位置，原来我们的业务介绍页面，开头先放一大堆公司资质、发展历程，用户根本不关心这些，用户进来第一想知道的是“你能不能解决我的问题”，所以我们调整了顺序：开头先点出用户常见的痛点，再放我们的解决方案，然后放同类的成功案例，最后才放公司资质和介绍，这样顺着用户的思考路径走，用户看着也顺。原来我们内容块和内容块之间挤得太近，字挨字图挨图，看着特别累眼睛，这次优化我们加大了内容块之间的留白，给页面留足呼吸感，用户长时间浏览也不会觉得累。原来放在侧边栏的相关推荐，我们移到了每一篇内容、每一个业务介绍的末尾，用户看完当前内容，想要看更多相关的自然会往下滑，我之前做过小范围测试，这样调整之后相关推荐的点击率涨了快十倍，比放在侧边栏效果好太多。2.3功能转化模块布局优化转化是我们做网站的核心目的，原来很多转化模块布局不合理，白白丢了很多转化，这次我们统一调整。首先是咨询转化按钮，原来的咨询按钮只放页脚，用户看完内容想咨询还要滚到最下面，太麻烦，我们现在在每个核心业务页面的右侧加了固定悬浮的咨询按钮，不管用户滚到哪里，按钮都在可视范围内，想点随时点，同时我们在每个业务介绍的末尾、每个案例展示的末尾都加了一个醒目的咨询按钮，用户看完内容刚好有需求，直接就能点，不用多走一步。然后是弹窗模块，原来我们一打开网站就弹全屏的咨询弹窗，挡了所有内容，用户特别反感，很多用户进来第一下就是关弹窗，顺便把网站也关了，这次我们改了弹窗的触发规则：只有当用户停留超过一分钟，或者鼠标移动到关闭按钮要退出网站的时候才弹，而且弹窗改成小尺寸，放在页面右下角，不挡核心内容，关闭按钮做的大大的，用户不想看一眼就能关掉，不会引起反感。最后改页脚布局，原来页脚乱堆了一堆链接，乱七八糟，联系方式放的比版权字号还小，用户找半天找不到，现在我们把页脚分成清晰的三块：第一块放核心导航链接，方便用户快速跳转，第二块放大放全我们的联系电话、办公地址、微信二维码，电话还做成可点击的，用户点一下就能直接拨号，第三块放版权信息，干干净净，用户想找联系方式滚到页脚一眼就能看到。之前有个客户跟我吐槽说找我们电话找了十分钟，现在肯定不会有这个问题了。2.4多终端响应式布局适配优化现在大部分用户都是手机访问，原来的适配太差，这次我们完全重做了响应式布局，不同终端自动调整布局，保证每个设备的体验都好。手机端我们把顶部导航改成汉堡菜单，节省空间，首屏只保留核心业务卡片和大的咨询按钮，去掉所有没用的侧边栏和冗余内容，内容从上到下依次排列，适合手机单手滑动浏览，所有可点击的按钮最小都做到48像素，符合手机点击的要求，不会再出现点不准的情况。平板端我们做成双栏布局，兼顾内容量和浏览体验，不会像手机端太挤，也不会像PC端太散。原来手机端二维码放的太小，扫不出来，现在我们把二维码放大，用户点开就能直接保存扫码，非常方便。3优化实施安排与效果保障方案再好也要落地，我们已经做好了分阶段实施的计划，也留了调整的空间，保证上线之后能达到预期效果。3.1分阶段实施节奏我们整个项目分四个阶段推进，第一阶段是需求确认和原型设计，用一周时间，把所有优化点做成高保真原型，找十位种子用户测试，收集意见修改，确认所有调整都符合用户需求。第二阶段是设计和开发，用两周时间，设计出最终的页面稿，前端完成布局重构和响应式适配，后端做好数据对接，所有功能开发完成之后做内部测试，把bug都改完。第三阶段是灰度测试，用两周时间，开放50%的流量给新布局，我们每天盯着数据变化，每天收集用户反馈，发现问题随时调整。第四阶段就是全量上线，灰度测试数据达到预期之后，全量替换原来的布局，正式上线。3.2效果验证与动态调整机制我们不是上线就完事了，布局优化是一个持续的过程，上线之后我们会持续跟踪数据。每天统计核心指标：首屏跳出率、平均停留时长、转化按钮点击率、咨询量，每周做一次小总结，每个月找十个用户做抽样访谈，收集用户的使用感受。上线第一个月我们每三天做一次小调整，比如如果发现某个位置的按钮点击率还是低，我们就挪位置、改大小，要是发现用户还是找不到某个信息，我们就调整排序，一直调到数据符合预期为止。3.3项目保障措施这次优化我们组了专门的小团队，产品、设计、前端、运营各一个人，每个人的责任都划清楚，每天早上花十分钟碰一下进度，有问题当天解决，不拖工期，所有改动都留好备份，要是出现问题能快速回滚，不会影响网站正常访问。4方案总结总的来说，这次网站页面布局优化，核心思路不是为了改布局而改布局，也不是追求多么炫酷的效果，就是站在用户的角度，把用户想要的信息放到用户一眼就能找到的地方，去掉所有我们自嗨加上的没用内容，让用户找信息顺，做操作顺