UI/UE产品体验日记丨22期

用户头像
北京/交互设计师/5年前/2321浏览
UI/UE产品体验日记丨22期
用户头像
杜昭

“设计的威严“交互社群群讨论精华

群精华01-关于表单横向还是竖向的设计区别


交互学习社群中每天都会讨论一些设计问题,今天为大家带来一篇陈哲同学整理的讨论精华内容


01背景

这是一款针对客运企业的产品,目标用户年龄层大约在40~50岁左右,这个群体的学习能力较为一般。本次主要是对产品中的“添加银行卡”这个表单进行设计优化。


02方案

虽然表单字段不多,但对于表单形式的选择上,还是做了2种结构:左右结构以及上下结构。

对于这两种形式,我在设计过程中其实也很犹豫,因为字段不多,考虑的点也比较局限,例如是否符合用户习惯?是否对这个年龄层的用户比较友好?等等

个人倾向于上下结构的方案,但思考点比较局限,主要从字段的字体大小、页面的利用率等方面,经过向一些朋友的请教之后,思路宽了很多,这里总结一下思考点。


03思考

视线流

从人眼的视线移动上来说,左右结构的情况下,人眼视线移动除了上下移动,还需要左右移动。而上下结构的形式,视线流更加自然,自上而下,更舒适。在视线流的考虑上,上下结构更优。


键盘遮挡

表单字段数量相同的情况下,在弹出键盘时,左右结构相对于上下结构来说,仍然可以展示更多的内容。在考虑键盘遮挡的场景下,左右结构更优。


用户习惯

产品面对的用户的年龄层是在40~50岁左右,如果我们不确定用户是否能够接受某个功能的设计,我们不妨参考一下在这个年龄层的用户经常使用的产品,例如各类银行APP。

当然目前市面上的银行APP大多体验都非常差,但这里想表达的是一种设计思路的拓展(招商银行的APP体验还不错,尤其是掌上生活,有兴趣的朋友可以去了解一下)。


有效性大于一致性

产品内出现的一致性问题,其实很少能够被用户所发现,后台收到的用户反馈,很少出现关于一致性的问题,但设计师一定要有足够的自驱力去主动发现一致性问题。

在一致性的问题上,我们所追求的,并不是盲目的一致,我们需要去考虑不同的场景。因为有效性比一致性更重要。

例如上面关于键盘遮挡的问题,当表单字段少时,上下结构体现出了他的优势,但如果我们强制让整个产品的每个表单都用这种形式,当遇到表单字段多的情况时,左右结构明显更适合。

所以,有效地让用户完成他的目标,比一致性更加重要。只要能够更好地达成用户目标,不同场景下可以有不同的设计方案。

建议:当表单字段小于5个时,推荐上下结构;当表单字段大于5个时,左右结构更优。


交互方案优化

有朋友会认为,目前的上下结构的设计方案,标题字体太小,不利于用户阅读。针对这个问题,目前很多产品也提供了上图的类似方案:默认显示大标题,当点击标题后,标题缩小到左上角。


总结

1.上下结构的的表单的视线流要优于左右结构

2.表单要注意键盘遮挡的问题

3.尝试了解目标用户的使用习惯,例如了解他们常用的产品

4.有效性大于一致性,要根据场景做设计

细心的朋友可能留意到,我的设计方案上,对于银行卡号的输入和开户支行的输入,其实通过技术、数据等手段,可以有更好的解决方案,例如拍照识别、数据库支持等,但基于某些原因,本人也无奈ing...

虽然如此,但我们一定要保持自己的自驱力,哪怕被某些条件所限制,也不能停止思考!


细心的朋友可能留意到,我的设计方案上,对于银行卡号的输入和开户支行的输入,其实通过技术、数据等手段,可以有更好的解决方案,例如拍照识别、数据库支持等,但基于某些原因,本人也无奈ing... 虽然如此,但我们一定要保持自己的自驱力,哪怕被某些条件所限制,也不能停止思考!




群精华02:不要随意改变用户的习惯


橙子同学为大家带来一篇关于用户心智模型的内容


大家好,我是橙子。最近作者在登录cctalk的时候出现了一个让我觉得很麻烦的情况,场景是这样的:

