美文网首页@IT·互联网设计
怎样设计一个优惠信息卡片—Part1#交互#设计思路

怎样设计一个优惠信息卡片—Part1#交互#设计思路

作者: 线框BOY | 来源:发表于2017-03-15 21:43 被阅读0次
    Cover

    前端时间接触了一个涉及电商优惠的需求,简单说就是收集印度各个电商的优惠内容(优惠券或者折扣)然后再统一提供给用户。因此,如何让用户能够快速、高效的找到自己想要的优惠信息是本次设计的重点。在最终的设计方案中,由于一条优惠内容包含的信息量比较大,相比于列表的样式,最终决定用卡片的样式去承载优惠信息。因此优惠信息卡片是一个很重要组成部分,其承载了主要的优惠信息及相关功能。

    首先明确一点,界面中的卡片是作为信息及功能的载体,去呈现给用户的。界面上的每一个设计都应该是有根据的,不能拍脑袋想当然,因此卡片上的信息和功能,作为一个个元素,其存在和摆放都应该是有原因的。

    回顾这次设计,我个人总结把设计卡片的过程分为三个部分:汇总元素、筛选元素、摆放元素

    汇总元素

    这个阶段其实就是你作为交互设计师,去吃透PRD的阶段。

    首先要去收集这个卡片上可能呈现的所有信息及功能,无论是PRD里面说明的,还是从交互的角度出发觉得需要在任务流程中提供给用户的,都需要先一一列举出来。

    PRD中列举出的信息有:标题、使用说明、对应的应用信息(icon+名称)、配图(banner),功能有:主要按钮(下载&打开&领码)。但是这些对用户来说足够了么?

    *题外话:“作为一个交互,接到PRD时最好都保持着一颗怀疑而又探索的心,因为你要知道产品是拥有修改需求的先手权的,完全跟着PRD走你会很被动,也体现不出一个交互的价值。” *

    抱着这种心态,我就去当地的一些优惠券提供网站逛了一圈。
    主要有两个:CouponRajaGabon

    优惠券卡片示例-CouponRaja

    以CouponRaja上的优惠内容为例,可以看到一条完整的优惠内容竟然需要包含这么多元素:描述(简单描述&详细描述)、优惠类型、优惠来源、配图、使用说明、适用品类&品牌、次要信息、主要功能按钮、次要功能按钮。

    而为什么PRD中的优惠信息只有那点呢?这里我想主要应该是产品经理考虑到商务运营在扒取内容和运营的工作量,所以只保留了最基本的信息。

    所以这时候交互应该考虑的是:

    **1.就目前的信息,对用户来说信息量够不够; **

    **2.如果够,该怎么展示,如果不够,还需要哪些信息,然后怎么展示。 **

    但是够不够不是拍脑袋说了算。由于做的是移动端的内容,肯定是不能把网页端所有的内容都全部弄过来的,要有取舍。这里我们就要从信息最饱和的情况下去分析每条信息的作用,才能去决定保留哪些信息。

    描述

    描述可以说是所有元素中最重要的一个了,因为其往往负责最先向用户传达该优惠信息的核心。

    描述示例-CouponRaja

    以CouponRaja上的为例,可以看到描述有两个,一个简单的一个详细的:左边的“Rs.300 OFF-300卢比折"扣和中间的“Flat Rs. 300 OFF on minimum purchase of Rs.999-最低购买满999卢比后享受300卢比折扣"。

    **左边的简单描述和右边的详细描述对比,看上去有点重复,但其实非常有利于用户快速聚焦信息,高效的找到自己想要的优惠内容。 **

    就好比你上淘宝,看到“50元优惠券”或者“5折促销”,而详细描述则是“满200减50”或者“适用于男装类产品”。那么很明显,先告诉用户“减50块钱"对用户的吸引度是大于告诉用户“你满了200我才给你减50”。

    **让用户先阅读单独的利益信息能瞬间勾起用户的消费欲望,而先阅读带上条件的利益信息,则会让用户提前知道了你的门槛。因此简单描述的权重是大于详细描述的,因为先利益后条件的信息展示顺序是比较符合商业目标和浏览逻辑的。 **

    毕竟在快速浏览信息的过程中,一句话的信息量对用户来说还是略大,而一个数字和一个单词的组合对用户的吸引力则非常直接。

    因此在优惠描述这里,将其拆分成简单描述和详细描述是有依据和道理的。

    优惠类型

    优惠类型示例-CouponRaja

    优惠类型是包括折扣(DEAL)和优惠券(COUPON)两种的,负责告诉用户当前的优惠内容的类型,是可以直接去买买买享受折扣,还是说需要领取一个优惠券。

    类型这里比较特殊,它虽然是一种信息,但它的表达方式却可以不仅仅局限于文字,也可以通过图形去表达,这个后面会细说。

    优惠来源

    来源自然不用说,肯定是需要的。比如这张100元优惠券是京东的、天猫超市周末全场8折,如果没写清楚那用户怎么知道这个优惠可以在哪里使用。

    配图

    配图可以理解为当前优惠内容的一个banner,往往是配合热门推荐的优惠内容一起使用,用图片去吸引用户的注意力,不过并不是所有的优惠内容都会有配图。

    使用说明

    某些情况下,优惠是需要满足某些特定的条件才能使用的,比如特点的时间、特点的商品种类以及某些限制。

    使用说明示例-饿了么

    *像饿了么这种外卖平台,商户都会有详细的优惠使用说明,有时候你会发现你明明达到了满减的金额,却没有减掉对应的钱,就是因为你的购物车里面有一些不符合满减条件的商品,而印度电商的优惠使用说明往往比这个还要复杂。使用说明的存在就是负责将这些复杂的使用规则、使用限制告诉给用户。 *

    适用品类&品牌

    适用品类&品牌示例-CouponRaja

    适用品类&品牌也应该算是使用说明的一种,比如告诉你这个优惠券可以在以下男士运用品牌使用:阿迪、耐克、匡威、新百伦等,负责对优惠内容的使用说明做进一步补充。

    次要信息

    次要信息可能包括很多,比如过期时间、优惠券真实性、最近被使用时间等。这些信息对用户来说可有可无,并不是决定性的信息,只是其中有一条比较特殊,那就是过期时间。因为会有这么一个场景:比如在淘宝中看到一个很实惠的优惠券,明天就到期了,觉得不用就亏了,然后马上就花掉了。这是一个潜在的消费心理,特别是印度用户,是很贪小便宜的,所以过期时间相对来说是比较有价值的。

    主要功能按钮&次要功能按钮

    按钮示例-CouponRaja

    对用户来说,每一条优惠内容最重要的功能就是领取这个优惠。而领取这个最终的目的,根据业务目标的不同,会衍生出很多不同的到达路径,比如点击按钮后要求注册&登录以拉新增用户或提高日活。因此根据路径的不同,反映到主要功能按钮上的点击反馈上也会不一样。

    而次要功能一般是分享、收藏、发送到手机&邮箱、添加到卡券包等主路径延伸场景,其都不影响用户完成主路径的操作,不是必备功能。

    优惠码

    优惠码示例-CouponRaja

    在所有的优惠券信息中,有一条隐藏信息比较特殊,就是优惠码。通常情况下只有优惠券会包含优惠码,这是由于印度当前电商环境所决定的,和国内淘宝、京东之类电商平台的优惠券有所不同。

    **优惠码在网页端通常是不直接露出的,需要用户付出一定的操作成本才会出现,因为如果直接露出,那用户来了复制了优惠码就走,对新增注册、日活、合作导量等业务目标都没有任何帮助。当存在优惠码的情况下,主要功能按钮就需要直接提示用户领取优惠码,刺激用户点击。 **


    分析完所有元素后,接下来就是要根据自身产品的业务目标,去决定留下哪些元素。

    由于自身的产品是一个应用商店,所有的需求最终导向的目的都应该是通过内容刺激用户下载,提高日活、留存以及发行系数。

    **因此对于优惠内容,在暴露给用户的过程中,应该做到最高效、最直接的传达,以刺激用户因为被优惠内容吸引,产生消费冲动从而生产下载行为。 **

    下一部分将说明如何去筛选这些元素的。


    非常感谢您的阅读,您的支持是我最大的动力!

    相关文章

      网友评论

        本文标题:怎样设计一个优惠信息卡片—Part1#交互#设计思路

        本文链接:https://www.haomeiwen.com/subject/sojhnttx.html