电商大促攻略页设计指南

通常我们看到的旅游攻略,游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互。而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营销目,同时存在很多交互操作。所以电商攻略页可被视为一个独立的小型产品,在设计这样的产品时,有什么设计方法可寻呢?本文内容即为笔者在多次大促攻略页设计经验中总结出来的一套方法,希望能对要设计促销攻略页的运营同学和交互同学有所帮助。 文章将从产品方案阶段基础知识,设计案例讲解,表现模型的可用性评价三个主要部分对攻略页设计进行讲解。先看一张图,希望大家能在头脑中能对攻略设计的方法形成一个大概的印象。 第一部分:产品方案阶段基础知识 1.1、战略层—产品目标确定和用户需求收集 不管是要做什么产品,在开始之前都要问这样两个问题: 我们要通过这个产品得到什么? 我们的用户要通过这个产品得到什么? 回答了第一个问题,即确定了产品目标;在攻略页的设计中,通常对攻略页定下的产品目标可能有:曝光大促内容,预约回流,为大促会场/自营活动/品牌活动引流,分享传播,发券,成交,品牌识别等。根据每次大促的战略不同,攻略页承担的产品目标也不一样。在确定具体产品目标后,需要对目标优先级进行排序,这决定了接下来的产品具体形态。 回答了第二个问题,即确定了用户需求;通常我们会对产品将要面对的人群进行分类建立用户画像,结合用户故事地图挖掘用户需求,但攻略页这个小型产品,面向全国大众,用户画像这步就可以省略了。 “攻略”这一常见的词汇在用户心中已形成一定的认知概念,可以用语言准确的描述为:在活动中向用户传达活动信息,帮助用户更好的参与活动并达到参与目的的指南性说明。所以,曝光促销信息,在页面上给用户提供参与活动的入口(参与方式),告诉用户怎么买最划算(省钱指导),即为本次产品的用户需求。 即使是攻略页这样的小型产品,在战略层阶段,也是需要各利益相关者共同得出的,当然最终的目标还是需要本次的产品决策者来确定,那个人应该是本次促销活动整体的大PM,或者你的直属领导。 可以把产品目标和用户需求提炼为关键词,整合在一张雷达图上。这个提炼过程可以帮助设计者更好的整合需求,避免需求重复或需求边界模糊的情况。根据每个目标的重要性进行节点标记,这样可以直观清晰的看出本次攻略页战略目标的数量和每个目标的优先级。你可以自由控制这张雷达图的节点数量和网格层数。保证你的关键词都是易懂的,如果简短的关键词一眼看去不能明其要旨,就需要对关键词进行备注性解释,毕竟这张图是为了帮助我们快速的整理需求,准确的沟通需求。 你所确定的每一个战略目标,都应该有一个验收标准;有些直接体现为业务KPI,比如预约占比达到50%,引流占比5%,发券率100%,流量扩散倍数1.1等。有些目标貌似没那么容易检测数据,可以通过用户调查来实现,比如曝光大促信息这条目标,可以问用户,看完这个攻略你知道怎么买更省钱了么?本次展示的信息看完记大概记住了百分之多少?对应的促销信息知道去哪儿找怎么参与了么?如果没有资源进行专业的用户调研,也可以问问周围的同事呀!这时确定的验收标准,也有助于在可用性测试阶段设计测试问题。 1.2、范围层—产品功能确定和内容网罗 当你把用户需求和产品目标转变成产品应该提供给用户什么样的内容和功能时,战略就变成了范围。 —–《用户体验要素》Jesse James Garrett 根据上一步我们确定的战略目标,可以提炼出具体的产品功能,比如:本次发券,以抽奖的方式实现,用户首次抽奖必中。这时的功能描述没必要具体到产品使用场景上,因为那是下一个层级,结构层—交互设计的工作,当然你也可以先想好几个备选的表现模型和产品使用场景。这里功能的确定主要用于执行开发调研和与交互设计师进行沟通。 通常在攻略页的设计中,我们能确定产品需要的功能有: 1.直接跳转:当某子活动正在进行中,或某件商品正在参与活动,需要给一个入口直接引流到对应活动页或商品详情页; 2.预约提醒:当某子活动即将开始,或某件商品即将参与活动,需要给一个预约按钮,以便于用户得到活动提醒,这时就需要考虑用户收到消息的方式,可以是短信告知(需获取用户手机号),app发送系统消息(需提示开启通知权限),调用系统日历提醒(获取系统日历权限),微信公众号提醒(需引导关注大账号)等; 3.一键预约:是否需要提供一键预约所有优惠功能;这个功能需要慎重考虑,需要考虑各子活动的开始时间,若全部提醒会过度打扰用户,就会面临取消关注,关闭通知权限,拉黑等不良后果。 4.抽奖:发券的形式通常是用户抽奖得券,引导用户分享的机制通常是获得抽奖机会,就需确定抽奖形式,进行奖池搭建和风险控制等 以上四点功能中,跳转和预约可以说是每个攻略页的必备功能,其它功能需视本次攻略的产品目的而添加,因每次产品的目的不甚相同,还可能有其它更多的功能,视情况而定即可。 内容方面,需要收集本次大促会场的数量,各个会场各自的促销时间节奏和优惠利益点;各个营销活动的时间节奏,奖品和玩法。通常在攻略页的设计阶段,我们并不能收集到特别详细的信息,只能确定一级活动的开始时间和最给力利益点,有时这种信息也收集不到,这就需要我们选择普适性较高的表现模型,能容纳的下任何类型的信息设计。 1.3、结构层-交互设计和信息架构 交互设计关注于描述“可能的用户行为”,同时定义“系统如何配合与响应”这些用户行为; 信息架构主要的工作是设计组织分类和导航结构。 让用户获得良好的行为引导和操作反馈,并高效的浏览内容是进行交互设计和信息架构的目的。范围层阶段我们提炼出了跳转,预约提醒,一键预约,抽奖四个功能和一个信息文档;在结构层我们对功能进行场景化描述,对信息进行组织分类,确定信息节点和结构方法,并选择合适的表现模型。 用户对于交互组件将怎样工作的观点称为概念模型(也称心里模型),设计者将功能展现给用户的方式称为表现模型,表现模型越接近于用户心理模型,用户就会感觉到产品容易使用和理解。在设计攻略页时,首先要设计个整体的表现模型,比如“攻略播报电台”,“内部泄密文件表格”,“新年醒狮送攻略”等会形成具体认知概念的模型,也可以不选择任何具象的趣味概念,直接以抽象的表现形式承载。但要注意,你选择的具象概念,不论是从视觉上还是从文字语义上,都要符合用户的原有认知。举个例子,我们曾经有过一个“攻略售货机”的表现方案,这个表现模型就存在认知冲突:用户对售货机的认知是,一个贩卖多种商品的机器,以此为表现模型,用户会疑惑“攻略售货机”是什么,卖攻略的么?机器里会卖很多攻略么?我要买攻略要什么成本么?……等等造成用户困惑的,对产品没有帮助的疑惑。同时“售货机”这个概念也限制住了视觉样式,要形成售货机的概念,视觉元素就脱离不开售货机本身;即使是选取关键视觉元素进行抽象表达,也不能形成很好的认知概念。 功能和信息可以细化成类似以下的描述: 1.当用户浏览到正在进行的卖场或活动时,可直接点击进入相应页面 2.当用户浏览到即将进行的卖场或活动时,可进行预约,通过微信公众号获得提醒消息,未关注大账号的用户先引导其关注大账号 3.正在进行的活动总是优先展示,其次展示即将进行的活动,再次展示已过期的活动 4.一键预约所有活动这一功能经评估,会对用户造成过度打扰且开发成本较大,不做此功能 5.抽奖的形式确定为彩蛋红包,用户首次进入页面并停留4s后出现动效红包引导点击,首次点击必中优惠券,在反馈弹框上提示用户分享可获得现金红包引导分享。 6.促销信息分两个页面展示,主页面展示趣味版,以主题进行一级划分,以品类进行二级划分,以时间进行三级划分,不设利益维度划分;简单版以时间维度和活动维度进行划分。两个页面分别设置互跳按钮,趣味版页内设计主题导航。 一些比较抽象的描述可以配合原型图来展示,一切都是为了方便沟通的快速表达。基于这样的描述和确定好的表现模型,我们就可以进入框架层阶段了。 1.4、框架层—界面设计、导航设计和信息设计 界面设计涵盖的范围比较大,包括基础交互组件的运用,创新交互样式的呈现,抽象信息的视觉符号化表现,信息呈现,和整体界面排版等; 导航设计是指引导用户在各种信息节点之间穿梭的方式,并告知用户在信息架构中的位置,最终会落实为界面元素; 信息设计包括信息分类和可视化设计,可视化设计最终也会落实为界面元素。 笔者沿用了《用户体验要素》中的分类方法,但对界面设计和信息设计的定义进行了小幅改动,可能这样的定义划分不是最准确,但保证了各个概念之间没有交叉,方便分析和处理问题。 攻略页中,涉及到的功能性交互组件很少,通常使用按钮、弹框,反馈toast。导航样式通常是页内锚点导航;如果攻略页本身包含多个页面,也需要页面间导航。促销信息通常以时间列表,日历图表,品类列表为基础样式进行展示。 1.5、表现层—感知设计 表现层是用户会首先注意到的地方,这里,内容,功能和美学汇集到一起,完成其他四个层面的所有目标,并同时满足用户的感官感受。攻略页的表现层涉及到视觉感受和听觉感受两个部分。因为是大促整个产品的子产品,在表现层设计时需确定攻略页的感知设计是否要遵循大促整体感知规范,如果遵循,要遵循到什么程度,攻略本身的可设计空间有多大。 工业设计界有个新的学科被称为“感性工学”,致力于研究人的感受与具体产品形态的对应,产品的视觉,触觉,听觉,嗅觉,味觉都可以通过感觉形容词进行描述,并落实到具体的产品形态上。攻略页表现层设计时,也可以用这种方法。我们收集视觉资料,确定预期的感觉形容词,比如年轻活力、热闹,复古,现代,未来科技感等等,在与视觉设计师沟通时,最好给形容词配上具体的图片,保证大家对形容词的认知理解在同一层面上。动效设计也同样,Q弹可爱、炫酷闪耀、平缓柔和等形容词都可以帮助你与视觉设计师沟通你想要的效果。 以上五个步骤并不是循序依次进行的,实际工作中经常会遇到反复的情况。比如进行到交互设计阶段发现需要加一个新功能才能实现产品目标,这时就要对范围层进行修改,并重新进行功能开发调研。为设计出好的产品这种情况不可避免,好的方法是,让每一个层面的工作在下一个层面可以结束之前完成即可。对应的,我们每个阶段输出的文档,都可能要面临很多次修改,每次修改都需要周知流程各相关人员以保证大家对产品进程理解一致。 以上五个步骤完成之后,产品方案阶段就完成了。运营同学根据交互稿编写《开发需求文档》 和《数据需求文档》 ,前端同学根据视觉稿进行前端设计。作为攻略页负责人,运营同学还需要考虑的就是攻略页的入口资源。 攻略页作为大促整体产品的一个信息节点,其入口也是大促整体的一个界面元素,具体如何设计,那是大促整体产品设计的范畴了。攻略页也可以作为一个完整的产品进行单独资源投放,如果你在今日头条看到一条咨询,标题为《京东双11大促省钱攻略》 ,也是很合理的事情。 第二部分:设计案例讲解 下面我来讲述一下京东微信购物入口2017年双11攻略页的设计过程,让大家能更好的理解攻略页设计的方法。 […]

