设计月报 2019.09

iOS 13 上手体验

新组件 · 新交互

1. 广泛应用的视图弹窗 (Sheet)

2. 新组件:上下文菜单 (Context Menu)

上下文菜单是一个临时浮层,承载了对内容条目施加的功能操作,避免界面过于混乱。

菜单由代替了3D Touch 的 Haptic Touch 唤起,前者根据点击的力度分辨操作(轻按、中度和重按),后者则根据点击的时长来分辨,分别有轻击、长按和超长按,这样似乎用户可以更好地进行控制。

试了一下长按app logo, 大约半秒识别为长按、弹出上下文菜单,大约4秒时识别为超长按,菜单消失、app可删除和重排。虽说有点长,考虑到操作频率低,体验上还OK, 重要的是XR可以快捷操作啦!

Podcast & 信息 上下文菜单

HIG-Context Menus 提醒开发者注意,不要把已有Edit Menu的内容(比如文本,长按可选择、全选等)加上Context Menu,以免引起冲突。

深色模式

UI变化

icon设计

「线转面」:从线性设计过渡到色块为主的面设计,如分段控制和开关icon:

人机交互形态:app还是服务?

人机交互的未来,最终掌握在终端手上

理想的「消息即服务」把频繁的操作放给系统API去做,由其中的算法进行服务调度、完成用户指示,而非一只只需要手工操作的、形状相似的app。这样,我们不需要在立即要做一件事时,先“联想到某个app”,然后搜索或在众多logo中找到,打开,接着重复浏览和搜索动作,在自己够不够聪明、机器够不够聪明之间反复检验。

这种交互思维在微信「小程序」、华为「快应用」和iOS「捷径」上都有了体现,文章则更偏向后两者的「主动解决问题能力」。对用户来说,一次搜索就能预订Booking、Agoda、携程、飞猪和去哪儿上最低价的经济酒店,再也不用反复比价,一次 shortcut 执行就能重温一年前今天记录下的点滴,才是他们想要的自动化。

同样,多终端的协同工作能力也能决定我们是否用一项app或服务,这也是对硬件本身的深入探索。比如,在分别用了Bear的Mac和iOS端后,我欣然决定为了两端同步购买会员,等了几个小时却都没同步上,因为Bear并没架上自己的服务器存储信息——它用了iCloud同步。大失所望,下个月的还是取消吧。

购物车结算页设计改版

过去一个月,我从同事手里接手了购物车结算的改版工作,借机梳理了这两个下单环节的所有场景和界面细节。

这次UED推行的设计改版,既有“设计先行”的天然优势——可以完全地把提升用户体验作为目标,同时也有着难以落地的苦恼——尽管事先安排了开发评审,设计稿交付产品和开发后,实现困难、排期紧张等原因还是不断拖长了战线。设计师需要反复地校稿和沟通,“改UI不改接口”常常阻碍改版的进行,而日常版本需求的并行也消耗了我们大量精力 >o< Anyway, 我们还是尽力优化到最佳,虽然结果看上去变化不大,设计和争取的过程却是值得我反思的。

这篇总结包含了「改版背景」,「前期分析」,「设计过程」,「方案细化」几部分,后期有上线数据也会加上「数据反馈」「问题总结」来收尾。

一、改版背景

购物车结算在电商平台的作用不作解释了,改版主要基于设计师的业务经验、当前用户诉求、设计风格走向和产品策略来进行。例如,优化点可能来自于业务重点转变造成的功能冗余,对可能发生误操作的及时减损,完善一个步骤前后的路径引导,等等。

二、前期分析

前期我们对产品自身的购物车功能设计做了走查,并与其它的电商平台作了比较:

我们得到了一些论点:

  • 相比其它平台,唯品会下单线比较冷静寡淡,抢购气氛不浓烈;
  • 购物车和结算对比商品详情,更要减少用户犹豫、加速转化过程,应该去繁从简地设计,区分信息层级,将关键信息清晰展现给用户。

