从零开始学交互

浅谈微信应用交互设计

0
登录或者登记去做吧。

微信应用相信大家都不陌生,比如前段时间风靡朋友圈的神经猫,就创造了三天过亿访问量的神话,开发一款好玩有趣的微信应用,通过微信朋友圈的自发传播,达到品牌和产品的有效推广,是当下很多企业都在尝试的,但事实上成功的却不多,在我看来除却创意不够奖励不够以外,很重要的一点就是在交互设计上有很大问题。

正好今天看到北京现代推出了一个“拼人品 筹爱心 抢ix25”的微信应用,创意挺不错的,用户可以先回答问题进行人品测试,人品100分的就可以领取“人品证”,凭此证有机会抽取价值十几万的ix25汽车,当然测试结果肯定都是不达标的,但用户可以将测试结果分享给好友通过众筹来补充人品,微信支付1块钱等于1点人品,每个好友最多可以购买5点人品,所有购买人品的款项主办方最终会捐给慈善机构。

这样有创意的一个微信应用,在交互设计上却问题多多,老贼分享到朋友圈里后也有不少人吐槽,干脆拿出来点评一下,希望能够给其他朋友一些启发。

浅谈微信应用交互设计

先来说首页,美工不错设计的很漂亮,但是那么大一张图片在非WiFi环境下加载速度是有点慢的,毕竟这个不是单纯的广告或者活动宣传,而是要用户去玩的,首页加载速度过慢很多人就失去耐心。

另外我用红框标注的这个区域有个“同意遵守活动规则”的勾选,估计是因为活动有牵涉到众筹和捐款环节,因此主办方希望通过这样来规避法律风险,想法没错但设计上应该默认勾选即可,很多用户上来就会点击开始测试,但却收到系统提醒,然后返回再勾选(勾选那个框又很小很难选中),然后开始测试,你觉得手机用户的耐心真的有那么好吗?

浅谈微信应用交互设计

再说活动规则页,那么密密麻麻的一列规则为什么不能拆解到每个活动步骤里呢?虽然很细心的加了一个上下滑动的提示,但更好的做法是不需要滑动直接在页面中现实完整,可能是考虑整个页面的整体美观,但绝对不是破坏用户体验的接口。

浅谈微信应用交互设计

再来说说答题界面,我不知道做前端的是不是妹子,负责测试的人手指是不是特别纤细,反正这四个选项行距挨那么紧,字那么小,你让我们这样的大老爷们情何以堪啊!还是那句话,美观的前提得用户操作时方便!

浅谈微信应用交互设计

测评结果页就更无厘头了,我实在不知道为什么我要分享这个页面?就因为我的人品才60点吗?以前常见的测试是分享后才能看结果,这个是分享的动力,这个游戏是分享后让好友帮忙补充到100的人品,但是这个页面上啥提示也木有。如果不认真看前面游戏规则的话可能连好友补充人品是要付钱这件事都不知道。


通常是不会有人去认真阅读游戏规则的,事实上一个好的活动根本不需要文字规则说明!你见过微信有新手引导这个步骤么?

浅谈微信应用交互设计

微信应用能够起到传播功能很大的关键就是朋友圈分享,而其中重要一点就是分享文案是否吸引人,但很可惜的是这个微信应用的分享文案废话一堆,却无法直击人心,同时和玩家也无任何关联,怎么可能带动社交传播呢?要知道这是崇尚自我的时代,没有个人标签的文字就是没有灵魂的。

浅谈微信应用交互设计

好友查看人品页面也有问题,明明是获取了用户信息,但是在这里却没有显示,同时补充人品时需要支付相应费用也没有说明,当用户点击金额时会直接出现微信支付,估计很多用户会本能的退出,以为是被骗了。

浅谈微信应用交互设计

让用户获得好友赞助,补充满100点人品后会获得人品证,但奇怪的是这里本该是鼓励用户去装逼分享的,但这里却没有任何提示,还有就是北京现代的公众号是服务号是有模板消息功能的,当有好友给你赞助时为什么不能发个提示让用户去感谢好友呢?另外就是到底有那些好友给你赞助了貌似也没有地方可查,老贼我在摸索半天后才找到。

浅谈微信应用交互设计

用户参加完活动后再次进入首页后右上角有那么个不起眼的入口……点击后可以进入查看赞助详情。我估计设计这个页面的人做PC端活动做习惯了,在PC端如果这里埋一个链接,鼠标滑过时会变,那么用户就知道这个地方是可以点击的,但是手机上……我可是按遍整个屏幕才找到的!

总结一下,微信应用的设计精髓是“简单好玩能攀比”,这七个字不仅仅是在创意上体现,更要在整个应用的文案、美工、前端和开发上都要进行体现,在用户进入应用前,开始在应用内的玩,每一步操作每一步引导,跳出应用后的分享,分享后的反馈,都要花心思从用户角度考虑体验,从手机操作考虑交互,才有可能做出用户都爱玩都分享的微信应用。

有兴趣的朋友可以点击原文阅读,体验下北京现代这个微信应用,创意是真不错,交互上的问题欢迎交流!

ZTalk@每日一曲


The Rags的《Owner of a Loveless Life》,不列颠复古摇滚的气息

使用指南:关注本公众号后,在底部菜单中点击每日一曲即可欣赏最新歌曲!或者直接输入“V”更可作为微信背景音乐欣赏!

浅谈微信应用交互设计

浅谈微信应用交互设计

交互设计初体验(iUED)
微信10个交互设计细节问题的探讨(下)