实用型用户故事地图—让头脑风暴高效

原文作者:Jonathan Courtney 原文地址:https://www.smashingmagazine.com/2016/06/a-framework-for-brainstorming-products/ 头脑风暴这种方法近有点声名狼藉,因为会议通常都是无组织性的,效率也不高。大家坐在一间房间里,准备好便利贴和白板,期待着一个伟大创意的出现。问题是,即使是在脑暴过程中出现了极好的创意,也没有明确的方法去决定,到底去执行哪个创意。 图1-正在用applied USM为一个全球500强企业设计新服务,面对镜头的就是作者 实用型用户故事地图的诞生 大概一年前,我和同事Michael(AJ&Smart的合伙人)参加了一个由Adrian Howard主讲的关于如何确定敏捷开发中需求优先级的高级培训课程。具体的说,就是我们需要学习如何决定哪个功能是接下来要开发的,这个功能要在什么时候发布。在课程实践的过程中,我们突然产生了一个想法:这么枯燥,系统性的方法,其实也可以用很有趣的方式去实践,然后用在产品创新工作坊上。当我们试验一个新技术的时候,我们通常都会选择一个高风险客户作为测试对象。这次也一样,一周之后,我们在没有很多准备和思考的情况下,给我们的新技术做了一个高风险测试。 测试结果简直完美。产品创新工坊会把重点放在思维能力和发现创意上,而用户故事地图则注重理性且有效的工作流程,二者相结合,正是我们所需要的。于是在接下来的工作坊中,我们一直使用这种方法并不断改进迭代,提高它的可用性。现在我们把它称为实用型用户故事地图(applied USM),于是它开启了自己的生命历程。在过去的几年中,我们一直用户这种方法来服务客户,帮他们发布了很多成功的产品,或对他们的已有产品进行成功升级。 在去年一年的实践中,我们发现通过实用型用户故事地图,一些极好的想法被提出来了,而这些想法通常都是一个人没办法提出的。同时,实用型用户故事地图对客户和利益相关者来说,也是一个很好的校准工具。下面就让我介绍一下实用型用户故事地图是如何工作的。 需要准备的东西 * 三种不同颜色的便利贴 * 带编码的彩色小贴纸 * 马克笔 * 一面墙,或者一块平坦的地方 * 一个主持人 需要的总时间 参与人数在10-15人,计划45-50分钟;参与人数每多10人,则增加一名主持人,并增加十分钟,例如: * 10-15个参与者:1个主持人,50分钟 * 15-25个参与者:2个主持人,60分钟 第一步:故事 故事就是整个过程的骨骼。故事是由你为之设计的假想用户(persona)在特定的时间段内产生的一些行为列表或事件列表。(如何确定目标用户,那就不是本篇要讨论的问题啦) 图2-列出故事中用户可能产生的行为 举个例子,如果我们要专门为体育迷设计一款新闻阅读软件,我们设计的故事也许就要发生在一个比赛日。或者,如果我们要为经常飞行的商务人士设计一个新的高端服务,我们的故事可能会从订票行为开始一直持续到飞行结束,那么长一段时间。 如何创建故事 * 所有参与者都要有一叠黄色的便利贴和一个马克笔 * 每个参与者把他们能想到的,目标用户在目标时段内的行为事件都写在便利贴上,这个过程大概持续7分钟,每个人可以有10-25个便利贴。 图3-参与者在黄色便利贴上写下行为事件 每个参与者写出的故事粒度都是不一样的,没关系,这样很好 时间结束后,每个参与者都把他们的便利贴贴在墙上,然后整理一下,按时间先后顺序把行为事件排列在时间线上。最后,应该只有一条水平的时间线。一些人可能写出了相同的行为事件,这样的话,就把写有相同事件的便利贴叠在一起贴在时间线的一个节点上。 图4-把行为事件按发生的先后顺序排成一排—构成时间线 第二步:为行为分组 为了保持脉络清晰,我们要给时间线上这些行为进行分组。有些故事时间线可能有几天那么长,分组这个方法就显得尤其重要。分组之后,我们就可以很清晰的找到,故事的哪一部分是我们要聚焦的。这个过程很简单,但是,只能由主持人来执行。 图5-用另一种颜色的便利贴给行为事件分组,并贴在该组行为的最左端 如何给行为分组 * 主持人观察时间线,决定分组维度,比如:早晨准备,通勤去上班,工作,午饭,通勤回家,晚餐等等 * 主持人把写有组名的橙色便利贴,贴在每组时间线的开始节点。 图6-分组可以很具体,但是通常五个分组是最好的 图7-简直完美 第三步:头脑风暴! 现在最有趣的部分来啦。参与者可以尽情的爆出各种各样的idea,越多越好,只要他们认为和时间线上的节点有关即可。每一个idea都应该聚焦在时间线上的某一行为或事件上(比如起床),并说明你的产品是如何在这个时间节点上服务、或影响、或与用户交互的。举个例子:如果是要做一个新闻阅读软件,用户故事地图就应该是这样的 图8-针对故事时间线上的每一个行为事件,脑暴出与该事件相关的服务项目或产品功能点 […]

© 2018 JDC. All Rights Reserved.