而更多的优化和落地建议则来自产品经理,他们掌握了大量用户反馈,并给我们提供了产品策略角度的意见。我归纳了以下几点:

  • 填错收货信息仍是用户取消购买和咨询的一大原因,需要优先展示和提醒用户核对收货地址。
  • 海淘订单中的支付方式需匹配支付人信息,而用户常常选错填错、被海关退回,增加了很多退换订单,降低购买效率。因此需要提示用户正确填写。
  • 线上购物车商品的价格和名称并列一行,价格不够明显,希望可以和淘宝、京东等平台对标,将价格另起一行展示。

三、设计过程

前期分析并非定论,方案是在设计过程中一步步得到完善😉

三点一、购物车

购物车氛围

新页面将根据不同时期展示不同的氛围样式,分为“日常”和“大促”两种,大促图案可根据具体促销氛围(双11、周年庆等)进行配置。标题文案放大、居左,释放更多空间,让页面名称与倒计时更醒目。

购物车商品

新的设计放大了商品图区域,用趋势下的方图代替长图,并突出价格/活动标签的优惠氛围,根据产品策略移除了专场信息。所有元素采用圆角处理。

我们对商品信息尝试了重组,做了两个样式:价格继续与名称同行排列,以及价格另起一行、与上方左对齐。两样式各有优势:

考虑到价格确认对用户成功下单的影响,我们选择了左右结构,让视线寻找更明确。

赠品信息

作为附赠,赠品依赖其它商品存在,在概念上和用户主动加购的商品有区别,而当前并没有做明显的区分设计。新版中我们把所有赠品归为一类(底色区隔),文字图片均做了弱化处理,使信息优先级更明晰。

优惠券使用

在减少派发优惠券的策略安排下,需要减少用户“我有优惠券用吗”、“用了几张,是不是最优惠”的犹豫,加速下单。

新版将三个状态分开表示:无可用,已选择,有可用而未选择。当已选优惠券时,自动选择最优方案并显示“已选推荐优惠”,省去外露的券,少冗余。有可用未选择时,露出“x张可用”提示用户进入操作,比原先的“使用优惠券”按钮更具可视性。

三点二、结算页

收货信息

我们发现有多个收货信息的用户,很多情况是收货人相同、地址不同,也就是“寄到公司or寄到家里”的场景。即使选的收货人无误,地址也可能有误,因此详细地址可以帮用户更准确地确认信息。

因此,我们把省市区和详细地址分离,突出展示详细地址,收货人放在了地址下方。由于快递员尚未做到按用户想要的时间送货,我们去除了收货时间字段、以免引起不满。

视觉上从反色变为白底黑字,用邮寄、信封等符号来关联“地址”概念,表达更清晰、明快。

切换地址流程

当用户设置了默认地址,结算页会默认选中展示。然而,我们发现增加“设置默认地址”功能后,用户不会用或懒得用,常常需要切换地址的麻烦还是没解决。

因此,我们在切换地址中增加了逻辑:当频繁或连续跳转选中某一个地址时,询问用户“是否把它设为默认地址?”,让用户行为来触发对用户意图的推测,减少他们认知和操作的难度。

海淘支付人与支付方式

误填海淘支付人是通不过海关、造成退换的一大原因,有两方面造成:支付人身份证号与姓名不符,和支付方式不在支付人名下(支付人张学友,而用刘德华的银行卡支付)。前者我们可通过添加信息时的即时验证可以降低,改版企图减少后者的发生。

可以看到,原支付方式在应付金额下方,视觉动线需要经过总金额、唯品币、唯品卡的层层确认,最终落在支付方式的金额上。新版将支付方式提前到支付人下方,呼应支付人模块的文字说明,用位置的接近传达信息的相关性。

我们曾想要把修改符号统一为支付方式中的“…”,但海淘订单的清退风险需要引起用户足够重视,考虑到用户群体对可操作性的认知水平,最终我们保留了“更换”文字按钮。

