zoukankan      html  css  js  c++  java
  • 交互设计如何为业务赋能——谈谈网易严选企业采购的主页设计

    本文来自 网易云社区 。

    背景

    企业采购是现今市场经济下一种最主要最主流的采购形式,其特点是大批量采购商品。传统的企业采购方式不可避免地会带来如回扣、效率低、采购过程不透明等诸多问题。

    现今的主流电商网站或品牌在满足广大消费者的同时,都细分出企业采购的特殊场景——设立企业采购网站,如天猫、京东、小米等。由于各家电商的定位不同,在网站设计的表现与逻辑架构也不尽相同。

    建立企业采购网站这种细分运营,正是“信息传递要准确”的表现,能为C端和B端的用户都带来最友好的体验。

    需要注意的是企业采购并不是面向广大普通用户的,因为它的需求与使用场景比较特殊,例如企业采购的商品数量大、订单金额大,还有会涉及到一些梯度折扣、分期付款、代下单等等的采购的业务流程。

    那么,如何设计网易严选企业购的网站呢?可以与网易严选网站设计地一样吗?还是有所区别呢?

    让我们回到原点去看这个问题。

    解析使用场景 

    用户是谁?使用环境如何?

    企业采购人员(背后是他们的老板)。

    正是因为我们的用户会在上班时间,在办公室使用电脑来完成他们的采购工作,所以网易严选企业购做了网站,而不是APP。

    用户的目标是什么?他们希望如何?

    我们通过访谈了解到企业采购人员希望可以高效地买到性价比高的商品。这些商品可能是给企业员工发的奖品福利,可能是赠送给客户礼品,也可能是采购给企业员工日常使用的办公用品等等。

    特别是企业采购这样的大宗订单,若是能用较少的成本,获得员工的满意、客户的认可、老板的赞赏,还提高了采购人员的工作效率,同时避免了可能存在的回扣等问题,对于企业来说是十分有利的。

    我们怎么为用户提供他们想要的服务?

    企业采购一般商品数量大、订单金额大,还有会涉及到一些梯度折扣、分批付款、代下单等特殊业务流程,我们将结合这些业务流程提供流畅购物体验,使得用户在采购商品的过程中是愉悦并且高效的。

    确立设计目标

    通过归纳用户群和我们自身的特性,并与业务目标相结合,得出网易严选企业购的设计目标,下文将针对网易严选企业购主页设计进行探讨:

    如何确保用户快速知道如何使用网站?

    即看一眼就能明白这个网站有什么商品、怎么去购买,也可以快速找到他们想去的地方,比如浏览某一类商品、搜索某个商品、或者去申请企业认证。就像iPhone老用户换iPhone8的时候,不再需要阅读它的说明书就可以下载APP并使用它们。

    所以网易严选企业购的网站在设计上需要符合用户习惯与认知:与网易严选及其他主流电商网站,有相似的地方,但也存在一些差异(将在下文细述)。

    如何向用户传递品牌特色:“好的生活,没那么贵” ?

    通过网站清晰的信息架构、使用高质量的商品图片、UI设计突出品质感、页面的通透留白、来体现这种精致、实用的感觉。同时在主页的每个商品下突出制造商信息或是商品描述,作为卖点露出,再次强调了商品的高质量。


     
    图1:商品坑位


    怎样提高转化率?

    转化率主要有两个指标,一是申请企业认证;二是下单采购。

    企业认证是企业采购必不可少的一个重要环节,由于企业认证需要填写较多的信息,诸如企业营业执照号等一系列企业相关信息,门槛相对较高,那么如何促进用户去主动完成申请认证呢?

    此处在设计上通过利益点去吸引用户一步步完成资料提交与购买:

    1.在用户未登录时,会在首页的商品坑位下方展示 “登陆查看企业折扣” 来吸引用户登录;在用户登陆后,若未申请企业认证的,会显示 “认证后查看企业折扣” ;在通过企业认证后,则显示 “企业专享X折起” 。

    图2:认证前引导

    2.在版头右侧的辅助信息模块上的黄色按钮文案:"提交企业信息" 也会随着认证状态的改变而变化,而且它与企业购的业务特色介绍放在一起,更能刺激用户去申请认证。


     
    图3:导航辅助信息模块

    在用户通过企业认证后,通过高质量的商品和较高的性价比吸引用户实际下单,就页面的引导来说,从商品详情的设计、首页的场景分类的运营、精选热卖的引导去增加转化率。 
     

    体现交互设计的价值

    主页的设计对于网站来说至关重要,因为它不仅仅是一个入口,它更是让用户看到自己正在寻找的东西。在主页设计之中,首屏的设计尤为重要,而导航又是首屏里的重要元素之一。

    信息架构
    在主页的信息架构上来说,网站主页信息架构简洁清晰:网页的头部是导航,其中包括搜索、采购清单、一级类目+经典商品、场景分类。页面中央是banner广告位,往下是各类商品推荐:如精选热卖、场景分类、类目分类;底部是合作企业的露出与严选企业采购网站的相关介绍。

    图4:信息架构示意

    网易严选企业购主页头部的导航设计充分展示了网站的结构;中部的banner广告位与各类分类入口,则为业务方保留了较大的扩展性,方便对某些商品进行露出、营销;底部用详细的网易严选业务相关介绍来结束页面,再次强调了品牌性,营造可信赖的安全感。

    导航设计
    导航不只是网站的一个特性,它就是网站,如同建筑本身、货架、收款机就是商场一样,没了它就没了网站。

    导航有两个显而易见的用途:1.帮助我们找到想要的任何东西 2.告诉我们现在身在何处。

    把导航放在标准的位置—页面顶部,可以让我们快速定位、不必费力,标准化的外观让我们更容易把它们与别的东西区分开来。网站导航通过具体化网站的层次结构补偿了这种缺失的空间感,营造出某种位置的感觉。

    网易严选企业购的导航条构成为:网站LOGO、类目、和实用工具(搜索、采购清单、在线留言)、分类快速入口、网站特色露出。


     
    图5:导航构成示意

    纵向导航将一级类目和该类目下的典型商品一起展示在最外层,使企业采购人员可以扫一眼就知道这里大致有哪些商品。

    横向导航展示场景分类的快捷入口,相当于是为用户提前创建好了适用于不同场景的购物清单,以此引导用户、帮助他们快速找到某些用途的商品。

    另外,在头部的搜索入口可以帮助用户快速找到想要寻找的商品,而将一般的购物车命名为采购清单也更贴近业务。其次,辅助信息的模块中露出用户信息与网站特色可以再次强调品牌性。


     
    上图:网易严选企业购    下图:网易严选

    网易严选企业购在导航的设计上C站略有不同,企业采购站需要注重效率,但C站的主要用户是广大消费者,逛的特性更强一些、商品也更多。因此在导航上只展示一级类目,需要hover去触发二级类目的展示,这种渐进式地引导,更能吸引用户去逛网站,去到处看看有什么惊喜,以此增加更多的商品露出与转化。

    网易严选的商品主要分为居家、餐厨、配件、服装、洗护、婴童、杂货、饮食、志趣这九大类目,共包含1000余种商品。其中适合企业采购的商品种类相对较少,也是严选企业购的类目导航设计得比较浅的原因之一。

    网易严选企业采购站 http://b.you.163.com 于2017年4月上线,目前运营近2个月,已获得近千企业用户认证。

    本文来自网易云社区,经作者柴蒙授权发布。

    原文地址:交互设计如何为业务赋能——谈谈网易严选企业采购的主页设计

    更多网易研发、产品、运营经验分享请访问网易云社区

  • 相关阅读:
    160328、rabbitMQ集群部署示例
    160325、虚拟机三种网路设置
    160324、特殊时间下拉框
    export export-default import 使用场景
    vue项目工具文件utils.js javascript常用工具类,javascript常用工具类,util.js
    如何在vuejs中抽出公共代码
    vue 各种 import 引入
    es6环境中,export与import使用方法
    基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
    JS获取子节点、父节点和兄弟节点的方法实例总结
  • 原文地址:https://www.cnblogs.com/163yun/p/9199069.html
Copyright © 2011-2022 走看看