App收银台交互设计思考


数十万互联网从业者的共同关注!

作者:柒0。作者授权早读课转载。
来源:简书
编辑:Juvae

最近完成了“app收银台设计重构”的需求(一期为“账户充值”),作为一个刚毕业的交互新人,踩了一些坑,总结了这次思考的过程与大家分享,不正确之处还请多多指正。

定义

app收银台:在移动端进行支付、账户充值时所调用的功能模块。


业务背景

我们公司的app主打移动支付功能。

需求分析

收银台是我们公司app内已存在的功能模块,产品经理打算整体改版,一期先从“账户充值”入手。

收银台在支付类app涉及的场景较多,任何改动都可谓“牵一发动全身”。在做账户充值的交互方案时需要把其他场景都考虑齐全,以保证交互方案可以适用app内包含的所有场景。

通过与产品经理沟通,确定使用收银台的场景如下:

App收银台交互设计思考

图1.app收银台包括的场景

其中账户充值与其他场景不同的是,账户充值的资金源不包括:账户余额、白条;而且不参与优惠活动,没有折扣、代金券。


梳理流程

App收银台交互设计思考

图2.账户充值整体流程

上图包括主流程账户充值和子流程绑定银行卡(下文简为“绑卡”),这2个流程如何结合有讲究。

关于流程的设计有两个注意的点:

1、用户未绑卡时,打开充值页面,应该如方案一让用户输入金额后自动跳转绑卡流程,还是如方案二页面上只有绑定银行卡的功能,让用户先去完成绑卡整个子流程再进入充值流程?

方案一

App收银台交互设计思考

图3.未绑卡方案一

方案二

App收银台交互设计思考

图4.未绑卡方案二

个人认为让用户先输金额后自动跳转绑卡流程会好一些。理由如下:

(1)未绑卡时先输入金额,使未绑卡和已绑卡的完成充值流程保持更高的一致性;

(2)用户从上个页面进入到此页面是为了充值,如果一进来让用户去绑卡,会让用户觉得莫名其妙,先输入金额更符合用户的心智模型。

2、未绑卡时,用户完成绑卡流程后,跳转至哪个页面,应该采取下图的方案一还是方案二

方案一

App收银台交互设计思考

图5.绑卡后方案一

方案二

App收银台交互设计思考

图6.绑卡后方案二

从用户体验的角度来说,自动跳转至支付密码页是最好的(即方案二),整个过程很自然流畅,跳转到已绑卡充值流程的首个页面完全是多余的一个步骤。

但此次我选择的却是方案一,原因在于一个合理的交互方案应当适当配合后台开发的设计逻辑。

我一开始也没意识到前端的一个页面,竟有可能牵扯到后台整个逻辑的改变。

方案一对应的后端逻辑如下:

App收银台交互设计思考

图7.绑卡后后端方案一

方案二对应的后端逻辑如下:

App收银台交互设计思考

图8.绑卡后后端方案二

方案二在后端相当于把两个各自独立的流程打通,把绑卡流程嵌入到充值流程中。而在我们公司,后端是分开维护充值流程和绑卡流程的,如采用方案二需要花费大量精力重新设计后台,成本过高。


交互细节


1、选择资金源弹层

App收银台交互设计思考

图9.选择资金源弹层

可以很直观地看出页面二在视觉上更聚焦,页面一所有内容平铺显示,视觉中心不够突出。但当列表项较多时,页面二不容易滚动选中想要的资金源,且不可用资金源在该方式下需要隐藏。

2、输入支付密码弹层or页面

App收银台交互设计思考

图10.输入支付密码两种方式

跟产品经理争论了很久输入支付密码时应该用整屏的页面还是半透明弹层。

产品经理的理由有两个,一是使用整屏的页面无需考虑数字安全键盘在不同屏幕的适配问题(数字安全键盘由外部提供,我们公司内部可控性较低),二是微信在支付过程也出现整屏输入支付密码的页面。


我一开始也纳闷,为什么微信会在收银台使用两种输入支付密码方式(微信截图如下)?


App收银台交互设计思考

图11.微信输入支付密码两种方式截图

思考清楚后,发现弹层和页面分别对应着两种不同的场景。

弹层的场景是:输入支付密码为了达到某个目标(充值、提现、转账等),此场景下输入支付密码只是流程中的一个步骤,希望用户快速操作以达到目标。

页面的场景是:输入支付密码本身就是目标(验证身份),所以此处交互上并没有希望用户快速输入,反而需要用户较为仔细慎重地进行操作。

3、总结了金额输入框的数字金额规则,如下

a、首位输入小数点,输入框显示为“0.”;