目前支付方式有2种:在线支付和货到付款。策略上我们更推荐用户使用在线支付,原先箭头下拉的方式有些繁琐和占地方。新版改为了外露一种支付方式,点击卡片则弹出切换浮层,和其它模块保持一致。

唯品币/唯品卡抵扣

唯品卡、唯品币是会员购买的和浏览、下单等行为产生的代币形式,付款时可以抵用。当前这两个功能有一些需要改进之处:

  • 未选中时,项目右端也显示金额,容易被误解为增加或扣除了款项;
  • 金额计算优化后(见下方),唯品币唯品卡会在小计中再次出现,会让用户以为扣减了两次;
  • 随着业务倾斜,唯品卡使用变得很少,而“添加唯品卡”按钮较明显,有时独占一行;
  • “唯品币不可用”时未向用户解释原因。

因此,我们考虑了信息的易读性和有效性,将:

  • 可抵扣的金额直接放在文案中,将“选择操作”与“明细清单”区分开;
  • 简化文案表达,添加按钮放在一行内、减轻比重;
  • 根据情景增加“帮助”按钮,解答用户疑惑。

金额明细

金额明细是信息结构中改动最大的部分了。

原来的应付金额包含了商品金额、运费、优惠券、活动优惠(满减等),唯品币和唯品卡抵扣放在下方,而在支付方式中展示了抵扣后的最终付款金额:

这样的金额其实计算了两次,总结了前页的小计后又核算了一次抵扣信息,“应付金额”并不是真正所付金额。

“如小票般清楚明晰”。确认了这样的原则后我们提前展示了唯品币、唯品卡的操作项,去除了应付金额标题,在其中合并了所有计入付款的款项,包括唯品币、唯品卡。原本需点击展开的信息也变为自动展开,让款项一目了然。

“实付款金额”脱离了付款方式,而是在提交按钮的上方突出显示,与即将发生的付款行为充分结合。

这样,用户最关心的金额核对做到了两点优化:金额统计和总结前后一致,信息表现简洁清晰。

支付成功

现有的支付成功页,点击左上角按钮或侧滑,统统返回唯品会首页,引导用户重新浏览挑选好物。

然而对于单商品的订单,如预约抢货和预付商品,用户选购、确认的时间更短,完成订单的速度更快,支付成功后更应回到下单前的页面,继续刚才的浏览,而非回到首页、中断刚刚的操作。因此我们在流程中增加了这一判断:

四、方案细化

卡片式风格

在改版初期,视觉风格并未确定:是延续通栏样式,还是将各个模块卡片化。

虽然整行打通能容纳更多文字、缩短页面的长度,但购物车、结算页的信息零碎,需要用户逐个确认,而拟物化的卡片让信息聚合度更高,更容易理解为可操作的整块区域。因此我们采用了右边的卡片形态。

上滑、刷新效果

改版前几乎所有页面的标题栏都是正常高度。新版的大标题在页面上滑后置顶就显得太过明显,妨碍信息阅读,因此我们让它上滑后渐隐,同时渐现正常高度的标题层:

同样,旧的刷新动效在标题栏下面出现,而新的标题和下方配送、通知不适合拆散,因此loading放在了整个页面的上方:

最终呈现

购物车、结算页是app第一块采用新视觉风格的部分,在一些组件的设计上替换了原有的设计规范,希望能为后面其它改版开一个好头。

感谢下单线大总管亚洲和耐心的视觉同事李鹤、爆爆、乐乐,在整个设计和开发跟进中付出了巨大努力,比心💓

设计月报 2019.08

阅读

《极致:互联网时代的产品设计》豆瓣链接

MIT媒体实验室教授打造的产品设计方法,有新意。“当今很多产品功能过于繁琐,非但没让我们变更强,还让我们变更弱。”作者从自身丰富的开发经验总结了魅力产品的概念,并在其学生项目的实践中得到印证。

1. 什么是魅力产品。“被赋予计算能力、连入网络的普通物品。”有魅力的钱包可以连接银行账户,超额支出后很难打开(天哪,这不就是我做过的理财project吗?!)这种产品可以减轻认知负荷,主动适应人类,和调动感官潜能。

