从一个两难的产品设计引发的用户体验思考

背景介绍

在自己工作的经历中有一小段非常有意思的两难用户体验设计,为此记录下来与大家分享一下。

这个项目是一个O2O的履约界面中的一个环节,大致流程是说用户在APP线上购买了某O2O履约产品(服务权益),在到店当天,出示核销码给到商户,由商户进行核销。每个核销码可以对应一个人体验服务。

项目本身运营的挺正常,直到有一次页面改版之后通过客服部门陆续收到一些用户反应说自己购买了多次权益,但是核销时找不到核销码。于是产品、运营以及技术团队合力排查了问题,奇怪的是并没发现用户账户有何异常,于是,我亲自打电话与客户沟通了情况,最后才发现问题所在。

下面是当时客户提供的APP截屏,并告诉我们她购买的两次权益只能显示一次(因工作原因,我隐藏了一些界面元素,与问题相关部分都做了保留):

用户截屏

交互与设计介绍

我们先放下问题,来看看当时版本的交互设计

交互设计

先来解释一下当时设计对于用户交互体验的考虑初衷:

  1. 为了方便用户进行核销,界面中有效期最近一条的权益将会自动展开(且仅展开一项),便于出示进行核销;权益的整体排序为【未使用状态】>【到期日期】>【待评价状态】>【使用日期倒序】>【已完成状态】>【使用日期倒序】。
  2. 对于已使用(包括已使用未评价,以及已使用已评价)的权益和未使用的权益进行区隔,但是该分割线仅在用户账户下有两种状态权益的情况下才出现。
  3. 对于权益的不同状态以“图章”的样式用于标示该行权益的状态。
  4. 对于已使用,已评价的权益用灰色标注,表示该权益已经不再需要有后续动作了。
  5. 对于已使用的权益将有效日期改为使用日期。

对于第1点再多做点说明,为何不将未使用的权益全部展开呢?我们考虑了两点:

  • 该业务有线下代购场景,可能会导致单一账户下有数十个权益,界面展示性能以及体验均不佳
  • 应技术团队安全目的考虑,认为第一屏只能展示一张核销券码,并露出第二张券码告知客户可以下滑

 

用户截屏(基于上图交互设计后迭代了1个版本)

特别说明一下,因为用户的截图在上一版本设计的基础上已经迭代过1个版本了,所以有些内容并未在设计中体现出来。

可以看到,设计的实现度超过95%以上了。并且在第一版本设计的基础上迭代优化了不少内容以应对这个诡异的问题,这些改进包括了:

  1. 对于未使用状态的权益也已经增加【未使用】字样的图章更明确地区分状态。
  2. 更明确显示权益包含的服务内容。
  3. 将原本单一且不太明显的展开按钮用图文并茂方式展示,并且加强了显示效果。

两难交互

这个魔鬼般的问题一直困扰着我们的产品和客服团队,在这个点上大大小小的各种调整共计约7个迭代,直到做了最后一次迭代:

 

在最后一个版本中,我们增加一个关键要素 —— 序号

当该用户拥有1次以上未使用状态的权益时,会在权益左侧显示序号,传达给用户的信息是,第一项蓝色条幅与第二项表示不同的条目。

回顾与总结

回顾一下整个事件,我们发现用户反馈实际隐含的问题有这么几项:

  1. 问题发生在当一个用户恰巧购买了且仅购买两次权益且都尚未使用的时候。
  2. 小屏手机显示效果与UE设计设想差异比较多,用户对于界面的理解与UE设计师不同。
  3. 整体UI配色是的两个条目间隔不明显(因为业务属于泛医疗领域,采用了蓝灰的主体冷色调)。
  4. 过分夸大关注了安全问题,在实际过程中要越过“第一屏只显示第一个验证码”这一安全限制的手段太多了,这种设计本身属于防君子不防小人,反而给正常使用造成了困扰。实际上类似于大众点评这样的代金券界面也不会限制一页只显示一个核销码的。
  5. 为了平衡线下代购场景和线上购买场景的折中设计使得页面不够直观,但是由于线下业务量站到大半壁江山,因此又不得不做妥协。
  6. 缺乏互联网应用经验的用户误认为整个页面仅显示了一次权益信息,并且该页面有一个“顶部”和一个“底部”。这是拥有丰富互联网经验的产品、运营以及设计都无法感知到的问题,这或许是这个问题的关键。

正是在上面这几个进退两难的情况下最后产生了终端用户的困惑,照顾了一部分用户必然抛弃了另一部分用户,但是需要反思的是,抛弃的是大部分用户还是少部分用户?

这个案例也确实很好地为自己上了一课。最后的解决方案其实也是小设计蕴含大智慧的表现(当然,如果您在第一眼就能看出问题所在,或者您有更好的解决方式的话,务必务必联系我!非常欢迎指教!)

原文链接:http://www.bananahouse.cn/index.php/2018/02/09/4080/

关注微信公众号

qrcode

发表评论

电子邮件地址不会被公开。

4 × 2 =