看到登录界面,作者预测下一步操作就是发送验证码-等待验证码-接收验证码-复制-登录,于是根据以往其他app的登录经验,我觉得用微信登录可能快一点,可以省去操作验证码的时间。



于是选择了“其他登录方式”,出来的界面是左图这样的,由于我之前内心已经有了”用微信登录“的预想操作,所以当这个界面出来的时候,作者情不自禁地找到了绿色的图标,并没有仔细看清楚就快速点击了,结果跳转页面是右图:



然后发现哪里不太对,怎么是沪江账号?返回才发现,原来自己看错了图标,因为他们都是绿色的,并且沪江的这个图标放在了常规的微信的位置上,qq图标的旁边。一般情况下,微信的位置是这样放置的:



用户已经养成了固有的视觉习惯,相信会有很多用户像作者一样,有了使用习惯,同时希望更快地达到登录目的,但是在cctalk的登录操作体验就是绕了一个圈子。


产品设计者把微信登录放到按钮里面,看似提高了微信登录的权重,但是为了产品视觉统一性,把按钮的颜色改为了蓝色,这样反而让一些已经有了其他产品使用习惯的用户容易误操作,去点击下方绿色的沪江账号登录。



其实即使提高微信登录的权重,也有不伤害用户习惯的方法,那就是不改变微信登录的颜色,这样虽然打破了产品统一性,但是我们知道,做设计的时候有效性大于一致性。我们不能盲目地追求一致,而是应该在具体问题中去权衡,看看哪个方案能让用户更快速有效地完成他的目标。


如果一个设计细节,整个行业的主流都是这个方式,而用户已经习惯了,我们不一定要冒险改变它,并且权衡是否有必要让用户付出学习成本。




群精华03:从微信读书的按钮看有效性大于一致性



梨仔同学为大家带来微信读书的一篇精华内容


微信读书的“读就送”页面可以限时领取免费书籍,当我们将该页面的书籍加入书架并阅读5分钟后,该书就免费送给用户。


微信读书里还有很多活动可以免费获取书籍,例如免费图书馆、免费听书馆是通过分享书籍给微信好友来获取该书,朋友如果点击了你的分享,“分享领取”按钮就变成了“阅读”按钮,用户就可以通过按钮的状态来判断是否已经获取了该书。书城里的免费书则直接可以点击“领取”按钮来领取,领取过后“领取”按钮消失,以示区分领取前后的状态。



问题

“读就送”活动里的书籍,在获取后按钮样式并没有发生改变,导致作者常常需要去查看“已购内容”来判断是否已经获得了该书。那么为什么“读就送”按钮没有在获取前后进行样式上的区分呢?

以下是作者的思考:


分析

阅读类或者视频类娱乐类APP里都有一个重要的数据指标就是“用户使用时长”,包括人均使用时长和总使用时长,当用户使用时间越长,投入越多,那么代表着用户粘性越大,抛弃这款产品的可能性也就越小。

如果用户为了获取某本书而读了5分钟后,按钮样式改变了,用户很可能还没有足够大的动力在短时间内继续阅读该书,毕竟先收藏一个内容然后等到时机成熟再去具体研究是很多人的习惯,所以作者猜测,设计者故意将按钮不做区分以鼓励用户投入更多的时机去阅读。


那么跟分享相关的按钮为什么要进行样式区分呢?

作者有以下猜测:

首先当我们点击“分享领取”后,会跳转到微信,也没有让用户去选择是分享到好友还是分享到朋友圈,是直接分享给微信好友,这样好友帮你点击的概率应该是很大的,所以我们只用分享很少的次数就会获得该书,这样分享的目的也就达到了。

那么接下来,依然是引导用户去阅读去收听,以占用用户更多的时间,所以按钮的样式就改成了更加显眼突出的“阅读”、“收听”按钮。


总结

通常情况下,在点击某个链接或者按钮过后对其样式进行区分,可以帮助用户快速进行区分,将注意力放在还没点击过的链接或按钮上。

但是我们在设计按钮的样式时,会根据具体的业务目标进行相应的设计,而不是用相同的逻辑设计所有的按钮,虽然设计的一致性是降低用户认知成本的重要原则,但是有效性是要高于一致性的。 