进一步解释,减轻认知负荷,就是减少需要我们费力运转的快速思维,把外界感知做的越简单越好,比如减少信息呈现、减少选择数量等等。主动适应人类,就是符合用户的习惯,尽量不要制造学习门槛,比如app现有的开启权限弹窗,是不是可以复用,而没必要设计新的形式?调动感官潜能,就是除了眼睛搜寻得到的色彩、文字等信息,能否充分发挥人类感官的作用,比如听觉、嗅觉、触感,甚至重量、形状、温度?能被人感知的变量不止我们接触的那么多。

2. 如何设计魅力产品。从基础开始,分步进行:产品接入网络和传感器 – 个性化定制功能 – 联结人人 / 人物 / 物物 – 游戏化 – 为目标创造故事。

其中第3点”在人或物之间做连接”也就是社会化,书里有个好例子:亚马逊的智能垃圾桶,在丢进去垃圾时进行智能扫描,识别出物品和喜好、询问用户是否订购,充分在人的行为和对物的需要上做了关联。第5点”创造故事”也很有意思,如果工具性产品能更人性化,替用户想到“体重秤能让你保持健康、穿上美美的衣服”,“日历能记住并提醒每个重要日子,为你挑选礼物”,让用户对使用体验保持憧憬和期待。

3. 魅力产品的极致。需要具备3点:形成生态系统,留存信息的数字影子,高度定制化。生态系统,比如小度、小爱和天猫精灵,后者不仅连接了智能家居,未来还能一手包办叫外卖、打车、买机票等等服务。

数字影子不止是“跟踪用户隐私”,公共交通和基础设施建设也能被捕捉。我家附近修路的灰尘噪音让人不堪其扰,“要是能看到透明地面下哪里水管坏了,把钢筋铁骨投影到设计软件中就一目了然了”,未来没准真会实现。高度定制化,在马斯克的异想天开中已经有了雏形,让人和程序、产品间直接交互,甚至不需编程,所想即所造,哈哈。


工具

Notion: 一站式办公助手

在使用Evernote的几年里,我慢慢察觉出了这些痛点:

  • 只适合大文档整理,小规模的笔记写起来太没存在感(源于它固定的排版模式);
  • 没有适合工作内容的计划、排期、分类等功能。列To-do list几乎成为我的每日必做,而列下的条目往往和笔记内容密切相关,无论是DDL、会议提醒还是进行状态、紧急重要性的归类标注。

这是少数派的评测,官网称之为“笔记、知识库和任务管理无缝整合的协作平台”。

贴图

贴图

我是怎么用的?

好用吗

怎么又放弃了

痛点:云端存储的同步问题,复制粘贴格式问题,等等。

唯品会「购物车」走查与竞品分析

设计的优化改版从分析产品开始。这篇文章做了下面几件事:了解购物车在电商平台的功能目的,掌握购物车现状,分析同类产品与自身的差异,总结优化空间。

首先,为什么要做购物车?如果奔着选购立即下单的一顺流程去,点击购物车再完成购买似乎没有顺从用户“马上买到”的心意。实际上,像拼多多这样走拼购路线的电商确实没有做购物车,参见拼多多为什么不做购物车功能?的分析。但有了购物车,就占有了这几大好处:比对商品,暂缓购买决策,提升客单价,合并结账。

比对和操作(移入收藏、删除、找相似等)商品

这里的作用是指作为在线购物的一环,购物车扮演着怎样的通用的角色。唯品会「品牌特卖」的特殊属性,使得库存浅、抢货场景多,商品加入购物车后系统为用户hold住库存,同时开启20分钟倒计时。这促使唯品会的购物车没有了「暂存」作用 —— 一个为用户收藏大量心水商品的容器。

以上展示了线上购物车的信息结构和商品的基本形态。下面将购物车的各个子模块和竞品进行对比,试图寻找差异的原因和表达方式的优劣。