b、首位输入“0”后,输入框显示为“0.”;删除小数点时,输入框同时删除“0.”(此处原来想的是如果输入“081”,输入框显示“81”,跟同事讨论时,同事觉得“0”在数字键盘上的位置,用户误操作的可能性较低。我俩还拿了传统的计算器看首位输入“0”的效果,最终敲定方案);

c、小数点后只能有两位数字,继续输入,输入框无反应;

d、不可输入两次小数点,第二次输入小数点时,输入框无反应。

4、xx卡充值时输入框的规则(xx卡是我们公司内部的充值卡,类似话费卡充值;卡号为16位,密码为8位。)

App收银台交互设计思考

图12.xx卡充值

a、为保证卡号的可读性,卡号每4位中间隔空格,若用户发现输入错误,要删除,务必删除“空格”;

b、密码不需要脱敏(因为纸质的xx卡上就印有密码,所以app内也没必要做“不可见”处理;另外密码不是用户自己设置的,密码可见可降低输错率);

c、如果卡号超过16位,再输入字符,输入框没有反应;如果密码超过8位,再输入字符,输入框没有反应;

d、卡号一输入,及时未满16位,“下一步”按钮高亮;密码未输满8位,“下一步”按钮置灰(此处考虑到卡号为16位,位数较长,用户单肉眼看可能不容易发现输漏,点击按钮后弹窗提示更为直观)。

投稿邮箱:mm@zaodula.com

本文由作者授权早读课发表,转载请联系作者。

3月29日,100offer 邀请了被称作「架构师的摇篮」的阿里中间件参加知乎 Live。

阿里中间件承载了世界上最有挑战的场景,应对了一次次双十一的流量洪峰,他们对人才的要求指引优秀架构师之路的方向。

扫描二维码,参与 Live 会让你了解怎么样的架构师才能胜任顶尖团队中的工作。

App收银台交互设计思考

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/32925/

(0)
TinadminTinadmin
上一篇 2017-08-01 13:41
下一篇 2017-08-01 14:49

相关推荐

  • app反馈信息的交互设计

    请戳“小白的交互设计”,关注我,么么哒。反馈的作用是帮助用户理解系统行为,合理的反馈就像两个用普通话交流的人之间的对话,互相可以轻易地理解,而糟糕的反馈就像是一个用普通话,一个用粤语的两个人之间的对话…

    2017-08-02
  • 近五年新起的十大热门职业,交互设计5年增长了22倍!

    6,交互设计师/用户体验师
    5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了。

    交互专题 2016-10-25
  • 交互设计--需求分析的20条法则

    来源:UI新动态对商业用户来说,他们后面是成百上千个供货商,前面是成千上万个消费顾客。怎样利用软件管理错综复杂的供货商和消费顾客,如何做好精细到一个小小调料包的进、销、调、存的商品流通工作,这些都是商…

    2017-08-02
  • 移动视觉与交互设计10项法则自查表

    转自:设计夹(ID:sezign)英文:medium译者:孙怡娜Photo by Medium近年来,移动手机风靡全球。用户们也已经习惯依照一定的法则在移动端获取信息。在这个微渺的事物就可以定胜负的世里,开发者们需要去了解并迎合…

    2017-08-01
  • 交互设计不是你以为的那样,思考过这些才能入门

    作者:UI中国会员 呆呆丶, 交互设计师转载请务必注明。原文链接:http://www.ui.cn/detail/138186.html封面题图 by 设计师 Ken Lo1  新手对交互设计的几个误区  交互设计是做动效的(如果你是这么认为的…

    2017-07-31
  • 交互设计的未来在哪?

    这是2017年的第13篇文章除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和…

    2017-08-01
  • 功能确定之后,如何做好产品的交互设计?

    功能和数据都确定下之后,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓准了,我…

    2017-08-03
  • 【10min学交互设计精髓】做产品要有风度(9)

    图片来源于网络小伙伴萌,有一周没见了,有没有想我呀~~快来看看今天咱们讨论些什么,有任何想法和建议都可以给我留言哦。我们常常谈起情商,人与人的相处方式。作为pm,有没有想过产品和人的相处方式呢?这个课题…

    2017-08-01
  • 为什么我推荐使用Flinto做高保真交互设计稿?

    静电说:其实Flinto并不算一个新鲜的工具了,但是感觉在设计师中的流行程度并不高,可能是这个工具一直很低调的原因吧。在16年初,Flinto还只是个可以做连连看的工具,跟其它同类型的工具并没有太多的区别。但是随…

    2017-08-01
  • 职业病又犯了,我从交互设计角度分析了《得到》App…

    我是《逻辑思维》的 期期都听 忠实听众,也许有很多人对老罗不置可否,但我自己是非常喜欢的,可能也是由于我知识结构和老罗相差太远,但我一点也不觉得丢脸,谁叫他比我 老 大呢。以前我们都知道,喜马拉雅是逻辑…

    2017-08-04