群精华04:拼多多是如何套路用户的?


梨仔同学为大家带来微信读书的一篇精华内容


前段时间发现个好玩的事情,之前对于拼多多砍价,除非人家私发我,一般不帮群里人砍,然后家里群的堂妹,一直量数字,还有2毛1,过了一会儿还有1毛8,又过了一会儿还有1毛5,我看她快砍成了居然就帮她砍了。


当时就感觉,这招可以啊,比干叫人帮忙砍强多了,如果我帮她砍了,而且她还砍成了,那我这个成就感就大大增强了。



那么拼多多里面都用了哪些方法来提高转化呢?


套路一:已砍掉99.99%,只差0.01%啦

拼多多里的砍价逻辑是前5%的人帮你砍掉价格的95%,后95%的人帮你砍掉剩下5%的价格。

离成功只有一步之遥的时候,用户去完成的动力是比较大的。

这就跟进度条走到99%时再停止,一般人就更有耐心继续等下去是一个道理。

(前段时间经常有人找我助力,不知道是不是双十一前奏)


套路二:仅需3步,第1步先把冰箱门儿打开...

展示具体步,让用户有个看似很容易的心理预期,也让用户知道自己当前所处的位置。

看下面两个图的提示,都还需要两步,感觉还蛮容易的。

(下左图为砍价免费拿,下右图为现金签到页面。看到没有,左图商品价格为0元,是不是很诱人?总之就是步骤又少,价格又美丽!)


套路三:来点接地气的案例

拼多多充分利用产品的社交属性,利用身边人的成功案例来吸引用户加入。


套路四:天上掉了个大馅饼

是不是总感觉自己是中奖绝缘体?在拼多多里,用户总是这么幸运,无论是幸运转盘还是幸运抽奖,你总数最幸运的那个。



套路五:别走啊,再多给你点

领现金页面,当点击返回时,会再多送用户一点来挽留用户,并配以“还有更多现金可以领取哦”的文案来引诱用户。


套路六:有人需要我,有人在等我

对,作者就曾经单纯的以为这样真的会帮到对方,于是就真的选择了一个商品去砍,从这件事也让作者发现这类文案的引导作用。所以说只要方法正确,大部分人还是很乐意助人为乐的!


套路七:好评如潮,不回本包退

用户说好才是真的好,晒出好评标签,不回本包退,解决用户后顾之忧


套路八:是选择题,不是选做题

在充值中心,作者又一次被幸运砸中,于是经过深思熟虑之后,作者选择了第二个方案。

让用户做选择题,能提高用户的参与度。就好比妈妈今天问你:宝贝,咱们今晚是吃猪肉炸酱面还是西红柿鸡蛋打卤面?那你的答案一般就会是这两种择一。


套路九:不要犹豫,立马下单

优惠的时效性对于转化的提升是很有帮助的,所以拼多多连购物车都没有。


套路十:这便宜占的明明白白的

作者在第一次用拼多多时就买了好几款商品,靠的就是“已补XX元”来做决策的,你看下面这个桂圆就不错,补贴了10.7元,这便宜我得占!


这些方法在用户使用初期应该是为转化的提高做出了贡献的,只要用户被其中的一个活动所吸引,那么这个产品在用户的记忆里就会留下了印象,接下来买东西想起这款应用的可能性就会增加,活动的目的也就达到了。



30
阅读原文
|
举报
|
42
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
城市园林平面布局航拍
平面设计 吊牌设计
牛奶乳液层次梯田平铺平面
牛奶乳液层次平面平铺平面
平面人物插画
城阙凡花
倒计时,海报,平面
金色颗粒质地的平面
金色颗粒质地的平面
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
平面男孩喝咖啡插画设计
中国传统纹样创新图案设计
水蜜桃和李子的平面水果图案
古风平面仕女与瓷器
城市园林平面布局航拍
空的平台平面和自然景观
金色颗粒质地的平面
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
空的平台平面和自然景观
平面插画情侣/矢量
“知识宅急送”外卖,快递,平面,海报,素材,教育
玄关入门地毯印花图案红地毯
平面花卉图案扁平简约无缝拼接插画
城市园林平面布局航拍
你可能喜欢
相关收藏夹
大家都在看
登录注册