以上从购物车的界面风格和氛围开始,分析了商品模块的价格、标签、赠品、店铺图标和历史购物车、个性化推荐,并且就唯品会所没有的功能 —— 商品分享、筛选方式、清空失效商品、修改地址进行了分析和建议,总结为:

最后,本文仅仅从用户和设计师的角度对当前购物车进行走查,真正的设计改版还需要设计师与产品、开发、业务方、客服等多个利益方进行沟通,把每个可行的优化点细化为一个个需求,往前推进,中间涉及的信息同步和协作是复杂和艰难的。交互设计师的工作远不止画个线框图那么简单啦。

设计月报 2019.06

每天我们的设计工作都会被太多东西限制住:商业目的,技术,时间,话语权,沟通障碍…… 而工作内容又是那么重复,重复和狭窄的设计范围让人感觉乏味。 我希望有那么个地方(东西),可以让设计自由流动,让自己看到别人手中和脑袋中鲜活的、丰富多彩的设计。

这几天看了很多UX Coffee的设计师访谈,很有些意思。我们生活的环境本就是限定在很多范围和条件里的,这点跟设计很像,或者说,生活就是设计的一个投影。

人生不是每一步都要找到「最优解」:专访 Netflix 设计师唐黛 Sally

Sally:以前我觉得好像职业发展的每一步都要踩在点子上面,一定要以最快的速度做到设计经理,再以最快速度去做到下一步。但其实这个速度真的不重要,也不用每次职位都做得更高,因为其实那个东西是很虚的。我们大部分人的背景都是从幼儿园、小学、中学到大学,然后出来读书,之后马上开始工作,想要每一份工作都做到自己能力范围里的最好状态,每做一个选择的时候,都很害怕自己浪费了时间成本。实际上我觉得从整个职业生涯来看,其实可以多花一些时间,甚至去走一些弯路,不是每一步都一定要找到一个「最优解」,因为其实哪怕你每一步都去优化,最后也不一定会到达你想去的山顶。

为全球Uber司机创造最棒的体验:专访Uber产品设计师夏梅杰

UX Coffee:Uber 设计团队的审核和交付流程是什么样的呢?

夏梅杰:在我们组,设计的交付主要是由设计师拍板的,我们组没有「必须 xxx 看过了才可以交付」。…… 你需要负责听取别人的意见,但不需要别人来帮你最终拍板。但是我们组所有的职能,包括市场、产品经理、工程师都会非常积极地参与到这个过程里发表意见,所以每次交付其实已经充分听取了大家的意见。在交付方面,我们会用 Google Slides来记录整个项目的过程,包括所有屏幕的 UI 设计,还有设计师之前尝试过的概念、以及最后为什么决定选用这个概念。比如我们一开始提出了三个设计的方向,就会把这三个方向都放在 PPT 里,可能最后我们一个都没有用,但每个都吸取了一点点,我们就会把最终方向放在最前面,把其他方向放到最后面作为参考。

此外,产品、数据、市场都会把各自的部分放在这个 PPT 里,形成唯一的「 single source of truth」,所有人都可以通过这个 PPT 了解项目的过程。…… 这个 PPT 是给所有人看的,工程师可以在这里看最终的设计稿,产品经理做产品陈述的时候也可以用,设计师做相关的产品时,也可以看这个 PPT,了解整个流程和思路。大家会很积极地用 Google Slides 的评论功能完成之后的交付。

专访丨从上海到硅谷的Google 交互设计师王斯捷

对正在找工作的设计师,在准备作品集方面你有什么建议?

现在有很多针对设计师作品集的模板,首页上是一个个方块。这不是一个很好的 story-telling 的体验。Story-telling 妙的地方在于你要设计好一个流程,带着你的观众走完这个流程,可以决定先给这个观众看什么,再给他看什么,中间还可以掌握节奏,比如一个大项目和一个小项目穿插。最后看完之后,观众能够知道你想让他知道的信息,比如你最自豪的项目。如果你是用一些方块的话,每个方块的地位是平等的,可能你最想让人看到的东西面试官反而没看到。

