软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 设计在线 > 设计理论 > 拍卖出价流程浮窗设计小结

拍卖出价流程浮窗设计小结

  之前在交互周会上,作为项目分享了之前做过的拍卖线的出价流程,由于讲的比较匆忙,所以还是想整理成文字,累积下。做多了日常以后,常常觉得如果不多做字面的积累,很多看似瞬间的累积,很快就会被更多的项目淹没~~

  之所以把这个项目分享出来,是因为觉得我们在工作中所做到的大小日常,99%的都不是“无中生有”的,都具有一定的历史,也一定有一定的痛点,一定也有新的业务变化在里面,如何在短时间内把握这些因素,迅速转化为一个合理的方案,是有一定方法的,虽说方法不一定完美,但希望给大家一些思路。

  开始正题,大概介绍下这个出价流程的背景:拍卖线原来拍卖信息确认的页面是和普通购买产品是相同的,随着拍卖业务的发展,觉得有必要以更简单的形式来进行操作,所以浮窗的形式变随之成为新的出价流程形式。由于拍卖涉及到很多不同的概念和判断,而之前做的一版浮窗出价流程并没有交互设计完整的参与,导致了页面逻辑中有一些问题,所以需要交互再次参与进来将这个出价流程梳理好,但另一方面,之前尽管有问题的出价流程由于业务需要,却正在上线中……

  首先,从项目的背景中,就可以总结出这个项目有几个特点:1,有大概的交互形式,且已经不能修改(尽管当时也有人觉得浮窗形式不是很好,但一切都在上线中,所以暂时也无法改变)2,发展中的业务和要求革新的心态(这在很多项目中都存在,我们通常不喜欢一成不变,但面对发展中业务,多变也是一个挑战)3,没有原始页面数据(这是最无奈的一点,因为看不到用户的反馈,让我们少了很多依据)

  其次,这个项目从交互角度出发,这个项目有几个挑战:1,浮窗形式的界面(区别于一般也页面,对信息的分类和呈现要求更高)2,需要对流程做出完整的梳理(一般涉及到前后步骤的页面,最好有完整的流程图有助于检验页面) 3,之前的版本出自非专业人士(势必需要纠正一些浅显的问题,这也是之后开始着手的切入点)

  总结了以上几点,确定了这次项目的主要核心点,即原有流程的提升和修正,修正原有出价流程中错误的地方,提升原有流程页面的交互体验。

  由于接到这个任务的时候对拍卖业务还不是很熟悉,所以一方面与PD沟通了解拍卖业务,另一方面让QA把准备上线的拍卖浮窗的每个状态给到我(因为之前的版本没有完整的交互稿)如之前所说,先从纠正原有页面的浅显问题开始着手。于是我总结了原有页面中的一些问题,以此归纳出具有针对性的方法。

  1, 文字引导与输入框距离太遥远

  2, 同类信息被放置在不同的地方

  是否设置成代理出价是和用户的出价有关的信息,应该归类显示。

  1、2两点,实际上都牵涉到了信息归类显示的问题。在一个页面中,一些相关的信息(例如同类的,行为上可以连续操作的)尽量可以放在一起,但其中要避免相同形式表达的信息(例如都是数字的形式)则要分开展现,以免互相混淆。

  3, 操作行为的起始和完成逻辑不通

  在上图中有修改的点击操作但在接下来却没有“确定”或“修改完成”的操作,而是直接通过整个确认出价的动作作为结束,一定程度上并没有给于用户一个操作闭合,很容易让用户搞不清楚自己正处在修改资料还是出价哪种行为。

  4, 浮窗文案提示并未从用户角度出发

  在这个首先提示用户“出价成功”,但随即又告知用户其他用户的出价已经超过了他,然后让用户重新出价,这个充满矛盾的页面,就是因为没有站在用户的角度出发。这里所谓的“出价成功”仅仅只是后台有此次出价的记录,而对于用户来说实际应该是“出价失败”。

  在浮窗的操作体验过程中,由于遇到的情况会很多,很有可能在页面跳转中流失一定的用户,所以,避免给予用户挫折感。并且,不论在哪一步文案的表达都应该站在用户的角度,更便于在整个拍卖过程中传达正确的信息。

  5, 文案展现上主次不明

  上图的浮窗中用非加粗的字体表达了一句比较重要的话,而下图的浮窗却用加粗的字体表达一句不是那么重要话。可能在大的页面中这些都不会这么凸显出来,但由于浮窗区域比较小,错误就显而易见了。

  6, 文案上表达有欠缺

  上图浮窗的“建议您设置一个更高的价格并重新出价”语义表达重复而累赘,下图浮窗中的话也是类似问题。而且同样都是让用户重新出价,使用的确是两种不同文字的button。

  4、5、6点都是文案上表达的问题,对于浮窗中的文案,一方面可以通过视觉上不同层次的文案做区分,另一方面文案本身也要符合逻辑。

  7, 一些必要信息的缺失

  例如浮窗中的单位“元”不见了,这种常见的问题也很容易被我们忽视。

  由于分别找出了原有页面中的一些问题,接下来的思路也显现出来,将浮窗页面的信息做大概的功能区隔,并对具体区块中的信息做规范表达。

  将浮窗分为三大区域:橙色区域是有关出价的信息/最主要的信息提示;蓝色区域是保证金和客户信息/信息补充区域;绿色区域是判断区域/出价按钮或关闭窗口的位置。

  橙色区域还细分成三个部分,第一行显示和数字相关的信息/表示当前最主要状态的信息 ;第二行为重新出价设置;第三行为设置代理价。第二和第三行的信息在一些状态中是没有的,所以相应会不做显示。

  功能区域的分割只种维度上的,我还在视觉表达层次上做了规范,尽量让有用的信息更加凸显出来。通过这个方法即在交互的表现层面上有了一定的规范,在视觉进行的时候也可以有效减少对原有交互设计的误解。

  做了以上两步的同时,在与PD的沟通下,也对整个增加拍的逻辑做了充分的梳理,当然过程中少补了的是Qa同学的辅助,因为QA更加了解业务逻辑中的一些细节,在此基础上做出了一份逻辑图。最后就是按照之前制定的规则,将相应的信息“填写”到相应区域即可。

  上线的页面请大家有空参与淘宝拍卖会上拍品活动:http://www.paimai.taobao.com即可看到。如果有任何疑问都可以通过页面右侧的意见入口,给我们提宝贵的意见,相信这个拍卖产品的好的体验是大家一同参与下得出的结果,我们也会不断根据用户的反馈给予产品最及时和有效的改进!

  琳韵 撰于2011.12.23(来源:TaobaoUED)

    相关阅读
    网友评论