《以实例讲产品改版方法论》系列,是一个时间跨度接近半年的全站改版大项目,留下的一点经验,共分为两个部分:上篇《改版的立项与推动实操经验》;本文为下篇,主要讲改版语境下的需求规划与交互设计方法技巧。 1. 改版需求规划:要打擒王战、攻坚战、歼灭战 我们首先要明确一个概念:大改版就是要树立好靶子,抓核心要点进而重点击破。因为改版立项后,通常开发资源充足,跨部门协调师出有名,如果不能打擒王战、打攻坚战,不能解决好关键问题,不能集中资源克服疑难问题,那就是浪费资源,不痛不痒。 那么具体如何辨别好靶子呢? 首页明显可见的问题。 关系产品核心价值的问题(例如UGC缺乏有效的生产者引导机制)。 核心体验流程的问题(例如资讯媒体的内容导航、搜索功能效率低下)。 影响业务转化的问题(如业务表单体验很差)。 技术上的疑难问题、牵一发动全身的问题。 经过对需求池的分类统计,我们定义了原版web端最主要、优先级也最高的四大问题,大家可以参照上述原则看例子: 首页子栏目混乱,曝光欠缺。 首页、资讯详情页停留时长较短,跳出率高。 导航混乱且过载,快速迭代期陆续加了多个重要栏目和业务入口,小屏幕用户的导航条都已经不够用了。 业务表单的组织结构混乱,有用户反馈找不到入口,也有用户填写遇到障碍。在是否要求登录上没有一致的规则,页面逻辑有错,跳转会让人疑惑。 那么为什么说改版又是歼灭战呢? 这是因为我发现,通常在开发中,会遗留一些边缘用例产生的问题处于pending状态。按照现在互联网公司的迭代和变更速度,延迟解决约等于不解决,那么改版,就是扫除这些苍蝇的绝佳推进机会。每个细枝末节的遗漏、特殊状态、像素级的误差甚至是文案标点,都可以在改版中做到一个不留,全部歼灭。 以上就是我在做改版需求规划时的原则,结合工作量,就可以确定改版需求的范围和比重。 2. 修复信息架构:正骨和消肿 针对1、3、4的问题,我们重新梳理了全站的信息架构。 2.1 板块/信息的分类与组织 信息架构中最核心的就是分类法,以下是我总结的分类维度。 关联:在业务上有紧密相关的。如"投资人"和"投融资项目"板块,属于从同一业务线中的方向不同的两条流程,向不同的用户群分别提供服务。 从属:信息的逻辑归属关系。如文章的两级分类。 同类:属于同一类信息的不同表现形态。因信息丰度、来源、时效性、外来属性等因素不同而产生的呈现差异,如"资讯"、"快讯"与"热文",都是新闻资讯类信息,同一个事件可能会在这三者中的任意出现,但展示的字段与布局完全不一样。应注意区别于从属,但有时候和从属的概念相容,这取决于产品目的。 同质:信息的抽象概念相同,此时通常用户对其操作模式和预期也是相同的。宏观上依据这个分类,可以将信息放入对应的布局区域如焦点区、热销位、板块窗口位、入口按钮菜单、用户菜单等。 等重:在某个产品阶段内,信息的重要性相近。这种分类结果会随产品发展而变化,比如新功能刚推出,你需要超越重要性去给它更强的引流入口。 整理出来之后,大至功能板块、小至信息布局,都有了清晰的依据和约束条件。 接着细化的工作: 组织信息的方式(按标签、按分类、按来源等) 呈现信息的规则(显示条件、排序、分页、隐藏与转移、加载方式、特殊布局位、默认/缺省设置等) 2.2 收纳箱:处理导航过载的良方 旧版产品的首页主导航,导航标记多达13个,11寸下的显示已经无法调整。我依据等重信息分类,将全产品不重要的功能统统隐藏进【发现】里面。这时候发现,公司的2个主要线下业务流程的表单入口,也会跟着线上不重要的信息板块被扔进去,层级会非常深。于是又将他们提出来,利用"同类"分类法,放在【服务】里面。今后如果还有更多的非主线板块/栏目,在上线一段时期过后,也会将考虑是否放到【发现】里面。 2.3 建立统一的操作认知 原版产品的表单,分处于3种不同状态的菜单导航中:需要登录、不需要登录、已经登录。造成的问题是,我们有的业务无法被曝光在未登录用户的菜单里,并且在使用时看见同一页面中有的入口时有时无,很容易迷惑,进而找不到之前提交的信息在何处更改。 针对这个问题,我从建立产品各方面的一致性来解决,包括入口样式与位置、操作路径、操作反馈、文本提示等,以保证用户对同质信息或操作,符合其心智模型,或者能建立正确的理解模型。 2.4 考虑改版对SEO的影响 作为资讯类web产品,一定会考虑每次改版或者页面调整对SEO的影响。对于主要内容要慎用ajax,即使因为体验优化的方案或者反爬虫决定要使用,那么也要用其他页面补充上,只不过这个入口,不一定被用户发现和经常使用。实例大家可以分别点击下列红框的效果,并观察页面地址变化。 2.5 延后复杂输入操作 最简单的一层是延后登录等,将注册、登录操作延后到要将用户行为或数据与ID绑定起来的时候。 还有一些是,将原本不适合放在线上、不适合放在移动端的操作,转移到线下人工处理或是利用文件传输处理,仅保留能保证主线流程不中断的信息填写,这样可以得到更低的跳出率。 3. 打磨交互细节 3.1 使用动效来表达路径、连续性、从属关系 为了使复杂设计、新设计更易于理解,我们经常使用动效来表达功能的操作原理。 路径很好理解,典例如将商品添加到购物车后,会有图像元素从按钮处以抛物线为轨迹,移动到购物车按钮。其余还有改版后的操作引导等,可通过轨迹、次序来暗示路径或方向。 连续性是指当有元素在横向、纵向空间中被隐藏,那么可以用对应轴向的运动来表达元素的连续。例如下图中的导航,我在web端大胆借鉴了移动端的设计方式。 完成这个动效设计时候,还要注意3点: 关注初态:利用格式塔原则中的"闭合"概念,用残缺的初态来提示用户。 运动方式符合基本概念:该处导航是一个有头有尾的线条,一定不要做成循环,那样会给用户带来认知和操作的困扰。 降低对普通用户的干扰:导航点到第五个以后,才会有动效,在用户点击前面几个高频分类的时候,如果也做横向移动,会干扰正常浏览,故做起来尽量克制,不干扰正常使用。 最后讲讲动效表达从属关系的例子。还是如图的导航,只有一个一级分类有子分类,那么子分类菜单就隐藏到父级分类被选中之后吧。 3.2 通过用户的注意力焦点决定元素位置 改版设计遇到一个细节争论,"首发"和"独家"这两个重要标签,到底放在哪里,在资讯列表中,是放在资讯头图上还是资讯标题前呢?此时产品目标是让它们显示在最重要的地方。那么我需要观察或模拟用户在本产品内注意力焦点的流动,来决定元素位置。通过简单用研的最终方案如下图所示。 后来想了一想,要讲出道理的话,应该是由于垂直类资讯阅读,用户的行为偏理性,且配图的目的通常只是稀释文字密度,降低阅读压力,用户的注意力焦点,以及选择进入哪篇资讯的依据,不在图片上,都在标题上。如果有眼动图,那我有把握猜测是用户焦点大部分是在标题与标题之间移动。 3.3 将数据分析融入设计过程 数据分析会涉及改版前、中、后,前定问题,中助设计,后有反馈验证。 这里仅谈对设计的帮助。举个例子,设计内容板块时,可以先用SQL去拿到自家数据库的关键字段,再用webscraper等爬虫工具爬同类竞品,并统计分析内容的如下属性: 极值:极大、极小、空值,以及其成因、实例。 平均值、中位数 分布范围、离散度 一口能答出这些数据,那么你的设计在落地的时候就避免了绝大多数问题。并且,这些数据有时候除了二次处理,还需要结合场景目标来分析,如资讯阅读时间预估提示功能,有以下两个问题: 上万字的统计和超过一定分钟数(如15分钟)的提示是无意义的,还会吓走用户。 分布范围非常集中于某几个区间,线性的映射函数会失去分离度。 那么对分段函数的处理,不能采用直观数据,需要结合数据分布范围和离散度映射出一个"更有吸引力"的数据组合来显示。 3.4 默认规则、数据来源缺失的处理 改版可能会动到一些根基功能,没有数据来源,则需要增加支线功能来让老用户过渡到新版,比如之前没有严格绑定手机号,现在要求手机号必填,但又有微信直接注册和邮箱注册且遗失邮箱的极端场景。我们就遇到了用户使用企业邮箱注册后离职,无法再次使用邮箱验证并绑定手机号,这样的一个场景。 4. 打造产品的万用基石 4.1 填充空白,利用动静变化占据注意力 在首页新设计了一个填充性区域,来专门做关键业务的曝光。在首页向上滚动到大概第三屏的位置(此时右侧边栏已经完成网站的主要功能板块的遍历),右边栏的块级元素会静止在页面上,直到视区窗口滚动到最下方或起点高度以上。 该区域的理念是,用户翻到第三屏的时候,认为其对内容需求有一定深度了,此时利用动静的变化引起注意,有目的地推荐一些内容板块,不会招致反感。 该区域定位很明显,当前阶段什么东西重要,或者想解决什么问题,提升什么数据,直接放上去就会有效果。 目前在这个区域,放了3个内容: 主要业务转化入口 快讯 & 热文(内容阅读延伸) 广告位(当没有广告时,增加快讯&热文的条数以达到刚好填充屏幕) 三个内容均是对症下药,均取得了首页及相应版块数据上的大提升,如提交数量、停留时间、PV等,其中快讯板块的日均PV同比有78%的提升。 并且要注意的是,这个区域也是可以往水平轴向扩展的,比如利用轮播、tab、走马灯等组件,但同时要注意扩展也会分流。有了这个填充性组件,如果以后会丰富功能或者提升曝光,那无疑我们已经提前先把框架搭好了。 4.2 利用抽象模型使产品可扩展 我们还可以分析一些高频同质的新需求,并设计一些通用性很强的模块,提炼出核心内容的范式,提供标准化、组件化需求扩展迭代方式,为以后新栏目的快速上线创造条件,并减少部分开发成本,长远上解决问题。 例如上图,就是一个首页资讯栏目扩展的标准容器。 相关阅读 以实例讲产品改版:准备与推动篇