在面试方面有什么值得注意的?

一些比较厉害的设计师可能会问我这个产品的目标是什么、你想要达到什么目的、你将来长期的 vision 是什么、你做这个版本有什么限制、你在当前版本想要达到什么目标、你能放弃什么东西、你的用户是谁等等,她就会问面试官很多问题,把面试官想知道的事情先定义清楚再尝试回答。这是一种比较好的回答这类问题的方式,也能给你一个机会去展示你对产品方面的感觉。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

像 Facebook 这样的公司,会不会出于品牌、形象的考虑,想去创造一些东西,打破安卓、 iOS 平台规范?

有。比如 Reactions,现在在 Facebook 上,你不止可以点赞,还可以发爱心、发各种表情,这是一个新的交互元素。他们也有很多迭代版本,有一些是传统的、符合规范的,最后选择这个非传统的版本也是经过用户研究、各种数据验证的。其实设计师在这方面决策的权力没有那么大,因为 Facebook 是数据驱动的公司,有时候也不是刻意打破规范,而是要看用户更喜欢什么,要从数据看哪个版本对整个体验最有帮助。

「商品口碑」优化设计

传统零售业中,用户评价的好坏是难以捉摸的,而好货、好服务的口口相传确实会为商家带来忠实用户和新的客人。相比之下,线上商城可以通过简单的回访鼓励来了解和掌握这些评价,甚至让它们强烈影响着大多用户的选择。

唯品会的「口碑」指的是用户对已购买的商品的评价,赋予用户真实、自由抒发感受的权利,同时努力打造「正面评价」。

一、背景和目标

1. 口碑产品的定位

(由于特卖的商品种类多、单品购买量少,很多商品不具备充分的口碑。而用户又非常重视买家的真实评价,所以急需口碑来建立销量高、品质高的商品印象)

2. 口碑的形态

主要以两种形态出现:

  • 对个人的订单和所购商品,展现为个人口碑,分为「已填写」和「待填写」,存在于个人中心的“填口碑”和订单操作中;
  • 对已有评价的站内商品,展现为商品口碑,收纳在商品详情中。

3. 优化目标

口碑整体的目标主要从「产生口碑」和「查看口碑」两个体验角度出发:

  • 提升口碑填写率 —— 及时记录用户购物体验,提供真实买家感受,促进更多用户的购买;
  • 全方位、多维度地展现口碑,降低商品退货率,减少人工 (客服) 成本和物流成本。

下面分别从填写(即产生)和展示来讨论优化思路。

二、填写口碑优化

口碑填写流程主要目的就是要提升填写率,让更多商品有更多的买家秀可参考,同时尽量避免错填漏填,希望获得更多用户的肯定和赞赏。

「商品评价」过去分为「口碑」与「反馈」,而商品中只展现「口碑」即正面评价部分,这是由于平台商品多有不评、乱写差评而采取的策略。而电商法要求展示所有商品的合法评价,这样原来的正反两个评价入口就不复存在,所有用户的评价,即现有的「口碑」,将全部展示。

填写内容没有做很大改变,仍包括商品满意度、印象标签、尺码、口碑文字、上传照片。头部增加了所评商品的图片,增加用户填写时的真实联想。

印象标签去掉“印象”标题,口碑文字减少引导语,各块之间更紧凑,从而减少整个表单的长度,让用户一眼看见更多信息,减轻填写时的心理负担。

由于口碑是以商品为单位,服务(物流速度、快递员态度等)是以订单为单位,用户时常在口碑中填入“送货慢”、“快递服务差”等内容,影响口碑的展示和满意度打分。这里对这种情况进行引导,订单未填服务的情况下,在口碑末尾展示服务,并对特殊情况做了处理,教育用户区分二者,公正客观地评论商品。

三、口碑展示优化

根据电商法规定,商品信息需展示差评在内的所有合法口碑,这导致了口碑单UV价值和整体转化率的下降。在此背景下,我们寻求着突破口:

1. 展示「满意度」

根据口碑评分展示商品满意度,底部显示默认评价数,增加用户对商品性能和销量的认知。

2. 「尺码感受」相关功能

测试表明口碑里展示用户填写的尺码感受 (偏大/偏小/合适),可有效降低退换货率,减少退换带来的物流和人工成本。因此我们打算在商品口碑表现「尺码感受」这个维度,增加尺码的相关功能。

我们首先想到的是为用户「推荐尺码」:

但这个方案的问题是,推荐值的影响因素较为复杂,包含了:

  • 各尺码买家的人数和占比
  • 各尺码买家填写的尺码感受
  • 本人身材信息、历史购物信息和口碑信息
  • 相似身材买家的所购尺码和感受

对一个新功能来说,算法复杂阻碍了它的实现,推荐尺码的不精确也可能导致增加退货率。于是我们选择了第二个方案,基于口碑列表做「尺码筛选」:

问题:两种标签是否支持联动(选中印象后再选尺码,展示两标签的交集)

分析

尺码与印象标签的关联很小,大多用户想看的是所有口碑下的尺码筛选,不是当前状态下的。技术上来说,把两种筛选分开处理也可降低实现的难度。

这里牵涉的另一个问题是:尺码标签是否支持「取消选中」的可逆操作?

首先,原标签并没有取消选中功能,其次只有三个尺码标签,用户可轻松切换,所以无需反向操作。另一方面,两种不做联动,假如选中「实惠」标签后再选「尺码合适」,「实惠」自动取消选择,那么用户再次点击「尺码合适」,实际并不是回到原来状态,而是回到“什么都没选”的状态,并没达到预期效果。

结论

不做联动功能,不做尺码标签的“取消选中”。

3. 集中展现口碑图片

数据显示,「有图」标签的点击率逐步升高,用户对带图口碑表现较强的关注度。真实的图片为用户提供客观参考,不仅对用户的购买决策和转化有正向影响,并且有利于减少商品的退换。

因此,我们希望让用户更高效地浏览口碑图片,提高浏览口碑的体验和可信度。

我的首选方案是:既然是「同样图片文字的口碑内容,按照另一种方式展示」,就应该用尽量少的设计去减轻用户的学习认知成本,在原来的口碑页开放一个工具类的切换功能,提高阅览图片的效率。

我做了两种工具化方案:「切换查看方式」改动最小,几乎只是在原内容上换一种样式呈现;「入口开启相册标签」似乎更为那些在意图片的用户而设计,但入口深、标签一旦出现无法消失,稍有违背可用性准则。

然而产品同事给出了不同意见:希望在原有结构外开发新的相册模块,独立于原内容存在,作为运营「口碑相册」的前期实验,为将来的独立运营做准备(比如出现在商品详情等页面)。于是又有了下面的社区化方案:

由于新相册页建立在填写口碑用户的基础上,这里设计成以用户口碑为单位做瀑布流的图文形式展示(而非以图片为单位的平铺)。上方的商品和口碑链接帮助用户联想商品信息,了解从哪里来、回哪里去,提示购买。

最终应业务要求我们选择了第三个社区化方案。但从用户体验的角度看,第一个方案可能是在不打扰用户的情况下最快达到用户看图目的的。

写在最后

「购物车商品移入收藏」功能设计

作为用户下单前一步的重要盛放容器,购物车在每个购物平台的作用、功能和表现形式不尽相同。

唯品会购物车包含了有效商品和无效历史商品两部分,看似简单的设计背后有着细致入微的考虑,因为每一个细节都在影响用户的购买决定。这篇文章就从项目背景、需求评估、设计细化几个方面来反思一个”小需求”:「购物车商品支持移入收藏」的交互设计过程,希望以小见大,对开拓思路、提升设计的严谨性有所帮助。

一、背景和目标

1. 产品的特殊定位:为什么没做?

由于特卖商品库存低、抢购快的属性,唯品会app在商品加入购物车时立刻为用户保留库存,若20分钟后用户未付款,则商品自动进入“历史购物车”,库存释放。因此,和其它产品的购物车不同,唯品会的购物车不兼具“收藏”和“长时间等待购买”的功能,20分钟一到购物车就会清空,刚抢到的特价好货也许就被错过。

2. 项目背景:为什么要做?

  • 线上数据表明,“商品收藏”带来的日均销售占全站24.26%,这说明用户存在通过商品收藏来购买的习惯;
  • 购物车场景下,商品被用户加购后删除,说明用户曾有强烈的购买欲望,在“买和不买”间犹豫。将购物车商品移入收藏可帮助保存商品信息、方便后续加购,同时加快本次结算流程;
  • 历史购物车仅存近7天数据,用户看不到7天前删除的商品、无法重新购买,因此“删除”会给用户带来心理负担,而“收藏”可减少用户的顾虑,利于提高销售。

3. 目标:做了想怎样?

在购物车中帮助未决定购买商品的用户保存商品信息、减少删除商品带来的心理负担,加快后续结算流程。

二、前期分析

审视需求

对产品提出的需求点一一进行判断,评判需求的合理性。

2.1 评估“找相似”需求点

产品需求提出,购物车商品不仅支持移入收藏夹,还可“找相似”。

线上的“找相似”功能出现在:商品列表,商品详情,收藏夹以及已抢光的商品。列表和详情的操作为“长按/左滑”,已抢光商品露出按钮。

分析:用户使用“找相似”主要为了选择其它同类商品,而非立刻购买本商品。但在购物车情景中,用户已经对商品存在强烈购买欲,因此购物车里不需支持“找相似”,多一个选项会增加选择的难度。

结论:购物车商品操作中不引入“找相似”。

2.2 评估“历史购物车商品可移入收藏”需求点

需求提出,承载失效商品的历史购物车,也要像有效的购物车商品一样支持“移入收藏”。

分析:商品进入历史购物车有两种可能:主动删除商品,和20分钟内未结算、被动移入历史购物车。主动删除了商品,或在20分钟内没有下单,说明用户还没有充足的购买冲动,并非完全在“购与不购”间犹豫不决,因此这里不需支持移入收藏。

结论:历史购物车商品的操作不引入“移入收藏”。

三、设计过程

首先,“将放入购物车的商品移入收藏”是由数据和现有功能推测出的需求,因此它的定位并非类似“解决用户疑惑”的必要功能。

在充分了解需求、进行功能定位后,再对“移入收藏”的外在样式和操作方式进行定义,并根据各平台作调整。

引入新的“手势操作”后,必须将购物车商品功能进行整体上的考虑,思考因此带来的影响和变动。

作为最常用和关键的下单一环,看似简单的“小功能”在购物车情景下也要仔细考虑。最初我简单地增添了手势,并根据现有交互做了调整:

然而,原删除功能发生了变化,设计上产生了不合理之处:

手势加入删除:合适

  • 原删除易被发现、却操作不便(区域小),新删除可逐步替代它
  • “手势操作里有删除”已普遍被大众接受

新删除的反馈:不合适

  • 原删除2步完成,新手势需3
  • 如果去掉二次确认,两种删除的反馈不一致

梳理了问题后,第二版方案统一了新旧删除功能的步骤:

这样,点击删除按钮 → 唤起手势操作,好处有:

  • 两删除的反馈一致,均需2
  • 基于原操作、推广新用法,合理不突兀
  • 暴露“移入收藏”,设法留住交易

交互细节上,还涉及到怎样提示和引导用户使用新功能。这里设计了两种引导方式:

第一种引导进入购物车即展示,8秒后自动消失。这样的好处是,清晰地告知功能,不极力推荐、优先于“删除”使用,情感上保持中立,让用户自行判断决定。

第二种引导,虽然在刚进入时不产生干扰,但引导在手势发生时唤出,更加烦扰用户的操作,因此不予采用。

四、设计总结